[Look&Feel] Refactor to use semantic headers for page, modal & flyout (…

…#7192) (#7223) * [Look&Feel] refactor to use semantic header for page, modal and flygout * Changeset file for PR #7192 created/updated --------- (cherry picked from commit 96fb9d6) Signed-off-by: Zhongnan Su <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Jul 11, 2024 · a2b10fc · a2b10fc
1 parent b2106dc
commit a2b10fc
Show file tree

Hide file tree

Showing 21 changed files with 195 additions and 143 deletions.
diff --git a/changelogs/fragments/7192.yml b/changelogs/fragments/7192.yml
@@ -0,0 +1,2 @@
+refactor:
+- [Look&Feel]  Refactor to use semantic headers for page, modal & flyout ([#7192](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7192))
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
@@ -168,10 +168,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
@@ -234,9 +234,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
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		refactor:
		- [Look&Feel] Refactor to use semantic headers for page, modal & flyout ([#7192](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7192))