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

refactor(console): use correct array for checking enterprise sso (#6135)

* refactor(console): use correct array for checking enterprise sso

* refactor(console): hide add connector button when no connector available

* refactor(console): fix sso connector check conditions in the organization jit section

* refactor(console): update styles
This commit is contained in:
Gao Sun 2024-06-28 17:03:15 +08:00 committed by GitHub
parent f8f84f5d75
commit 18fbdb79c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 62 additions and 55 deletions

View file

@ -48,6 +48,10 @@ function JitSettings({ form }: Props) {
{ initialSize: Number.POSITIVE_INFINITY } { initialSize: Number.POSITIVE_INFINITY }
); );
const allSsoConnectors = useMemo(() => ssoConnectorMatrix?.flat(), [ssoConnectorMatrix]); const allSsoConnectors = useMemo(() => ssoConnectorMatrix?.flat(), [ssoConnectorMatrix]);
const filteredSsoConnectors = useMemo(
() => allSsoConnectors?.filter(({ id }) => !ssoConnectorIds.includes(id)),
[allSsoConnectors, ssoConnectorIds]
);
const hasSsoEnabled = useCallback( const hasSsoEnabled = useCallback(
(domain: string) => allSsoConnectors?.some(({ domains }) => domains.includes(domain)), (domain: string) => allSsoConnectors?.some(({ domains }) => domains.includes(domain)),
[allSsoConnectors] [allSsoConnectors]
@ -65,6 +69,7 @@ function JitSettings({ form }: Props) {
description="organization_details.jit.description" description="organization_details.jit.description"
> >
<FormField <FormField
className={styles.jitFormField}
title="organization_details.jit.enterprise_sso" title="organization_details.jit.enterprise_sso"
description={ description={
<Trans <Trans
@ -81,7 +86,7 @@ function JitSettings({ form }: Props) {
} }
descriptionPosition="top" descriptionPosition="top"
> >
{ssoConnectorIds.length === 0 && ( {!allSsoConnectors?.length && (
<InlineNotification> <InlineNotification>
<Trans <Trans
i18nKey="admin_console.organization_details.jit.no_enterprise_connector_set" i18nKey="admin_console.organization_details.jit.no_enterprise_connector_set"
@ -89,11 +94,12 @@ function JitSettings({ form }: Props) {
/> />
</InlineNotification> </InlineNotification>
)} )}
{ssoConnectorIds.length > 0 && (
<Controller <Controller
name="jitSsoConnectorIds" name="jitSsoConnectorIds"
control={control} control={control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<>
{value.length > 0 && (
<div className={styles.ssoConnectorList}> <div className={styles.ssoConnectorList}>
{value.map((id) => { {value.map((id) => {
const connector = allSsoConnectors?.find( const connector = allSsoConnectors?.find(
@ -119,19 +125,19 @@ function JitSettings({ form }: Props) {
) )
); );
})} })}
</div>
)}
{Boolean(filteredSsoConnectors?.length) && (
<ActionMenu <ActionMenu
buttonProps={{ buttonProps={{
type: 'default', type: 'default',
size: 'medium', size: 'medium',
title: 'organization_details.jit.add_enterprise_connector', title: 'organization_details.jit.add_enterprise_connector',
icon: <Plus />, icon: <Plus />,
className: styles.addSsoConnectorButton,
}} }}
dropdownHorizontalAlign="start" dropdownHorizontalAlign="start"
> >
{allSsoConnectors {filteredSsoConnectors?.map((connector) => (
?.filter(({ id }) => !value.includes(id))
.map((connector) => (
<DropdownItem <DropdownItem
key={connector.id} key={connector.id}
className={styles.dropdownItem} className={styles.dropdownItem}
@ -144,10 +150,10 @@ function JitSettings({ form }: Props) {
</DropdownItem> </DropdownItem>
))} ))}
</ActionMenu> </ActionMenu>
</div> )}
</>
)} )}
/> />
)}
</FormField> </FormField>
<FormField <FormField
title="organization_details.jit.email_domain" title="organization_details.jit.email_domain"
@ -208,7 +214,7 @@ function JitSettings({ form }: Props) {
)} )}
/> />
{hasSsoEnabledEmailDomain && ( {hasSsoEnabledEmailDomain && (
<InlineNotification severity="alert" className={styles.warning}> <InlineNotification severity="alert">
{t('organization_details.jit.sso_enabled_domain_warning')} {t('organization_details.jit.sso_enabled_domain_warning')}
</InlineNotification> </InlineNotification>
)} )}

View file

@ -16,12 +16,13 @@
} }
} }
.jitFormField {
.warning { display: flex;
margin-top: _.unit(3); flex-direction: column;
gap: _.unit(3);
} }
.addSsoConnectorButton { .mfaWarning {
margin-top: _.unit(3); margin-top: _.unit(3);
} }

View file

@ -126,7 +126,7 @@ function Settings() {
{...register('isMfaRequired')} {...register('isMfaRequired')}
/> />
{isMfaRequired && signInExperience?.mfa.factors.length === 0 && ( {isMfaRequired && signInExperience?.mfa.factors.length === 0 && (
<InlineNotification severity="alert" className={styles.warning}> <InlineNotification severity="alert" className={styles.mfaWarning}>
<Trans <Trans
i18nKey="admin_console.organization_details.mfa.no_mfa_warning" i18nKey="admin_console.organization_details.mfa.no_mfa_warning"
components={{ components={{