Delete Workspace (opensearch-project#24)

* add delete workspace modal Signed-off-by: yuye-aws <yuyezhu@amazon.com> * implement delete on workspace overview page Signed-off-by: yuye-aws <yuyezhu@amazon.com> * fix export on delete workspace modal Signed-off-by: yuye-aws <yuyezhu@amazon.com> * add try catch to handle errors for workspace delete Signed-off-by: yuye-aws <yuyezhu@amazon.com> * move visibility control to workspace overview page exlusively Signed-off-by: yuye-aws <yuyezhu@amazon.com> * remove unused import Signed-off-by: yuye-aws <yuyezhu@amazon.com> --------- Signed-off-by: yuye-aws <yuyezhu@amazon.com>
Hailong-am · Jun 21, 2023 · 4c3e1e0 · 4c3e1e0
1 parent 7220321
commit 4c3e1e0
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 4 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
@@ -0,0 +1,71 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+interface DeleteWorkspaceModalProps {
+  selectedItems: string[];
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
+  const [value, setValue] = useState('');
+  const { onClose, onConfirm, selectedItems } = props;
+
+  return (
+    <EuiModal onClose={onClose}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>Delete workspace</EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <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>
+            ))}
+          </ul>
+          <EuiSpacer />
+          <EuiText color="subdued">
+            To confirm your action, type <b style={{ color: '#000' }}>delete</b>.
+          </EuiText>
+          <EuiFieldText
+            placeholder="delete"
+            fullWidth
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </div>
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty>
+        <EuiButton
+          data-test-subj="Delete Confirm button"
+          onClick={onConfirm}
+          fill
+          color="danger"
+          disabled={value !== 'delete'}
+        >
+          Delete
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+}
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/index.ts b/src/plugins/workspace/public/components/delete_workspace_modal/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './delete_workspace_modal';
diff --git a/src/plugins/workspace/public/components/workspace_overview.tsx b/src/plugins/workspace/public/components/workspace_overview.tsx
@@ -3,17 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { EuiPageHeader, EuiButton, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { useObservable } from 'react-use';
 import { of } from 'rxjs';
 import { i18n } from '@osd/i18n';
-import { PATHS } from '../../common/constants';
 import { ApplicationStart } from '../../../../core/public';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { DeleteWorkspaceModal } from './delete_workspace_modal';
+import { PATHS } from '../../common/constants';
 import { WORKSPACE_APP_ID, WORKSPACE_ID_IN_SESSION_STORAGE } from '../../common/constants';
 
-import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
-
 export const WorkspaceOverview = () => {
   const {
     services: { workspaces, application, notifications },
@@ -23,6 +23,43 @@ export const WorkspaceOverview = () => {
     workspaces ? workspaces.client.currentWorkspace$ : of(null)
   );
 
+  const workspaceId = currentWorkspace?.id;
+  const workspaceName = currentWorkspace?.name;
+  const [deleteWorkspaceModalVisible, setDeleteWorkspaceModalVisible] = useState(false);
+
+  const deleteWorkspace = async () => {
+    if (workspaceId) {
+      let result;
+      try {
+        result = await workspaces?.client.delete(workspaceId);
+      } 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',
+          }),
+        });
+      } else {
+        notifications?.toasts.addDanger({
+          title: i18n.translate('workspace.delete.failed', {
+            defaultMessage: 'Failed to delete workspace',
+          }),
+          text: result?.error,
+        });
+      }
+    }
+    setDeleteWorkspaceModalVisible(false);
+    await application.navigateToApp('home');
+  };
+
   const onUpdateWorkspaceClick = () => {
     if (!currentWorkspace || !currentWorkspace.id) {
       notifications?.toasts.addDanger({
@@ -42,11 +79,22 @@ export const WorkspaceOverview = () => {
       <EuiPageHeader
         pageTitle="Overview"
         rightSideItems={[
+          <EuiButton color="danger" onClick={() => setDeleteWorkspaceModalVisible(true)}>
+            Delete
+          </EuiButton>,
+          <EuiButton>Update</EuiButton>,
           <EuiButton color="danger">Delete</EuiButton>,
           <EuiButton onClick={onUpdateWorkspaceClick}>Update</EuiButton>,
         ]}
       />
       <EuiPanel>
+        {deleteWorkspaceModalVisible && (
+          <DeleteWorkspaceModal
+            onConfirm={deleteWorkspace}
+            onClose={() => setDeleteWorkspaceModalVisible(false)}
+            selectedItems={workspaceName ? [workspaceName] : []}
+          />
+        )}
         <EuiTitle size="m">
           <h3>Workspace</h3>
         </EuiTitle>