Merge pull request #1187 from logto-io/charles-log-2942-show-app-guide-in-check-help-drawer

feat(console): show app guide in "Check Help Guide" drawer

packages/console/src/components/Drawer/index.module.scss

@@ -5,10 +5,11 @@
   top: 0;
   right: 0;
   bottom: 0;
-  width: 700px;
+  width: 50%;
+  max-width: 900px;
+  min-width: 770px;
   outline: none;
   background: var(--color-layer-1);
-  padding: _.unit(6);
   overflow-y: auto;
 
   .headline {
@@ -27,7 +28,7 @@
 
 .overlay {
   position: fixed;
-  background: rgba(0, 0, 0, 40%);
+  background: var(--color-drawer-overlay);
   inset: 0;
 }
 

packages/console/src/components/Drawer/index.tsx

@@ -23,16 +23,13 @@ const Drawer = ({ isOpen, onClose, children }: Props) => {
       closeTimeoutMS={300}
       onRequestClose={onClose}
     >
-      <div className={styles.headline}>
-        <IconButton
-          size="large"
-          onClick={() => {
-            onClose?.();
-          }}
-        >
-          <Close className={styles.closeIcon} />
-        </IconButton>
-      </div>
+      {onClose && (
+        <div className={styles.headline}>
+          <IconButton size="large" onClick={onClose}>
+            <Close className={styles.closeIcon} />
+          </IconButton>
+        </div>
+      )}
       <div>{children}</div>
     </ReactModal>
   );

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

@@ -25,6 +25,7 @@ import * as detailsStyles from '@/scss/details.module.scss';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
 
+import Guide from '../Applications/components/Guide';
 import AdvancedSettings from './components/AdvancedSettings';
 import DeleteForm from './components/DeleteForm';
 import Settings from './components/Settings';
@@ -128,14 +129,14 @@ const ApplicationDetails = () => {
                   setIsReadmeOpen(true);
                 }}
               />
-              <Drawer
-                isOpen={isReadmeOpen}
-                onClose={() => {
-                  setIsReadmeOpen(false);
-                }}
-              >
-                {/* TODO - Implement the content when the documentation website is ready. */}
-                <div>TBD</div>
+              <Drawer isOpen={isReadmeOpen}>
+                <Guide
+                  isCompact
+                  app={data}
+                  onClose={() => {
+                    setIsReadmeOpen(false);
+                  }}
+                />
               </Drawer>
               <ActionMenu
                 buttonProps={{ icon: <More className={styles.moreIcon} />, size: 'large' }}