fix(console): display standard connector name

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

@@ -65,6 +65,14 @@
       color: var(--color-text);
     }
 
+    .factoryName {
+      background: var(--color-surface-variant);
+      border-radius: 10px;
+      padding: _.unit(0.5) _.unit(2);
+      color: var(--color-text);
+      font: var(--font-label-medium);
+    }
+
     .text {
       font: var(--font-subhead-2);
       color: var(--color-text-secondary);

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

@@ -1,5 +1,5 @@
-import type { ConnectorResponse } from '@logto/schemas';
 import { ConnectorType } from '@logto/schemas';
+import type { ConnectorFactoryResponse, ConnectorResponse } from '@logto/schemas';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { Trans, useTranslation } from 'react-i18next';
@@ -49,6 +49,9 @@ const ConnectorDetails = () => {
   const { data, error, mutate } = useSWR<ConnectorResponse, RequestError>(
     connectorId && `/api/connectors/${connectorId}`
   );
+  const { data: connectorFactory } = useSWR<ConnectorFactoryResponse>(
+    data?.isStandard && `/api/connector-factories/${data.connectorId}`
+  );
   const inUse = useConnectorInUse(data?.type, data?.target);
   const isLoading = !data && !error;
   const api = useApi();
@@ -113,6 +116,14 @@ const ConnectorDetails = () => {
             <div>
               <ConnectorTypeName type={data.type} />
               <div className={styles.verticalBar} />
+              {connectorFactory && (
+                <>
+                  <div className={styles.factoryName}>
+                    <UnnamedTrans resource={connectorFactory.name} />
+                  </div>
+                  <div className={styles.verticalBar} />
+                </>
+              )}
               {inUse !== undefined && (
                 <Status status={inUse ? 'enabled' : 'disabled'} variant="outlined">
                   {t('connectors.connector_status', {

packages/core/src/routes/connector.ts

@@ -1,6 +1,6 @@
 import { VerificationCodeType } from '@logto/connector-kit';
 import { emailRegEx, phoneRegEx, buildIdGenerator } from '@logto/core-kit';
-import type { ConnectorFactoryResponse, ConnectorResponse } from '@logto/schemas';
+import type { ConnectorResponse, ConnectorFactoryResponse } from '@logto/schemas';
 import { arbitraryObjectGuard, Connectors, ConnectorType } from '@logto/schemas';
 import cleanDeep from 'clean-deep';
 import { object, string } from 'zod';
@@ -85,6 +85,29 @@ export default function connectorRoutes<T extends AuthedRouter>(router: T) {
     return next();
   });
 
+  router.get(
+    '/connector-factories/:id',
+    koaGuard({ params: object({ id: string().min(1) }) }),
+    async (ctx, next) => {
+      const {
+        params: { id },
+      } = ctx.guard;
+      const connectorFactories = await loadConnectorFactories();
+      const connectorFactory = connectorFactories.find((factory) => factory.metadata.id === id);
+
+      assertThat(connectorFactory, 'entity.not_found');
+
+      const { metadata, type } = connectorFactory;
+      const response: ConnectorFactoryResponse = {
+        type,
+        ...metadata,
+      };
+      ctx.body = response;
+
+      return next();
+    }
+  );
+
   router.get(
     '/connectors/:id',
     koaGuard({ params: object({ id: string().min(1) }) }),