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

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

106
packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx
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,65 +94,66 @@ 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 } }) => ( <>
<div className={styles.ssoConnectorList}> {value.length > 0 && (
{value.map((id) => { <div className={styles.ssoConnectorList}>
const connector = allSsoConnectors?.find( {value.map((id) => {
({ id: connectorId }) => id === connectorId const connector = allSsoConnectors?.find(
); ({ id: connectorId }) => id === connectorId
return ( );
connector && ( return (
<div key={connector.id} className={styles.ssoConnector}> connector && (
<div className={styles.info}> <div key={connector.id} className={styles.ssoConnector}>
<SsoConnectorLogo className={styles.icon} data={connector} /> <div className={styles.info}>
<span> <SsoConnectorLogo className={styles.icon} data={connector} />
{connector.connectorName} - {connector.providerName} <span>
</span> {connector.connectorName} - {connector.providerName}
</span>
</div>
<IconButton
onClick={() => {
onChange(value.filter((value) => value !== id));
}}
>
<Minus />
</IconButton>
</div> </div>
<IconButton )
onClick={() => { );
onChange(value.filter((value) => value !== id)); })}
}} </div>
> )}
<Minus /> {Boolean(filteredSsoConnectors?.length) && (
</IconButton>
</div>
)
);
})}
<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)) <DropdownItem
.map((connector) => ( key={connector.id}
<DropdownItem className={styles.dropdownItem}
key={connector.id} onClick={() => {
className={styles.dropdownItem} onChange([...value, connector.id]);
onClick={() => { }}
onChange([...value, connector.id]); >
}} <SsoConnectorLogo className={styles.icon} data={connector} />
> <span>{connector.connectorName}</span>
<SsoConnectorLogo className={styles.icon} data={connector} /> </DropdownItem>
<span>{connector.connectorName}</span> ))}
</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>
)} )}

9
packages/console/src/pages/OrganizationDetails/Settings/index.module.scss
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);
} }

2
packages/console/src/pages/OrganizationDetails/Settings/index.tsx
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={{