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

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/GitForm.tsx

@@ -27,14 +27,13 @@ import { EdgeGroup } from '@/react/edge/edge-groups/types';
 import { DeploymentType, EdgeStack } from '@/react/edge/edge-stacks/types';
 import { EdgeGroupsSelector } from '@/react/edge/edge-stacks/components/EdgeGroupsSelector';
 import { EdgeStackDeploymentTypeSelector } from '@/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector';
-import { useCurrentUser } from '@/react/hooks/useUser';
-import { useCreateGitCredentialMutation } from '@/react/portainer/account/git-credentials/git-credentials.service';
-import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { notifySuccess } from '@/portainer/services/notifications';
 import { EnvironmentType } from '@/react/portainer/environments/types';
 import { Registry } from '@/react/portainer/registries/types';
 import { useRegistries } from '@/react/portainer/registries/queries/useRegistries';
 import { RelativePathFieldset } from '@/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset';
 import { parseRelativePathResponse } from '@/react/portainer/gitops/RelativePathFieldset/utils';
+import { useSaveCredentialsIfRequired } from '@/react/portainer/account/git-credentials/queries/useCreateGitCredentialsMutation';
 
 import { LoadingButton } from '@@/buttons';
 import { FormSection } from '@@/form-components/FormSection';
@@ -65,8 +64,8 @@ interface FormValues {
 export function GitForm({ stack }: { stack: EdgeStack }) {
   const router = useRouter();
   const updateStackMutation = useUpdateEdgeStackGitMutation();
-  const saveCredentialsMutation = useCreateGitCredentialMutation();
-  const { user } = useCurrentUser();
+  const { saveCredentials, isLoading: isSaveCredentialsLoading } =
+    useSaveCredentialsIfRequired();
 
   if (!stack.GitConfig) {
     return null;
@@ -95,7 +94,9 @@ export function GitForm({ stack }: { stack: EdgeStack }) {
             onUpdateSettingsClick={handleUpdateSettings}
             gitPath={gitConfig.ConfigFilePath}
             gitUrl={gitConfig.URL}
-            isLoading={updateStackMutation.isLoading}
+            isLoading={
+              updateStackMutation.isLoading || isSaveCredentialsLoading
+            }
             isUpdateVersion={!!updateStackMutation.variables?.updateVersion}
           />
         );
@@ -105,9 +106,7 @@ export function GitForm({ stack }: { stack: EdgeStack }) {
             return;
           }
 
-          const credentialId = await saveCredentialsIfRequired(
-            values.authentication
-          );
+          const credentialId = await saveCredentials(values.authentication);
 
           updateStackMutation.mutate(getPayload(values, credentialId, false), {
             onSuccess() {
@@ -121,7 +120,7 @@ export function GitForm({ stack }: { stack: EdgeStack }) {
   );
 
   async function handleSubmit(values: FormValues) {
-    const credentialId = await saveCredentialsIfRequired(values.authentication);
+    const credentialId = await saveCredentials(values.authentication);
 
     updateStackMutation.mutate(getPayload(values, credentialId, true), {
       onSuccess() {
@@ -151,29 +150,6 @@ export function GitForm({ stack }: { stack: EdgeStack }) {
       ...values,
     };
   }
-
-  async function saveCredentialsIfRequired(authentication: GitAuthModel) {
-    if (
-      !authentication.SaveCredential ||
-      !authentication.RepositoryPassword ||
-      !authentication.NewCredentialName
-    ) {
-      return authentication.RepositoryGitCredentialID;
-    }
-
-    try {
-      const credential = await saveCredentialsMutation.mutateAsync({
-        userId: user.Id,
-        username: authentication.RepositoryUsername,
-        password: authentication.RepositoryPassword,
-        name: authentication.NewCredentialName,
-      });
-      return credential.id;
-    } catch (err) {
-      notifyError('Error', err as Error, 'Unable to save credentials');
-      return undefined;
-    }
-  }
 }
 
 function InnerForm({

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/PrivateRegistryFieldsetWrapper.tsx

@@ -29,7 +29,7 @@ export function PrivateRegistryFieldsetWrapper({
 }) {
   const dryRunMutation = useParseRegistries();
 
-  const registriesQuery = useRegistries();
+  const registriesQuery = useRegistries({ hideDefault: true });
 
   if (!registriesQuery.data) {
     return null;

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,
+      }
+    : {};
+}