HBW-416 Translate descriptions

CHANGELOG.md

@@ -49,6 +49,11 @@ v2.9 [Unreleased]
 ### Breaking changes
 - [#719](https://github.com/hydra-billing/homs/pull/719) Use REDIS_HOST and REDIS_PORT env variables instead of REDIS_URL for actioncable.
 
+v2.8.12 [Unreleased]
+-------------------
+### Features
+- [#757](https://github.com/hydra-billing/homs/pull/757) Allow to localize description for BP form fields.
+
 v2.8.11 [2024-08-12]
 -------------------
 ### Features

config/locales/bp/ru.test_translations.yml

@@ -6,6 +6,7 @@ ru:
       group: Группа
       selectField:
         label: Поле select
+        description: Описание поля select
         options:
           - Опция1
       anotherSelectField:
@@ -14,26 +15,33 @@ ru:
           - [option_1, Первая опция]
       stringField:
         label: Поле string
+        description: Описание поля string
       stringRegexpField:
         label: Поле string c regexp валидацией
         message: Поле не соответствует regexp
       staticField: <div class="alert alert-success"><h4>Поле static с подстановкой $homsOrderCode</h4></div>
       selectTableField:
         label: Поле select_table
+        description: Описание поля select_table
         header:
           - Колонка 1
       textField:
         label: Поле text
+        description: Описание поля text
       datetimeField:
         label: Поле datetime
+        description: Описание поля datetime
       fileUploadField:
         label: Поле file_upload
+        description: Описание поля file_upload
         input_text: Перенесите файл сюда
         browse_link_text: Прикрепите файлы
       homsOrderDataFileList:
         label: Поле file_list
+        description: Описание поля file_list
       checkboxField:
         label: Поле checkbox
+        description: Описание поля checkbox
       submitSelectButton1:
         label: Кнопка 1
       submitSelectButton2:

hbw/app/javascript/packs/hbw/components/form/checkbox.js.jsx

@@ -70,9 +70,13 @@ modulejs.define('HBWFormCheckbox', ['React'], (React) => {
     }
 
     renderDescription = () => {
-      const { placement, text } = this.props.params.description;
+      const { name, params, task } = this.props;
 
-      return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+      const { placement, text } = params.description;
+
+      const translated = this.context.translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
+
+      return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
     };
 
     serialize = () => {

hbw/app/javascript/packs/hbw/components/form/datetime.js.jsx

@@ -76,9 +76,13 @@ modulejs.define('HBWFormDatetime', ['React'], (React) => {
     }
 
     renderDescription = () => {
-      const { placement, text } = this.props.params.description;
+      const { name, params, task } = this.props;
 
-      return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+      const { placement, text } = params.description;
+
+      const translated = this.context.translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
+
+      return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
     };
 
     componentWillUnmount () {

hbw/app/javascript/packs/hbw/components/form/file_list.tsx

@@ -65,7 +65,9 @@ const HBWFormFileList: React.FC<Props> = ({
   const renderDescription = () => {
     const { placement, text } = params.description;
 
-    return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+    const translated = translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
+
+    return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
   };
 
   const toggleLink = (link: Link) => {

hbw/app/javascript/packs/hbw/components/form/file_upload.js.jsx

@@ -192,9 +192,13 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
     };
 
     renderDescription = () => {
-      const { placement, text } = this.props.params.description;
+      const { name, params, task } = this.props;
+
+      const { placement, text } = params.description;
+
+      const translated = this.context.translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
 
-      return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+      return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
     };
 
     renderInputText = () => {

hbw/app/javascript/packs/hbw/components/form/radio_button.js.jsx

@@ -71,9 +71,13 @@ modulejs.define('HBWFormRadioButton', ['React'], (React) => {
     }
 
     renderDescription = () => {
-      const { placement, text } = this.props.params.description;
+      const { name, params, task } = this.props;
 
-      return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+      const { placement, text } = params.description;
+
+      const translated = this.context.translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
+
+      return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
     };
 
     renderInputs = () => {

hbw/app/javascript/packs/hbw/components/form/select.js.jsx

@@ -197,7 +197,9 @@ modulejs.define(
       const renderDescription = () => {
         const { placement, text } = params.description;
 
-        return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+        const translated = translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
+
+        return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
       };
 
       const buildOptions = () => {

hbw/app/javascript/packs/hbw/components/form/select_table.js.jsx

@@ -120,9 +120,13 @@ modulejs.define(
       }
 
       renderDescription = () => {
-        const { placement, text } = this.props.params.description;
+        const { name, params, task } = this.props;
 
-        return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+        const { placement, text } = params.description;
+
+        const translated = this.context.translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
+
+        return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
       };
 
       validateOnSubmit = () => {

hbw/app/javascript/packs/hbw/components/form/string.js.jsx

@@ -81,9 +81,13 @@ modulejs.define('HBWFormString', ['React'], (React) => {
     }
 
     renderDescription = () => {
-      const { placement, text } = this.props.params.description;
+      const { name, params, task } = this.props;
+
+      const { placement, text } = params.description;
+
+      const translated = this.context.translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
 
-      return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+      return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
     };
 
     componentDidMount () {

hbw/app/javascript/packs/hbw/components/form/text.js.jsx

@@ -53,9 +53,13 @@ modulejs.define('HBWFormText', ['React'], (React) => {
     }
 
     renderDescription = () => {
-      const { placement, text } = this.props.params.description;
+      const { name, params, task } = this.props;
 
-      return <div className="description" data-test={`description-${placement}`}>{text}</div>;
+      const { placement, text } = params.description;
+
+      const translated = this.context.translateBP(`${task.process_key}.${task.key}.${name}.description`, {}, text);
+
+      return <div className="description" data-test={`description-${placement}`}>{translated}</div>;
     };
 
     serialize = () => {

spec/hbw/features/bp_form/translation_mock.yml

@@ -43,6 +43,9 @@ get:
             - name: selectField
               type: select
               label: Select field
+              description: 
+                text: Description of select field
+                placement: top
               nullable: false
               required: true
               choices:
@@ -59,6 +62,9 @@ get:
             - name: stringField
               type: string
               label: String field
+              description: 
+                text: Description of string field
+                placement: top
               required: true
               css_class: col-xs-6 col-sm-4 col-md-3
             - name: stringRegexpField
@@ -75,6 +81,9 @@ get:
             - name: selectTableField
               type: select_table
               label: Select table field
+              description:
+                text: Description of select table field
+                placement: top
               css_class: col-xs-12
               required: true
               nullable: false
@@ -87,11 +96,17 @@ get:
             - name: textField
               type: text
               label: Text field
+              description:
+                text: Description of text field
+                placement: top
               rows: 6
               css_class: col-xs-6
             - name: datetimeField
               type: datetime
               label: Datetime field
+              description:
+                text: Description of datetime field
+                placement: top
               css_class: col-xs-6 col-sm-4 col-md-3
             - name: group
               type: group
@@ -101,16 +116,25 @@ get:
                 - name: fileUploadField
                   type: file_upload
                   label: File upload field
+                  description: 
+                    text: Description of file_upload field
+                    placement: top  
                   css_class: col-md-4 col-xs-4 col-lg-4
                   input_text: Put file here
                   browse_link_text: Upload files
                 - name: homsOrderDataFileList
                   type: file_list
                   label: File list field
+                  description: 
+                    text: Description of file_list field
+                    placement: top
                   css_class: col-md-8 col-xs-8 col-lg-8
             - name: checkboxField
               type: checkbox
               label: Checkbox field
+              description: 
+                text: Description of checkbox field
+                placement: top
               css_class: col-xs-12 col-sm-6 col-md-4
             - name: submitSelectField
               type: submit_select

spec/hbw/features/bp_form/translation_spec.rb

@@ -29,19 +29,27 @@
 
       expect(page).to     have_content 'Поле select'
       expect(page).to     have_content 'Другое поле select'
+      expect(page).to     have_content 'Описание поля select'
       expect(page).to     have_content 'Поле string'
+      expect(page).to     have_content 'Описание поля string'
       expect(page).to     have_content 'Поле string c regexp валидацией'
       expect(page).to     have_content 'Поле static с подстановкой ORD-1'
       expect(page).to     have_content 'Поле select_table'
+      expect(page).to     have_content 'Описание поля select_table'
       expect(page).to     have_content 'Колонка 1'
       expect(page).to     have_content 'Поле text'
+      expect(page).to     have_content 'Описание поля text'
       expect(page).to     have_content 'Поле datetime'
+      expect(page).to     have_content 'Описание поля datetime'
       expect(page).to     have_content 'Группа'
       expect(page).to     have_content 'Поле file_upload'
+      expect(page).to     have_content 'Описание поля file_upload'
       expect(page).to     have_content 'Прикрепите файлы'
       expect(page).to     have_content 'Перенесите файл сюда'
       expect(page).to     have_content 'Поле file_list'
+      expect(page).to     have_content 'Описание поля file_list'
       expect(page).to     have_content 'Поле checkbox'
+      expect(page).to     have_content 'Описание поля checkbox'
       expect(page).to     have_content 'Кнопка 1'
       expect(page).to     have_content 'Кнопка 2'