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

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"
     >
       <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,11 +94,12 @@ function JitSettings({ form }: Props) {
             />
           </InlineNotification>
         )}
-        {ssoConnectorIds.length > 0 && (
         <Controller
           name="jitSsoConnectorIds"
           control={control}
           render={({ field: { onChange, value } }) => (
+            <>
+              {value.length > 0 && (
                 <div className={styles.ssoConnectorList}>
                   {value.map((id) => {
                     const connector = allSsoConnectors?.find(
@@ -119,19 +125,19 @@ function JitSettings({ form }: Props) {
                       )
                     );
                   })}
+                </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) => (
+                  {filteredSsoConnectors?.map((connector) => (
                     <DropdownItem
                       key={connector.id}
                       className={styles.dropdownItem}
@@ -144,10 +150,10 @@ function JitSettings({ form }: Props) {
                     </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>
         )}

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);
 }
 

packages/console/src/pages/OrganizationDetails/Settings/index.tsx

@@ -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={{