fix(custom-templates): relax custom template validation and enforce stack name validation [EE-7102] (#11937)

Co-authored-by: testa113 <testa113>

app/kubernetes/react/components/index.ts

@@ -142,7 +142,14 @@ export const ngModule = angular
         ),
         { stackName: 'setStackName' }
       ),
-      ['setStackName', 'stackName', 'stacks', 'inputClassName', 'textTip']
+      [
+        'setStackName',
+        'stackName',
+        'stacks',
+        'inputClassName',
+        'textTip',
+        'error',
+      ]
     )
   )
   .component(

app/kubernetes/views/applications/create/createApplication.html

@@ -172,6 +172,7 @@
                 text-tip="'Enter or select a \'stack\' name to group multiple deployments together, or else leave empty to ignore.'"
                 stacks="ctrl.stacks"
                 input-class-name="'col-lg-10 col-sm-9'"
+                error="ctrl.state.stackNameError"
               ></kube-stack-name>
               <!-- #endregion -->
 
@@ -234,6 +235,7 @@
                     text-tip="'Enter or select a \'stack\' name to group multiple deployments together, or else leave empty to ignore.'"
                     stacks="ctrl.stacks"
                     input-class-name="'col-lg-10 col-sm-9'"
+                    error="ctrl.state.stackNameError"
                   ></kube-stack-name>
                   <!-- #endregion -->
 

app/kubernetes/views/applications/create/createApplicationController.js

@@ -28,6 +28,7 @@ import { confirmUpdateAppIngress } from '@/react/kubernetes/applications/CreateV
 import { confirm, confirmUpdate, confirmWebEditorDiscard } from '@@/modals/confirm';
 import { buildConfirmButton } from '@@/modals/utils';
 import { ModalType } from '@@/modals';
+import { KUBE_STACK_NAME_VALIDATION_REGEX } from '@/react/kubernetes/DeployView/StackName/constants';
 
 class KubernetesCreateApplicationController {
   /* #region  CONSTRUCTOR */
@@ -127,6 +128,7 @@ class KubernetesCreateApplicationController {
       // a validation message will be shown. isExistingCPUReservationUnchanged and isExistingMemoryReservationUnchanged (with available resources being exceeded) is used to decide whether to show the message or not.
       isExistingCPUReservationUnchanged: false,
       isExistingMemoryReservationUnchanged: false,
+      stackNameError: '',
     };
 
     this.isAdmin = this.Authentication.isAdmin();
@@ -186,9 +188,16 @@ class KubernetesCreateApplicationController {
   }
   /* #endregion */
 
-  onChangeStackName(stackName) {
+  onChangeStackName(name) {
     return this.$async(async () => {
-      this.formValues.StackName = stackName;
+      if (KUBE_STACK_NAME_VALIDATION_REGEX.test(name) || name === '') {
+        this.state.stackNameError = '';
+      } else {
+        this.state.stackNameError =
+          "Stack must consist of alphanumeric characters, '-', '_' or '.', must start and end with an alphanumeric character and must be 63 characters or less (e.g. 'my-name', or 'abc-123').";
+      }
+
+      this.formValues.StackName = name;
     });
   }
 
@@ -644,7 +653,8 @@ class KubernetesCreateApplicationController {
     const invalid = !this.isValid();
     const hasNoChanges = this.isEditAndNoChangesMade();
     const nonScalable = this.isNonScalable();
-    return overflow || autoScalerOverflow || inProgress || invalid || hasNoChanges || nonScalable;
+    const stackNameInvalid = this.state.stackNameError !== '';
+    return overflow || autoScalerOverflow || inProgress || invalid || hasNoChanges || nonScalable || stackNameInvalid;
   }
 
   isUpdateApplicationViaWebEditorButtonDisabled() {

app/kubernetes/views/deploy/deploy.html

@@ -90,7 +90,12 @@
                   <div class="w-fit mb-4">
                     <stack-name-label-insight></stack-name-label-insight>
                   </div>
-                  <kube-stack-name stack-name="ctrl.formValues.StackName" set-stack-name="(ctrl.setStackName)" stacks="ctrl.stacks"></kube-stack-name>
+                  <kube-stack-name
+                    stack-name="ctrl.formValues.StackName"
+                    set-stack-name="(ctrl.setStackName)"
+                    stacks="ctrl.stacks"
+                    error="ctrl.state.stackNameError"
+                  ></kube-stack-name>
                 </div>
                 <!-- !namespace -->
 

app/kubernetes/views/deploy/deployController.js

@@ -12,6 +12,7 @@ import { parseAutoUpdateResponse, transformAutoUpdateViewModel } from '@/react/p
 import { baseStackWebhookUrl, createWebhookId } from '@/portainer/helpers/webhookHelper';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
 import { getVariablesFieldDefaultValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
+import { KUBE_STACK_NAME_VALIDATION_REGEX } from '@/react/kubernetes/DeployView/StackName/constants';
 
 class KubernetesDeployController {
   /* @ngInject */
@@ -57,6 +58,7 @@ class KubernetesDeployController {
       templateLoadFailed: false,
       isEditorReadOnly: false,
       selectedHelmChart: '',
+      stackNameError: '',
     };
 
     this.currentUser = {
@@ -117,7 +119,16 @@ class KubernetesDeployController {
   }
 
   setStackName(name) {
-    this.formValues.StackName = name;
+    return this.$async(async () => {
+      if (KUBE_STACK_NAME_VALIDATION_REGEX.test(name) || name === '') {
+        this.state.stackNameError = '';
+      } else {
+        this.state.stackNameError =
+          "Stack must consist of alphanumeric characters, '-', '_' or '.', must start and end with an alphanumeric character and must be 63 characters or less (e.g. 'my-name', or 'abc-123').";
+      }
+
+      this.formValues.StackName = name;
+    });
   }
 
   renderTemplate() {
@@ -197,9 +208,9 @@ class KubernetesDeployController {
     const isWebEditorInvalid = this.state.BuildMethod === KubernetesDeployBuildMethods.WEB_EDITOR && _.isEmpty(this.formValues.EditorContent);
     const isURLFormInvalid = this.state.BuildMethod === KubernetesDeployBuildMethods.URL && _.isEmpty(this.formValues.ManifestURL);
     const isCustomTemplateInvalid = this.state.BuildMethod === KubernetesDeployBuildMethods.CUSTOM_TEMPLATE && _.isEmpty(this.formValues.EditorContent);
-
+    const isStackNameInvalid = this.state.stackNameError !== '';
     const isNamespaceInvalid = _.isEmpty(this.formValues.Namespace);
-    return isWebEditorInvalid || isURLFormInvalid || isCustomTemplateInvalid || this.state.actionInProgress || isNamespaceInvalid;
+    return isWebEditorInvalid || isURLFormInvalid || isCustomTemplateInvalid || this.state.actionInProgress || isNamespaceInvalid || isStackNameInvalid;
   }
 
   onChangeFormValues(newValues) {