fix(core): open-in-app page crash (#8995)

fix AF-1839

should not render `Link` in open-in-app component

packages/frontend/core/src/desktop/pages/open-app/index.tsx

@@ -1,10 +1,11 @@
+import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
 import { GraphQLService } from '@affine/core/modules/cloud';
 import { OpenInAppPage } from '@affine/core/modules/open-in-app/views/open-in-app-page';
 import { appSchemes, channelToScheme } from '@affine/core/utils/channel';
 import type { GetCurrentUserQuery } from '@affine/graphql';
 import { getCurrentUserQuery } from '@affine/graphql';
 import { useService } from '@toeverything/infra';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 
 import { AppContainer } from '../../components/app-container';
@@ -12,6 +13,15 @@ import { AppContainer } from '../../components/app-container';
 const OpenUrl = () => {
   const [params] = useSearchParams();
   const urlToOpen = params.get('url');
+  const navigateHelper = useNavigateHelper();
+
+  const onOpenHere = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      navigateHelper.jumpToIndex();
+    },
+    [navigateHelper]
+  );
 
   if (!urlToOpen) {
     return null;
@@ -25,7 +35,9 @@ const OpenUrl = () => {
     urlObj.searchParams.set(k, v);
   });
 
-  return <OpenInAppPage urlToOpen={urlObj.toString()} />;
+  return (
+    <OpenInAppPage urlToOpen={urlObj.toString()} openHereClicked={onOpenHere} />
+  );
 };
 
 /**

packages/frontend/core/src/modules/open-in-app/views/open-in-app-guard.tsx

@@ -33,7 +33,7 @@ const WebOpenInAppGuard = ({ children }: { children: React.ReactNode }) => {
   }
 
   return shouldOpenInApp && !environment.isMobile ? (
-    <OpenInAppPage openHereClicked={onOpenHere} />
+    <OpenInAppPage openHereClicked={onOpenHere} mode="open-doc" />
   ) : (
     children
   );

packages/frontend/core/src/modules/open-in-app/views/open-in-app-page.tsx

@@ -1,12 +1,10 @@
 import { Button } from '@affine/component/ui/button';
-import { resolveLinkToDoc } from '@affine/core/modules/navigation';
 import { appIconMap, appNames } from '@affine/core/utils/channel';
 import { Trans, useI18n } from '@affine/i18n';
 import { LocalWorkspaceIcon, Logo1Icon } from '@blocksuite/icons/rc';
 import { useService } from '@toeverything/infra';
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
-import { Link } from 'react-router-dom';
 
 import { GlobalDialogService } from '../../dialogs';
 import { getOpenUrlInDesktopAppLink } from '../utils';
@@ -17,12 +15,17 @@ let lastOpened = '';
 interface OpenAppProps {
   urlToOpen?: string | null;
   openHereClicked?: (e: MouseEvent) => void;
+  mode?: 'auth' | 'open-doc'; // default to 'auth'
 }
 const channel = BUILD_CONFIG.appBuildType;
 const url =
   'https://affine.pro/download' + (channel !== 'stable' ? '/beta-canary' : '');
 
-export const OpenInAppPage = ({ urlToOpen, openHereClicked }: OpenAppProps) => {
+export const OpenInAppPage = ({
+  urlToOpen,
+  openHereClicked,
+  mode = 'auth',
+}: OpenAppProps) => {
   // default to open the current page in desktop app
   urlToOpen ??= getOpenUrlInDesktopAppLink(window.location.href, true);
   const globalDialogService = useService(GlobalDialogService);
@@ -35,18 +38,6 @@ export const OpenInAppPage = ({ urlToOpen, openHereClicked }: OpenAppProps) => {
   const appIcon = appIconMap[channel];
   const appName = appNames[channel];
 
-  const maybeDocLink = urlToOpen ? resolveLinkToDoc(urlToOpen) : null;
-
-  const goToDocPage = useCallback(
-    (e: MouseEvent) => {
-      if (!maybeDocLink) {
-        return;
-      }
-      openHereClicked?.(e);
-    },
-    [maybeDocLink, openHereClicked]
-  );
-
   const goToAppearanceSetting = useCallback(
     (e: MouseEvent) => {
       openHereClicked?.(e);
@@ -109,7 +100,7 @@ export const OpenInAppPage = ({ urlToOpen, openHereClicked }: OpenAppProps) => {
         <img src={appIcon} alt={appName} width={120} height={120} />
 
         <div className={styles.prompt}>
-          {openHereClicked ? (
+          {mode === 'open-doc' ? (
             <Trans i18nKey="com.affine.auth.open.affine.open-doc-prompt">
               This doc is now opened in {appName}
             </Trans>
@@ -124,7 +115,7 @@ export const OpenInAppPage = ({ urlToOpen, openHereClicked }: OpenAppProps) => {
           {openHereClicked && (
             <a
               className={styles.promptLink}
-              onClick={goToDocPage}
+              onClick={openHereClicked}
               target="_blank"
               rel="noreferrer"
             >
@@ -140,25 +131,9 @@ export const OpenInAppPage = ({ urlToOpen, openHereClicked }: OpenAppProps) => {
             {t['com.affine.auth.open.affine.try-again']()}
           </a>
         </div>
-        <div className={styles.accidentHandling}>
-          <div className={styles.prompt}>
-            {t['com.affine.auth.open.affine.still-have-problems']()}
-          </div>
-          <Link to="/" replace className={styles.promptLink}>
-            {t['com.affine.auth.open.affine.continue-with-browser']()}
-          </Link>
-          <a
-            className={styles.promptLink}
-            href={url}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {t['com.affine.auth.open.affine.download-latest-client']()}
-          </a>
-        </div>
       </div>
 
-      {maybeDocLink ? (
+      {mode === 'open-doc' ? (
         <div className={styles.docFooter}>
           <button
             className={styles.editSettingsLink}