[workspace]Fix/UI of assets table

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

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 {

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

src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx

@@ -174,6 +174,7 @@ export class Table extends PureComponent<TableProps, TableState> {
       items,
       totalItemCount,
       isSearching,
+      columnRegistry,
       filters,
       selectionConfig: selection,
       onDelete,
@@ -186,8 +187,6 @@ export class Table extends PureComponent<TableProps, TableState> {
       onShowRelationships,
       basePath,
       actionRegistry,
-      columnRegistry,
-      namespaceRegistry,
       dateFormat,
       availableWorkspaces,
       currentWorkspaceId,

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<SavedObjectsTableProps, SavedOb
         searchThreshold: 1,
       });
     }
-
     return (
       <EuiPageContent horizontalPosition="center" paddingSize={useUpdatedUX ? 'm' : undefined}>
         {this.renderFlyout()}

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(<WorkspaceColumn coreSetup={coreSetup} workspaces={workspaces} />);
+    const { findByTestId, findByText, container } = render(
+      <WorkspaceColumn coreSetup={coreSetup} workspaces={workspaces} />
+    );
+    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(`
       <div>
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         >
-          foo | bar
+          foo
+        </div>
+
+        <span
+          class="euiBadge euiBadge--hollow euiBadge--iconRight"
+        >
+          <span
+            class="euiBadge__content"
+          >
+            <button
+              aria-label="Open workspaces popover"
+              class="euiBadge__childButton"
+              data-test-subj="workspace-column-more-workspaces-badge"
+              title="+ 1 more"
+            >
+              + 
+              1
+               more
+            </button>
+            <button
+              aria-label="Open workspaces popover"
+              class="euiBadge__iconButton"
+              title="Open workspaces popover"
+              type="button"
+            >
+              <span
+                class="euiBadge__icon"
+                color="inherit"
+                data-euiicon-type="popout"
+              />
+            </button>
+          </span>
+        </span>
+        <div
+          class="euiPopover euiPopover--anchorRightCenter euiPopover-isOpen"
+          data-test-subj="workspace-column-popover"
+        >
+          <div
+            class="euiPopover__anchor"
+          />
         </div>
       </div>
     `);
   });
 
-  it('show empty when no workspace', () => {
+  it('show  — when no workspace', () => {
     const { container } = render(<WorkspaceColumn coreSetup={coreSetup} />);
+
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="euiText euiText--medium"
-        />
+          class="euiText euiText--small"
+        >
+          —
+        </div>
       </div>
     `);
   });
@@ -51,8 +101,10 @@ describe('workspace column in saved objects page', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="euiText euiText--medium"
-        />
+          class="euiText euiText--small"
+        >
+          —
+        </div>
       </div>
     `);
   });

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 @@
 
 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<string, string>());
 
-  const workspaceNames = workspaces?.map((wsId) => wsLookUp?.get(wsId)).join(' | ');
+  const workspaceNames = workspaces?.map((wsId) => wsLookUp?.get(wsId)).filter((ws) => ws);
 
-  return <EuiText>{workspaceNames}</EuiText>;
-}
+  const toggleBadgePopover = () => {
+    setShowBadgePopover(!showBadgePopover);
+  };
 
+  const closeBadgePopover = () => {
+    setShowBadgePopover(false);
+  };
+
+  if (workspaceNames?.length) {
+    const displayedWorkspaces = workspaceNames.slice(0, 1);
+    const remainingWorkspacesCount = workspaceNames.length - 1;
+    return (
+      <>
+        <EuiText size="s">{displayedWorkspaces}</EuiText>
+        {remainingWorkspacesCount > 0 && (
+          <>
+            &nbsp;&nbsp;
+            <EuiBadge
+              color="hollow"
+              iconType="popout"
+              iconSide="right"
+              onClick={toggleBadgePopover}
+              iconOnClick={toggleBadgePopover}
+              iconOnClickAriaLabel="Open workspaces popover"
+              onClickAriaLabel="Open workspaces popover"
+              data-test-subj="workspace-column-more-workspaces-badge"
+            >
+              + {remainingWorkspacesCount} more
+            </EuiBadge>
+            {showBadgePopover && (
+              <EuiPopover
+                isOpen={showBadgePopover}
+                closePopover={closeBadgePopover}
+                anchorPosition="rightCenter"
+                panelPaddingSize="s"
+                data-test-subj="workspace-column-popover"
+              >
+                {workspaceNames.slice(1).map((ws) => (
+                  <EuiText key={ws} size="xs">
+                    {ws}
+                  </EuiText>
+                ))}
+              </EuiPopover>
+            )}
+          </>
+        )}
+      </>
+    );
+  } else {
+    return <EuiText size="s">&mdash;</EuiText>;
+  }
+}
 export function getWorkspaceColumn(
   coreSetup: CoreSetup
 ): SavedObjectsManagementColumn<WorkspaceAttribute | undefined> {