feat(console): platform label in connectors table (#1034)

packages/console/src/components/ItemPreview/index.module.scss

@@ -17,6 +17,7 @@
     font: var(--font-body-medium);
     color: var(--color-text-link);
     text-decoration: none;
+    margin-bottom: _.unit(1);
   }
 
   .subtitle {

packages/console/src/components/ItemPreview/index.tsx

@@ -6,7 +6,7 @@ import * as styles from './index.module.scss';
 
 type Props = {
   title: ReactNode;
-  subtitle?: string;
+  subtitle?: ReactNode;
   icon?: ReactNode;
   to?: To;
   size?: 'default' | 'compact';
@@ -29,7 +29,7 @@ const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) =>
           </Link>
         )}
         {!to && <div className={styles.title}>{title}</div>}
-        {subtitle && <div className={styles.subtitle}>{String(subtitle)}</div>}
+        {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
       </div>
     </div>
   );

packages/console/src/pages/Connectors/components/ConnectorName/index.module.scss

@@ -19,3 +19,19 @@ a.link {
     margin-right: _.unit(2);
   }
 }
+
+.platforms {
+  display: flex;
+  align-items: center;
+
+  .platform {
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) {
+      padding-right: _.unit(1);
+      margin-right: _.unit(1);
+      border-right: 1px solid var(--color-border);
+    }
+  }
+}

packages/console/src/pages/Connectors/components/ConnectorName/index.tsx

@@ -1,5 +1,4 @@
 import { ConnectorDTO, ConnectorType } from '@logto/schemas';
-import { conditional } from '@silverhand/essentials';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -7,19 +6,24 @@ import { Link } from 'react-router-dom';
 import Button from '@/components/Button';
 import ItemPreview from '@/components/ItemPreview';
 import UnnamedTrans from '@/components/UnnamedTrans';
-import { connectorIconPlaceHolder, connectorTitlePlaceHolder } from '@/consts/connectors';
+import {
+  connectorIconPlaceHolder,
+  connectorPlatformLabel,
+  connectorTitlePlaceHolder,
+} from '@/consts/connectors';
+import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
 
 import * as styles from './index.module.scss';
 
 type Props = {
   type: ConnectorType;
-  connector?: ConnectorDTO;
-  isShowId?: boolean;
+  connectors: ConnectorDTO[];
   onClickSetup?: () => void;
 };
 
-const ConnectorName = ({ type, connector, onClickSetup, isShowId = false }: Props) => {
+const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
   const { t } = useTranslation(undefined);
+  const connector = connectors[0];
 
   if (!connector) {
     return (
@@ -41,7 +45,24 @@ const ConnectorName = ({ type, connector, onClickSetup, isShowId = false }: Prop
     <Link to={`/connectors/${connector.id}`} className={styles.link}>
       <ItemPreview
         title={<UnnamedTrans resource={connector.name} />}
-        subtitle={conditional(isShowId && connector.id)}
+        subtitle={
+          <>
+            {type !== ConnectorType.Social && connector.id}
+            {type === ConnectorType.Social && connectors.length > 1 && (
+              <div className={styles.platforms}>
+                {connectors.map(
+                  ({ id, platform }) =>
+                    platform && (
+                      <div key={id} className={styles.platform}>
+                        <ConnectorPlatformIcon platform={platform} />
+                        {t(connectorPlatformLabel[platform])}
+                      </div>
+                    )
+                )}
+              </div>
+            )}
+          </>
+        }
         icon={<img className={styles.logo} src={connector.logo} />}
       />
     </Link>

packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx

@@ -24,12 +24,7 @@ const ConnectorRow = ({ type, connectors, onClickSetup }: Props) => {
   return (
     <tr>
       <td>
-        <ConnectorName
-          type={type}
-          connector={connectors[0]}
-          isShowId={type !== ConnectorType.Social}
-          onClickSetup={onClickSetup}
-        />
+        <ConnectorName type={type} connectors={connectors} onClickSetup={onClickSetup} />
       </td>
       <td>{t(connectorTitlePlaceHolder[type])}</td>
       <td>