Merge branch 'master' of github.com:formio/formio.js into FIO-7544-ht…

…ml-sanitization-issue

Changelog.md

@@ -43,6 +43,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-7112: fixed issues with calendar widget display for value components in new simple conditionals ui
  - FIO-7184 Fixed showing incorrect value for DateTime and Time components with multiple value enabled inside of the DataTable
  - FIO-7553: Changed tooltip text for the Column Properties setting
+ - FIO-7602: fixed submission data for Radio with 0s values
+ - FIO-4235: fixed confirmation dialog popping up when the data is empty in EditGrid
+ - FIO-7577: add skipInEmail comp property to recaptcha
 
 ### Changed
  - Add capability for adding sanitize profiles through sanitizeConfig in options

package.json

@@ -78,7 +78,7 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "^3.0.0-rc.13",
+    "@formio/bootstrap": "^3.0.0-rc.20",
     "@formio/choices.js": "^10.2.0",
     "@formio/core": "1.3.0-rc.16",
     "@formio/text-mask-addons": "^3.8.0-formio.2",

src/components/editgrid/EditGrid.js

@@ -550,7 +550,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         }) => {
           const elements = row.getElementsByClassName(className);
           Array.prototype.forEach.call(elements, (element) => {
-            if (this.options.readOnly && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
+            if (this.options.pdf && _.intersection(element.classList, ['editRow', 'removeRow']).length) {
               element.style.display = 'none';
             }
             else {
@@ -709,6 +709,10 @@ export default class EditGridComponent extends NestedArrayComponent {
     const rowIndex = this.editRows.length;
     const editRow = this.createRow(dataObj, rowIndex);
 
+    if (editRow.state === EditRowState.New) {
+      this.emptyRow = fastCloneDeep(editRow.data);
+    }
+
     if (this.inlineEditMode) {
       this.triggerChange();
     }
@@ -787,7 +791,7 @@ export default class EditGridComponent extends NestedArrayComponent {
 
   showDialog(rowIndex) {
     const editRow = this.editRows[rowIndex];
-    if (_.isEqual(editRow.backup, editRow.data)) {
+    if (editRow.state === EditRowState.New ? _.isEqual(this.emptyRow, editRow.data) : _.isEqual(editRow.backup, editRow.data)) {
       return Promise.resolve();
     }
 

src/components/radio/Radio.js

@@ -407,7 +407,9 @@ export default class RadioComponent extends ListComponent {
       return value;
     }
 
-    if (!isNaN(parseFloat(value)) && isFinite(value)) {
+    const isEquivalent = value.toString() === Number(value).toString();
+
+    if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) {
       value = +value;
     }
     if (value === 'true') {

src/components/radio/Radio.unit.js

@@ -13,7 +13,8 @@ import {
   comp6,
   comp7,
   comp8,
-  comp9
+  comp9,
+  comp10
 } from './fixtures';
 
 describe('Radio Component', () => {
@@ -113,6 +114,23 @@ describe('Radio Component', () => {
     });
   });
 
+  it('Should set correct data for 0s values', (done) => {
+    Harness.testCreate(RadioComponent, comp10).then((component) => {
+      component.setValue('01');
+      component.redraw();
+
+      setTimeout(()=>{
+        assert.equal(component._data.radio, '01');
+        component.setValue(1);
+        component.redraw();
+        setTimeout(()=>{
+          assert.equal(component._data.radio, 1);
+          done();
+        }, 200);
+      }, 200);
+    });
+  });
+
   it('Span should have correct text label', () => {
     return Harness.testCreate(RadioComponent, comp1).then((component) => {
       component.element.querySelectorAll('input').forEach((input) => {

src/components/radio/fixtures/comp10.js

@@ -0,0 +1,21 @@
+export default {
+    'label': 'Radio',
+    'optionsLabelPosition': 'right',
+    'inline': false,
+    'tableView': false,
+    'values': [
+        {
+        'label': '01',
+        'value': '01',
+        'shortcut': ''
+        },
+        {
+        'label': '1',
+        'value': '1',
+        'shortcut': ''
+        }
+    ],
+    'key': 'radio',
+    'type': 'radio',
+    'input': true
+};

src/components/radio/fixtures/index.js

@@ -7,4 +7,5 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9 };
+import comp10 from './comp10';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };

src/components/recaptcha/ReCaptcha.js

@@ -59,6 +59,10 @@ export default class ReCaptchaComponent extends Component {
     return;
   }
 
+  get skipInEmail() {
+    return true;
+  }
+
   verify(actionName) {
     const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
     if (!siteKey) {

src/components/select/Select.js

@@ -3,7 +3,7 @@ import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 
 export default class SelectComponent extends ListComponent {
@@ -1221,10 +1221,10 @@ export default class SelectComponent extends ListComponent {
     return added;
   }
 
-  getValueAsString(data) {
+  getValueAsString(data, options) {
     return (this.component.multiple && Array.isArray(data))
-      ? data.map(this.asString.bind(this)).join(', ')
-      : this.asString(data);
+      ? data.map((v) => this.asString(v, options)).join(', ')
+      : this.asString(data, options);
   }
 
   getValue() {
@@ -1636,7 +1636,7 @@ export default class SelectComponent extends ListComponent {
     );
   }
 
-  asString(value) {
+  asString(value, options = {}) {
     value = value ?? this.getValue();
     //need to convert values to strings to be able to compare values with available options that are strings
     const convertToString = (data, valueProperty) => {
@@ -1697,13 +1697,20 @@ export default class SelectComponent extends ListComponent {
       return value;
     }
 
+    const getTemplateValue = (v) => {
+      const itemTemplate = this.itemTemplate(v);
+      return options.csv && itemTemplate
+        ? unescapeHTML(itemTemplate)
+        : itemTemplate;
+    };
+
     if (Array.isArray(value)) {
       const items = [];
-      value.forEach(item => items.push(this.itemTemplate(item)));
+      value.forEach(item => items.push(getTemplateValue(item)));
       if (this.component.dataSrc === 'resource' &&  items.length > 0 ) {
         return items.join(', ');
       }
-      else if ( items.length > 0) {
+      else if (items.length > 0) {
         return items.join('<br />');
       }
       else {
@@ -1716,7 +1723,7 @@ export default class SelectComponent extends ListComponent {
     }
 
     return !_.isNil(value)
-      ? this.itemTemplate(value)
+      ? getTemplateValue(value)
       : '-';
   }
 

src/components/select/Select.unit.js

@@ -60,6 +60,12 @@ describe('Select Component', () => {
     });
   });
 
+  it('Should return plain text when csv option is provided', () => {
+    return Harness.testCreate(SelectComponent, comp1).then((component) => {
+      assert.equal(component.getView('red', { csv:true }), 'Red');
+    });
+  });
+
   it('should correctly determine storage type when dataType is auto', function(done) {
     Harness.testCreate(SelectComponent, comp4).then((component) => {
       const value = component.normalizeSingleValue('true');

src/components/survey/Survey.js

@@ -179,6 +179,17 @@ export default class SurveyComponent extends Field {
         return result;
     }
 
+    if (_.isPlainObject(value)) {
+      const { values = [], questions = [] } = this.component;
+      return _.isEmpty(value)
+        ? ''
+        : _.map(value,(v, q) => {
+          const valueLabel = _.get(_.find(values, val => _.isEqual(val.value, v)), 'label', v);
+          const questionLabel = _.get(_.find(questions, quest => _.isEqual(quest.value, q)), 'label', q);
+          return `${questionLabel}: ${valueLabel}`;
+        }).join('; ');
+    }
+
     return super.getValueAsString(value, options);
   }
 }

test/forms/helpers/testBasicComponentSettings/values.js

@@ -57,7 +57,7 @@ const stringValues = {
   day: '01/05/2005',
   time: '04:15',
   currency: '$30,000.00',
-  survey: '{"question1":"yes","question2":"no"}',
+  survey: 'Question 1: yes; Question 2: no',
   numberColumn: '1111',
   textFieldColumn: 'value',
   numberFieldset: '222222',

test/renders/component-bootstrap-columns-multiple.html

@@ -1,17 +1,9 @@
 <div id="columns" class="row formio-component formio-component-columns formio-component-columns formio-component-multiple  formio-component-label-hidden" ref="component">
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>

test/renders/component-bootstrap-columns-readOnly.html

@@ -1,17 +1,9 @@
 <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>

test/renders/component-bootstrap-columns-required.html

@@ -1,18 +1,10 @@
 <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
   <label class=" control-label--hidden"></label>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>

test/renders/component-bootstrap-columns.html

@@ -1,17 +1,9 @@
 <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>

test/renders/component-bootstrap-datagrid-readOnly.html

@@ -3,7 +3,7 @@
     Data Grid
   </label>
   <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
     <tbody ref="datagrid-dataGrid-tbody" data-key="datagrid-dataGrid">
       <tr ref="datagrid-dataGrid-row">
       </tr>

test/renders/component-bootstrap-datamap-readOnly.html

@@ -3,7 +3,7 @@
     Data Map
   </label>
   <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
     <thead>
       <tr>
         <th class="">

test/renders/component-bootstrap-file-readOnly.html

@@ -5,8 +5,10 @@
   <ul class="list-group list-group-striped">
     <li class="list-group-item list-group-header hidden-xs hidden-sm">
       <div class="row">
-        <div class="col-md-9"><strong>File Name</strong></div>
+        <div class="col-md-10"><strong>File Name</strong></div>
         <div class="col-md-2"><strong>Size</strong></div>
+        <div class="col-md-0 justify-center">
+        </div>
       </div>
     </li>
   </ul>

test/renders/component-bootstrap-survey-string-value1.html

@@ -1 +1 @@
-{"one":"a","two":"b"}
+one: a; two: b

test/renders/component-bootstrap-survey-string-value2.html

@@ -1 +1 @@
-{"one":"b","two":"a"}
+one: b; two: a

test/renders/form-bootstrap-columnsForm.html

@@ -1,19 +1,11 @@
 <div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
   <div class="formio-form" ref="webform" novalidate>
     <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>