FIO-7847: Highlight components that have API keys consisting only fro…

src/WebformBuilder.js

@@ -1265,6 +1265,7 @@ export default class WebformBuilder extends Component {
   highlightInvalidComponents() {
     const repeatablePaths = this.findRepeatablePaths();
     let hasInvalidComponents = false;
+    const badCharacters = /^[^A-Za-z_]+|[^A-Za-z0-9\-._]+/g;
 
     this.webform.everyComponent((comp) => {
       const path = comp.path;
@@ -1275,6 +1276,13 @@ export default class WebformBuilder extends Component {
       else if (comp.error?.message?.startsWith('API Key is not unique')) {
         comp.setCustomValidity('');
       }
+
+      if (comp.key.replace(badCharacters, '') === '') {
+        comp.setCustomValidity(`API Key is not valid: ${comp.key}`);
+      }
+      else if (comp.error?.message?.startsWith('API Key is not valid')) {
+        comp.setCustomValidity('');
+      }
     });
 
     this.emit('builderFormValidityChange', hasInvalidComponents);

src/WebformBuilder.unit.js

@@ -3,6 +3,7 @@ import Harness from '../test/harness';
 import WebformBuilder from './WebformBuilder';
 import Builders from './builders';
 import { uniqueApiKeys, uniqueApiKeysLayout, uniqueApiKeysSameLevel, columnsForm, resourceKeyCamelCase } from '../test/formtest';
+import formWithNumericKeys from '../test/forms/formWithNumericKeys';
 import sameApiKeysLayoutComps from '../test/forms/sameApiKeysLayoutComps';
 import testApiKeysUniquifying from '../test/forms/testApiKeysUniquifying';
 import formBasedOnWizard from '../test/forms/formBasedOnWizard';
@@ -42,6 +43,16 @@ describe('WebformBuilder tests', function() {
     }).catch(done);
   });
 
+  it('Should show API error when components have invalid API keys', (done) => {
+    const builder = Harness.getBuilder();
+    builder.webform.setForm(formWithNumericKeys).then(() => {
+      builder.highlightInvalidComponents();
+      const component = builder.webform.components[1];
+      assert.equal(component.errors.length, 1);
+      done();
+    }).catch(done);
+  });
+
   it('Should show unique API error when components inside and outside of the Layout component have same keys', (done) => {
     const builder = Harness.getBuilder();
     builder.webform.setForm(uniqueApiKeysLayout).then(() => {

test/forms/formWithNumericKeys.js

@@ -0,0 +1,30 @@
+export default {
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Text Field',
+      applyMaskOn: 'change',
+      tableView: true,
+      key: 'test',
+      type: 'textfield',
+      input: true,
+    },
+    {
+      label: 'Text Field',
+      applyMaskOn: 'change',
+      tableView: true,
+      key: '1234',
+      type: 'textfield',
+      input: true,
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false,
+    },
+  ],
+};

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, formWithNumericKeys, tooltipActivateCheckbox };

test/formtest/index.js

@@ -87,5 +87,5 @@ module.exports = {
   wizardWithTooltip,
   resourceKeyCamelCase,
   tooltipActivateCheckbox,
-  formWithObjectValueSelect
+  formWithObjectValueSelect,
 };