feat(k8s): better form validation for configuration keys (#4728)

app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html

@@ -52,12 +52,17 @@
       <div
         class="col-sm-11 small text-warning"
         style="margin-top: 5px;"
-        ng-show="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid || $ctrl.state.duplicateKeys[index] !== undefined"
+        ng-show="
+          kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid || $ctrl.state.duplicateKeys[index] !== undefined || $ctrl.state.invalidKeys[index]
+        "
       >
         <ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
           <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
         </ng-messages>
         <p ng-if="$ctrl.state.duplicateKeys[index] !== undefined"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This key is already defined.</p>
+        <p ng-if="$ctrl.state.invalidKeys[index]"
+          ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This key is invalid. A valid key must consist of alphanumeric characters, '-', '_' or '.'</p
+        >
       </div>
     </div>
 

app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationDataController.js

@@ -16,7 +16,8 @@ class KubernetesConfigurationDataController {
 
   onChangeKey() {
     this.state.duplicateKeys = KubernetesFormValidationHelper.getDuplicates(_.map(this.formValues.Data, (data) => data.Key));
-    this.isValid = Object.keys(this.state.duplicateKeys).length === 0;
+    this.state.invalidKeys = KubernetesFormValidationHelper.getInvalidKeys(_.map(this.formValues.Data, (data) => data.Key));
+    this.isValid = Object.keys(this.state.duplicateKeys).length === 0 && Object.keys(this.state.invalidKeys).length === 0;
   }
 
   addEntry() {
@@ -60,6 +61,7 @@ class KubernetesConfigurationDataController {
   $onInit() {
     this.state = {
       duplicateKeys: {},
+      invalidKeys: {},
     };
   }
 }

app/kubernetes/helpers/formValidationHelper.js

@@ -1,6 +1,17 @@
 import _ from 'lodash-es';
 
 class KubernetesFormValidationHelper {
+  static getInvalidKeys(names) {
+    const res = {};
+    _.forEach(names, (name, index) => {
+      const valid = /^[-._a-zA-Z0-9]+$/.test(name);
+      if (!valid) {
+        res[index] = true;
+      }
+    });
+    return res;
+  }
+
   static getDuplicates(names) {
     const groupped = _.groupBy(names);
     const res = {};