FIO-8389 Update package.json with core changes

Changelog.md

@@ -247,8 +247,12 @@ Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/e
  - FIO-7595: fixed incorrect value for conditionally hidden Checkbox
  - FIO-8342: fixed triggering saveDraft after submitting the form
  - FIO-8240: fixed skipDraftRestore effect for the nested Forms
- - FIO-8360 fixed submission state for nested form 
-
+ - FIO-8360 fixed submission state for nested form
+ - FIO-7195: Fixes an issue where Select, Radio and SelectBoxes components with URL DataSource show values instead of labels in modal preview
+ - FIO-8302: Fixed issue with wizard api key overriding window.property objects
+ - FIO-8326: Recaptcha now requires type of event to be selected
+ - FIO-8234: Fixes an issue where Select with Resource data source renders values instead of labels in the read only mode
+ - FIO-8366: API key is not unique translation
 
 ## 5.0.0-rc.37
 ### Fixed

package.json

@@ -77,7 +77,7 @@
   "dependencies": {
     "@formio/bootstrap": "^3.0.0-rc.22",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "^2.1.0-dev.tt.2",
+    "@formio/core": "2.0.0-dev.98.36bb01e",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
@@ -89,7 +89,7 @@
     "core-js": "^3.37.0",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
-    "dompurify": "^3.1.0",
+    "dompurify": "^3.1.1",
     "downloadjs": "^1.4.7",
     "dragula": "^3.7.3",
     "eventemitter3": "^5.0.1",

src/Webform.unit.js

@@ -35,7 +35,7 @@ import {
   formWithCollapsedPanel,
   formWithCustomFormatDate,
   tooltipActivateCheckbox,
-  formWithObjectValueSelect
+  formWithObjectValueSelect,
 } from '../test/formtest';
 import UpdateErrorClassesWidgets from '../test/forms/updateErrorClasses-widgets';
 import nestedModalWizard from '../test/forms/nestedModalWizard';
@@ -78,7 +78,9 @@ import formWithDeeplyNestedConditionalComps from '../test/forms/formWithDeeplyNe
 import formWithValidation from '../test/forms/formWithValidation';
 import formWithNotAllowedTags from '../test/forms/formWithNotAllowedTags';
 import formWithValidateWhenHidden from '../test/forms/formWithValidateWhenHidden';
+import formWithSelectRadioUrlDataSource from '../test/forms/selectRadioUrlDataSource';
 const SpySanitize = sinon.spy(FormioUtils, 'sanitize');
+
 global.requestAnimationFrame = (cb) => cb();
 global.cancelAnimationFrame = () => {};
 
@@ -1270,7 +1272,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 });
 
@@ -4847,6 +4849,66 @@ describe('Webform tests', function() {
     });
   });
 
+  it('Should render labels for Select, Radio and selectBoxes components when Data Source is URL', (done) => {
+    const element = document.createElement('div');
+    const form = new Webform(element);
+    const originalMakeRequest = Formio.makeRequest;
+
+    Formio.makeRequest = function() {
+      return new Promise(resolve => {
+        const values = [
+          { name : 'Alabama', abbreviation : 'AL' },
+          { name : 'Alaska', abbreviation: 'AK' },
+          { name: 'American Samoa', abbreviation: 'AS' }
+        ];
+        resolve(values);
+      });
+    };
+
+    form.setForm(formWithSelectRadioUrlDataSource).then(() => {
+      const selectBoxes = form.getComponent('selectBoxes');
+      const select = form.getComponent('select');
+      const radio = form.getComponent('radio');
+
+      selectBoxes.componentModal.openModal();
+      select.componentModal.openModal();
+      radio.componentModal.openModal();
+
+      setTimeout(() => {
+        form.setSubmission({
+          data: {
+            selectBoxes: { AL: false, AK: true, AS: true },
+            select: 'AL',
+            radio: 'AL',
+          }
+        });
+
+        setTimeout(() => {
+          selectBoxes.componentModal.closeModal();
+          select.componentModal.closeModal();
+          radio.componentModal.closeModal();
+
+          setTimeout(() => {
+            const previewSelectBoxes = selectBoxes.element.querySelector('[ref="openModal"]');
+            const previewSelect = select.element.querySelector('[ref="openModal"]');
+            const previewRadio = radio.element.querySelector('[ref="openModal"]');
+
+            assert.equal(previewSelectBoxes.innerHTML, '\n  <span>Alaska</span>, <span>American Samoa</span>\n', 'Should show labels as a selected value' +
+              ' for SelectBoxes component');
+            assert.equal(previewRadio.innerHTML, '\n  <span>Alabama</span>\n', 'Should show label as a selected value' +
+              ' for Radio component');
+            assert.equal(previewSelect.innerHTML, '\n  <span>Alabama</span>\n', 'Should show label as a selected value' +
+              ' for Select component');
+
+            Formio.makeRequest = originalMakeRequest;
+            done();
+          }, 300);
+        }, 300);
+      }, 300);
+    })
+      .catch((err) => done(err));
+  });
+
   for (const formTest of FormTests) {
     const useDoneInsteadOfPromise = formTest.useDone;
 

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

@@ -8,7 +8,7 @@ import { processOne, processOneSync, validateProcessInfo } from '@formio/core/pr
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
 import {
-  fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone
+  fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone, getScriptPlugin
 } from '../../../utils/utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
@@ -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) {
@@ -3750,7 +3749,7 @@ Component.requireLibrary = function(name, property, src, polling) {
       }.bind(Component.externalLibraries[name]);
     }
     // See if the plugin already exists.
-    const plugin = _.get(window, property);
+    const plugin = getScriptPlugin(property);
     if (plugin) {
       Component.externalLibraries[name].resolve(plugin);
     }
@@ -3795,7 +3794,7 @@ Component.requireLibrary = function(name, property, src, polling) {
       // if no callback is provided, then check periodically for the script.
       if (polling) {
         setTimeout(function checkLibrary() {
-          const plugin = _.get(window, property);
+          const plugin = getScriptPlugin(property);
           if (plugin) {
             Component.externalLibraries[name].resolve(plugin);
           }

src/components/radio/Radio.js

@@ -261,18 +261,21 @@ export default class RadioComponent extends ListComponent {
     return false;
   }
 
-  getValueAsString(value) {
+  getValueAsString(value, options = {}) {
     if (_.isObject(value)) {
       value = JSON.stringify(value);
     }
     else if (!_.isString(value)) {
       value = _.toString(value);
     }
-    if (this.component.dataSrc !== 'values') {
+
+    const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
+    if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
       return value;
     }
 
-    const option = _.find(this.component.values, (v) => v.value === value);
+    const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
+    const option = _.find(values, (v) => v.value === value);
 
     if (!value) {
       return _.get(option, 'label', '');

src/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -15,6 +15,9 @@ export default [
         value: 'buttonClick'
       }
     ],
+    validate: {
+      required: true
+    },
     weight: 650
   },
   {

src/components/select/Select.js

@@ -267,9 +267,10 @@ export default class SelectComponent extends ListComponent {
 
   selectValueAndLabel(data) {
     const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+    const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
     return {
       value,
-      label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
+      label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
     };
   }
 
@@ -1752,6 +1753,11 @@ export default class SelectComponent extends ListComponent {
 
   asString(value, options = {}) {
     value = value ?? this.getValue();
+
+    if (options.modalPreview && this.selectData) {
+      const { label } = this.selectValueAndLabel(value);
+      return label;
+    }
     //need to convert values to strings to be able to compare values with available options that are strings
     const convertToString = (data, valueProperty) => {
       if (valueProperty) {

src/components/select/Select.unit.js

@@ -32,6 +32,7 @@ import {
   comp20,
   comp21,
   comp22,
+  comp23,
 } from './fixtures';
 
 // eslint-disable-next-line max-statements
@@ -1276,5 +1277,69 @@ describe('Select Component with Entire Object Value Property', () => {
       done();
     });
   });
+
+  it('Should render label for Select components when Data Source is Resource in read only mode', (done) => {
+    const element = document.createElement('div');
+    Formio.createForm(element, comp23, { readOnly: true }).then((form) => {
+      const select = form.getComponent('select');
+      form.setSubmission({
+        metadata: {
+          selectData: {
+            select: {
+              data: {
+                textField1: 'A',
+              },
+            },
+          },
+          timezone: 'Europe/Kiev',
+          offset: 180,
+          origin: 'http://localhost:3001',
+          referrer: '',
+          browserName: 'Netscape',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36',
+          pathName: '/',
+          onLine: true,
+          headers: {
+            host: 'qvecgdgwpwujbpi.localhost:3000',
+            connection: 'keep-alive',
+            'content-length': '457',
+            'sec-ch-ua': '"Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"',
+            accept: 'application/json',
+            'content-type': 'application/json',
+            'sec-ch-ua-mobile': '?0',
+            'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36',
+            'sec-ch-ua-platform': '"Windows"',
+            origin: 'http://localhost:3001',
+            'sec-fetch-site': 'cross-site',
+            'sec-fetch-mode': 'cors',
+            'sec-fetch-dest': 'empty',
+            referer: 'http://localhost:3001/',
+            'accept-encoding': 'gzip, deflate, br, zstd',
+            'accept-language': 'en-US,en;q=0.9,ru-RU;q=0.8,ru;q=0.7',
+          },
+        },
+        data: {
+          select: 1,
+          select1: {
+            textField1: 'A',
+            textField2: '1',
+            submit: true,
+          },
+          submit: true,
+        },
+        state: 'submitted',
+      });
+
+      setTimeout(() => {
+        const previewSelect = select.element.querySelector('[aria-selected="true"] span');
+
+        assert.equal(previewSelect.innerHTML, 'A', 'Should show label as a selected value' +
+          ' for Select component');
+
+        done();
+      }, 300);
+    })
+      .catch((err) => done(err));
+  });
 });
 

src/components/select/fixtures/comp23.js

@@ -0,0 +1,38 @@
+export default {
+  title: 'FIO-8234',
+  name: 'fio8234',
+  path: 'fio8234',
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Select',
+      widget: 'choicesjs',
+      tableView: true,
+      dataSrc: 'resource',
+      data: {
+        resource: '665446284c9b0163c3e0c7e6',
+      },
+      template: '<span>{{ item.data.textField1 }}</span>',
+      validate: {
+        select: false,
+      },
+      key: 'select',
+      type: 'select',
+      searchField: 'data.textField2__regex',
+      input: true,
+      noRefreshOnScroll: false,
+      addResource: false,
+      reference: false,
+      valueProperty: 'data.textField2',
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false,
+    },
+  ],
+};