From e539d999f2717b4fa579e33169dd5374e58b6614 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Mon, 22 Jan 2024 11:33:00 +0800
Subject: [PATCH] feat(console,phrases): add application permissions edit modal
 (#5239)

* feat(console,phrases): implement permission edit modal

implement permission edit modal

* fix(console): remove useless undefined type

remove useless undefined type
---
 .../index.tsx                                 | 135 ++++++++++++++++++
 .../Permissions/index.tsx                     |  37 ++++-
 .../Permissions/use-scopes-table.ts           |  63 ++++++--
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   2 +
 .../admin-console/application-details.ts      |   2 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 .../admin-console/api-resource-details.ts     |   4 +
 .../admin-console/application-details.ts      |   3 +
 33 files changed, 322 insertions(+), 15 deletions(-)
 create mode 100644 packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/ApplicationScopesManagementModal/index.tsx

diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/ApplicationScopesManagementModal/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/ApplicationScopesManagementModal/index.tsx
new file mode 100644
index 000000000..810d4e865
--- /dev/null
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/ApplicationScopesManagementModal/index.tsx
@@ -0,0 +1,135 @@
+import { ApplicationUserConsentScopeType } from '@logto/schemas';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import ReactModal from 'react-modal';
+
+import Button from '@/ds-components/Button';
+import DangerousRaw from '@/ds-components/DangerousRaw';
+import FormField from '@/ds-components/FormField';
+import ModalLayout from '@/ds-components/ModalLayout';
+import TextInput from '@/ds-components/TextInput';
+import useActionTranslation from '@/hooks/use-action-translation';
+import useApi from '@/hooks/use-api';
+import * as modalStyles from '@/scss/modal.module.scss';
+import { trySubmitSafe } from '@/utils/form';
+
+import { type ScopesTableRowDataType, type UserScopeTableRowDataType } from '../use-scopes-table';
+
+/**
+ * ApplicationScopesManagementModal
+ *
+ * This modal is used to edit the resource and organization scopes' descriptions.
+ */
+export type EditableScopeData = Exclude<ScopesTableRowDataType, UserScopeTableRowDataType>;
+
+type Props = {
+  scope?: EditableScopeData;
+  onClose: () => void;
+  onSubmit: (scope: EditableScopeData) => void;
+};
+
+function ApplicationScopesManagementModal({ scope, onClose, onSubmit }: Props) {
+  const api = useApi();
+
+  const {
+    reset,
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<EditableScopeData>();
+
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const tAction = useActionTranslation();
+
+  const onSubmitHandler = handleSubmit(trySubmitSafe(onSubmit));
+
+  // Reset form on open
+  useEffect(() => {
+    if (scope) {
+      reset(scope);
+    }
+  }, [reset, scope]);
+
+  return (
+    <ReactModal
+      isOpen={Boolean(scope)}
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={onClose}
+    >
+      {scope && (
+        <ModalLayout
+          title={
+            scope.type === ApplicationUserConsentScopeType.ResourceScopes ? (
+              'api_resource_details.permission.edit_title'
+            ) : (
+              <DangerousRaw>
+                {tAction('edit', 'organizations.organization_permission')}
+              </DangerousRaw>
+            )
+          }
+          subtitle={
+            scope.type === ApplicationUserConsentScopeType.ResourceScopes ? (
+              <DangerousRaw>
+                {t('api_resource_details.permission.edit_subtitle', {
+                  resourceName: scope.resourceName,
+                })}
+              </DangerousRaw>
+            ) : undefined
+          }
+          learnMoreLink={
+            scope.type === ApplicationUserConsentScopeType.ResourceScopes
+              ? {
+                  href: 'https://docs.logto.io/docs/recipes/rbac/manage-permissions-and-roles#manage-role-permissions',
+                  targetBlank: 'noopener',
+                }
+              : undefined
+          }
+          footer={
+            <Button
+              isLoading={isSubmitting}
+              htmlType="submit"
+              type="primary"
+              size="large"
+              title="general.save"
+              onClick={onSubmitHandler}
+            />
+          }
+          onClose={onClose}
+        >
+          <form>
+            <FormField isRequired title="general.name">
+              <TextInput
+                disabled
+                error={Boolean(errors.name)}
+                {...register('name', { required: true })}
+              />
+            </FormField>
+            <FormField
+              title="general.description"
+              isRequired={scope.type === ApplicationUserConsentScopeType.ResourceScopes}
+              tip={t('application_details.permissions.permission_description_tips')}
+            >
+              <TextInput
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus
+                placeholder={
+                  scope.type === ApplicationUserConsentScopeType.ResourceScopes
+                    ? t('api_resource_details.permission.description_placeholder')
+                    : t('organizations.create_permission_placeholder')
+                }
+                error={Boolean(errors.description)}
+                {...register('description', {
+                  required: scope.type === ApplicationUserConsentScopeType.ResourceScopes,
+                })}
+              />
+            </FormField>
+          </form>
+        </ModalLayout>
+      )}
+    </ReactModal>
+  );
+}
+
+export default ApplicationScopesManagementModal;
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.tsx
index fa07bd443..289b5f95f 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.tsx
@@ -1,4 +1,8 @@
-import { type Application, type ApplicationUserConsentScopesResponse } from '@logto/schemas';
+import {
+  type Application,
+  type ApplicationUserConsentScopesResponse,
+  ApplicationUserConsentScopeType,
+} from '@logto/schemas';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
@@ -11,6 +15,9 @@ import Tag from '@/ds-components/Tag';
 import { type RequestError } from '@/hooks/use-api';
 
 import ApplicationScopesAssignmentModal from './ApplicationScopesAssignmentModal';
+import ApplicationScopesManagementModal, {
+  type EditableScopeData,
+} from './ApplicationScopesManagementModal';
 import * as styles from './index.module.scss';
 import useScopesTable from './use-scopes-table';
 
@@ -22,7 +29,9 @@ function Permissions({ application }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const [isAssignScopesModalOpen, setIsAssignScopesModalOpen] = useState(false);
-  const { parseRowGroup, deleteScope } = useScopesTable();
+  const [editScopeModalData, setEditScopeModalData] = useState<EditableScopeData>();
+
+  const { parseRowGroup, deleteScope, editScope } = useScopesTable();
 
   const { data, error, mutate, isLoading } = useSWR<
     ApplicationUserConsentScopesResponse,
@@ -74,9 +83,14 @@ function Permissions({ application }: Props) {
                     delete: 'application_details.permissions.delete_text',
                     deleteConfirmation: 'general.remove',
                   }}
-                  onEdit={() => {
-                    // TODO: Implement edit permission
-                  }}
+                  onEdit={
+                    // UserScopes is not editable
+                    data.type === ApplicationUserConsentScopeType.UserScopes
+                      ? undefined
+                      : () => {
+                          setEditScopeModalData(data);
+                        }
+                  }
                   onDelete={async () => {
                     await deleteScope(data, application.id);
                     void mutate();
@@ -100,6 +114,19 @@ function Permissions({ application }: Props) {
           }}
         />
       )}
+      {data && (
+        <ApplicationScopesManagementModal
+          scope={editScopeModalData}
+          onClose={() => {
+            setEditScopeModalData(undefined);
+          }}
+          onSubmit={async (scope) => {
+            await editScope(scope);
+            void mutate();
+            setEditScopeModalData(undefined);
+          }}
+        />
+      )}
     </>
   );
 }
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.ts b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.ts
index 18cd645a8..1a476d2e1 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.ts
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.ts
@@ -9,13 +9,29 @@ import useApi from '@/hooks/use-api';
 
 import * as styles from './index.module.scss';
 
-type ScopesTableRowDataType = {
-  type: ApplicationUserConsentScopeType;
+export type UserScopeTableRowDataType = {
+  type: ApplicationUserConsentScopeType.UserScopes;
   id: string;
   name: string;
   description?: string;
 };
 
+type OrganizationScopeTableRowDataType = {
+  type: ApplicationUserConsentScopeType.OrganizationScopes;
+} & ApplicationUserConsentScopesResponse['organizationScopes'][number];
+
+type ResourceScopeTableRowDataType = {
+  type: ApplicationUserConsentScopeType.ResourceScopes;
+  // Resource ID is required for resource scope patch request
+  resourceId: string;
+  resourceName: string;
+} & ApplicationUserConsentScopesResponse['resourceScopes'][number]['scopes'][number];
+
+export type ScopesTableRowDataType =
+  | UserScopeTableRowDataType
+  | OrganizationScopeTableRowDataType
+  | ResourceScopeTableRowDataType;
+
 type ScopesTableRowGroupType = {
   key: string;
   label: string;
@@ -54,11 +70,9 @@ const useScopesTable = () => {
         key: ApplicationUserConsentScopeType.OrganizationScopes,
         label: t('application_details.permissions.organization_permissions'),
         labelRowClassName: styles.sectionTitleRow,
-        data: organizationScopes.map(({ id, name, description }) => ({
+        data: organizationScopes.map((scope) => ({
           type: ApplicationUserConsentScopeType.OrganizationScopes,
-          id,
-          name,
-          description: description ?? undefined,
+          ...scope,
         })),
       };
 
@@ -67,11 +81,11 @@ const useScopesTable = () => {
           key: resource.indicator,
           label: resource.name,
           labelRowClassName: styles.sectionTitleRow,
-          data: scopes.map(({ id, name, description }) => ({
+          data: scopes.map((scope) => ({
             type: ApplicationUserConsentScopeType.ResourceScopes,
-            id,
-            name,
-            description,
+            ...scope,
+            resourceId: resource.id,
+            resourceName: resource.name,
           })),
         })
       );
@@ -87,9 +101,38 @@ const useScopesTable = () => {
     [api]
   );
 
+  // Only description is editable
+  const editScope = useCallback(
+    async (scope: ScopesTableRowDataType) => {
+      const { type, id, description } = scope;
+
+      if (type === ApplicationUserConsentScopeType.ResourceScopes) {
+        const { resourceId } = scope;
+
+        await api.patch(`api/resources/${resourceId}/scopes/${id}`, {
+          json: {
+            description,
+          },
+        });
+
+        return;
+      }
+
+      if (type === ApplicationUserConsentScopeType.OrganizationScopes) {
+        await api.patch(`api/organization-scopes/${id}`, {
+          json: {
+            description,
+          },
+        });
+      }
+    },
+    [api]
+  );
+
   return {
     parseRowGroup,
     deleteScope,
+    editScope,
   };
 };
 
diff --git a/packages/phrases/src/locales/de/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/de/translation/admin-console/api-resource-details.ts
index 95f256ae4..be4c91718 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'Berechtigung erstellen',
     create_subtitle: 'Definieren Sie die benötigten Berechtigungen (Bereiche) für diese API.',
     confirm_create: 'Berechtigung erstellen',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'Berechtigungsname',
     name_placeholder: 'read:resource',
     forbidden_space_in_name: 'Der Berechtigungsname darf keine Leerzeichen enthalten.',
diff --git a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
index 4867ea33e..1cb68fbb4 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Rolle',
diff --git a/packages/phrases/src/locales/en/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/en/translation/admin-console/api-resource-details.ts
index 2f942d712..6073e8b11 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,8 @@ const api_resource_details = {
     create_title: 'Create permission',
     create_subtitle: 'Define the permissions (scopes) needed by this API.',
     confirm_create: 'Create permission',
+    edit_title: 'Edit API permission',
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'Permission name',
     name_placeholder: 'read:resource',
     forbidden_space_in_name: 'The permission name must not contain any spaces.',
diff --git a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
index 7d07ad3c7..832ca099d 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
@@ -117,6 +117,8 @@ const application_details = {
     user_permissions_assignment_form_title: 'Add the user profile permissions',
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Role',
diff --git a/packages/phrases/src/locales/es/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/es/translation/admin-console/api-resource-details.ts
index d23232157..359ae729f 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'Crear permiso',
     create_subtitle: 'Define los permisos (scopes) necesarios para esta API.',
     confirm_create: 'Crear permiso',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'Nombre del permiso',
     name_placeholder: 'leer:recurso',
     forbidden_space_in_name: 'El nombre del permiso no debe contener espacios.',
diff --git a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
index bd2b9bfaf..183e49091 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Rol',
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/api-resource-details.ts
index ca648964d..410c17140 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'Créer une autorisation',
     create_subtitle: 'Définir les autorisations (scopes) requises pour cette API.',
     confirm_create: 'Créer une autorisation',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: "Nom de l'autorisation",
     name_placeholder: 'lecture:ressource',
     forbidden_space_in_name: "Le nom de l'autorisation ne doit pas contenir d'espaces.",
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
index f9a5a5054..51400acdf 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Rôle',
diff --git a/packages/phrases/src/locales/it/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/it/translation/admin-console/api-resource-details.ts
index 1b0cd9050..29aff823d 100644
--- a/packages/phrases/src/locales/it/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'crea autorizzazione',
     create_subtitle: 'Definire le autorizzazioni (ambiti) necessarie per questa API.',
     confirm_create: 'Crea autorizzazione',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'Nome autorizzazione',
     name_placeholder: 'lettura:risorsa',
     forbidden_space_in_name: "Il nome dell'autorizzazione non deve contenere spazi.",
diff --git a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
index 96caa2887..dd20d244f 100644
--- a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Ruolo',
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/api-resource-details.ts
index d7d1e301f..4b683109f 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: '権限の作成',
     create_subtitle: 'このAPIで必要な権限（スコープ）を定義します。',
     confirm_create: '権限を作成',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: '権限名',
     name_placeholder: 'read:resource',
     forbidden_space_in_name: '権限名にはスペースを含めることはできません。',
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
index 52c2fff6f..128195a13 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: '役割',
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/api-resource-details.ts
index 26eafba3a..eecf097c6 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: '권한 생성',
     create_subtitle: '이 API에 필요한 권한을 정의합니다.',
     confirm_create: '권한 생성',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: '권한 이름',
     name_placeholder: 'read:resource',
     forbidden_space_in_name: '권한 이름에는 공백을 포함할 수 없습니다.',
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
index 8d8ac9673..184bfd116 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: '역할',
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/api-resource-details.ts
index 3bc83cbf1..e24936fe4 100644
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'Utwórz uprawnienie',
     create_subtitle: 'Zdefiniuj uprawnienia (zakresy) wymagane przez to API.',
     confirm_create: 'Utwórz uprawnienie',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'Nazwa uprawnienia',
     name_placeholder: 'ready:resource',
     forbidden_space_in_name: 'Nazwa uprawnienia nie może zawierać spacji.',
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts
index 35efea636..0492fe01a 100644
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Role',
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/api-resource-details.ts
index da206fa29..53162a0f9 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'Criar permissão',
     create_subtitle: 'Define as permissões (escopos) necessárias para esta API.',
     confirm_create: 'Criar permissão',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'Nome da permissão',
     name_placeholder: 'ler:recurso',
     forbidden_space_in_name: 'O nome da permissão não deve conter espaços.',
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts
index c2a96f6e8..d10e81439 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Função',
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/api-resource-details.ts
index 320886e42..81c95099e 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'Criar permissão',
     create_subtitle: 'Define as permissões (escopos) necessários para essa API.',
     confirm_create: 'Criar permissão',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'Nome da permissão',
     name_placeholder: 'leitura:recurso',
     forbidden_space_in_name: 'O nome da permissão não pode conter espaços.',
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts
index 91190b1d5..be4ef4ec1 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Nome da função',
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/api-resource-details.ts
index f4816e0eb..387873604 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'Создать разрешение',
     create_subtitle: 'Определите необходимые разрешения (области) для этого API.',
     confirm_create: 'Создать разрешение',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'Название разрешения',
     name_placeholder: 'read:resource',
     forbidden_space_in_name: 'Название разрешения не должно содержать пробелов.',
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
index 780f8e0b9..41384109d 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Роль',
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/api-resource-details.ts
index f2f9fbed0..e15d0d97c 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: 'İzin Oluştur',
     create_subtitle: 'Bu API tarafından gerektirilen izinleri (kapsamları) tanımlayın.',
     confirm_create: 'İzin Oluştur',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: 'İzin adı',
     name_placeholder: 'read:kaynak',
     forbidden_space_in_name: 'İzin adı boşluk içermemelidir.',
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
index 38e6fc3a4..24f5cc2bb 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
@@ -166,6 +166,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: 'Rol',
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/api-resource-details.ts
index 28183734b..4909a1772 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: '创建权限',
     create_subtitle: '定义此 API 所需的权限 (scope)。',
     confirm_create: '创建权限',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: '权限名称',
     name_placeholder: 'read:resource',
     forbidden_space_in_name: '权限名称不能包含空格。',
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
index 5361e8c9c..b97a591e8 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
@@ -163,6 +163,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: '角色',
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/api-resource-details.ts
index e9171d001..4e48a87be 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: '創建權限',
     create_subtitle: '定義此 API 所需的權限 (scope)。',
     confirm_create: '創建權限',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: '權限名稱',
     name_placeholder: 'read:resource',
     forbidden_space_in_name: '權限名稱不能包含空格。',
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts
index 3071aec38..88159905d 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts
@@ -163,6 +163,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: '角色',
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/api-resource-details.ts
index c75d659bf..99623a4e2 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/api-resource-details.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/api-resource-details.ts
@@ -21,6 +21,10 @@ const api_resource_details = {
     create_title: '建立權限',
     create_subtitle: '定義此 API 所需的權限 (scope)。',
     confirm_create: '建立權限',
+    /** UNTRANSLATED */
+    edit_title: 'Edit API permission',
+    /** UNTRANSLATED */
+    edit_subtitle: 'Define the permissions (scopes) needed by the {{resourceName}} API.',
     name: '權限名稱',
     name_placeholder: 'read:resource',
     forbidden_space_in_name: '權限名稱不能包含空格。',
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts
index b0c07ea16..34b7408d5 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts
@@ -164,6 +164,9 @@ const application_details = {
     organization_permissions_assignment_form_title: 'Add the organization permissions',
     /** UNTRANSLATED */
     api_resource_permissions_assignment_form_title: 'Add the API resource permissions',
+    /** UNTRANSLATED */
+    permission_description_tips:
+      'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.',
   },
   roles: {
     name_column: '角色',