From 819b77456c4aaa93083a780d5da21574226ba87a Mon Sep 17 00:00:00 2001 From: Huy Nguyen <73027756+huyaboo@users.noreply.github.com> Date: Fri, 19 Apr 2024 13:41:43 -0700 Subject: [PATCH] [MDS] Refactor dropdown header + Aggregate view UI (#6541) * Refactor dropdown header + aggregate view UI Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com> * Refactor dropdown to use OuiPopoverTitle Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com> * Update snapshots Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com> * Refactor titleComponent Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com> * Update snapshots Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com> --------- Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com> (cherry picked from commit e34ca2b593ecf8d8c6caf547381cdddf5548a53c) --- .../data_source_list_active_example.tsx | 3 +- .../data_source_list_all_example.tsx | 1 - .../data_source_aggregated_view.test.tsx.snap | 1492 ++++++++--------- .../data_source_aggregated_view.scss | 13 + .../data_source_aggregated_view.tsx | 10 +- .../components/data_source_menu/types.ts | 1 - .../data_source_selectable.test.tsx.snap | 160 +- .../data_source_view.test.tsx.snap | 110 +- .../drop_down_header.test.tsx.snap | 85 +- .../drop_down_header/drop_down_header.tsx | 6 +- 10 files changed, 855 insertions(+), 1026 deletions(-) diff --git a/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx index 81a15e2c03da..9563c65769f8 100644 --- a/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx +++ b/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx @@ -110,8 +110,7 @@ export const DataSourceListActiveExample = ({ notifications, displayAllCompatibleDataSources: false, // To see selected options, obtain the datasource id and paste it here. Note that this needs to be defined when displayAllCompatibleDataSources is false - activeDataSourceIds: [], - uiSettings, + activeDataSourceIds: [''], }} /> )} diff --git a/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx index 570e51be36e9..d2d5d89d3c6a 100644 --- a/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx +++ b/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx @@ -102,7 +102,6 @@ export const DataSourceListAllExample = ({ savedObjects: savedObjects.client, notifications, displayAllCompatibleDataSources: true, - uiSettings, }} /> )} diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap index 57ba243a476b..ebc28a49153f 100644 --- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap @@ -23,56 +23,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou ownFocus={true} panelPaddingSize="none" > + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + - - - + {titleComponent} - - {titleComponent} - ) => boolean; - uiSettings?: IUiSettingsClient; } export type DataSourceAggregatedViewConfig = diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap index 79d158ee3be5..481451f3d80a 100644 --- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap @@ -29,6 +29,9 @@ exports[`DataSourceSelectable should filter options if configured 1`] = ` ownFocus={true} panelPaddingSize="none" > + - - - + - - - + - - - + + + + DATA SOURCES + ( + 3 + ) + + + + + Manage + + + + - - - DATA SOURCES - ( - 3 - ) - - - - - Manage - - - - - - - + - + class="euiFormControlLayoutCustomIcon" + > + + + diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap index 954e49247957..80667bf86091 100644 --- a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap @@ -24,24 +24,18 @@ exports[`DataSourceView Should render successfully when provided datasource has ownFocus={true} panelPaddingSize="none" > + - - - + - - - + - - - + + + DATA SOURCE + ( + 1 + ) + + + + + Manage + + + + + - - - - DATA SOURCE - ( - 1 - ) - - - - - Manage - - - - diff --git a/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap b/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap index 213c946d09b4..8c49521c32cc 100644 --- a/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap @@ -1,10 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DataSourceDropDownHeader should render correctly with the provided totalDataSourceCount 1`] = ` - @@ -27,7 +28,7 @@ exports[`DataSourceDropDownHeader should render correctly with the provided tota - + `; exports[`DataSourceDropDownHeader should render the activeDataSourceCount/totalDataSourceCount when both provided 1`] = ` @@ -35,52 +36,56 @@ exports[`DataSourceDropDownHeader should render the activeDataSourceCount/totalD activeDataSourceCount={2} totalDataSourceCount={5} > - - - - - - DATA SOURCES - ( - 2/5 - ) - - - + + + DATA SOURCES + ( + 2/5 + ) + + + - - - Manage - - - - - - - + + Manage + + + + + + + + `; diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx index 2eb457c47511..a8181ce5aec2 100644 --- a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx +++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx @@ -4,7 +4,7 @@ */ import './drop_down_header.scss'; -import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiPopoverTitle } from '@elastic/eui'; import React from 'react'; import { ApplicationStart } from 'opensearch-dashboards/public'; import { DSM_APP_ID } from '../../plugin'; @@ -27,8 +27,8 @@ export const DataSourceDropDownHeader: React.FC = ({ : totalDataSourceCount; return ( - - + + {dataSourceCounterPrefix} ({dataSourceCounter})