refactor(console): show connector readme content in drawer

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

@@ -9,19 +9,25 @@
   max-width: 900px;
   min-width: 770px;
   outline: none;
-  background: var(--color-layer-1);
+  background: var(--color-base);
-  overflow-y: auto;
 
-  .headline {
+  .wrapper {
     display: flex;
-    justify-content: right;
+    flex-direction: column;
+    height: 100%;
 
-    > svg {
+    .header {
-      cursor: pointer;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      background-color: var(--color-layer-1);
+      height: 64px;
+      padding: 0 _.unit(6);
     }
 
-    .closeIcon {
+    .body {
-      color: var(--color-icon);
+      flex: 1;
+      overflow-y: auto;
     }
   }
 }

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

@@ -1,18 +1,23 @@
+import { AdminConsoleKey } from '@logto/phrases';
 import React from 'react';
 import ReactModal from 'react-modal';
 
 import Close from '@/icons/Close';
 
+import CardTitle from '../CardTitle';
 import IconButton from '../IconButton';
+import Spacer from '../Spacer';
 import * as styles from './index.module.scss';
 
 type Props = {
+  title?: AdminConsoleKey;
+  subtitle?: AdminConsoleKey;
   isOpen: boolean;
-  onClose?: () => void;
   children: React.ReactNode;
+  onClose?: () => void;
 };
 
-const Drawer = ({ isOpen, onClose, children }: Props) => {
+const Drawer = ({ title, subtitle, isOpen, children, onClose }: Props) => {
   return (
     <ReactModal
       shouldCloseOnOverlayClick
@@ -23,14 +28,18 @@ const Drawer = ({ isOpen, onClose, children }: Props) => {
       closeTimeoutMS={300}
       onRequestClose={onClose}
     >
-      {onClose && (
+      <div className={styles.wrapper}>
-        <div className={styles.headline}>
+        {title && (
-          <IconButton size="large" onClick={onClose}>
+          <div className={styles.header}>
-            <Close className={styles.closeIcon} />
+            <CardTitle size="small" title={title} subtitle={subtitle} />
-          </IconButton>
+            <Spacer />
-        </div>
+            <IconButton size="large" onClick={onClose}>
-      )}
+              <Close />
-      <div>{children}</div>
+            </IconButton>
+          </div>
+        )}
+        <div className={styles.body}>{children}</div>
+      </div>
     </ReactModal>
   );
 };

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

@@ -97,6 +97,10 @@ const ApplicationDetails = () => {
     toast.success(t('application_details.save_success'));
   });
 
+  const onCloseDrawer = () => {
+    setIsReadmeOpen(false);
+  };
+
   const isAdvancedSettings = location.pathname.includes('advanced-settings');
 
   return (
@@ -129,14 +133,8 @@ const ApplicationDetails = () => {
                   setIsReadmeOpen(true);
                 }}
               />
-              <Drawer isOpen={isReadmeOpen}>
+              <Drawer isOpen={isReadmeOpen} onClose={onCloseDrawer}>
-                <Guide
+                <Guide isCompact app={data} onClose={onCloseDrawer} />
-                  isCompact
-                  app={data}
-                  onClose={() => {
-                    setIsReadmeOpen(false);
-                  }}
-                />
               </Drawer>
               <ActionMenu
                 buttonProps={{ icon: <More className={styles.moreIcon} />, size: 'large' }}

packages/console/src/pages/ConnectorDetails/index.module.scss

@@ -95,5 +95,5 @@
 }
 
 .readme {
-  margin-top: _.unit(-6);
+  padding: 0 _.unit(6);
 }

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

@@ -152,6 +152,8 @@ const ConnectorDetails = () => {
               }}
             />
             <Drawer
+              title="connectors.title"
+              subtitle="connectors.subtitle"
               isOpen={isReadMeOpen}
               onClose={() => {
                 setIsReadMeOpen(false);

packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx

@@ -32,7 +32,7 @@ const ConnectorRow = ({ type, connectors, onClickSetup }: Props) => {
   };
 
   return (
-    <tr className={conditional(showSetupButton && tableStyles.clickable)} onClick={handleClickRow}>
+    <tr className={conditional(!showSetupButton && tableStyles.clickable)} onClick={handleClickRow}>
       <td>
         <ConnectorName type={type} connectors={connectors} onClickSetup={onClickSetup} />
       </td>

packages/phrases/src/locales/en.ts

@@ -274,6 +274,8 @@ const translation = {
         native: 'Native',
       },
       add_multi_platform: ' supports multiple platform, select a platform to continue',
+      drawer_title: 'Connector Guide',
+      drawer_subtitle: 'Follow the instructions to integrate your connector',
     },
     connector_details: {
       back_to_connectors: 'Back to Connectors',

packages/phrases/src/locales/zh-cn.ts

@@ -269,6 +269,8 @@ const translation = {
         native: '原生',
       },
       add_multi_platform: ' 支持多平台，请选择一个平台继续',
+      drawer_title: '连接器配置指南',
+      drawer_subtitle: '请参考下列连接器配置指南',
     },
     connector_details: {
       back_to_connectors: '返回连接器',