From 43dc2d6de8a7e0f3d8d47382a1ecd26eac6a38bb Mon Sep 17 00:00:00 2001 From: Dan Dong <58446449+danieldong51@users.noreply.github.com> Date: Mon, 5 Aug 2024 13:11:37 -0700 Subject: [PATCH] [Look&Feel] Update paragraph text sizes across remaining OSD (#7603) * Updated Data Source Connection paragraph size Signed-off-by: Dan Dong * Updated paragraph size Signed-off-by: Dan Dong * Updated paragraph size Signed-off-by: Dan Dong * Updated paragraph size Signed-off-by: Dan Dong * Changeset file for PR #7603 created/updated * Removed paragraph tags Signed-off-by: Dan Dong * Updated Snapshot Testing Signed-off-by: Dan Dong * Updated snapshot testing Signed-off-by: Dan Dong * Updated help panel Signed-off-by: Dan Dong * Updated Snapshot Testing for get_no_items_message Signed-off-by: Dan Dong * Updated Snapshot Testing for get_no_items_message Signed-off-by: Dan Dong * Changeset file for PR #7603 created/updated * Changeset file for PR #7603 created/updated * Updated Testing for get_no_items_message Signed-off-by: Dan Dong --------- Signed-off-by: Dan Dong Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/7603.yml | 2 + .../application/components/help_panel.tsx | 160 ++-- .../console_history/console_history.tsx | 5 +- .../get_no_items_message.test.tsx.snap | 758 ++++++++++++++++++ .../utils/get_no_items_message.test.tsx | 36 + .../utils/get_no_items_message.tsx | 58 +- .../create_form/create_data_source_form.tsx | 2 +- .../components/header/header.tsx | 2 +- ...ate_data_source_panel_header.test.tsx.snap | 4 +- .../create_data_source_panel_header.tsx | 2 +- .../data_source_page_header.test.tsx.snap | 4 +- .../data_source_page_header.tsx | 2 +- .../data_source_table.test.tsx.snap | 12 +- .../data_source_table/data_source_table.tsx | 2 +- .../acceleration_table.test.tsx.snap | 2 +- .../acceleration_table.tsx | 2 +- .../associated_objects_tab.tsx | 2 +- .../access_control_tab.test.tsx.snap | 2 +- .../connection_detail/access_control_tab.tsx | 2 +- .../no_access_page.test.tsx.snap | 4 +- .../utils/no_access_page.tsx | 2 +- .../components/header/header.tsx | 35 +- .../edit_index_pattern/edit_index_pattern.tsx | 2 +- .../header/__snapshots__/header.test.tsx.snap | 2 +- .../components/header/header.tsx | 2 +- .../header/__snapshots__/header.test.tsx.snap | 4 +- .../components/header/header.tsx | 2 +- .../__snapshots__/field_editor.test.tsx.snap | 130 +-- .../components/field_editor/field_editor.tsx | 16 +- .../index_pattern_table.tsx | 2 +- 30 files changed, 1056 insertions(+), 204 deletions(-) create mode 100644 changelogs/fragments/7603.yml create mode 100644 src/plugins/dashboard/public/application/utils/__snapshots__/get_no_items_message.test.tsx.snap create mode 100644 src/plugins/dashboard/public/application/utils/get_no_items_message.test.tsx diff --git a/changelogs/fragments/7603.yml b/changelogs/fragments/7603.yml new file mode 100644 index 000000000000..6ca9213c4fcd --- /dev/null +++ b/changelogs/fragments/7603.yml @@ -0,0 +1,2 @@ +Refactor: +- [Look&Feel] Update paragraph text sizes across remaining OSD ([#7603](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7603)) \ No newline at end of file diff --git a/src/plugins/console/public/application/components/help_panel.tsx b/src/plugins/console/public/application/components/help_panel.tsx index 1f0fce03bf14..7031132dfe3b 100644 --- a/src/plugins/console/public/application/components/help_panel.tsx +++ b/src/plugins/console/public/application/components/help_panel.tsx @@ -62,12 +62,14 @@ export function HelpPanel(props: Props) { id="console.helpPage.requestFormatTitle" /> -

- -

+ +

+ +

+

-
-
Ctrl/Cmd + I
-
- -
-
Ctrl/Cmd + /
-
- -
-
Ctrl + Space
-
- -
-
Ctrl/Cmd + Enter
-
- -
-
Ctrl/Cmd + Up/Down
-
- -
-
Ctrl/Cmd + Alt + L
-
- -
-
Ctrl/Cmd + Option + 0
-
- -
-
Down arrow
-
- -
-
Enter/Tab
-
- -
-
Esc
-
- -
-
+ +
+
Ctrl/Cmd + I
+
+ +
+
Ctrl/Cmd + /
+
+ +
+
Ctrl + Space
+
+ +
+
Ctrl/Cmd + Enter
+
+ +
+
Ctrl/Cmd + Up/Down
+
+ +
+
Ctrl/Cmd + Alt + L
+
+ +
+
Ctrl/Cmd + Option + 0
+
+ +
+
Down arrow
+
+ +
+
Enter/Tab
+
+ +
+
Esc
+
+ +
+
+ diff --git a/src/plugins/console/public/application/containers/console_history/console_history.tsx b/src/plugins/console/public/application/containers/console_history/console_history.tsx index 925224c53783..b9b6ddf0bf23 100644 --- a/src/plugins/console/public/application/containers/console_history/console_history.tsx +++ b/src/plugins/console/public/application/containers/console_history/console_history.tsx @@ -41,6 +41,7 @@ import { EuiFlexGroup, EuiSmallButtonEmpty, EuiSmallButton, + EuiText, } from '@elastic/eui'; import { useServicesContext } from '../../contexts'; @@ -192,7 +193,9 @@ export function ConsoleHistory({ close }: Props) { })} aria-selected={isSelected} > - {reqDescription} + + {reqDescription} + diff --git a/src/plugins/dashboard/public/application/utils/__snapshots__/get_no_items_message.test.tsx.snap b/src/plugins/dashboard/public/application/utils/__snapshots__/get_no_items_message.test.tsx.snap new file mode 100644 index 000000000000..3907c106ebf6 --- /dev/null +++ b/src/plugins/dashboard/public/application/utils/__snapshots__/get_no_items_message.test.tsx.snap @@ -0,0 +1,758 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`dashboard listing table with no item and no write controls 1`] = ` + +

+ +

+ + } +> +
+ + + + +
+ + + +
+

+ + Looks like you don't have any dashboards. + +

+
+ + +
+ +`; + +exports[`dashboard listing table with no item and with write controls 1`] = ` + + + + } + body={ + + +

+ +

+

+ + + , + } + } + /> +

+ + + } + iconType="dashboardApp" + intl={ + Object { + "defaultFormats": Object {}, + "defaultLocale": "en", + "formatDate": [Function], + "formatHTMLMessage": [Function], + "formatMessage": [Function], + "formatNumber": [Function], + "formatPlural": [Function], + "formatRelative": [Function], + "formatTime": [Function], + "formats": Object { + "date": Object { + "full": Object { + "day": "numeric", + "month": "long", + "weekday": "long", + "year": "numeric", + }, + "long": Object { + "day": "numeric", + "month": "long", + "year": "numeric", + }, + "medium": Object { + "day": "numeric", + "month": "short", + "year": "numeric", + }, + "short": Object { + "day": "numeric", + "month": "numeric", + "year": "2-digit", + }, + }, + "number": Object { + "currency": Object { + "style": "currency", + }, + "percent": Object { + "style": "percent", + }, + }, + "relative": Object { + "days": Object { + "units": "day", + }, + "hours": Object { + "units": "hour", + }, + "minutes": Object { + "units": "minute", + }, + "months": Object { + "units": "month", + }, + "seconds": Object { + "units": "second", + }, + "years": Object { + "units": "year", + }, + }, + "time": Object { + "full": Object { + "hour": "numeric", + "minute": "numeric", + "second": "numeric", + "timeZoneName": "short", + }, + "long": Object { + "hour": "numeric", + "minute": "numeric", + "second": "numeric", + "timeZoneName": "short", + }, + "medium": Object { + "hour": "numeric", + "minute": "numeric", + "second": "numeric", + }, + "short": Object { + "hour": "numeric", + "minute": "numeric", + }, + }, + }, + "formatters": Object { + "getDateTimeFormat": [Function], + "getMessageFormat": [Function], + "getNumberFormat": [Function], + "getPluralFormat": [Function], + "getRelativeFormat": [Function], + }, + "locale": "en", + "messages": Object {}, + "now": [Function], + "onError": [Function], + "textComponent": Symbol(react.fragment), + "timeZone": null, + } + } + title={ + +

+ +

+ + } +> +
+ + + + +
+ + + +
+

+ + Create your first dashboard + +

+
+ + + + + +
+ + +
+ +
+

+ + You can combine data views from any OpenSearch Dashboards app into one dashboard and see everything in one place. + +

+

+ + + , + } + } + > + New to OpenSearch Dashboards? + + + + to take a test drive. + +

+
+ +
+ + + + +
+ + + + + + + + +
+ +`; diff --git a/src/plugins/dashboard/public/application/utils/get_no_items_message.test.tsx b/src/plugins/dashboard/public/application/utils/get_no_items_message.test.tsx new file mode 100644 index 000000000000..785e1d334b80 --- /dev/null +++ b/src/plugins/dashboard/public/application/utils/get_no_items_message.test.tsx @@ -0,0 +1,36 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { getNoItemsMessage } from './get_no_items_message'; +import { mountWithIntl } from 'test_utils/enzyme_helpers'; +import { ApplicationStart, Capabilities, PublicAppInfo } from 'opensearch-dashboards/public'; +import { EuiLink } from '@elastic/eui'; +import { RecursiveReadonly } from '@osd/utility-types'; +import { Observable } from 'rxjs'; + +describe('dashboard listing table with no item', () => { + test('and no write controls', () => { + const component = mountWithIntl(getNoItemsMessage(true, jest.fn(), {} as ApplicationStart)); + + expect(component).toMatchSnapshot(); + }); + + test('and with write controls', () => { + const application = { + capabilities: {} as RecursiveReadonly, + applications$: {} as Observable>, + navigateToApp: jest.fn(), + navigateToUrl: jest.fn(), + getUrlForApp: jest.fn(), + registerMountContext: jest.fn(), + currentAppId$: {} as Observable, + }; + const component = mountWithIntl(getNoItemsMessage(false, jest.fn(), application)); + + expect(component).toMatchSnapshot(); + component.find(EuiLink).simulate('click'); + expect(application.navigateToApp).toHaveBeenCalledTimes(1); + }); +}); 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 index 460fbe9b877d..15f97ceb6130 100644 --- a/src/plugins/dashboard/public/application/utils/get_no_items_message.tsx +++ b/src/plugins/dashboard/public/application/utils/get_no_items_message.tsx @@ -46,34 +46,36 @@ export const getNoItemsMessage = ( } body={ -

- -

-

- - application.navigateToApp('home', { - path: '#/tutorial_directory/sampleData', - }) - } - > - - - ), - }} - /> -

+ +

+ +

+

+ + application.navigateToApp('home', { + path: '#/tutorial_directory/sampleData', + }) + } + > + + + ), + }} + /> +

+ } actions={ diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx index e8f738fc9ffa..7fec74bdc0f9 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx +++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx @@ -643,7 +643,7 @@ export class CreateDataSourceForm extends React.Component< - + { - +

- +

{ - +

- +

= () => { - +

- +

- +
{ style={{ textAlign: 'center' }} data-test-subj="datasourceTableEmptyState" > - +

Accelerations

Accelerations optimize query performance by indexing external data into OpenSearch.
Last updated at:
3/14/2024, 4:05:53 AM
Actions
Name
Status
Refreshing
Type
materialized
Database
default
Table
-
Refresh Type
Auto refresh
Destination Index
flint_mys3_default_http_count_view
Name
Status
Refreshing
Type
materialized
Database
default
Table
-
Refresh Type
Auto refresh
Destination Index
flint_mys3_default_http_count_view_alt
Name
Status
Deleted
Type
materialized
Database
default
Table
-
Refresh Type
Auto refresh
Destination Index
flint_mys3_default_http_logs
Name
Status
Active
Type
skipping
Database
default
Table
http_logs
Refresh Type
Manual
Destination Index
-
Name
Status
Refreshing
Type
materialized
Database
other
Table
-
Refresh Type
Auto refresh
Destination Index
flint_mys3_other_http_count_view
"`; +exports[`AccelerationTable Component matches snapshot 1`] = `"

Accelerations

Accelerations optimize query performance by indexing external data into OpenSearch.
Last updated at:
3/14/2024, 4:05:53 AM
Actions
Name
Status
Refreshing
Type
materialized
Database
default
Table
-
Refresh Type
Auto refresh
Destination Index
flint_mys3_default_http_count_view
Name
Status
Refreshing
Type
materialized
Database
default
Table
-
Refresh Type
Auto refresh
Destination Index
flint_mys3_default_http_count_view_alt
Name
Status
Deleted
Type
materialized
Database
default
Table
-
Refresh Type
Auto refresh
Destination Index
flint_mys3_default_http_logs
Name
Status
Active
Type
skipping
Database
default
Table
http_logs
Refresh Type
Manual
Destination Index
-
Name
Status
Refreshing
Type
materialized
Database
other
Table
-
Refresh Type
Auto refresh
Destination Index
flint_mys3_other_http_count_view
"`; diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx index bdb6fd50a492..a92313d74a07 100644 --- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx +++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx @@ -158,7 +158,7 @@ export const AccelerationTable = ({ <> - +

{ACC_PANEL_TITLE}

{ACC_PANEL_DESC} diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/associated_objects_tab.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/associated_objects_tab.tsx index 648488f50500..69a72226391c 100644 --- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/associated_objects_tab.tsx +++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/associated_objects_tab.tsx @@ -141,7 +141,7 @@ export const AssociatedObjectsTab: React.FC = (props) return ( - +

{panelTitle}

{panelDescription} diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap index 4771e034f4ad..311cf24611ed 100644 --- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap @@ -46,7 +46,7 @@ exports[`AccessControlTab Component matches snapshot 1`] = ` class="euiFlexItem" >

{ return ( - +

Access control

Control which OpenSearch users have access to this data source. diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/utils/__snapshots__/no_access_page.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/utils/__snapshots__/no_access_page.test.tsx.snap index 6ffcb27f7e0b..bbbcb2da1b74 100644 --- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/utils/__snapshots__/no_access_page.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/utils/__snapshots__/no_access_page.test.tsx.snap @@ -13,7 +13,9 @@ exports[`NoAccess renders correctly 1`] = ` } body={ - + You are missing permissions to view connection details. Contact your administrator for permissions. } diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/utils/no_access_page.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/utils/no_access_page.tsx index 1766f7fe1837..9b8ff411c22b 100644 --- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/utils/no_access_page.tsx +++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/utils/no_access_page.tsx @@ -13,7 +13,7 @@ export const NoAccess = () => { iconType="alert" title={

{'No permissions to access'}

} body={ - + { 'You are missing permissions to view connection details. Contact your administrator for permissions.' } diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx index 8e016a80299e..a6cadae0ade3 100644 --- a/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx +++ b/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx @@ -15,6 +15,7 @@ import { EuiConfirmModal, EuiSmallButton, EuiSmallButtonEmpty, + EuiText, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { FormattedMessage } from '@osd/i18n/react'; @@ -121,22 +122,24 @@ export const Header = ({ defaultFocusedButton="confirm" data-test-subj="editDatasourceDeleteConfirmModal" > -

- { - - } -

-

- { - - } -

+ +

+ { + + } +

+

+ { + + } +

+ ) : null} diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx index 8cfcadbcc08d..76689ab7c553 100644 --- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx +++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx @@ -222,7 +222,7 @@ export const EditIndexPattern = withRouter( )} - +

You can use scripted fields in visualizations and display them in your documents. However, you cannot search scripted fields. diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx index 64de651fd4d8..9b5a059626cd 100644 --- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx +++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx @@ -53,7 +53,7 @@ export const Header = withRouter(({ indexPatternId, history }: HeaderProps) => ( />

- +

- +

( /> - +

- +
- - - + + + + @@ -382,7 +388,9 @@ exports[`FieldEditor should render edit scripted field correctly 1`] = ` /> - +
- - - + + + + @@ -661,7 +673,9 @@ exports[`FieldEditor should show conflict field warning 1`] = ` /> - +
- - - + + + + @@ -960,7 +978,9 @@ exports[`FieldEditor should show deprecated lang warning 1`] = ` /> - +
- - - + + + + @@ -1295,7 +1319,9 @@ exports[`FieldEditor should show multiple type field warning with a table contai /> - +
- - - + + + + diff --git a/src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx b/src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx index 33eef159d1d8..c47de51f9a4e 100644 --- a/src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx +++ b/src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx @@ -603,7 +603,7 @@ export class FieldEditor extends PureComponent - +
- - - + + + + + diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx index f4e0437824cd..e9ea9d1d9c12 100644 --- a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx +++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx @@ -269,7 +269,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {

{title}

- +