feat: add menu for table

Signed-off-by: tygao <tygao@amazon.com>
ruanyl · Feb 29, 2024 · a388c7b · a388c7b
1 parent 261efb7
commit a388c7b
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 80 deletions.
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
@@ -16,16 +16,65 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
+import { WorkspaceAttribute } from 'opensearch-dashboards/public';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { WorkspaceClient } from '../../workspace_client';
 
 interface DeleteWorkspaceModalProps {
-  selectedItems: string[];
   onClose: () => void;
-  onConfirm: () => void;
+  selectedWorkspace?: WorkspaceAttribute | null;
+  ifNavigate: boolean;
 }
 
 export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
   const [value, setValue] = useState('');
-  const { onClose, onConfirm, selectedItems } = props;
+  const { onClose, selectedWorkspace, ifNavigate } = props;
+  const {
+    services: { application, notifications, http, 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 (http && application && ifNavigate) {
+          const homeUrl = application.getUrlForApp('home', {
+            path: '/',
+            absolute: false,
+          });
+          const targetUrl = http.basePath.prepend(http.basePath.remove(homeUrl), {
+            withoutWorkspace: true,
+          });
+          await application.navigateToUrl(targetUrl);
+        }
+      } else {
+        notifications?.toasts.addDanger({
+          title: i18n.translate('workspace.delete.failed', {
+            defaultMessage: 'Failed to delete workspace',
+          }),
+          text: result?.error,
+        });
+      }
+    }
+  };
 
   return (
     <EuiModal onClose={onClose}>
@@ -37,9 +86,7 @@ export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
         <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' }}>
-            {selectedItems.map((item) => (
-              <li key={item}>{item}</li>
-            ))}
+            {selectedWorkspace?.name ? <li>{selectedWorkspace.name}</li> : null}
           </ul>
           <EuiSpacer />
           <EuiText color="subdued">
@@ -58,7 +105,7 @@ export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
         <EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty>
         <EuiButton
           data-test-subj="Delete Confirm button"
-          onClick={onConfirm}
+          onClick={deleteWorkspace}
           fill
           color="danger"
           disabled={value !== 'delete'}

diff --git a/src/plugins/workspace/public/components/workspace_list/index.tsx b/src/plugins/workspace/public/components/workspace_list/index.tsx
@@ -12,7 +12,6 @@ import {
   EuiLink,
   EuiButton,
   EuiInMemoryTable,
-  EuiTableSelectionType,
   EuiSearchBarProps,
 } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
@@ -27,6 +26,7 @@ import { debounce } from '../utils/common';
 import { WORKSPACE_CREATE_APP_ID } from '../../../common/constants';
 
 import { cleanWorkspaceId } from '../../../../../core/public';
+import { WorkspaceActionsMenu } from './workspace_actions_menu';
 
 const WORKSPACE_LIST_PAGE_DESCRIPTIOIN = i18n.translate('workspace.list.description', {
   defaultMessage:
@@ -48,9 +48,6 @@ export const WorkspaceList = () => {
     pageSizeOptions: [5, 10, 20],
   });
 
-  // Will be uesed when updating table actions
-  const [, setSelection] = useState<WorkspaceAttribute[]>([]);
-
   const handleSwitchWorkspace = useCallback(
     (id: string) => {
       if (application && http) {
@@ -118,9 +115,12 @@ export const WorkspaceList = () => {
           name: 'Edit',
           icon: 'pencil',
           type: 'icon',
-          description: 'edit workspace',
+          description: 'Edit workspace',
           onClick: ({ id }: WorkspaceAttribute) => handleUpdateWorkspace(id),
         },
+        {
+          render: (item: WorkspaceAttribute) => <WorkspaceActionsMenu workspace={item} />,
+        },
       ],
     },
   ];
@@ -157,20 +157,14 @@ export const WorkspaceList = () => {
     ],
   };
 
-  const selectionValue: EuiTableSelectionType<WorkspaceAttribute> = {
-    selectable: () => true,
-    onSelectionChange: (selection) => {
-      setSelection(selection);
-    },
-  };
-
   return (
     <EuiPage paddingSize="none">
       <EuiPageBody panelled>
         <EuiPageHeader
           restrictWidth
           pageTitle="Workspaces"
           description={WORKSPACE_LIST_PAGE_DESCRIPTIOIN}
+          style={{ paddingBottom: 0, borderBottom: 0 }}
         />
         <EuiPageContent
           verticalPosition="center"
@@ -197,7 +191,6 @@ export const WorkspaceList = () => {
               },
             }}
             isSelectable={true}
-            selection={selectionValue}
             search={search}
           />
         </EuiPageContent>

diff --git a/src/plugins/workspace/public/components/workspace_list/workspace_actions_menu.tsx b/src/plugins/workspace/public/components/workspace_list/workspace_actions_menu.tsx
@@ -5,10 +5,17 @@
 
 import React, { useState } from 'react';
 
-import { EuiButton, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
+import { EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
+import { DeleteWorkspaceModal } from '../delete_workspace_modal';
+import { WorkspaceAttribute } from '../../../../../core/public';
 
-export const WorkspaceActionsMenu = () => {
+interface Props {
+  workspace: WorkspaceAttribute;
+}
+
+export const WorkspaceActionsMenu = ({ workspace }: Props) => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const [deleteWorkspaceModalVisible, setDeleteWorkspaceModalVisible] = useState(false);
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -18,28 +25,48 @@ export const WorkspaceActionsMenu = () => {
     setPopover(false);
   };
 
+  const handleDeleteWorkspace = () => {
+    setDeleteWorkspaceModalVisible(true);
+    closePopover();
+  };
+
   const items = [
-    <EuiContextMenuItem key="delete" icon="trash" onClick={closePopover}>
+    <EuiContextMenuItem key="delete" icon="trash" onClick={handleDeleteWorkspace}>
       Delete
     </EuiContextMenuItem>,
+    <EuiContextMenuItem key="delete" icon="trash" onClick={closePopover}>
+      Achive
+    </EuiContextMenuItem>,
   ];
 
   const button = (
-    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
-      Actions
-    </EuiButton>
+    <EuiButtonIcon
+      iconType="boxesHorizontal"
+      aria-label="Heart"
+      color="accent"
+      onClick={onButtonClick}
+    />
   );
 
   return (
-    <EuiPopover
-      id="smallContextMenuExample"
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      panelPaddingSize="none"
-      anchorPosition="downLeft"
-    >
-      <EuiContextMenuPanel size="s" items={items} />
-    </EuiPopover>
+    <>
+      {deleteWorkspaceModalVisible && (
+        <DeleteWorkspaceModal
+          selectedWorkspace={workspace}
+          onClose={() => setDeleteWorkspaceModalVisible(false)}
+          ifNavigate={false}
+        />
+      )}
+      <EuiPopover
+        id="workspace_actions_menu"
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        panelPaddingSize="none"
+        anchorPosition="downLeft"
+      >
+        <EuiContextMenuPanel size="m" items={items} />
+      </EuiPopover>
+    </>
   );
 };
diff --git a/src/plugins/workspace/public/components/workspace_list_app.tsx b/src/plugins/workspace/public/components/workspace_list_app.tsx
@@ -21,7 +21,7 @@ export const WorkspaceListApp = () => {
     chrome?.setBreadcrumbs([
       {
         text: i18n.translate('workspace.workspaceListTitle', {
-          defaultMessage: 'Workspace List',
+          defaultMessage: 'Workspaces',
         }),
       },
     ]);

diff --git a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
@@ -114,47 +114,6 @@ export const WorkspaceUpdater = () => {
   if (!currentWorkspaceFormData.name) {
     return null;
   }
-  const deleteWorkspace = async () => {
-    if (currentWorkspace?.id) {
-      let result;
-      try {
-        result = await workspaceClient.delete(currentWorkspace?.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 setDeleteWorkspaceModalVisible(false);
-      }
-      if (result?.success) {
-        notifications?.toasts.addSuccess({
-          title: i18n.translate('workspace.delete.success', {
-            defaultMessage: 'Delete workspace successfully',
-          }),
-        });
-        setDeleteWorkspaceModalVisible(false);
-        if (http && application) {
-          const homeUrl = application.getUrlForApp('home', {
-            path: '/',
-            absolute: false,
-          });
-          const targetUrl = http.basePath.prepend(http.basePath.remove(homeUrl), {
-            withoutWorkspace: true,
-          });
-          await application.navigateToUrl(targetUrl);
-        }
-      } else {
-        notifications?.toasts.addDanger({
-          title: i18n.translate('workspace.delete.failed', {
-            defaultMessage: 'Failed to delete workspace',
-          }),
-          text: result?.error,
-        });
-      }
-    }
-  };
 
   return (
     <EuiPage paddingSize="none">
@@ -184,9 +143,9 @@ export const WorkspaceUpdater = () => {
           {deleteWorkspaceModalVisible && (
             <EuiPanel>
               <DeleteWorkspaceModal
-                onConfirm={deleteWorkspace}
+                selectedWorkspace={currentWorkspace}
                 onClose={() => setDeleteWorkspaceModalVisible(false)}
-                selectedItems={currentWorkspace?.name ? [currentWorkspace.name] : []}
+                ifNavigate={true}
               />
             </EuiPanel>
           )}