fix(edge/templates): fix issues with git templates [EE-6357] (#10679)

app/react/edge/templates/custom-templates/CreateView/CreateTemplateForm.tsx

@@ -7,9 +7,12 @@ import { useCreateTemplateMutation } from '@/react/portainer/templates/custom-te
 import { Platform } from '@/react/portainer/templates/types';
 import { useFetchTemplateFile } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateFile';
 import { getDefaultEdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
+import { useSaveCredentialsIfRequired } from '@/react/portainer/account/git-credentials/queries/useCreateGitCredentialsMutation';
 
 import { editor } from '@@/BoxSelector/common-options/build-methods';
 
+import { toGitRequest } from '../common/git';
+
 import { InnerForm } from './InnerForm';
 import { FormValues } from './types';
 import { useValidation } from './useValidation';
@@ -19,6 +22,8 @@ export function CreateTemplateForm() {
   const mutation = useCreateTemplateMutation();
   const validation = useValidation();
   const { appTemplateId, type } = useParams();
+  const { saveCredentials, isLoading: isSaveCredentialsLoading } =
+    useSaveCredentialsIfRequired();
 
   const fileContentQuery = useFetchTemplateFile(appTemplateId);
 
@@ -58,13 +63,19 @@ export function CreateTemplateForm() {
       validationSchema={validation}
       validateOnMount
     >
-      <InnerForm isLoading={mutation.isLoading} />
+      <InnerForm isLoading={mutation.isLoading || isSaveCredentialsLoading} />
     </Formik>
   );
 
-  function handleSubmit(values: FormValues) {
+  async function handleSubmit(values: FormValues) {
+    const credentialId = await saveCredentials(values.Git);
+
     mutation.mutate(
-      { ...values, EdgeTemplate: true },
+      {
+        ...values,
+        EdgeTemplate: true,
+        Git: toGitRequest(values.Git, credentialId),
+      },
       {
         onSuccess() {
           notifySuccess('Success', 'Template created');

app/react/edge/templates/custom-templates/CreateView/InnerForm.tsx

@@ -42,7 +42,7 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
   usePreventExit(
     initialValues.FileContent,
     values.FileContent,
-    values.Method === editor.value && !isSubmitting
+    values.Method === editor.value && !isSubmitting && !isLoading
   );
 
   const isGit = values.Method === git.value;
@@ -108,16 +108,7 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
         />
       )}
 
-      {isTemplateVariablesEnabled && (
-        <CustomTemplatesVariablesDefinitionField
-          value={values.Variables}
-          onChange={(values) => setFieldValue('Variables', values)}
-          isVariablesNamesFromParent={values.Method === editor.value}
-          errors={errors.Variables}
-        />
-      )}
-
-      {values.Method === git.value && (
+      {isGit && (
         <GitForm
           value={values.Git}
           onChange={(newValues) =>
@@ -130,6 +121,15 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
         />
       )}
 
+      {isTemplateVariablesEnabled && (
+        <CustomTemplatesVariablesDefinitionField
+          value={values.Variables}
+          onChange={(values) => setFieldValue('Variables', values)}
+          isVariablesNamesFromParent={values.Method === editor.value}
+          errors={errors.Variables}
+        />
+      )}
+
       {values.EdgeSettings && (
         <EdgeSettingsFieldset
           setValues={(edgeSetValues) =>

app/react/edge/templates/custom-templates/EditView/EditTemplateForm.tsx

@@ -11,6 +11,9 @@ import {
   isTemplateVariablesEnabled,
 } from '@/react/portainer/custom-templates/components/utils';
 import { toGitFormModel } from '@/react/portainer/gitops/types';
+import { useSaveCredentialsIfRequired } from '@/react/portainer/account/git-credentials/queries/useCreateGitCredentialsMutation';
+
+import { toGitRequest } from '../common/git';
 
 import { InnerForm } from './InnerForm';
 import { FormValues } from './types';
@@ -22,6 +25,8 @@ export function EditTemplateForm({ template }: { template: CustomTemplate }) {
   const isGit = !!template.GitConfig;
   const validation = useValidation(template.Id, isGit);
   const fileQuery = useCustomTemplateFile(template.Id, isGit);
+  const { saveCredentials, isLoading: isSaveCredentialsLoading } =
+    useSaveCredentialsIfRequired();
 
   if (fileQuery.isLoading) {
     return null;
@@ -49,7 +54,7 @@ export function EditTemplateForm({ template }: { template: CustomTemplate }) {
       validateOnMount
     >
       <InnerForm
-        isLoading={mutation.isLoading}
+        isLoading={mutation.isLoading || isSaveCredentialsLoading}
         isEditorReadonly={isGit}
         gitFileContent={isGit ? fileQuery.data : ''}
         refreshGitFile={fileQuery.refetch}
@@ -60,7 +65,9 @@ export function EditTemplateForm({ template }: { template: CustomTemplate }) {
     </Formik>
   );
 
-  function handleSubmit(values: FormValues) {
+  async function handleSubmit(values: FormValues) {
+    const credentialId = await saveCredentials(values.Git);
+
     mutation.mutate(
       {
         id: template.Id,
@@ -74,7 +81,7 @@ export function EditTemplateForm({ template }: { template: CustomTemplate }) {
         Platform: values.Platform,
         Variables: values.Variables,
         EdgeSettings: values.EdgeSettings,
-        ...values.Git,
+        ...(values.Git ? toGitRequest(values.Git, credentialId) : {}),
       },
       {
         onSuccess() {

app/react/edge/templates/custom-templates/EditView/InnerForm.tsx

@@ -51,7 +51,7 @@ export function InnerForm({
   usePreventExit(
     initialValues.FileContent,
     values.FileContent,
-    !isEditorReadonly && !isSubmitting
+    !isEditorReadonly && !isSubmitting && !isLoading
   );
   return (
     <Form className="form-horizontal">

app/react/edge/templates/custom-templates/common/git.ts

@@ -0,0 +1,35 @@
+import { transformGitAuthenticationViewModel } from '@/react/portainer/gitops/AuthFieldset/utils';
+import { GitFormModel } from '@/react/portainer/gitops/types';
+
+export function toGitRequest(
+  gitConfig: GitFormModel,
+  credentialId: number | undefined
+): GitFormModel {
+  return {
+    ...gitConfig,
+    ...getGitAuthValues(gitConfig, credentialId),
+  };
+}
+
+function getGitAuthValues(
+  gitConfig: GitFormModel | undefined,
+  credentialId: number | undefined
+) {
+  if (!credentialId) {
+    return gitConfig;
+  }
+
+  const authModel = transformGitAuthenticationViewModel({
+    ...gitConfig,
+    RepositoryGitCredentialID: credentialId,
+  });
+
+  return authModel
+    ? {
+        RepositoryAuthentication: true,
+        RepositoryGitCredentialID: authModel.GitCredentialID,
+        RepositoryPassword: authModel.Password,
+        RepositoryUsername: authModel.Username,
+      }
+    : {};
+}