mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
feat(custom-templates): migrate create view to react [EE-6400] (#10715)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
bd5ba7b5d0
commit
dabcf4f7db
30 changed files with 495 additions and 960 deletions
|
|
@ -1,120 +0,0 @@
|
|||
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 { 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';
|
||||
|
||||
export function CreateTemplateForm() {
|
||||
const router = useRouter();
|
||||
const mutation = useCreateTemplateMutation();
|
||||
const validation = useValidation();
|
||||
const { appTemplateId, type } = useParams();
|
||||
const { saveCredentials, isLoading: isSaveCredentialsLoading } =
|
||||
useSaveCredentialsIfRequired();
|
||||
|
||||
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,
|
||||
},
|
||||
EdgeSettings: getDefaultEdgeTemplateSettings(),
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validation}
|
||||
validateOnMount
|
||||
>
|
||||
<InnerForm isLoading={mutation.isLoading || isSaveCredentialsLoading} />
|
||||
</Formik>
|
||||
);
|
||||
|
||||
async function handleSubmit(values: FormValues) {
|
||||
const credentialId = await saveCredentials(values.Git);
|
||||
|
||||
mutation.mutate(
|
||||
{
|
||||
...values,
|
||||
EdgeTemplate: true,
|
||||
Git: toGitRequest(values.Git, credentialId),
|
||||
},
|
||||
{
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
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(),
|
||||
});
|
||||
}
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
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 { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
|
||||
import { applySetStateAction } from '@/react-tools/apply-set-state-action';
|
||||
|
||||
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';
|
||||
import { EdgeSettingsFieldset } from './EdgeSettingsFieldset';
|
||||
|
||||
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 && !isLoading
|
||||
);
|
||||
|
||||
const isGit = values.Method === git.value;
|
||||
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
|
||||
/>
|
||||
)}
|
||||
|
||||
{isGit && (
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
|
||||
{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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { CreateView } from './CreateView';
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
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 { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/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;
|
||||
EdgeSettings?: EdgeTemplateSettings;
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
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';
|
||||
import { edgeFieldsetValidation } from './EdgeSettingsFieldset.validation';
|
||||
|
||||
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(),
|
||||
EdgeSettings: edgeFieldsetValidation(),
|
||||
}).concat(
|
||||
commonFieldsValidation({ templates: customTemplatesQuery.data })
|
||||
),
|
||||
[customTemplatesQuery.data, gitCredentialsQuery.data]
|
||||
);
|
||||
}
|
||||
|
|
@ -13,14 +13,13 @@ import {
|
|||
import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
|
||||
import { applySetStateAction } from '@/react-tools/apply-set-state-action';
|
||||
import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
|
||||
import { EdgeSettingsFieldset } from '@/react/portainer/templates/custom-templates/CreateView/EdgeSettingsFieldset';
|
||||
|
||||
import { WebEditorForm, usePreventExit } from '@@/WebEditorForm';
|
||||
import { FormActions } from '@@/form-components/FormActions';
|
||||
import { Button } from '@@/buttons';
|
||||
import { FormError } from '@@/form-components/FormError';
|
||||
|
||||
import { EdgeSettingsFieldset } from '../CreateView/EdgeSettingsFieldset';
|
||||
|
||||
import { FormValues } from './types';
|
||||
|
||||
export function InnerForm({
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ import { useGitCredentials } from '@/react/portainer/account/git-credentials/git
|
|||
import { useCurrentUser } from '@/react/hooks/useUser';
|
||||
import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
|
||||
import { Platform } from '@/react/portainer/templates/types';
|
||||
|
||||
import { edgeFieldsetValidation } from '../CreateView/EdgeSettingsFieldset.validation';
|
||||
import { edgeFieldsetValidation } from '@/react/portainer/templates/custom-templates/CreateView/EdgeSettingsFieldset.validation';
|
||||
|
||||
export function useValidation(
|
||||
currentTemplateId: CustomTemplate['Id'],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue