[Look&Feel] Consistency and density improvements (#2101)

* Look&Feel Modal Changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Look&Feel EuiTabs Changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Look&Feel Semantic Headers and Paragraph Changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Look&Feel Context Menu Changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Look&Feel External Button Changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Look&Feel Navigational Button Changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Look&Feel Render Component Changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Fixed jest and cypress testing Signed-off-by: Dan Dong <danieldong51@gmail.com> * Fixed jest and cypress testing Signed-off-by: Dan Dong <danieldong51@gmail.com> * Revert button changes Signed-off-by: Dan Dong <danieldong51@gmail.com> * Updated jest testing Signed-off-by: Dan Dong <danieldong51@gmail.com> --------- Signed-off-by: Dan Dong <danieldong51@gmail.com> Co-authored-by: Derek Ho <dxho@amazon.com>
opensearch-project · Aug 26, 2024 · c143bce · c143bce
1 parent b1148fb
commit c143bce
Show file tree

Hide file tree

Showing 33 changed files with 202 additions and 172 deletions.
diff --git a/public/apps/account/password-reset-panel.tsx b/public/apps/account/password-reset-panel.tsx
@@ -27,7 +27,7 @@ import {
   EuiModalFooter,
   EuiOverlayMask,
   EuiSpacer,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { FormRow } from '../configuration/utils/form-row';
@@ -104,9 +104,9 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
       <EuiModal data-test-subj="reset-password-modal" onClose={props.handleClose}>
         <EuiSpacer />
         <EuiModalBody>
-          <EuiTitle>
-            <h4>Reset password for &quot;{props.username}&quot;</h4>
-          </EuiTitle>
+          <EuiText size="s">
+            <h2>Reset password for &quot;{props.username}&quot;</h2>
+          </EuiText>
 
           <EuiSpacer />
 

diff --git a/public/apps/account/role-info-panel.tsx b/public/apps/account/role-info-panel.tsx
@@ -17,7 +17,6 @@ import {
   EuiModalBody,
   EuiOverlayMask,
   EuiText,
-  EuiTitle,
   EuiHorizontalRule,
   EuiSpacer,
 } from '@elastic/eui';
@@ -48,29 +47,29 @@ export function RoleInfoPanel(props: { coreStart: CoreStart; handleClose: () =>
       <EuiModal data-test-subj="role-info-modal" onClose={props.handleClose}>
         <EuiSpacer />
         <EuiModalBody>
-          <EuiTitle>
-            <h4>Roles ({roles.length})</h4>
-          </EuiTitle>
-          <EuiText color="subdued">
+          <EuiText size="s">
+            <h2>Roles ({roles.length})</h2>
+          </EuiText>
+          <EuiText color="subdued" size="s">
             Roles you are currently mapped to by your administrator.
           </EuiText>
           <EuiSpacer />
           {roles.map((item) => (
-            <EuiText key={item}>
+            <EuiText key={item} size="s">
               {item}
               <br />
             </EuiText>
           ))}
           <EuiHorizontalRule />
-          <EuiTitle>
-            <h4>Backend roles ({backendRoles.length})</h4>
-          </EuiTitle>
-          <EuiText color="subdued">
+          <EuiText size="s">
+            <h2>Backend roles ({backendRoles.length})</h2>
+          </EuiText>
+          <EuiText color="subdued" size="s">
             Backend roles you are currently mapped to by your administrator.
           </EuiText>
           <EuiSpacer />
           {backendRoles.map((item) => (
-            <EuiText key={item}>
+            <EuiText key={item} size="s">
               {item}
               <br />
             </EuiText>

diff --git a/public/apps/account/tenant-switch-panel.tsx b/public/apps/account/tenant-switch-panel.tsx
@@ -26,7 +26,6 @@ import {
   EuiCompressedRadioGroup,
   EuiSpacer,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { keys } from 'lodash';
@@ -286,9 +285,9 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
       <EuiModal data-test-subj="tenant-switch-modal" onClose={props.handleClose}>
         <EuiSpacer />
         <EuiModalBody>
-          <EuiTitle>
-            <h4>Select your tenant</h4>
-          </EuiTitle>
+          <EuiText size="s">
+            <h2>Select your tenant</h2>
+          </EuiText>
 
           <EuiSpacer />
 

diff --git a/public/apps/account/test/__snapshots__/role-info-panel.test.tsx.snap b/public/apps/account/test/__snapshots__/role-info-panel.test.tsx.snap
@@ -8,53 +8,63 @@ exports[`Account menu - Role info panel renders 1`] = `
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Roles (
           2
           )
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiText
         color="subdued"
+        size="s"
       >
         Roles you are currently mapped to by your administrator.
       </EuiText>
       <EuiSpacer />
       <EuiText
         key="role1"
+        size="s"
       >
         role1
         <br />
       </EuiText>
       <EuiText
         key="role2"
+        size="s"
       >
         role2
         <br />
       </EuiText>
       <EuiHorizontalRule />
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Backend roles (
           2
           )
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiText
         color="subdued"
+        size="s"
       >
         Backend roles you are currently mapped to by your administrator.
       </EuiText>
       <EuiSpacer />
       <EuiText
         key="backend_role1"
+        size="s"
       >
         backend_role1
         <br />
       </EuiText>
       <EuiText
         key="backend_role2"
+        size="s"
       >
         backend_role2
         <br />

diff --git a/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap b/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap
@@ -8,11 +8,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
@@ -120,11 +122,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
@@ -235,11 +239,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
@@ -350,11 +356,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
@@ -465,11 +473,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"

diff --git a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
@@ -23,6 +23,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import { cloneDeep, set, without } from 'lodash';
@@ -221,9 +222,9 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
           coreStart={props.coreStart}
           fallBackComponent={
             <EuiPageHeader>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>General settings</h1>
-              </EuiTitle>
+              </EuiText>
             </EuiPageHeader>
           }
           resourceType={ResourceType.auditLogging}

diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -61,7 +61,7 @@ function renderStatusPanel(onSwitchChange: () => void, auditLoggingEnabled: bool
       <EuiForm>
         <EuiDescribedFormGroup title={<h3>Storage location</h3>} className="described-form-group">
           <EuiCompressedFormRow className="form-row">
-            <EuiText color="subdued" grow={false}>
+            <EuiText color="subdued" grow={false} size="s">
               <FormattedMessage
                 id="audit.logs.storageInstruction"
                 defaultMessage="Configure the output location and storage types in {opensearchCode}. The default storage location is {internalOpenSearchCode}, which stores the logs in an index on this cluster."
@@ -264,9 +264,9 @@ export function AuditLogging(props: AuditLoggingProps) {
         navigation={props.depsStart.navigation}
         fallBackComponent={
           <EuiPageHeader>
-            <EuiTitle size="l">
-              <h3>Audit logging</h3>
-            </EuiTitle>
+            <EuiText size="s">
+              <h1>Audit logging</h1>
+            </EuiText>
           </EuiPageHeader>
         }
         resourceType={ResourceType.auditLogging}

diff --git a/...ic/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap b/...ic/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
@@ -274,13 +274,13 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     }
     fallBackComponent={
       <EuiPageHeader>
-        <EuiTitle
-          size="l"
+        <EuiText
+          size="s"
         >
-          <h3>
+          <h1>
             Audit logging
-          </h3>
-        </EuiTitle>
+          </h1>
+        </EuiText>
       </EuiPageHeader>
     }
     navigation={Object {}}
@@ -309,6 +309,7 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
           <EuiText
             color="subdued"
             grow={false}
+            size="s"
           >
             <FormattedMessage
               defaultMessage="Configure the output location and storage types in {opensearchCode}. The default storage location is {internalOpenSearchCode}, which stores the logs in an index on this cluster."
@@ -705,13 +706,13 @@ exports[`Audit logs should load access error component 1`] = `
     }
     fallBackComponent={
       <EuiPageHeader>
-        <EuiTitle
-          size="l"
+        <EuiText
+          size="s"
         >
-          <h3>
+          <h1>
             Audit logging
-          </h3>
-        </EuiTitle>
+          </h1>
+        </EuiText>
       </EuiPageHeader>
     }
     navigation={Object {}}

diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -14,7 +14,7 @@
  */
 
 import React, { useContext } from 'react';
-import { EuiLoadingContent, EuiPageHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiLoadingContent, EuiPageHeader, EuiSpacer, EuiText } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { AuthenticationSequencePanel } from './authentication-sequence-panel';
 import { AuthorizationPanel } from './authorization-panel';
@@ -87,9 +87,9 @@ export function AuthView(props: AppDependencies) {
           navigation={props.depsStart.navigation}
           coreStart={props.coreStart}
           fallBackComponent={
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>Authentication and authorization</h1>
-            </EuiTitle>
+            </EuiText>
           }
         />
         {accessErrorFlag ? (
@@ -118,9 +118,9 @@ export function AuthView(props: AppDependencies) {
         appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>Authentication and authorization</h1>
-            </EuiTitle>
+            </EuiText>
             {!loading && !errorFlag && props.config.ui.backend_configurable && (
               <ExternalLinkButton
                 href={DocLinks.BackendConfigurationDoc}

diff --git a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
@@ -28,13 +28,13 @@ exports[`Auth view should load access error component 1`] = `
       }
     }
     fallBackComponent={
-      <EuiTitle
-        size="l"
+      <EuiText
+        size="s"
       >
         <h1>
           Authentication and authorization
         </h1>
-      </EuiTitle>
+      </EuiText>
     }
     navigation={Object {}}
   />