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>

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

@@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.editor {
+  margin: _.unit(1) 0;
+
+  textarea {
+    width: 100%;
+  }
+}

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;

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

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

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

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 {

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
           );

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!',
     },
   },
 };

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: '保存成功',
     },
   },
 };