use workspace column

Signed-off-by: Qxisylolo <[email protected]>

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

@@ -38,7 +38,7 @@ import { columnServiceMock } from '../../../services/column_service.mock';
 import { SavedObjectsManagementAction } from '../../..';
 import { Table, TableProps } from './table';
 import { WorkspaceAttribute } from 'opensearch-dashboards/public';
-import { render, waitFor, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 const defaultProps: TableProps = {
   basePath: httpServiceMock.createSetupContract().basePath,
@@ -84,12 +84,6 @@ const defaultProps: TableProps = {
   canGoInApp: () => true,
   pageIndex: 1,
   pageSize: 2,
-  workspaceNameIdLookup: new Map([
-    ['test1', 'jVyiM7'],
-    ['test2', '8rZ0OL'],
-    ['test3', 'evIuNZ'],
-    ['test4', '4MQ3uu'],
-  ]),
   items: [
     {
       id: '1',
@@ -296,37 +290,4 @@ describe('Table', () => {
       )
     ).toBeInTheDocument();
   });
-  it('should render more workspace badge when more than 1 workspace', async () => {
-    const customizedProps = {
-      ...defaultProps,
-      useUpdatedUX: true,
-      items: [
-        {
-          id: '1',
-          type: 'index-pattern',
-          attributes: {},
-          references: [],
-          meta: {
-            title: `MyIndexPattern*`,
-            icon: 'indexPatternApp',
-            editUrl: '#/management/opensearch-dashboards/indexPatterns/patterns/1',
-            inAppUrl: {
-              path: '/app/management/opensearch-dashboards/indexPatterns/patterns/1',
-              uiCapabilitiesPath: 'management.opensearchDashboards.indexPatterns',
-            },
-          },
-          workspaces: ['jVyiM7', '8rZ0OL'],
-        },
-      ],
-    };
-    const { getByTestId, getByText } = render(<Table {...customizedProps} />);
-    await waitFor(() => {
-      const badge = getByTestId('workspace-column-more-workspaces-badge');
-      expect(badge).toBeInTheDocument();
-      fireEvent.click(badge);
-    });
-    expect(getByTestId('workspace-column-popover')).toBeInTheDocument();
-    expect(getByText('test1')).toBeInTheDocument();
-    expect(getByText('test2')).toBeInTheDocument();
-  });
 });

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

@@ -44,7 +44,6 @@ import {
   EuiCompressedSwitch,
   EuiCompressedFormRow,
   EuiText,
-  EuiBadge,
   EuiTableFieldDataColumnType,
   EuiTableActionsColumnType,
   EuiSearchBarProps,
@@ -81,7 +80,6 @@ export interface TableProps {
   pageIndex: number;
   pageSize: number;
   items: SavedObjectWithMetadata[];
-  workspaceNameIdLookup: Map<string, string>;
   itemId: string | (() => string);
   totalItemCount: number;
   onQueryChange: (query: any, filterFields: string[]) => void;
@@ -99,7 +97,6 @@ export interface TableProps {
 
 interface TableState {
   isSearchTextValid: boolean;
-  showBadgePopover: boolean;
   parseErrorMessage: any;
   isExportPopoverOpen: boolean;
   isIncludeReferencesDeepChecked: boolean;
@@ -111,7 +108,6 @@ export class Table extends PureComponent<TableProps, TableState> {
   state: TableState = {
     isSearchTextValid: true,
     parseErrorMessage: null,
-    showBadgePopover: false,
     isExportPopoverOpen: false,
     isIncludeReferencesDeepChecked: true,
     activeAction: undefined,
@@ -131,18 +127,6 @@ export class Table extends PureComponent<TableProps, TableState> {
     this.setState({ isColumnDataLoaded: true });
   };
 
-  toggleBadgePopover = () => {
-    this.setState((prev) => ({
-      showBadgePopover: !prev.showBadgePopover,
-    }));
-  };
-
-  closeBadgePopover = () => {
-    this.setState({
-      showBadgePopover: false,
-    });
-  };
-
   onChange = ({ query, error }: any) => {
     if (error) {
       this.setState({
@@ -188,9 +172,9 @@ export class Table extends PureComponent<TableProps, TableState> {
       pageSize,
       itemId,
       items,
-      workspaceNameIdLookup,
       totalItemCount,
       isSearching,
+      columnRegistry,
       filters,
       selectionConfig: selection,
       onDelete,
@@ -298,71 +282,13 @@ export class Table extends PureComponent<TableProps, TableState> {
         'data-test-subj': 'updated-at',
         render: (updatedAt: string) => updatedAt && moment(updatedAt).format(dateFormat),
       } as EuiTableFieldDataColumnType<SavedObjectWithMetadata<any>>,
-      {
-        name: i18n.translate('savedObjectsManagement.objectsTable.table.columnWorkspaceName', {
-          defaultMessage: 'Workspace',
-        }),
-        'data-test-subj': 'savedObjectsTableRowWorkspace',
-        dataType: 'string',
-        sortable: false,
-        render: (object: SavedObjectWithMetadata) => {
-          if (!object?.workspaces || object?.workspaces.length === 0) {
-            return <EuiText size="s">&mdash;</EuiText>;
-          }
-          const workspaces = object.workspaces;
-          const displayedWorkspaces = workspaces.slice(0, 1);
-          const remainingWorkspaces = workspaces.length - 1;
-          const getWorkspaceNameById = (workspaceId: string) => {
-            for (const [name, id] of workspaceNameIdLookup) {
-              if (id === workspaceId) {
-                return name;
-              }
-            }
-            return workspaceId;
-          };
-          return (
-            <>
-              <EuiText size="s">
-                {displayedWorkspaces.map((workspaceId: string) =>
-                  getWorkspaceNameById(workspaceId)
-                )}
-              </EuiText>
-              {remainingWorkspaces > 0 && (
-                <>
-                  &nbsp;&nbsp;
-                  <EuiBadge
-                    color="hollow"
-                    iconType="popout"
-                    iconSide="right"
-                    onClick={this.toggleBadgePopover}
-                    iconOnClick={this.toggleBadgePopover}
-                    iconOnClickAriaLabel="Open workspaces popover"
-                    onClickAriaLabel="Open workspaces popover"
-                    data-test-subj="workspace-column-more-workspaces-badge"
-                  >
-                    + {remainingWorkspaces} more
-                  </EuiBadge>
-                  {this.state.showBadgePopover && (
-                    <EuiPopover
-                      isOpen={this.state.showBadgePopover}
-                      closePopover={this.closeBadgePopover}
-                      anchorPosition="rightCenter"
-                      panelPaddingSize="s"
-                      data-test-subj="workspace-column-popover"
-                    >
-                      {workspaces.slice(1).map((workspaceId, index) => (
-                        <EuiText key={index} size="xs">
-                          {getWorkspaceNameById(workspaceId)}
-                        </EuiText>
-                      ))}
-                    </EuiPopover>
-                  )}
-                </>
-              )}
-            </>
-          );
-        },
-      },
+      ...columnRegistry.getAll().map((column) => {
+        return {
+          ...column.euiColumn,
+          sortable: false,
+          'data-test-subj': `savedObjectsTableColumn-${column.id}`,
+        };
+      }),
       {
         name: i18n.translate('savedObjectsManagement.objectsTable.table.columnActionsName', {
           defaultMessage: 'Actions',

src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx

@@ -1226,7 +1226,6 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
             pageIndex={page}
             pageSize={perPage}
             items={savedObjects}
-            workspaceNameIdLookup={this.workspaceNameIdLookup}
             totalItemCount={filteredItemCount}
             isSearching={isSearching}
             onShowRelationships={this.onShowRelationships}

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', () => {
     const workspaces = ['ws-1', 'ws-2'];
-    const { container } = render(<WorkspaceColumn coreSetup={coreSetup} workspaces={workspaces} />);
+    const { getByTestId, getByText, container } = render(
+      <WorkspaceColumn coreSetup={coreSetup} workspaces={workspaces} />
+    );
+    const badge = getByTestId('workspace-column-more-workspaces-badge');
+    expect(badge).toBeInTheDocument();
+    fireEvent.click(badge);
+    expect(getByTestId('workspace-column-popover')).toBeInTheDocument();
+    expect(getByText('foo')).toBeInTheDocument();
+    expect(getByText('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,7 +101,7 @@ describe('workspace column in saved objects page', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="euiText euiText--medium"
+          class="euiText euiText--small"
         />
       </div>
     `);