From 42bb0a9fabf670c7274cec0130c1ada0f4ee4ad5 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Mon, 20 Mar 2023 19:13:45 +0800
Subject: [PATCH] fix(console): application guide drawer mode in details page
 (#3531)

---
 .../src/pages/ApplicationDetails/index.tsx    |   3 +-
 .../components/Guide/GuideModal.tsx           |  34 +++++
 .../Applications/components/Guide/index.tsx   | 121 ++++++++----------
 3 files changed, 90 insertions(+), 68 deletions(-)
 create mode 100644 packages/console/src/pages/Applications/components/Guide/GuideModal.tsx

diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx
index baef67031..9f168673f 100644
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/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}`);
diff --git a/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx b/packages/console/src/pages/Applications/components/Guide/GuideModal.tsx
new file mode 100644
index 000000000..dba931f93
--- /dev/null
+++ b/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;
diff --git a/packages/console/src/pages/Applications/components/Guide/index.tsx b/packages/console/src/pages/Applications/components/Guide/index.tsx
index 3481cb8d8..a0416bb33 100644
--- a/packages/console/src/pages/Applications/components/Guide/index.tsx
+++ b/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,73 +70,62 @@ 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}
-        />
-        <div className={styles.content}>
-          {cloneElement(<SdkSelector sdks={sdks} selectedSdk={selectedSdk} />, {
-            className: styles.banner,
-            isCompact,
-            onChange: setSelectedSdk,
-            onToggle: () => {
-              setActiveStepIndex(0);
-            },
-          })}
-          <MDXProvider
-            components={{
-              code: ({ className, children }) => {
-                const [, language] = /language-(\w+)/.exec(className ?? '') ?? [];
+    <div className={styles.container}>
+      <GuideHeader
+        appName={appName}
+        selectedSdk={selectedSdk}
+        isCompact={isCompact}
+        onClose={onClose}
+      />
+      <div className={styles.content}>
+        {cloneElement(<SdkSelector sdks={sdks} selectedSdk={selectedSdk} />, {
+          className: styles.banner,
+          isCompact,
+          onChange: setSelectedSdk,
+          onToggle: () => {
+            setActiveStepIndex(0);
+          },
+        })}
+        <MDXProvider
+          components={{
+            code: ({ className, children }) => {
+              const [, language] = /language-(\w+)/.exec(className ?? '') ?? [];
 
-                return language ? (
-                  <CodeEditor isReadonly language={language} value={String(children)} />
-                ) : (
-                  <code>{String(children)}</code>
-                );
-              },
-              a: ({ children, ...props }) => (
-                <TextLink {...props} target="_blank" rel="noopener noreferrer">
-                  {children}
-                </TextLink>
-              ),
-              details: DetailsSummary,
-            }}
-          >
-            <Suspense fallback={<StepsSkeleton />}>
-              {GuideComponent && (
-                <GuideComponent
-                  appId={appId}
-                  appSecret={appSecret}
-                  endpoint={userEndpoint}
-                  redirectUris={oidcClientMetadata.redirectUris}
-                  postLogoutRedirectUris={oidcClientMetadata.postLogoutRedirectUris}
-                  activeStepIndex={activeStepIndex}
-                  isCompact={isCompact}
-                  onNext={(nextIndex: number) => {
-                    setActiveStepIndex(nextIndex);
-                  }}
-                  onComplete={closeModal}
-                />
-              )}
-            </Suspense>
-          </MDXProvider>
-        </div>
+              return language ? (
+                <CodeEditor isReadonly language={language} value={String(children)} />
+              ) : (
+                <code>{String(children)}</code>
+              );
+            },
+            a: ({ children, ...props }) => (
+              <TextLink {...props} target="_blank" rel="noopener noreferrer">
+                {children}
+              </TextLink>
+            ),
+            details: DetailsSummary,
+          }}
+        >
+          <Suspense fallback={<StepsSkeleton />}>
+            {GuideComponent && (
+              <GuideComponent
+                appId={appId}
+                appSecret={appSecret}
+                endpoint={userEndpoint}
+                redirectUris={oidcClientMetadata.redirectUris}
+                postLogoutRedirectUris={oidcClientMetadata.postLogoutRedirectUris}
+                activeStepIndex={activeStepIndex}
+                isCompact={isCompact}
+                onNext={(nextIndex: number) => {
+                  setActiveStepIndex(nextIndex);
+                }}
+                onComplete={onClose}
+              />
+            )}
+          </Suspense>
+        </MDXProvider>
       </div>
-    </Modal>
+    </div>
   );
 };