[Look&Feel] Use semantic headers for page, modal, & flyouts across th…

…e board (#7616) --------- Signed-off-by: Dan Dong <danieldong51@gmail.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Aug 8, 2024 · 873c79e · 873c79e
1 parent 7bcb949
commit 873c79e
Show file tree

Hide file tree

Showing 38 changed files with 266 additions and 229 deletions.
diff --git a/changelogs/fragments/7616.yml b/changelogs/fragments/7616.yml
@@ -0,0 +1,2 @@
+Refactor:
+- [Look&Feel] Use semantic headers for page, modal, & flyouts across the board ([#7616](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7616))
diff --git a/...nced_settings/public/component_registry/page_title/__snapshots__/page_title.test.tsx.snap b/...nced_settings/public/component_registry/page_title/__snapshots__/page_title.test.tsx.snap
diff --git a/src/plugins/advanced_settings/public/component_registry/page_title/page_title.tsx b/src/plugins/advanced_settings/public/component_registry/page_title/page_title.tsx
@@ -34,7 +34,7 @@ import { FormattedMessage } from '@osd/i18n/react';
 
 export const PageTitle = () => {
   return (
-    <EuiText>
+    <EuiText size="s">
       <h1 data-test-subj="managementSettingsTitle">
         <FormattedMessage id="advancedSettings.pageTitle" defaultMessage="Settings" />
       </h1>

diff --git a/src/plugins/console/public/application/components/__snapshots__/import_flyout.test.tsx.snap b/src/plugins/console/public/application/components/__snapshots__/import_flyout.test.tsx.snap
diff --git a/src/plugins/console/public/application/components/help_panel.tsx b/src/plugins/console/public/application/components/help_panel.tsx
@@ -30,14 +30,7 @@
 
 import React from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
-import {
-  EuiText,
-  EuiFlyout,
-  EuiFlyoutHeader,
-  EuiFlyoutBody,
-  EuiTitle,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiText, EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiSpacer } from '@elastic/eui';
 import { EditorExample } from './editor_example';
 
 interface Props {
@@ -48,11 +41,11 @@ export function HelpPanel(props: Props) {
   return (
     <EuiFlyout onClose={props.onClose} data-test-subj="helpFlyout" size="s">
       <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
+        <EuiText size="s">
           <h2>
             <FormattedMessage id="console.helpPage.pageTitle" defaultMessage="Help" />
           </h2>
-        </EuiTitle>
+        </EuiText>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <EuiText>

diff --git a/src/plugins/console/public/application/components/import_flyout.tsx b/src/plugins/console/public/application/components/import_flyout.tsx
@@ -6,7 +6,6 @@
 import {
   EuiFlyout,
   EuiFlyoutHeader,
-  EuiTitle,
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiCallOut,
@@ -276,14 +275,14 @@ export const ImportFlyout = ({ close, refresh }: ImportFlyoutProps) => {
   return (
     <EuiFlyout onClose={close} size="s">
       <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
+        <EuiText size="s">
           <h2>
             <FormattedMessage
               id="console.ImportFlyout.importQueriesTitle"
               defaultMessage="Import queries"
             />
           </h2>
-        </EuiTitle>
+        </EuiText>
       </EuiFlyoutHeader>
 
       <EuiFlyoutBody>

diff --git a/src/plugins/console/public/application/components/settings_modal.tsx b/src/plugins/console/public/application/components/settings_modal.tsx
@@ -45,6 +45,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiCompressedSwitch,
+  EuiText,
 } from '@elastic/eui';
 
 import { DevToolsSettings } from '../../services';
@@ -179,7 +180,14 @@ export function DevToolsSettingsModal(props: Props) {
     >
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          <FormattedMessage id="console.settingsPage.pageTitle" defaultMessage="Console Settings" />
+          <EuiText size="s">
+            <h2>
+              <FormattedMessage
+                id="console.settingsPage.pageTitle"
+                defaultMessage="Console Settings"
+              />
+            </h2>
+          </EuiText>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 

diff --git a/...ource_management/public/components/create_data_source_wizard/components/header/header.tsx b/...ource_management/public/components/create_data_source_wizard/components/header/header.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { EuiSpacer, EuiTitle, EuiText, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
@@ -25,7 +25,7 @@ export const Header = () => {
     <EuiFlexGroup justifyContent="spaceBetween">
       <EuiFlexItem grow={false}>
         <div>
-          <EuiTitle>
+          <EuiText size="s">
             <h1 data-test-subj="createDataSourceHeader">
               {
                 <FormattedMessage
@@ -34,7 +34,7 @@ export const Header = () => {
                 />
               }
             </h1>
-          </EuiTitle>
+          </EuiText>
           <EuiSpacer size="s" />
           <EuiText size="s">
             <p>

diff --git a/...ts/data_source_creation_panel/__snapshots__/create_data_source_panel_header.test.tsx.snap b/...ts/data_source_creation_panel/__snapshots__/create_data_source_panel_header.test.tsx.snap
diff --git a/...ent/public/components/data_source_creation_panel/create_data_source_panel_header.test.tsx b/...ent/public/components/data_source_creation_panel/create_data_source_panel_header.test.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { CreateDataSourcePanelHeader } from './create_data_source_panel_header';
-import { EuiFlexGroup, EuiTitle, EuiText } from '@elastic/eui';
+import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 
 describe('CreateDataSourcePanelHeader', () => {
@@ -20,11 +20,11 @@ describe('CreateDataSourcePanelHeader', () => {
   test('contains correct title and description', () => {
     const wrapper = shallowComponent();
 
-    const titleMessage = wrapper.find(EuiTitle).find(FormattedMessage);
+    const titleMessage = wrapper.find(EuiText).at(0).find(FormattedMessage);
     expect(titleMessage.prop('id')).toEqual('dataSourcesManagement.createDataSourcePanel.title');
     expect(titleMessage.prop('defaultMessage')).toEqual('Create Data Source');
 
-    const descriptionMessage = wrapper.find(EuiText).find(FormattedMessage);
+    const descriptionMessage = wrapper.find(EuiText).at(1).find(FormattedMessage);
     expect(descriptionMessage.prop('id')).toEqual(
       'dataSourcesManagement.createDataSourcePanel.description'
     );

diff --git a/...nagement/public/components/data_source_creation_panel/create_data_source_panel_header.tsx b/...nagement/public/components/data_source_creation_panel/create_data_source_panel_header.tsx
@@ -3,22 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 
 export const CreateDataSourcePanelHeader: React.FC = () => {
   return (
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiTitle>
-          <h2>
+        <EuiText size="s">
+          <h1>
             <FormattedMessage
               id="dataSourcesManagement.createDataSourcePanel.title"
               defaultMessage="Create Data Source"
             />
-          </h2>
-        </EuiTitle>
+          </h1>
+        </EuiText>
         <EuiSpacer size="s" />
         <EuiText size="s">
           <p>

diff --git a/...lic/components/data_source_home_panel/__snapshots__/data_source_page_header.test.tsx.snap b/...lic/components/data_source_home_panel/__snapshots__/data_source_page_header.test.tsx.snap
diff --git a/...urce_management/public/components/data_source_home_panel/data_source_page_header.test.tsx b/...urce_management/public/components/data_source_home_panel/data_source_page_header.test.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceHeader } from './data_source_page_header';
-import { EuiTitle, EuiText } from '@elastic/eui';
+import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 
 describe('DataSourceHeader', () => {
@@ -25,12 +25,11 @@ describe('DataSourceHeader', () => {
 
   test('contains correct title and description', () => {
     const wrapper = shallowComponent();
-
-    const titleMessage = wrapper.find(EuiTitle).find(FormattedMessage);
+    const titleMessage = wrapper.find(EuiText).at(0).find(FormattedMessage);
     expect(titleMessage.prop('id')).toEqual('dataSourcesManagement.dataSourcesTable.title');
     expect(titleMessage.prop('defaultMessage')).toEqual('Data Sources');
 
-    const descriptionMessage = wrapper.find(EuiText).find(FormattedMessage);
+    const descriptionMessage = wrapper.find(EuiText).at(1).find(FormattedMessage);
     expect(descriptionMessage.prop('id')).toEqual(
       'dataSourcesManagement.dataSourcesTable.description'
     );

diff --git a/...ta_source_management/public/components/data_source_home_panel/data_source_page_header.tsx b/...ta_source_management/public/components/data_source_home_panel/data_source_page_header.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 import { RouteComponentProps } from 'react-router-dom';
@@ -14,14 +14,14 @@ export const DataSourceHeader: React.FC<DataSourceHeaderProps> = () => {
   return (
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiTitle>
-          <h2>
+        <EuiText size="s">
+          <h1>
             <FormattedMessage
               id="dataSourcesManagement.dataSourcesTable.title"
               defaultMessage="Data Sources"
             />
-          </h2>
-        </EuiTitle>
+          </h1>
+        </EuiText>
         <EuiSpacer size="s" />
         <EuiText size="s">
           <p>

diff --git a/...query_data_sources_components/acceleration_creation/create/create_acceleration_header.tsx b/...query_data_sources_components/acceleration_creation/create/create_acceleration_header.tsx
@@ -3,14 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  EuiLink,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiLink, EuiPageHeader, EuiPageHeaderSection, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { OPENSEARCH_ACC_DOCUMENTATION_URL } from '../../../constants';
 
@@ -19,9 +12,9 @@ export const CreateAccelerationHeader = () => {
     <div>
       <EuiPageHeader>
         <EuiPageHeaderSection>
-          <EuiTitle size="l" data-test-subj="acceleration-header">
+          <EuiText size="s" data-test-subj="acceleration-header">
             <h1>Accelerate data</h1>
-          </EuiTitle>
+          </EuiText>
         </EuiPageHeaderSection>
       </EuiPageHeader>
       <EuiSpacer size="s" />

diff --git a/...direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx b/...direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
@@ -11,7 +11,6 @@ import {
   EuiPageHeaderSection,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
   EuiPanel,
   EuiSpacer,
   EuiText,
@@ -434,9 +433,9 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
           <EuiPageHeaderSection style={{ width: '100%', justifyContent: 'space-between' }}>
             <EuiFlexGroup>
               <EuiFlexItem grow={false}>
-                <EuiTitle data-test-subj="datasourceTitle" size="l">
+                <EuiText data-test-subj="datasourceTitle" size="s">
                   <h1>{datasourceDetails.name}</h1>
-                </EuiTitle>
+                </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPageHeaderSection>

diff --git a/...ource_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap b/...ource_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap