Move delete button to update page (opensearch-project#27)

* 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> * change workspace overview route to workspace update Signed-off-by: yuye-aws <yuyezhu@amazon.com> * move delete button from workspace overview page to update page Signed-off-by: yuye-aws <yuyezhu@amazon.com> * remove update button from workspace overview page Signed-off-by: yuye-aws <yuyezhu@amazon.com> * recover router to workspace overview page Signed-off-by: yuye-aws <yuyezhu@amazon.com> * change navigation url for workspace overview button on left side panel Signed-off-by: yuye-aws <yuyezhu@amazon.com> --------- Signed-off-by: yuye-aws <yuyezhu@amazon.com>
SuZhou-Joe · Jul 19, 2023 · 26bb8c4 · 26bb8c4
1 parent 1c69531
commit 26bb8c4
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 60 deletions.
diff --git a/src/plugins/workspace/public/components/workspace_overview.tsx b/src/plugins/workspace/public/components/workspace_overview.tsx
@@ -10,7 +10,6 @@ import { of } from 'rxjs';
 import { i18n } from '@osd/i18n';
 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';
 
@@ -23,43 +22,6 @@ 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({
@@ -76,25 +38,8 @@ export const WorkspaceOverview = () => {
 
   return (
     <>
-      <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>,
-        ]}
-      />
+      <EuiPageHeader pageTitle="Overview" />
       <EuiPanel>
-        {deleteWorkspaceModalVisible && (
-          <DeleteWorkspaceModal
-            onConfirm={deleteWorkspace}
-            onClose={() => setDeleteWorkspaceModalVisible(false)}
-            selectedItems={workspaceName ? [workspaceName] : []}
-          />
-        )}
         <EuiTitle size="m">
           <h3>Workspace</h3>
         </EuiTitle>

diff --git a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
@@ -4,7 +4,14 @@
  */
 
 import React, { useCallback, useEffect, useState } from 'react';
-import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageContent } from '@elastic/eui';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageContent,
+  EuiButton,
+  EuiPanel,
+} from '@elastic/eui';
 import { useObservable } from 'react-use';
 import { i18n } from '@osd/i18n';
 import { of } from 'rxjs';
@@ -20,6 +27,7 @@ import {
   WORKSPACE_OP_TYPE_UPDATE,
 } from '../../../common/constants';
 import { ApplicationStart } from '../../../../../core/public';
+import { DeleteWorkspaceModal } from '../delete_workspace_modal';
 
 export const WorkspaceUpdater = () => {
   const {
@@ -34,6 +42,7 @@ export const WorkspaceUpdater = () => {
   const { [excludedAttribute]: removedProperty, ...otherAttributes } =
     currentWorkspace || ({} as WorkspaceAttribute);
 
+  const [deleteWorkspaceModalVisible, setDeleteWorkspaceModalVisible] = useState(false);
   const [currentWorkspaceFormData, setCurrentWorkspaceFormData] = useState<
     Omit<WorkspaceAttribute, 'id'>
   >(otherAttributes);
@@ -71,7 +80,7 @@ export const WorkspaceUpdater = () => {
             defaultMessage: 'Update workspace successfully',
           }),
         });
-        application.navigateToApp(WORKSPACE_APP_ID, {
+        await application.navigateToApp(WORKSPACE_APP_ID, {
           path: PATHS.overview + '?' + WORKSPACE_ID_IN_SESSION_STORAGE + '=' + currentWorkspace.id,
         });
         return;
@@ -89,11 +98,51 @@ export const WorkspaceUpdater = () => {
   if (!currentWorkspaceFormData.name) {
     return null;
   }
+  const deleteWorkspace = async () => {
+    if (currentWorkspace?.id) {
+      let result;
+      try {
+        result = await workspaces?.client.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',
+          }),
+        });
+      } else {
+        notifications?.toasts.addDanger({
+          title: i18n.translate('workspace.delete.failed', {
+            defaultMessage: 'Failed to delete workspace',
+          }),
+          text: result?.error,
+        });
+      }
+    }
+    setDeleteWorkspaceModalVisible(false);
+    await application.navigateToApp('home');
+  };
 
   return (
     <EuiPage paddingSize="none">
       <EuiPageBody panelled>
-        <EuiPageHeader restrictWidth pageTitle="Update Workspace" />
+        <EuiPageHeader
+          restrictWidth
+          pageTitle="Update Workspace"
+          rightSideItems={[
+            <EuiButton color="danger" onClick={() => setDeleteWorkspaceModalVisible(true)}>
+              Delete
+            </EuiButton>,
+          ]}
+        />
         <EuiPageContent
           verticalPosition="center"
           horizontalPosition="center"
@@ -102,6 +151,15 @@ export const WorkspaceUpdater = () => {
           hasShadow={false}
           style={{ width: '100%', maxWidth: 1000 }}
         >
+          {deleteWorkspaceModalVisible && (
+            <EuiPanel>
+              <DeleteWorkspaceModal
+                onConfirm={deleteWorkspace}
+                onClose={() => setDeleteWorkspaceModalVisible(false)}
+                selectedItems={currentWorkspace?.name ? [currentWorkspace.name] : []}
+              />
+            </EuiPanel>
+          )}
           {application && (
             <WorkspaceForm
               application={application}

diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
@@ -116,7 +116,7 @@ export class WorkspacesPlugin implements Plugin<{}, {}> {
     core.chrome.setCustomNavLink({
       title: i18n.translate('workspace.nav.title', { defaultMessage: 'Workspace Overview' }),
       baseUrl: core.http.basePath.get(),
-      href: core.application.getUrlForApp(WORKSPACE_APP_ID, { path: PATHS.overview }),
+      href: core.application.getUrlForApp(WORKSPACE_APP_ID, { path: PATHS.update }),
     });
     this._changeSavedObjectCurrentWorkspace();
     return {};