fix: cannot delete last workspace (#2537)

apps/web/src/components/affine/workspace-setting-detail/index.css.ts

@@ -108,6 +108,13 @@ export const settingItemLabelHint = style({
   marginTop: '4px',
 });
 
+export const settingsCannotDelete = style([
+  settingItemLabelHint,
+  {
+    color: 'var(--affine-warning-color)',
+  },
+]);
+
 export const row = style({
   padding: '40px 0',
   display: 'flex',

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -1,6 +1,7 @@
 import { Button, toast } from '@affine/component';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import {
   ArrowRightSmallIcon,
   DeleteIcon,
@@ -11,6 +12,7 @@ import {
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import clsx from 'clsx';
+import { useAtomValue } from 'jotai';
 import type React from 'react';
 import { useEffect, useState } from 'react';
 
@@ -89,6 +91,8 @@ export const GeneralPanel: React.FC<PanelProps> = ({
   const [, update] = useBlockSuiteWorkspaceAvatarUrl(
     workspace.blockSuiteWorkspace
   );
+
+  const isLastWorkspace = useAtomValue(rootWorkspacesMetadataAtom).length === 1;
   return (
     <>
       <div data-testid="avatar-row" className={style.row}>
@@ -225,6 +229,14 @@ export const GeneralPanel: React.FC<PanelProps> = ({
           <div className={style.settingItemLabelHint}>
             {t['Delete Workspace Label Hint']()}
           </div>
+          {isOwner && isLastWorkspace && (
+            <div
+              className={style.settingsCannotDelete}
+              data-testid="warn-cannot-delete-last-workspace"
+            >
+              {t['com.affine.workspace.cannot-delete']()}
+            </div>
+          )}
         </div>
 
         <div className={style.col}></div>
@@ -235,6 +247,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
                 type="warning"
                 data-testid="delete-workspace-button"
                 size="middle"
+                disabled={isLastWorkspace}
                 icon={<DeleteIcon />}
                 onClick={() => {
                   setShowDelete(true);

packages/i18n/src/resources/en.json

@@ -279,6 +279,7 @@
   "com.affine.updater.update-available": "Update available",
   "com.affine.updater.open-download-page": "Open download page",
   "com.affine.updater.restart-to-update": "Restart to install update",
+  "com.affine.workspace.cannot-delete": "You cannot delete the last workspace",
   "FILE_ALREADY_EXISTS": "File already exists",
   "others": "Others",
   "Update Available": "Update available",

tests/parallels/local-first-delete-workspace.spec.ts

@@ -51,23 +51,8 @@ test('Should not delete the last one workspace', async ({ page }) => {
   await openHomePage(page);
   await waitMarkdownImported(page);
   await clickSideBarSettingButton(page);
-  await page.getByTestId('delete-workspace-button').click();
-  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);
-  const promise = page
-    .getByTestId('affine-toast')
-    .waitFor({ state: 'attached' });
-  await page.getByTestId('delete-workspace-confirm-button').click();
-  await promise;
-  await page.reload();
-  await page.waitForSelector('[data-testid="workspace-name"]');
-  expect(await page.getByTestId('workspace-name').textContent()).toBe(
-    'Demo Workspace'
-  );
+  await expect(
+    page.getByTestId('warn-cannot-delete-last-workspace').isVisible()
+  ).toBeTruthy();
   await assertCurrentWorkspaceFlavour('local', page);
 });