Merge pull request #959 from logto-io/sijie-log-1995-connector-toop

feat(console): connector detail top card

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

@@ -3,16 +3,29 @@
 .status {
   display: flex;
   align-items: center;
-}
+  font: var(--font-label-medium);
 
-.icon {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-right: _.unit(2);
-  background: var(--color-success-70);
-}
+  .icon {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: _.unit(2);
+    background: var(--color-success-70);
+  }
 
-.status.offline .icon {
-  background: var(--color-neutral-70);
+  &.disabled {
+    .icon {
+      background: var(--color-neutral-70);
+    }
+  }
+
+  &.outlined {
+    padding: _.unit(0.5) _.unit(2);
+    border-radius: 10px;
+    background: var(--color-success-99);
+
+    &.disabled {
+      background: var(--color-neutral-variant-95);
+    }
+  }
 }

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

@@ -6,10 +6,11 @@ import * as styles from './index.module.scss';
 type Props = {
   status: 'enabled' | 'disabled';
   children: ReactNode;
+  varient?: 'plain' | 'outlined';
 };
 
-const Status = ({ status, children }: Props) => (
-  <div className={classNames(styles.status, styles[status])}>
+const Status = ({ status, children, varient = 'plain' }: Props) => (
+  <div className={classNames(styles.status, styles[status], styles[varient])}>
     <div className={styles.icon} />
     <div>{children}</div>
   </div>

packages/console/src/pages/ConnectorDetails/components/ConnectorTypeName/index.module.scss

@@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.connectorType {
+  background: var(--color-surface-variant);
+  border-radius: 10px;
+  padding: _.unit(0.5) _.unit(2);
+  color: var(--color-text);
+  font: var(--font-label-medium);
+}

packages/console/src/pages/ConnectorDetails/components/ConnectorTypeName/index.tsx

@@ -0,0 +1,23 @@
+import { ConnectorType } from '@logto/schemas';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  type: ConnectorType;
+};
+
+const ConnectorTypeName = ({ type }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <div className={styles.connectorType}>
+      {type === ConnectorType.Email && t('connector_details.type_email')}
+      {type === ConnectorType.SMS && t('connector_details.type_sms')}
+      {type === ConnectorType.Social && t('connector_details.type_social')}
+    </div>
+  );
+};
+
+export default ConnectorTypeName;

packages/console/src/pages/ConnectorDetails/index.module.scss

@@ -59,6 +59,11 @@
       font: var(--font-subhead-2);
       color: var(--color-caption);
     }
+
+    .verticalBar {
+      @include _.vertical-bar;
+      height: 12px;
+    }
   }
 }
 

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -26,6 +26,7 @@ import * as detailsStyles from '@/scss/details.module.scss';
 
 import CreateForm from '../Connectors/components/CreateForm';
 import ConnectorTabs from './components/ConnectorTabs';
+import ConnectorTypeName from './components/ConnectorTypeName';
 import SenderTester from './components/SenderTester';
 import * as styles from './index.module.scss';
 
@@ -121,14 +122,17 @@ const ConnectorDetails = () => {
               <div className={styles.name}>
                 <UnnamedTrans resource={data.name} />
               </div>
-              <div className={styles.id}>{data.id}</div>
             </div>
             <div>
-              <Status status={data.enabled ? 'enabled' : 'disabled'}>
+              <ConnectorTypeName type={data.type} />
+              <div className={styles.verticalBar} />
+              <Status status={data.enabled ? 'enabled' : 'disabled'} varient="outlined">
                 {t('connectors.connector_status', {
                   context: data.enabled ? 'enabled' : 'disabled',
                 })}
               </Status>
+              <div className={styles.verticalBar} />
+              <div className={styles.id}>{data.id}</div>
             </div>
           </div>
           <div className={styles.operations}>

packages/phrases/src/locales/en.ts

@@ -278,6 +278,9 @@ const translation = {
       more_options: 'MORE OPTIONS',
       connector_deleted: 'The connector has been deleted.',
       not_set: '(Not set)',
+      type_email: 'Email connector',
+      type_sms: 'SMS connector',
+      type_social: 'Social connector',
     },
     get_started: {
       progress: 'Get started guide: {{completed}}/{{total}}',

packages/phrases/src/locales/zh-cn.ts

@@ -276,6 +276,9 @@ const translation = {
       more_options: '更多选项',
       connector_deleted: '成功删除连接器。',
       not_set: '（未设置）',
+      type_email: '邮件连接器',
+      type_sms: '短信连接器',
+      type_social: '社交连接器',
     },
     get_started: {
       progress: '开始使用: {{completed}}/{{total}}',