Merge pull request #5839 from weseek/feat/fix-grant-alert-i18n-styles

feat: fix grant alert i18n styles

packages/app/resource/locales/en_US/translation.json

@@ -1044,5 +1044,24 @@
     "select_group": "Select group",
     "belonging_to_no_group": "Could not find the groups you belong to.",
     "manage_user_groups": "Manage user groups"
+  },
+  "fix_page_grant": {
+    "modal": {
+      "no_grant_available": "The list of selectable permissions could not be found. Please modify the permissions on the parent page first and try again.",
+      "need_to_fix_grant": "The permissions associated with this page must be modified in order to use the functionality correctly. <br> Please select from the options below to make the change.",
+      "radio_btn": {
+        "restrected": "Only those who know the link",
+        "only_me": "only to oneself",
+        "grant_group": "Only specific groups"
+      },
+      "select_group_default_text": "Select Group",
+      "alert_message_select_group": "No group selected",
+      "btn_label": "Conversion",
+      "title": "Modify authority"
+    },
+    "alert": {
+      "description": "You need to modify the permission settings for this page.",
+      "btn_label": "Revision"
+    }
   }
 }

packages/app/resource/locales/ja_JP/translation.json

@@ -1037,5 +1037,24 @@
     "select_group": "グループを選ぶ",
     "belonging_to_no_group": "所属しているグループが見つかりませんでした。",
     "manage_user_groups": "グループ管理"
+  },
+  "fix_page_grant": {
+    "modal": {
+      "no_grant_available": "選択可能な権限のリストが見つかりませんでした。まず親ページの権限を修正したのちに再試行してください。",
+      "need_to_fix_grant": "正しく機能を使用するためにはこのページに紐づく権限を修正する必要があります。 <br> 下記の選択肢から選んで変更してください。",
+      "radio_btn": {
+        "restrected": "リンクを知っている人のみ",
+        "only_me": "自分のみ",
+        "grant_group": "特定グループのみ"
+      },
+      "select_group_default_text": "グループを選択",
+      "alert_message_select_group": "グループが選択されていません",
+      "btn_label": "変換",
+      "title": "権限を修正"
+    },
+    "alert": {
+      "description": "このページの権限設定を修正する必要があります。",
+      "btn_label": "修正"
+    }
   }
 }

packages/app/resource/locales/zh_CN/translation.json

@@ -1047,5 +1047,24 @@
     "select_group": "选择组别",
     "belonging_to_no_group": "无法找到你所属的团体。",
     "manage_user_groups": "管理用户组"
+  },
+  "fix_page_grant": {
+    "modal": {
+      "no_grant_available": "无法找到可选择的权限列表。 请先修改父页的权限，然后再试一次。",
+      "need_to_fix_grant": "为了正确使用该功能，需要修改与该页面相关的权限。 <br> 请从以下选项中选择进行更改。",
+      "radio_btn": {
+        "restrected": "只有那些知道链接的人",
+        "only_me": "只对自己说",
+        "grant_group": "仅限特定群体"
+      },
+      "select_group_default_text": "选择组别",
+      "alert_message_select_group": "未选择组别",
+      "btn_label": "蜕变",
+      "title": "修改后的授权书"
+    },
+    "alert": {
+      "description": "本页的授权设置需要修改。",
+      "btn_label": "修改"
+    }
   }
 }

packages/app/src/components/Page/FixPageGrantAlert.tsx

@@ -70,8 +70,8 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
 
     if (!isGrantAvailable) {
       return (
-        <p className="mb-2">
-          No grant is available for this page. Please fix the parent page&apos;s grant first.
+        <p className="m-5">
+          { t('fix_page_grant.modal.no_grant_available') }
         </p>
       );
     }
@@ -79,10 +79,9 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
     return (
       <>
         <ModalBody>
-          <div className="form-group grw-scrollable-modal-body">
-            <p className="mb-2">
-              You need to fix the grant of this page. Select new grant from below.
-            </p>
+          <div className="form-group">
+            {/* eslint-disable-next-line react/no-danger */}
+            <p className="mb-2" dangerouslySetInnerHTML={{ __html: t('fix_page_grant.modal.need_to_fix_grant') }} />
             <div className="ml-2">
               <div className="custom-control custom-radio mb-3">
                 <input
@@ -123,34 +122,32 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
                   { t('fix_page_grant.modal.radio_btn.grant_group') }
                 </label>
                 <div className="dropdown ml-2">
-                  <div className="d-flex">
-                    <button
-                      type="button"
-                      className="btn btn-secondary dropdown-toggle text-right w-100 border-0 shadow-none"
-                      data-toggle="dropdown"
-                      disabled={selectedGrant !== PageGrant.GRANT_USER_GROUP} // disable when its radio input is not selected
-                    >
-                      <span className="float-left">
-                        {
-                          selectedGroup == null
-                            ? t('fix_page_grant.modal.select_group_default_text')
-                            : selectedGroup.name
-                        }
-                      </span>
-                    </button>
-                    <div className="dropdown-menu">
+                  <button
+                    type="button"
+                    className="btn btn-secondary dropdown-toggle text-right w-100 border-0 shadow-none"
+                    data-toggle="dropdown"
+                    disabled={selectedGrant !== PageGrant.GRANT_USER_GROUP} // disable when its radio input is not selected
+                  >
+                    <span className="float-left ml-2">
                       {
-                        applicableGroups != null && applicableGroups.map(g => (
-                          <button
-                            className="dropdown-item"
-                            type="button"
-                            onClick={() => setSelectedGroup(g)}
-                          >
-                            {g.name}
-                          </button>
-                        ))
+                        selectedGroup == null
+                          ? t('fix_page_grant.modal.select_group_default_text')
+                          : selectedGroup.name
                       }
-                    </div>
+                    </span>
+                  </button>
+                  <div className="dropdown-menu">
+                    {
+                      applicableGroups != null && applicableGroups.map(g => (
+                        <button
+                          className="dropdown-item"
+                          type="button"
+                          onClick={() => setSelectedGroup(g)}
+                        >
+                          {g.name}
+                        </button>
+                      ))
+                    }
                   </div>
                 </div>
               </div>
@@ -166,7 +163,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
         </ModalBody>
         <ModalFooter>
           <button type="button" className="btn btn-primary" onClick={submit}>
-            { t('fix_page_grant.modal.button_label') }
+            { t('fix_page_grant.modal.btn_label') }
           </button>
         </ModalFooter>
       </>
@@ -204,12 +201,12 @@ const FixPageGrantAlert = (): JSX.Element => {
   return (
     <>
       <div className="alert alert-warning py-3 pl-4 d-flex flex-column flex-lg-row">
-        <div className="flex-grow-1">
+        <div className="flex-grow-1 d-flex align-items-center">
           <i className="icon-fw icon-exclamation ml-1" aria-hidden="true" />
           {t('fix_page_grant.alert.description')}
         </div>
         <div className="d-flex align-items-end align-items-lg-center">
-          <button type="button" className="btn btn-info btn-sm rounded-pill" onClick={() => setOpen(true)}>
+          <button type="button" className="btn btn-info btn-sm rounded-pill px-3" onClick={() => setOpen(true)}>
             {t('fix_page_grant.alert.btn_label')}
           </button>
         </div>