From 65fb36ce3fd021cd44aeff95c4a01e75fe1352e7 Mon Sep 17 00:00:00 2001 From: Wang Sijie Date: Thu, 19 May 2022 14:05:31 +0800 Subject: [PATCH] feat(core,console): connector platform tabs (#887) * feat(core,console): connector platform tabs * fix: cr --- packages/console/src/icons/Native.tsx | 12 +++++ packages/console/src/icons/Universal.tsx | 12 +++++ packages/console/src/icons/Web.tsx | 12 +++++ .../ConnectorTabs/index.module.scss | 41 ++++++++++++++ .../components/ConnectorTabs/index.tsx | 50 +++++++++++++++++ .../src/pages/ConnectorDetails/index.tsx | 4 ++ packages/core/src/routes/connector.ts | 54 ++++++++++++------- packages/phrases/src/locales/en.ts | 1 + packages/phrases/src/locales/zh-cn.ts | 1 + 9 files changed, 167 insertions(+), 20 deletions(-) create mode 100644 packages/console/src/icons/Native.tsx create mode 100644 packages/console/src/icons/Universal.tsx create mode 100644 packages/console/src/icons/Web.tsx create mode 100644 packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.module.scss create mode 100644 packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx diff --git a/packages/console/src/icons/Native.tsx b/packages/console/src/icons/Native.tsx new file mode 100644 index 000000000..248fd5670 --- /dev/null +++ b/packages/console/src/icons/Native.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const Native = () => ( + + + +); + +export default Native; diff --git a/packages/console/src/icons/Universal.tsx b/packages/console/src/icons/Universal.tsx new file mode 100644 index 000000000..b947970c7 --- /dev/null +++ b/packages/console/src/icons/Universal.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const Universal = () => ( + + + +); + +export default Universal; diff --git a/packages/console/src/icons/Web.tsx b/packages/console/src/icons/Web.tsx new file mode 100644 index 000000000..4771e7671 --- /dev/null +++ b/packages/console/src/icons/Web.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const Web = () => ( + + + +); + +export default Web; diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.module.scss b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.module.scss new file mode 100644 index 000000000..72808b64f --- /dev/null +++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.module.scss @@ -0,0 +1,41 @@ +@use '@/scss/underscore' as _; + +.tabs { + display: flex; + align-items: center; + + .tab { + display: flex; + align-items: center; + font: var(--font-subhead-2); + color: var(--color-text); + text-decoration: none; + padding: 6px 12px; + border-radius: 100px; + background: var(--color-on-primary); + border: 1px solid var(--color-text-link); + + &:not(:last-child) { + margin-right: _.unit(4); + } + + &.active { + background: var(--color-surface-5); + border-color: var(--color-surface-5); + } + + .icon { + width: 16px; + height: 16px; + object-fit: cover; + margin-right: _.unit(1); + color: var(--color-text-link); + } + + .notSet { + color: var(--color-caption); + font: var(--font-body-medium); + margin-left: _.unit(2); + } + } +} diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx new file mode 100644 index 000000000..0be3f7d4f --- /dev/null +++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx @@ -0,0 +1,50 @@ +import { ConnectorDTO, ConnectorPlatform } from '@logto/schemas'; +import classNames from 'classnames'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; +import useSWR from 'swr'; + +import Native from '@/icons/Native'; +import Universal from '@/icons/Universal'; +import Web from '@/icons/Web'; + +import * as styles from './index.module.scss'; + +type Props = { + target: string; + connectorId: string; +}; + +const ConnectorTabs = ({ target, connectorId }: Props) => { + const { data } = useSWR(`/api/connectors?target=${target}`); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + if (!data) { + return null; + } + + return ( +
+ {data.map((connector) => ( + +
+ {connector.platform === ConnectorPlatform.Native && } + {connector.platform === ConnectorPlatform.Web && } + {connector.platform === ConnectorPlatform.Universal && } +
+ {connector.metadata.platform} + {!connector.enabled && ( +
{t('connector_details.not_set')}
+ )} + + ))} +
+ ); +}; + +export default ConnectorTabs; diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx index 42f2ace97..7aeca21b9 100644 --- a/packages/console/src/pages/ConnectorDetails/index.tsx +++ b/packages/console/src/pages/ConnectorDetails/index.tsx @@ -26,6 +26,7 @@ import Reset from '@/icons/Reset'; import * as detailsStyles from '@/scss/details.module.scss'; import CreateForm from '../Connectors/components/CreateForm'; +import ConnectorTabs from './components/ConnectorTabs'; import SenderTester from './components/SenderTester'; import * as styles from './index.module.scss'; @@ -108,6 +109,9 @@ const ConnectorDetails = () => { /> {isLoading && } {!data && error &&
{`error occurred: ${error.body?.message ?? error.message}`}
} + {data?.metadata.type === ConnectorType.Social && ( + + )} {data && (
diff --git a/packages/core/src/routes/connector.ts b/packages/core/src/routes/connector.ts index 8630377a3..9e12c7729 100644 --- a/packages/core/src/routes/connector.ts +++ b/packages/core/src/routes/connector.ts @@ -24,29 +24,43 @@ const transpileConnectorInstance = ({ connector, metadata }: ConnectorInstance): }); export default function connectorRoutes(router: T) { - router.get('/connectors', async (ctx, next) => { - const connectorInstances = await getConnectorInstances(); + router.get( + '/connectors', + koaGuard({ + query: object({ + target: string().optional(), + }), + }), + async (ctx, next) => { + const { target: filterTarget } = ctx.query; + const connectorInstances = await getConnectorInstances(); - assertThat( - connectorInstances.filter( - (connector) => - connector.connector.enabled && connector.metadata.type === ConnectorType.Email - ).length <= 1, - 'connector.more_than_one_email' - ); - assertThat( - connectorInstances.filter( - (connector) => connector.connector.enabled && connector.metadata.type === ConnectorType.SMS - ).length <= 1, - 'connector.more_than_one_sms' - ); + assertThat( + connectorInstances.filter( + (connector) => + connector.connector.enabled && connector.metadata.type === ConnectorType.Email + ).length <= 1, + 'connector.more_than_one_email' + ); + assertThat( + connectorInstances.filter( + (connector) => + connector.connector.enabled && connector.metadata.type === ConnectorType.SMS + ).length <= 1, + 'connector.more_than_one_sms' + ); - ctx.body = connectorInstances.map((connectorInstance) => { - return transpileConnectorInstance(connectorInstance); - }); + const filteredInstances = filterTarget + ? connectorInstances.filter(({ metadata: { target } }) => target === filterTarget) + : connectorInstances; - return next(); - }); + ctx.body = filteredInstances.map((connectorInstance) => + transpileConnectorInstance(connectorInstance) + ); + + return next(); + } + ); router.get( '/connectors/:id', diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index f404d9415..8fc06a1da 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -277,6 +277,7 @@ const translation = { options_change_sms: 'Change SMS connector', more_options: 'MORE OPTIONS', connector_deleted: 'The connector has been deleted.', + not_set: '(Not set)', }, get_started: { progress: 'Get started guide: {{completed}}/{{total}}', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 1ec5354ba..bb88723bc 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -274,6 +274,7 @@ const translation = { options_change_sms: '更换短信服务商', more_options: '更多选项', connector_deleted: '成功删除连接器。', + not_set: '（未设置）', }, get_started: { progress: '开始使用: {{completed}}/{{total}}',