feat(console): init connector page (#331)

packages/console/src/App.tsx

@@ -11,6 +11,7 @@ import Topbar from './components/Topbar';
 import initI18n from './i18n/init';
 import ApiResources from './pages/ApiResources';
 import Applications from './pages/Applications';
+import Connector from './pages/Connectors/Connector';
 import { fetcher } from './swr';
 
 const isBasenameNeeded = process.env.NODE_ENV !== 'development' || process.env.PORT === '5002';
@@ -37,6 +38,7 @@ const Main = () => {
             <Routes>
               <Route path="api-resources" element={<ApiResources />} />
               <Route path="applications" element={<Applications />} />
+              <Route path="connectors/:connectorId" element={<Connector />} />
             </Routes>
           </Content>
         </div>

packages/console/src/pages/Connectors/Connector.tsx

@@ -0,0 +1,24 @@
+import { ConnectorDTO } from '@logto/schemas';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import useSWR from 'swr';
+
+import Card from '@/components/Card';
+import { RequestError } from '@/swr';
+
+const Connector = () => {
+  const { connectorId } = useParams();
+  const { data, error } = useSWR<ConnectorDTO, RequestError>(
+    connectorId && `/api/connectors/${connectorId}`
+  );
+  const isLoading = !data && !error;
+
+  return (
+    <Card>
+      {isLoading && 'loading'}
+      {error && error}
+    </Card>
+  );
+};
+
+export default Connector;

packages/core/src/connectors/types.ts

@@ -1,19 +1,8 @@
-import { Languages } from '@logto/phrases';
-import { ArbitraryObject, Connector, PasscodeType } from '@logto/schemas';
+import { ArbitraryObject, Connector, PasscodeType, ConnectorMetadata } from '@logto/schemas';
 import { z } from 'zod';
 
-export enum ConnectorType {
-  SMS = 'SMS',
-  Email = 'Email',
-  Social = 'Social',
-}
-export interface ConnectorMetadata {
-  id: string;
-  type: ConnectorType;
-  name: Record<Languages, string>;
-  logo: string;
-  description: Record<Languages, string>;
-}
+export { ConnectorType } from '@logto/schemas';
+export type { ConnectorMetadata } from '@logto/schemas';
 
 // The name `Connector` is used for database, use `ConnectorInstance` to avoid confusing.
 export type IConnector = SmsConnector | EmailConnector | SocialConnector;

packages/core/src/routes/connector.ts

@@ -1,4 +1,4 @@
-import { Connectors } from '@logto/schemas';
+import { ConnectorDTO, Connectors } from '@logto/schemas';
 import { object, string } from 'zod';
 
 import { getConnectorInstances, getConnectorInstanceById } from '@/connectors';
@@ -8,7 +8,7 @@ import { updateConnector } from '@/queries/connector';
 
 import { AuthedRouter } from './types';
 
-const transpileConnectorInstance = ({ connector, metadata }: ConnectorInstance) => ({
+const transpileConnectorInstance = ({ connector, metadata }: ConnectorInstance): ConnectorDTO => ({
   ...connector,
   metadata,
 });

packages/schemas/src/types/connector.ts

@@ -0,0 +1,19 @@
+import { Languages } from '@logto/phrases';
+
+import { Connector } from '../db-entries';
+
+export enum ConnectorType {
+  SMS = 'SMS',
+  Email = 'Email',
+  Social = 'Social',
+}
+export interface ConnectorMetadata {
+  id: string;
+  type: ConnectorType;
+  name: Record<Languages, string>;
+  logo: string;
+  description: Record<Languages, string>;
+}
+export interface ConnectorDTO extends Connector {
+  metadata: ConnectorMetadata;
+}

packages/schemas/src/types/index.ts

@@ -1 +1,2 @@
 export * from './user';
+export * from './connector';