chore(template/git): sync frontend code from ee (#11344)

app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js

@@ -345,6 +345,7 @@ export default class CreateEdgeStackViewController {
       RepositoryUsername: this.formValues.RepositoryUsername,
       RepositoryPassword: this.formValues.RepositoryPassword,
       TLSSkipVerify: this.formValues.TLSSkipVerify,
+      CreatedFromCustomTemplateID: this.state.templateValues.template.Id,
     };
     return this.EdgeStackService.createStackFromGitRepository(
       {

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.html

@@ -35,6 +35,7 @@
     on-change="($ctrl.onChangeFormValues)"
     base-webhook-url="{{ $ctrl.state.baseWebhookUrl }}"
     webhook-id="{{ $ctrl.state.webhookId }}"
+    created-from-custom-template-id="($ctrl.state.templateValues.type === 'custom' ? $ctrl.state.templateValues.template.Id : 0)"
     docs-links
   ></git-form>
 </div>

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

@@ -65,7 +65,7 @@ export default class GitFormAuthFieldsetController {
       );
 
       this.errors = await validateForm<GitAuthModel>(
-        () => gitAuthValidation(this.gitCredentials, isAuthEdit),
+        () => gitAuthValidation(this.gitCredentials, isAuthEdit, false),
         value
       );
       if (this.errors && Object.keys(this.errors).length > 0) {

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

@@ -24,6 +24,8 @@ export default class GitFormController {
 
   onChange?: (value: GitFormModel) => void;
 
+  createdFromCustomTemplateId?: number;
+
   /* @ngInject */
   constructor(
     $async: <T>(fn: () => Promise<T>) => Promise<T>,
@@ -47,15 +49,26 @@ export default class GitFormController {
       ...newValues,
     };
     this.onChange?.(value);
-    await this.runGitFormValidation(value);
+
+    const isCreatedFromCustomTemplate =
+      !!this.createdFromCustomTemplateId &&
+      this.createdFromCustomTemplateId > 0;
+    await this.runGitFormValidation(value, isCreatedFromCustomTemplate);
   }
 
-  async runGitFormValidation(value: GitFormModel) {
+  async runGitFormValidation(
+    value: GitFormModel,
+    isCreatedFromCustomTemplate: boolean
+  ) {
     return this.$async(async () => {
       this.errors = {};
       this.gitForm?.$setValidity('gitForm', true, this.gitForm);
 
-      this.errors = await validateGitForm(this.gitCredentials, value);
+      this.errors = await validateGitForm(
+        this.gitCredentials,
+        value,
+        isCreatedFromCustomTemplate
+      );
       if (this.errors && Object.keys(this.errors).length > 0) {
         this.gitForm?.$setValidity('gitForm', false, this.gitForm);
       }
@@ -82,6 +95,9 @@ export default class GitFormController {
       throw new Error('GitFormController: value is required');
     }
 
-    await this.runGitFormValidation(this.value);
+    const isCreatedFromCustomTemplate =
+      !!this.createdFromCustomTemplateId &&
+      this.createdFromCustomTemplateId > 0;
+    await this.runGitFormValidation(this.value, isCreatedFromCustomTemplate);
   }
 }

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

@@ -17,6 +17,7 @@ export const gitForm: IComponentOptions = {
     base-webhook-url="$ctrl.baseWebhookUrl"
     webhook-id="$ctrl.webhookId"
     webhooks-docs="$ctrl.webhooksDocs"
+    created-from-custom-template-id="$ctrl.createdFromCustomTemplateId"
     errors="$ctrl.errors">
   </react-git-form>
 </ng-form>`,
@@ -32,6 +33,7 @@ export const gitForm: IComponentOptions = {
     isAuthExplanationVisible: '<',
     webhookId: '@',
     webhooksDocs: '@',
+    createdFromCustomTemplateId: '<',
   },
   controller,
 };

app/portainer/react/components/git-form.ts

@@ -28,6 +28,7 @@ export const gitFormModule = angular
       'baseWebhookUrl',
       'webhookId',
       'webhooksDocs',
+      'createdFromCustomTemplateId',
     ])
   )
   .component(
@@ -69,6 +70,7 @@ export const gitFormModule = angular
       'model',
       'onChange',
       'stackId',
+      'createdFromCustomTemplateId',
       'value',
       'isUrlValid',
     ])

app/react/portainer/gitops/AuthFieldset/AuthFieldset.tsx

@@ -147,7 +147,8 @@ export function AuthFieldset({
 
 export function gitAuthValidation(
   gitCredentials: Array<GitCredential>,
-  isAuthEdit: boolean
+  isAuthEdit: boolean,
+  isCreatedFromCustomTemplate: boolean
 ): SchemaOf<GitAuthModel> {
   return object({
     RepositoryAuthentication: boolean().default(false),
@@ -160,7 +161,8 @@ export function gitAuthValidation(
       .default(''),
     RepositoryPassword: string()
       .when(['RepositoryAuthentication', 'RepositoryGitCredentialID'], {
-        is: (auth: boolean, id: number) => auth && !id && !isAuthEdit,
+        is: (auth: boolean, id: number) =>
+          auth && !id && !isAuthEdit && !isCreatedFromCustomTemplate,
         then: string().required('Password is required'),
       })
       .default(''),

app/react/portainer/gitops/ComposePathField/ComposePathField.tsx

@@ -16,6 +16,7 @@ interface Props {
   isCompose: boolean;
   model: GitFormModel;
   isDockerStandalone: boolean;
+  createdFromCustomTemplateId?: number;
 }
 
 export function ComposePathField({
@@ -25,6 +26,7 @@ export function ComposePathField({
   model,
   isDockerStandalone,
   errors,
+  createdFromCustomTemplateId,
 }: Props) {
   const [inputValue, updateInputValue] = useStateWrapper(value, onChange);
 
@@ -64,6 +66,7 @@ export function ComposePathField({
               placeholder={isCompose ? 'docker-compose.yml' : 'manifest.yml'}
               model={model}
               inputId="stack_repository_path"
+              createdFromCustomTemplateId={createdFromCustomTemplateId}
             />
           ) : (
             <Input

app/react/portainer/gitops/ComposePathField/PathSelector.tsx

@@ -13,6 +13,7 @@ export function PathSelector({
   dirOnly,
   readOnly,
   inputId,
+  createdFromCustomTemplateId,
 }: {
   value: string;
   onChange(value: string): void;
@@ -21,6 +22,7 @@ export function PathSelector({
   dirOnly?: boolean;
   readOnly?: boolean;
   inputId: string;
+  createdFromCustomTemplateId?: number;
 }) {
   const creds = getAuthentication(model);
   const payload = {
@@ -29,6 +31,7 @@ export function PathSelector({
     reference: model.RepositoryReferenceName,
     tlsSkipVerify: model.TLSSkipVerify,
     dirOnly,
+    createdFromCustomTemplateId,
     ...creds,
   };
   const enabled = Boolean(

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

@@ -73,7 +73,7 @@ export function Primary({
   return (
     <Formik
       initialValues={initialValues}
-      validationSchema={() => buildGitValidationSchema([])}
+      validationSchema={() => buildGitValidationSchema([], false)}
       onSubmit={() => {}}
     >
       {({ values, errors, setValues }) => (

app/react/portainer/gitops/GitForm.tsx

@@ -34,6 +34,7 @@ interface Props {
   baseWebhookUrl?: string;
   webhookId?: string;
   webhooksDocs?: string;
+  createdFromCustomTemplateId?: number;
 }
 
 export function GitForm({
@@ -49,6 +50,7 @@ export function GitForm({
   baseWebhookUrl,
   webhookId,
   webhooksDocs,
+  createdFromCustomTemplateId,
 }: Props) {
   const [value, setValue] = useState(initialValue); // TODO: remove this state when form is not inside angularjs
   const webhooksDocsUrl = useDocsUrl(webhooksDocs);
@@ -69,6 +71,7 @@ export function GitForm({
           handleChange({ RepositoryURLValid: value })
         }
         model={value}
+        createdFromCustomTemplateId={createdFromCustomTemplateId}
         errors={errors.RepositoryURL}
       />
 
@@ -78,6 +81,7 @@ export function GitForm({
         model={value}
         error={errors.RepositoryReferenceName}
         isUrlValid={value.RepositoryURLValid}
+        createdFromCustomTemplateId={createdFromCustomTemplateId}
       />
 
       <ComposePathField
@@ -89,6 +93,7 @@ export function GitForm({
         model={value}
         isDockerStandalone={isDockerStandalone}
         errors={errors.ComposeFilePathInRepository}
+        createdFromCustomTemplateId={createdFromCustomTemplateId}
       />
 
       {isAdditionalFilesFieldVisible && (
@@ -137,16 +142,18 @@ export function GitForm({
 
 export async function validateGitForm(
   gitCredentials: Array<GitCredential>,
-  formValues: GitFormModel
+  formValues: GitFormModel,
+  isCreatedFromCustomTemplate: boolean
 ) {
   return validateForm<GitFormModel>(
-    () => buildGitValidationSchema(gitCredentials),
+    () => buildGitValidationSchema(gitCredentials, isCreatedFromCustomTemplate),
     formValues
   );
 }
 
 export function buildGitValidationSchema(
-  gitCredentials: Array<GitCredential>
+  gitCredentials: Array<GitCredential>,
+  isCreatedFromCustomTemplate: boolean
 ): SchemaOf<GitFormModel> {
   return object({
     RepositoryURL: string()
@@ -171,5 +178,7 @@ export function buildGitValidationSchema(
     RepositoryURLValid: boolean().default(false),
     AutoUpdate: autoUpdateValidation().nullable(),
     TLSSkipVerify: boolean().default(false),
-  }).concat(gitAuthValidation(gitCredentials, false)) as SchemaOf<GitFormModel>;
+  }).concat(
+    gitAuthValidation(gitCredentials, false, isCreatedFromCustomTemplate)
+  ) as SchemaOf<GitFormModel>;
 }

app/react/portainer/gitops/GitFormUrlField.tsx

@@ -26,6 +26,7 @@ interface Props {
   onChange(value: string): void;
   onChangeRepositoryValid(value: boolean): void;
   model: GitFormModel;
+  createdFromCustomTemplateId?: number;
   errors?: string;
 }
 
@@ -34,6 +35,7 @@ export function GitFormUrlField({
   onChange,
   onChangeRepositoryValid,
   model,
+  createdFromCustomTemplateId,
   errors,
 }: Props) {
   const queryClient = useQueryClient();
@@ -42,7 +44,12 @@ export function GitFormUrlField({
   const [force, setForce] = useState(false);
   const repoStatusQuery = useCheckRepo(
     value,
-    { creds, force, tlsSkipVerify: model.TLSSkipVerify },
+    {
+      creds,
+      force,
+      tlsSkipVerify: model.TLSSkipVerify,
+      createdFromCustomTemplateId,
+    },
     {
       onSettled(isValid) {
         onChangeRepositoryValid(!!isValid);

app/react/portainer/gitops/RefField/RefField.tsx

@@ -20,6 +20,7 @@ interface Props {
   error?: string;
   isUrlValid?: boolean;
   stackId?: StackId;
+  createdFromCustomTemplateId?: number;
 }
 
 export function RefField({
@@ -29,6 +30,7 @@ export function RefField({
   error,
   isUrlValid,
   stackId,
+  createdFromCustomTemplateId,
 }: Props) {
   const [inputValue, updateInputValue] = useStateWrapper(value, onChange);
   const inputId = 'repository-reference-field';
@@ -51,6 +53,7 @@ export function RefField({
         model={model}
         isUrlValid={isUrlValid}
         stackId={stackId}
+        createdFromCustomTemplateId={createdFromCustomTemplateId}
       />
     </Wrapper>
   ) : (

app/react/portainer/gitops/RefField/RefSelector.tsx

@@ -13,11 +13,13 @@ export function RefSelector({
   onChange,
   isUrlValid,
   stackId,
+  createdFromCustomTemplateId,
   inputId,
 }: {
   model: RefFieldModel;
   value: string;
   stackId?: StackId;
+  createdFromCustomTemplateId?: number;
   onChange: (value: string) => void;
   isUrlValid?: boolean;
   inputId: string;
@@ -26,6 +28,7 @@ export function RefSelector({
   const payload = {
     repository: model.RepositoryURL,
     stackId,
+    createdFromCustomTemplateId,
     tlsSkipVerify: model.TLSSkipVerify,
     ...creds,
   };

app/react/portainer/gitops/queries/useCheckRepo.ts

@@ -15,6 +15,7 @@ interface CheckRepoOptions {
   creds?: Creds;
   force?: boolean;
   tlsSkipVerify?: boolean;
+  createdFromCustomTemplateId?: number;
 }
 
 export function useCheckRepo(
@@ -43,7 +44,12 @@ export async function checkRepo(
   try {
     await axios.post<string[]>(
       '/gitops/repo/refs',
-      { repository, tlsSkipVerify: options.tlsSkipVerify, ...options.creds },
+      {
+        repository,
+        tlsSkipVerify: options.tlsSkipVerify,
+        createdFromCustomTemplateId: options.createdFromCustomTemplateId,
+        ...options.creds,
+      },
       force ? { params: { force } } : {}
     );
     return true;

app/react/portainer/gitops/queries/useGitRefs.ts

@@ -6,6 +6,7 @@ interface RefsPayload {
   repository: string;
   username?: string;
   password?: string;
+  createdFromCustomTemplateID?: number;
   tlsSkipVerify?: boolean;
 }
 

app/react/portainer/gitops/queries/useSearch.ts

@@ -9,6 +9,7 @@ interface SearchPayload {
   username?: string;
   password?: string;
   tlsSkipVerify?: boolean;
+  createdFromCustomTemplateId?: number;
 }
 
 export function useSearch(payload: SearchPayload, enabled: boolean) {

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

@@ -57,7 +57,8 @@ export function useValidation({
         }),
         Git: mixed().when('Method', {
           is: git.value,
-          then: () => buildGitValidationSchema(gitCredentialsQuery.data || []),
+          then: () =>
+            buildGitValidationSchema(gitCredentialsQuery.data || [], false),
         }),
         Variables: variablesValidation(),
         EdgeSettings: viewType === 'edge' ? edgeFieldsetValidation() : mixed(),

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

@@ -47,7 +47,7 @@ export function useValidation({
         FileContent: string().required('Template is required.'),
 
         Git: isGit
-          ? buildGitValidationSchema(gitCredentialsQuery.data || [])
+          ? buildGitValidationSchema(gitCredentialsQuery.data || [], false)
           : mixed(),
         Variables: variablesValidation(),
         EdgeSettings: viewType === 'edge' ? edgeFieldsetValidation() : mixed(),