[Workspace] Update workspace list page table

changelogs/fragments/7640.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Update workspace list page table ([#7640](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7640))

src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx

@@ -12,7 +12,7 @@ import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/open
 
 const defaultProps: DeleteWorkspaceModalProps = {
   onClose: jest.fn(),
-  selectedWorkspace: null,
+  selectedWorkspaces: [],
   onDeleteSuccess: jest.fn(),
 };
 
@@ -63,10 +63,12 @@ describe('DeleteWorkspaceModal', () => {
     const onDeleteSuccessFn = jest.fn();
     const newProps = {
       ...defaultProps,
-      selectedWorkspace: {
-        id: 'test',
-        name: 'test',
-      },
+      selectedWorkspaces: [
+        {
+          id: 'test',
+          name: 'test',
+        },
+      ],
       onClose: onCloseFn,
       onDeleteSuccess: onDeleteSuccessFn,
     };
@@ -99,10 +101,10 @@ describe('DeleteWorkspaceModal', () => {
     });
   });
 
-  it('should not call deleteWorkspace if passed selectedWorkspace is null', async () => {
+  it('should not call deleteWorkspace modal if passed selectedWorkspace is null', async () => {
     const newProps = {
       ...defaultProps,
-      selectedWorkspace: null,
+      selectedWorkspace: [],
     };
     const deleteFn = jest.fn().mockReturnValue({
       success: true,
@@ -114,26 +116,20 @@ describe('DeleteWorkspaceModal', () => {
         delete: deleteFn,
       },
     };
-    const { getByTestId, findByTestId } = render(
-      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
-    );
-    await findByTestId('delete-workspace-modal-input');
-    const input = getByTestId('delete-workspace-modal-input');
-    fireEvent.change(input, {
-      target: { value: 'delete' },
-    });
-    const confirmButton = getByTestId('delete-workspace-modal-confirm');
-    fireEvent.click(confirmButton);
-    expect(deleteFn).not.toHaveBeenCalled();
+    const { queryByTestId } = render(getWrapWorkspaceDeleteModalInContext(newProps, newServices));
+    const input = queryByTestId('delete-workspace-modal-input');
+    expect(input).not.toBeInTheDocument();
   });
 
-  it('should add danger is returned data is unsuccess', async () => {
+  it('should add danger if returned data is unsuccess', async () => {
     const newProps = {
       ...defaultProps,
-      selectedWorkspace: {
-        id: 'test',
-        name: 'test',
-      },
+      selectedWorkspaces: [
+        {
+          id: 'test',
+          name: 'test',
+        },
+      ],
     };
     const deleteFn = jest.fn().mockReturnValue({
       success: false,
@@ -165,10 +161,12 @@ describe('DeleteWorkspaceModal', () => {
   it('confirm button should be disabled if not input delete', async () => {
     const newProps = {
       ...defaultProps,
-      selectedWorkspace: {
-        id: 'test',
-        name: 'test',
-      },
+      selectedWorkspaces: [
+        {
+          id: 'test',
+          name: 'test',
+        },
+      ],
     };
     const deleteFn = jest.fn().mockReturnValue({
       success: false,
@@ -186,7 +184,7 @@ describe('DeleteWorkspaceModal', () => {
     await findByTestId('delete-workspace-modal-input');
     const input = getByTestId('delete-workspace-modal-input');
     fireEvent.change(input, {
-      target: { value: 'delet' },
+      target: { value: 'delete' },
     });
     const confirmButton = getByTestId('delete-workspace-modal-confirm');
     expect(confirmButton.hasAttribute('disabled'));
@@ -196,10 +194,12 @@ describe('DeleteWorkspaceModal', () => {
     const onCloseFn = jest.fn();
     const newProps = {
       ...defaultProps,
-      selectedWorkspace: {
-        id: 'test',
-        name: 'test',
-      },
+      selectedWorkspaces: [
+        {
+          id: 'test',
+          name: 'test',
+        },
+      ],
       onclose: onCloseFn,
     };
     const deleteFn = jest.fn().mockImplementation(() => {

src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx

@@ -23,49 +23,53 @@ import { WorkspaceClient } from '../../workspace_client';
 
 export interface DeleteWorkspaceModalProps {
   onClose: () => void;
-  selectedWorkspace?: WorkspaceAttribute | null;
+  selectedWorkspaces?: WorkspaceAttribute[];
   onDeleteSuccess?: () => void;
 }
 
 export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
   const [value, setValue] = useState('');
-  const { onClose, selectedWorkspace, onDeleteSuccess } = props;
+  const { onClose, selectedWorkspaces, onDeleteSuccess } = props;
   const {
     services: { notifications, workspaceClient },
   } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
 
-  const deleteWorkspace = async () => {
-    if (selectedWorkspace?.id) {
-      let result;
-      try {
-        result = await workspaceClient.delete(selectedWorkspace?.id);
-      } catch (error) {
-        notifications?.toasts.addDanger({
-          title: i18n.translate('workspace.delete.failed', {
-            defaultMessage: 'Failed to delete workspace',
-          }),
-          text: error instanceof Error ? error.message : JSON.stringify(error),
-        });
-        return onClose();
-      }
-      if (result?.success) {
-        notifications?.toasts.addSuccess({
-          title: i18n.translate('workspace.delete.success', {
-            defaultMessage: 'Delete workspace successfully',
-          }),
-        });
-        onClose();
-        if (onDeleteSuccess) {
-          onDeleteSuccess();
+  const deleteWorkspaces = async () => {
+    if (selectedWorkspaces && selectedWorkspaces.length > 0) {
+      selectedWorkspaces.forEach(async (selectedWorkspace) => {
+        if (selectedWorkspace?.id) {
+          let result;
+          try {
+            result = await workspaceClient.delete(selectedWorkspace?.id);
+          } catch (error) {
+            notifications?.toasts.addDanger({
+              title: i18n.translate('workspace.delete.failed', {
+                defaultMessage: 'Failed to delete workspace',
+              }),
+              text: error instanceof Error ? error.message : JSON.stringify(error),
+            });
+            return onClose();
+          }
+          if (result?.success) {
+            notifications?.toasts.addSuccess({
+              title: i18n.translate('workspace.delete.success', {
+                defaultMessage: 'Delete workspace successfully',
+              }),
+            });
+            onClose();
+            if (onDeleteSuccess) {
+              onDeleteSuccess();
+            }
+          } else {
+            notifications?.toasts.addDanger({
+              title: i18n.translate('workspace.delete.failed', {
+                defaultMessage: 'Failed to delete workspace',
+              }),
+              text: result?.error,
+            });
+          }
         }
-      } else {
-        notifications?.toasts.addDanger({
-          title: i18n.translate('workspace.delete.failed', {
-            defaultMessage: 'Failed to delete workspace',
-          }),
-          text: result?.error,
-        });
-      }
+      });
     }
   };
 
@@ -76,23 +80,31 @@ export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
       </EuiModalHeader>
 
       <EuiModalBody data-test-subj="delete-workspace-modal-body">
-        <div style={{ lineHeight: 1.5 }}>
-          <p>The following workspace will be permanently deleted. This action cannot be undone.</p>
-          <ul style={{ listStyleType: 'disc', listStylePosition: 'inside' }}>
-            {selectedWorkspace?.name ? <li>{selectedWorkspace.name}</li> : null}
-          </ul>
-          <EuiSpacer />
-          <EuiText color="subdued">
-            To confirm your action, type <b>delete</b>.
-          </EuiText>
-          <EuiCompressedFieldText
-            placeholder="delete"
-            fullWidth
-            value={value}
-            data-test-subj="delete-workspace-modal-input"
-            onChange={(e) => setValue(e.target.value)}
-          />
-        </div>
+        {selectedWorkspaces && selectedWorkspaces.length > 0 ? (
+          <div style={{ lineHeight: 1.5 }}>
+            <p>
+              The following workspace will be permanently deleted. This action cannot be undone.
+            </p>
+            <ul style={{ listStyleType: 'disc', listStylePosition: 'inside' }}>
+              {selectedWorkspaces.map((selectedWorkspace) => {
+                return selectedWorkspace?.name ? (
+                  <li key={selectedWorkspace.id}>{selectedWorkspace.name}</li>
+                ) : null;
+              })}
+            </ul>
+            <EuiSpacer />
+            <EuiText color="subdued">
+              To confirm your action, type <b>delete</b>.
+            </EuiText>
+            <EuiCompressedFieldText
+              placeholder="delete"
+              fullWidth
+              value={value}
+              data-test-subj="delete-workspace-modal-input"
+              onChange={(e) => setValue(e.target.value)}
+            />
+          </div>
+        ) : null}
       </EuiModalBody>
 
       <EuiModalFooter>
@@ -104,7 +116,7 @@ export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
         </EuiSmallButtonEmpty>
         <EuiSmallButton
           data-test-subj="delete-workspace-modal-confirm"
-          onClick={deleteWorkspace}
+          onClick={deleteWorkspaces}
           fill
           color="danger"
           disabled={value !== 'delete'}