From 223b8a2444c973aca05bec359dd3a87d61c03387 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Thu, 10 Mar 2022 14:47:32 +0800
Subject: [PATCH] feat(console): connector config (#358)

* feat(console): connector config

* fix(console): page layout issues

* feat(console): saved toast

* fix: style lint

Co-authored-by: Charles Zhao <charleszhao@silverhand.io>
---
 .../components/CodeEditor/index.module.scss   |  9 +++
 .../src/components/CodeEditor/index.tsx       | 23 ++++++
 .../src/components/TabNav/index.module.scss   |  2 +-
 .../pages/ConnectorDetails/index.module.scss  | 12 +++
 .../src/pages/ConnectorDetails/index.tsx      | 74 ++++++++++++++++++-
 .../src/pages/Connectors/index.module.scss    |  2 +
 .../middleware/koa-connector-error-handle.ts  |  2 +-
 packages/phrases/src/locales/en.ts            |  5 ++
 packages/phrases/src/locales/zh-cn.ts         |  5 ++
 9 files changed, 130 insertions(+), 4 deletions(-)
 create mode 100644 packages/console/src/components/CodeEditor/index.module.scss
 create mode 100644 packages/console/src/components/CodeEditor/index.tsx

diff --git a/packages/console/src/components/CodeEditor/index.module.scss b/packages/console/src/components/CodeEditor/index.module.scss
new file mode 100644
index 000000000..f7a0e2ea0
--- /dev/null
+++ b/packages/console/src/components/CodeEditor/index.module.scss
@@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.editor {
+  margin: _.unit(1) 0;
+
+  textarea {
+    width: 100%;
+  }
+}
diff --git a/packages/console/src/components/CodeEditor/index.tsx b/packages/console/src/components/CodeEditor/index.tsx
new file mode 100644
index 000000000..865512a84
--- /dev/null
+++ b/packages/console/src/components/CodeEditor/index.tsx
@@ -0,0 +1,23 @@
+import React, { ChangeEventHandler } from 'react';
+
+import * as styles from './index.module.scss';
+
+// Will be implemented in LOG-1708, defined 2 basic props for now.
+type Props = {
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+const CodeEditor = ({ value, onChange }: Props) => {
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+    onChange?.(event.target.value);
+  };
+
+  return (
+    <div className={styles.editor}>
+      <textarea rows={10} value={value} onChange={handleChange} />
+    </div>
+  );
+};
+
+export default CodeEditor;
diff --git a/packages/console/src/components/TabNav/index.module.scss b/packages/console/src/components/TabNav/index.module.scss
index f4c4c4a54..498b30f52 100644
--- a/packages/console/src/components/TabNav/index.module.scss
+++ b/packages/console/src/components/TabNav/index.module.scss
@@ -3,5 +3,5 @@
 .nav {
   border-bottom: 1px solid var(--color-border);
   display: flex;
-  margin: _.unit(6) 0 _.unit(1);
+  margin: _.unit(1) 0;
 }
diff --git a/packages/console/src/pages/ConnectorDetails/index.module.scss b/packages/console/src/pages/ConnectorDetails/index.module.scss
index 9d7e6388c..b88884386 100644
--- a/packages/console/src/pages/ConnectorDetails/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/index.module.scss
@@ -64,3 +64,15 @@
     }
   }
 }
+
+.space {
+  margin-bottom: _.unit(4);
+}
+
+.actions {
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: right;
+  padding: _.unit(4) 0;
+  margin-top: _.unit(6);
+}
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index 8beb1a8d6..a2c1592d1 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -1,5 +1,7 @@
-import { ConnectorDTO } from '@logto/schemas';
-import React, { useState } from 'react';
+import { ConnectorDTO, RequestErrorBody } from '@logto/schemas';
+import ky, { HTTPError } from 'ky';
+import React, { useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 import { useParams } from 'react-router-dom';
@@ -8,8 +10,10 @@ import useSWR from 'swr';
 import BackLink from '@/components/BackLink';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
+import CodeEditor from '@/components/CodeEditor';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import Status from '@/components/Status';
+import TabNav, { TabNavLink } from '@/components/TabNav';
 import Close from '@/icons/Close';
 import * as drawerStyles from '@/scss/drawer.module.scss';
 import { RequestError } from '@/swr';
@@ -19,6 +23,9 @@ import * as styles from './index.module.scss';
 const ConnectorDetails = () => {
   const { connectorId } = useParams();
   const [isReadMeOpen, setIsReadMeOpen] = useState(false);
+  const [config, setConfig] = useState<string>();
+  const [saveError, setSaveError] = useState<string>();
+  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
   const {
     t,
     i18n: { language },
@@ -28,6 +35,44 @@ const ConnectorDetails = () => {
   );
   const isLoading = !data && !error;
 
+  useEffect(() => {
+    if (data) {
+      setConfig(JSON.stringify(data.config, null, 2));
+    }
+  }, [data]);
+
+  const handleSave = async () => {
+    if (!connectorId) {
+      return;
+    }
+
+    if (!config) {
+      setSaveError(t('connector_details.save_error_empty_config'));
+
+      return;
+    }
+
+    try {
+      const configJson = JSON.parse(config) as JSON;
+      setIsSubmitLoading(true);
+      await ky
+        .patch(`/api/connectors/${connectorId}`, { json: { config: configJson } })
+        .json<ConnectorDTO>();
+      toast.success(t('connector_details.save_success'));
+    } catch (error: unknown) {
+      if (error instanceof SyntaxError) {
+        setSaveError(t('connector_details.save_error_json_parse_error'));
+      } else if (error instanceof HTTPError) {
+        const { message } = (await error.response.json()) as RequestErrorBody;
+        setSaveError(message);
+      } else {
+        console.error(error);
+      }
+    }
+
+    setIsSubmitLoading(false);
+  };
+
   return (
     <div className={styles.container}>
       <BackLink to="/connectors">{t('connector_details.back_to_connectors')}</BackLink>
@@ -79,6 +124,31 @@ const ConnectorDetails = () => {
           </div>
         </Card>
       )}
+      {data && (
+        <Card>
+          <TabNav>
+            <TabNavLink href={`/connectors/${connectorId ?? ''}`}>
+              {t('connector_details.tab_settings')}
+            </TabNavLink>
+          </TabNav>
+          <div className={styles.space} />
+          <CodeEditor
+            value={config}
+            onChange={(value) => {
+              setConfig(value);
+            }}
+          />
+          {saveError && <div>{saveError}</div>}
+          <div className={styles.actions}>
+            <Button
+              type="primary"
+              title="admin_console.connector_details.save_changes"
+              disabled={isSubmitLoading}
+              onClick={handleSave}
+            />
+          </div>
+        </Card>
+      )}
     </div>
   );
 };
diff --git a/packages/console/src/pages/Connectors/index.module.scss b/packages/console/src/pages/Connectors/index.module.scss
index 74df442f2..be31551a1 100644
--- a/packages/console/src/pages/Connectors/index.module.scss
+++ b/packages/console/src/pages/Connectors/index.module.scss
@@ -8,6 +8,8 @@
 
 .tabs {
   margin: _.unit(4) _.unit(6) 0;
+  margin-bottom: _.unit(5);
+  padding: _.unit(6) _.unit(6) 0;
 }
 
 .table {
diff --git a/packages/core/src/middleware/koa-connector-error-handle.ts b/packages/core/src/middleware/koa-connector-error-handle.ts
index 9301fa6e4..188a2db8a 100644
--- a/packages/core/src/middleware/koa-connector-error-handle.ts
+++ b/packages/core/src/middleware/koa-connector-error-handle.ts
@@ -22,7 +22,7 @@ export default function koaConnectorErrorHandler<StateT, ContextT>(): Middleware
           throw new RequestError(
             {
               code: 'connector.invalid_config',
-              status: 500,
+              status: 400,
             },
             data
           );
diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts
index 68dcc3125..a4a28e33e 100644
--- a/packages/phrases/src/locales/en.ts
+++ b/packages/phrases/src/locales/en.ts
@@ -113,6 +113,11 @@ const translation = {
     connector_details: {
       back_to_connectors: 'Back to Connectors',
       check_readme: 'Check README',
+      tab_settings: 'Settings',
+      save_changes: 'Save Changes',
+      save_error_empty_config: 'Please enter config.',
+      save_error_json_parse_error: 'Please enter valid JSON.',
+      save_success: 'Saved!',
     },
   },
 };
diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts
index fc9250c7a..476162586 100644
--- a/packages/phrases/src/locales/zh-cn.ts
+++ b/packages/phrases/src/locales/zh-cn.ts
@@ -115,6 +115,11 @@ const translation = {
     connector_details: {
       back_to_connectors: '返回连接器',
       check_readme: '查看文档',
+      tab_settings: '设置',
+      save_changes: '保存',
+      save_error_empty_config: '请输入配置内容。',
+      save_error_json_parse_error: '请输入符合 JSON 格式的配置。',
+      save_success: '保存成功',
     },
   },
 };