fix(templates): update name validation [EE-5344] (#8760)

Co-authored-by: testa113 <testa113>

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

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 = {

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>

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 = [];
 

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>
 

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>

app/portainer/components/custom-template-common-fields/index.js

@@ -8,5 +8,6 @@ angular.module('portainer.app').component('customTemplateCommonFields', {
     showPlatformField: '<',
     showTypeField: '<',
     nameRegex: '<',
+    nameRegexError: '<',
   },
 });

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 -->

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>
 

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 = [];