Merge pull request #1652 from logto-io/charles-log-3161-refactor-connector-guide-to-avoid-nested-forms

refactor(console): refactor connector guide to avoid nested forms

packages/console/src/pages/Connectors/components/Guide/index.tsx

@@ -1,7 +1,7 @@
 import { ConnectorDto, ConnectorType } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import i18next from 'i18next';
-import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
@@ -90,17 +90,16 @@ const Guide = ({ connector, onClose }: Props) => {
       <div className={styles.content}>
         <Markdown className={styles.readme}>{readme}</Markdown>
         <div className={styles.setup}>
-          <FormProvider {...methods}>
-            <form onSubmit={onSubmit}>
           <Step
             title={t('connector_details.edit_config_label')}
             index={0}
             activeIndex={0}
             buttonText="connectors.save_and_done"
-                buttonHtmlType="submit"
             buttonType="primary"
             isLoading={isSubmitting}
+            onButtonClick={onSubmit}
           >
+            <form {...methods}>
               <Controller
                 name="connectorConfigJson"
                 control={control}
@@ -114,6 +113,7 @@ const Guide = ({ connector, onClose }: Props) => {
                   />
                 )}
               />
+            </form>
             {!isSocialConnector && (
               <SenderTester
                 className={styles.tester}
@@ -123,8 +123,6 @@ const Guide = ({ connector, onClose }: Props) => {
               />
             )}
           </Step>
-            </form>
-          </FormProvider>
         </div>
       </div>
     </div>