chore(console): reorg file structure

packages/console/src/pages/Applications/components/CreateForm/index.tsx → packages/console/src/components/ApplicationCreation/CreateForm/index.tsx

@@ -19,7 +19,7 @@ import * as modalStyles from '@/scss/modal.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
 import { trySubmitSafe } from '@/utils/form';
 
-import TypeDescription from '../TypeDescription';
+import TypeDescription from '../../../pages/Applications/components/TypeDescription';
 
 import Footer from './Footer';
 import * as styles from './index.module.scss';

packages/console/src/pages/Applications/components/ApplicationCreation/index.tsx → packages/console/src/components/ApplicationCreation/index.tsx

@@ -1,22 +1,22 @@
 import { ApplicationType, RoleType, type Application } from '@logto/schemas';
 import { useCallback, useState } from 'react';
 
+import RoleAssignmentModal from '@/components/RoleAssignmentModal';
 import { isDevFeaturesEnabled } from '@/consts/env';
-import AssignToRoleModal from '@/pages/Roles/components/AssignToRoleModal';
 
-import CreateForm, { type Props as CreateApplicationFormProps } from '../CreateForm';
+import CreateForm, { type Props as CreateApplicationFormProps } from './CreateForm';
 
 type Props = Omit<CreateApplicationFormProps, 'onClose'> & {
   /**
-   * The callback function that will be called when the application creation process is finalized.
+   * The callback function that will be called when the application creation process is completed or canceled.
    */
-  readonly onFinalize?: (createdApp?: Application) => void;
+  readonly onCompleted?: (createdApp?: Application) => void;
 };
 
 /**
  * The component for handling application creation (including create an application and setup its permissions if needed).
  */
-function ApplicationCreation({ onFinalize, ...reset }: Props) {
+function ApplicationCreation({ onCompleted, ...reset }: Props) {
   const [createdMachineToMachineApplication, setCreatedMachineToMachineApplication] =
     useState<Application>();
 
@@ -28,14 +28,14 @@ function ApplicationCreation({ onFinalize, ...reset }: Props) {
         return;
       }
 
-      onFinalize?.(createdApp);
+      onCompleted?.(createdApp);
     },
-    [onFinalize]
+    [onCompleted]
   );
 
   if (createdMachineToMachineApplication) {
     return (
-      <AssignToRoleModal
+      <RoleAssignmentModal
         isSkippable
         isMachineToMachineRoleCreationHintVisible
         entity={createdMachineToMachineApplication}
@@ -45,7 +45,7 @@ function ApplicationCreation({ onFinalize, ...reset }: Props) {
           subtitle: 'applications.m2m_role_assignment.subtitle',
         }}
         onClose={() => {
-          onFinalize?.(createdMachineToMachineApplication);
+          onCompleted?.(createdMachineToMachineApplication);
         }}
       />
     );

packages/console/src/pages/Roles/components/AssignToRoleModal/index.tsx → packages/console/src/components/RoleAssignmentModal/index.tsx

@@ -42,7 +42,7 @@ type Props = (
   readonly isMachineToMachineRoleCreationHintVisible?: boolean;
 };
 
-function AssignToRoleModal({
+function RoleAssignmentModal({
   entity,
   onClose,
   type,
@@ -165,4 +165,4 @@ function AssignToRoleModal({
   );
 }
 
-export default AssignToRoleModal;
+export default RoleAssignmentModal;

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/MachineToMachineApplicationRoles/index.tsx

@@ -12,6 +12,7 @@ import MachineToMachineRoleIcon from '@/assets/icons/m2m-role.svg';
 import Plus from '@/assets/icons/plus.svg';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import RoleAssignmentModal from '@/components/RoleAssignmentModal';
 import { defaultPageSize } from '@/consts';
 import Button from '@/ds-components/Button';
 import ConfirmModal from '@/ds-components/ConfirmModal';
@@ -23,7 +24,6 @@ import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
 import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
 import useTheme from '@/hooks/use-theme';
-import AssignToRoleModal from '@/pages/Roles/components/AssignToRoleModal';
 import { buildUrl, formatSearchKeyword } from '@/utils/url';
 
 import * as styles from './index.module.scss';
@@ -176,7 +176,7 @@ function MachineToMachineApplicationRoles({ application }: Props) {
         </ConfirmModal>
       )}
       {isAssignRolesModalOpen && (
-        <AssignToRoleModal
+        <RoleAssignmentModal
           entity={application}
           type={RoleType.MachineToMachine}
           onClose={(success) => {

packages/console/src/pages/Applications/components/GuideLibrary/index.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
 import SearchIcon from '@/assets/icons/search.svg';
+import ApplicationCreation from '@/components/ApplicationCreation';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import FeatureTag from '@/components/FeatureTag';
 import { type SelectedGuide } from '@/components/Guide/GuideCard';
@@ -21,7 +22,6 @@ import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { allAppGuideCategories, type AppGuideCategory } from '@/types/applications';
 import { thirdPartyAppCategory } from '@/types/applications';
 
-import ApplicationCreation from '../ApplicationCreation';
 import ProtectedAppCard from '../ProtectedAppCard';
 
 import * as styles from './index.module.scss';
@@ -70,7 +70,7 @@ function GuideLibrary({ className, hasCardBorder, hasCardButton }: Props) {
     setSelectedGuide(data);
   }, []);
 
-  const onAppCreationFinalize = useCallback(
+  const onAppCreationCompleted = useCallback(
     (newApp?: Application) => {
       if (newApp && selectedGuide) {
         navigate(
@@ -189,7 +189,7 @@ function GuideLibrary({ className, hasCardBorder, hasCardButton }: Props) {
           defaultCreateType={selectedGuide?.target}
           defaultCreateFrameworkName={selectedGuide?.name}
           isDefaultCreateThirdParty={selectedGuide?.isThirdParty}
-          onFinalize={onAppCreationFinalize}
+          onCompleted={onAppCreationCompleted}
         />
       )}
     </OverlayScrollbar>

packages/console/src/pages/Applications/components/GuideLibraryModal/index.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import Modal from 'react-modal';
 
+import ApplicationCreation from '@/components/ApplicationCreation';
 import ModalFooter from '@/components/Guide/ModalFooter';
 import ModalHeader from '@/components/Guide/ModalHeader';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import * as modalStyles from '@/scss/modal.module.scss';
 
-import ApplicationCreation from '../ApplicationCreation';
 import GuideLibrary from '../GuideLibrary';
 
 import * as styles from './index.module.scss';
@@ -48,7 +48,7 @@ function GuideLibraryModal({ isOpen, onClose }: Props) {
       </div>
       {showCreateForm && (
         <ApplicationCreation
-          onFinalize={(newApp) => {
+          onCompleted={(newApp) => {
             if (newApp) {
               navigate(`/applications/${newApp.id}`);
             }

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

@@ -9,6 +9,7 @@ import CreateRoleDark from '@/assets/icons/create-role-dark.svg';
 import CreateRole from '@/assets/icons/create-role.svg';
 import SocialDark from '@/assets/icons/social-dark.svg';
 import Social from '@/assets/icons/social.svg';
+import ApplicationCreation from '@/components/ApplicationCreation';
 import { type SelectedGuide } from '@/components/Guide/GuideCard';
 import GuideCardGroup from '@/components/Guide/GuideCardGroup';
 import { useApiGuideMetadata, useAppGuideMetadata } from '@/components/Guide/hooks';
@@ -25,7 +26,6 @@ import useTheme from '@/hooks/use-theme';
 import useWindowResize from '@/hooks/use-window-resize';
 
 import CreateApiForm from '../ApiResources/components/CreateForm';
-import ApplicationCreation from '../Applications/components/ApplicationCreation';
 
 import ProtectedAppCreationForm from './ProtectedAppCreationForm';
 import * as styles from './index.module.scss';
@@ -71,7 +71,7 @@ function GetStarted() {
     setSelectedGuide(data);
   }, []);
 
-  const onAppCreationFinalize = useCallback(
+  const onAppCreationCompleted = useCallback(
     (newApp?: Application) => {
       if (newApp && selectedGuide) {
         navigate(`/applications/${newApp.id}/guide/${selectedGuide.id}`, { replace: true });
@@ -128,7 +128,7 @@ function GetStarted() {
           <ApplicationCreation
             defaultCreateType={selectedGuide?.target}
             defaultCreateFrameworkName={selectedGuide?.name}
-            onFinalize={onAppCreationFinalize}
+            onCompleted={onAppCreationCompleted}
           />
         )}
         <TextLink to="/applications/create">{t('get_started.view_all')}</TextLink>

packages/console/src/pages/UserDetails/UserRoles/index.tsx

@@ -13,6 +13,7 @@ import UserRoleIconDark from '@/assets/icons/user-role-dark.svg';
 import UserRoleIcon from '@/assets/icons/user-role.svg';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import RoleAssignmentModal from '@/components/RoleAssignmentModal';
 import { defaultPageSize } from '@/consts';
 import Button from '@/ds-components/Button';
 import ConfirmModal from '@/ds-components/ConfirmModal';
@@ -24,7 +25,6 @@ import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
 import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
 import useTheme from '@/hooks/use-theme';
-import AssignToRoleModal from '@/pages/Roles/components/AssignToRoleModal';
 import { buildUrl, formatSearchKeyword } from '@/utils/url';
 
 import type { UserDetailsOutletContext } from '../types';
@@ -172,7 +172,7 @@ function UserRoles() {
         </ConfirmModal>
       )}
       {isAssignRolesModalOpen && (
-        <AssignToRoleModal
+        <RoleAssignmentModal
           entity={user}
           type={RoleType.User}
           onClose={(success) => {

packages/integration-tests/src/tests/console/applications/index.test.ts

@@ -256,7 +256,7 @@ describe('applications', () => {
       if (app.type === ApplicationType.MachineToMachine) {
         await expectModalWithTitle(
           page,
-          'Authorize this app with a machine-to-machine role to protect your API'
+          'Authorize app with machine-to-machine role for permissions'
         );
 
         await expect(page).toClick(

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

@@ -65,8 +65,7 @@ const applications = {
   placeholder_description:
     'Logto verwendet eine Anwendungs-Entität für OIDC, um Aufgaben wie die Identifizierung Ihrer Apps, die Verwaltung der Anmeldung und die Erstellung von Prüfprotokollen zu erleichtern.',
   m2m_role_assignment: {
-    title:
-      'Autorisieren Sie diese App mit einer Maschine-zu-Maschine-Rolle, um Ihre API zu schützen',
+    title: 'App autorisieren mit maschinenbasierten Rollen für Berechtigungen',
     subtitle:
       'Maschine-zu-Maschine-Anwendungen erfordern eine autorisierte Maschine-zu-Maschine-Rolle.',
     role_creation_hint:

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

@@ -54,7 +54,7 @@ const applications = {
   placeholder_description:
     'Logto uses an application entity for OIDC to help with tasks such as identifying your apps, managing sign-in, and creating audit logs.',
   m2m_role_assignment: {
-    title: 'Authorize this app with a machine-to-machine role to protect your API',
+    title: 'Authorize app with machine-to-machine role for permissions',
     subtitle: 'Machine-to-machine applications require authorized machine-to-machine role.',
     role_creation_hint:
       'Doesn’t have a machine-to-machine role? <a>Create a machine-to-machine</a> role first',

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

@@ -65,7 +65,7 @@ const applications = {
   placeholder_description:
     'Logto utiliza una entidad de aplicación para OIDC para ayudar con tareas como la identificación de tus aplicaciones, la gestión de inicio de sesión y la creación de registros de auditoría.',
   m2m_role_assignment: {
-    title: 'Autorice esta aplicación con un rol de máquina a máquina para proteger su API',
+    title: 'Autorizar la aplicación con rol de máquina a máquina para permisos',
     subtitle:
       'Las aplicaciones de máquina a máquina requieren un rol de máquina a máquina autorizado.',
     role_creation_hint:

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

@@ -66,7 +66,7 @@ const applications = {
   placeholder_description:
     "Logto utilise une entité d'application pour OIDC pour aider aux tâches telles que l'identification de vos applications, la gestion de la connexion et la création de journaux d'audit.",
   m2m_role_assignment: {
-    title: 'Autoriser cette application avec un rôle machine à machine pour protéger votre API',
+    title: "Autoriser l'application avec un rôle machine à machine pour les permissions",
     subtitle: 'Les applications machine à machine nécessitent un rôle machine à machine autorisé.',
     role_creation_hint:
       'N’a pas de rôle machine à machine ? <a>Créez d’abord un rôle machine à machine</a>',

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

@@ -65,7 +65,7 @@ const applications = {
   placeholder_description:
     "Logto utilizza un'entità applicazione per OIDC per aiutarti in compiti come l'identificazione delle tue app, la gestione dell'accesso e la creazione di registri di audit.",
   m2m_role_assignment: {
-    title: 'Autorizza questa app con un ruolo da macchina a macchina per proteggere la tua API',
+    title: "Autorizza l'applicazione con ruolo da macchina a macchina per le autorizzazioni",
     subtitle:
       'Le applicazioni da macchina a macchina richiedono un ruolo da macchina a macchina autorizzato.',
     role_creation_hint:

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

@@ -64,7 +64,7 @@ const applications = {
   placeholder_description:
     'LogtoはOIDCのためにアプリケーションエンティティを使用して、アプリケーションの識別、サインインの管理、監査ログの作成などのタスクをサポートします。',
   m2m_role_assignment: {
-    title: 'このアプリをマシン間ロールで承認して API を保護する',
+    title: 'アプリを権限付きのマシン間ロールで認可する',
     subtitle: 'マシン間アプリケーションには承認されたマシン間ロールが必要です。',
     role_creation_hint:
       'マシン間ロールがありませんか？ <a>まずマシン間</a> ロールを作成してください',

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

@@ -64,7 +64,7 @@ const applications = {
   placeholder_description:
     'Logto는 OIDC용 애플리케이션 엔티티를 사용하여 앱 식별, 로그인 관리 및 감사 로그 생성과 같은 작업을 지원합니다.',
   m2m_role_assignment: {
-    title: 'API를 보호하기 위해이 앱을 기계간 역할로 인증합니다',
+    title: '권한을 위해 기계 간 역할로 앱을 인증합니다',
     subtitle: '기계 간 애플리케이션은 인증된 기계 간 역할이 필요합니다.',
     role_creation_hint: '기계 간 역할이 없습니까? <a>먼저 기계 간</a> 역할을 만드십시오',
   },

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

@@ -65,7 +65,7 @@ const applications = {
   placeholder_description:
     'Logto używa jednostki aplikacji dla OIDC, aby pomóc w takich zadaniach jak identyfikowanie Twoich aplikacji, zarządzanie logowaniem i tworzenie dzienników audytu.',
   m2m_role_assignment: {
-    title: 'Autoryzuj tę aplikację za pomocą roli maszyna-do-maszyna, aby chronić swoje API',
+    title: 'Autoryzuj aplikację z rolą maszyny do maszyny dla uprawnień',
     subtitle: 'Aplikacje maszyna-do-maszyna wymagają autoryzowanej roli maszyna-do-maszyna.',
     role_creation_hint:
       'Nie ma roli maszyna-do-maszyna? <a>Najpierw utwórz rolę maszyna-do-maszyna</a>',

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

@@ -65,7 +65,7 @@ const applications = {
   placeholder_description:
     'O Logto usa uma entidade de aplicativo para OIDC para ajudar nas tarefas, como identificar seus aplicativos, gerenciar o login e criar logs de auditoria.',
   m2m_role_assignment: {
-    title: 'Autorize este aplicativo com uma função de máquina para máquina para proteger sua API',
+    title: 'Autorizar aplicativo com função de máquina para máquina para permissões',
     subtitle:
       'Aplicativos de máquina para máquina requerem uma função de máquina para máquina autorizada.',
     role_creation_hint:

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

@@ -64,7 +64,7 @@ const applications = {
   placeholder_description:
     'O Logto usa uma entidade de aplicativo para OIDC para ajudar em tarefas como identificar seus aplicativos, gerenciar o registro e criar registros de auditoria.',
   m2m_role_assignment: {
-    title: 'Autorize esta aplicação com uma função de máquina para máquina para proteger a sua API',
+    title: 'Autorizar aplicação com papel de máquina para máquina para permissões',
     subtitle:
       'Aplicações de máquina para máquina requerem uma função de máquina para máquina autorizada.',
     role_creation_hint:

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

@@ -64,7 +64,7 @@ const applications = {
   placeholder_description:
     'Logto использует сущность приложения для OIDC для выполнения задач, таких как идентификация ваших приложений, управление входом в систему и создание журналов аудита.',
   m2m_role_assignment: {
-    title: 'Авторизуйте это приложение с помощью роли от машины к машине, чтобы защитить ваш API',
+    title: 'Авторизовать приложение с ролью от машины к машине для разрешений',
     subtitle: 'Приложения от машины к машине требуют авторизованной роли от машины к машине.',
     role_creation_hint:
       'У вас нет роли от машины к машине? <a>Сначала создайте роль от машины к машине</a>',

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

@@ -65,7 +65,7 @@ const applications = {
   placeholder_description:
     'Logto, uygulamanızı tanımlamaya, oturum açmayı yönetmeye ve denetim kayıtları oluşturmaya yardımcı olmak için OIDC için bir uygulama varlığı kullanır.',
   m2m_role_assignment: {
-    title: 'API’nızı korumak için bu uygulamayı makine-makine rolüyle yetkilendirin',
+    title: 'İzinler için makineye özel rolle uygulamayı yetkilendir',
     subtitle: 'Makine-makine uygulamaları yetkilendirilmiş bir makine-makine rolü gerektirir.',
     role_creation_hint:
       'Makine-makine rolünüz yok mu? <a>Önce bir makine-makine</a> rolü oluşturun',

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

@@ -63,7 +63,7 @@ const applications = {
   placeholder_description:
     'Logto 使用 OIDC 的应用程序实体来帮助识别你的应用程序、管理登录和创建审计日志等任务。',
   m2m_role_assignment: {
-    title: '使用机器对机器角色授权此应用程序以保护您的 API',
+    title: '使用机器到机器角色授权应用程序以获取权限',
     subtitle: '机器对机器应用程序需要经过授权的机器对机器角色。',
     role_creation_hint: '没有机器对机器角色？先 <a>创建机器对机器</a> 角色',
   },

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

@@ -63,7 +63,7 @@ const applications = {
   placeholder_description:
     'Logto 使用 OIDC 的應用程序實體來幫助識別您的應用程序、管理登錄和創建審計日誌等任務。',
   m2m_role_assignment: {
-    title: '使用機器對機器角色授權此應用程式以保護您的 API',
+    title: '使用機器到機器角色為應用程式授權權限',
     subtitle: '機器對機器應用程式需要經過授權的機器對機器角色。',
     role_creation_hint: '沒有機器對機器角色？先 <a>創建機器對機器</a> 角色',
   },

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

@@ -63,7 +63,7 @@ const applications = {
   placeholder_description:
     'Logto 使用 OIDC 的應用程序實體來幫助識別你的應用程序、管理登入和創建審計日誌等任務。',
   m2m_role_assignment: {
-    title: '使用機器對機器角色授權此應用程式以保護您的 API',
+    title: '使用機器到機器角色為應用程式授權權限',
     subtitle: '機器對機器應用程式需要經過授權的機器對機器角色。',
     role_creation_hint: '沒有機器對機器角色？ 先 <a>創建機器對機器</a> 角色',
   },