From 031ab2cfa2f5426339d06029dd50c793323ec705 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Thu, 20 Apr 2023 12:25:45 +0800
Subject: [PATCH] chore: improve disable legacy cloud (#2041)

---
 .../tmp-disable-affine-cloud-modal/index.tsx  | 49 +++++++++++++++
 .../tmp-disable-affine-cloud-modal/style.ts   | 40 ++++++++++++
 .../panel/collaboration/index.tsx             | 57 ++++++++++-------
 .../panel/publish/index.tsx                   | 58 ++++++++++-------
 .../pure/workspace-slider-bar/index.tsx       | 62 ++++++++++---------
 5 files changed, 188 insertions(+), 78 deletions(-)
 create mode 100644 apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
 create mode 100644 apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts

diff --git a/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
new file mode 100644
index 0000000000..fe9931d9b1
--- /dev/null
+++ b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
@@ -0,0 +1,49 @@
+import { IconButton, Modal, ModalWrapper } from '@affine/component';
+import { CloseIcon } from '@blocksuite/icons';
+import type React from 'react';
+
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+
+interface TmpDisableAffineCloudModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const TmpDisableAffineCloudModal: React.FC<
+  TmpDisableAffineCloudModalProps
+> = ({ open, onClose }) => {
+  return (
+    <Modal open={open} onClose={onClose}>
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <IconButton
+            onClick={() => {
+              onClose();
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Header>
+        <Content>
+          <ContentTitle>AFFiNE Cloud is upgrading now.</ContentTitle>
+          <StyleTips>
+            We are upgrading the AFFiNE Cloud service and it is temporarily
+            unavailable on the client side. If you wish to be notified the first
+            time it&apos;s available, please <a href="#">click here</a>
+          </StyleTips>
+          <div>
+            <StyleButton
+              shape="round"
+              type="primary"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              Got it
+            </StyleButton>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};
diff --git a/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
new file mode 100644
index 0000000000..d49dd1a77d
--- /dev/null
+++ b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
@@ -0,0 +1,40 @@
+import { Button, styled } from '@affine/component';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+  flexShrink: 0,
+});
+
+export const Content = styled('div')({
+  textAlign: 'center',
+});
+
+export const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+});
+
+export const StyleTips = styled('div')(() => {
+  return {
+    userSelect: 'none',
+    width: '400px',
+    margin: 'auto',
+    marginBottom: '32px',
+    marginTop: '12px',
+  };
+});
+
+export const StyleButton = styled(Button)(() => {
+  return {
+    width: '284px',
+    display: 'block',
+    margin: 'auto',
+    marginTop: '16px',
+  };
+});
diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx
index fbe6491fb1..fe68bdefc6 100644
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx
@@ -15,6 +15,7 @@ import { useCallback, useState } from 'react';
 import { useMembers } from '../../../../../hooks/affine/use-members';
 import { toast } from '../../../../../utils';
 import { Unreachable } from '../../../affine-error-eoundary';
+import { TmpDisableAffineCloudModal } from '../../../tmp-disable-affine-cloud-modal';
 import { TransformWorkspaceToAffineModal } from '../../../transform-workspace-to-affine-modal';
 import type { PanelProps } from '../../index';
 import { InviteMemberModal } from './invite-member-modal';
@@ -172,32 +173,40 @@ const LocalCollaborationPanel: React.FC<
   return (
     <>
       <Wrapper marginBottom="42px">{t('Collaboration Description')}</Wrapper>
-      {config.enableLegacyCloud && (
-        <Button
-          data-testid="local-workspace-enable-cloud-button"
-          type="light"
-          shape="circle"
-          onClick={() => {
-            setOpen(true);
+
+      <Button
+        data-testid="local-workspace-enable-cloud-button"
+        type="light"
+        shape="circle"
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        {t('Enable AFFiNE Cloud')}
+      </Button>
+      {config.enableLegacyCloud ? (
+        <TransformWorkspaceToAffineModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
           }}
-        >
-          {t('Enable AFFiNE Cloud')}
-        </Button>
+          onConform={() => {
+            onTransferWorkspace(
+              WorkspaceFlavour.LOCAL,
+              WorkspaceFlavour.AFFINE,
+              workspace
+            );
+            setOpen(false);
+          }}
+        />
+      ) : (
+        <TmpDisableAffineCloudModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
       )}
-      <TransformWorkspaceToAffineModal
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onConform={() => {
-          onTransferWorkspace(
-            WorkspaceFlavour.LOCAL,
-            WorkspaceFlavour.AFFINE,
-            workspace
-          );
-          setOpen(false);
-        }}
-      />
     </>
   );
 };
diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx
index 2e98b5aad4..9f361da49b 100644
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx
@@ -18,6 +18,7 @@ import type { AffineOfficialWorkspace } from '../../../../../shared';
 import { toast } from '../../../../../utils';
 import { Unreachable } from '../../../affine-error-eoundary';
 import { EnableAffineCloudModal } from '../../../enable-affine-cloud-modal';
+import { TmpDisableAffineCloudModal } from '../../../tmp-disable-affine-cloud-modal';
 import type { WorkspaceSettingDetailProps } from '../../index';
 
 export type PublishPanelProps = WorkspaceSettingDetailProps & {
@@ -121,32 +122,41 @@ const PublishPanelLocal: React.FC<PublishPanelLocalProps> = ({
       >
         {t('Publishing')}
       </Box>
-      {config.enableLegacyCloud && (
-        <Button
-          data-testid="publish-enable-affine-cloud-button"
-          type="light"
-          shape="circle"
-          onClick={() => {
-            setOpen(true);
+      {/* TmpDisableAffineCloudModal */}
+
+      <Button
+        data-testid="publish-enable-affine-cloud-button"
+        type="light"
+        shape="circle"
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        {t('Enable AFFiNE Cloud')}
+      </Button>
+      {config.enableLegacyCloud ? (
+        <EnableAffineCloudModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
           }}
-        >
-          {t('Enable AFFiNE Cloud')}
-        </Button>
+          onConfirm={() => {
+            onTransferWorkspace(
+              WorkspaceFlavour.LOCAL,
+              WorkspaceFlavour.AFFINE,
+              workspace
+            );
+            setOpen(false);
+          }}
+        />
+      ) : (
+        <TmpDisableAffineCloudModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
       )}
-      <EnableAffineCloudModal
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onConfirm={() => {
-          onTransferWorkspace(
-            WorkspaceFlavour.LOCAL,
-            WorkspaceFlavour.AFFINE,
-            workspace
-          );
-          setOpen(false);
-        }}
-      />
     </>
   );
 };
diff --git a/apps/web/src/components/pure/workspace-slider-bar/index.tsx b/apps/web/src/components/pure/workspace-slider-bar/index.tsx
index 1e31d4e6cb..802695ace9 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/index.tsx
+++ b/apps/web/src/components/pure/workspace-slider-bar/index.tsx
@@ -1,3 +1,4 @@
+import { config } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import {
@@ -204,37 +205,38 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
               )}
             </StyledScrollWrapper>
             <div style={{ height: 16 }}></div>
-            {currentWorkspace?.flavour === WorkspaceFlavour.AFFINE &&
-            currentWorkspace.public ? (
-              <StyledListItem>
-                <StyledLink
-                  href={{
-                    pathname:
-                      currentWorkspaceId && paths.setting(currentWorkspaceId),
-                  }}
+            {config.enableLegacyCloud &&
+              (currentWorkspace?.flavour === WorkspaceFlavour.AFFINE &&
+              currentWorkspace.public ? (
+                <StyledListItem>
+                  <StyledLink
+                    href={{
+                      pathname:
+                        currentWorkspaceId && paths.setting(currentWorkspaceId),
+                    }}
+                  >
+                    <ShareIcon />
+                    <span data-testid="Published-to-web">Published to web</span>
+                  </StyledLink>
+                </StyledListItem>
+              ) : (
+                <StyledListItem
+                  active={
+                    currentPath ===
+                    (currentWorkspaceId && paths.shared(currentWorkspaceId))
+                  }
                 >
-                  <ShareIcon />
-                  <span data-testid="Published-to-web">Published to web</span>
-                </StyledLink>
-              </StyledListItem>
-            ) : (
-              <StyledListItem
-                active={
-                  currentPath ===
-                  (currentWorkspaceId && paths.shared(currentWorkspaceId))
-                }
-              >
-                <StyledLink
-                  href={{
-                    pathname:
-                      currentWorkspaceId && paths.shared(currentWorkspaceId),
-                  }}
-                >
-                  <ShareIcon />
-                  <span data-testid="shared-pages">{t('Shared Pages')}</span>
-                </StyledLink>
-              </StyledListItem>
-            )}
+                  <StyledLink
+                    href={{
+                      pathname:
+                        currentWorkspaceId && paths.shared(currentWorkspaceId),
+                    }}
+                  >
+                    <ShareIcon />
+                    <span data-testid="shared-pages">{t('Shared Pages')}</span>
+                  </StyledLink>
+                </StyledListItem>
+              ))}
             <StyledListItem
               active={
                 currentPath ===