From 0c87bf36ca522d6f1b28335581328620ae7f50ad Mon Sep 17 00:00:00 2001
From: Aditya Sharma <65771169+adityash1@users.noreply.github.com>
Date: Wed, 5 Apr 2023 19:17:14 +0530
Subject: [PATCH] feat: add toast for workspace deletion (#1825)

Co-authored-by: himself65 <himself65@outlook.com>
---
 .../affine/workspace-setting-detail/index.tsx         |  2 +-
 .../panel/general/delete/index.tsx                    | 11 ++++++++---
 apps/web/src/utils/toast.ts                           |  4 ++++
 packages/component/src/ui/toast/toast.ts              | 10 ++++++++--
 packages/workspace/src/type.ts                        |  2 +-
 tests/parallels/local-first-delete-workspace.spec.ts  |  1 +
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/affine/workspace-setting-detail/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/index.tsx
index 03d0983b3c..d8ad7ac453 100644
--- a/apps/web/src/components/affine/workspace-setting-detail/index.tsx
+++ b/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
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 fef0fd0745..f0d1bce038 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
@@ -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]);
+    onDeleteWorkspace().then(() => {
+      toast(t('Successfully deleted'), {
+        portal: document.body,
+      });
+    });
+  }, [onDeleteWorkspace, t]);
 
   return (
     <Modal open={open} onClose={onClose}>
diff --git a/apps/web/src/utils/toast.ts b/apps/web/src/utils/toast.ts
index 77d4bb9e39..c3fadbd9fe 100644
--- a/apps/web/src/utils/toast.ts
+++ b/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,
diff --git a/packages/component/src/ui/toast/toast.ts b/packages/component/src/ui/toast/toast.ts
index 19696bf8aa..ff8646cd5a 100644
--- a/packages/component/src/ui/toast/toast.ts
+++ b/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;
diff --git a/packages/workspace/src/type.ts b/packages/workspace/src/type.ts
index ce54eb3cd5..a3e7a32d6c 100644
--- a/packages/workspace/src/type.ts
+++ b/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
diff --git a/tests/parallels/local-first-delete-workspace.spec.ts b/tests/parallels/local-first-delete-workspace.spec.ts
index 558bdfac82..7456199394 100644
--- a/tests/parallels/local-first-delete-workspace.spec.ts
+++ b/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);