FIO-8366: API key is not unique translation

src/Webform.unit.js

@@ -1270,7 +1270,7 @@ describe('Webform tests', function() {
     .catch((err) => done(err));
   });
 
-  it('Should show validation errors and update validation errors list when opening and editing edit grid rows in draft modal mode after pushing submit btn', function(done) {
+  it('Should show validation errors and update validation errors list when opening and editing edit grid rows in draft modal mode after pushing submit btn',function(done) {
     const formElement = document.createElement('div');
     const formWithDraftModals = new Webform(formElement, { sanitize: true });
 

src/WebformBuilder.js

@@ -1285,14 +1285,10 @@ export default class WebformBuilder extends Component {
 
     this.webform.everyComponent((comp) => {
       const path = comp.path;
-      const errors = comp.visibleErrors || [];
       if (repeatablePaths.includes(path)) {
-        comp.setCustomValidity(`API Key is not unique: ${comp.key}`);
+        comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
         hasInvalidComponents = true;
       }
-      else if (errors.length && errors[0].message?.startsWith('API Key is not unique')) {
-        comp.setCustomValidity('');
-      }
     });
 
     this.emit('builderFormValidityChange', hasInvalidComponents);

src/WebformBuilder.unit.js

@@ -3,7 +3,7 @@ import Harness from '../test/harness';
 import WebformBuilder from './WebformBuilder';
 import Builders from './builders';
 import { Formio } from './Formio';
-import { uniqueApiKeys, uniqueApiKeysLayout, uniqueApiKeysSameLevel, columnsForm, resourceKeyCamelCase } from '../test/formtest';
+import { uniqueApiKeys, uniqueApiKeysLayout, uniqueApiKeysSameLevel, columnsForm, resourceKeyCamelCase, uniqueApiKeysTranslation } from '../test/formtest';
 import sameApiKeysLayoutComps from '../test/forms/sameApiKeysLayoutComps';
 import testApiKeysUniquifying from '../test/forms/testApiKeysUniquifying';
 import formBasedOnWizard from '../test/forms/formBasedOnWizard';
@@ -32,6 +32,27 @@ describe('WebformBuilder tests', function() {
       done();
     }, 500);
   });
+  it('Should show API Key is not unique: {{key}} error when api keys are the same', (done) => {
+    const builder = Harness.getBuilder();
+    builder.i18next.currentLanguage = { apiKey: 'translated api key error {{key}}' };
+    builder.webform.setForm(uniqueApiKeysTranslation).then(()=>{
+      builder.highlightInvalidComponents();
+      const component = builder.webform.getComponent(['textField']);
+      assert.equal(component.visibleErrors.length, 1);
+      done();
+    }).catch(done);
+  });
+
+  it('Should show translated api key error {{key}} when apiKey is overridden in i18next translations', (done) => {
+    const builder = Harness.getBuilder();
+    builder.i18next.currentLanguage = { apiKey: 'translated api key error {{key}}' };
+    builder.webform.setForm(uniqueApiKeysTranslation).then(() => {
+      builder.highlightInvalidComponents();
+      const component = builder.webform.getComponent(['textField']);
+      assert.equal(component.visibleErrors[0].message,'translated api key error textField');
+      done();
+    }).catch(done);
+  });
 
   it('Should not show unique API error when components with same keys are inside and outside of the Data component', (done) => {
     const builder = Harness.getBuilder();

src/components/_classes/component/Component.js

@@ -2133,8 +2133,7 @@ export default class Component extends Element {
   /**
    * Add a new input error to this element.
    *
-   * @param message
-   * @param dirty
+   * @param {{level: string, message: string}[]} messages
    */
   addMessages(messages) {
     if (!messages) {

src/translations/en.js

@@ -71,4 +71,5 @@ export default {
   submitButtonAriaLabel:'Submit Form button. Click to submit the form',
   reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',
   reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
+  apiKey: 'API Key is not unique: {{key}}'
 };

test/formtest/index.d.ts

@@ -1 +1 @@
-export { advanced, basic, data, defaults, layout, premium, settingErrors, clearOnHide, manualOverride, uniqueApiKeys, uniqueApiKeysLayout, uniqueApiKeysSameLevel, validationOnBlur, calculateValueWithManualOverride, calculateValueWithSubmissionMetadata, displayAsModalEditGrid, formWithAdvancedLogic, formWithPatternValidation, calculatedSelectboxes, columnsForm, calculateZeroValue, formWithConditionalLogic, formWithCalculatedValueWithoutOverriding, formWithTimeComponent, formWithEditGridModalDrafts, formWithBlurValidationInsidePanel, modalEditComponents, calculatedNotPersistentValue, calculateValueInEditingMode, initiallyCollapsedPanel, multipleTextareaInsideConditionalComponent, formComponentWithConditionalRenderingForm, disabledNestedForm, propertyActions, formWithEditGridAndNestedDraftModalRow, formWithDateTimeComponents, formWithCollapsedPanel, formWithCustomFormatDate, wizardWithHiddenPanel, wizardWithSimpleConditionalPage, wizardWithTooltip, resourceKeyCamelCase, tooltipActivateCheckbox };
+export { advanced, basic, data, defaults, layout, premium, settingErrors, clearOnHide, manualOverride, uniqueApiKeys, uniqueApiKeysLayout, uniqueApiKeysSameLevel, validationOnBlur, calculateValueWithManualOverride, calculateValueWithSubmissionMetadata, displayAsModalEditGrid, formWithAdvancedLogic, formWithPatternValidation, calculatedSelectboxes, columnsForm, calculateZeroValue, formWithConditionalLogic, formWithCalculatedValueWithoutOverriding, formWithTimeComponent, formWithEditGridModalDrafts, formWithBlurValidationInsidePanel, modalEditComponents, calculatedNotPersistentValue, calculateValueInEditingMode, initiallyCollapsedPanel, multipleTextareaInsideConditionalComponent, formComponentWithConditionalRenderingForm, disabledNestedForm, propertyActions, formWithEditGridAndNestedDraftModalRow, formWithDateTimeComponents, formWithCollapsedPanel, formWithCustomFormatDate, wizardWithHiddenPanel, wizardWithSimpleConditionalPage, wizardWithTooltip, resourceKeyCamelCase, tooltipActivateCheckbox, uniqueApiKeysTranslation };

test/formtest/index.js

@@ -10,6 +10,7 @@ const manualOverride = require('./manualOverride.json');
 const uniqueApiKeys = require('./uniqueApiKeys.json');
 const uniqueApiKeysLayout = require('./uniqueApiKeysLayout.json');
 const uniqueApiKeysSameLevel = require('./uniqueApiKeysSameLevel.json');
+const uniqueApiKeysTranslation = require('./uniqueApiKeysTranslation.json');
 const validationOnBlur = require('./validationOnBlur.json');
 const calculateValueWithManualOverride = require('./calculateValueWithManualOverride.json');
 const calculateValueWithSubmissionMetadata = require('./calculateValueWithSubmissionMetadata.json');
@@ -56,6 +57,7 @@ module.exports = {
   uniqueApiKeys,
   uniqueApiKeysLayout,
   uniqueApiKeysSameLevel,
+  uniqueApiKeysTranslation,
   validationOnBlur,
   calculateValueWithManualOverride,
   calculateValueWithSubmissionMetadata,

test/formtest/uniqueApiKeysTranslation.json

@@ -0,0 +1,53 @@
+{
+  "_id": "6650ac72fab50fab9668c1e8",
+  "title": "uniqueAPIKeysTranslation",
+  "name": "uniqueApiKeysTranslation",
+  "path": "uniqueapikeystranslation",
+  "type": "form",
+  "display": "form",
+  "tags": [],
+  "access": [
+    {
+      "type": "read_all",
+      "roles": [
+        "664ccde9fab50fab9641b6d8",
+        "664ccde9fab50fab9641b6e0",
+        "664ccde9fab50fab9641b6e4"
+      ]
+    }
+  ],
+  "submissionAccess": [],
+  "owner": "659f068baa3ac0e81cf5f6c0",
+  "components": [
+    {
+      "label": "Text Field",
+      "applyMaskOn": "change",
+      "tableView": true,
+      "key": "textField",
+      "type": "textfield",
+      "input": true
+    },
+    {
+      "label": "Text Area",
+      "applyMaskOn": "change",
+      "autoExpand": false,
+      "tableView": true,
+      "key": "textField",
+      "type": "textarea",
+      "input": true
+    }
+  ],
+  "settings": {
+
+  },
+  "properties": {
+
+  },
+  "project": "664ccde8fab50fab9641b6d1",
+  "controller": "",
+  "revisions": "",
+  "submissionRevisions": "",
+  "_vid": 0,
+  "created": "2024-05-24T15:04:18.259Z",
+  "modified": "2024-05-24T15:04:18.261Z"
+}

test/renders/form-bootstrap-readOnly-uniqueApiKeysTranslation.html

@@ -0,0 +1,27 @@
+<div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
+  <div class="formio-form formio-read-only" ref="webform" novalidate>
+    <div id="textField" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-textField " ref="component">
+      <label ref="label" class="col-form-label " for="textField-textField" id="l-textField-textField">
+        Text Field
+      </label>
+      <div ref="element">
+        <input ref="input" name="data[textField]" type="text" class="form-control" lang="en" disabled="disabled" spellcheck="true" value="" id="textField-textField" aria-labelledby="l-textField-textField " aria-required="false"></input>
+      </div>
+      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
+    </div>
+    <div id="textField" class="mb-2 formio-form-group has-feedback formio-component formio-component-textarea formio-component-textField " ref="component">
+      <label ref="label" class="col-form-label " for="textField-textField" id="l-textField-textField">
+        Text Area
+      </label>
+      <div ref="element">
+        <div class="card card-body bg-light mb-3">
+          <div ref="textField">
+            <div ref="input" class="formio-editor-read-only-content"></div>
+          </div>
+        </div>
+      </div>
+      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
+    </div>
+  </div>
+  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
+</div>

test/renders/form-bootstrap-uniqueApiKeysTranslation.html

@@ -0,0 +1,23 @@
+<div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
+  <div class="formio-form" ref="webform" novalidate>
+    <div id="textField" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-textField " ref="component">
+      <label ref="label" class="col-form-label " for="textField-textField" id="l-textField-textField">
+        Text Field
+      </label>
+      <div ref="element">
+        <input ref="input" name="data[textField]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="textField-textField" aria-labelledby="l-textField-textField " aria-required="false"></input>
+      </div>
+      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
+    </div>
+    <div id="textField" class="mb-2 formio-form-group has-feedback formio-component formio-component-textarea formio-component-textField " ref="component">
+      <label ref="label" class="col-form-label " for="textField-textField" id="l-textField-textField">
+        Text Area
+      </label>
+      <div ref="element">
+        <textarea ref="input" name="data[textField]" type="text" class="form-control" lang="en" spellcheck="true" rows="3" id="textField-textField" aria-labelledby="l-textField-textField " aria-required="false"></textarea>
+      </div>
+      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
+    </div>
+  </div>
+  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
+</div>