feat(core): add sign in to not found page (#6496)

close AFF-211

packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx

@@ -1,13 +1,11 @@
 import { Button } from '@affine/component/ui/button';
 import { AffineShapeIcon } from '@affine/core/components/page-list'; // TODO: import from page-list temporarily, need to defined common svg icon/images management.
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { useWorkspaceStatus } from '@affine/core/hooks/use-workspace-status';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useService, Workspace, WorkspaceManager } from '@toeverything/infra';
 import { useState } from 'react';
 
-import { WorkspaceSubPath } from '../../shared';
 import { mixpanel } from '../../utils';
 import * as styles from './upgrade.css';
 import { ArrowCircleIcon, HeartBreakIcon } from './upgrade-icon';
@@ -20,7 +18,6 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade() {
   const currentWorkspace = useService(Workspace);
   const workspaceManager = useService(WorkspaceManager);
   const upgradeStatus = useWorkspaceStatus(currentWorkspace, s => s.upgrade);
-  const { openPage } = useNavigateHelper();
   const t = useAFFiNEI18N();
 
   const onButtonClick = useAsyncCallback(async () => {
@@ -36,7 +33,10 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade() {
       const newWorkspace =
         await currentWorkspace.upgrade.upgrade(workspaceManager);
       if (newWorkspace) {
-        openPage(newWorkspace.id, WorkspaceSubPath.ALL);
+        location.pathname = `/workspace/${newWorkspace.id}/all`;
+        //FIXME: use openPage will cause a bug, which will cause the 'v1 to v4' test fail.
+        // params.workspaceId will not be updated, so the page will not be re-rendered and still show the 404 page.
+        // openPage(newWorkspace.id, WorkspaceSubPath.ALL);
       } else {
         // blocksuite may enter an incorrect state, reload to reset it.
         location.reload();
@@ -44,12 +44,7 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade() {
     } catch (error) {
       setError(error instanceof Error ? error.message : '' + error);
     }
-  }, [
-    upgradeStatus?.upgrading,
-    currentWorkspace.upgrade,
-    workspaceManager,
-    openPage,
-  ]);
+  }, [upgradeStatus?.upgrading, currentWorkspace.upgrade, workspaceManager]);
 
   return (
     <div className={styles.layout}>

packages/frontend/core/src/pages/404.tsx

@@ -1,4 +1,7 @@
-import { NotFoundPage } from '@affine/component/not-found-page';
+import {
+  NoPermissionOrNotFound,
+  NotFoundPage,
+} from '@affine/component/not-found-page';
 import { useSession } from '@affine/core/hooks/affine/use-current-user';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import type { ReactElement } from 'react';
@@ -7,10 +10,16 @@ import { useCallback, useState } from 'react';
 import { SignOutModal } from '../components/affine/sign-out-modal';
 import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
 import { signOutCloud } from '../utils/cloud-utils';
+import { SignIn } from './sign-in';
 
-export const PageNotFound = (): ReactElement => {
+export const PageNotFound = ({
+  noPermission,
+}: {
+  noPermission?: boolean;
+}): ReactElement => {
   const { user } = useSession();
   const { jumpToIndex } = useNavigateHelper();
+  const { reload } = useSession();
   const [open, setOpen] = useState(false);
 
   const handleBackButtonClick = useCallback(
@@ -24,15 +33,26 @@ export const PageNotFound = (): ReactElement => {
 
   const onConfirmSignOut = useAsyncCallback(async () => {
     setOpen(false);
-    await signOutCloud('/signIn');
-  }, [setOpen]);
+    await signOutCloud();
+    await reload();
+  }, [reload]);
   return (
     <>
-      <NotFoundPage
-        user={user}
-        onBack={handleBackButtonClick}
-        onSignOut={handleOpenSignOutModal}
-      />
+      {noPermission ? (
+        <NoPermissionOrNotFound
+          user={user}
+          onBack={handleBackButtonClick}
+          onSignOut={handleOpenSignOutModal}
+          signInComponent={<SignIn />}
+        />
+      ) : (
+        <NotFoundPage
+          user={user}
+          onBack={handleBackButtonClick}
+          onSignOut={handleOpenSignOutModal}
+        />
+      )}
+
       <SignOutModal
         open={open}
         onOpenChange={setOpen}

packages/frontend/core/src/pages/sign-in.tsx

@@ -1,3 +1,4 @@
+import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
 import { SignInPageContainer } from '@affine/component/auth-components';
 import { useAtom } from 'jotai';
 import { useCallback, useEffect, useRef } from 'react';
@@ -17,7 +18,7 @@ interface LocationState {
     callbackURL?: string;
   };
 }
-export const Component = () => {
+export const SignIn = () => {
   const paymentRedirectRef = useRef<'redirect' | 'ignore' | null>(null);
   const [{ state, email = '', emailType = 'changePassword' }, setAuthAtom] =
     useAtom(authAtom);
@@ -87,14 +88,26 @@ export const Component = () => {
 
   return (
     <SignInPageContainer>
-      <AuthPanel
-        state={state}
-        email={email}
-        emailType={emailType}
-        setEmailType={onSetEmailType}
-        setAuthState={onSetAuthState}
-        setAuthEmail={onSetAuthEmail}
-      />
+      <div style={{ maxWidth: '400px' }}>
+        <AuthPanel
+          state={state}
+          email={email}
+          emailType={emailType}
+          setEmailType={onSetEmailType}
+          setAuthState={onSetAuthState}
+          setAuthEmail={onSetAuthEmail}
+        />
+      </div>
     </SignInPageContainer>
   );
 };
+
+export const Component = () => {
+  return (
+    <AffineOtherPageLayout>
+      <div style={{ padding: '0 20px' }}>
+        <SignIn />
+      </div>
+    </AffineOtherPageLayout>
+  );
+};

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -331,7 +331,7 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
 
   // if sync engine has been synced and the page is null, show 404 page.
   if (pageListReady && !page) {
-    return <PageNotFound />;
+    return <PageNotFound noPermission />;
   }
 
   if (!page) {

packages/frontend/core/src/pages/workspace/index.tsx

@@ -77,9 +77,8 @@ export const Component = (): ReactElement => {
 
   // if listLoading is false, we can show 404 page, otherwise we should show loading page.
   if (listLoading === false && meta === undefined) {
-    return <PageNotFound />;
+    return <PageNotFound noPermission />;
   }
-
   if (!workspace) {
     return <WorkspaceFallback key="workspaceLoading" />;
   }