feat(console): disable existing connectors when adding (#1018)

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<HTMLDivElement> = useCallback(
     (event) => {
+      if (isDisabled) {
+        return;
+      }
+
       if ([' ', 'Enter'].includes(event.key)) {
         onClick?.();
         event.preventDefault();
       }
     },
-    [onClick]
+    [isDisabled, onClick]
   );
 
   return (
     <div
-      className={classNames(styles.radio, className, isChecked && styles.checked)}
+      className={classNames(
+        styles.radio,
+        className,
+        isChecked && styles.checked,
+        isDisabled && styles.disabled
+      )}
       tabIndex={tabIndex}
-      onClick={onClick}
+      onClick={isDisabled ? undefined : onClick}
       onKeyPress={handleKeyPress}
     >
       <input readOnly disabled type="radio" name={name} value={value} checked={isChecked} />
@@ -64,6 +77,9 @@ const Radio = ({
       {children}
       {type === 'plain' && <div className={styles.indicator} />}
       {title && t(title)}
+      {isDisabled && disabledLabel && (
+        <div className={styles.disabledLabel}>{t(disabledLabel)}</div>
+      )}
     </div>
   );
 };

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);
     }

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 }) => (
-              <Radio key={id} value={id} className={styles.connector}>
+            {connectors.map(({ id, name, logo, description, enabled }) => (
+              <Radio
+                key={id}
+                value={id}
+                isDisabled={enabled}
+                className={styles.connector}
+                disabledLabel="connectors.added"
+              >
                 <div className={styles.logo}>
                   <img src={logo} />
                 </div>

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',

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: '社会化登录',