mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 05:45:22 +02:00
feat(edge/stacks): add app templates to deploy types [EE-6632] (#11070)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
edea9e3481
commit
fe6ed55cab
34 changed files with 1293 additions and 482 deletions
|
|
@ -1,149 +0,0 @@
|
|||
import { SetStateAction, useEffect, useState } from 'react';
|
||||
import sanitize from 'sanitize-html';
|
||||
import { FormikErrors } from 'formik';
|
||||
|
||||
import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
|
||||
import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
|
||||
import {
|
||||
CustomTemplatesVariablesField,
|
||||
VariablesFieldValue,
|
||||
getVariablesFieldDefaultValues,
|
||||
} from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
|
||||
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { PortainerSelect } from '@@/form-components/PortainerSelect';
|
||||
|
||||
export interface Values {
|
||||
template: CustomTemplate | undefined;
|
||||
variables: VariablesFieldValue;
|
||||
}
|
||||
|
||||
export function TemplateFieldset({
|
||||
values: initialValues,
|
||||
setValues: setInitialValues,
|
||||
errors,
|
||||
}: {
|
||||
errors?: FormikErrors<Values>;
|
||||
values: Values;
|
||||
setValues: (values: SetStateAction<Values>) => void;
|
||||
}) {
|
||||
const [values, setControlledValues] = useState(initialValues); // todo remove when all view is in react
|
||||
|
||||
useEffect(() => {
|
||||
if (initialValues.template?.Id !== values.template?.Id) {
|
||||
setControlledValues(initialValues);
|
||||
}
|
||||
}, [initialValues, values.template?.Id]);
|
||||
|
||||
const templatesQuery = useCustomTemplates({
|
||||
params: {
|
||||
edge: true,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<TemplateSelector
|
||||
error={errors?.template}
|
||||
value={values.template?.Id}
|
||||
onChange={(value) => {
|
||||
setValues((values) => {
|
||||
const template = templatesQuery.data?.find(
|
||||
(template) => template.Id === value
|
||||
);
|
||||
return {
|
||||
...values,
|
||||
template,
|
||||
variables: getVariablesFieldDefaultValues(
|
||||
template?.Variables || []
|
||||
),
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{values.template && (
|
||||
<>
|
||||
{values.template.Note && (
|
||||
<div>
|
||||
<div className="col-sm-12 form-section-title"> Information </div>
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
<div
|
||||
className="template-note"
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitize(values.template.Note),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CustomTemplatesVariablesField
|
||||
onChange={(value) => {
|
||||
setValues((values) => ({
|
||||
...values,
|
||||
variables: value,
|
||||
}));
|
||||
}}
|
||||
value={values.variables}
|
||||
definitions={values.template.Variables}
|
||||
errors={errors?.variables}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
function setValues(values: SetStateAction<Values>) {
|
||||
setControlledValues(values);
|
||||
setInitialValues(values);
|
||||
}
|
||||
}
|
||||
|
||||
function TemplateSelector({
|
||||
value,
|
||||
onChange,
|
||||
error,
|
||||
}: {
|
||||
value: CustomTemplate['Id'] | undefined;
|
||||
onChange: (value: CustomTemplate['Id'] | undefined) => void;
|
||||
error?: string;
|
||||
}) {
|
||||
const templatesQuery = useCustomTemplates({
|
||||
params: {
|
||||
edge: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!templatesQuery.data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<FormControl label="Template" inputId="stack_template" errors={error}>
|
||||
<PortainerSelect
|
||||
placeholder="Select an Edge stack template"
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
options={templatesQuery.data.map((template) => ({
|
||||
label: `${template.Title} - ${template.Description}`,
|
||||
value: template.Id,
|
||||
}))}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
|
||||
function handleChange(value: CustomTemplate['Id']) {
|
||||
onChange(value);
|
||||
}
|
||||
}
|
||||
|
||||
export function getInitialTemplateValues() {
|
||||
return {
|
||||
template: null,
|
||||
variables: [],
|
||||
file: '',
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { render, screen } from '@/react-tools/test-utils';
|
||||
import {
|
||||
EnvVarType,
|
||||
TemplateViewModel,
|
||||
} from '@/react/portainer/templates/app-templates/view-model';
|
||||
|
||||
import { AppTemplateFieldset } from './AppTemplateFieldset';
|
||||
|
||||
test('renders AppTemplateFieldset component', () => {
|
||||
const testedEnv = {
|
||||
name: 'VAR2',
|
||||
label: 'Variable 2',
|
||||
default: 'value2',
|
||||
value: 'value2',
|
||||
type: EnvVarType.Text,
|
||||
};
|
||||
|
||||
const env = [
|
||||
{
|
||||
name: 'VAR1',
|
||||
label: 'Variable 1',
|
||||
default: 'value1',
|
||||
value: 'value1',
|
||||
type: EnvVarType.Text,
|
||||
},
|
||||
testedEnv,
|
||||
];
|
||||
const template = {
|
||||
Note: 'This is a template note',
|
||||
Env: env,
|
||||
} as TemplateViewModel;
|
||||
|
||||
const values: Record<string, string> = {
|
||||
VAR1: 'value1',
|
||||
VAR2: 'value2',
|
||||
};
|
||||
|
||||
const onChange = vi.fn();
|
||||
|
||||
render(
|
||||
<AppTemplateFieldset
|
||||
template={template}
|
||||
values={values}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
|
||||
const templateNoteElement = screen.getByText('This is a template note');
|
||||
expect(templateNoteElement).toBeInTheDocument();
|
||||
|
||||
const envVarsFieldsetElement = screen.getByLabelText(testedEnv.label, {
|
||||
exact: false,
|
||||
});
|
||||
expect(envVarsFieldsetElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { FormikErrors } from 'formik';
|
||||
|
||||
import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
|
||||
|
||||
import { EnvVarsFieldset } from './EnvVarsFieldset';
|
||||
import { TemplateNote } from './TemplateNote';
|
||||
|
||||
export function AppTemplateFieldset({
|
||||
template,
|
||||
values,
|
||||
onChange,
|
||||
errors,
|
||||
}: {
|
||||
template: TemplateViewModel;
|
||||
values: Record<string, string>;
|
||||
onChange: (value: Record<string, string>) => void;
|
||||
errors?: FormikErrors<Record<string, string>>;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<TemplateNote note={template.Note} />
|
||||
<EnvVarsFieldset
|
||||
options={template.Env || []}
|
||||
value={values}
|
||||
onChange={onChange}
|
||||
errors={errors}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { CustomTemplatesVariablesField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
|
||||
import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
|
||||
|
||||
import { ArrayError } from '@@/form-components/InputList/InputList';
|
||||
|
||||
import { Values } from './types';
|
||||
import { TemplateNote } from './TemplateNote';
|
||||
|
||||
export function CustomTemplateFieldset({
|
||||
errors,
|
||||
onChange,
|
||||
values,
|
||||
template,
|
||||
}: {
|
||||
values: Values['variables'];
|
||||
onChange: (values: Values['variables']) => void;
|
||||
errors: ArrayError<Values['variables']> | undefined;
|
||||
template: CustomTemplate;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<TemplateNote note={template.Note} />
|
||||
|
||||
<CustomTemplatesVariablesField
|
||||
onChange={onChange}
|
||||
value={values}
|
||||
definitions={template.Variables}
|
||||
errors={errors}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
import { vi } from 'vitest';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
import { render, screen } from '@/react-tools/test-utils';
|
||||
|
||||
import {
|
||||
EnvVarsFieldset,
|
||||
getDefaultValues,
|
||||
envVarsFieldsetValidation,
|
||||
} from './EnvVarsFieldset';
|
||||
|
||||
test('renders EnvVarsFieldset component', () => {
|
||||
const onChange = vi.fn();
|
||||
const options = [
|
||||
{ name: 'VAR1', label: 'Variable 1', preset: false },
|
||||
{ name: 'VAR2', label: 'Variable 2', preset: false },
|
||||
] as const;
|
||||
const value = { VAR1: 'Value 1', VAR2: 'Value 2' };
|
||||
const errors = {};
|
||||
|
||||
render(
|
||||
<EnvVarsFieldset
|
||||
onChange={onChange}
|
||||
options={[...options]}
|
||||
value={value}
|
||||
errors={errors}
|
||||
/>
|
||||
);
|
||||
|
||||
options.forEach((option) => {
|
||||
const labelElement = screen.getByLabelText(option.label, { exact: false });
|
||||
expect(labelElement).toBeInTheDocument();
|
||||
|
||||
const inputElement = screen.getByDisplayValue(value[option.name]);
|
||||
expect(inputElement).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
test('calls onChange when input value changes', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onChange = vi.fn();
|
||||
const options = [{ name: 'VAR1', label: 'Variable 1', preset: false }];
|
||||
const value = { VAR1: 'Value 1' };
|
||||
const errors = {};
|
||||
|
||||
render(
|
||||
<EnvVarsFieldset
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
value={value}
|
||||
errors={errors}
|
||||
/>
|
||||
);
|
||||
|
||||
const inputElement = screen.getByDisplayValue(value.VAR1);
|
||||
await user.clear(inputElement);
|
||||
expect(onChange).toHaveBeenCalledWith({ VAR1: '' });
|
||||
|
||||
const newValue = 'New Value';
|
||||
await user.type(inputElement, newValue);
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('renders error message when there are errors', () => {
|
||||
const onChange = vi.fn();
|
||||
const options = [{ name: 'VAR1', label: 'Variable 1', preset: false }];
|
||||
const value = { VAR1: 'Value 1' };
|
||||
const errors = { VAR1: 'Required' };
|
||||
|
||||
render(
|
||||
<EnvVarsFieldset
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
value={value}
|
||||
errors={errors}
|
||||
/>
|
||||
);
|
||||
|
||||
const errorElement = screen.getByText('Required');
|
||||
expect(errorElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('returns default values', () => {
|
||||
const definitions = [
|
||||
{
|
||||
name: 'VAR1',
|
||||
label: 'Variable 1',
|
||||
preset: false,
|
||||
default: 'Default Value 1',
|
||||
},
|
||||
{
|
||||
name: 'VAR2',
|
||||
label: 'Variable 2',
|
||||
preset: false,
|
||||
default: 'Default Value 2',
|
||||
},
|
||||
];
|
||||
|
||||
const defaultValues = getDefaultValues(definitions);
|
||||
|
||||
expect(defaultValues).toEqual({
|
||||
VAR1: 'Default Value 1',
|
||||
VAR2: 'Default Value 2',
|
||||
});
|
||||
});
|
||||
|
||||
test('validates env vars fieldset', () => {
|
||||
const schema = envVarsFieldsetValidation();
|
||||
|
||||
const validData = { VAR1: 'Value 1', VAR2: 'Value 2' };
|
||||
const invalidData = { VAR1: '', VAR2: 'Value 2' };
|
||||
|
||||
const validResult = schema.isValidSync(validData);
|
||||
const invalidResult = schema.isValidSync(invalidData);
|
||||
|
||||
expect(validResult).toBe(true);
|
||||
expect(invalidResult).toBe(false);
|
||||
});
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { FormikErrors } from 'formik';
|
||||
import { SchemaOf, array, string } from 'yup';
|
||||
|
||||
import { TemplateEnv } from '@/react/portainer/templates/app-templates/types';
|
||||
|
||||
|
|
@ -20,13 +21,13 @@ export function EnvVarsFieldset({
|
|||
}) {
|
||||
return (
|
||||
<>
|
||||
{options.map((env, index) => (
|
||||
{options.map((env) => (
|
||||
<Item
|
||||
key={env.name}
|
||||
option={env}
|
||||
value={value[env.name]}
|
||||
onChange={(value) => handleChange(env.name, value)}
|
||||
errors={errors?.[index]}
|
||||
errors={errors?.[env.name]}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
|
|
@ -48,11 +49,13 @@ function Item({
|
|||
onChange: (value: string) => void;
|
||||
errors?: FormikErrors<string>;
|
||||
}) {
|
||||
const inputId = `env_var_${option.name}`;
|
||||
return (
|
||||
<FormControl
|
||||
label={option.label || option.name}
|
||||
required={!option.preset}
|
||||
errors={errors}
|
||||
inputId={inputId}
|
||||
>
|
||||
{option.select ? (
|
||||
<Select
|
||||
|
|
@ -63,14 +66,29 @@ function Item({
|
|||
value: o.value,
|
||||
}))}
|
||||
disabled={option.preset}
|
||||
id={inputId}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
disabled={option.preset}
|
||||
id={inputId}
|
||||
/>
|
||||
)}
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
|
||||
export function getDefaultValues(definitions: Array<TemplateEnv>): Value {
|
||||
return Object.fromEntries(definitions.map((v) => [v.name, v.default || '']));
|
||||
}
|
||||
|
||||
export function envVarsFieldsetValidation(): SchemaOf<Value> {
|
||||
return (
|
||||
array()
|
||||
.transform((_, orig) => Object.values(orig))
|
||||
// casting to return the correct type - validation works as expected
|
||||
.of(string().required('Required')) as unknown as SchemaOf<Value>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
import { SetStateAction, useEffect, useState } from 'react';
|
||||
import { FormikErrors } from 'formik';
|
||||
|
||||
import { getVariablesFieldDefaultValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
|
||||
|
||||
import { getDefaultValues as getAppVariablesDefaultValues } from './EnvVarsFieldset';
|
||||
import { TemplateSelector } from './TemplateSelector';
|
||||
import { SelectedTemplateValue, Values } from './types';
|
||||
import { CustomTemplateFieldset } from './CustomTemplateFieldset';
|
||||
import { AppTemplateFieldset } from './AppTemplateFieldset';
|
||||
|
||||
export function TemplateFieldset({
|
||||
values: initialValues,
|
||||
setValues: setInitialValues,
|
||||
errors,
|
||||
}: {
|
||||
errors?: FormikErrors<Values>;
|
||||
values: Values;
|
||||
setValues: (values: SetStateAction<Values>) => void;
|
||||
}) {
|
||||
const [values, setControlledValues] = useState(initialValues); // todo remove when all view is in react
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
initialValues.type !== values.type ||
|
||||
initialValues.template?.Id !== values.template?.Id
|
||||
) {
|
||||
setControlledValues(initialValues);
|
||||
}
|
||||
}, [initialValues, values]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TemplateSelector
|
||||
error={
|
||||
typeof errors?.template === 'string' ? errors?.template : undefined
|
||||
}
|
||||
value={values}
|
||||
onChange={handleChangeTemplate}
|
||||
/>
|
||||
{values.template && (
|
||||
<>
|
||||
{values.type === 'custom' && (
|
||||
<CustomTemplateFieldset
|
||||
template={values.template}
|
||||
values={values.variables}
|
||||
onChange={(variables) =>
|
||||
setValues((values) => ({ ...values, variables }))
|
||||
}
|
||||
errors={errors?.variables}
|
||||
/>
|
||||
)}
|
||||
|
||||
{values.type === 'app' && (
|
||||
<AppTemplateFieldset
|
||||
template={values.template}
|
||||
values={values.envVars}
|
||||
onChange={(envVars) =>
|
||||
setValues((values) => ({ ...values, envVars }))
|
||||
}
|
||||
errors={errors?.envVars}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
function setValues(values: SetStateAction<Values>) {
|
||||
setControlledValues(values);
|
||||
setInitialValues(values);
|
||||
}
|
||||
|
||||
function handleChangeTemplate(value?: SelectedTemplateValue) {
|
||||
setValues(() => {
|
||||
if (!value || !value.type || !value.template) {
|
||||
return {
|
||||
type: undefined,
|
||||
template: undefined,
|
||||
variables: [],
|
||||
envVars: {},
|
||||
};
|
||||
}
|
||||
|
||||
if (value.type === 'app') {
|
||||
return {
|
||||
template: value.template,
|
||||
type: value.type,
|
||||
variables: [],
|
||||
envVars: getAppVariablesDefaultValues(value.template.Env || []),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
template: value.template,
|
||||
type: value.type,
|
||||
variables: getVariablesFieldDefaultValues(
|
||||
value.template.Variables || []
|
||||
),
|
||||
envVars: {},
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function getInitialTemplateValues(): Values {
|
||||
return {
|
||||
template: undefined,
|
||||
type: undefined,
|
||||
variables: [],
|
||||
file: '',
|
||||
envVars: {},
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { vi } from 'vitest';
|
||||
|
||||
import { render, screen } from '@/react-tools/test-utils';
|
||||
|
||||
import { TemplateNote } from './TemplateNote';
|
||||
|
||||
vi.mock('sanitize-html', () => ({
|
||||
default: (note: string) => note, // Mock the sanitize-html library to return the input as is
|
||||
}));
|
||||
|
||||
test('renders template note', async () => {
|
||||
render(<TemplateNote note="Test note" />);
|
||||
|
||||
const templateNoteElement = screen.getByText(/Information/);
|
||||
expect(templateNoteElement).toBeInTheDocument();
|
||||
|
||||
const noteElement = screen.getByText(/Test note/);
|
||||
expect(noteElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('does not render template note when note is undefined', async () => {
|
||||
render(<TemplateNote note={undefined} />);
|
||||
|
||||
const templateNoteElement = screen.queryByText(/Information/);
|
||||
expect(templateNoteElement).not.toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import sanitize from 'sanitize-html';
|
||||
|
||||
export function TemplateNote({ note }: { note: string | undefined }) {
|
||||
if (!note) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div className="col-sm-12 form-section-title"> Information </div>
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
<div
|
||||
className="template-note"
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitize(note),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
import { vi } from 'vitest';
|
||||
import { HttpResponse, http } from 'msw';
|
||||
|
||||
import { renderWithQueryClient, screen } from '@/react-tools/test-utils';
|
||||
import { AppTemplate } from '@/react/portainer/templates/app-templates/types';
|
||||
import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
|
||||
import { server } from '@/setup-tests/server';
|
||||
import selectEvent from '@/react/test-utils/react-select';
|
||||
|
||||
import { SelectedTemplateValue } from './types';
|
||||
import { TemplateSelector } from './TemplateSelector';
|
||||
|
||||
test('renders TemplateSelector component', async () => {
|
||||
render();
|
||||
|
||||
const templateSelectorElement = screen.getByLabelText('Template');
|
||||
expect(templateSelectorElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// eslint-disable-next-line vitest/expect-expect
|
||||
test('selects an edge app template', async () => {
|
||||
const onChange = vi.fn();
|
||||
|
||||
const selectedTemplate = {
|
||||
title: 'App Template 2',
|
||||
description: 'Description 2',
|
||||
id: 2,
|
||||
categories: ['edge'],
|
||||
};
|
||||
|
||||
const { select } = render({
|
||||
onChange,
|
||||
appTemplates: [
|
||||
{
|
||||
title: 'App Template 1',
|
||||
description: 'Description 1',
|
||||
id: 1,
|
||||
categories: ['edge'],
|
||||
},
|
||||
selectedTemplate,
|
||||
],
|
||||
});
|
||||
|
||||
await select('app', {
|
||||
Title: selectedTemplate.title,
|
||||
Description: selectedTemplate.description,
|
||||
});
|
||||
});
|
||||
|
||||
// eslint-disable-next-line vitest/expect-expect
|
||||
test('selects an edge custom template', async () => {
|
||||
const onChange = vi.fn();
|
||||
|
||||
const selectedTemplate = {
|
||||
Title: 'Custom Template 2',
|
||||
Description: 'Description 2',
|
||||
Id: 2,
|
||||
};
|
||||
|
||||
const { select } = render({
|
||||
onChange,
|
||||
customTemplates: [
|
||||
{
|
||||
Title: 'Custom Template 1',
|
||||
Description: 'Description 1',
|
||||
Id: 1,
|
||||
},
|
||||
selectedTemplate,
|
||||
],
|
||||
});
|
||||
|
||||
await select('custom', selectedTemplate);
|
||||
});
|
||||
|
||||
test('renders with error', async () => {
|
||||
render({
|
||||
error: 'Invalid template',
|
||||
});
|
||||
|
||||
const templateSelectorElement = screen.getByLabelText('Template');
|
||||
expect(templateSelectorElement).toBeInTheDocument();
|
||||
|
||||
const errorElement = screen.getByText('Invalid template');
|
||||
expect(errorElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('renders TemplateSelector component with no custom templates available', async () => {
|
||||
render({
|
||||
customTemplates: [],
|
||||
});
|
||||
|
||||
const templateSelectorElement = screen.getByLabelText('Template');
|
||||
expect(templateSelectorElement).toBeInTheDocument();
|
||||
|
||||
await selectEvent.openMenu(templateSelectorElement);
|
||||
|
||||
const noCustomTemplatesElement = screen.getByText(
|
||||
'No edge custom templates available'
|
||||
);
|
||||
expect(noCustomTemplatesElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
function render({
|
||||
onChange = vi.fn(),
|
||||
appTemplates = [],
|
||||
customTemplates = [],
|
||||
error,
|
||||
}: {
|
||||
onChange?: (value: SelectedTemplateValue) => void;
|
||||
appTemplates?: Array<Partial<AppTemplate>>;
|
||||
customTemplates?: Array<Partial<CustomTemplate>>;
|
||||
error?: string;
|
||||
} = {}) {
|
||||
server.use(
|
||||
http.get('/api/registries', async () => HttpResponse.json([])),
|
||||
http.get('/api/templates', async () =>
|
||||
HttpResponse.json({ templates: appTemplates, version: '3' })
|
||||
),
|
||||
http.get('/api/custom_templates', async () =>
|
||||
HttpResponse.json(customTemplates)
|
||||
)
|
||||
);
|
||||
|
||||
renderWithQueryClient(
|
||||
<TemplateSelector
|
||||
value={{ template: undefined, type: undefined }}
|
||||
onChange={onChange}
|
||||
error={error}
|
||||
/>
|
||||
);
|
||||
|
||||
return { select };
|
||||
|
||||
async function select(
|
||||
type: 'app' | 'custom',
|
||||
template: { Title: string; Description: string }
|
||||
) {
|
||||
const templateSelectorElement = screen.getByLabelText('Template');
|
||||
await selectEvent.select(
|
||||
templateSelectorElement,
|
||||
`${template.Title} - ${template.Description}`
|
||||
);
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith({
|
||||
template: expect.objectContaining(template),
|
||||
type,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
import { useMemo } from 'react';
|
||||
import { GroupBase } from 'react-select';
|
||||
|
||||
import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
|
||||
import { useAppTemplates } from '@/react/portainer/templates/app-templates/queries/useAppTemplates';
|
||||
import { TemplateType } from '@/react/portainer/templates/app-templates/types';
|
||||
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Select as ReactSelect } from '@@/form-components/ReactSelect';
|
||||
|
||||
import { SelectedTemplateValue } from './types';
|
||||
|
||||
export function TemplateSelector({
|
||||
value,
|
||||
onChange,
|
||||
error,
|
||||
}: {
|
||||
value: SelectedTemplateValue;
|
||||
onChange: (value: SelectedTemplateValue) => void;
|
||||
error?: string;
|
||||
}) {
|
||||
const { getTemplate, options } = useOptions();
|
||||
|
||||
return (
|
||||
<FormControl label="Template" inputId="template_selector" errors={error}>
|
||||
<ReactSelect
|
||||
inputId="template_selector"
|
||||
formatGroupLabel={GroupLabel}
|
||||
placeholder="Select an Edge stack template"
|
||||
value={{
|
||||
label: value.template?.Title,
|
||||
id: value.template?.Id,
|
||||
type: value.type,
|
||||
}}
|
||||
onChange={(value) => {
|
||||
if (!value) {
|
||||
onChange({
|
||||
template: undefined,
|
||||
type: undefined,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const { id, type } = value;
|
||||
if (!id || type === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const template = getTemplate({ id, type });
|
||||
onChange({ template, type } as SelectedTemplateValue);
|
||||
}}
|
||||
options={options}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
|
||||
function useOptions() {
|
||||
const customTemplatesQuery = useCustomTemplates({
|
||||
params: {
|
||||
edge: true,
|
||||
},
|
||||
});
|
||||
|
||||
const appTemplatesQuery = useAppTemplates({
|
||||
select: (templates) =>
|
||||
templates.filter(
|
||||
(template) =>
|
||||
template.Categories.includes('edge') &&
|
||||
template.Type !== TemplateType.Container
|
||||
),
|
||||
});
|
||||
|
||||
const options = useMemo(
|
||||
() =>
|
||||
[
|
||||
{
|
||||
label: 'Edge App Templates',
|
||||
options:
|
||||
appTemplatesQuery.data?.map((template) => ({
|
||||
label: `${template.Title} - ${template.Description}`,
|
||||
id: template.Id,
|
||||
type: 'app' as 'app' | 'custom',
|
||||
})) || [],
|
||||
},
|
||||
{
|
||||
label: 'Edge Custom Templates',
|
||||
options:
|
||||
customTemplatesQuery.data && customTemplatesQuery.data.length > 0
|
||||
? customTemplatesQuery.data.map((template) => ({
|
||||
label: `${template.Title} - ${template.Description}`,
|
||||
id: template.Id,
|
||||
type: 'custom' as 'app' | 'custom',
|
||||
}))
|
||||
: [
|
||||
{
|
||||
label: 'No edge custom templates available',
|
||||
id: 0,
|
||||
type: 'custom' as 'app' | 'custom',
|
||||
},
|
||||
],
|
||||
},
|
||||
] as const,
|
||||
[appTemplatesQuery.data, customTemplatesQuery.data]
|
||||
);
|
||||
|
||||
return { options, getTemplate };
|
||||
|
||||
function getTemplate({ type, id }: { type: 'app' | 'custom'; id: number }) {
|
||||
if (type === 'app') {
|
||||
const template = appTemplatesQuery.data?.find(
|
||||
(template) => template.Id === id
|
||||
);
|
||||
|
||||
if (!template) {
|
||||
throw new Error(`App template not found: ${id}`);
|
||||
}
|
||||
|
||||
return template;
|
||||
}
|
||||
|
||||
const template = customTemplatesQuery.data?.find(
|
||||
(template) => template.Id === id
|
||||
);
|
||||
|
||||
if (!template) {
|
||||
throw new Error(`Custom template not found: ${id}`);
|
||||
}
|
||||
return template;
|
||||
}
|
||||
}
|
||||
|
||||
function GroupLabel({ label }: GroupBase<unknown>) {
|
||||
return (
|
||||
<span className="font-bold text-black th-dark:text-white th-highcontrast:text-white">
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { VariablesFieldValue } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
|
||||
import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
|
||||
import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
|
||||
|
||||
export type SelectedTemplateValue =
|
||||
| { template: CustomTemplate; type: 'custom' }
|
||||
| { template: TemplateViewModel; type: 'app' }
|
||||
| { template: undefined; type: undefined };
|
||||
|
||||
export type Values = {
|
||||
file?: string;
|
||||
variables: VariablesFieldValue;
|
||||
envVars: Record<string, string>;
|
||||
} & SelectedTemplateValue;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { mixed, object, SchemaOf, string } from 'yup';
|
||||
|
||||
import { variablesFieldValidation } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
|
||||
import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
|
||||
|
||||
import { envVarsFieldsetValidation } from './EnvVarsFieldset';
|
||||
|
||||
export function validation({
|
||||
definitions,
|
||||
}: {
|
||||
definitions: VariableDefinition[];
|
||||
}) {
|
||||
return object({
|
||||
type: string().oneOf(['custom', 'app']).required(),
|
||||
envVars: envVarsFieldsetValidation()
|
||||
.optional()
|
||||
.when('type', {
|
||||
is: 'app',
|
||||
then: (schema: SchemaOf<unknown, never>) => schema.required(),
|
||||
}),
|
||||
file: mixed().optional(),
|
||||
template: object().optional().default(null),
|
||||
variables: variablesFieldValidation(definitions)
|
||||
.optional()
|
||||
.when('type', {
|
||||
is: 'custom',
|
||||
then: (schema) => schema.required(),
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
export { validation as templateFieldsetValidation };
|
||||
|
|
@ -1,37 +1,22 @@
|
|||
import { useParamState } from '@/react/hooks/useParamState';
|
||||
import { AppTemplatesList } from '@/react/portainer/templates/app-templates/AppTemplatesList';
|
||||
import { useAppTemplates } from '@/react/portainer/templates/app-templates/queries/useAppTemplates';
|
||||
import { TemplateType } from '@/react/portainer/templates/app-templates/types';
|
||||
|
||||
import { PageHeader } from '@@/PageHeader';
|
||||
|
||||
import { DeployFormWidget } from './DeployForm';
|
||||
|
||||
export function AppTemplatesView() {
|
||||
const [selectedTemplateId, setSelectedTemplateId] = useParamState<number>(
|
||||
'template',
|
||||
(param) => (param ? parseInt(param, 10) : 0)
|
||||
);
|
||||
const templatesQuery = useAppTemplates();
|
||||
const selectedTemplate = selectedTemplateId
|
||||
? templatesQuery.data?.find(
|
||||
(template) => template.Id === selectedTemplateId
|
||||
)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Application templates list" breadcrumbs="Templates" />
|
||||
{selectedTemplate && (
|
||||
<DeployFormWidget
|
||||
template={selectedTemplate}
|
||||
unselect={() => setSelectedTemplateId()}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AppTemplatesList
|
||||
templates={templatesQuery.data}
|
||||
selectedId={selectedTemplateId}
|
||||
onSelect={(template) => setSelectedTemplateId(template.Id)}
|
||||
templateLinkParams={(template) => ({
|
||||
to: 'edge.stacks.new',
|
||||
params: { templateId: template.Id, templateType: 'app' },
|
||||
})}
|
||||
disabledTypes={[TemplateType.Container]}
|
||||
fixedCategories={['edge']}
|
||||
storageKey="edge-app-templates"
|
||||
|
|
|
|||
|
|
@ -1,196 +0,0 @@
|
|||
import { Rocket } from 'lucide-react';
|
||||
import { Form, Formik } from 'formik';
|
||||
import { array, lazy, number, object, string } from 'yup';
|
||||
import { useRouter } from '@uirouter/react';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
|
||||
import { EnvironmentType } from '@/react/portainer/environments/types';
|
||||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
|
||||
import { Widget } from '@@/Widget';
|
||||
import { FallbackImage } from '@@/FallbackImage';
|
||||
import { Icon } from '@@/Icon';
|
||||
import { FormActions } from '@@/form-components/FormActions';
|
||||
import { Button } from '@@/buttons';
|
||||
|
||||
import { EdgeGroupsSelector } from '../../edge-stacks/components/EdgeGroupsSelector';
|
||||
import {
|
||||
NameField,
|
||||
nameValidation,
|
||||
} from '../../edge-stacks/CreateView/NameField';
|
||||
import { EdgeGroup } from '../../edge-groups/types';
|
||||
import { DeploymentType, EdgeStack } from '../../edge-stacks/types';
|
||||
import { useEdgeStacks } from '../../edge-stacks/queries/useEdgeStacks';
|
||||
import { useEdgeGroups } from '../../edge-groups/queries/useEdgeGroups';
|
||||
import { useCreateEdgeStack } from '../../edge-stacks/queries/useCreateEdgeStack/useCreateEdgeStack';
|
||||
|
||||
import { EnvVarsFieldset } from './EnvVarsFieldset';
|
||||
|
||||
export function DeployFormWidget({
|
||||
template,
|
||||
unselect,
|
||||
}: {
|
||||
template: TemplateViewModel;
|
||||
unselect: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<Widget>
|
||||
<Widget.Title
|
||||
icon={
|
||||
<FallbackImage
|
||||
src={template.Logo}
|
||||
fallbackIcon={<Icon icon={Rocket} />}
|
||||
/>
|
||||
}
|
||||
title={template.Title}
|
||||
/>
|
||||
<Widget.Body>
|
||||
<DeployForm template={template} unselect={unselect} />
|
||||
</Widget.Body>
|
||||
</Widget>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface FormValues {
|
||||
name: string;
|
||||
edgeGroupIds: Array<EdgeGroup['Id']>;
|
||||
envVars: Record<string, string>;
|
||||
}
|
||||
|
||||
function DeployForm({
|
||||
template,
|
||||
unselect,
|
||||
}: {
|
||||
template: TemplateViewModel;
|
||||
unselect: () => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const mutation = useCreateEdgeStack();
|
||||
const edgeStacksQuery = useEdgeStacks();
|
||||
const edgeGroupsQuery = useEdgeGroups({
|
||||
select: (groups) =>
|
||||
Object.fromEntries(groups.map((g) => [g.Id, g.EndpointTypes])),
|
||||
});
|
||||
|
||||
const initialValues: FormValues = {
|
||||
edgeGroupIds: [],
|
||||
name: template.Name || '',
|
||||
envVars:
|
||||
Object.fromEntries(template.Env?.map((env) => [env.name, env.value])) ||
|
||||
{},
|
||||
};
|
||||
|
||||
if (!edgeStacksQuery.data || !edgeGroupsQuery.data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={() =>
|
||||
validation(edgeStacksQuery.data, edgeGroupsQuery.data)
|
||||
}
|
||||
validateOnMount
|
||||
>
|
||||
{({ values, errors, setFieldValue, isValid }) => (
|
||||
<Form className="form-horizontal">
|
||||
<NameField
|
||||
value={values.name}
|
||||
onChange={(v) => setFieldValue('name', v)}
|
||||
errors={errors.name}
|
||||
/>
|
||||
|
||||
<EdgeGroupsSelector
|
||||
horizontal
|
||||
value={values.edgeGroupIds}
|
||||
error={errors.edgeGroupIds}
|
||||
onChange={(value) => setFieldValue('edgeGroupIds', value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<EnvVarsFieldset
|
||||
value={values.envVars}
|
||||
options={template.Env}
|
||||
errors={errors.envVars}
|
||||
onChange={(values) => setFieldValue('envVars', values)}
|
||||
/>
|
||||
|
||||
<FormActions
|
||||
isLoading={mutation.isLoading}
|
||||
isValid={isValid}
|
||||
loadingText="Deployment in progress..."
|
||||
submitLabel="Deploy the stack"
|
||||
>
|
||||
<Button type="reset" onClick={() => unselect()} color="default">
|
||||
Hide
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
|
||||
function handleSubmit(values: FormValues) {
|
||||
return mutation.mutate(
|
||||
{
|
||||
method: 'git',
|
||||
payload: {
|
||||
name: values.name,
|
||||
edgeGroups: values.edgeGroupIds,
|
||||
deploymentType: DeploymentType.Compose,
|
||||
|
||||
envVars: Object.entries(values.envVars).map(([name, value]) => ({
|
||||
name,
|
||||
value,
|
||||
})),
|
||||
git: {
|
||||
RepositoryURL: template.Repository.url,
|
||||
ComposeFilePathInRepository: template.Repository.stackfile,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess() {
|
||||
notifySuccess('Success', 'Edge Stack created');
|
||||
router.stateService.go('edge.stacks');
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function validation(
|
||||
stacks: EdgeStack[],
|
||||
edgeGroupsType: Record<EdgeGroup['Id'], Array<EnvironmentType>>
|
||||
) {
|
||||
return lazy((values: FormValues) => {
|
||||
const types = getTypes(values.edgeGroupIds);
|
||||
|
||||
return object({
|
||||
name: nameValidation(
|
||||
stacks,
|
||||
types?.includes(EnvironmentType.EdgeAgentOnDocker)
|
||||
),
|
||||
edgeGroupIds: array(number().required().default(0))
|
||||
.min(1, 'At least one group is required')
|
||||
.test(
|
||||
'same-type',
|
||||
'Groups should be of the same type',
|
||||
(value) => _.uniq(getTypes(value)).length === 1
|
||||
),
|
||||
envVars: array()
|
||||
.transform((_, orig) => Object.values(orig))
|
||||
.of(string().required('Required')),
|
||||
});
|
||||
});
|
||||
|
||||
function getTypes(value: number[] | undefined) {
|
||||
return value?.flatMap((g) => edgeGroupsType[g]);
|
||||
}
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@ export function ListView() {
|
|||
onDelete={handleDelete}
|
||||
templateLinkParams={(template) => ({
|
||||
to: 'edge.stacks.new',
|
||||
params: { templateId: template.Id },
|
||||
params: { templateId: template.Id, templateType: 'custom' },
|
||||
})}
|
||||
storageKey="edge-custom-templates"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue