Group SSO - cleaning ternary operators in status files (#15365)

GitOrigin-RevId: 615f95aca66b0c80e54a057cabd61c74b8c3f12d

services/web/frontend/js/features/group-management/components/managed-users/managed-user-status.tsx

@@ -7,49 +7,40 @@ type ManagedUserStatusProps = {
 }
 export default function ManagedUserStatus({ user }: ManagedUserStatusProps) {
   const { t } = useTranslation()
-  return (
-    <span>
-      {user.isEntityAdmin ? (
-        <>
-          <span className="security-state-group-admin" />
-        </>
-      ) : (
-        <>
-          {user.invite ? (
-            <span className="security-state-invite-pending">
-              <MaterialIcon
-                type="schedule"
-                category="outlined"
-                accessibilityLabel={t('pending_invite')}
-              />
-              &nbsp;
-              {t('managed')}
-            </span>
-          ) : (
-            <>
-              {user.enrollment?.managedBy ? (
-                <span className="security-state-managed">
-                  <MaterialIcon
-                    type="check"
-                    accessibilityLabel={t('managed')}
-                  />
-                  &nbsp;
-                  {t('managed')}
-                </span>
-              ) : (
-                <span className="security-state-not-managed">
-                  <MaterialIcon
-                    type="close"
-                    accessibilityLabel={t('not_managed')}
-                  />
-                  &nbsp;
-                  {t('managed')}
-                </span>
-              )}
-            </>
-          )}
-        </>
-      )}
+  const managedUserInvite = (
+    <span className="security-state-invite-pending">
+      <MaterialIcon
+        type="schedule"
+        category="outlined"
+        accessibilityLabel={t('pending_invite')}
+      />
+      &nbsp;
+      {t('managed')}
     </span>
   )
+
+  const managedUserAccepted = (
+    <span className="security-state-managed">
+      <MaterialIcon type="check" accessibilityLabel={t('managed')} />
+      &nbsp;
+      {t('managed')}
+    </span>
+  )
+  const managedUserNotAccepted = (
+    <span className="security-state-not-managed">
+      <MaterialIcon type="close" accessibilityLabel={t('not_managed')} />
+      &nbsp;
+      {t('managed')}
+    </span>
+  )
+
+  if (user.isEntityAdmin) {
+    return <span className="security-state-group-admin" />
+  }
+  if (user.invite) {
+    return managedUserInvite
+  }
+  return user.enrollment?.managedBy
+    ? managedUserAccepted
+    : managedUserNotAccepted
 }

services/web/frontend/js/features/group-management/components/managed-users/sso-status.tsx

@@ -7,35 +7,32 @@ type SSOStatusProps = {
 }
 export default function SSOStatus({ user }: SSOStatusProps) {
   const { t } = useTranslation()
-  return (
-    <span>
-      {user.invite ? (
-        <span className="security-state-invite-pending">
-          <MaterialIcon
-            type="schedule"
-            category="outlined"
-            accessibilityLabel={t('pending_invite')}
-          />
-          &nbsp; {t('sso')}
-        </span>
-      ) : (
-        <>
-          {user.enrollment?.sso ? (
-            <span className="security-state-managed">
-              <MaterialIcon type="check" accessibilityLabel={t('sso_linked')} />
-              &nbsp; {t('sso')}
-            </span>
-          ) : (
-            <span className="security-state-not-managed">
-              <MaterialIcon
-                type="close"
-                accessibilityLabel={t('sso_unlinked')}
-              />
-              &nbsp; {t('sso')}
-            </span>
-          )}
-        </>
-      )}
+  const invitedSSO = (
+    <span className="security-state-invite-pending">
+      <MaterialIcon
+        type="schedule"
+        category="outlined"
+        accessibilityLabel={t('pending_invite')}
+      />
+      &nbsp; {t('sso')}
     </span>
   )
+  const acceptedSSO = (
+    <span className="security-state-managed">
+      <MaterialIcon type="check" accessibilityLabel={t('sso_linked')} />
+      &nbsp; {t('sso')}
+    </span>
+  )
+  const notAcceptedSSO = (
+    <span className="security-state-not-managed">
+      <MaterialIcon type="close" accessibilityLabel={t('sso_unlinked')} />
+      &nbsp; {t('sso')}
+    </span>
+  )
+
+  if (user.invite) {
+    return invitedSSO
+  }
+
+  return user.enrollment?.sso ? acceptedSSO : notAcceptedSSO
 }