Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

chore(console): update SSO connector creation modal interaction (#5015)

Browse source
This commit is contained in:
Darcy Ye 2023-11-30 19:00:55 +08:00 committed by GitHub
parent d6de625754
commit 0acc49892a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/console/src/pages/EnterpriseSso/SsoCreationModal/index.tsx
View file

@ -48,7 +48,8 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
handleSubmit, handleSubmit,
formState: { isSubmitting, errors }, formState: { isSubmitting, errors },
setError, setError,
} = useForm<FormType>(); watch,
} = useForm<FormType>({ resetOptions: { keepErrors: true } });
const api = useApi({ hideErrorToast: true }); const api = useApi({ hideErrorToast: true });
const isLoading = !data && !error; const isLoading = !data && !error;
@ -60,12 +61,12 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
[standardConnectors, providerConnectors] [standardConnectors, providerConnectors]
); );
const isCreateButtonDisabled = useMemo( const isAnyConnectorSelected = useMemo(
() => () =>
![...standardConnectors, ...providerConnectors].some( [...standardConnectors, ...providerConnectors].some(
({ providerName }) => selectedProviderName === providerName ({ providerName }) => selectedProviderName === providerName
), ),
[selectedProviderName, standardConnectors, providerConnectors] [providerConnectors, selectedProviderName, standardConnectors]
); );
// `rawOnClose` does not clean the state of the modal. // `rawOnClose` does not clean the state of the modal.
@ -124,7 +125,13 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
<Button <Button
title="enterprise_sso.create_modal.create_button_text" title="enterprise_sso.create_modal.create_button_text"
type="primary" type="primary"
disabled={isCreateButtonDisabled} disabled={
// The button is available only when:
// 1. `connectorName` field is not empty.
// 2. At least one connector is selected.
// 3. Error is resolved. Since `connectorName` is the only field of this form, it means `connectorName` field error is resolved.
!(watch('connectorName') && isAnyConnectorSelected) || Boolean(errors.connectorName)
}
onClick={onSubmit} onClick={onSubmit}
/> />
} }
@ -133,20 +140,16 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
> >
{isLoading && <Skeleton numberOfLoadingConnectors={2} />} {isLoading && <Skeleton numberOfLoadingConnectors={2} />}
{error?.message} {error?.message}
{providerConnectors.length > 0 && ( <SsoConnectorRadioGroup
<> name="providerConnectors"
<SsoConnectorRadioGroup value={selectedProviderName}
name="providerConnectors" connectors={providerConnectors}
value={selectedProviderName} size={radioGroupSize}
connectors={providerConnectors} onChange={handleSsoSelection}
size={radioGroupSize} />
onChange={handleSsoSelection} <div className={styles.textDivider}>
/> <DynamicT forKey="enterprise_sso.create_modal.text_divider" />
<div className={styles.textDivider}> </div>
<DynamicT forKey="enterprise_sso.create_modal.text_divider" />
</div>
</>
)}
<SsoConnectorRadioGroup <SsoConnectorRadioGroup
name="standardConnectors" name="standardConnectors"
value={selectedProviderName} value={selectedProviderName}