feat: add toast for workspace deletion (#1825)

Co-authored-by: himself65 <himself65@outlook.com>

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

@@ -26,7 +26,7 @@ export type WorkspaceSettingDetailProps = {
   workspace: AffineOfficialWorkspace;
   currentTab: SettingPanel;
   onChangeTab: (tab: SettingPanel) => void;
-  onDeleteWorkspace: () => void;
+  onDeleteWorkspace: () => Promise<void>;
   onTransferWorkspace: <
     From extends WorkspaceFlavour,
     To extends WorkspaceFlavour

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

@@ -5,6 +5,7 @@ import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-w
 import { useCallback, useState } from 'react';
 
 import type { AffineOfficialWorkspace } from '../../../../../../shared';
+import { toast } from '../../../../../../utils';
 import {
   StyledButtonContent,
   StyledInputContent,
@@ -18,7 +19,7 @@ interface WorkspaceDeleteProps {
   open: boolean;
   onClose: () => void;
   workspace: AffineOfficialWorkspace;
-  onDeleteWorkspace: () => void;
+  onDeleteWorkspace: () => Promise<void>;
 }
 
 export const WorkspaceDeleteModal = ({
@@ -35,8 +36,12 @@ export const WorkspaceDeleteModal = ({
   const { t } = useTranslation();
 
   const handleDelete = useCallback(() => {
-    onDeleteWorkspace();
+    onDeleteWorkspace().then(() => {
-  }, [onDeleteWorkspace]);
+      toast(t('Successfully deleted'), {
+        portal: document.body,
+      });
+    });
+  }, [onDeleteWorkspace, t]);
 
   return (
     <Modal open={open} onClose={onClose}>

apps/web/src/utils/toast.ts

@@ -1,10 +1,14 @@
 import type { ToastOptions } from '@affine/component';
 import { toast as basicToast } from '@affine/component';
+import { DebugLogger } from '@affine/debug';
+
+const logger = new DebugLogger('toast');
 
 export const toast = (message: string, options?: ToastOptions) => {
   const mainContainer = document.querySelector(
     '.main-container'
   ) as HTMLElement;
+  logger.debug(`toast with message: "${message}"`, options);
   return basicToast(message, {
     portal: mainContainer || document.body,
     ...options,

packages/component/src/ui/toast/toast.ts

@@ -38,7 +38,10 @@ const createToastContainer = (portal?: HTMLElement) => {
     flex-direction: column-reverse;
     align-items: center;
   `;
-  const template = html`<div style="${styles}"></div>`;
+  const template = html`<div
+    style="${styles}"
+    data-testid="affine-toast-container"
+  ></div>`;
   const element = htmlToElement<HTMLDivElement>(template);
   portal.appendChild(element);
   return element;
@@ -80,7 +83,10 @@ export const toast = (
     opacity: 0;
   `;
 
-  const template = html`<div style="${styles}"></div>`;
+  const template = html`<div
+    style="${styles}"
+    data-testid="affine-toast"
+  ></div>`;
   const element = htmlToElement<HTMLDivElement>(template);
   // message is not trusted
   element.textContent = message;

packages/workspace/src/type.ts

@@ -96,7 +96,7 @@ type SettingProps<Flavour extends keyof WorkspaceRegistry> =
   UIBaseProps<Flavour> & {
     currentTab: SettingPanel;
     onChangeTab: (tab: SettingPanel) => void;
-    onDeleteWorkspace: () => void;
+    onDeleteWorkspace: () => Promise<void>;
     onTransformWorkspace: <
       From extends keyof WorkspaceRegistry,
       To extends keyof WorkspaceRegistry

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

@@ -22,6 +22,7 @@ test.describe('Local first delete workspace', () => {
       .getByTestId('delete-workspace-input')
       .type(currentWorkspaceName as string);
     await page.getByTestId('delete-workspace-confirm-button').click();
+    await page.getByTestId('affine-toast').waitFor({ state: 'attached' });
     expect(await page.getByTestId('workspace-card').count()).toBe(0);
     await page.mouse.click(1, 1);
     expect(await page.getByTestId('workspace-card').count()).toBe(0);