feat(console,phrases): add permissions tab to the application details page 4-1 (#5211)

feat(console,phrases): add permissions tab to the application details page add permissions tab to the application details page
2025-03-10 22:22:45 -05:00 · 2024-01-16 13:58:47 +08:00 · 2024-01-16 13:58:47 +08:00 · 73b36dcb4d
commit 73b36dcb4d
parent 4e1b8d1d0d
18 changed files with 158 additions and 56 deletions
--- a/packages/console/src/consts/page-tabs.ts
+++ b/packages/console/src/consts/page-tabs.ts
@ -3,6 +3,7 @@ export enum ApplicationDetailsTabs {
  Roles = 'roles',
  Logs = 'logs',
  Branding = 'branding',
+  Permissions = 'permissions',
 }

 export enum ApiResourceDetailsTabs {
--- a/packages/console/src/pages/ApplicationDetails/components/Branding/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/Branding/index.tsx
@ -102,8 +102,8 @@ function Branding({ application }: Props) {
        onSubmit={onSubmit}
      >
        <FormCard
-          title="application_details.branding.branding"
-          description="application_details.branding.branding_description"
+          title="application_details.branding.name"
+          description="application_details.branding.description"
        >
          <FormField title="application_details.branding.display_name">
            <TextInput {...register('displayName')} />
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@ -233,9 +233,14 @@ function ApplicationDetails() {
              </>
            )}
            {isDevFeaturesEnabled && data.isThirdParty && (
-              <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.Branding}`}>
-                {t('application_details.branding.branding')}
-              </TabNavItem>
+              <>
+                <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.Permissions}`}>
+                  {t('application_details.permissions.name')}
+                </TabNavItem>
+                <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.Branding}`}>
+                  {t('application_details.branding.name')}
+                </TabNavItem>
+              </>
            )}
          </TabNav>
          <TabWrapper
@ -276,12 +281,20 @@ function ApplicationDetails() {
          )}

          {isDevFeaturesEnabled && data.isThirdParty && (
-            <TabWrapper
-              isActive={tab === ApplicationDetailsTabs.Branding}
-              className={styles.tabContainer}
-            >
-              <Branding application={data} />
-            </TabWrapper>
+            <>
+              <TabWrapper
+                isActive={tab === ApplicationDetailsTabs.Permissions}
+                className={styles.tabContainer}
+              >
+                <div>Permissions</div>
+              </TabWrapper>
+              <TabWrapper
+                isActive={tab === ApplicationDetailsTabs.Branding}
+                className={styles.tabContainer}
+              >
+                <Branding application={data} />
+              </TabWrapper>
+            </>
          )}
        </>
      )}
--- a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'Gib mindestens eine Umleitungs-URI an',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Rolle',
    description_column: 'Beschreibung',
--- a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
@ -62,9 +62,8 @@ const application_details = {
  application_deleted: 'Application {{name}} has been successfully deleted',
  redirect_uri_required: 'You must enter at least one redirect URI',
  branding: {
-    branding: 'Branding',
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    name: 'Branding',
+    description: "Customize your application's display name and logo on the consent screen.",
    more_info: 'More info',
    more_info_description: 'Offer users more details about your application on the consent screen.',
    display_name: 'Display name',
@ -73,6 +72,11 @@ const application_details = {
    terms_of_use_url: 'Application terms of use URL',
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    name: 'Permissions',
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Role',
    description_column: 'Description',
--- a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'Debes ingresar al menos un URI de Redireccionamiento',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Rol',
    description_column: 'Descripción',
--- a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'Vous devez entrer au moins un URI de redirection.',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Rôle',
    description_column: 'Description',
--- a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'Devi inserire almeno un URI di reindirizzamento',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Ruolo',
    description_column: 'Descrizione',
--- a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'リダイレクトURIを少なくとも1つ入力する必要があります',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: '役割',
    description_column: '説明',
--- a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: '반드시 최소 하나의 Redirect URI 를 입력해야 해요.',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: '역할',
    description_column: '설명',
--- 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
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'Musisz wpisać co najmniej jeden adres URL przekierowania',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Role',
    description_column: 'Opis',
--- 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
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'Você deve inserir pelo menos um URI de redirecionamento',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Função',
    description_column: 'Descrição',
--- 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
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'Deve inserir pelo menos um URI de redirecionamento',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Nome da função',
    description_column: 'Descrição',
--- a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'Вы должны ввести по крайней мере один URI перенаправления',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Роль',
    description_column: 'Описание',
--- 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
@ -69,10 +69,9 @@ const application_details = {
  redirect_uri_required: 'En az 1 yönlendirme URIı girmelisiniz',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -88,6 +87,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: 'Rol',
    description_column: 'Açıklama',
--- 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
@ -66,10 +66,9 @@ const application_details = {
  redirect_uri_required: '至少需要输入一个重定向 URI。',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -85,6 +84,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: '角色',
    description_column: '描述',
--- 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
@ -66,10 +66,9 @@ const application_details = {
  redirect_uri_required: '至少需要輸入一個重定向 URL。',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -85,6 +84,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: '角色',
    description_column: '描述',
--- 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
@ -67,10 +67,9 @@ const application_details = {
  redirect_uri_required: '至少需要輸入一個重定向 URL。',
  branding: {
    /** UNTRANSLATED */
-    branding: 'Branding',
+    name: 'Branding',
    /** UNTRANSLATED */
-    branding_description:
-      "Customize your application's display name and logo on the consent screen.",
+    description: "Customize your application's display name and logo on the consent screen.",
    /** UNTRANSLATED */
    more_info: 'More info',
    /** UNTRANSLATED */
@ -86,6 +85,13 @@ const application_details = {
    /** UNTRANSLATED */
    privacy_policy_url: 'Application privacy policy URL',
  },
+  permissions: {
+    /** UNTRANSLATED */
+    name: 'Permissions',
+    /** UNTRANSLATED */
+    description:
+      'Select the permissions that the third-party application requires for user authorization to access specific data types.',
+  },
  roles: {
    name_column: '角色',
    description_column: '描述',