From 3d944a518b1f96753ed5312bfda486a5da814dd2 Mon Sep 17 00:00:00 2001
From: wangsijie <wangsijie@silverhand.io>
Date: Fri, 8 Jul 2022 11:13:23 +0800
Subject: [PATCH] fix(console): hide single platform universal connector tab

---
 .../components/ConnectorTabs/index.tsx        | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
index 8443d19b4..9e1ee3ae1 100644
--- a/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
@@ -1,6 +1,6 @@
-import { ConnectorDTO } from '@logto/schemas';
+import { ConnectorDTO, ConnectorPlatform } from '@logto/schemas';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import useSWR from 'swr';
@@ -19,28 +19,38 @@ const ConnectorTabs = ({ target, connectorId }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data } = useSWR<ConnectorDTO[]>(`/api/connectors?target=${target}`);
 
-  if (!data) {
+  const connectors = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    return data.filter(({ enabled }) => enabled);
+  }, [data]);
+
+  if (connectors.length === 0) {
+    return null;
+  }
+
+  if (connectors.length === 1 && connectors[0]?.platform === ConnectorPlatform.Universal) {
     return null;
   }
 
   return (
     <div className={styles.tabs}>
-      {data
-        .filter(({ enabled }) => enabled)
-        .map((connector) => (
-          <Link
-            key={connector.id}
-            to={`/connectors/${connector.id}`}
-            className={classNames(styles.tab, connector.id === connectorId && styles.active)}
-          >
-            {connector.platform && (
-              <div className={styles.icon}>
-                <ConnectorPlatformIcon platform={connector.platform} />
-              </div>
-            )}
-            {connector.platform && t(connectorPlatformLabel[connector.platform])}
-          </Link>
-        ))}
+      {connectors.map((connector) => (
+        <Link
+          key={connector.id}
+          to={`/connectors/${connector.id}`}
+          className={classNames(styles.tab, connector.id === connectorId && styles.active)}
+        >
+          {connector.platform && (
+            <div className={styles.icon}>
+              <ConnectorPlatformIcon platform={connector.platform} />
+            </div>
+          )}
+          {connector.platform && t(connectorPlatformLabel[connector.platform])}
+        </Link>
+      ))}
     </div>
   );
 };