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

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')}