refactor(console): always display role creation hint in role assignment modal (#5988)

packages/console/src/components/ApplicationCreation/index.tsx

@@ -35,7 +35,6 @@ function ApplicationCreation({ onCompleted, ...reset }: Props) {
     return (
       <RoleAssignmentModal
         isSkippable
-        isMachineToMachineRoleCreationHintVisible
         entity={createdMachineToMachineApplication}
         type={RoleType.MachineToMachine}
         modalTextOverrides={{

packages/console/src/components/RoleAssignmentModal/index.tsx

@@ -39,17 +39,9 @@ type Props = (
     subtitle?: AdminConsoleKey;
   };
   readonly isSkippable?: boolean;
-  readonly isMachineToMachineRoleCreationHintVisible?: boolean;
 };
 
-function RoleAssignmentModal({
-  entity,
-  onClose,
-  type,
-  modalTextOverrides,
-  isSkippable,
-  isMachineToMachineRoleCreationHintVisible,
-}: Props) {
+function RoleAssignmentModal({ entity, onClose, type, modalTextOverrides, isSkippable }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -149,17 +141,19 @@ function RoleAssignmentModal({
             setRoles(value);
           }}
         />
-        {!isForUser && isMachineToMachineRoleCreationHintVisible && (
-          <div className={styles.hint}>
-            <Trans
-              components={{
-                a: <TextLink to="/roles" />,
-              }}
-            >
-              {t('applications.m2m_role_assignment.role_creation_hint')}
-            </Trans>
-          </div>
-        )}
+        <div className={styles.hint}>
+          <Trans
+            components={{
+              a: <TextLink to="/roles/create" />,
+            }}
+          >
+            {t(
+              isForUser
+                ? 'user_details.roles.create_user_role_hint'
+                : 'applications.m2m_role_assignment.role_creation_hint'
+            )}
+          </Trans>
+        </div>
       </ModalLayout>
     </ReactModal>
   );

packages/console/src/pages/Roles/components/CreateRoleForm/index.module.scss

@@ -5,10 +5,6 @@
   gap: _.unit(6);
 }
 
-.roleTypeSelectionSwitch {
-  margin-top: _.unit(2);
-}
-
 .trailingIcon {
   width: 16px;
   height: 16px;

packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx

@@ -2,14 +2,10 @@ import { type AdminConsoleKey } from '@logto/phrases';
 import type { Role, ScopeResponse } from '@logto/schemas';
 import { RoleType, internalRolePrefix } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
-import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg';
-import KeyboardArrowUp from '@/assets/icons/keyboard-arrow-up.svg';
 import RoleScopesTransfer from '@/components/RoleScopesTransfer';
-import Button from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
 import FormField from '@/ds-components/FormField';
 import ModalLayout from '@/ds-components/ModalLayout';
@@ -41,7 +37,6 @@ type CreateRolePayload = Pick<Role, 'name' | 'description' | 'type'> & {
 };
 
 function CreateRoleForm({ onClose }: Props) {
-  const [isTypeSelectorVisible, setIsTypeSelectorVisible] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const {
@@ -106,47 +101,27 @@ function CreateRoleForm({ onClose }: Props) {
             placeholder={t('roles.role_name_placeholder')}
             error={errors.name?.message}
           />
-          <Button
-            type="text"
-            size="small"
-            title={
-              isTypeSelectorVisible
-                ? 'roles.hide_role_type_button_text'
-                : 'roles.show_role_type_button_text'
-            }
-            trailingIcon={
-              <div className={styles.trailingIcon}>
-                {isTypeSelectorVisible ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-              </div>
-            }
-            className={styles.roleTypeSelectionSwitch}
-            onClick={() => {
-              setIsTypeSelectorVisible(!isTypeSelectorVisible);
-            }}
+        </FormField>
+        <FormField title="roles.role_type">
+          <Controller
+            name="type"
+            control={control}
+            render={({ field: { onChange, value, name } }) => (
+              <RadioGroup
+                name={name}
+                className={styles.roleTypes}
+                value={value}
+                onChange={(value) => {
+                  onChange(value);
+                }}
+              >
+                {radioOptions.map(({ key, value }) => (
+                  <Radio key={value} title={<DynamicT forKey={key} />} value={value} />
+                ))}
+              </RadioGroup>
+            )}
           />
         </FormField>
-        {isTypeSelectorVisible && (
-          <FormField title="roles.role_type">
-            <Controller
-              name="type"
-              control={control}
-              render={({ field: { onChange, value, name } }) => (
-                <RadioGroup
-                  name={name}
-                  className={styles.roleTypes}
-                  value={value}
-                  onChange={(value) => {
-                    onChange(value);
-                  }}
-                >
-                  {radioOptions.map(({ key, value }) => (
-                    <Radio key={value} title={<DynamicT forKey={key} />} value={value} />
-                  ))}
-                </RadioGroup>
-              )}
-            />
-          </FormField>
-        )}
         <FormField isRequired title="roles.role_description">
           <TextInput
             {...register('description', { required: true })}

packages/integration-tests/src/tests/console/rbac/helper.ts

@@ -45,11 +45,6 @@ export const createM2mRoleAndAssignPermissions = async (
 
   await expectModalWithTitle(page, 'Create role');
 
-  // Expand role type selection
-  await expect(page).toClick('button[class$=roleTypeSelectionSwitch] span', {
-    text: 'Show more options',
-  });
-
   await expect(page).toClick('div[class*=radioGroup][class$=roleTypes] div[class$=content]', {
     text: 'Machine-to-machine app role',
   });

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

@@ -6,8 +6,6 @@ const roles = {
   create: 'Rolle erstellen',
   role_name: 'Rollenname',
   role_type: 'Rollenart',
-  show_role_type_button_text: 'Weitere Optionen anzeigen',
-  hide_role_type_button_text: 'Weitere Optionen ausblenden',
   type_user: 'Benutzerrolle',
   type_machine_to_machine: 'Maschinen-zu-Maschinen-App-Rolle',
   role_description: 'Beschreibung',

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

@@ -6,8 +6,6 @@ const roles = {
   create: 'Create role',
   role_name: 'Role name',
   role_type: 'Role type',
-  show_role_type_button_text: 'Show more options',
-  hide_role_type_button_text: 'Hide more options',
   type_user: 'User role',
   type_machine_to_machine: 'Machine-to-machine app role',
   role_description: 'Description',

packages/phrases/src/locales/es/translation/admin-console/roles.ts

@@ -6,8 +6,6 @@ const roles = {
   create: 'Crear Rol',
   role_name: 'Nombre de rol',
   role_type: 'Tipo de rol',
-  show_role_type_button_text: 'Mostrar más opciones',
-  hide_role_type_button_text: 'Ocultar más opciones',
   type_user: 'Rol de usuario',
   type_machine_to_machine: 'Rol de aplicación de máquina a máquina',
   role_description: 'Descripción',

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

@@ -6,8 +6,6 @@ const roles = {
   create: 'Créer un rôle',
   role_name: 'Nom du rôle',
   role_type: 'Type de rôle',
-  show_role_type_button_text: "Afficher plus d'options",
-  hide_role_type_button_text: "Masquer plus d'options",
   type_user: 'Rôle utilisateur',
   type_machine_to_machine: "Rôle d'application machine-à-machine",
   role_description: 'Description',

packages/phrases/src/locales/it/translation/admin-console/roles.ts

@@ -6,8 +6,6 @@ const roles = {
   create: 'Crea Ruolo',
   role_name: 'Nome ruolo',
   role_type: 'Tipo ruolo',
-  show_role_type_button_text: 'Mostra altre opzioni',
-  hide_role_type_button_text: 'Nascondi altre opzioni',
   type_user: 'Ruolo utente',
   type_machine_to_machine: 'Ruolo app M2M',
   role_description: 'Descrizione',

packages/phrases/src/locales/ja/translation/admin-console/roles.ts

@@ -6,8 +6,6 @@ const roles = {
   create: 'ロールを作成する',
   role_name: '役割名',
   role_type: '役割タイプ',
-  show_role_type_button_text: 'さらにオプションを表示',
-  hide_role_type_button_text: 'さらにオプションを非表示',
   type_user: 'ユーザーの役割',
   type_machine_to_machine: 'マシン対マシンアプリの役割',
   role_description: '説明',

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

@@ -6,8 +6,6 @@ const roles = {
   create: '역할 생성',
   role_name: '역할 이름',
   role_type: '역할 유형',
-  show_role_type_button_text: '더 많은 옵션 표시',
-  hide_role_type_button_text: '더 많은 옵션 숨기기',
   type_user: '사용자 역할',
   type_machine_to_machine: '기계 간 앱 역할',
   role_description: '설명',

packages/phrases/src/locales/pl-pl/translation/admin-console/roles.ts

@@ -6,8 +6,6 @@ const roles = {
   create: 'Utwórz rolę',
   role_name: 'Nazwa roli',
   role_type: 'Typ roli',
-  show_role_type_button_text: 'Pokaż więcej opcji',
-  hide_role_type_button_text: 'Ukryj więcej opcji',
   type_user: 'Rola użytkownika',
   type_machine_to_machine: 'Rola aplikacji Machine-to-Machine',
   role_description: 'Opis',

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

@@ -6,8 +6,6 @@ const roles = {
   create: 'Criar função',
   role_name: 'Nome da função',
   role_type: 'Tipo de função',
-  show_role_type_button_text: 'Mostrar mais opções',
-  hide_role_type_button_text: 'Esconder mais opções',
   type_user: 'Função do usuário',
   type_machine_to_machine: 'Função de aplicativo de máquina para máquina',
   role_description: 'Descrição',

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

@@ -6,8 +6,6 @@ const roles = {
   create: 'Criar papel',
   role_name: 'Nome do papel',
   role_type: 'Tipo de papel',
-  show_role_type_button_text: 'Mostrar mais opções',
-  hide_role_type_button_text: 'Esconder mais opções',
   type_user: 'Função de usuário',
   type_machine_to_machine: 'Função de aplicação máquina-a-máquina',
   role_description: 'Descrição',

packages/phrases/src/locales/ru/translation/admin-console/roles.ts

@@ -6,8 +6,6 @@ const roles = {
   create: 'Создать роль',
   role_name: 'Имя роли',
   role_type: 'Тип роли',
-  show_role_type_button_text: 'Показать дополнительные варианты',
-  hide_role_type_button_text: 'Скрыть дополнительные варианты',
   type_user: 'Роль пользователя',
   type_machine_to_machine: 'Роль приложения между машинами',
   role_description: 'Описание',

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

@@ -6,8 +6,6 @@ const roles = {
   create: 'Rol Oluştur',
   role_name: 'Rol adı',
   role_type: 'Rol tipi',
-  show_role_type_button_text: 'Daha fazla seçenek göster',
-  hide_role_type_button_text: 'Daha fazla seçeneği gizle',
   type_user: 'Kullanıcı rolü',
   type_machine_to_machine: 'Makine-makine uygulama rolü',
   role_description: 'Açıklama',

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

@@ -6,8 +6,6 @@ const roles = {
   create: '创建角色',
   role_name: '角色名称',
   role_type: '角色类型',
-  show_role_type_button_text: '展示更多选项',
-  hide_role_type_button_text: '隐藏更多选项',
   type_user: '用户角色',
   type_machine_to_machine: '机器对机器应用程序角色',
   role_description: '描述',

packages/phrases/src/locales/zh-hk/translation/admin-console/roles.ts

@@ -6,8 +6,6 @@ const roles = {
   create: '創建角色',
   role_name: '角色名稱',
   role_type: '角色類型',
-  show_role_type_button_text: '顯示更多選項',
-  hide_role_type_button_text: '隱藏更多選項',
   type_user: '用戶角色',
   type_machine_to_machine: '機器到機器應用程式角色',
   role_description: '描述',

packages/phrases/src/locales/zh-tw/translation/admin-console/roles.ts

@@ -6,8 +6,6 @@ const roles = {
   create: '建立角色',
   role_name: '角色名稱',
   role_type: '角色類型',
-  show_role_type_button_text: '顯示更多選項',
-  hide_role_type_button_text: '隱藏更多選項',
   type_user: '使用者角色',
   type_machine_to_machine: '機器對機器應用角色',
   role_description: '描述',