0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

refactor(console): use dynamic step component for connector guide

This commit is contained in:
Gao Sun 2024-06-16 15:30:53 +08:00
parent 50c35a2143
commit bed56beff5
No known key found for this signature in database
GPG key ID: 13EBE123E4773688
2 changed files with 73 additions and 36 deletions

View file

@ -0,0 +1,46 @@
import { type LocalePhrase } from '@logto/phrases';
import React, { type ReactNode, type ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import * as styles from './index.module.scss';
type CanBeArray<T> = T | T[];
type StepProps = {
readonly children: ReactNode;
readonly index?: number;
readonly tKey: keyof LocalePhrase['translation']['admin_console']['connectors']['guide'];
};
export function Step({ children, index, tKey }: StepProps) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.connectors.guide' });
return (
<div className={styles.block}>
<div className={styles.blockTitle}>
<div className={styles.number}>{index}</div>
<div>{t(tKey)}</div>
</div>
{children}
</div>
);
}
type Props = {
readonly children: CanBeArray<ReactElement<StepProps, typeof Step> | boolean>;
};
function Steps({ children }: Props) {
return (
<>
{React.Children.map(children, (child, index) => {
return (
typeof child !== 'boolean' &&
React.cloneElement(child, { key: child.key, index: index + 1 })
);
})}
</>
);
}
export default Steps;

View file

@ -33,6 +33,7 @@ import { trySubmitSafe } from '@/utils/form';
import { splitMarkdownByTitle } from '../utils'; import { splitMarkdownByTitle } from '../utils';
import Steps, { Step } from './Steps';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
const targetErrorCode = 'connector.multiple_target_with_same_platform'; const targetErrorCode = 'connector.multiple_target_with_same_platform';
@ -187,44 +188,34 @@ function Guide({ connector, onClose }: Props) {
<div className={styles.setup}> <div className={styles.setup}>
<FormProvider {...methods}> <FormProvider {...methods}>
<form autoComplete="off" onSubmit={onSubmit}> <form autoComplete="off" onSubmit={onSubmit}>
{isSocialConnector && ( <Steps>
<div className={styles.block}> {isSocialConnector && (
<div className={styles.blockTitle}> <Step tKey="general_setting">
<div className={styles.number}>1</div> <BasicForm
<div>{t('connectors.guide.general_setting')}</div> isAllowEditTarget={isStandard}
</div> isStandard={isStandard}
<BasicForm conflictConnectorName={conflictConnectorName}
isAllowEditTarget={isStandard} />
isStandard={isStandard} </Step>
conflictConnectorName={conflictConnectorName} )}
/> <Step tKey="parameter_configuration">
</div> <ConfigForm
)} connectorId={callbackConnectorId.current}
<div className={styles.block}> connectorFactoryId={connectorFactoryId}
<div className={styles.blockTitle}>
<div className={styles.number}>{isSocialConnector ? 2 : 1}</div>
<div>{t('connectors.guide.parameter_configuration')}</div>
</div>
<ConfigForm
connectorId={callbackConnectorId.current}
connectorFactoryId={connectorFactoryId}
connectorType={connectorType}
formItems={formItems}
/>
</div>
{!isSocialConnector && (
<div className={styles.block}>
<div className={styles.blockTitle}>
<div className={styles.number}>2</div>
<div>{t('connectors.guide.test_connection')}</div>
</div>
<ConnectorTester
connectorFactoryId={connectorId}
connectorType={connectorType} connectorType={connectorType}
parse={() => configParser(watch(), formItems)} formItems={formItems}
/> />
</div> </Step>
)} {!isSocialConnector && (
<Step tKey="test_connection">
<ConnectorTester
connectorFactoryId={connectorId}
connectorType={connectorType}
parse={() => configParser(watch(), formItems)}
/>
</Step>
)}
</Steps>
<div className={styles.footer}> <div className={styles.footer}>
<Button <Button
title="connectors.save_and_done" title="connectors.save_and_done"