fix(gitops): manifest validation warning [EE-6859] (#11664)

app/portainer/components/forms/git-form/git-form.controller.ts

@@ -1,7 +1,7 @@
 import { IFormController } from 'angular';
 import { FormikErrors } from 'formik';
 
-import { GitFormModel } from '@/react/portainer/gitops/types';
+import { DeployMethod, GitFormModel } from '@/react/portainer/gitops/types';
 import { validateGitForm } from '@/react/portainer/gitops/GitForm';
 import { notifyError } from '@/portainer/services/notifications';
 import { IAuthenticationService } from '@/portainer/services/types';
@@ -26,6 +26,8 @@ export default class GitFormController {
 
   createdFromCustomTemplateId?: number;
 
+  deployMethod?: DeployMethod;
+
   /* @ngInject */
   constructor(
     $async: <T>(fn: () => Promise<T>) => Promise<T>,
@@ -67,7 +69,8 @@ export default class GitFormController {
       this.errors = await validateGitForm(
         this.gitCredentials,
         value,
-        isCreatedFromCustomTemplate
+        isCreatedFromCustomTemplate,
+        this.deployMethod
       );
       if (this.errors && Object.keys(this.errors).length > 0) {
         this.gitForm?.$setValidity('gitForm', false, this.gitForm);

app/react/portainer/gitops/GitForm.stories.tsx

@@ -6,7 +6,7 @@ import { withUserProvider } from '@/react/test-utils/withUserProvider';
 import { GitCredential } from '@/react/portainer/account/git-credentials/types';
 
 import { GitForm, buildGitValidationSchema } from './GitForm';
-import { GitFormModel } from './types';
+import { DeployMethod, GitFormModel } from './types';
 
 export default {
   component: GitForm,
@@ -45,7 +45,7 @@ interface Args {
   isAdditionalFilesFieldVisible: boolean;
   isAuthExplanationVisible: boolean;
   isDockerStandalone: boolean;
-  deployMethod: 'compose' | 'manifest';
+  deployMethod: DeployMethod;
   isForcePullVisible: boolean;
 }
 
@@ -73,7 +73,7 @@ export function Primary({
   return (
     <Formik
       initialValues={initialValues}
-      validationSchema={() => buildGitValidationSchema([], false)}
+      validationSchema={() => buildGitValidationSchema([], false, 'compose')}
       onSubmit={() => {}}
     >
       {({ values, errors, setValues }) => (

app/react/portainer/gitops/GitForm.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { ComposePathField } from '@/react/portainer/gitops/ComposePathField';
 import { RefField } from '@/react/portainer/gitops/RefField';
 import { GitFormUrlField } from '@/react/portainer/gitops/GitFormUrlField';
-import { GitFormModel } from '@/react/portainer/gitops/types';
+import { DeployMethod, GitFormModel } from '@/react/portainer/gitops/types';
 import { TimeWindowDisplay } from '@/react/portainer/gitops/TimeWindowDisplay';
 
 import { FormSection } from '@@/form-components/FormSection';
@@ -24,7 +24,7 @@ interface Props {
   value: GitFormModel;
   onChange: (value: Partial<GitFormModel>) => void;
   environmentType?: 'DOCKER' | 'KUBERNETES' | undefined;
-  deployMethod?: 'compose' | 'manifest';
+  deployMethod?: DeployMethod;
   isDockerStandalone?: boolean;
   isAdditionalFilesFieldVisible?: boolean;
   isForcePullVisible?: boolean;
@@ -142,17 +142,24 @@ export function GitForm({
 export async function validateGitForm(
   gitCredentials: Array<GitCredential>,
   formValues: GitFormModel,
-  isCreatedFromCustomTemplate: boolean
+  isCreatedFromCustomTemplate: boolean,
+  deployMethod: DeployMethod = 'compose'
 ) {
   return validateForm<GitFormModel>(
-    () => buildGitValidationSchema(gitCredentials, isCreatedFromCustomTemplate),
+    () =>
+      buildGitValidationSchema(
+        gitCredentials,
+        isCreatedFromCustomTemplate,
+        deployMethod
+      ),
     formValues
   );
 }
 
 export function buildGitValidationSchema(
   gitCredentials: Array<GitCredential>,
-  isCreatedFromCustomTemplate: boolean
+  isCreatedFromCustomTemplate: boolean,
+  deployMethod: DeployMethod
 ): SchemaOf<GitFormModel> {
   return object({
     RepositoryURL: string()
@@ -171,7 +178,9 @@ export function buildGitValidationSchema(
       .required('Repository URL is required'),
     RepositoryReferenceName: refFieldValidation(),
     ComposeFilePathInRepository: string().required(
-      'Compose file path is required'
+      deployMethod === 'compose'
+        ? 'Compose file path is required'
+        : 'Manifest file path is required'
     ),
     AdditionalFiles: array(string().required('Path is required')).default([]),
     RepositoryURLValid: boolean().default(false),

app/react/portainer/gitops/types.ts

@@ -52,6 +52,8 @@ export type GitNewCredentialModel = {
 
 export type GitAuthModel = GitCredentialsModel & GitNewCredentialModel;
 
+export type DeployMethod = 'compose' | 'manifest';
+
 export interface GitFormModel extends GitAuthModel {
   RepositoryURL: string;
   RepositoryURLValid?: boolean;

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

@@ -8,6 +8,7 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 import { useEnvironmentDeploymentOptions } from '@/react/portainer/environments/queries/useEnvironment';
 import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
 import { isKubernetesEnvironment } from '@/react/portainer/environments/utils';
+import { DeployMethod } from '@/react/portainer/gitops/types';
 
 import { useInitialValues } from './useInitialValues';
 import { FormValues, initialBuildMethods } from './types';
@@ -23,10 +24,12 @@ export function CreateForm({
   viewType: 'kube' | 'docker' | 'edge';
   defaultType: StackType;
 }) {
+  const deployMethod: DeployMethod =
+    defaultType === StackType.Kubernetes ? 'manifest' : 'compose';
   const isEdge = !environmentId;
   const router = useRouter();
   const mutation = useCreateTemplateMutation();
-  const validation = useValidation({ viewType });
+  const validation = useValidation({ viewType, deployMethod });
   const buildMethods = useBuildMethods();
 
   const initialValues = useInitialValues({

app/react/portainer/templates/custom-templates/CreateView/useInitialValues.ts

@@ -23,6 +23,10 @@ export function useInitialValues({
 
   const { appTemplateId, type = defaultType } = useAppTemplateParams();
 
+  // don't make the file path 'docker-compose.yml' in a kube environment. Keep it empty with the existing 'manifest.yml' placeholder
+  const initialFilePathInRepository =
+    type === StackType.Kubernetes ? '' : 'docker-compose.yml';
+
   const {
     params: { fileContent = '' },
   } = useCurrentStateAndParams();
@@ -49,7 +53,7 @@ export function useInitialValues({
       RepositoryAuthentication: false,
       RepositoryUsername: '',
       RepositoryPassword: '',
-      ComposeFilePathInRepository: 'docker-compose.yml',
+      ComposeFilePathInRepository: initialFilePathInRepository,
       AdditionalFiles: [],
       RepositoryURLValid: true,
       TLSSkipVerify: false,

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

@@ -10,6 +10,7 @@ import { useGitCredentials } from '@/react/portainer/account/git-credentials/git
 import { useCurrentUser } from '@/react/hooks/useUser';
 import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
 import { edgeFieldsetValidation } from '@/react/portainer/templates/custom-templates/CreateView/EdgeSettingsFieldset.validation';
+import { DeployMethod } from '@/react/portainer/gitops/types';
 
 import { file } from '@@/form-components/yup-file-validation';
 import {
@@ -22,8 +23,10 @@ import { initialBuildMethods } from './types';
 
 export function useValidation({
   viewType,
+  deployMethod,
 }: {
   viewType: 'kube' | 'docker' | 'edge';
+  deployMethod: DeployMethod;
 }) {
   const { user } = useCurrentUser();
   const gitCredentialsQuery = useGitCredentials(user.Id);
@@ -58,7 +61,11 @@ export function useValidation({
         Git: mixed().when('Method', {
           is: git.value,
           then: () =>
-            buildGitValidationSchema(gitCredentialsQuery.data || [], false),
+            buildGitValidationSchema(
+              gitCredentialsQuery.data || [],
+              false,
+              deployMethod
+            ),
         }),
         Variables: variablesValidation(),
         EdgeSettings: viewType === 'edge' ? edgeFieldsetValidation() : mixed(),
@@ -68,6 +75,11 @@ export function useValidation({
           viewType,
         })
       ),
-    [customTemplatesQuery.data, gitCredentialsQuery.data, viewType]
+    [
+      customTemplatesQuery.data,
+      gitCredentialsQuery.data,
+      viewType,
+      deployMethod,
+    ]
   );
 }

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

@@ -6,6 +6,8 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 import { useEnvironmentDeploymentOptions } from '@/react/portainer/environments/queries/useEnvironment';
 import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
 import { isKubernetesEnvironment } from '@/react/portainer/environments/utils';
+import { DeployMethod } from '@/react/portainer/gitops/types';
+import { StackType } from '@/react/common/stacks/types';
 
 import { CustomTemplate } from '../types';
 import { useUpdateTemplateMutation } from '../queries/useUpdateTemplateMutation';
@@ -32,10 +34,13 @@ export function EditForm({
   const router = useRouter();
   const disableEditor = useDisableEditor(isGit);
   const mutation = useUpdateTemplateMutation();
+  const deployMethod: DeployMethod =
+    template.Type === StackType.Kubernetes ? 'manifest' : 'compose';
   const validation = useValidation({
     viewType,
     isGit,
     templateId: template.Id,
+    deployMethod,
   });
 
   const fileContentQuery = useCustomTemplateFile(template.Id);

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

@@ -10,6 +10,7 @@ import { useGitCredentials } from '@/react/portainer/account/git-credentials/git
 import { useCurrentUser } from '@/react/hooks/useUser';
 import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
 import { edgeFieldsetValidation } from '@/react/portainer/templates/custom-templates/CreateView/EdgeSettingsFieldset.validation';
+import { DeployMethod } from '@/react/portainer/gitops/types';
 
 import { CustomTemplate } from '../types';
 import { TemplateViewType } from '../useViewType';
@@ -18,10 +19,12 @@ export function useValidation({
   isGit,
   templateId,
   viewType,
+  deployMethod,
 }: {
   isGit: boolean;
   templateId: CustomTemplate['Id'];
   viewType: TemplateViewType;
+  deployMethod: DeployMethod;
 }) {
   const { user } = useCurrentUser();
   const gitCredentialsQuery = useGitCredentials(user.Id);
@@ -47,7 +50,11 @@ export function useValidation({
         FileContent: string().required('Template is required.'),
 
         Git: isGit
-          ? buildGitValidationSchema(gitCredentialsQuery.data || [], false)
+          ? buildGitValidationSchema(
+              gitCredentialsQuery.data || [],
+              false,
+              deployMethod
+            )
           : mixed(),
         Variables: variablesValidation(),
         EdgeSettings: viewType === 'edge' ? edgeFieldsetValidation() : mixed(),
@@ -64,6 +71,7 @@ export function useValidation({
       isGit,
       templateId,
       viewType,
+      deployMethod,
     ]
   );
 }