From 012db5e07d0316d4dd4203b28fdef5198cd23b88 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Thu, 10 Mar 2022 11:38:20 +0800
Subject: [PATCH] feat(console): connector detail readme (#351)

---
 .../pages/ConnectorDetails/index.module.scss  | 15 +++++++++
 .../src/pages/ConnectorDetails/index.tsx      | 32 +++++++++++++++++--
 packages/console/src/scss/drawer.module.scss  | 14 ++++++++
 packages/phrases/src/locales/en.ts            |  1 +
 packages/phrases/src/locales/zh-cn.ts         |  1 +
 5 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 packages/console/src/scss/drawer.module.scss

diff --git a/packages/console/src/pages/ConnectorDetails/index.module.scss b/packages/console/src/pages/ConnectorDetails/index.module.scss
index 29be84eb2..9d7e6388c 100644
--- a/packages/console/src/pages/ConnectorDetails/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/index.module.scss
@@ -49,3 +49,18 @@
     }
   }
 }
+
+.readme {
+  background: var(--color-card-background);
+  padding: _.unit(6);
+  height: 100%;
+
+  .headline {
+    display: flex;
+    justify-content: right;
+
+    > svg {
+      cursor: pointer;
+    }
+  }
+}
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index ffcfc9f34..8beb1a8d6 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -1,19 +1,24 @@
 import { ConnectorDTO } from '@logto/schemas';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import ReactModal from 'react-modal';
 import { useParams } from 'react-router-dom';
 import useSWR from 'swr';
 
 import BackLink from '@/components/BackLink';
+import Button from '@/components/Button';
 import Card from '@/components/Card';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import Status from '@/components/Status';
+import Close from '@/icons/Close';
+import * as drawerStyles from '@/scss/drawer.module.scss';
 import { RequestError } from '@/swr';
 
 import * as styles from './index.module.scss';
 
 const ConnectorDetails = () => {
   const { connectorId } = useParams();
+  const [isReadMeOpen, setIsReadMeOpen] = useState(false);
   const {
     t,
     i18n: { language },
@@ -48,7 +53,30 @@ const ConnectorDetails = () => {
               </Status>
             </div>
           </div>
-          <div>action</div>
+          <div>
+            <Button
+              title="admin_console.connector_details.check_readme"
+              onClick={() => {
+                setIsReadMeOpen(true);
+              }}
+            />
+            <ReactModal
+              isOpen={isReadMeOpen}
+              className={drawerStyles.content}
+              overlayClassName={drawerStyles.overlay}
+            >
+              <div className={styles.readme}>
+                <div className={styles.headline}>
+                  <Close
+                    onClick={() => {
+                      setIsReadMeOpen(false);
+                    }}
+                  />
+                </div>
+                <div>README</div>
+              </div>
+            </ReactModal>
+          </div>
         </Card>
       )}
     </div>
diff --git a/packages/console/src/scss/drawer.module.scss b/packages/console/src/scss/drawer.module.scss
new file mode 100644
index 000000000..dd803547f
--- /dev/null
+++ b/packages/console/src/scss/drawer.module.scss
@@ -0,0 +1,14 @@
+.content {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  outline: none;
+}
+
+.overlay {
+  position: fixed;
+  background: rgba(0, 0, 0, 40%);
+  inset: 0;
+}
diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts
index 7635e65af..e1bf69f8d 100644
--- a/packages/phrases/src/locales/en.ts
+++ b/packages/phrases/src/locales/en.ts
@@ -110,6 +110,7 @@ const translation = {
     },
     connector_details: {
       back_to_connectors: 'Back to Connectors',
+      check_readme: 'Check README',
     },
   },
 };
diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts
index 4a4e07d54..3adf456d2 100644
--- a/packages/phrases/src/locales/zh-cn.ts
+++ b/packages/phrases/src/locales/zh-cn.ts
@@ -112,6 +112,7 @@ const translation = {
     },
     connector_details: {
       back_to_connectors: '返回连接器',
+      check_readme: '查看文档',
     },
   },
 };