[Look&Feel] Use semantic headers for page, modal, & flyouts across the board

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))

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>

src/plugins/data_source_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>
             <p>

src/plugins/data_source_management/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'
     );

src/plugins/data_source_management/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>
           <p>

src/plugins/data_source_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'
     );

src/plugins/data_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>
           <p>

src/plugins/data_source_management/public/components/direct_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" />

src/plugins/data_source_management/public/components/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>

src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx

@@ -86,9 +86,9 @@ export const ConfigureS3DatasourcePanel: React.FC<ConfigureS3DatasourceProps> =
   return (
     <div>
       <EuiPanel>
-        <EuiTitle>
+        <EuiText size="s">
           <h1>{`Configure Amazon S3 data source`}</h1>
-        </EuiTitle>
+        </EuiText>
         <EuiSpacer size="s" />
         <EuiCallOut title="Setup Amazon EMR as execution engine first" iconType="iInCircle">
           <EuiText size="s" color="subdued">

src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx

@@ -5,7 +5,6 @@
 
 import {
   EuiPanel,
-  EuiTitle,
   EuiSpacer,
   EuiText,
   EuiLink,
@@ -88,9 +87,9 @@ export const ConfigurePrometheusDatasourcePanel = (props: ConfigurePrometheusDat
   return (
     <div>
       <EuiPanel>
-        <EuiTitle>
-          <h4>{`Configure Prometheus data source`}</h4>
-        </EuiTitle>
+        <EuiText size="s">
+          <h1>{`Configure Prometheus data source`}</h1>
+        </EuiText>
         <EuiSpacer size="s" />
         <EuiText size="s" color="subdued">
           {`Connect to Prometheus with OpenSearch and OpenSearch Dashboards. `}

src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/review_prometheus_data_source.tsx

@@ -5,7 +5,6 @@
 
 import {
   EuiPanel,
-  EuiTitle,
   EuiSpacer,
   EuiText,
   EuiFlexGroup,
@@ -41,9 +40,9 @@ export const ReviewPrometheusDatasource = (props: ConfigurePrometheusDatasourceP
   return (
     <div>
       <EuiPanel>
-        <EuiTitle>
+        <EuiText size="s">
           <h1 data-test-subj="reviewTitle">{`Review Prometheus data source configuration`}</h1>
-        </EuiTitle>
+        </EuiText>
         <EuiSpacer size="s" />
         <EuiSpacer />
         <EuiFlexGroup justifyContent="spaceBetween">