From 31d2e522ebb6da48e23649aee551e6b5aac4c474 Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Thu, 9 Mar 2023 16:54:29 +0800
Subject: [PATCH] feat: modify delete workspace flow (#1408)

---
 .../panel/general/delete/index.tsx               | 16 ++++++++++------
 packages/i18n/src/resources/en.json              |  2 +-
 tests/local-first-delete-workspace.spec.ts       |  8 +++++++-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx
index 5399028eb..d590d21c6 100644
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx
@@ -2,6 +2,7 @@ import { Button, Input, Modal, ModalCloseButton } from '@affine/component';
 import { Trans, useTranslation } from '@affine/i18n';
 import { useCallback, useState } from 'react';
 
+import { useBlockSuiteWorkspaceName } from '../../../../../../hooks/use-blocksuite-workspace-name';
 import {
   AffineOfficialWorkspace,
   RemWorkspaceFlavour,
@@ -28,8 +29,11 @@ export const WorkspaceDeleteModal = ({
   workspace,
   onDeleteWorkspace,
 }: WorkspaceDeleteProps) => {
+  const [workspaceName] = useBlockSuiteWorkspaceName(
+    workspace.blockSuiteWorkspace ?? null
+  );
   const [deleteStr, setDeleteStr] = useState<string>('');
-  const allowDelete = deleteStr.toLowerCase() === 'delete';
+  const allowDelete = deleteStr === workspaceName;
   const { t } = useTranslation();
 
   const handleDelete = useCallback(() => {
@@ -46,7 +50,7 @@ export const WorkspaceDeleteModal = ({
             <Trans i18nKey="Delete Workspace Description">
               Deleting (
               <StyledWorkspaceName>
-                {{ workspace: workspace.blockSuiteWorkspace.meta.name } as any}
+                {{ workspace: workspaceName } as any}
               </StyledWorkspaceName>
               ) cannot be undone, please proceed with caution. All contents will
               be lost.
@@ -57,7 +61,7 @@ export const WorkspaceDeleteModal = ({
             <Trans i18nKey="Delete Workspace Description2">
               Deleting (
               <StyledWorkspaceName>
-                {{ workspace: workspace.blockSuiteWorkspace.meta.name } as any}
+                {{ workspace: workspaceName } as any}
               </StyledWorkspaceName>
               ) will delete both local and cloud data, this operation cannot be
               undone, please proceed with caution.
@@ -68,11 +72,11 @@ export const WorkspaceDeleteModal = ({
           <Input
             onChange={setDeleteStr}
             data-testid="delete-workspace-input"
-            placeholder={t('Delete Workspace placeholder')}
+            placeholder={t('Placeholder of delete workspace')}
             value={deleteStr}
-            width={284}
+            width={315}
             height={42}
-          ></Input>
+          />
         </StyledInputContent>
         <StyledButtonContent>
           <Button shape="circle" onClick={onClose}>
diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json
index 14c62d210..d8ac351fb 100644
--- a/packages/i18n/src/resources/en.json
+++ b/packages/i18n/src/resources/en.json
@@ -121,7 +121,7 @@
   "Create Or Import": "Create or Import",
   "Delete Workspace": "Delete Workspace",
   "Delete Workspace Description2": "Deleting (<1>{{workspace}}</1>) will delete both local and cloud data, this operation cannot be undone, please proceed with caution.",
-  "Delete Workspace placeholder": "Please type “Delete” to confirm",
+  "Placeholder of delete workspace": "Please type workspace name to confirm",
   "Leave Workspace": "Leave Workspace",
   "Leave": "Leave",
   "Workspace Icon": "Workspace Icon",
diff --git a/tests/local-first-delete-workspace.spec.ts b/tests/local-first-delete-workspace.spec.ts
index 536aa9ff8..10250fb1f 100644
--- a/tests/local-first-delete-workspace.spec.ts
+++ b/tests/local-first-delete-workspace.spec.ts
@@ -12,7 +12,13 @@ test.describe('Local first delete workspace', () => {
   }) => {
     await clickSideBarSettingButton(page);
     await page.getByTestId('delete-workspace-button').click();
-    await page.getByTestId('delete-workspace-input').type('delete');
+    const workspaceNameDom = await page.getByTestId('workspace-name');
+    const currentWorkspaceName = await workspaceNameDom.evaluate(
+      node => node.textContent
+    );
+    await page
+      .getByTestId('delete-workspace-input')
+      .type(currentWorkspaceName as string);
     await page.getByTestId('delete-workspace-confirm-button').click();
     expect(await page.getByTestId('workspace-card').count()).toBe(0);
     await page.mouse.click(1, 1);