fix(console): application guide drawer mode in details page (#3531)

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

@@ -31,6 +31,7 @@ import { applicationTypeI18nKey } from '@/types/applications';
 import { withAppInsights } from '@/utils/app-insights';
 
 import Guide from '../Applications/components/Guide';
+import GuideModal from '../Applications/components/Guide/GuideModal';
 import AdvancedSettings from './components/AdvancedSettings';
 import Settings from './components/Settings';
 import * as styles from './index.module.scss';
@@ -229,7 +230,7 @@ function ApplicationDetails() {
       )}
       <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleted && isDirty} />
       {isGuideView && (
-        <Guide
+        <GuideModal
           app={data}
           onClose={(id) => {
             navigate(`/applications/${id}`);

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

@@ -0,0 +1,34 @@
+import type { Application } from '@logto/schemas';
+import Modal from 'react-modal';
+
+import * as modalStyles from '@/scss/modal.module.scss';
+
+import Guide from '.';
+
+type Props = {
+  app?: Application;
+  onClose: (id: string) => void;
+};
+
+const GuideModal = ({ app, onClose }: Props) => {
+  if (!app) {
+    return null;
+  }
+
+  const closeModal = () => {
+    onClose(app.id);
+  };
+
+  return (
+    <Modal
+      shouldCloseOnEsc
+      isOpen={Boolean(app)}
+      className={modalStyles.fullScreen}
+      onRequestClose={closeModal}
+    >
+      <Guide app={app} onClose={closeModal} />
+    </Modal>
+  );
+};
+
+export default GuideModal;

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

@@ -5,13 +5,11 @@ import i18next from 'i18next';
 import type { MDXProps } from 'mdx/types';
 import type { LazyExoticComponent } from 'react';
 import { useEffect, useContext, cloneElement, lazy, Suspense, useState } from 'react';
-import Modal from 'react-modal';
 
 import CodeEditor from '@/components/CodeEditor';
 import TextLink from '@/components/TextLink';
 import { AppEndpointsContext } from '@/contexts/AppEndpointsProvider';
 import DetailsSummary from '@/mdx-components/DetailsSummary';
-import * as modalStyles from '@/scss/modal.module.scss';
 import type { SupportedSdk } from '@/types/applications';
 import { applicationTypeAndSdkTypeMappings } from '@/types/applications';
 
@@ -23,7 +21,7 @@ import * as styles from './index.module.scss';
 type Props = {
   app?: Application;
   isCompact?: boolean;
-  onClose: (id: string) => void;
+  onClose: () => void;
 };
 
 const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Element>> = {
@@ -72,23 +70,13 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
   const guideI18nKey = `${selectedSdk}_${locale}`.toLowerCase();
   const GuideComponent = Guides[guideI18nKey] ?? Guides[selectedSdk.toLowerCase()];
 
-  const closeModal = () => {
-    onClose(appId);
-  };
-
   return (
-    <Modal
-      shouldCloseOnEsc
-      isOpen={Boolean(app)}
-      className={modalStyles.fullScreen}
-      onRequestClose={closeModal}
-    >
     <div className={styles.container}>
       <GuideHeader
         appName={appName}
         selectedSdk={selectedSdk}
         isCompact={isCompact}
-          onClose={closeModal}
+        onClose={onClose}
       />
       <div className={styles.content}>
         {cloneElement(<SdkSelector sdks={sdks} selectedSdk={selectedSdk} />, {
@@ -131,14 +119,13 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
                 onNext={(nextIndex: number) => {
                   setActiveStepIndex(nextIndex);
                 }}
-                  onComplete={closeModal}
+                onComplete={onClose}
               />
             )}
           </Suspense>
         </MDXProvider>
       </div>
     </div>
-    </Modal>
   );
 };