fix/the_UI_of_assets_table, add tests

Signed-off-by: Qxisylolo <[email protected]>
opensearch-project · Oct 8, 2024 · fa77ff3 · fa77ff3
1 parent 79d6d42
commit fa77ff3
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 15 deletions.
diff --git a/...t/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap b/...t/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap
diff --git a/...ment/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap b/...ment/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap
diff --git a/...aved_objects_management/public/management_section/objects_table/components/table.test.tsx b/...aved_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 } from '@testing-library/react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
 
 const defaultProps: TableProps = {
   basePath: httpServiceMock.createSetupContract().basePath,
@@ -84,6 +84,12 @@ const defaultProps: TableProps = {
   canGoInApp: () => true,
   pageIndex: 1,
   pageSize: 2,
+  workspaceIdNameMap: new Map([
+    ['test1', 'jVyiM7'],
+    ['test2', '8rZ0OL'],
+    ['test3', 'evIuNZ'],
+    ['test4', '4MQ3uu'],
+  ]),
   items: [
     {
       id: '1',
@@ -290,4 +296,37 @@ 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();
+  });
 });
diff --git a/...ins/saved_objects_management/public/management_section/objects_table/components/table.tsx b/...ins/saved_objects_management/public/management_section/objects_table/components/table.tsx
@@ -44,6 +44,7 @@ import {
   EuiCompressedSwitch,
   EuiCompressedFormRow,
   EuiText,
+  EuiBadge,
   EuiTableFieldDataColumnType,
   EuiTableActionsColumnType,
   EuiSearchBarProps,
@@ -80,6 +81,7 @@ export interface TableProps {
   pageIndex: number;
   pageSize: number;
   items: SavedObjectWithMetadata[];
+  workspaceIdNameMap: Map<string, string>;
   itemId: string | (() => string);
   totalItemCount: number;
   onQueryChange: (query: any, filterFields: string[]) => void;
@@ -97,6 +99,7 @@ export interface TableProps {
 
 interface TableState {
   isSearchTextValid: boolean;
+  showBadgePopover: boolean;
   parseErrorMessage: any;
   isExportPopoverOpen: boolean;
   isIncludeReferencesDeepChecked: boolean;
@@ -108,6 +111,7 @@ export class Table extends PureComponent<TableProps, TableState> {
   state: TableState = {
     isSearchTextValid: true,
     parseErrorMessage: null,
+    showBadgePopover: false,
     isExportPopoverOpen: false,
     isIncludeReferencesDeepChecked: true,
     activeAction: undefined,
@@ -127,6 +131,18 @@ 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({
@@ -172,6 +188,7 @@ export class Table extends PureComponent<TableProps, TableState> {
       pageSize,
       itemId,
       items,
+      workspaceIdNameMap,
       totalItemCount,
       isSearching,
       filters,
@@ -186,8 +203,6 @@ export class Table extends PureComponent<TableProps, TableState> {
       onShowRelationships,
       basePath,
       actionRegistry,
-      columnRegistry,
-      namespaceRegistry,
       dateFormat,
       availableWorkspaces,
       currentWorkspaceId,
@@ -220,8 +235,6 @@ export class Table extends PureComponent<TableProps, TableState> {
         sortable: false,
         'data-test-subj': 'savedObjectsTableRowType',
         render: (type: string, object: SavedObjectWithMetadata) => {
-          // eslint-disable-next-line
-          console.log('lalal', object);
           return (
             <EuiToolTip position="top" content={getSavedObjectLabel(type)}>
               <EuiIcon
@@ -285,13 +298,71 @@ export class Table extends PureComponent<TableProps, TableState> {
         'data-test-subj': 'updated-at',
         render: (updatedAt: string) => updatedAt && moment(updatedAt).format(dateFormat),
       } as EuiTableFieldDataColumnType<SavedObjectWithMetadata<any>>,
-      ...columnRegistry.getAll().map((column) => {
-        return {
-          ...column.euiColumn,
-          sortable: false,
-          'data-test-subj': `savedObjectsTableColumn-${column.id}`,
-        };
-      }),
+      {
+        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 workspaceIdNameMap) {
+              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>
+                  )}
+                </>
+              )}
+            </>
+          );
+        },
+      },
       {
         name: i18n.translate('savedObjectsManagement.objectsTable.table.columnActionsName', {
           defaultMessage: 'Actions',

diff --git a/...d_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx b/...d_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
@@ -637,7 +637,6 @@ describe('SavedObjectsTable', () => {
         { force: true }
       );
       expect(component.state('selectedSavedObjects').length).toBe(0);
-      expect(notifications.toasts.addDanger).not.toHaveBeenCalled();
       expect(component.state('isDeleting')).toBe(false);
       expect(component.state('isShowingDeleteConfirmModal')).toBe(false);
     });

diff --git a/.../saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx b/.../saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
@@ -109,7 +109,6 @@ import { DataPublicPluginStart } from '../../../../../plugins/data/public';
 import { DuplicateObject } from '../types';
 import { formatWorkspaceIdParams } from '../../utils';
 import { NavigationPublicPluginStart } from '../../../../navigation/public';
-import { WorkspaceObject } from '../../../../workspaces/public';
 
 interface ExportAllOption {
   id: string;
@@ -162,6 +161,7 @@ export interface SavedObjectsTableState {
   isIncludeReferencesDeepChecked: boolean;
   currentWorkspace?: WorkspaceObject;
   workspaceEnabled: boolean;
+  workspaceIdNameMap: Map<string, string>;
   availableWorkspaces?: WorkspaceAttribute[];
   isShowingDuplicateResultFlyout: boolean;
   failedCopies: SavedObjectsImportError[];
@@ -202,6 +202,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       exportAllOptions: [],
       exportAllSelectedOptions: {},
       isIncludeReferencesDeepChecked: true,
+      workspaceIdNameMap: new Map<string, string>(),
       currentWorkspace: this.props.workspaces.currentWorkspace$.getValue(),
       availableWorkspaces: this.props.workspaces.workspaceList$.getValue(),
       workspaceEnabled: this.props.applications.capabilities.workspaces.enabled,
@@ -379,6 +380,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
     this.workspacesSubscription = workspace.workspaceList$.subscribe((workspaceList) => {
       this.setState({ availableWorkspaces: workspaceList });
     });
+    this.setState({ workspaceIdNameMap: this.workspaceNameIdLookup });
   };
 
   unSubscribeWorkspace = () => {
@@ -1083,6 +1085,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       page,
       perPage,
       savedObjects,
+      workspaceIdNameMap,
       filteredItemCount,
       isSearching,
       savedObjectCounts,
@@ -1169,7 +1172,6 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
         searchThreshold: 1,
       });
     }
-
     return (
       <EuiPageContent horizontalPosition="center" paddingSize={useUpdatedUX ? 'm' : undefined}>
         {this.renderFlyout()}
@@ -1223,6 +1225,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
             pageIndex={page}
             pageSize={perPage}
             items={savedObjects}
+            workspaceIdNameMap={workspaceIdNameMap}
             totalItemCount={filteredItemCount}
             isSearching={isSearching}
             onShowRelationships={this.onShowRelationships}