refactor(console): align text link style (#2599)

2025-03-31 22:51:25 -05:00 · 2022-12-07 11:28:32 +08:00 · 2022-12-07 11:28:32 +08:00 · a00782de29
commit a00782de29
parent a64816422e
34 changed files with 160 additions and 163 deletions
--- a/packages/console/src/components/Alert/index.module.scss
+++ b/packages/console/src/components/Alert/index.module.scss
@ -24,13 +24,6 @@
    margin: 0 _.unit(3);
  }

-  .action {
-    a {
-      color: var(--color-text);
-      text-decoration: underline;
-    }
-  }
-
  &.info {
    background: var(--color-surface-variant);

--- a/packages/console/src/components/Alert/index.tsx
+++ b/packages/console/src/components/Alert/index.tsx
@ -1,11 +1,12 @@
 import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';

 import Info from '@/assets/images/info.svg';
-import LinkButton from '@/components/LinkButton';

 import Button from '../Button';
+import TextLink from '../TextLink';
 import * as styles from './index.module.scss';

 type Props = {
@ -27,17 +28,15 @@ const Alert = ({
  variant = 'plain',
  className,
 }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
  return (
    <div className={classNames(styles.alert, styles[severity], styles[variant], className)}>
      <div className={styles.icon}>
        <Info />
      </div>
      <div className={styles.content}>{children}</div>
-      {action && href && (
-        <div className={styles.action}>
-          <LinkButton title={action} to={href} />
-        </div>
-      )}
+      {action && href && <TextLink to={href}>{t(action)}</TextLink>}
      {action && onClick && (
        <div className={styles.action}>
          <Button title={action} type="text" size="small" onClick={onClick} />
--- a/packages/console/src/components/FormCard/index.module.scss
+++ b/packages/console/src/components/FormCard/index.module.scss
@ -24,9 +24,7 @@
    font: var(--font-body-medium);
    color: var(--color-text-secondary);

-    a {
-      color: var(--color-text-link);
-      text-decoration: none;
+    .link {
      margin-left: _.unit(1);
    }
  }
--- a/packages/console/src/components/FormCard/index.tsx
+++ b/packages/console/src/components/FormCard/index.tsx
@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';

 import Card from '../Card';
+import TextLink from '../TextLink';
 import * as styles from './index.module.scss';

 type Props = {
@ -23,9 +24,9 @@ const FormCard = ({ title, description, learnMoreLink, children }: Props) => {
          <div className={styles.description}>
            {t(description)}
            {learnMoreLink && (
-              <a href={learnMoreLink} target="_blank" rel="noopener">
+              <TextLink href={learnMoreLink} target="_blank" rel="noopener" className={styles.link}>
                {t('general.learn_more')}
-              </a>
+              </TextLink>
            )}
          </div>
        )}
--- a/packages/console/src/components/LinkButton/index.tsx
+++ b/packages/console/src/components/LinkButton/index.tsx
@ -1,28 +0,0 @@
-import type { AdminConsoleKey } from '@logto/phrases';
-import classNames from 'classnames';
-import type { ReactElement, ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-
-import type DangerousRaw from '../DangerousRaw';
-import * as styles from './index.module.scss';
-
-type Props = {
-  to: string;
-  title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
-  icon?: ReactNode;
-  className?: string;
-};
-
-const LinkButton = ({ to, title, icon, className }: Props) => {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-
-  return (
-    <Link to={to} className={classNames(styles.linkButton, className)}>
-      {icon}
-      {typeof title === 'string' ? <span>{t(title)}</span> : title}
-    </Link>
-  );
-};
-
-export default LinkButton;
--- a/packages/console/src/components/Markdown/index.module.scss
+++ b/packages/console/src/components/Markdown/index.module.scss
@ -30,16 +30,6 @@
    }
  }

-  a {
-    font: var(--font-body-medium);
-    color: var(--color-text-link);
-    text-decoration: none;
-
-    &:hover {
-      border-bottom: 1px solid var(--color-text-link);
-    }
-  }
-
  h1 {
    font: var(--font-title-large);
    margin: _.unit(6) 0;
--- a/packages/console/src/components/LinkButton/index.module.scss
+++ b/packages/console/src/components/LinkButton/index.module.scss
@ -1,21 +1,20 @@
@use '@/scss/underscore' as _;

-.linkButton {
-  background: none;
+.link {
+  display: inline-flex;
+  max-width: fit-content;
+  text-decoration: none;
  border-color: transparent;
  font: var(--font-body-medium);
  color: var(--color-text-link);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  user-select: none;
+  gap: _.unit(1);

-  > *:not(:first-child) {
-    margin-left: _.unit(1);
+  &.trailingIcon {
+    flex-direction: row-reverse;
  }

-  &:focus-visible {
-    outline: 2px solid var(--color-focused-variant);
+  &:active {
+    color: var(--color-primary-pressed);
  }

  &:disabled {
@ -25,9 +24,11 @@

  &:not(:disabled):hover {
    text-decoration: underline;
+    text-underline-offset: 2px;
  }

  > svg {
-    color: var(--color-text-link);
+    display: inline-block;
+    vertical-align: baseline;
  }
 }
--- a/packages/console/src/components/TextLink/index.tsx
+++ b/packages/console/src/components/TextLink/index.tsx
@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import type { LinkProps } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+import * as styles from './index.module.scss';
+
+type Props = AnchorHTMLAttributes<HTMLAnchorElement> &
+  Partial<LinkProps> & {
+    icon?: ReactNode;
+    isTrailingIcon?: boolean;
+  };
+
+const TextLink = ({ to, children, icon, isTrailingIcon = false, className, ...rest }: Props) => {
+  if (to) {
+    return (
+      <Link
+        to={to}
+        className={classNames(styles.link, isTrailingIcon && styles.trailingIcon, className)}
+        {...rest}
+      >
+        {icon}
+        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+        <>{children}</>
+      </Link>
+    );
+  }
+
+  return (
+    <a
+      className={classNames(styles.link, isTrailingIcon && styles.trailingIcon, className)}
+      {...rest}
+    >
+      {icon}
+      {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+      <>{children}</>
+    </a>
+  );
+};
+
+export default TextLink;
--- a/packages/console/src/mdx-components/Step/index.module.scss
+++ b/packages/console/src/mdx-components/Step/index.module.scss
@ -71,16 +71,6 @@
    }
  }

-  a {
-    font: var(--font-body-medium);
-    color: var(--color-text-link);
-    text-decoration: none;
-
-    &:hover {
-      border-bottom: 1px solid var(--color-text-link);
-    }
-  }
-
  h3 {
    font: var(--font-title-medium);
    color: var(--color-text-secondary);
--- a/packages/console/src/pages/ApiResourceDetails/index.module.scss
+++ b/packages/console/src/pages/ApiResourceDetails/index.module.scss
@ -2,6 +2,7 @@

 .backLink {
  margin: _.unit(1) 0 0 _.unit(1);
+  user-select: none;
 }

 .deleteConfirm {
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@ -21,9 +21,9 @@ import DetailsForm from '@/components/DetailsForm';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import FormCard from '@/components/FormCard';
 import FormField from '@/components/FormField';
-import LinkButton from '@/components/LinkButton';
 import TabNav, { TabNavItem } from '@/components/TabNav';
 import TextInput from '@/components/TextInput';
+import TextLink from '@/components/TextLink';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
@ -105,12 +105,9 @@ const ApiResourceDetails = () => {

  return (
    <div className={detailsStyles.container}>
-      <LinkButton
-        to="/api-resources"
-        icon={<Back />}
-        title="api_resource_details.back_to_api_resources"
-        className={styles.backLink}
-      />
+      <TextLink to="/api-resources" icon={<Back />} className={styles.backLink}>
+        {t('api_resource_details.back_to_api_resources')}
+      </TextLink>
      {isLoading && <DetailsSkeleton />}
      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
      {data && (
--- a/packages/console/src/pages/ApplicationDetails/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/index.module.scss
@ -2,6 +2,7 @@

 .backLink {
  margin: _.unit(1) 0 0 _.unit(1);
+  user-select: none;
 }

 .deleteConfirm {
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@ -19,8 +19,8 @@ import DeleteConfirmModal from '@/components/DeleteConfirmModal';
 import DetailsForm from '@/components/DetailsForm';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import Drawer from '@/components/Drawer';
-import LinkButton from '@/components/LinkButton';
 import TabNav, { TabNavItem } from '@/components/TabNav';
+import TextLink from '@/components/TextLink';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
@ -126,12 +126,9 @@ const ApplicationDetails = () => {

  return (
    <div className={detailsStyles.container}>
-      <LinkButton
-        to="/applications"
-        icon={<Back />}
-        title="application_details.back_to_applications"
-        className={styles.backLink}
-      />
+      <TextLink to="/applications" icon={<Back />} className={styles.backLink}>
+        {t('application_details.back_to_applications')}
+      </TextLink>
      {isLoading && <DetailsSkeleton />}
      {data && oidcConfig && (
        <>
--- a/packages/console/src/pages/Applications/components/Guide/index.tsx
+++ b/packages/console/src/pages/Applications/components/Guide/index.tsx
@ -7,6 +7,7 @@ import type { LazyExoticComponent } from 'react';
 import { cloneElement, lazy, Suspense, useEffect, useState } from 'react';

 import CodeEditor from '@/components/CodeEditor';
+import TextLink from '@/components/TextLink';
 import DetailsSummary from '@/mdx-components/DetailsSummary';
 import type { SupportedSdk } from '@/types/applications';
 import { applicationTypeAndSdkTypeMappings } from '@/types/applications';
@ -97,9 +98,9 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
              );
            },
            a: ({ children, ...props }) => (
-              <a {...props} target="_blank" rel="noopener noreferrer">
+              <TextLink {...props} target="_blank" rel="noopener noreferrer">
                {children}
-              </a>
+              </TextLink>
            ),
            details: DetailsSummary,
          }}
--- a/packages/console/src/pages/AuditLogDetails/index.module.scss
+++ b/packages/console/src/pages/AuditLogDetails/index.module.scss
@ -2,6 +2,7 @@

 .backLink {
  margin: _.unit(1) 0 0 _.unit(1);
+  user-select: none;
 }

 .header {
--- a/packages/console/src/pages/AuditLogDetails/index.tsx
+++ b/packages/console/src/pages/AuditLogDetails/index.tsx
@ -8,11 +8,10 @@ import Back from '@/assets/images/back.svg';
 import ApplicationName from '@/components/ApplicationName';
 import Card from '@/components/Card';
 import CodeEditor from '@/components/CodeEditor';
-import DangerousRaw from '@/components/DangerousRaw';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import FormField from '@/components/FormField';
-import LinkButton from '@/components/LinkButton';
 import TabNav, { TabNavItem } from '@/components/TabNav';
+import TextLink from '@/components/TextLink';
 import UserName from '@/components/UserName';
 import { logEventTitle } from '@/consts/logs';
 import type { RequestError } from '@/hooks/use-api';
@ -37,13 +36,9 @@ const AuditLogDetails = () => {
  const isLoading = !data && !error;

  const backLink = getAuditLogDetailsRelatedResourceLink(pathname);
-  const backLinkTitle = userId ? (
-    <DangerousRaw>
-      {t('log_details.back_to_user', { name: userData?.name ?? t('users.unnamed') })}
-    </DangerousRaw>
-  ) : (
-    'log_details.back_to_logs'
-  );
+  const backLinkTitle = userId
+    ? t('log_details.back_to_user', { name: userData?.name ?? t('users.unnamed') })
+    : t('log_details.back_to_logs');

  if (!logId) {
    return null;
@ -51,7 +46,9 @@ const AuditLogDetails = () => {

  return (
    <div className={detailsStyles.container}>
-      <LinkButton to={backLink} icon={<Back />} title={backLinkTitle} className={styles.backLink} />
+      <TextLink to={backLink} icon={<Back />} className={styles.backLink}>
+        {backLinkTitle}
+      </TextLink>
      {isLoading && <DetailsSkeleton />}
      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
      {data && (
--- a/packages/console/src/pages/ConnectorDetails/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/index.module.scss
@ -2,6 +2,7 @@

 .backLink {
  margin: _.unit(1) 0 0 _.unit(1);
+  user-select: none;
 }

 .header {
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@ -17,10 +17,10 @@ import ConfirmModal from '@/components/ConfirmModal';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import Drawer from '@/components/Drawer';
-import LinkButton from '@/components/LinkButton';
 import Markdown from '@/components/Markdown';
 import Status from '@/components/Status';
 import TabNav, { TabNavItem } from '@/components/TabNav';
+import TextLink from '@/components/TextLink';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
@ -83,12 +83,13 @@ const ConnectorDetails = () => {

  return (
    <div className={detailsStyles.container}>
-      <LinkButton
+      <TextLink
        to={isSocial ? '/connectors/social' : '/connectors'}
        icon={<Back />}
-        title="connector_details.back_to_connectors"
        className={styles.backLink}
-      />
+      >
+        {t('connector_details.back_to_connectors')}
+      </TextLink>
      {isLoading && <DetailsSkeleton />}
      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
      {isSocial && <ConnectorTabs target={data.target} connectorId={data.id} />}
--- a/packages/console/src/pages/Connectors/components/ConnectorStatusField/index.module.scss
+++ b/packages/console/src/pages/Connectors/components/ConnectorStatusField/index.module.scss
@ -16,8 +16,11 @@
 .content {
  font: var(--font-body-medium);

-  a {
+  .link {
    color: #cabeff;
-    text-decoration: none;
+
+    &:active {
+      color: #cabeff;
+    }
  }
 }
--- a/packages/console/src/pages/Connectors/components/ConnectorStatusField/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorStatusField/index.tsx
@ -1,6 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';

+import TextLink from '@/components/TextLink';
 import ToggleTipButton from '@/components/ToggleTipButton';

 import * as styles from './index.module.scss';
@ -21,9 +21,10 @@ const ConnectorStatusField = () => {
              <Trans
                components={{
                  a: (
-                    <Link
+                    <TextLink
                      to="/sign-in-experience/sign-up-and-sign-in"
                      target="_blank"
+                      className={styles.link}
                      onClick={closeTipHandler}
                    />
                  ),
--- a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss
+++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss
@ -4,9 +4,4 @@
  .notice {
    margin: _.unit(4) 0 0;
  }
-
-  a {
-    color: var(--color-text-link);
-    text-decoration: none;
-  }
 }
--- a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
+++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
@ -1,9 +1,9 @@
 import type { ConnectorResponse } from '@logto/schemas';
 import { Trans, useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
 import useSWR from 'swr';

 import Alert from '@/components/Alert';
+import TextLink from '@/components/TextLink';
 import useUserPreferences from '@/hooks/use-user-preferences';

 import * as styles from './index.module.scss';
@ -31,7 +31,7 @@ const SignInExperienceSetupNotice = () => {
      >
        <Trans
          components={{
-            a: <Link to="/sign-in-experience/sign-up-and-sign-in" target="_blank" />,
+            a: <TextLink to="/sign-in-experience/sign-up-and-sign-in" target="_blank" />,
          }}
        >
          {t('connectors.config_sie_notice', { link: t('connectors.config_sie_link_text') })}
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx
@ -1,7 +1,8 @@
 import { ConnectorType } from '@logto/schemas';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';

 import Alert from '@/components/Alert';
+import TextLink from '@/components/TextLink';
 import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types';

 type Props = {
@ -23,14 +24,22 @@ const ConnectorSetupWarning = ({ requiredConnectors }: Props) => {
  return (
    <>
      {missingConnectors.map((connectorType) => (
-        <Alert
-          key={connectorType}
-          action="general.set_up"
-          href={connectorType === ConnectorType.Social ? '/connectors/social' : '/connectors'}
-        >
-          {t('sign_in_exp.setup_warning.no_connector', {
-            context: connectorType.toLowerCase(),
-          })}
+        <Alert key={connectorType}>
+          <Trans
+            components={{
+              a: (
+                <TextLink
+                  to={connectorType === ConnectorType.Social ? '/connectors/social' : '/connectors'}
+                  target="_blank"
+                />
+              ),
+            }}
+          >
+            {t('sign_in_exp.setup_warning.no_connector', {
+              context: connectorType.toLowerCase(),
+              link: t('sign_in_exp.setup_warning.setup_link'),
+            })}
+          </Trans>
        </Alert>
      ))}
    </>
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.module.scss
@ -9,8 +9,7 @@
  color: var(--color-text-secondary);
  margin-top: _.unit(2);

-  a {
-    color: var(--color-text-link);
-    text-decoration: none;
+  .setup {
+    margin: 0 _.unit(1);
  }
 }
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx
@ -1,7 +1,7 @@
 import { ConnectorType } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';

+import TextLink from '@/components/TextLink';
 import DragDropProvider from '@/components/Transfer/DragDropProvider';
 import DraggableItem from '@/components/Transfer/DraggableItem';
 import useConnectorGroups from '@/hooks/use-connector-groups';
@ -86,10 +86,10 @@ const SocialConnectorEditBox = ({ value, onChange }: Props) => {
      />
      <ConnectorSetupWarning requiredConnectors={[ConnectorType.Social]} />
      <div className={styles.setUpHint}>
-        {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.set_up_hint.not_in_list')}{' '}
-        <Link to="/connectors/social" target="_blank">
+        {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.set_up_hint.not_in_list')}
+        <TextLink to="/connectors/social" target="_blank" className={styles.setup}>
          {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.set_up_hint.set_up_more')}
-        </Link>{' '}
+        </TextLink>
        {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.set_up_hint.go_to')}
      </div>
    </div>
--- a/packages/console/src/pages/UserDetails/index.module.scss
+++ b/packages/console/src/pages/UserDetails/index.module.scss
@ -2,6 +2,7 @@

 .backLink {
  margin: _.unit(1) 0 0 _.unit(1);
+  user-select: none;
 }

 .resourceLayout {
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@ -16,8 +16,8 @@ import Card from '@/components/Card';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import DeleteConfirmModal from '@/components/DeleteConfirmModal';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
-import LinkButton from '@/components/LinkButton';
 import TabNav, { TabNavItem } from '@/components/TabNav';
+import TextLink from '@/components/TextLink';
 import { generatedPasswordStorageKey } from '@/consts';
 import { generateAvatarPlaceHolderById } from '@/consts/avatars';
 import type { RequestError } from '@/hooks/use-api';
@ -78,12 +78,9 @@ const UserDetails = () => {

  return (
    <div className={classNames(detailsStyles.container, isLogs && styles.resourceLayout)}>
-      <LinkButton
-        to="/users"
-        icon={<Back />}
-        title="user_details.back_to_users"
-        className={styles.backLink}
-      />
+      <TextLink to="/users" icon={<Back />} className={styles.backLink}>
+        {t('user_details.back_to_users')}
+      </TextLink>
      {isLoading && <DetailsSkeleton />}
      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
      {userId && data && (
--- a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
@ -151,13 +151,14 @@ const sign_in_exp = {
  setup_warning: {
    no_connector: '',
    no_connector_sms:
-      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
-      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_social:
-      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_added_social_connector:
      'Du hast jetzt ein paar Social Connectoren eingerichtet. Füge jetzt einige zu deinem Anmeldeerlebnis hinzu.',
+    setup_link: 'Set up',
  },
  save_alert: {
    description:
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
@ -145,13 +145,14 @@ const sign_in_exp = {
  setup_warning: {
    no_connector: '',
    no_connector_sms:
-      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in.',
+      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"',
    no_connector_email:
-      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in.',
+      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"',
    no_connector_social:
-      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in.',
+      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"',
    no_added_social_connector:
      'You’ve set up a few social connectors now. Make sure to add some to your sign in experience.',
+    setup_link: 'Set up',
  },
  save_alert: {
    description:
--- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
@ -147,13 +147,14 @@ const sign_in_exp = {
  setup_warning: {
    no_connector: '',
    no_connector_sms:
-      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
-      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_social:
-      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_added_social_connector:
-      "Vous avez maintenant configuré quelques connecteurs sociaux. Assurez-vous d'en ajouter quelques-uns à votre expérience de connexion.",
+      "Vous avez maintenant configuré quelques connecteurs sociaux. Assurez-vous d'en ajouter quelques-uns à votre expérience de connexion.", // UNTRANSLATED
+    setup_link: 'Set up',
  },
  save_alert: {
    description:
--- a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
@ -142,13 +142,14 @@ const sign_in_exp = {
  setup_warning: {
    no_connector: '',
    no_connector_sms:
-      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
-      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_social:
-      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_added_social_connector:
      '보다 많은 소셜 연동들을 설정하여, 고객에게 보다 나은 경험을 제공해보세요.',
+    setup_link: 'Set up',
  },
  save_alert: {
    description:
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
@ -145,13 +145,14 @@ const sign_in_exp = {
  setup_warning: {
    no_connector: '',
    no_connector_sms:
-      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
-      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_social:
-      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_added_social_connector:
      'Configurou alguns conectores sociais agora. Certifique-se de adicionar alguns a experiência de login.',
+    setup_link: 'Set up',
  },
  save_alert: {
    description:
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
@ -146,13 +146,14 @@ const sign_in_exp = {
  setup_warning: {
    no_connector: '',
    no_connector_sms:
-      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No SMS connector set-up yet. Until you finish configuring your SMS connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_email:
-      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No email connector set-up yet. Until you finish configuring your email connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_connector_social:
-      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in.', // UNTRANSLATED
+      'No social connector set-up yet. Until you finish configuring your social connector, you won’t be able to sign in. <a>{{link}}</a> in "Connectors"', // UNTRANSLATED
    no_added_social_connector:
      'Şimdi birkaç social connector kurdunuz. Oturum açma deneyiminize bazı şeyler eklediğinizden emin olun.',
+    setup_link: 'Set up',
  },
  save_alert: {
    description:
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
@ -135,10 +135,14 @@ const sign_in_exp = {
  },
  setup_warning: {
    no_connector: '',
-    no_connector_sms: '你尚未设置 SMS 短信连接器。在完成该配置前，你将无法登录。',
-    no_connector_email: '你尚未设置电子邮件连接器。在完成该配置前，你将无法登录。',
-    no_connector_social: '你尚未设置社交连接器。在完成该配置前，你将无法登录。',
+    no_connector_sms:
+      '你尚未设置 SMS 短信连接器。在完成该配置前，你将无法登录。<a>{{link}}</a>其他社交连接器。',
+    no_connector_email:
+      '你尚未设置电子邮件连接器。在完成该配置前，你将无法登录。<a>{{link}}</a>其他社交连接器。',
+    no_connector_social:
+      '你尚未设置社交连接器。在完成该配置前，你将无法登录。<a>{{link}}</a>其他社交连接器。',
    no_added_social_connector: '你已经成功设置了一些社交连接器。点按「+」添加一些到你的登录体验。',
+    setup_link: '立即设置',
  },
  save_alert: {
    description: