From aafd2140db54ff650873981161d9ddc9d6c1e0b8 Mon Sep 17 00:00:00 2001
From: wangsijie <wangsijie@silverhand.io>
Date: Fri, 30 Dec 2022 21:51:06 +0800
Subject: [PATCH] fix(console): dark visible base on initial form data (#2795)

---
 .../components/ConnectorContent.tsx            |  6 +++++-
 .../components/ConnectorForm/index.tsx         | 18 +++++++++++++-----
 .../Connectors/components/Guide/index.tsx      |  7 ++++++-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx
index baeb87e10..ff6ed294c 100644
--- a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx
@@ -103,7 +103,11 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop
           description="connector_details.settings_description"
           learnMoreLink="https://docs.logto.io/docs/references/connectors"
         >
-          <ConnectorForm connector={connectorData} />
+          <ConnectorForm
+            connectorType={connectorData.type}
+            isStandard={connectorData.isStandard}
+            isDarkDefaultVisible={Boolean(connectorData.metadata.logoDark)}
+          />
           {connectorData.type !== ConnectorType.Social && (
             <SenderTester
               className={styles.senderTest}
diff --git a/packages/console/src/pages/Connectors/components/ConnectorForm/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorForm/index.tsx
index 3134686ce..5e05594da 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorForm/index.tsx
@@ -19,19 +19,27 @@ import { SyncProfileMode } from '../../types';
 import * as styles from './index.module.scss';
 
 type Props = {
-  connector: ConnectorFactoryResponse;
+  connectorType: ConnectorType;
+  isStandard: ConnectorFactoryResponse['isStandard'];
+  configTemplate?: ConnectorFactoryResponse['configTemplate'];
   isAllowEditTarget?: boolean;
+  isDarkDefaultVisible?: boolean;
 };
 
-const ConnectorForm = ({ connector, isAllowEditTarget }: Props) => {
+const ConnectorForm = ({
+  configTemplate,
+  isStandard,
+  isAllowEditTarget,
+  isDarkDefaultVisible,
+  connectorType,
+}: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { configTemplate, isStandard, logoDark } = connector;
   const {
     control,
     register,
     formState: { errors },
   } = useFormContext<ConnectorFormType>();
-  const [darkVisible, setDarkVisible] = useState(Boolean(logoDark));
+  const [darkVisible, setDarkVisible] = useState(Boolean(isDarkDefaultVisible));
 
   const toggleDarkVisible = () => {
     setDarkVisible((previous) => !previous);
@@ -141,7 +149,7 @@ const ConnectorForm = ({ connector, isAllowEditTarget }: Props) => {
           )}
         />
       </FormField>
-      {connector.type === ConnectorType.Social && (
+      {connectorType === ConnectorType.Social && (
         <FormField title="connectors.guide.sync_profile">
           <Controller
             name="syncProfile"
diff --git a/packages/console/src/pages/Connectors/components/Guide/index.tsx b/packages/console/src/pages/Connectors/components/Guide/index.tsx
index f163d0437..890b7b502 100644
--- a/packages/console/src/pages/Connectors/components/Guide/index.tsx
+++ b/packages/console/src/pages/Connectors/components/Guide/index.tsx
@@ -122,7 +122,12 @@ const Guide = ({ connector, onClose }: Props) => {
           <div className={styles.title}>{t('connectors.guide.connector_setting')}</div>
           <FormProvider {...methods}>
             <form onSubmit={onSubmit}>
-              <ConnectorForm isAllowEditTarget connector={connector} />
+              <ConnectorForm
+                isAllowEditTarget
+                connectorType={connector.type}
+                configTemplate={connector.configTemplate}
+                isStandard={connector.isStandard}
+              />
               {!isSocialConnector && (
                 <SenderTester
                   className={styles.tester}