feat(electron): enable disable cloud alert (#2184)

apps/web/src/atoms/index.ts

@@ -78,6 +78,8 @@ export const openWorkspacesModalAtom = atom(false);
 export const openCreateWorkspaceModalAtom = atom(false);
 export const openQuickSearchModalAtom = atom(false);
 
+export const openDisableCloudAlertModalAtom = atom(false);
+
 export { workspacesAtom } from './root';
 
 type View = { id: string; mode: 'page' | 'edgeless' };

apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx

@@ -21,7 +21,11 @@ export const TmpDisableAffineCloudModal: React.FC<
   TmpDisableAffineCloudModalProps
 > = ({ open, onClose }) => {
   return (
-    <Modal open={open} onClose={onClose}>
+    <Modal
+      data-testid="disable-affine-cloud-modal"
+      open={open}
+      onClose={onClose}
+    >
       <ModalWrapper width={480}>
         <Header>
           <IconButton
@@ -41,6 +45,9 @@ export const TmpDisableAffineCloudModal: React.FC<
             <a
               href="https://github.com/toeverything/AFFiNE/releases"
               target="_blank"
+              style={{
+                color: 'var(--affine-link-color)',
+              }}
             >
               click here
             </a>

apps/web/src/components/pure/footer/index.tsx

@@ -5,10 +5,12 @@ import { config } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
 import type { AccessTokenMessage } from '@affine/workspace/affine/login';
 import { CloudWorkspaceIcon, SignOutIcon } from '@blocksuite/icons';
+import { useSetAtom } from 'jotai';
 import type { CSSProperties } from 'react';
 import type React from 'react';
 import { forwardRef } from 'react';
 
+import { openDisableCloudAlertModalAtom } from '../../../atoms';
 import { stringToColour } from '../../../utils';
 import { StyledFooter, StyledSignInButton, StyleUserInfo } from './styles';
 
@@ -20,11 +22,7 @@ export type FooterProps = {
 
 export const Footer: React.FC<FooterProps> = ({ user, onLogin, onLogout }) => {
   const { t } = useTranslation();
-
-  if (!config.enableLegacyCloud) {
-    return null;
-  }
-
+  const setOpen = useSetAtom(openDisableCloudAlertModalAtom);
   return (
     <StyledFooter data-testid="workspace-list-modal-footer">
       {user && (
@@ -55,6 +53,7 @@ export const Footer: React.FC<FooterProps> = ({ user, onLogin, onLogout }) => {
 
       {!user && (
         <StyledSignInButton
+          data-testid="sign-in-button"
           noBorder
           bold
           icon={
@@ -63,7 +62,11 @@ export const Footer: React.FC<FooterProps> = ({ user, onLogin, onLogout }) => {
             </div>
           }
           onClick={async () => {
-            onLogin();
+            if (!config.enableLegacyCloud) {
+              setOpen(true);
+            } else {
+              onLogin();
+            }
           }}
         >
           {t('Sign in')}

apps/web/src/providers/ModalProvider.tsx

@@ -8,6 +8,7 @@ import { lazy, Suspense, useCallback, useTransition } from 'react';
 import {
   currentWorkspaceIdAtom,
   openCreateWorkspaceModalAtom,
+  openDisableCloudAlertModalAtom,
   openWorkspacesModalAtom,
 } from '../atoms';
 import { useAffineLogIn } from '../hooks/affine/use-affine-log-in';
@@ -29,6 +30,14 @@ const CreateWorkspaceModal = lazy(() =>
   }))
 );
 
+const TmpDisableAffineCloudModal = lazy(() =>
+  import('../components/affine/tmp-disable-affine-cloud-modal').then(
+    module => ({
+      default: module.TmpDisableAffineCloudModal,
+    })
+  )
+);
+
 export function Modals() {
   const [openWorkspacesModal, setOpenWorkspacesModal] = useAtom(
     openWorkspacesModalAtom
@@ -37,6 +46,10 @@ export function Modals() {
     openCreateWorkspaceModalAtom
   );
 
+  const [openDisableCloudAlertModal, setOpenDisableCloudAlertModal] = useAtom(
+    openDisableCloudAlertModalAtom
+  );
+
   const router = useRouter();
   const { jumpToSubPath } = useRouterHelper(router);
   const user = useCurrentUser();
@@ -49,6 +62,14 @@ export function Modals() {
 
   return (
     <>
+      <Suspense>
+        <TmpDisableAffineCloudModal
+          open={openDisableCloudAlertModal}
+          onClose={useCallback(() => {
+            setOpenDisableCloudAlertModal(false);
+          }, [setOpenDisableCloudAlertModal])}
+        />
+      </Suspense>
       <Suspense>
         <WorkspaceListModal
           disabled={transitioning}