From 861a9a5bbb7cbb826fa9bcc01b46bea52975ea12 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Fri, 21 Apr 2023 09:39:55 +1200
Subject: [PATCH] fix(templates): update name validation [EE-5344] (#8760)

Co-authored-by: testa113 <testa113>
---
 app/constants.ts                                          | 2 ++
 .../kube-create-custom-template-view.controller.js        | 2 ++
 .../kube-create-custom-template-view.html                 | 6 +++++-
 .../kube-edit-custom-template-view.controller.js          | 2 ++
 .../kube-edit-custom-template-view.html                   | 6 +++++-
 .../customTemplateCommonFields.html                       | 2 +-
 .../components/custom-template-common-fields/index.js     | 1 +
 .../createCustomTemplateView.html                         | 1 +
 .../edit-custom-template-view/editCustomTemplateView.html | 8 +++++++-
 .../editCustomTemplateViewController.js                   | 2 ++
 10 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/app/constants.ts b/app/constants.ts
index b09190cd6..2dbcd1153 100644
--- a/app/constants.ts
+++ b/app/constants.ts
@@ -28,3 +28,5 @@ export const PREDEFINED_NETWORKS = ['host', 'bridge', 'ingress', 'nat', 'none'];
 export const PORTAINER_FADEOUT = 1500;
 export const STACK_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
 export const TEMPLATE_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
+export const KUBE_TEMPLATE_NAME_VALIDATION_REGEX =
+  '^(([a-z0-9](?:(?:[-a-z0-9_.]){0,61}[a-z0-9])?))$'; // alphanumeric, lowercase, can contain dashes, dots and underscores, max 63 characters
diff --git a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js
index 84353e574..3e6632b9b 100644
--- a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js
+++ b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js
@@ -3,6 +3,7 @@ import { getTemplateVariables, intersectVariables } from '@/react/portainer/cust
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { editor, upload, git } from '@@/BoxSelector/common-options/build-methods';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
+import { KUBE_TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
 
 class KubeCreateCustomTemplateViewController {
   /* @ngInject */
@@ -20,6 +21,7 @@ class KubeCreateCustomTemplateViewController {
       formValidationError: '',
       isEditorDirty: false,
       isTemplateValid: true,
+      templateNameRegex: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
     };
 
     this.formValues = {
diff --git a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html
index c68dcf8ca..2e25b8ead 100644
--- a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html
+++ b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html
@@ -5,7 +5,11 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="$ctrl.form">
-          <custom-template-common-fields form-values="$ctrl.formValues"></custom-template-common-fields>
+          <custom-template-common-fields
+            form-values="$ctrl.formValues"
+            name-regex="$ctrl.state.templateNameRegex"
+            name-regex-error="'This field must consist of lower-case 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\').'"
+          ></custom-template-common-fields>
 
           <!-- build-method -->
           <div class="col-sm-12 form-section-title"> Build method </div>
diff --git a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js
index a9b7d4ceb..d889abb68 100644
--- a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js
+++ b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js
@@ -4,6 +4,7 @@ import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
 import { getFilePreview } from '@/react/portainer/gitops/gitops.service';
+import { KUBE_TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
 
 class KubeEditCustomTemplateViewController {
   /* @ngInject */
@@ -24,6 +25,7 @@ class KubeEditCustomTemplateViewController {
       templateLoadFailed: false,
       templatePreviewFailed: false,
       templatePreviewError: '',
+      templateNameRegex: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
     };
     this.templates = [];
 
diff --git a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html
index 098f85e44..353cc3f2e 100644
--- a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html
+++ b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html
@@ -5,7 +5,11 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="$ctrl.form">
-          <custom-template-common-fields form-values="$ctrl.formValues"></custom-template-common-fields>
+          <custom-template-common-fields
+            form-values="$ctrl.formValues"
+            name-regex="$ctrl.state.templateNameRegex"
+            name-regex-error="'This field must consist of lower-case 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\').'"
+          ></custom-template-common-fields>
 
           <git-form value="$ctrl.formValues" on-change="($ctrl.handleChange)" ng-if="$ctrl.formValues.GitConfig"></git-form>
 
diff --git a/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html b/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
index f9561dd02..f21ce56a9 100644
--- a/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
+++ b/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
@@ -21,7 +21,7 @@
               <p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Title is required. </p>
               <p class="vertical-center" ng-message="pattern">
                 <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
-                This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').
+                {{ $ctrl.nameRegexError }}
               </p>
             </div>
           </div>
diff --git a/app/portainer/components/custom-template-common-fields/index.js b/app/portainer/components/custom-template-common-fields/index.js
index 2c78b25d9..a1acca346 100644
--- a/app/portainer/components/custom-template-common-fields/index.js
+++ b/app/portainer/components/custom-template-common-fields/index.js
@@ -8,5 +8,6 @@ angular.module('portainer.app').component('customTemplateCommonFields', {
     showPlatformField: '<',
     showTypeField: '<',
     nameRegex: '<',
+    nameRegexError: '<',
   },
 });
diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
index a7f519f0c..5c631880c 100644
--- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
+++ b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
@@ -10,6 +10,7 @@
             show-platform-field="true"
             show-type-field="true"
             name-regex="$ctrl.state.templateNameRegex"
+            name-regex-error="'This field must consist of lower-case alphanumeric characters, \'_\' or \'-\' (e.g. \'my-name\', or \'abc-123\').'"
           ></custom-template-common-fields>
 
           <!-- build-method -->
diff --git a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
index 4028d85f8..39cfc3a00 100644
--- a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
+++ b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
@@ -5,7 +5,13 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="customTemplateForm">
-          <custom-template-common-fields form-values="$ctrl.formValues" show-platform-field="true" show-type-field="true"></custom-template-common-fields>
+          <custom-template-common-fields
+            form-values="$ctrl.formValues"
+            show-platform-field="true"
+            show-type-field="true"
+            name-regex="$ctrl.state.templateNameRegex"
+            name-regex-error="'This field must consist of lower-case alphanumeric characters, \'_\' or \'-\' (e.g. \'my-name\', or \'abc-123\').'"
+          ></custom-template-common-fields>
 
           <git-form value="$ctrl.formValues" on-change="($ctrl.handleChange)" ng-if="$ctrl.formValues.GitConfig"></git-form>
 
diff --git a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
index f30fc8d9b..a7a27b60f 100644
--- a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
+++ b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { getFilePreview } from '@/react/portainer/gitops/gitops.service';
 import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
+import { TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
 
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';
@@ -26,6 +27,7 @@ class EditCustomTemplateViewController {
       templateLoadFailed: false,
       templatePreviewFailed: false,
       templatePreviewError: '',
+      templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
     };
     this.templates = [];