diff --git a/packages/console/src/components/RadioGroup/Radio.tsx b/packages/console/src/components/RadioGroup/Radio.tsx index d50601989..ec75db215 100644 --- a/packages/console/src/components/RadioGroup/Radio.tsx +++ b/packages/console/src/components/RadioGroup/Radio.tsx @@ -27,6 +27,8 @@ export type Props = { onClick?: () => void; tabIndex?: number; type?: 'card' | 'plain'; + isDisabled?: boolean; + disabledLabel?: AdminConsoleKey; }; const Radio = ({ @@ -39,24 +41,35 @@ const Radio = ({ onClick, tabIndex, type, + isDisabled, + disabledLabel, }: Props) => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const handleKeyPress: KeyboardEventHandler = useCallback( (event) => { + if (isDisabled) { + return; + } + if ([' ', 'Enter'].includes(event.key)) { onClick?.(); event.preventDefault(); } }, - [onClick] + [isDisabled, onClick] ); return (
@@ -64,6 +77,9 @@ const Radio = ({ {children} {type === 'plain' &&
} {title && t(title)} + {isDisabled && disabledLabel && ( +
{t(disabledLabel)}
+ )}
); }; diff --git a/packages/console/src/components/RadioGroup/index.module.scss b/packages/console/src/components/RadioGroup/index.module.scss index c29d13eab..57c7ee494 100644 --- a/packages/console/src/components/RadioGroup/index.module.scss +++ b/packages/console/src/components/RadioGroup/index.module.scss @@ -30,12 +30,17 @@ cursor: pointer; margin: 0 _.unit(8) _.unit(8) 0; - &:focus { + &.disabled { + cursor: not-allowed; + background-color: var(--color-layer-2); + } + + &:not(.disabled):focus { outline: 1px solid var(--color-primary); box-shadow: var(--shadow-2); } - &:hover { + &:not(.disabled):hover { background-color: var(--color-layer-2); } @@ -46,6 +51,17 @@ top: _.unit(5); } + .disabledLabel { + position: absolute; + right: _.unit(5); + top: _.unit(5); + background: var(--color-neutral-90); + padding: _.unit(0.5) _.unit(2); + border-radius: 10px; + font: var(--font-label-medium); + color: var(--color-text); + } + &.checked { border-color: var(--color-primary); outline: 1px solid var(--color-primary); @@ -66,6 +82,7 @@ align-items: center; cursor: pointer; + /* stylelint-disable-next-line no-descending-specificity */ &:not(:last-child) { margin-bottom: _.unit(2); } diff --git a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx index bb55b5776..176c38d45 100644 --- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx +++ b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx @@ -83,8 +83,14 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => { type="card" onChange={setActiveConnectorId} > - {connectors.map(({ id, name, logo, description }) => ( - + {connectors.map(({ id, name, logo, description, enabled }) => ( +
diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 2b8f2b1c4..961dbf7ff 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -238,6 +238,7 @@ const translation = { title: 'Connectors', subtitle: 'Setup connectors to enable passwordless and social sign in experience.', create: 'Add Social Connector', + added: 'Added', set_up: 'Set Up', tab_email_sms: 'Email and SMS connectors', tab_social: 'Social connectors', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index d303e054e..c955d02a6 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -237,6 +237,7 @@ const translation = { title: '连接器', subtitle: 'Setup connectors to enable passwordless and social sign in experience.', create: '添加社会化登录', + added: '已添加', set_up: '设置', tab_email_sms: '邮件/短信服务商', tab_social: '社会化登录',