fix(console): invalid guide url should show 404 not found (#4367)

packages/console/src/pages/Applications/components/Guide/index.module.scss

@@ -55,6 +55,14 @@
   margin-top: _.unit(6);
 }
 
+.notFound {
+  width: 100%;
+
+  svg {
+    margin-top: 10%;
+  }
+}
+
 .actionBar {
   position: absolute;
   inset: auto 0 0 0;

packages/console/src/pages/Applications/components/Guide/index.tsx

@@ -12,6 +12,7 @@ import CodeEditor from '@/ds-components/CodeEditor';
 import TextLink from '@/ds-components/TextLink';
 import useCustomDomain from '@/hooks/use-custom-domain';
 import DetailsSummary from '@/mdx-components/DetailsSummary';
+import NotFound from '@/pages/NotFound';
 
 import GuideHeader from '../GuideHeader';
 import StepsSkeleton from '../StepsSkeleton';
@@ -50,7 +51,7 @@ export const GuideContext = createContext<GuideContextType>({
 type Props = {
   className?: string;
   guideId: string;
-  app?: ApplicationResponse;
+  app: ApplicationResponse;
   isCompact?: boolean;
   onClose: () => void;
 };
@@ -61,15 +62,12 @@ function Guide({ className, guideId, app, isCompact, onClose }: Props) {
   const isCustomDomainActive = customDomain?.status === DomainStatus.Active;
   const guide = guides.find(({ id }) => id === guideId);
 
-  if (!app || !guide) {
+  const GuideComponent = guide?.Component;
-    throw new Error('Invalid app or guide');
-  }
-
-  const GuideComponent = guide.Component;
 
   const memorizedContext = useMemo(
     () =>
-      ({
+      conditional(
+        !!guide && {
           metadata: guide.metadata,
           Logo: guide.Logo,
           app,
@@ -82,7 +80,8 @@ function Guide({ className, guideId, app, isCompact, onClose }: Props) {
             origin: 'http://localhost:3001/',
             callback: 'http://localhost:3001/callback',
           },
-      }) satisfies GuideContextType,
+        }
+      ) satisfies GuideContextType | undefined,
     [guide, app, tenantEndpoint, isCustomDomainActive, isCompact]
   );
 
@@ -90,6 +89,7 @@ function Guide({ className, guideId, app, isCompact, onClose }: Props) {
     <div className={classNames(styles.container, className)}>
       {!isCompact && <GuideHeader onClose={onClose} />}
       <div className={styles.content}>
+        {memorizedContext ? (
           <GuideContext.Provider value={memorizedContext}>
             <MDXProvider
               components={{
@@ -118,11 +118,14 @@ function Guide({ className, guideId, app, isCompact, onClose }: Props) {
               }}
             >
               <Suspense fallback={<StepsSkeleton />}>
-              {tenantEndpoint && <GuideComponent {...memorizedContext} />}
+                {tenantEndpoint && GuideComponent && <GuideComponent {...memorizedContext} />}
               </Suspense>
             </MDXProvider>
           </GuideContext.Provider>
-        {!isCompact && (
+        ) : (
+          <NotFound className={styles.notFound} />
+        )}
+        {!isCompact && memorizedContext && (
           <nav className={styles.actionBar}>
             <div className={styles.layout}>
               <Button

packages/console/src/pages/NotFound/index.tsx

@@ -1,4 +1,5 @@
 import { Theme } from '@logto/schemas';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
@@ -10,13 +11,17 @@ import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
 
-function NotFound() {
+type Props = {
+  className?: string;
+};
+
+function NotFound({ className }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
   const location = useLocation();
 
   return (
-    <div className={styles.container}>
+    <div className={classNames(styles.container, className)}>
       {/* Don't track "not found" for the root path as it will be redirected. */}
       <PageMeta titleKey="errors.page_not_found" trackPageView={location.pathname !== '/'} />
       <Card className={styles.content}>