Merge pull request #6730 from weseek/fix/106351-i18n

fix: i18n in Customize Settings

packages/app/src/components/Admin/Customize/CustomizeCssSetting.tsx

@@ -21,7 +21,7 @@ const CustomizeCssSetting = (props: Props): JSX.Element => {
   const onClickSubmit = useCallback(async() => {
     try {
       await adminCustomizeContainer.updateCustomizeCss();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.custom_css') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_css') }));
     }
     catch (err) {
       toastError(err);
@@ -32,12 +32,12 @@ const CustomizeCssSetting = (props: Props): JSX.Element => {
     <React.Fragment>
       <div className="row">
         <div className="col-12">
-          <h2 className="admin-setting-header">{t('admin:customize_setting.custom_css')}</h2>
+          <h2 className="admin-setting-header">{t('admin:customize_settings.custom_css')}</h2>
 
           <Card className="card well my-3">
             <CardBody className="px-0 py-2">
-              { t('admin:customize_setting.write_css') }<br />
-              { t('admin:customize_setting.reflect_change') }
+              { t('admin:customize_settings.write_css') }<br />
+              { t('admin:customize_settings.reflect_change') }
             </CardBody>
           </Card>
 
@@ -50,7 +50,7 @@ const CustomizeCssSetting = (props: Props): JSX.Element => {
             />
             <p className="form-text text-muted text-right">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
-              {t('admin:customize_setting.ctrl_space')}
+              {t('admin:customize_settings.ctrl_space')}
             </p>
           </div>
 

packages/app/src/components/Admin/Customize/CustomizeFunctionSetting.tsx

@@ -25,7 +25,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
 
     try {
       await adminCustomizeContainer.updateCustomizeFunction();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.function') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.function') }));
     }
     catch (err) {
       toastError(err);
@@ -36,10 +36,10 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
     <React.Fragment>
       <div className="row">
         <div className="col-12">
-          <h2 className="admin-setting-header">{t('admin:customize_setting.function')}</h2>
+          <h2 className="admin-setting-header">{t('admin:customize_settings.function')}</h2>
           <Card className="card well my-3">
             <CardBody className="px-0 py-2">
-              {t('admin:customize_setting.function_desc')}
+              {t('admin:customize_settings.function_desc')}
             </CardBody>
           </Card>
 
@@ -48,13 +48,13 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isSavedStatesOfTabChanges"
-                label={t('admin:customize_setting.function_options.tab_switch')}
+                label={t('admin:customize_settings.function_options.tab_switch')}
                 isChecked={adminCustomizeContainer.state.isSavedStatesOfTabChanges}
                 onChecked={() => { adminCustomizeContainer.switchSavedStatesOfTabChanges() }}
               >
                 <p className="form-text text-muted">
-                  {t('admin:customize_setting.function_options.tab_switch_desc1')}<br />
-                  {t('admin:customize_setting.function_options.tab_switch_desc2')}
+                  {t('admin:customize_settings.function_options.tab_switch_desc1')}<br />
+                  {t('admin:customize_settings.function_options.tab_switch_desc2')}
                 </p>
               </CustomizeFunctionOption>
             </div>
@@ -63,41 +63,41 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isEnabledAttachTitleHeader"
-                label={t('admin:customize_setting.function_options.attach_title_header')}
+                label={t('admin:customize_settings.function_options.attach_title_header')}
                 isChecked={adminCustomizeContainer.state.isEnabledAttachTitleHeader}
                 onChecked={() => { adminCustomizeContainer.switchEnabledAttachTitleHeader() }}
               >
                 <p className="form-text text-muted">
-                  {t('admin:customize_setting.function_options.attach_title_header_desc')}
+                  {t('admin:customize_settings.function_options.attach_title_header_desc')}
                 </p>
               </CustomizeFunctionOption>
             </div>
           </div>
 
           <PagingSizeUncontrolledDropdown
-            label={t('admin:customize_setting.function_options.list_num_s')}
-            desc={t('admin:customize_setting.function_options.list_num_desc_s')}
+            label={t('admin:customize_settings.function_options.list_num_s')}
+            desc={t('admin:customize_settings.function_options.list_num_desc_s')}
             toggleLabel={adminCustomizeContainer.state.pageLimitationS || 20}
             dropdownItemSize={[10, 20, 50, 100]}
             onChangeDropdownItem={adminCustomizeContainer.switchPageListLimitationS}
           />
           <PagingSizeUncontrolledDropdown
-            label={t('admin:customize_setting.function_options.list_num_m')}
-            desc={t('admin:customize_setting.function_options.list_num_desc_m')}
+            label={t('admin:customize_settings.function_options.list_num_m')}
+            desc={t('admin:customize_settings.function_options.list_num_desc_m')}
             toggleLabel={adminCustomizeContainer.state.pageLimitationM || 10}
             dropdownItemSize={[5, 10, 20, 50, 100]}
             onChangeDropdownItem={adminCustomizeContainer.switchPageListLimitationM}
           />
           <PagingSizeUncontrolledDropdown
-            label={t('admin:customize_setting.function_options.list_num_l')}
-            desc={t('admin:customize_setting.function_options.list_num_desc_l')}
+            label={t('admin:customize_settings.function_options.list_num_l')}
+            desc={t('admin:customize_settings.function_options.list_num_desc_l')}
             toggleLabel={adminCustomizeContainer.state.pageLimitationL || 50}
             dropdownItemSize={[20, 50, 100, 200]}
             onChangeDropdownItem={adminCustomizeContainer.switchPageListLimitationL}
           />
           <PagingSizeUncontrolledDropdown
-            label={t('admin:customize_setting.function_options.list_num_xl')}
-            desc={t('admin:customize_setting.function_options.list_num_desc_xl')}
+            label={t('admin:customize_settings.function_options.list_num_xl')}
+            desc={t('admin:customize_settings.function_options.list_num_desc_xl')}
             toggleLabel={adminCustomizeContainer.state.pageLimitationXL || 20}
             dropdownItemSize={[5, 10, 20, 50, 100]}
             onChangeDropdownItem={adminCustomizeContainer.switchPageListLimitationXL}
@@ -107,12 +107,12 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isEnabledStaleNotification"
-                label={t('admin:customize_setting.function_options.stale_notification')}
+                label={t('admin:customize_settings.function_options.stale_notification')}
                 isChecked={adminCustomizeContainer.state.isEnabledStaleNotification}
                 onChecked={() => { adminCustomizeContainer.switchEnableStaleNotification() }}
               >
                 <p className="form-text text-muted">
-                  {t('admin:customize_setting.function_options.stale_notification_desc')}
+                  {t('admin:customize_settings.function_options.stale_notification_desc')}
                 </p>
               </CustomizeFunctionOption>
             </div>
@@ -122,12 +122,12 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isAllReplyShown"
-                label={t('admin:customize_setting.function_options.show_all_reply_comments')}
+                label={t('admin:customize_settings.function_options.show_all_reply_comments')}
                 isChecked={adminCustomizeContainer.state.isAllReplyShown || false}
                 onChecked={() => { adminCustomizeContainer.switchIsAllReplyShown() }}
               >
                 <p className="form-text text-muted">
-                  {t('admin:customize_setting.function_options.show_all_reply_comments_desc')}
+                  {t('admin:customize_settings.function_options.show_all_reply_comments_desc')}
                 </p>
               </CustomizeFunctionOption>
             </div>
@@ -137,12 +137,12 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isSearchScopeChildrenAsDefault"
-                label={t('admin:customize_setting.function_options.select_search_scope_children_as_default')}
+                label={t('admin:customize_settings.function_options.select_search_scope_children_as_default')}
                 isChecked={adminCustomizeContainer.state.isSearchScopeChildrenAsDefault || false}
                 onChecked={() => { adminCustomizeContainer.switchIsSearchScopeChildrenAsDefault() }}
               >
                 <p className="form-text text-muted">
-                  {t('admin:customize_setting.function_options.select_search_scope_children_as_default_desc')}
+                  {t('admin:customize_settings.function_options.select_search_scope_children_as_default_desc')}
                 </p>
               </CustomizeFunctionOption>
             </div>

packages/app/src/components/Admin/Customize/CustomizeHeaderSetting.tsx

@@ -21,7 +21,7 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
   const onClickSubmit = useCallback(async() => {
     try {
       await adminCustomizeContainer.updateCustomizeHeader();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.custom_header') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_header') }));
     }
     catch (err) {
       toastError(err);
@@ -32,13 +32,13 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
     <React.Fragment>
       <div className="row">
         <div className="col-12">
-          <h2 className="admin-setting-header">{t('admin:customize_setting.custom_header')}</h2>
+          <h2 className="admin-setting-header">{t('admin:customize_settings.custom_header')}</h2>
 
           <Card className="card well my-3">
             <CardBody className="px-0 py-2">
               <span
                 // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.custom_header_detail') }}
+                dangerouslySetInnerHTML={{ __html: t('admin:customize_settings.custom_header_detail') }}
               />
             </CardBody>
           </Card>
@@ -61,7 +61,7 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
             />
             <p className="form-text text-muted text-right">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
-              {t('admin:customize_setting.ctrl_space')}
+              {t('admin:customize_settings.ctrl_space')}
             </p>
           </div>
           <AdminUpdateButtonRow onClick={onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />

packages/app/src/components/Admin/Customize/CustomizeHighlightSetting.tsx

@@ -59,7 +59,7 @@ const CustomizeHighlightSetting = (props: Props): JSX.Element => {
   const onClickSubmit = useCallback(async() => {
     try {
       await adminCustomizeContainer.updateHighlightJsStyle();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.code_highlight') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.code_highlight') }));
     }
     catch (err) {
       toastError(err);
@@ -90,12 +90,12 @@ const CustomizeHighlightSetting = (props: Props): JSX.Element => {
     <React.Fragment>
       <div className="row">
         <div className="col-12">
-          <h2 className="admin-setting-header">{t('admin:customize_setting.code_highlight')}</h2>
+          <h2 className="admin-setting-header">{t('admin:customize_settings.code_highlight')}</h2>
 
           <div className="form-group row">
             <div className="offset-md-3 col-md-6 text-left">
               <div className="my-0">
-                <label>{t('admin:customize_setting.theme')}</label>
+                <label>{t('admin:customize_settings.theme')}</label>
               </div>
               <Dropdown isOpen={isDropdownOpen} toggle={onToggleDropdown}>
                 <DropdownToggle className="text-right col-6" caret>
@@ -107,7 +107,7 @@ const CustomizeHighlightSetting = (props: Props): JSX.Element => {
               </Dropdown>
               <p className="form-text text-warning">
                 {/* eslint-disable-next-line react/no-danger */}
-                <span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.nocdn_desc') }} />
+                <span dangerouslySetInnerHTML={{ __html: t('admin:customize_settings.nocdn_desc') }} />
               </p>
             </div>
           </div>

packages/app/src/components/Admin/Customize/CustomizeLogoSetting.tsx

@@ -59,7 +59,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
       const { customizedParams } = response.data;
       setIsDefaultLogo(customizedParams.isDefaultLogo);
       setCustomizedLogoSrc(customizedParams.customizedLogoSrc);
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.custom_logo') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_logo') }));
     }
     catch (err) {
       toastError(err);
@@ -70,7 +70,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
     try {
       await apiv3Delete('/customize-setting/delete-brand-logo');
       setCustomizedLogoSrc(null);
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.current_logo') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.current_logo') }));
     }
     catch (err) {
       toastError(err);
@@ -86,7 +86,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
       formData.append('file', croppedImage);
       const { data } = await apiv3PostForm('/customize-setting/upload-brand-logo', formData);
       setCustomizedLogoSrc(data.attachment.filePathProxied);
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.current_logo') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.current_logo') }));
     }
     catch (err) {
       toastError(err);
@@ -100,7 +100,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
       <div className="row">
         <div className="col-12">
           <div className="mb-5">
-            <h2 className="border-bottom my-4 admin-setting-header">{t('admin:customize_setting.custom_logo')}</h2>
+            <h2 className="border-bottom my-4 admin-setting-header">{t('admin:customize_settings.custom_logo')}</h2>
             <div className="row">
               <div className="col-md-6 col-12 mb-3 mb-md-0">
                 <h4>
@@ -115,7 +115,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
                       onChange={() => { setIsDefaultLogo(true) }}
                     />
                     <label className="custom-control-label" htmlFor="radioDefaultLogo">
-                      {t('admin:customize_setting.default_logo')}
+                      {t('admin:customize_settings.default_logo')}
                     </label>
                   </div>
                 </h4>
@@ -134,26 +134,26 @@ const CustomizeLogoSetting = (): JSX.Element => {
                       onChange={() => { setIsDefaultLogo(false) }}
                     />
                     <label className="custom-control-label" htmlFor="radioUploadLogo">
-                      { t('admin:customize_setting.upload_logo') }
+                      { t('admin:customize_settings.upload_logo') }
                     </label>
                   </div>
                 </h4>
                 <div className="row mb-3">
                   <label className="col-sm-4 col-12 col-form-label text-left">
-                    { t('admin:customize_setting.current_logo') }
+                    { t('admin:customize_settings.current_logo') }
                   </label>
                   <div className="col-sm-8 col-12">
                     <p><img src={customizedLogoSrc || DEFAULT_LOGO} className="picture picture-lg " id="settingBrandLogo" width="64" /></p>
                     {(customizedLogoSrc != null) && (
                       <button type="button" className="btn btn-danger" onClick={onClickDeleteBtn}>
-                        { t('admin:customize_setting.delete_logo') }
+                        { t('admin:customize_settings.delete_logo') }
                       </button>
                     )}
                   </div>
                 </div>
                 <div className="row">
                   <label className="col-sm-4 col-12 col-form-label text-left">
-                    { t('admin:customize_setting.upload_new_logo') }
+                    { t('admin:customize_settings.upload_new_logo') }
                   </label>
                   <div className="col-sm-8 col-12">
                     <input type="file" onChange={onSelectFile} name="brandLogo" accept="image/*" />

packages/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -21,7 +21,7 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
   const onClickSubmit = useCallback(async() => {
     try {
       await adminCustomizeContainer.updateCustomizeScript();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.custom_script') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_script') }));
     }
     catch (err) {
       toastError(err);
@@ -40,11 +40,11 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
     <React.Fragment>
       <div className="row">
         <div className="col-12">
-          <h2 className="admin-setting-header">{t('admin:customize_setting.custom_script')}</h2>
+          <h2 className="admin-setting-header">{t('admin:customize_settings.custom_script')}</h2>
           <Card className="card well">
             <CardBody className="px-0 py-2">
-              {t('admin:customize_setting.write_java')}<br />
-              {t('admin:customize_setting.reflect_change')}
+              {t('admin:customize_settings.write_java')}<br />
+              {t('admin:customize_settings.reflect_change')}
             </CardBody>
           </Card>
 
@@ -91,7 +91,7 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
             />
             <p className="form-text text-muted text-right">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
-              {t('admin:customize_setting.ctrl_space')}
+              {t('admin:customize_settings.ctrl_space')}
             </p>
           </div>
 

packages/app/src/components/Admin/Customize/CustomizeThemeSetting.tsx

@@ -35,7 +35,7 @@ const CustomizeThemeSetting = (props: Props): JSX.Element => {
         });
       }
 
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.theme') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.theme') }));
     }
     catch (err) {
       toastError(err);
@@ -45,7 +45,7 @@ const CustomizeThemeSetting = (props: Props): JSX.Element => {
   return (
     <div className="row">
       <div className="col-12">
-        <h2 className="admin-setting-header">{t('admin:customize_setting.theme')}</h2>
+        <h2 className="admin-setting-header">{t('admin:customize_settings.theme')}</h2>
         <CustomizeThemeOptions onSelected={selectedHandler} currentTheme={currentTheme} />
         <AdminUpdateButtonRow onClick={submitHandler} disabled={adminCustomizeContainer.state.retrieveError != null} />
       </div>

packages/app/src/components/Admin/Customize/CustomizeTitle.tsx

@@ -22,7 +22,7 @@ export const CustomizeTitle: FC = () => {
       await apiv3Put('/customize-setting/customize-title', {
         customizeTitle: currentCustomizeTitle,
       });
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.custom_title') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_title') }));
     }
     catch (err) {
       toastError(err);