refactor(console): fix organization issues

2025-03-31 22:51:25 -05:00 · 2023-11-01 18:02:42 +08:00 · 2023-11-01 18:02:42 +08:00 · c16d1e4661
commit c16d1e4661
parent 8616496c61
56 changed files with 200 additions and 120 deletions
--- a/packages/console/src/assets/icons/role-feature.svg
+++ b/packages/console/src/assets/icons/role-feature.svg
@ -0,0 +1,43 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="40" height="40" rx="6" fill="currentColor" />
+  <circle cx="19.792" cy="13.5" r="6.5" fill="url(#paint0_linear_897_8053)" />
+  <rect x="12.1941" y="11.8887" width="8.778" height="1.09725" rx="0.548625" fill="#2D2C61" />
+  <rect x="23.167" y="11.8887" width="4.389" height="1.09725" rx="0.548625" fill="#2D2C61" />
+  <path
+    d="M10 28.5835C10 24.9475 12.9475 22 16.5835 22H23.4165C27.0525 22 30 24.9475 30 28.5835V30.8055C30 32.0175 29.0175 33 27.8055 33H12.1945C10.9825 33 10 32.0175 10 30.8055V28.5835Z"
+    fill="#FAABFF" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M27.1999 22C26.8685 22 26.5998 22.2686 26.5998 22.6V26.2001C26.5998 26.5315 26.8685 26.8001 27.1999 26.8001H30.7999C31.1313 26.8001 31.4 26.5315 31.4 26.2001V22.6C31.4 22.2686 31.1313 22 30.7999 22H27.1999ZM23.6 29.1997C23.2686 29.1997 23 29.4683 23 29.7997V33.3998C23 33.7312 23.2686 33.9998 23.6 33.9998H27.2001C27.5315 33.9998 27.8001 33.7312 27.8001 33.3998V29.7997C27.8001 29.4683 27.5315 29.1997 27.2001 29.1997H23.6ZM30.2003 29.7997C30.2003 29.4683 30.4689 29.1997 30.8003 29.1997H34.4004C34.7318 29.1997 35.0004 29.4683 35.0004 29.7997V33.3998C35.0004 33.7312 34.7318 33.9998 34.4004 33.9998H30.8003C30.4689 33.9998 30.2003 33.7312 30.2003 33.3998V29.7997ZM24.7999 28.5992C24.7999 27.9364 25.3372 27.3991 25.9999 27.3991H28.3999L28.3999 26.8006H29.5999V27.3991H32.0001C32.6629 27.3991 33.2001 27.9364 33.2001 28.5992V29.1992H32.0001V28.5992H25.9999V29.1992H24.7999V28.5992Z"
+    fill="url(#paint1_linear_897_8053)" />
+  <path d="M27.8 23.2002V25.6003H30.2001V23.2002H27.8Z" fill="url(#paint2_linear_897_8053)" />
+  <path d="M24.2 30.3994V32.7995H26.6V30.3994H24.2Z" fill="url(#paint3_linear_897_8053)" />
+  <path d="M31.3999 30.4004V32.8004H33.8V30.4004H31.3999Z" fill="url(#paint4_linear_897_8053)" />
+  <defs>
+    <linearGradient id="paint0_linear_897_8053" x1="15.5264" y1="18.2396" x2="24.2607" y2="8.89583"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#5D34F2" />
+      <stop offset="1" stop-color="#FF88FA" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_897_8053" x1="25.0626" y1="32.375" x2="33.125" y2="23.7498"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#5D34F2" />
+      <stop offset="1" stop-color="#FF88FA" />
+    </linearGradient>
+    <linearGradient id="paint2_linear_897_8053" x1="27.8334" y1="24.3102" x2="30.2001" y2="24.3102"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D2C4FF" />
+      <stop offset="1" stop-color="#ECD5FF" />
+    </linearGradient>
+    <linearGradient id="paint3_linear_897_8053" x1="24.2333" y1="31.5094" x2="26.6" y2="31.5094"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D2C4FF" />
+      <stop offset="1" stop-color="#ECD5FF" />
+    </linearGradient>
+    <linearGradient id="paint4_linear_897_8053" x1="31.4332" y1="31.5104" x2="33.8" y2="31.5104"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D2C4FF" />
+      <stop offset="1" stop-color="#ECD5FF" />
+    </linearGradient>
+  </defs>
+</svg>
+  
--- a/packages/console/src/components/OrganizationRolesSelect/index.module.scss
+++ b/packages/console/src/components/OrganizationRolesSelect/index.module.scss
@ -0,0 +1,15 @@
+@use '@/scss/underscore' as _;
+
+.roleOption {
+  display: flex;
+  align-items: center;
+  gap: _.unit(1);
+
+  &.large {
+    gap: _.unit(3);
+  }
+
+  > span {
+    font: var(--font-label-2);
+  }
+}
--- a/packages/console/src/components/OrganizationRolesSelect/index.tsx
+++ b/packages/console/src/components/OrganizationRolesSelect/index.tsx
@ -1,8 +1,29 @@
 import { type OrganizationScope } from '@logto/schemas';
+import classNames from 'classnames';

+import RoleIcon from '@/assets/icons/role-feature.svg';
 import MultiSelect, { type Option } from '@/ds-components/Select/MultiSelect';
 import useSearchValues from '@/hooks/use-search-values';

+import ThemedIcon from '../ThemedIcon';
+
+import * as styles from './index.module.scss';
+
+type RoleOptionProps = {
+  title?: string;
+  value: string;
+  size?: 'small' | 'large';
+};
+
+export function RoleOption({ title, value, size = 'small' }: RoleOptionProps) {
+  return (
+    <div className={classNames(styles.roleOption, size === 'large' && styles.large)}>
+      <ThemedIcon for={RoleIcon} size={size === 'small' ? 16 : 40} />
+      <span>{title ?? value}</span>
+    </div>
+  );
+}
+
 type Props = {
  value: Array<Option<string>>;
  onChange: (value: Array<Option<string>>) => void;
@ -20,8 +41,9 @@ function OrganizationRolesSelect({ value, onChange, keyword, setKeyword }: Props
    <MultiSelect
      value={value}
      options={scopes.map(({ id, name }) => ({ value: id, title: name }))}
-      placeholder="organizations.search_permission_placeholder"
+      placeholder="organizations.search_role_placeholder"
      isOptionsLoading={isLoading}
+      renderOption={RoleOption}
      onChange={onChange}
      onSearch={setKeyword}
    />
--- a/packages/console/src/ds-components/Button/index.module.scss
+++ b/packages/console/src/ds-components/Button/index.module.scss
@ -58,22 +58,11 @@
  &.small {
    height: 30px;
    padding: 0 _.unit(3);
+    gap: _.unit(1);

    &.text {
      height: 24px;
    }
-
-    .icon {
-      &:not(:last-child) {
-        margin-right: _.unit(1);
-      }
-    }
-
-    .trailingIcon {
-      &:not(:first-child) {
-        margin-left: _.unit(1);
-      }
-    }
  }

  &.medium {
--- a/packages/console/src/ds-components/Select/MultiSelect.tsx
+++ b/packages/console/src/ds-components/Select/MultiSelect.tsx
@ -1,4 +1,5 @@
 import { type AdminConsoleKey } from '@logto/phrases';
+import { cond } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@ -28,6 +29,7 @@ type Props<T> = {
  error?: string | boolean;
  placeholder?: AdminConsoleKey;
  isOptionsLoading?: boolean;
+  renderOption?: (option: Option<T>) => React.ReactNode;
 };

 function MultiSelect<T extends string>({
@ -40,6 +42,7 @@ function MultiSelect<T extends string>({
  error,
  placeholder,
  isOptionsLoading,
+  renderOption = ({ title, value }) => title ?? value,
 }: Props<T>) {
  const inputRef = useRef<HTMLInputElement>(null);
  const selectRef = useRef<HTMLDivElement>(null);
@ -103,17 +106,16 @@ function MultiSelect<T extends string>({
      }}
    >
      {value.map((option) => {
-        const { value, title } = option;
        return (
          <Tag
-            key={value}
+            key={option.value}
            variant="cell"
            className={styles.tag}
            onClick={(event) => {
              event.stopPropagation();
            }}
          >
-            {title ?? value}
+            {renderOption(option)}
            <IconButton
              className={styles.delete}
              size="small"
@ -129,7 +131,7 @@ function MultiSelect<T extends string>({
      <input
        ref={inputRef}
        type="text"
-        placeholder={placeholder && String(t(placeholder))}
+        placeholder={cond(value.length === 0 && placeholder && String(t(placeholder)))}
        value={keyword}
        onChange={({ currentTarget: { value } }) => {
          setKeyword(value);
@ -154,15 +156,15 @@ function MultiSelect<T extends string>({
            {filteredOptions.length === 0 && (
              <div className={styles.noResult}>{t('errors.empty')}</div>
            )}
-            {filteredOptions.map(({ value, title }) => (
+            {filteredOptions.map((option) => (
              <DropdownItem
-                key={value}
+                key={option.value}
                onClick={(event) => {
                  event.preventDefault();
-                  handleSelect({ value, title });
+                  handleSelect(option);
                }}
              >
-                {title ?? value}
+                {renderOption(option)}
              </DropdownItem>
            ))}
          </>
--- a/packages/console/src/ds-components/Select/index.module.scss
+++ b/packages/console/src/ds-components/Select/index.module.scss
@ -47,6 +47,10 @@
      background: transparent;
      flex-grow: 1;
      padding: _.unit(0.5);
+
+      &::placeholder {
+        color: var(--color-placeholder);
+      }
    }
  }

--- a/packages/console/src/pages/OrganizationDetails/Members/AddMembersToOrganization.tsx
+++ b/packages/console/src/pages/OrganizationDetails/Members/AddMembersToOrganization.tsx
@ -75,6 +75,7 @@ function AddMembersToOrganization({ organization, isOpen, onClose }: Props) {
      onRequestClose={onClose}
    >
      <ModalLayout
+        size="large"
        title={
          <DangerousRaw>
            {t('organization_details.add_members_to_organization', {
--- a/packages/console/src/pages/OrganizationDetails/Members/index.tsx
+++ b/packages/console/src/pages/OrganizationDetails/Members/index.tsx
@ -8,6 +8,7 @@ import ActionsButton from '@/components/ActionsButton';
 import DateTime from '@/components/DateTime';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import UserPreview from '@/components/ItemPreview/UserPreview';
+import { RoleOption } from '@/components/OrganizationRolesSelect';
 import { defaultPageSize } from '@/consts';
 import Button from '@/ds-components/Button';
 import DangerousRaw from '@/ds-components/DangerousRaw';
@ -83,7 +84,7 @@ function Members({ organization }: Props) {
                <div className={styles.roles}>
                  {organizationRoles.map(({ id, name }) => (
                    <Tag key={id} variant="cell">
-                      {name}
+                      <RoleOption value={id} title={name} />
                    </Tag>
                  ))}
                </div>
--- a/packages/console/src/pages/Organizations/OrganizationsTable/index.tsx
+++ b/packages/console/src/pages/Organizations/OrganizationsTable/index.tsx
@ -13,11 +13,15 @@ import CopyToClipboard from '@/ds-components/CopyToClipboard';
 import Search from '@/ds-components/Search';
 import Table from '@/ds-components/Table';
 import { type RequestError } from '@/hooks/use-api';
+import useTenantPathname from '@/hooks/use-tenant-pathname';
 import AssignedEntities from '@/pages/Roles/components/AssignedEntities';
 import { buildUrl } from '@/utils/url';

+/** The page size of the organizations table. */
 const pageSize = defaultPageSize;
+/** The organizations page root pathname. */
 const pathname = '/organizations';
+/** The organizations API pathname in the management API. */
 const apiPathname = 'api/organizations';

 function OrganizationsTable() {
@ -34,12 +38,16 @@ function OrganizationsTable() {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const isLoading = !response && !error;
  const [data, totalCount] = response ?? [[], 0];
+  const { navigate } = useTenantPathname();

  return (
    <Table
      isLoading={isLoading}
      placeholder={<EmptyDataPlaceholder />}
      rowGroups={[{ key: 'data', data }]}
+      rowClickHandler={({ id }) => {
+        navigate(joinPath(pathname, id));
+      }}
      columns={[
        {
          title: t('general.name'),
--- a/packages/console/src/pages/Organizations/PermissionsField/index.tsx
+++ b/packages/console/src/pages/Organizations/PermissionsField/index.tsx
@ -1,15 +1,17 @@
 import { type OrganizationScope } from '@logto/schemas';
 import { type Nullable } from '@silverhand/essentials';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import useSWR from 'swr';
+import useSWR, { useSWRConfig } from 'swr';

 import ActionsButton from '@/components/ActionsButton';
 import FormField from '@/ds-components/FormField';
+import Tag from '@/ds-components/Tag';
 import useApi, { type RequestError } from '@/hooks/use-api';
 import { buildUrl } from '@/utils/url';

 import PermissionModal from '../PermissionModal';
+import { swrKey } from '../RolesField';
 import TemplateTable, { pageSize } from '../TemplateTable';

 /**
@ -21,19 +23,24 @@ function PermissionsField() {
  const {
    data: response,
    error,
-    mutate,
+    mutate: mutatePermissions,
  } = useSWR<[OrganizationScope[], number], RequestError>(
    buildUrl('api/organization-scopes', {
      page: String(page),
      page_size: String(pageSize),
    })
  );
-
+  const { mutate: globalMutate } = useSWRConfig();
  const [data, totalCount] = response ?? [[], 0];
  const api = useApi();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const [editData, setEditData] = useState<Nullable<OrganizationScope>>(null);
+  const mutate = useCallback(() => {
+    void mutatePermissions();
+    // Mutate roles field to update the permissions list
+    void globalMutate((key) => typeof key === 'string' && key.startsWith(swrKey));
+  }, [mutatePermissions, globalMutate]);

  const isLoading = !response && !error;

@ -44,7 +51,7 @@ function PermissionsField() {
        editData={editData}
        onClose={() => {
          setIsModalOpen(false);
-          void mutate();
+          mutate();
        }}
      />
      <TemplateTable
@ -58,7 +65,7 @@ function PermissionsField() {
            title: t('general.name'),
            dataIndex: 'name',
            colSpan: 4,
-            render: ({ name }) => <div>{name}</div>,
+            render: ({ name }) => <Tag variant="cell">{name}</Tag>,
          },
          {
            title: t('general.description'),
@ -79,7 +86,7 @@ function PermissionsField() {
                }}
                onDelete={async () => {
                  await api.delete(`api/organization-scopes/${data.id}`);
-                  void mutate();
+                  mutate();
                }}
              />
            ),
--- a/packages/console/src/pages/Organizations/RolesField/index.tsx
+++ b/packages/console/src/pages/Organizations/RolesField/index.tsx
@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';

 import ActionsButton from '@/components/ActionsButton';
+import { RoleOption } from '@/components/OrganizationRolesSelect';
 import FormField from '@/ds-components/FormField';
 import Tag from '@/ds-components/Tag';
 import useApi, { type RequestError } from '@/hooks/use-api';
@ -15,6 +16,8 @@ import TemplateTable, { pageSize } from '../TemplateTable';

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

+export const swrKey = 'api/organization-roles';
+
 /**
 * Renders the roles field that allows users to add, edit, and delete organization
 * roles.
@ -26,7 +29,7 @@ function RolesField() {
    error,
    mutate,
  } = useSWR<[OrganizationRoleWithScopes[], number], RequestError>(
-    buildUrl('api/organization-roles', {
+    buildUrl(swrKey, {
      page: String(page),
      page_size: String(pageSize),
    })
@ -61,7 +64,7 @@ function RolesField() {
            title: t('general.name'),
            dataIndex: 'name',
            colSpan: 4,
-            render: ({ name }) => <div>{name}</div>,
+            render: ({ name, id }) => <RoleOption size="large" value={id} title={name} />,
          },
          {
            title: t('organizations.permission_other'),
--- a/packages/phrases/src/locales/de/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/de/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/de/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/user-details.ts
@ -106,8 +106,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    'Der Benutzer muss mindestens einen der Anmelde-Identifikatoren (Benutzername, E-Mail, Telefonnummer oder soziales Konto) haben, um sich anzumelden. Sind Sie sicher, dass Sie fortfahren möchten?',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/en/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/organization-details.ts
@ -20,8 +20,7 @@ const organization_details = {
  remove_user_from_organization: 'Remove user from organization',
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
-  search_role_placeholder: 'Type to search for roles',
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  at_least_one_user: 'At least one user is required.',
 };

--- a/packages/phrases/src/locales/en/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/organizations.ts
@ -24,7 +24,8 @@ const organization = {
    'Doing so will remove the permissions associated with this role from the affected users and delete the relations among organization roles, members in the organization, and organization permissions.',
  role: 'Role',
  create_role_placeholder: 'Users with view-only permissions.',
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    title: 'Start with guides',
    subtitle: 'Jumpstart your app development process with our guides',
--- a/packages/phrases/src/locales/en/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/user-details.ts
@ -93,8 +93,7 @@ const user_details = {
  },
  warning_no_sign_in_identifier:
    'User needs to have at least one of the sign-in identifiers (username, email, phone number or social) to sign in. Are you sure you want to continue?',
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/es/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/es/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/es/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/user-details.ts
@ -105,8 +105,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    'El usuario necesita tener al menos uno de los identificadores de inicio de sesión (nombre de usuario, correo electrónico, número de teléfono o red social) para iniciar sesión. ¿Estás seguro/a de que quieres continuar?',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/fr/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/fr/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/fr/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/user-details.ts
@ -106,8 +106,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    "L'utilisateur doit avoir au moins l'un des identifiants de connexion (nom d'utilisateur, e-mail, numéro de téléphone ou compte social) pour se connecter. Êtes-vous sûr(e) de vouloir continuer?",
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/it/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/it/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/it/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/user-details.ts
@ -106,8 +106,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    "L'utente deve avere almeno uno degli identificatori di accesso (nome utente, email, numero di telefono, o social) per accedere. Sei sicuro di voler continuare?",
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/ja/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/ja/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/ja/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/user-details.ts
@ -101,8 +101,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    'ユーザーは、サインインに少なくとも1つの識別子（ユーザー名、メールアドレス、電話番号、またはソーシャル）を持っている必要があります。続行してよろしいですか？',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/ko/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/ko/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/ko/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/user-details.ts
@ -102,8 +102,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    '사용자는 로그인 식별자(사용자 이름, 이메일, 전화 번호 또는 소셜) 중 적어도 하나를 갖고 로그인해야 합니다. 계속 하시겠습니까?',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/user-details.ts
@ -102,8 +102,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    'Aby się zalogować, użytkownik musi mieć co najmniej jeden z identyfikatorów logowania (nazwa użytkownika, e-mail, numer telefonu lub konto społecznościowe). Czy na pewno chcesz kontynuować?',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/user-details.ts
@ -103,8 +103,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    'O usuário precisa ter pelo menos um dos identificadores de login (nome de usuário, e-mail, número de telefone ou social) para fazer login. Tem certeza de que deseja continuar?',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/user-details.ts
@ -105,8 +105,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    'O utilizador precisa de ter pelo menos um dos identificadores de início de sessão (nome de utilizador, e-mail, número de telefone ou redes sociais) para iniciar sessão. Tem a certeza de que quer continuar?',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/ru/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/ru/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/ru/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/user-details.ts
@ -103,8 +103,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    'Пользователь должен иметь хотя бы один из идентификаторов входа (имя пользователя, электронная почта, номер телефона или социальная сеть), чтобы войти. Вы уверены, что хотите продолжить?',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/user-details.ts
@ -104,8 +104,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    'Kullanıcının giriş yapmak için en az bir oturum açma kimliği (kullanıcı adı, e-posta, telefon numarası, veya sosyal) olması gerekiyor. Devam etmek istediğinizden emin misiniz?',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/user-details.ts
@ -98,8 +98,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    '用户需要至少拥有一个登录标识（用户名、邮箱、手机号或社交账户）才能登录。确定要继续吗？',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/user-details.ts
@ -98,8 +98,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    '用戶需要至少擁有一個登錄標識（用戶名、電子郵件、電話號碼或社交帳號）才能登錄。確定要繼續嗎？',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-details.ts
@ -38,9 +38,7 @@ const organization_details = {
  remove_user_from_organization_description:
    'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
  /** UNTRANSLATED */
-  search_role_placeholder: 'Type to search for roles',
-  /** UNTRANSLATED */
-  search_user_placeholder: 'Type to search for users',
+  search_user_placeholder: 'Type to search and select users',
  /** UNTRANSLATED */
  at_least_one_user: 'At least one user is required.',
 };
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/organizations.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/organizations.ts
@ -46,7 +46,9 @@ const organizations = {
  /** UNTRANSLATED */
  create_role_placeholder: 'Users with view-only permissions.',
  /** UNTRANSLATED */
-  search_permission_placeholder: 'Type to search for permissions',
+  search_permission_placeholder: 'Type to search and select permissions',
+  /** UNTRANSLATED */
+  search_role_placeholder: 'Type to search and select roles',
  guide: {
    /** UNTRANSLATED */
    title: 'Start with guides',
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/user-details.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/user-details.ts
@ -98,8 +98,7 @@ const user_details = {
  warning_no_sign_in_identifier:
    '使用者需要至少擁有一個登入標識（使用者名稱、電子郵件、電話號碼或社交帳號）才能登入。確定要繼續嗎？',
  /** UNTRANSLATED */
-  organization_roles_tooltip:
-    'Organization roles assigned to the current user in this organization.',
+  organization_roles_tooltip: 'The roles assigned to the user within this organization.',
 };

 export default Object.freeze(user_details);