feat(console): add toggle tip for the sie not-in-use status (#2323)

packages/console/src/pages/Connectors/components/ConnectorStatusField/index.module.scss

@@ -0,0 +1,28 @@
+@use '@/scss/underscore' as _;
+
+.field {
+  display: flex;
+  align-items: center;
+}
+
+.tipIcon {
+  margin-left: _.unit(1);
+
+  > svg {
+    display: block;
+    cursor: pointer;
+  }
+}
+
+.title {
+  font: var(--font-label-large);
+}
+
+.content {
+  font: var(--font-body-medium);
+
+  a {
+    color: #cabeff;
+    text-decoration: none;
+  }
+}

packages/console/src/pages/Connectors/components/ConnectorStatusField/index.tsx

@@ -0,0 +1,64 @@
+import { useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import Tip from '@/assets/images/tip.svg';
+import ToggleTip from '@/components/ToggleTip';
+import { onKeyDownHandler } from '@/utilities/a11y';
+
+import * as styles from './index.module.scss';
+
+const ConnectorStatusField = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const [isTipOpen, setIsTipOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={styles.field}>
+      {t('connectors.connector_status')}
+      <div ref={anchorRef} className={styles.tipIcon}>
+        <Tip
+          tabIndex={0}
+          onClick={() => {
+            setIsTipOpen(true);
+          }}
+          onKeyDown={onKeyDownHandler(() => {
+            setIsTipOpen(true);
+          })}
+        />
+      </div>
+      <ToggleTip
+        isOpen={isTipOpen}
+        anchorRef={anchorRef}
+        position="top"
+        horizontalAlign="center"
+        onClose={() => {
+          setIsTipOpen(false);
+        }}
+      >
+        <div className={styles.title}>{t('connectors.connector_status')}</div>
+        <div className={styles.content}>
+          <Trans
+            components={{
+              a: (
+                <Link
+                  to="/sign-in-experience/sign-up-and-sign-in"
+                  target="_blank"
+                  onClick={() => {
+                    setIsTipOpen(false);
+                  }}
+                />
+              ),
+            }}
+          >
+            {t('connectors.not_in_use_tip.content', {
+              link: t('connectors.not_in_use_tip.go_to_sie'),
+            })}
+          </Trans>
+        </div>
+      </ToggleTip>
+    </div>
+  );
+};
+
+export default ConnectorStatusField;

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

@@ -19,6 +19,7 @@ import { useTheme } from '@/hooks/use-theme';
 import * as tableStyles from '@/scss/table.module.scss';
 
 import ConnectorRow from './components/ConnectorRow';
+import ConnectorStatusField from './components/ConnectorStatusField';
 import CreateForm from './components/CreateForm';
 import SignInExperienceSetupNotice from './components/SignInExperienceSetupNotice';
 import * as styles from './index.module.scss';
@@ -90,7 +91,9 @@ const Connectors = () => {
               <tr>
                 <th>{t('connectors.connector_name')}</th>
                 <th>{t('connectors.connector_type')}</th>
-                <th>{t('connectors.connector_status')}</th>
+                <th>
+                  <ConnectorStatusField />
+                </th>
               </tr>
             </thead>
             <tbody>

packages/phrases/src/locales/de/translation/admin-console/connectors.ts

@@ -11,6 +11,11 @@ const connectors = {
   connector_status: 'Anmeldeoberfläche',
   connector_status_in_use: 'In Benutzung',
   connector_status_not_in_use: 'Nicht in Benutzung',
+  not_in_use_tip: {
+    content:
+      'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
+    go_to_sie: 'Go to sign in experience', // UNTRANSLATED
+  },
   social_connector_eg: 'z.B. Google, Facebook, Github',
   save_and_done: 'Speichern und fertigstellen',
   type: {

packages/phrases/src/locales/en/translation/admin-console/connectors.ts

@@ -11,6 +11,11 @@ const connectors = {
   connector_status: 'Sign in Experience',
   connector_status_in_use: 'In use',
   connector_status_not_in_use: 'Not in use',
+  not_in_use_tip: {
+    content:
+      'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ',
+    go_to_sie: 'Go to sign in experience',
+  },
   social_connector_eg: 'E.g., Google, Facebook, Github',
   save_and_done: 'Save and Done',
   type: {

packages/phrases/src/locales/fr/translation/admin-console/connectors.ts

@@ -12,6 +12,11 @@ const connectors = {
   connector_status: 'Experience de connexion',
   connector_status_in_use: "En cours d'utilisation",
   connector_status_not_in_use: 'Non utilisé',
+  not_in_use_tip: {
+    content:
+      'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
+    go_to_sie: 'Go to sign in experience', // UNTRANSLATED
+  },
   social_connector_eg: 'Exemple : Google, Facebook, Github',
   save_and_done: 'Sauvegarder et Finis',
   type: {

packages/phrases/src/locales/ko/translation/admin-console/connectors.ts

@@ -11,6 +11,11 @@ const connectors = {
   connector_status: '로그인 경험',
   connector_status_in_use: '사용 중',
   connector_status_not_in_use: '사용 중이 아님',
+  not_in_use_tip: {
+    content:
+      'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
+    go_to_sie: 'Go to sign in experience', // UNTRANSLATED
+  },
   social_connector_eg: '예) Google, Facebook, Github',
   save_and_done: '저장 및 완료',
   type: {

packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts

@@ -11,6 +11,11 @@ const connectors = {
   connector_status: 'Experiência de login',
   connector_status_in_use: 'Em uso',
   connector_status_not_in_use: 'Fora de uso',
+  not_in_use_tip: {
+    content:
+      'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
+    go_to_sie: 'Go to sign in experience', // UNTRANSLATED
+  },
   social_connector_eg: 'Ex., Google, Facebook, Github',
   save_and_done: 'Guardar',
   type: {

packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts

@@ -12,6 +12,11 @@ const connectors = {
   connector_status: 'Oturum açma deneyimi',
   connector_status_in_use: 'Kullanımda',
   connector_status_not_in_use: 'Kullanımda değil',
+  not_in_use_tip: {
+    content:
+      'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
+    go_to_sie: 'Go to sign in experience', // UNTRANSLATED
+  },
   social_connector_eg: 'Örneğin, Google, Facebook, Github',
   save_and_done: 'Kaydet ve bitir',
   type: {

packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts

@@ -11,6 +11,11 @@ const connectors = {
   connector_status: '登录体验',
   connector_status_in_use: '使用中',
   connector_status_not_in_use: '未使用',
+  not_in_use_tip: {
+    content:
+      'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
+    go_to_sie: 'Go to sign in experience', // UNTRANSLATED
+  },
   social_connector_eg: '如: 微信登录，支付宝登录',
   save_and_done: '保存并完成',
   type: {