Merge pull request #9776 from weseek/feat/163553-163560-setup-for-i18n-of-scopes

feat: Setup for i18n of accesstoken scopes

apps/app/public/static/locales/ja_JP/commons.json

@@ -161,5 +161,14 @@
     "transfer_key_limit": "※ 移行キーの有効期限は発行から1時間となります。",
     "once_transfer_key_used": "※ 移行キーは一度移行に利用するとそれ以降はご利用いただけなくなります。",
     "transfer_to_growi_cloud": "※ 詳しくは <a href='{{documentationUrl}}ja/admin-guide/management-cookbook/g2g-transfer.html'> GROWI お引越し機能</a>をご確認ください。"
+  },
+
+  "accesstoken_scopes_desc": {
+    "read":{
+      "all": "全ての閲覧権限を付与できます。",
+      "admin":{
+        "all": "管理者の閲覧権限を付与できます。"
+      }
+    }
   }
 }

apps/app/src/client/components/Me/AccessTokenScopeList.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { useTranslation } from 'next-i18next';
 import type { UseFormRegisterReturn } from 'react-hook-form';
 
 import { useIsDeviceLargerThanMd } from '~/stores/ui';
@@ -28,20 +29,19 @@ export const AccessTokenScopeList: React.FC<AccessTokenScopeListProps> = ({
   scopeObject,
   register,
   disabledScopes,
-  level = 0,
+  level = 1,
 }) => {
 
   const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
 
   // Convert object into an array to determine "first vs. non-first" elements
   const entries = Object.entries(scopeObject);
+  const { t } = useTranslation('commons');
 
   return (
     <>
       {entries.map(([scopeKey, scopeValue], idx) => {
-        // Get indentation class based on level
-        // Example: Insert <hr> only for levels 0 or 1, except for the first item
-        const showHr = (level === 0 || level === 1) && idx !== 0;
+        const showHr = (level === 1 || level === 2) && idx !== 0;
 
         if (typeof scopeValue === 'object') {
           return (
@@ -51,7 +51,6 @@ export const AccessTokenScopeList: React.FC<AccessTokenScopeListProps> = ({
                 <div className="col-md-5 ">
                   <label className={`form-check-label fw-bold indentation indentation-level-${level}`}>{scopeKey}</label>
                 </div>
-                <div className={`col form-text fw-bold ${isDeviceLargerThanMd ? '' : 'text-end'}`}>desc for {scopeKey}</div>
               </div>
 
               {/* Render recursively */}
@@ -80,7 +79,7 @@ export const AccessTokenScopeList: React.FC<AccessTokenScopeListProps> = ({
                 {scopeKey}
               </label>
             </div>
-            <div className={`col form-text ${isDeviceLargerThanMd ? '' : 'text-end'}`}>desc for {scopeKey}</div>
+            <div className={`col form-text ${isDeviceLargerThanMd ? '' : 'text-end'}`}>{t(`accesstoken_scopes_desc.${scopeKey.replace(/:/g, '.')}`)}</div>
           </div>
         );
       })}