From e3cab6767012ad556bef7889e1540480a57cf946 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Tue, 21 Jun 2022 18:17:01 +0800
Subject: [PATCH] feat(console): show app guide in "Check Help Guide" drawer

---
 .../src/components/Drawer/index.module.scss     |  7 ++++---
 .../console/src/components/Drawer/index.tsx     | 17 +++++++----------
 .../src/pages/ApplicationDetails/index.tsx      | 17 +++++++++--------
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/console/src/components/Drawer/index.module.scss b/packages/console/src/components/Drawer/index.module.scss
index bb52f7b82..00ac6f236 100644
--- a/packages/console/src/components/Drawer/index.module.scss
+++ b/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;
 }
 
diff --git a/packages/console/src/components/Drawer/index.tsx b/packages/console/src/components/Drawer/index.tsx
index 66754a456..90aa90ac7 100644
--- a/packages/console/src/components/Drawer/index.tsx
+++ b/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>
   );
diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx
index cb867b022..0a7a4e4cc 100644
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/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' }}