feat(core): remove toggle workspace onboarding dialog (#6501)

packages/common/infra/src/app-config-storage.ts

@@ -3,8 +3,6 @@ import { z } from 'zod';
 const _appConfigSchema = z.object({
   /** whether to show onboarding first */
   onBoarding: z.boolean().optional().default(true),
-  /** whether to show change workspace guide modal */
-  dismissWorkspaceGuideModal: z.boolean().optional().default(false),
 });
 export type AppConfigSchema = z.infer<typeof _appConfigSchema>;
 export const defaultAppConfig = _appConfigSchema.parse({});

packages/frontend/core/src/components/affine/onboarding/workspace-guide-modal.css.tsx

@@ -1,26 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const title = style({
-  padding: '20px 24px 8px 24px',
-  fontSize: '18px',
-  fontFamily: 'var(--affine-font-family)',
-  fontWeight: '600',
-  lineHeight: '26px',
-});
-
-export const content = style({
-  padding: '0px 24px',
-  fontSize: '15px',
-  lineHeight: '24px',
-  fontWeight: 400,
-});
-
-export const footer = style({
-  padding: '20px 28px',
-  display: 'flex',
-  justifyContent: 'flex-end',
-});
-
-export const gotItBtn = style({
-  fontWeight: 500,
-});

packages/frontend/core/src/components/affine/onboarding/workspace-guide-modal.tsx

@@ -1,65 +0,0 @@
-import { OverlayModal } from '@affine/component';
-import type { ModalProps } from '@affine/component/ui/modal';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { memo, useCallback, useEffect, useState } from 'react';
-
-import { useAppConfigStorage } from '../../../hooks/use-app-config-storage';
-import Thumb from './assets/thumb';
-
-const overlayOptions: ModalProps['overlayOptions'] = {
-  style: {
-    background:
-      'linear-gradient(95deg, transparent 0px, var(--affine-background-primary-color) 400px)',
-  },
-};
-
-export const WorkspaceGuideModal = memo(function WorkspaceGuideModal() {
-  const t = useAFFiNEI18N();
-  const [dismiss, setDismiss] = useAppConfigStorage(
-    'dismissWorkspaceGuideModal'
-  );
-  const [open, setOpen] = useState(!dismiss);
-
-  // blur modal background, can't use css: `backdrop-filter: blur()`,
-  // because it won't behave as expected on client side (texts over transparent window are not blurred)
-  useEffect(() => {
-    const appDom = document.querySelector('#app') as HTMLElement;
-    if (!appDom) return;
-    appDom.style.filter = open ? 'blur(7px)' : 'none';
-
-    return () => {
-      appDom.style.filter = 'none';
-    };
-  }, [open]);
-
-  const gotIt = useCallback(() => {
-    setDismiss(true);
-  }, [setDismiss]);
-
-  const onOpenChange = useCallback((v: boolean) => {
-    setOpen(v);
-    // should set dismiss here ?
-    // setDismiss(true)
-  }, []);
-
-  return (
-    <OverlayModal
-      open={open}
-      onOpenChange={onOpenChange}
-      topImage={<Thumb />}
-      title={t['com.affine.onboarding.workspace-guide.title']()}
-      description={t['com.affine.onboarding.workspace-guide.content']()}
-      onConfirm={gotIt}
-      overlayOptions={overlayOptions}
-      withoutCancelButton
-      confirmButtonOptions={{
-        style: {
-          fontWeight: 500,
-        },
-        type: 'primary',
-        size: 'large',
-      }}
-      confirmText={t['com.affine.onboarding.workspace-guide.got-it']()}
-    />
-  );
-});

packages/frontend/core/src/providers/modal-provider.tsx

@@ -53,14 +53,6 @@ const TmpDisableAffineCloudModal = lazy(() =>
   )
 );
 
-const WorkspaceGuideModal = lazy(() =>
-  import('../components/affine/onboarding/workspace-guide-modal').then(
-    module => ({
-      default: module.WorkspaceGuideModal,
-    })
-  )
-);
-
 const SignOutModal = lazy(() =>
   import('../components/affine/sign-out-modal').then(module => ({
     default: module.SignOutModal,
@@ -205,7 +197,6 @@ export function CurrentWorkspaceModals() {
       </Suspense>
       <StarAFFiNEModal />
       <IssueFeedbackModal />
-      <WorkspaceGuideModal />
       {currentWorkspace ? <Setting /> : null}
       {currentWorkspace?.flavour === WorkspaceFlavour.LOCAL && (
         <>

packages/frontend/electron/src/main/index.ts

@@ -36,7 +36,6 @@ if (process.env.SKIP_ONBOARDING) {
   launchStage.value = 'main';
   persistentConfig.set({
     onBoarding: false,
-    dismissWorkspaceGuideModal: true,
   });
 }
 

tests/kit/playwright.ts

@@ -35,10 +35,7 @@ type CurrentDocCollection = {
 
 export const skipOnboarding = async (context: BrowserContext) => {
   await context.addInitScript(() => {
-    window.localStorage.setItem(
+    window.localStorage.setItem('app_config', '{"onBoarding":false}');
-      'app_config',
-      '{"onBoarding":false, "dismissWorkspaceGuideModal":true}'
-    );
   });
 };
 

tests/storybook/.storybook/preview.tsx

@@ -66,10 +66,7 @@ const ThemeChange = () => {
 localStorage.clear();
 
 // do not show onboarding for storybook
-window.localStorage.setItem(
+window.localStorage.setItem('app_config', '{"onBoarding":false}');
-  'app_config',
-  '{"onBoarding":false, "dismissWorkspaceGuideModal":true}'
-);
 
 const services = new ServiceCollection();