feat(console): connector detail readme (#351)

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;
+    }
+  }
+}

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>

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;
+}

packages/phrases/src/locales/en.ts

@@ -110,6 +110,7 @@ const translation = {
     },
     connector_details: {
       back_to_connectors: 'Back to Connectors',
+      check_readme: 'Check README',
     },
   },
 };

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

@@ -112,6 +112,7 @@ const translation = {
     },
     connector_details: {
       back_to_connectors: '返回连接器',
+      check_readme: '查看文档',
     },
   },
 };