Skip to content

Commit

Permalink
[Look&Feel] Use semantic headers for page, modal, & flyouts across th…
Browse files Browse the repository at this point in the history
…e board (#7616)

---------

Signed-off-by: Dan Dong <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit 873c79e)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent d7f3765 commit 3a6241c
Show file tree
Hide file tree
Showing 38 changed files with 266 additions and 229 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/7616.yml
Original file line number Diff line number Diff line change
@@ -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))

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 3 additions & 10 deletions src/plugins/console/public/application/components/help_panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import {
EuiFlyout,
EuiFlyoutHeader,
EuiTitle,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiCallOut,
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
EuiModalHeader,
EuiModalHeaderTitle,
EuiCompressedSwitch,
EuiText,
} from '@elastic/eui';

import { DevToolsSettings } from '../../services';
Expand Down Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -25,7 +25,7 @@ export const Header = () => {
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<div>
<EuiTitle>
<EuiText size="s">
<h1 data-test-subj="createDataSourceHeader">
{
<FormattedMessage
Expand All @@ -34,7 +34,7 @@ export const Header = () => {
/>
}
</h1>
</EuiTitle>
</EuiText>
<EuiSpacer size="s" />
<EuiText size="s">
<p>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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'
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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'
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
EuiPageHeaderSection,
EuiFlexGroup,
EuiFlexItem,
EuiTitle,
EuiPanel,
EuiSpacer,
EuiText,
Expand Down Expand Up @@ -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>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 3a6241c

Please sign in to comment.