[Look&Feel] refactor to use semantic header for page, modal and flygout

Signed-off-by: Zhongnan Su <szhongna@amazon.com>
opensearch-project · Jul 9, 2024 · 60d41e4 · 60d41e4
1 parent 3a32191
commit 60d41e4
Show file tree

Hide file tree

Showing 21 changed files with 203 additions and 145 deletions.
diff --git a/...ic/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap b/...ic/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
diff --git a/...c/application/components/dashboard_top_nav/top_nav/__snapshots__/clone_modal.test.js.snap b/...c/application/components/dashboard_top_nav/top_nav/__snapshots__/clone_modal.test.js.snap
diff --git a/...plugins/dashboard/public/application/components/dashboard_top_nav/top_nav/clone_modal.tsx b/...plugins/dashboard/public/application/components/dashboard_top_nav/top_nav/clone_modal.tsx
@@ -166,10 +166,14 @@ export class DashboardCloneModal extends React.Component<Props, State> {
       >
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <FormattedMessage
-              id="dashboard.topNav.cloneModal.cloneDashboardModalHeaderTitle"
-              defaultMessage="Clone dashboard"
-            />
+            <EuiText size="s">
+              <h2>
+                <FormattedMessage
+                  id="dashboard.topNav.cloneModal.cloneDashboardModalHeaderTitle"
+                  defaultMessage="Clone dashboard"
+                />
+              </h2>
+            </EuiText>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 

diff --git a/src/plugins/dashboard/public/application/utils/get_no_items_message.tsx b/src/plugins/dashboard/public/application/utils/get_no_items_message.tsx
@@ -5,7 +5,7 @@
 
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
-import { EuiButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
+import { EuiButton, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 
 export const getNoItemsMessage = (
@@ -18,12 +18,14 @@ export const getNoItemsMessage = (
       <EuiEmptyPrompt
         iconType="dashboardApp"
         title={
-          <h1 id="dashboardListingHeading">
-            <FormattedMessage
-              id="dashboard.listing.noItemsMessage"
-              defaultMessage="Looks like you don't have any dashboards."
-            />
-          </h1>
+          <EuiText size="s">
+            <h1 id="dashboardListingHeading">
+              <FormattedMessage
+                id="dashboard.listing.noItemsMessage"
+                defaultMessage="Looks like you don't have any dashboards."
+              />
+            </h1>
+          </EuiText>
         }
       />
     );
@@ -33,12 +35,14 @@ export const getNoItemsMessage = (
     <EuiEmptyPrompt
       iconType="dashboardApp"
       title={
-        <h1 id="dashboardListingHeading">
-          <FormattedMessage
-            id="dashboard.listing.createNewDashboard.title"
-            defaultMessage="Create your first dashboard"
-          />
-        </h1>
+        <EuiText size="s">
+          <h1 id="dashboardListingHeading">
+            <FormattedMessage
+              id="dashboard.listing.createNewDashboard.title"
+              defaultMessage="Create your first dashboard"
+            />
+          </h1>
+        </EuiText>
       }
       body={
         <Fragment>

diff --git a/src/plugins/data/public/ui/saved_query_form/save_query_form.tsx b/src/plugins/data/public/ui/saved_query_form/save_query_form.tsx
@@ -232,9 +232,13 @@ export function SaveQueryForm({
     <EuiModal onClose={onClose} initialFocus="[name=title]">
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          {i18n.translate('data.search.searchBar.savedQueryFormTitle', {
-            defaultMessage: 'Save query',
-          })}
+          <EuiText size="s">
+            <h2>
+              {i18n.translate('data.search.searchBar.savedQueryFormTitle', {
+                defaultMessage: 'Save query',
+              })}
+            </h2>
+          </EuiText>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 

diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
@@ -11,7 +11,7 @@ import {
   EuiFlyoutBody,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { DocViewer } from '../doc_viewer/doc_viewer';
@@ -43,11 +43,11 @@ export function DataGridFlyout({
   return (
     <EuiFlyout onClose={onClose} size="m" data-test-subj="documentDetailFlyOut" ownFocus={false}>
       <EuiFlyoutHeader>
-        <EuiTitle>
+        <EuiText size="s">
           <h2>
             <FormattedMessage id="discover.docView.flyoutTitle" defaultMessage="Document Details" />
           </h2>
-        </EuiTitle>
+        </EuiText>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <EuiFlexGroup direction="column">

diff --git a/...cover/public/application/components/top_nav/__snapshots__/open_search_panel.test.tsx.snap b/...cover/public/application/components/top_nav/__snapshots__/open_search_panel.test.tsx.snap
diff --git a/src/plugins/discover/public/application/components/top_nav/open_search_panel.tsx b/src/plugins/discover/public/application/components/top_nav/open_search_panel.tsx
@@ -40,7 +40,7 @@ import {
   EuiFlyoutHeader,
   EuiFlyoutFooter,
   EuiFlyoutBody,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { SavedObjectFinderUi } from '../../../../../saved_objects/public';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
@@ -63,14 +63,14 @@ export function OpenSearchPanel({ onClose, makeUrl }: Props) {
   return (
     <EuiFlyout ownFocus onClose={onClose} data-test-subj="loadSearchForm">
       <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
+        <EuiText size="s">
           <h2>
             <FormattedMessage
               id="discover.topNav.openSearchPanel.openSearchTitle"
               defaultMessage="OpenSearch"
             />
           </h2>
-        </EuiTitle>
+        </EuiText>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <SavedObjectFinderUi

diff --git a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
diff --git a/src/plugins/inspector/public/ui/inspector_panel.tsx b/src/plugins/inspector/public/ui/inspector_panel.tsx
@@ -32,7 +32,7 @@ import './inspector_panel.scss';
 import { i18n } from '@osd/i18n';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiFlyoutHeader, EuiFlyoutBody, EuiText } from '@elastic/eui';
 import { InspectorViewDescription } from '../types';
 import { Adapters } from '../../common';
 import { InspectorViewChooser } from './inspector_view_chooser';
@@ -122,9 +122,9 @@ export class InspectorPanel extends Component<InspectorPanelProps, InspectorPane
         <EuiFlyoutHeader hasBorder>
           <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
             <EuiFlexItem grow={true}>
-              <EuiTitle size="s">
-                <h1>{title}</h1>
-              </EuiTitle>
+              <EuiText size="s">
+                <h2>{title}</h2>
+              </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <InspectorViewChooser

diff --git a/src/plugins/management/public/components/landing/landing.tsx b/src/plugins/management/public/components/landing/landing.tsx
@@ -31,14 +31,7 @@
 import React from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 
-import {
-  EuiHorizontalRule,
-  EuiIcon,
-  EuiPageContent,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiHorizontalRule, EuiIcon, EuiPageContent, EuiSpacer, EuiText } from '@elastic/eui';
 import { useMount } from 'react-use';
 
 interface ManagementLandingPageProps {
@@ -57,14 +50,14 @@ export const ManagementLandingPage = ({ setBreadcrumbs }: ManagementLandingPageP
         <div className="eui-textCenter">
           <EuiIcon type="managementApp" size="xxl" />
           <EuiSpacer />
-          <EuiTitle>
+          <EuiText size="s">
             <h1>
               <FormattedMessage
                 id="management.landing.header"
                 defaultMessage="Welcome to Dashboards Management"
               />
             </h1>
-          </EuiTitle>
+          </EuiText>
           <EuiText>
             <FormattedMessage
               id="management.landing.subhead"