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

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

@ -48,7 +48,8 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
handleSubmit,
formState: { isSubmitting, errors },
setError,
} = useForm<FormType>();
watch,
} = useForm<FormType>({ resetOptions: { keepErrors: true } });
const api = useApi({ hideErrorToast: true });
const isLoading = !data && !error;
@ -60,12 +61,12 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
[standardConnectors, providerConnectors]
);
const isCreateButtonDisabled = useMemo(
const isAnyConnectorSelected = useMemo(
() =>
![...standardConnectors, ...providerConnectors].some(
[...standardConnectors, ...providerConnectors].some(
({ providerName }) => selectedProviderName === providerName
),
[selectedProviderName, standardConnectors, providerConnectors]
[providerConnectors, selectedProviderName, standardConnectors]
);
// `rawOnClose` does not clean the state of the modal.
@ -124,7 +125,13 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
<Button
title="enterprise_sso.create_modal.create_button_text"
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}
/>
}
@ -133,8 +140,6 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
>
{isLoading && <Skeleton numberOfLoadingConnectors={2} />}
{error?.message}
{providerConnectors.length > 0 && (
<>
<SsoConnectorRadioGroup
name="providerConnectors"
value={selectedProviderName}
@ -145,8 +150,6 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
<div className={styles.textDivider}>
<DynamicT forKey="enterprise_sso.create_modal.text_divider" />
</div>
</>
)}
<SsoConnectorRadioGroup
name="standardConnectors"
value={selectedProviderName}