diff --git a/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx b/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx index c7c4f889903..d27f87d79ce 100644 --- a/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx +++ b/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx @@ -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" > - {ssoConnectorIds.length === 0 && ( + {!allSsoConnectors?.length && ( )} - {ssoConnectorIds.length > 0 && ( - ( -
- {value.map((id) => { - const connector = allSsoConnectors?.find( - ({ id: connectorId }) => id === connectorId - ); - return ( - connector && ( -
-
- - - {connector.connectorName} - {connector.providerName} - + ( + <> + {value.length > 0 && ( +
+ {value.map((id) => { + const connector = allSsoConnectors?.find( + ({ id: connectorId }) => id === connectorId + ); + return ( + connector && ( +
+
+ + + {connector.connectorName} - {connector.providerName} + +
+ { + onChange(value.filter((value) => value !== id)); + }} + > + +
- { - onChange(value.filter((value) => value !== id)); - }} - > - - -
- ) - ); - })} + ) + ); + })} +
+ )} + {Boolean(filteredSsoConnectors?.length) && ( , - className: styles.addSsoConnectorButton, }} dropdownHorizontalAlign="start" > - {allSsoConnectors - ?.filter(({ id }) => !value.includes(id)) - .map((connector) => ( - { - onChange([...value, connector.id]); - }} - > - - {connector.connectorName} - - ))} + {filteredSsoConnectors?.map((connector) => ( + { + onChange([...value, connector.id]); + }} + > + + {connector.connectorName} + + ))} -
- )} - /> - )} + )} + + )} + /> {hasSsoEnabledEmailDomain && ( - + {t('organization_details.jit.sso_enabled_domain_warning')} )} diff --git a/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss b/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss index 4b4df34bb5f..e3064f255ee 100644 --- a/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss +++ b/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss @@ -16,12 +16,13 @@ } } - -.warning { - margin-top: _.unit(3); +.jitFormField { + display: flex; + flex-direction: column; + gap: _.unit(3); } -.addSsoConnectorButton { +.mfaWarning { margin-top: _.unit(3); } diff --git a/packages/console/src/pages/OrganizationDetails/Settings/index.tsx b/packages/console/src/pages/OrganizationDetails/Settings/index.tsx index 55e2d164829..408575cad07 100644 --- a/packages/console/src/pages/OrganizationDetails/Settings/index.tsx +++ b/packages/console/src/pages/OrganizationDetails/Settings/index.tsx @@ -126,7 +126,7 @@ function Settings() { {...register('isMfaRequired')} /> {isMfaRequired && signInExperience?.mfa.factors.length === 0 && ( - +