From 6e851ff33d155e39734707b49a62be4f13ece6ee Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Wed, 25 Dec 2024 07:14:37 +0800 Subject: [PATCH] [workspace]Fix/UI of assets table (#8519) * fix/UI_of_assets_table Signed-off-by: Qxisylolo * fix/the_UI_of_assets_table, add tests Signed-off-by: Qxisylolo * use workspaceNameIdLookup Signed-off-by: Qxisylolo * delete comment Signed-off-by: Qxisylolo * use workspace column Signed-off-by: Qxisylolo * Changeset file for PR #8519 created/updated * use gear icon Signed-off-by: Qxisylolo * use gear icon Signed-off-by: Qxisylolo * new update Signed-off-by: Qxisylolo * revert deleted line Signed-off-by: Qxisylolo * correct import Signed-off-by: Qxisylolo --------- Signed-off-by: Qxisylolo Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/8519.yml | 2 + .../ui_settings/saved_objects/ui_settings.ts | 1 + .../server/saved_objects/data_source.ts | 2 +- .../objects_table/components/table.tsx | 3 +- .../objects_table/saved_objects_table.tsx | 4 +- .../workspace_column/workspace_colum.test.tsx | 72 ++++++++++++++++--- .../workspace_column/workspace_column.tsx | 61 ++++++++++++++-- 7 files changed, 123 insertions(+), 22 deletions(-) create mode 100644 changelogs/fragments/8519.yml diff --git a/changelogs/fragments/8519.yml b/changelogs/fragments/8519.yml new file mode 100644 index 000000000000..2cdfcae79938 --- /dev/null +++ b/changelogs/fragments/8519.yml @@ -0,0 +1,2 @@ +fix: +- Adds badge when there are more than one workspaces and updates the icon ([#8519](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8519)) \ No newline at end of file diff --git a/src/core/server/ui_settings/saved_objects/ui_settings.ts b/src/core/server/ui_settings/saved_objects/ui_settings.ts index a56b12ed2063..bbd677fa94d9 100644 --- a/src/core/server/ui_settings/saved_objects/ui_settings.ts +++ b/src/core/server/ui_settings/saved_objects/ui_settings.ts @@ -44,6 +44,7 @@ export const uiSettingsType: SavedObjectsType = { }, }, management: { + icon: 'gear', importableAndExportable: true, getInAppUrl() { return { diff --git a/src/plugins/data_source/server/saved_objects/data_source.ts b/src/plugins/data_source/server/saved_objects/data_source.ts index 3f31e7bd14b7..cbdbaa469a6a 100644 --- a/src/plugins/data_source/server/saved_objects/data_source.ts +++ b/src/plugins/data_source/server/saved_objects/data_source.ts @@ -16,7 +16,7 @@ export const dataSource: SavedObjectsType = { namespaceType: 'agnostic', hidden: false, management: { - icon: 'apps', // todo: pending ux #2034 + icon: 'database', defaultSearchField: 'title', importableAndExportable: true, getTitle(obj) { diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx index d34e31b6079d..f1e69a2a9ee5 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx @@ -174,6 +174,7 @@ export class Table extends PureComponent { items, totalItemCount, isSearching, + columnRegistry, filters, selectionConfig: selection, onDelete, @@ -186,8 +187,6 @@ export class Table extends PureComponent { onShowRelationships, basePath, actionRegistry, - columnRegistry, - namespaceRegistry, dateFormat, availableWorkspaces, currentWorkspaceId, diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx index 8c77f9dd3eff..63436364bb32 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx @@ -109,8 +109,7 @@ import { DataPublicPluginStart } from '../../../../../plugins/data/public'; import { DuplicateObject } from '../types'; import { formatWorkspaceIdParams } from '../../utils'; import { NavigationPublicPluginStart } from '../../../../navigation/public'; -import { WorkspaceObject } from '../../../../workspaces/public'; - +import { WorkspaceObject } from '../../../../../core/public'; interface ExportAllOption { id: string; label: string; @@ -1174,7 +1173,6 @@ export class SavedObjectsTable extends Component {this.renderFlyout()} diff --git a/src/plugins/workspace/public/components/workspace_column/workspace_colum.test.tsx b/src/plugins/workspace/public/components/workspace_column/workspace_colum.test.tsx index 655bd9e57f2c..afb6a98afa37 100644 --- a/src/plugins/workspace/public/components/workspace_column/workspace_colum.test.tsx +++ b/src/plugins/workspace/public/components/workspace_column/workspace_colum.test.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; import { coreMock } from '../../../../../core/public/mocks'; -import { render } from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; import { WorkspaceColumn } from './workspace_column'; describe('workspace column in saved objects page', () => { @@ -21,27 +21,77 @@ describe('workspace column in saved objects page', () => { ]; coreSetup.workspaces.workspaceList$.next(workspaceList); - it('should show workspace name correctly', () => { + it('should show workspace name badge correctly', async () => { const workspaces = ['ws-1', 'ws-2']; - const { container } = render(); + const { findByTestId, findByText, container } = render( + + ); + const badge = await findByTestId('workspace-column-more-workspaces-badge'); + expect(badge).toBeInTheDocument(); + fireEvent.click(badge); + expect(await findByTestId('workspace-column-popover')).toBeInTheDocument(); + expect(await findByText('foo')).toBeInTheDocument(); + expect(await findByText('bar')).toBeInTheDocument(); expect(container).toMatchInlineSnapshot(`
- foo | bar + foo +
+    + + + + + + +
+
`); }); - it('show empty when no workspace', () => { + it('show — when no workspace', () => { const { container } = render(); + expect(container).toMatchInlineSnapshot(`
+ class="euiText euiText--small" + > + — +
`); }); @@ -51,8 +101,10 @@ describe('workspace column in saved objects page', () => { expect(container).toMatchInlineSnapshot(`
+ class="euiText euiText--small" + > + — +
`); }); diff --git a/src/plugins/workspace/public/components/workspace_column/workspace_column.tsx b/src/plugins/workspace/public/components/workspace_column/workspace_column.tsx index 035fa3b6ebd4..c40781735125 100644 --- a/src/plugins/workspace/public/components/workspace_column/workspace_column.tsx +++ b/src/plugins/workspace/public/components/workspace_column/workspace_column.tsx @@ -3,8 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; -import { EuiText } from '@elastic/eui'; +import React, { useState } from 'react'; +import { EuiText, EuiBadge, EuiPopover } from '@elastic/eui'; import useObservable from 'react-use/lib/useObservable'; import { i18n } from '@osd/i18n'; import { WorkspaceAttribute, CoreSetup } from '../../../../../core/public'; @@ -17,16 +17,65 @@ interface WorkspaceColumnProps { export function WorkspaceColumn({ coreSetup, workspaces }: WorkspaceColumnProps) { const workspaceList = useObservable(coreSetup.workspaces.workspaceList$); - + const [showBadgePopover, setShowBadgePopover] = useState(false); const wsLookUp = workspaceList?.reduce((map, ws) => { return map.set(ws.id, ws.name); }, new Map()); - const workspaceNames = workspaces?.map((wsId) => wsLookUp?.get(wsId)).join(' | '); + const workspaceNames = workspaces?.map((wsId) => wsLookUp?.get(wsId)).filter((ws) => ws); - return {workspaceNames}; -} + const toggleBadgePopover = () => { + setShowBadgePopover(!showBadgePopover); + }; + const closeBadgePopover = () => { + setShowBadgePopover(false); + }; + + if (workspaceNames?.length) { + const displayedWorkspaces = workspaceNames.slice(0, 1); + const remainingWorkspacesCount = workspaceNames.length - 1; + return ( + <> + {displayedWorkspaces} + {remainingWorkspacesCount > 0 && ( + <> +    + + + {remainingWorkspacesCount} more + + {showBadgePopover && ( + + {workspaceNames.slice(1).map((ws) => ( + + {ws} + + ))} + + )} + + )} + + ); + } else { + return —; + } +} export function getWorkspaceColumn( coreSetup: CoreSetup ): SavedObjectsManagementColumn {