Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-03 21:48:55 -05:00
Code Issues Activity

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

Browse source 
refactor(console): refactor connector guide to avoid nested forms
This commit is contained in:
Charles Zhao 2022-07-22 11:45:33 +08:00 • committed by GitHub
commit 79461e4445
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
packages/console/src/pages/Connectors/components/Guide/index.tsx
View file

@ -1,7 +1,7 @@
import { ConnectorDto, ConnectorType } from '@logto/schemas'; import { ConnectorDto, ConnectorType } from '@logto/schemas';
import { conditional } from '@silverhand/essentials'; import { conditional } from '@silverhand/essentials';
import i18next from 'i18next'; 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 { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -90,41 +90,39 @@ const Guide = ({ connector, onClose }: Props) => {
<div className={styles.content}> <div className={styles.content}>
<Markdown className={styles.readme}>{readme}</Markdown> <Markdown className={styles.readme}>{readme}</Markdown>
<div className={styles.setup}> <div className={styles.setup}>
<FormProvider {...methods}> <Step
<form onSubmit={onSubmit}> title={t('connector_details.edit_config_label')}
<Step index={0}
title={t('connector_details.edit_config_label')} activeIndex={0}
index={0} buttonText="connectors.save_and_done"
activeIndex={0} buttonType="primary"
buttonText="connectors.save_and_done" isLoading={isSubmitting}
buttonHtmlType="submit" onButtonClick={onSubmit}
buttonType="primary" >
isLoading={isSubmitting} <form {...methods}>
> <Controller
<Controller name="connectorConfigJson"
name="connectorConfigJson" control={control}
control={control} defaultValue={configTemplate}
defaultValue={configTemplate} render={({ field: { onChange, value } }) => (
render={({ field: { onChange, value } }) => ( <CodeEditor
<CodeEditor className={styles.editor}
className={styles.editor} language="json"
language="json" value={value}
value={value} onChange={onChange}
onChange={onChange}
/>
)}
/>
{!isSocialConnector && (
<SenderTester
className={styles.tester}
connectorId={connectorId}
connectorType={connectorType}
config={watch('connectorConfigJson')}
/> />
)} )}
</Step> />
</form> </form>
</FormProvider> {!isSocialConnector && (
<SenderTester
className={styles.tester}
connectorId={connectorId}
connectorType={connectorType}
config={watch('connectorConfigJson')}
/>
)}
</Step>
</div> </div>
</div> </div>
</div> </div>