From 18fbdb79c91cd08519e6d17e27886a64497cf3a7 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Fri, 28 Jun 2024 17:03:15 +0800
Subject: [PATCH] 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
---
 .../Settings/JitSettings.tsx                  | 106 +++++++++---------
 .../Settings/index.module.scss                |   9 +-
 .../OrganizationDetails/Settings/index.tsx    |   2 +-
 3 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx b/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx
index c7c4f8899..d27f87d79 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"
     >
       <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>
         )}
diff --git a/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss b/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss
index 4b4df34bb..e3064f255 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 55e2d1648..408575cad 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 && (
-            <InlineNotification severity="alert" className={styles.warning}>
+            <InlineNotification severity="alert" className={styles.mfaWarning}>
               <Trans
                 i18nKey="admin_console.organization_details.mfa.no_mfa_warning"
                 components={{