fix(custom-templates): add stack validation, remove custom template validation [EE-7102] (#11938)

Co-authored-by: testa113 <testa113>

app/react/common/stacks/CreateView/NameField.tsx

@@ -14,10 +14,12 @@ export function NameField({
   onChange,
   value,
   errors,
+  placeholder,
 }: {
   onChange(value: string): void;
   value: string;
   errors?: FormikErrors<string>;
+  placeholder?: string;
 }) {
   return (
     <FormControl inputId="name-input" label="Name" errors={errors} required>
@@ -25,6 +27,7 @@ export function NameField({
         id="name-input"
         onChange={(e) => onChange(e.target.value)}
         value={value}
+        placeholder={placeholder}
         required
         data-cy="stack-name-input"
       />

app/react/common/stacks/common/form-texts.tsx

@@ -33,7 +33,7 @@ export const textByType = {
             (Deployment, Secret, ConfigMap...)
           </p>
           <p>
-            You can get more information about Kubernetes file format in the
+            You can get more information about Kubernetes file format in the{' '}
             <a
               href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/"
               target="_blank"

app/react/components/CollapseExpandButton.tsx

@@ -22,7 +22,7 @@ export function CollapseExpandButton({
       aria-label={isExpanded ? 'Collapse' : 'Expand'}
       aria-expanded={isExpanded}
       type="button"
-      className="flex-none border-none bg-transparent flex items-center p-0 px-3 group"
+      className="flex-none border-none bg-transparent flex items-center p-0 !ml-0 group"
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
     >

app/react/kubernetes/DeployView/StackName/StackName.tsx

@@ -6,6 +6,7 @@ import { Link } from '@@/Link';
 import { TextTip } from '@@/Tip/TextTip';
 import { Tooltip } from '@@/Tip/Tooltip';
 import { AutocompleteSelect } from '@@/form-components/AutocompleteSelect';
+import { FormError } from '@@/form-components/FormError';
 
 type Props = {
   stackName: string;
@@ -13,6 +14,7 @@ type Props = {
   stacks?: string[];
   inputClassName?: string;
   textTip?: string;
+  error?: string;
 };
 
 export function StackName({
@@ -21,6 +23,7 @@ export function StackName({
   stacks = [],
   inputClassName,
   textTip = "Enter or select a 'stack' name to group multiple deployments together, or else leave empty to ignore.",
+  error = '',
 }: Props) {
   const isAdminQuery = useIsEdgeAdmin();
   const stackResults = useMemo(
@@ -54,9 +57,11 @@ export function StackName({
 
   return (
     <>
-      <TextTip className="mb-4" color="blue">
-        {textTip}
-      </TextTip>
+      {textTip ? (
+        <TextTip className="mb-4" color="blue">
+          {textTip}
+        </TextTip>
+      ) : null}
       <div className="form-group">
         <label
           htmlFor="stack_name"
@@ -77,6 +82,7 @@ export function StackName({
             inputId="stack_name"
             data-cy="k8s-deploy-stack-input"
           />
+          {error ? <FormError>{error}</FormError> : null}
         </div>
       </div>
     </>

app/react/kubernetes/DeployView/StackName/constants.ts

@@ -0,0 +1,4 @@
+// this regex is to satisfy k8s label validation rules
+// alphanumeric, lowercase, uppercase, can contain dashes, dots and underscores, max 63 characters
+export const KUBE_STACK_NAME_VALIDATION_REGEX =
+  /^(([a-zA-Z0-9](?:(?:[-a-zA-Z0-9_.]){0,61}[a-zA-Z0-9])?))$/;

app/react/portainer/custom-templates/components/CommonFields.tsx

@@ -95,14 +95,10 @@ export function CommonFields({
 export function validation({
   currentTemplateId,
   templates = [],
-  viewType = 'docker',
 }: {
   currentTemplateId?: CustomTemplate['Id'];
   templates?: Array<CustomTemplate>;
-  viewType?: 'kube' | 'docker' | 'edge';
 } = {}): SchemaOf<Values> {
-  const titlePattern = titlePatternValidation(viewType);
-
   return object({
     Title: string()
       .required('Title is required.')
@@ -116,31 +112,12 @@ export function validation({
               template.Title === value && template.Id !== currentTemplateId
           )
       )
-      .matches(titlePattern.pattern, titlePattern.error),
+      .max(
+        200,
+        'Custom template title must be less than or equal to 200 characters'
+      ),
     Description: string().required('Description is required.'),
     Note: string().default(''),
     Logo: string().default(''),
   });
 }
-
-export const TEMPLATE_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
-
-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
-
-function titlePatternValidation(type: 'kube' | 'docker' | 'edge') {
-  switch (type) {
-    case 'kube':
-      return {
-        pattern: new RegExp(KUBE_TEMPLATE_NAME_VALIDATION_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').",
-      };
-    default:
-      return {
-        pattern: new RegExp(TEMPLATE_NAME_VALIDATION_REGEX),
-        error:
-          "This field must consist of lower-case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').",
-      };
-  }
-}

app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/MoreSettingsSection.tsx

@@ -6,7 +6,7 @@ import { MetadataFieldset } from './MetadataFieldset';
 
 export function MoreSettingsSection({ children }: PropsWithChildren<unknown>) {
   return (
-    <FormSection title="More settings" isFoldable>
+    <FormSection title="More settings" className="ml-0" isFoldable>
       <div className="ml-8">
         {children}
 

app/react/portainer/templates/custom-templates/CreateView/useValidation.tsx

@@ -72,7 +72,6 @@ export function useValidation({
       }).concat(
         commonFieldsValidation({
           templates: customTemplatesQuery.data,
-          viewType,
         })
       ),
     [

app/react/portainer/templates/custom-templates/EditView/useValidation.tsx

@@ -62,7 +62,6 @@ export function useValidation({
         commonFieldsValidation({
           templates: customTemplatesQuery.data,
           currentTemplateId: templateId,
-          viewType,
         })
       ),
     [

app/react/portainer/templates/custom-templates/ListView/StackFromCustomTemplateFormWidget/DeployForm.tsx

@@ -63,7 +63,7 @@ export function DeployForm({
   const isGit = !!template.GitConfig;
 
   const initialValues: FormValues = {
-    name: template.Title || '',
+    name: '',
     variables: getVariablesFieldDefaultValues(template.Variables),
     accessControl: parseAccessControlFormData(
       isEdgeAdminQuery.isAdmin,
@@ -86,6 +86,7 @@ export function DeployForm({
               value={values.name}
               onChange={(v) => setFieldValue('name', v)}
               errors={errors.name}
+              placeholder="e.g. mystack"
             />
           </FormSection>