feat(console): add tenant list dropdown (#3988)

packages/console/src/containers/AppContent/components/Topbar/TenantSelector/components/TenantEnvTag/index.module.scss

@@ -0,0 +1,25 @@
+@use '@/scss/underscore' as _;
+
+.tag {
+  display: flex;
+  align-items: center;
+  padding: 0 _.unit(1.5);
+  border-radius: _.unit(1);
+  height: 18px;
+
+  .text {
+    font: var(--font-label-3);
+  }
+
+  &.development {
+    background: var(--color-env-tag-development);
+  }
+
+  &.staging {
+    background: var(--color-env-tag-staging);
+  }
+
+  &.production {
+    background: var(--color-env-tag-production);
+  }
+}

packages/console/src/containers/AppContent/components/Topbar/TenantSelector/components/TenantEnvTag/index.tsx

@@ -0,0 +1,29 @@
+import { TenantTag } from '@logto/schemas/models';
+import classNames from 'classnames';
+
+import DangerousRaw from '@/components/DangerousRaw';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  tag: TenantTag;
+  className?: string;
+};
+
+const tenantTagMap: Record<TenantTag, string> = Object.freeze({
+  [TenantTag.Development]: 'Dev',
+  [TenantTag.Staging]: 'Staging',
+  [TenantTag.Production]: 'Prod',
+});
+
+function TenantEnvTag({ tag, className }: Props) {
+  return (
+    <div className={classNames(styles.tag, styles[tag], className)}>
+      <div className={styles.text}>
+        <DangerousRaw>{tenantTagMap[tag]}</DangerousRaw>
+      </div>
+    </div>
+  );
+}
+
+export default TenantEnvTag;

packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.module.scss

@@ -0,0 +1,121 @@
+@use '@/scss/underscore' as _;
+
+.currentTenantCard {
+  display: flex;
+  align-items: center;
+  padding: _.unit(1);
+  margin-left: _.unit(5);
+  max-width: 500px;
+  border-radius: _.unit(2);
+  transition: background-color 0.2s ease-in-out;
+  position: relative;
+  border: none;
+  background-color: transparent;
+
+  &:hover {
+    cursor: pointer;
+    background: var(--color-hover-variant);
+  }
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  .name {
+    font: var(--font-title-2);
+    margin-right: _.unit(1.5);
+    @include _.text-ellipsis;
+  }
+
+  .tag {
+    font: var(--font-body-3);
+    margin-right: _.unit(2);
+  }
+
+  .arrowIcon {
+    width: 16px;
+    height: 16px;
+    color: var(--color-text-secondary);
+  }
+
+  &::before {
+    content: '';
+    width: 1px;
+    height: 16px;
+    background-color: var(--color-neutral-80);
+    flex-shrink: 0;
+    position: absolute;
+    left: _.unit(-4);
+  }
+}
+
+.dropdown {
+  max-width: 500px;
+  min-width: 320px;
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  padding: _.unit(2.5) _.unit(3) _.unit(2.5) _.unit(4);
+  margin: _.unit(1);
+  border-radius: _.unit(1.5);
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  .dropdownName {
+    font: var(--font-body-2);
+    margin-right: _.unit(2);
+    @include _.text-ellipsis;
+  }
+
+  .dropdownTag {
+    font: var(--font-body-3);
+    margin-right: _.unit(4);
+  }
+
+  .checkIcon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: transparent;
+    margin-left: auto;
+
+    &.visible {
+      color: var(--color-brand-40);
+    }
+  }
+}
+
+.createTenantButton {
+  display: flex;
+  align-items: center;
+  padding: _.unit(2.5) _.unit(3) _.unit(2.5) _.unit(4);
+  margin: _.unit(1);
+  border-radius: _.unit(1.5);
+  transition: background-color 0.2s ease-in-out;
+  font: var(--font-body-2);
+  @include _.text-ellipsis;
+  justify-content: space-between;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    color: var(--color-placeholder);
+  }
+}

packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx

@@ -0,0 +1,89 @@
+import { TenantTag } from '@logto/schemas/models';
+import classNames from 'classnames';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import KeyboardArrowDown from '@/assets/images/keyboard-arrow-down.svg';
+import PlusSign from '@/assets/images/plus.svg';
+import Tick from '@/assets/images/tick.svg';
+import AppError from '@/components/AppError';
+import Divider from '@/components/Divider';
+import Dropdown, { DropdownItem } from '@/components/Dropdown';
+import useTenants from '@/hooks/use-tenants';
+import { onKeyDownHandler } from '@/utils/a11y';
+
+import TenantEnvTag from './components/TenantEnvTag';
+import * as styles from './index.module.scss';
+
+function TenantSelector() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { tenants, currentTenant: currentTenantInfo, currentTenantId, error } = useTenants();
+
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  if (error) {
+    return <AppError errorMessage={error.message} callStack={error.stack} />;
+  }
+
+  if (!tenants?.length) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        ref={anchorRef}
+        tabIndex={0}
+        className={styles.currentTenantCard}
+        role="button"
+        onKeyDown={onKeyDownHandler(() => {
+          setShowDropdown(true);
+        })}
+        onClick={() => {
+          setShowDropdown(true);
+        }}
+      >
+        <div className={styles.name}>{currentTenantInfo?.name ?? 'My project'}</div>
+        <TenantEnvTag
+          className={styles.tag}
+          tag={currentTenantInfo?.tag ?? TenantTag.Development}
+        />
+        <KeyboardArrowDown className={styles.arrowIcon} />
+      </div>
+      <Dropdown
+        hasOverflowContent
+        className={styles.dropdown}
+        anchorRef={anchorRef}
+        isOpen={showDropdown}
+        horizontalAlign="start"
+        onClose={() => {
+          setShowDropdown(false);
+        }}
+      >
+        {tenants.map(({ id, name, tag }) => (
+          <DropdownItem
+            key={id}
+            className={styles.dropdownItem}
+            onClick={() => {
+              window.open(new URL(`/${id}`, window.location.origin).toString(), '_self');
+            }}
+          >
+            <div className={styles.dropdownName}>{name}</div>
+            <TenantEnvTag className={styles.dropdownTag} tag={tag} />
+            <Tick
+              className={classNames(styles.checkIcon, id === currentTenantId && styles.visible)}
+            />
+          </DropdownItem>
+        ))}
+        <Divider />
+        <div className={styles.createTenantButton}>
+          <div>{t('cloud.tenant.create_tenant')}</div>
+          <PlusSign className={styles.icon} />
+        </div>
+      </Dropdown>
+    </>
+  );
+}
+
+export default TenantSelector;

packages/console/src/containers/AppContent/components/Topbar/index.tsx

@@ -4,11 +4,12 @@ import { useTranslation } from 'react-i18next';
 import CloudLogo from '@/assets/images/cloud-logo.svg';
 import Logo from '@/assets/images/logo.svg';
 import Spacer from '@/components/Spacer';
-import { isCloud } from '@/consts/env';
+import { isProduction, isCloud } from '@/consts/env';
 import EarlyBirdGift from '@/onboarding/components/EarlyBirdGift';
 
 import Contact from './Contact';
 import DocumentNavButton from './DocumentNavButton';
+import TenantSelector from './TenantSelector';
 import UserInfo from './UserInfo';
 import * as styles from './index.module.scss';
 
@@ -23,6 +24,7 @@ function Topbar({ className }: Props) {
   return (
     <div className={classNames(styles.topbar, className)}>
       <LogtoLogo className={styles.logo} />
+      {isCloud && !isProduction && <TenantSelector />}
       {!isCloud && (
         <>
           <div className={styles.line} />

packages/toolkit/core-kit/scss/_console-themes.scss

@@ -155,6 +155,9 @@
   --color-hover-variant: rgba(93, 52, 242, 8%); // 8% Primary-40
   --color-pressed-variant: rgba(93, 52, 242, 12%); // 12% Primary-40
   --color-focused-variant: rgba(93, 52, 242, 16%); // 16% Primary-40
+  --color-env-tag-development: var(--color-pressed-variant);
+  --color-env-tag-staging: rgba(255, 185, 90, 18%);
+  --color-env-tag-production: rgba(104, 190, 108, 18%);
 
   // Shadows
   --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
@@ -333,6 +336,10 @@
   --color-hover-variant: rgba(202, 190, 255, 8%); // 8% Primary-40
   --color-pressed-variant: rgba(202, 190, 255, 12%); // 12% Primary-40
   --color-focused-variant: rgba(202, 190, 255, 16%); // 16% Primary-40
+  --color-env-tag-development: rgba(202, 190, 255, 32%);
+  --color-env-tag-staging: rgba(235, 153, 24, 36%);
+  --color-env-tag-production: rgba(104, 190, 108, 36%);
+
 
   // Shadows
   --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);