feat(edge/templates): introduce custom templates [EE-6208] (#10561)

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

@@ -0,0 +1,107 @@
+import { Formik } from 'formik';
+import { useCurrentStateAndParams, 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 { Platform } from '@/react/portainer/templates/types';
+import { useFetchTemplateFile } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateFile';
+
+import { editor } from '@@/BoxSelector/common-options/build-methods';
+
+import { InnerForm } from './InnerForm';
+import { FormValues } from './types';
+import { useValidation } from './useValidation';
+
+export function CreateTemplateForm() {
+  const router = useRouter();
+  const mutation = useCreateTemplateMutation();
+  const validation = useValidation();
+  const { appTemplateId, type } = useParams();
+
+  const fileContentQuery = useFetchTemplateFile(appTemplateId);
+
+  if (fileContentQuery.isLoading) {
+    return null;
+  }
+
+  const initialValues: FormValues = {
+    Title: '',
+    FileContent: fileContentQuery.data ?? '',
+    Type: type,
+    File: undefined,
+    Method: editor.value,
+    Description: '',
+    Note: '',
+    Logo: '',
+    Platform: Platform.LINUX,
+    Variables: [],
+    Git: {
+      RepositoryURL: '',
+      RepositoryReferenceName: '',
+      RepositoryAuthentication: false,
+      RepositoryUsername: '',
+      RepositoryPassword: '',
+      ComposeFilePathInRepository: 'docker-compose.yml',
+      AdditionalFiles: [],
+      RepositoryURLValid: true,
+      TLSSkipVerify: false,
+    },
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validationSchema={validation}
+      validateOnMount
+    >
+      <InnerForm isLoading={mutation.isLoading} />
+    </Formik>
+  );
+
+  function handleSubmit(values: FormValues) {
+    mutation.mutate(
+      { ...values, EdgeTemplate: true },
+      {
+        onSuccess() {
+          notifySuccess('Success', 'Template created');
+          router.stateService.go('^');
+        },
+      }
+    );
+  }
+}
+
+function useParams() {
+  const {
+    params: { type = StackType.DockerCompose, appTemplateId },
+  } = useCurrentStateAndParams();
+
+  return {
+    type: getStackType(type),
+    appTemplateId: getTemplateId(appTemplateId),
+  };
+
+  function getStackType(type: string): StackType {
+    const typeNum = parseInt(type, 10);
+
+    if (
+      [
+        StackType.DockerSwarm,
+        StackType.DockerCompose,
+        StackType.Kubernetes,
+      ].includes(typeNum)
+    ) {
+      return typeNum;
+    }
+
+    return StackType.DockerCompose;
+  }
+
+  function getTemplateId(appTemplateId: string): number | undefined {
+    const id = parseInt(appTemplateId, 10);
+
+    return Number.isNaN(id) ? undefined : id;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+
+import { CreateTemplateForm } from './CreateTemplateForm';
+
+export function CreateView() {
+  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>
+              <CreateTemplateForm />
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,172 @@
+import { Form, 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 { 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 {
+  editor,
+  upload,
+  git,
+} from '@@/BoxSelector/common-options/build-methods';
+
+import { FormValues, Method, buildMethods } from './types';
+
+export function InnerForm({ isLoading }: { isLoading: boolean }) {
+  const {
+    values,
+    initialValues,
+    setFieldValue,
+    errors,
+    isValid,
+    setFieldError,
+    setValues,
+    isSubmitting,
+  } = useFormikContext<FormValues>();
+
+  usePreventExit(
+    initialValues.FileContent,
+    values.FileContent,
+    values.Method === editor.value && !isSubmitting
+  );
+  return (
+    <Form className="form-horizontal">
+      <CommonFields
+        values={values}
+        onChange={(newValues) =>
+          setValues((values) => ({ ...values, ...newValues }))
+        }
+        errors={errors}
+      />
+
+      <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>
+
+      {values.Method === editor.value && (
+        <WebEditorForm
+          id="custom-template-creation-editor"
+          value={values.FileContent}
+          onChange={handleChangeFileContent}
+          yaml
+          placeholder="Define or paste the content of your docker compose file here"
+          error={errors.FileContent}
+        >
+          <p>
+            You can get more information about Compose file format in the{' '}
+            <a
+              href="https://docs.docker.com/compose/compose-file/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              official documentation
+            </a>
+            .
+          </p>
+        </WebEditorForm>
+      )}
+
+      {values.Method === upload.value && (
+        <FileUploadForm
+          description="You can upload a Compose file from your computer."
+          value={values.File}
+          onChange={(value) => setFieldValue('File', value)}
+          required
+        />
+      )}
+
+      {values.Method === git.value && (
+        <GitForm
+          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={values.Method === editor.value}
+          errors={errors.Variables}
+        />
+      )}
+
+      <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/edge/templates/custom-templates/CreateView/index.ts

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

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

@@ -0,0 +1,25 @@
+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 {
+  editor,
+  upload,
+  git,
+} from '@@/BoxSelector/common-options/build-methods';
+
+export const buildMethods = [editor, upload, git] as const;
+
+export type Method = (typeof buildMethods)[number]['value'];
+
+export interface FormValues extends CommonFieldsValues {
+  Platform: Platform;
+  Type: StackType;
+  Method: Method;
+  FileContent: string;
+  File: File | undefined;
+  Git: GitFormModel;
+  Variables: DefinitionFieldValues;
+}

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

@@ -0,0 +1,59 @@
+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 { file } from '@@/form-components/yup-file-validation';
+import {
+  editor,
+  git,
+  upload,
+} from '@@/BoxSelector/common-options/build-methods';
+
+import { buildMethods } from './types';
+
+export function useValidation() {
+  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(buildMethods.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(),
+      }).concat(
+        commonFieldsValidation({ templates: customTemplatesQuery.data })
+      ),
+    [customTemplatesQuery.data, gitCredentialsQuery.data]
+  );
+}