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 }
);
const allSsoConnectors = useMemo(() => ssoConnectorMatrix?.flat(), [ssoConnectorMatrix]);
const filteredSsoConnectors = useMemo(
() => allSsoConnectors?.filter(({ id }) => !ssoConnectorIds.includes(id)),
[allSsoConnectors, ssoConnectorIds]
);
const hasSsoEnabled = useCallback(
(domain: string) => allSsoConnectors?.some(({ domains }) => domains.includes(domain)),
[allSsoConnectors]
@ -65,6 +69,7 @@ function JitSettings({ form }: Props) {
description="organization_details.jit.description"
>
<FormField
className={styles.jitFormField}
title="organization_details.jit.enterprise_sso"
description={
<Trans
@ -81,7 +86,7 @@ function JitSettings({ form }: Props) {
}
descriptionPosition="top"
>
{ssoConnectorIds.length === 0 && (
{!allSsoConnectors?.length && (
<InlineNotification>
<Trans
i18nKey="admin_console.organization_details.jit.no_enterprise_connector_set"
@ -89,65 +94,66 @@ function JitSettings({ form }: Props) {
/>
</InlineNotification>
)}
{ssoConnectorIds.length > 0 && (
<Controller
name="jitSsoConnectorIds"
control={control}
render={({ field: { onChange, value } }) => (
<div className={styles.ssoConnectorList}>
{value.map((id) => {
const connector = allSsoConnectors?.find(
({ id: connectorId }) => id === connectorId
);
return (
connector && (
<div key={connector.id} className={styles.ssoConnector}>
<div className={styles.info}>
<SsoConnectorLogo className={styles.icon} data={connector} />
<span>
{connector.connectorName} - {connector.providerName}
</span>
<Controller
name="jitSsoConnectorIds"
control={control}
render={({ field: { onChange, value } }) => (
<>
{value.length > 0 && (
<div className={styles.ssoConnectorList}>
{value.map((id) => {
const connector = allSsoConnectors?.find(
({ id: connectorId }) => id === connectorId
);
return (
connector && (
<div key={connector.id} className={styles.ssoConnector}>
<div className={styles.info}>
<SsoConnectorLogo className={styles.icon} data={connector} />
<span>
{connector.connectorName} - {connector.providerName}
</span>
</div>
<IconButton
onClick={() => {
onChange(value.filter((value) => value !== id));
}}
>
<Minus />
</IconButton>
</div>
<IconButton
onClick={() => {
onChange(value.filter((value) => value !== id));
}}
>
<Minus />
</IconButton>
</div>
)
);
})}
)
);
})}
</div>
)}
{Boolean(filteredSsoConnectors?.length) && (
<ActionMenu
buttonProps={{
type: 'default',
size: 'medium',
title: 'organization_details.jit.add_enterprise_connector',
icon: <Plus />,
className: styles.addSsoConnectorButton,
}}
dropdownHorizontalAlign="start"
>
{allSsoConnectors
?.filter(({ id }) => !value.includes(id))
.map((connector) => (
<DropdownItem
key={connector.id}
className={styles.dropdownItem}
onClick={() => {
onChange([...value, connector.id]);
}}
>
<SsoConnectorLogo className={styles.icon} data={connector} />
<span>{connector.connectorName}</span>
</DropdownItem>
))}
{filteredSsoConnectors?.map((connector) => (
<DropdownItem
key={connector.id}
className={styles.dropdownItem}
onClick={() => {
onChange([...value, connector.id]);
}}
>
<SsoConnectorLogo className={styles.icon} data={connector} />
<span>{connector.connectorName}</span>
</DropdownItem>
))}
</ActionMenu>
</div>
)}
/>
)}
)}
</>
)}
/>
</FormField>
<FormField
title="organization_details.jit.email_domain"
@ -208,7 +214,7 @@ function JitSettings({ form }: Props) {
)}
/>
{hasSsoEnabledEmailDomain && (
<InlineNotification severity="alert" className={styles.warning}>
<InlineNotification severity="alert">
{t('organization_details.jit.sso_enabled_domain_warning')}
</InlineNotification>
)}

9
packages/console/src/pages/OrganizationDetails/Settings/index.module.scss
View file

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

2
packages/console/src/pages/OrganizationDetails/Settings/index.tsx
View file

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