diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx index d2b9390fc..0b862908c 100644 --- a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx +++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx @@ -1,16 +1,17 @@ import type { Connector, ConnectorResponse, ConnectorMetadata } from '@logto/schemas'; import { ConnectorType } from '@logto/schemas'; -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; -import Button from '@/components/Button'; import CodeEditor from '@/components/CodeEditor'; +import DetailsForm from '@/components/DetailsForm'; +import FormCard from '@/components/FormCard'; import FormField from '@/components/FormField'; import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; import useApi from '@/hooks/use-api'; -import * as detailsStyles from '@/scss/details.module.scss'; import { safeParseJson } from '@/utilities/json'; import * as styles from '../index.module.scss'; @@ -24,15 +25,15 @@ type Props = { const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Props) => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { connectorId } = useParams(); const api = useApi(); - const methods = useForm<{ configJson: string }>({ reValidateMode: 'onBlur' }); const { control, formState: { isSubmitting, isDirty }, handleSubmit, watch, reset, - } = methods; + } = useForm<{ configJson: string }>({ reValidateMode: 'onBlur' }); const defaultConfig = useMemo(() => { const hasData = Object.keys(connectorData.config).length > 0; @@ -40,6 +41,10 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop return hasData ? JSON.stringify(connectorData.config, null, 2) : connectorData.configTemplate; }, [connectorData]); + useEffect(() => { + reset(); + }, [connectorId, reset]); + const onSubmit = handleSubmit(async ({ configJson }) => { if (!configJson) { toast.error(t('connector_details.save_error_empty_config')); @@ -66,8 +71,16 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop return ( <> -
-
+ + )} /> - - {connectorData.type !== ConnectorType.Social && ( - - )} -
-
-
-
-
+ {connectorData.type !== ConnectorType.Social && ( + + )} + + ); diff --git a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx index dc7a2fd3e..05fe5b335 100644 --- a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx +++ b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx @@ -57,6 +57,7 @@ const SenderTester = ({ connectorId, connectorType, config, className }: Props) const onSubmit = handleSubmit(async (formData) => { const { sendTo } = formData; + const result = safeParseJson(config); if (!result.success) { @@ -73,7 +74,7 @@ const SenderTester = ({ connectorId, connectorType, config, className }: Props) }); return ( -
+
{inputError?.message ?? t('connector_details.test_sender_description')}
- +
); }; diff --git a/packages/console/src/pages/ConnectorDetails/index.module.scss b/packages/console/src/pages/ConnectorDetails/index.module.scss index 9376e2471..14094fef0 100644 --- a/packages/console/src/pages/ConnectorDetails/index.module.scss +++ b/packages/console/src/pages/ConnectorDetails/index.module.scss @@ -76,18 +76,12 @@ } } -.body { - > :not(:first-child) { - margin-top: _.unit(4); - } +.codeEditor { + margin-bottom: _.unit(6); +} - .main { - flex: 1; - - .codeEditor { - margin-bottom: _.unit(6); - } - } +.senderTest { + margin-top: _.unit(6); } .resetIcon { diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx index 29ac6cdc0..3b08ae63e 100644 --- a/packages/console/src/pages/ConnectorDetails/index.tsx +++ b/packages/console/src/pages/ConnectorDetails/index.tsx @@ -1,6 +1,5 @@ import type { ConnectorResponse } from '@logto/schemas'; import { AppearanceMode, ConnectorType } from '@logto/schemas'; -import classNames from 'classnames'; import { useState } from 'react'; import { toast } from 'react-hot-toast'; import { Trans, useTranslation } from 'react-i18next'; @@ -73,11 +72,12 @@ const ConnectorDetails = () => { json: { enabled: false }, }) .json(); - toast.success(t('connector_details.connector_deleted')); - await mutateGlobal('/api/connectors'); setIsDeleted(true); + toast.success(t('connector_details.connector_deleted')); + await mutateGlobal('/api/connectors'); + if (isSocial) { navigate(`/connectors/social`, { replace: true }); } else { @@ -178,21 +178,19 @@ const ConnectorDetails = () => { )} + + + {t('general.settings_nav')} + + {data && ( - - - - {t('general.settings_nav')} - - - { - void mutate(connector); - }} - /> - + { + void mutate(connector); + }} + /> )} {data && (