feat(custom-templates): migrate create view to react [EE-6400] (#10715)

app/react/portainer/access-control/EditDetails/TeamsField.tsx

@@ -43,7 +43,7 @@ export function TeamsField({
         />
       ) : (
         <span className="small text-muted">
-          You have not yet created any teams. Head over to the
+          You have not yet created any teams. Head over to the{' '}
           <Link to="portainer.teams">Teams view</Link> to manage teams.
         </span>
       )}

app/react/portainer/access-control/EditDetails/UsersField.tsx

@@ -34,7 +34,7 @@ export function UsersField({ name, users, value, onChange, errors }: Props) {
         />
       ) : (
         <span className="small text-muted">
-          You have not yet created any users. Head over to the
+          You have not yet created any users. Head over to the{' '}
           <Link to="portainer.users">Users view</Link> to manage users.
         </span>
       )}

app/react/portainer/account/git-credentials/queries/useCreateGitCredentialsMutation.ts

@@ -2,8 +2,9 @@ import { useQueryClient, useMutation } from 'react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
-import { GitAuthModel } from '@/react/portainer/gitops/types';
+import { GitAuthModel, GitFormModel } from '@/react/portainer/gitops/types';
 import { useCurrentUser } from '@/react/hooks/useUser';
+import { UserId } from '@/portainer/users/types';
 
 import { GitCredential } from '../types';
 import { buildGitUrl } from '../git-credentials.service';
@@ -80,3 +81,40 @@ export function useSaveCredentialsIfRequired() {
     }
   }
 }
+
+export async function saveGitCredentialsIfNeeded(
+  userId: UserId,
+  gitModel: GitFormModel
+) {
+  let credentialsId = gitModel.RepositoryGitCredentialID;
+  let username = gitModel.RepositoryUsername;
+  let password = gitModel.RepositoryPassword;
+  if (
+    gitModel.SaveCredential &&
+    gitModel.RepositoryAuthentication &&
+    password &&
+    username &&
+    gitModel.NewCredentialName
+  ) {
+    const cred = await createGitCredential({
+      name: gitModel.NewCredentialName,
+      password,
+      username,
+      userId,
+    });
+    credentialsId = cred.id;
+  }
+
+  // clear username and password if credentials are provided
+  if (credentialsId && username) {
+    username = '';
+    password = '';
+  }
+
+  return {
+    ...gitModel,
+    RepositoryGitCredentialID: credentialsId,
+    RepositoryUsername: username,
+    RepositoryPassword: password,
+  };
+}

app/react/portainer/environments/queries/useEnvironment.ts

@@ -1,26 +1,39 @@
 import { useQuery } from 'react-query';
 
-import { getEndpoint } from '@/react/portainer/environments/environment.service';
-import {
-  Environment,
-  EnvironmentId,
-} from '@/react/portainer/environments/types';
 import { withError } from '@/react-tools/react-query';
 
+import { getDeploymentOptions, getEndpoint } from '../environment.service';
+import { Environment, EnvironmentId } from '../types';
+
 import { environmentQueryKeys } from './query-keys';
 
 export function useEnvironment<T = Environment | null>(
-  id?: EnvironmentId,
-  select?: (environment: Environment | null) => T
+  environmentId?: EnvironmentId,
+  select?: (environment: Environment | null) => T,
+  options?: { autoRefreshRate?: number }
 ) {
   return useQuery(
-    id ? environmentQueryKeys.item(id) : [],
-    () => (id ? getEndpoint(id) : null),
+    environmentId ? environmentQueryKeys.item(environmentId) : [],
+    () => (environmentId ? getEndpoint(environmentId) : null),
     {
       select,
       ...withError('Failed loading environment'),
       staleTime: 50,
-      enabled: !!id,
+      enabled: !!environmentId,
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+export function useEnvironmentDeploymentOptions(id: EnvironmentId | undefined) {
+  return useQuery(
+    [...environmentQueryKeys.item(id!), 'deploymentOptions'],
+    () => getDeploymentOptions(id!),
+    {
+      enabled: !!id,
+      ...withError('Failed loading deployment options'),
     }
   );
 }

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

@@ -24,12 +24,12 @@ export function NewCredentialForm({
             <Checkbox
               id="repository-save-credential"
               label="save credential"
-              checked={value.SaveCredential}
+              checked={value.SaveCredential || false}
               className="[&+label]:mb-0"
               onChange={(e) => onChange({ SaveCredential: e.target.checked })}
             />
             <Input
-              value={value.NewCredentialName}
+              value={value.NewCredentialName || ''}
               name="new_credential_name"
               placeholder="credential name"
               className="ml-4 w-48"

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

@@ -0,0 +1,91 @@
+import { Formik } from 'formik';
+import { useRouter } from '@uirouter/react';
+
+import { StackType } from '@/react/common/stacks/types';
+import { notifySuccess } from '@/portainer/services/notifications';
+import { useCreateTemplateMutation } from '@/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation';
+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 { useInitialValues } from './useInitialValues';
+import { FormValues, initialBuildMethods } from './types';
+import { useValidation } from './useValidation';
+import { InnerForm } from './InnerForm';
+
+export function CreateForm({
+  environmentId,
+  defaultType,
+}: {
+  environmentId?: EnvironmentId;
+  defaultType: StackType;
+}) {
+  const isEdge = !environmentId;
+  const router = useRouter();
+  const mutation = useCreateTemplateMutation();
+  const validation = useValidation(isEdge);
+  const buildMethods = useBuildMethods();
+
+  const initialValues = useInitialValues({
+    defaultType,
+    isEdge,
+    buildMethods: buildMethods.map((method) => method.value),
+  });
+
+  if (!initialValues) {
+    return null;
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validationSchema={validation}
+      validateOnMount
+    >
+      <InnerForm
+        isLoading={mutation.isLoading}
+        environmentId={environmentId}
+        buildMethods={buildMethods}
+      />
+    </Formik>
+  );
+
+  function handleSubmit(values: FormValues) {
+    mutation.mutate(
+      {
+        ...values,
+        EdgeTemplate: isEdge,
+      },
+      {
+        onSuccess() {
+          notifySuccess('Success', 'Template created');
+          router.stateService.go('^');
+        },
+      }
+    );
+  }
+}
+
+function useBuildMethods() {
+  const environment = useCurrentEnvironment(false);
+
+  const deploymentOptionsQuery = useEnvironmentDeploymentOptions(
+    environment.data && isKubernetesEnvironment(environment.data.Type)
+      ? environment.data.Id
+      : undefined
+  );
+  return initialBuildMethods.filter((method) => {
+    switch (method.value) {
+      case 'editor':
+        return !deploymentOptionsQuery.data?.hideWebEditor;
+      case 'upload':
+        return !deploymentOptionsQuery.data?.hideFileUpload;
+      case 'repository':
+        return true;
+      default:
+        return true;
+    }
+  });
+}

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

@@ -0,0 +1,51 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { StackType } from '@/react/common/stacks/types';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+
+import { CreateForm } from './CreateForm';
+
+export function CreateView() {
+  const defaultType = useDefaultType();
+  const environmentId = useEnvironmentId(false);
+
+  return (
+    <div>
+      <PageHeader
+        title="Create Custom template"
+        breadcrumbs={[
+          { label: 'Custom Templates', link: '^' },
+          'Create Custom template',
+        ]}
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <Widget.Body>
+              <CreateForm
+                defaultType={defaultType}
+                environmentId={environmentId}
+              />
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function useDefaultType() {
+  const {
+    state: { name },
+  } = useCurrentStateAndParams();
+  if (name?.includes('kubernetes')) {
+    return StackType.Kubernetes;
+  }
+
+  // edge or docker
+  return StackType.DockerCompose;
+}

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

@@ -0,0 +1,81 @@
+import { FormikErrors } from 'formik';
+import { SetStateAction } from 'react';
+
+import { RelativePathFieldset } from '@/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset';
+import { PrivateRegistryFieldsetWrapper } from '@/react/edge/edge-stacks/ItemView/EditEdgeStackForm/PrivateRegistryFieldsetWrapper';
+import { PrePullToggle } from '@/react/edge/edge-stacks/components/PrePullToggle';
+import { RetryDeployToggle } from '@/react/edge/edge-stacks/components/RetryDeployToggle';
+import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
+import { GitFormModel } from '@/react/portainer/gitops/types';
+
+import { FormSection } from '@@/form-components/FormSection';
+
+export function EdgeSettingsFieldset({
+  values,
+  setValues,
+  errors,
+  gitConfig,
+  fileValues,
+  setFieldError,
+}: {
+  values: EdgeTemplateSettings;
+  setValues: (values: SetStateAction<EdgeTemplateSettings>) => void;
+  errors?: FormikErrors<EdgeTemplateSettings>;
+  gitConfig?: GitFormModel;
+  setFieldError: (field: string, message: string) => void;
+  fileValues: {
+    fileContent?: string;
+    file?: File;
+  };
+}) {
+  const isGit = !!gitConfig;
+  return (
+    <>
+      {isGit && (
+        <FormSection title="Advanced settings">
+          <RelativePathFieldset
+            value={values.RelativePathSettings}
+            gitModel={gitConfig}
+            onChange={(newValues) =>
+              setValues((values) => ({
+                ...values,
+                RelativePathSettings: {
+                  ...values.RelativePathSettings,
+                  ...newValues,
+                },
+              }))
+            }
+          />
+        </FormSection>
+      )}
+
+      <PrivateRegistryFieldsetWrapper
+        value={values.PrivateRegistryId}
+        onChange={(registryId) =>
+          setValues((values) => ({
+            ...values,
+            PrivateRegistryId: registryId,
+          }))
+        }
+        values={fileValues}
+        onFieldError={(error) => setFieldError('Edge?.Registries', error)}
+        error={errors?.PrivateRegistryId}
+        isGit={isGit}
+      />
+
+      <PrePullToggle
+        onChange={(value) =>
+          setValues((values) => ({ ...values, PrePullImage: value }))
+        }
+        value={values.PrePullImage}
+      />
+
+      <RetryDeployToggle
+        onChange={(value) =>
+          setValues((values) => ({ ...values, RetryDeploy: value }))
+        }
+        value={values.RetryDeploy}
+      />
+    </>
+  );
+}

app/react/portainer/templates/custom-templates/CreateView/EdgeSettingsFieldset.validation.ts

@@ -0,0 +1,19 @@
+import { SchemaOf, boolean, mixed, number, object } from 'yup';
+
+import { relativePathValidation } from '@/react/portainer/gitops/RelativePathFieldset/validation';
+import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+
+export function edgeFieldsetValidation(): SchemaOf<EdgeTemplateSettings> {
+  if (!isBE) {
+    return mixed().default(undefined) as SchemaOf<EdgeTemplateSettings>;
+  }
+
+  return object({
+    RelativePathSettings: relativePathValidation(),
+    PrePullImage: boolean().default(false),
+    RetryDeploy: boolean().default(false),
+    PrivateRegistryId: number().default(undefined),
+    StaggerConfig: mixed(),
+  });
+}

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

@@ -0,0 +1,219 @@
+import { Form, FormikErrors, useFormikContext } from 'formik';
+
+import { CommonFields } from '@/react/portainer/custom-templates/components/CommonFields';
+import { CustomTemplatesVariablesDefinitionField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { PlatformField } from '@/react/portainer/custom-templates/components/PlatformSelector';
+import { GitForm } from '@/react/portainer/gitops/GitForm';
+import {
+  getTemplateVariables,
+  intersectVariables,
+  isTemplateVariablesEnabled,
+} from '@/react/portainer/custom-templates/components/utils';
+import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
+import { AccessControlForm } from '@/react/portainer/access-control';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { applySetStateAction } from '@/react-tools/apply-set-state-action';
+import { AccessControlFormData } from '@/react/portainer/access-control/types';
+import { textByType } from '@/react/common/stacks/common/form-texts';
+import { StackType } from '@/react/common/stacks/types';
+
+import { BoxSelector } from '@@/BoxSelector';
+import { WebEditorForm, usePreventExit } from '@@/WebEditorForm';
+import { FileUploadForm } from '@@/form-components/FileUpload';
+import { FormActions } from '@@/form-components/FormActions';
+import { FormSection } from '@@/form-components/FormSection';
+
+import { EdgeTemplateSettings } from '../types';
+
+import { EdgeSettingsFieldset } from './EdgeSettingsFieldset';
+import { FormValues, Method, initialBuildMethods } from './types';
+
+export function InnerForm({
+  isLoading,
+  environmentId,
+  buildMethods,
+}: {
+  isLoading: boolean;
+  environmentId?: EnvironmentId;
+  buildMethods: Array<(typeof initialBuildMethods)[number]>;
+}) {
+  const {
+    values,
+    initialValues,
+    setFieldValue,
+    errors,
+    isValid,
+    setFieldError,
+    setValues,
+    isSubmitting,
+  } = useFormikContext<FormValues>();
+
+  const isGit = values.Method === 'repository';
+  const isEditor = values.Method === 'editor';
+
+  usePreventExit(
+    initialValues.FileContent,
+    values.FileContent,
+    isEditor && !isSubmitting && !isLoading
+  );
+
+  const texts = textByType[values.Type];
+
+  return (
+    <Form className="form-horizontal">
+      <CommonFields
+        values={values}
+        onChange={(newValues) =>
+          setValues((values) => ({ ...values, ...newValues }))
+        }
+        errors={errors}
+      />
+
+      {values.Type !== StackType.Kubernetes && (
+        <>
+          <PlatformField
+            value={values.Platform}
+            onChange={(value) => setFieldValue('Platform', value)}
+          />
+
+          <TemplateTypeSelector
+            value={values.Type}
+            onChange={(value) => setFieldValue('Type', value)}
+          />
+        </>
+      )}
+
+      <FormSection title="Build method">
+        <BoxSelector
+          slim
+          options={buildMethods}
+          value={values.Method}
+          onChange={handleChangeMethod}
+          radioName="buildMethod"
+        />
+      </FormSection>
+
+      {isEditor && (
+        <WebEditorForm
+          id="custom-template-creation-editor"
+          value={values.FileContent}
+          onChange={handleChangeFileContent}
+          yaml
+          placeholder={texts.editor.placeholder}
+          error={errors.FileContent}
+        >
+          {texts.editor.description}
+        </WebEditorForm>
+      )}
+
+      {values.Method === 'upload' && (
+        <FileUploadForm
+          description={texts.upload}
+          value={values.File}
+          onChange={(value) => setFieldValue('File', value)}
+          required
+        />
+      )}
+
+      {isGit && (
+        <GitForm
+          deployMethod={
+            values.Type === StackType.Kubernetes ? 'manifest' : 'compose'
+          }
+          value={values.Git}
+          onChange={(newValues) =>
+            setValues((values) => ({
+              ...values,
+              Git: { ...values.Git, ...newValues },
+            }))
+          }
+          errors={errors.Git}
+        />
+      )}
+
+      {isTemplateVariablesEnabled && (
+        <CustomTemplatesVariablesDefinitionField
+          value={values.Variables}
+          onChange={(values) => setFieldValue('Variables', values)}
+          isVariablesNamesFromParent={isEditor}
+          errors={errors.Variables}
+        />
+      )}
+
+      {!!values.AccessControl && (
+        <AccessControlForm
+          environmentId={environmentId || 0}
+          onChange={(values) => setFieldValue('AccessControl', values)}
+          values={values.AccessControl}
+          errors={errors.AccessControl as FormikErrors<AccessControlFormData>}
+          formNamespace="accessControl"
+        />
+      )}
+
+      {values.EdgeSettings && (
+        <EdgeSettingsFieldset
+          setValues={(edgeSetValues) =>
+            setValues((values) => ({
+              ...values,
+              EdgeSettings: applySetStateAction(
+                edgeSetValues,
+                values.EdgeSettings
+              ),
+            }))
+          }
+          gitConfig={isGit ? values.Git : undefined}
+          fileValues={{
+            fileContent: values.FileContent,
+            file: values.File,
+          }}
+          values={values.EdgeSettings}
+          errors={errors.EdgeSettings as FormikErrors<EdgeTemplateSettings>}
+          setFieldError={setFieldError}
+        />
+      )}
+
+      <FormActions
+        isLoading={isLoading}
+        isValid={isValid}
+        loadingText="Creating custom template..."
+        submitLabel="Create custom template"
+      />
+    </Form>
+  );
+
+  function handleChangeFileContent(value: string) {
+    setFieldValue(
+      'FileContent',
+      value,
+      isTemplateVariablesEnabled ? !value : true
+    );
+    parseTemplate(value);
+  }
+
+  function parseTemplate(value: string) {
+    if (!isTemplateVariablesEnabled || value === '') {
+      setFieldValue('Variables', []);
+      return;
+    }
+
+    const [variables, validationError] = getTemplateVariables(value);
+    const isValid = !!variables;
+
+    setFieldError(
+      'FileContent',
+      validationError ? `Template invalid: ${validationError}` : undefined
+    );
+    if (isValid) {
+      setFieldValue(
+        'Variables',
+        intersectVariables(values.Variables, variables)
+      );
+    }
+  }
+
+  function handleChangeMethod(method: Method) {
+    setFieldValue('FileContent', '');
+    setFieldValue('Variables', []);
+    setFieldValue('Method', method);
+  }
+}

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

@@ -0,0 +1 @@
+export { CreateView } from './CreateView';

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

@@ -0,0 +1,30 @@
+import { StackType } from '@/react/common/stacks/types';
+import { type Values as CommonFieldsValues } from '@/react/portainer/custom-templates/components/CommonFields';
+import { DefinitionFieldValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { Platform } from '@/react/portainer/templates/types';
+import { GitFormModel } from '@/react/portainer/gitops/types';
+import { AccessControlFormData } from '@/react/portainer/access-control/types';
+
+import {
+  editor,
+  upload,
+  git,
+} from '@@/BoxSelector/common-options/build-methods';
+
+import { EdgeTemplateSettings } from '../types';
+
+export const initialBuildMethods = [editor, upload, git] as const;
+
+export type Method = (typeof initialBuildMethods)[number]['value'];
+
+export interface FormValues extends CommonFieldsValues {
+  Platform: Platform;
+  Type: StackType;
+  Method: Method;
+  FileContent: string;
+  File: File | undefined;
+  Git: GitFormModel;
+  Variables: DefinitionFieldValues;
+  AccessControl?: AccessControlFormData;
+  EdgeSettings?: EdgeTemplateSettings;
+}

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

@@ -0,0 +1,94 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { parseAccessControlFormData } from '@/react/portainer/access-control/utils';
+import { useCurrentUser } from '@/react/hooks/useUser';
+import { StackType } from '@/react/common/stacks/types';
+
+import { Platform } from '../../types';
+import { useFetchTemplateFile } from '../../app-templates/queries/useFetchTemplateFile';
+import { getDefaultEdgeTemplateSettings } from '../types';
+
+import { FormValues, Method } from './types';
+
+export function useInitialValues({
+  defaultType,
+  isEdge = false,
+  buildMethods,
+}: {
+  defaultType: StackType;
+  isEdge?: boolean;
+  buildMethods: Array<Method>;
+}): FormValues | undefined {
+  const { user, isAdmin } = useCurrentUser();
+  const { appTemplateId, type = defaultType } = useAppTemplateParams();
+
+  const fileContentQuery = useFetchTemplateFile(appTemplateId);
+  if (fileContentQuery.isLoading) {
+    return undefined;
+  }
+
+  return {
+    Title: '',
+    FileContent: fileContentQuery.data ?? '',
+    Type: type,
+    Platform: Platform.LINUX,
+    File: undefined,
+    Method: buildMethods[0],
+    Description: '',
+    Note: '',
+    Logo: '',
+    Variables: [],
+    Git: {
+      RepositoryURL: '',
+      RepositoryReferenceName: '',
+      RepositoryAuthentication: false,
+      RepositoryUsername: '',
+      RepositoryPassword: '',
+      ComposeFilePathInRepository: 'docker-compose.yml',
+      AdditionalFiles: [],
+      RepositoryURLValid: true,
+      TLSSkipVerify: false,
+    },
+    AccessControl: isEdge
+      ? undefined
+      : parseAccessControlFormData(isAdmin, user.Id),
+    EdgeSettings: isEdge ? getDefaultEdgeTemplateSettings() : undefined,
+  };
+}
+
+function useAppTemplateParams() {
+  const {
+    params: { type, appTemplateId },
+  } = useCurrentStateAndParams();
+
+  return {
+    type: getStackType(type),
+    appTemplateId: getTemplateId(appTemplateId),
+  };
+
+  function getStackType(type: string): StackType | undefined {
+    if (!type) {
+      return undefined;
+    }
+
+    const typeNum = parseInt(type, 10);
+
+    if (
+      [
+        StackType.DockerSwarm,
+        StackType.DockerCompose,
+        StackType.Kubernetes,
+      ].includes(typeNum)
+    ) {
+      return typeNum;
+    }
+
+    return undefined;
+  }
+
+  function getTemplateId(appTemplateId: string): number | undefined {
+    const id = parseInt(appTemplateId, 10);
+
+    return Number.isNaN(id) ? undefined : id;
+  }
+}

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

@@ -0,0 +1,61 @@
+import { mixed, number, object, string } from 'yup';
+import { useMemo } from 'react';
+
+import { StackType } from '@/react/common/stacks/types';
+import { validation as commonFieldsValidation } from '@/react/portainer/custom-templates/components/CommonFields';
+import { Platform } from '@/react/portainer/templates/types';
+import { variablesValidation } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { buildGitValidationSchema } from '@/react/portainer/gitops/GitForm';
+import { useGitCredentials } from '@/react/portainer/account/git-credentials/git-credentials.service';
+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 { file } from '@@/form-components/yup-file-validation';
+import {
+  editor,
+  git,
+  upload,
+} from '@@/BoxSelector/common-options/build-methods';
+
+import { initialBuildMethods } from './types';
+
+export function useValidation(isEdge: boolean) {
+  const { user } = useCurrentUser();
+  const gitCredentialsQuery = useGitCredentials(user.Id);
+  const customTemplatesQuery = useCustomTemplates();
+
+  return useMemo(
+    () =>
+      object({
+        Platform: number()
+          .oneOf([Platform.LINUX, Platform.WINDOWS])
+          .default(Platform.LINUX),
+        Type: number()
+          .oneOf([
+            StackType.DockerCompose,
+            StackType.DockerSwarm,
+            StackType.Kubernetes,
+          ])
+          .default(StackType.DockerCompose),
+        Method: string().oneOf(initialBuildMethods.map((m) => m.value)),
+        FileContent: string().when('Method', {
+          is: editor.value,
+          then: (schema) => schema.required('Template is required.'),
+        }),
+        File: file().when('Method', {
+          is: upload.value,
+          then: (schema) => schema.required(),
+        }),
+        Git: mixed().when('Method', {
+          is: git.value,
+          then: () => buildGitValidationSchema(gitCredentialsQuery.data || []),
+        }),
+        Variables: variablesValidation(),
+        EdgeSettings: isEdge ? edgeFieldsetValidation() : mixed(),
+      }).concat(
+        commonFieldsValidation({ templates: customTemplatesQuery.data })
+      ),
+    [customTemplatesQuery.data, gitCredentialsQuery.data, isEdge]
+  );
+}

app/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation.ts

@@ -10,57 +10,96 @@ import {
   withInvalidate,
 } from '@/react-tools/react-query';
 import { StackType } from '@/react/common/stacks/types';
-import { FormValues } from '@/react/edge/templates/custom-templates/CreateView/types';
 import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
 import {
   CustomTemplate,
   EdgeTemplateSettings,
 } from '@/react/portainer/templates/custom-templates/types';
+import { GitFormModel } from '@/react/portainer/gitops/types';
+import { DefinitionFieldValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import { AccessControlFormData } from '@/react/portainer/access-control/types';
+import { applyResourceControl } from '@/react/portainer/access-control/access-control.service';
+import { useCurrentUser } from '@/react/hooks/useUser';
+import { UserId } from '@/portainer/users/types';
+import { saveGitCredentialsIfNeeded } from '@/react/portainer/account/git-credentials/queries/useCreateGitCredentialsMutation';
 
 import { Platform } from '../../types';
 
 import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+interface CreateTemplatePayload {
+  EdgeTemplate?: boolean;
+  Platform: Platform;
+  Type: StackType;
+  Method: 'editor' | 'upload' | 'repository';
+  FileContent: string;
+  File: File | undefined;
+  Git: GitFormModel;
+  Variables: DefinitionFieldValues;
+  EdgeSettings?: EdgeTemplateSettings;
+  Title: string;
+  Description: string;
+  Note: string;
+  Logo: string;
+  AccessControl?: AccessControlFormData;
+}
 
 export function useCreateTemplateMutation() {
+  const { user } = useCurrentUser();
   const queryClient = useQueryClient();
 
   return useMutation(
-    createTemplate,
+    async (payload: CreateTemplatePayload) => {
+      const template = await createTemplate(user.Id, payload);
+      const resourceControl = template.ResourceControl;
+
+      if (resourceControl && payload.AccessControl) {
+        await applyResourceControl(payload.AccessControl, resourceControl.Id);
+      }
+
+      return template;
+    },
     mutationOptions(
-      withInvalidate(queryClient, [['custom-templates']]),
+      withInvalidate(queryClient, [queryKeys.base()]),
       withGlobalError('Failed to create template')
     )
   );
 }
 
-function createTemplate({
-  Method,
-  Git,
-  ...values
-}: FormValues & { EdgeTemplate?: boolean }) {
-  switch (Method) {
+function createTemplate(userId: UserId, payload: CreateTemplatePayload) {
+  switch (payload.Method) {
     case 'editor':
-      return createTemplateFromText(values);
+      return createTemplateFromText(payload);
     case 'upload':
-      return createTemplateFromFile(values);
+      return createTemplateFromFile(payload);
     case 'repository':
-      return createTemplateFromGit({
-        ...values,
-        ...Git,
-        ...(values.EdgeSettings
-          ? {
-              EdgeSettings: {
-                ...values.EdgeSettings,
-                ...values.EdgeSettings.RelativePathSettings,
-              },
-            }
-          : {}),
-      });
+      return createTemplateAndGitCredential(userId, payload);
     default:
       throw new Error('Unknown method');
   }
 }
 
+async function createTemplateAndGitCredential(
+  userId: UserId,
+  { Git: gitModel, ...values }: CreateTemplatePayload
+) {
+  const newGitModel = await saveGitCredentialsIfNeeded(userId, gitModel);
+
+  return createTemplateFromGit({
+    ...values,
+    ...newGitModel,
+    ...(values.EdgeSettings
+      ? {
+          EdgeSettings: {
+            ...values.EdgeSettings,
+            ...values.EdgeSettings.RelativePathSettings,
+          },
+        }
+      : {}),
+  });
+}
+
 /**
  * Payload for creating a custom template from file content.
  */
@@ -179,6 +218,10 @@ interface CustomTemplateFromGitRepositoryPayload {
   RepositoryUsername?: string;
   /** Password used in basic authentication when RepositoryAuthentication is true. */
   RepositoryPassword?: string;
+  /** GitCredentialID used to identify the bound git credential. Required when RepositoryAuthentication
+   * is true and RepositoryUsername/RepositoryPassword are not provided
+   */
+  RepositoryGitCredentialID?: number;
   /** Path to the Stack file inside the Git repository. */
   ComposeFilePathInRepository: string;
   /** Definitions of variables in the stack file. */