mirror of https://github.com/portainer/portainer
feat(edge/stacks): add app templates to deploy types [EE-6632] (#11070)
Chaim Lev-Ari
10 months ago
committed by
GitHub
parent
edea9e3481
commit
fe6ed55cab
@ -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);
|
||||
});
|
||||
@ -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,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]);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
import { vi } from 'vitest';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
import { render, screen } from '@/react-tools/test-utils';
|
||||
|
||||
import {
|
||||
CustomTemplatesVariablesField,
|
||||
Values,
|
||||
} from './CustomTemplatesVariablesField';
|
||||
|
||||
test('renders CustomTemplatesVariablesField component', () => {
|
||||
const onChange = vi.fn();
|
||||
const definitions = [
|
||||
{
|
||||
name: 'Variable1',
|
||||
label: 'Variable 1',
|
||||
description: 'Description 1',
|
||||
defaultValue: 'Default 1',
|
||||
},
|
||||
{
|
||||
name: 'Variable2',
|
||||
label: 'Variable 2',
|
||||
description: 'Description 2',
|
||||
defaultValue: 'Default 2',
|
||||
},
|
||||
];
|
||||
const value: Values = [
|
||||
{ key: 'Variable1', value: 'Value 1' },
|
||||
{ key: 'Variable2', value: 'Value 2' },
|
||||
];
|
||||
|
||||
render(
|
||||
<CustomTemplatesVariablesField
|
||||
onChange={onChange}
|
||||
definitions={definitions}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
|
||||
const variableFieldItems = screen.getAllByLabelText(/Variable \d/);
|
||||
expect(variableFieldItems).toHaveLength(2);
|
||||
});
|
||||
|
||||
test('calls onChange when variable value is changed', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onChange = vi.fn();
|
||||
const definitions = [
|
||||
{
|
||||
name: 'Variable1',
|
||||
label: 'Variable 1',
|
||||
description: 'Description 1',
|
||||
defaultValue: 'Default 1',
|
||||
},
|
||||
];
|
||||
const value: Values = [{ key: 'Variable1', value: 'Value 1' }];
|
||||
|
||||
render(
|
||||
<CustomTemplatesVariablesField
|
||||
onChange={onChange}
|
||||
definitions={definitions}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
|
||||
const inputElement = screen.getByLabelText('Variable 1');
|
||||
|
||||
await user.clear(inputElement);
|
||||
expect(onChange).toHaveBeenCalledWith([{ key: 'Variable1', value: '' }]);
|
||||
|
||||
await user.type(inputElement, 'New Value');
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('renders error message when errors prop is provided', () => {
|
||||
const onChange = vi.fn();
|
||||
const definitions = [
|
||||
{
|
||||
name: 'Variable1',
|
||||
label: 'Variable 1',
|
||||
description: 'Description 1',
|
||||
defaultValue: 'Default 1',
|
||||
},
|
||||
];
|
||||
const value: Values = [{ key: 'Variable1', value: 'Value 1' }];
|
||||
const errors = [{ value: 'Error message' }];
|
||||
|
||||
render(
|
||||
<CustomTemplatesVariablesField
|
||||
onChange={onChange}
|
||||
definitions={definitions}
|
||||
value={value}
|
||||
errors={errors}
|
||||
/>
|
||||
);
|
||||
|
||||
const errorElement = screen.getByText('Error message');
|
||||
expect(errorElement).toBeInTheDocument();
|
||||
});
|
||||
@ -0,0 +1,53 @@
|
||||
import { vi } from 'vitest';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
import { render, screen } from '@/react-tools/test-utils';
|
||||
|
||||
import { VariableFieldItem } from './VariableFieldItem';
|
||||
|
||||
test('renders VariableFieldItem component', () => {
|
||||
const definition = {
|
||||
name: 'variableName',
|
||||
label: 'Variable Label',
|
||||
description: 'Variable Description',
|
||||
defaultValue: 'Default Value',
|
||||
};
|
||||
|
||||
render(<VariableFieldItem definition={definition} onChange={vi.fn()} />);
|
||||
|
||||
const labelElement = screen.getByText('Variable Label');
|
||||
expect(labelElement).toBeInTheDocument();
|
||||
|
||||
const inputElement = screen.getByPlaceholderText(
|
||||
'Enter value or leave blank to use default of Default Value'
|
||||
);
|
||||
expect(inputElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('calls onChange when input value changes', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onChange = vi.fn();
|
||||
|
||||
const definition = {
|
||||
name: 'variableName',
|
||||
label: 'Variable Label',
|
||||
description: 'Variable Description',
|
||||
defaultValue: 'Default Value',
|
||||
};
|
||||
|
||||
render(
|
||||
<VariableFieldItem
|
||||
definition={definition}
|
||||
onChange={onChange}
|
||||
value="value"
|
||||
/>
|
||||
);
|
||||
|
||||
const inputElement = screen.getByLabelText(definition.label);
|
||||
|
||||
await user.clear(inputElement);
|
||||
expect(onChange).toHaveBeenCalledWith('');
|
||||
|
||||
await user.type(inputElement, 'New Value');
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
});
|
||||
@ -0,0 +1,38 @@
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Input } from '@@/form-components/Input';
|
||||
|
||||
import { VariableDefinition } from '../CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
|
||||
|
||||
export function VariableFieldItem({
|
||||
definition,
|
||||
error,
|
||||
onChange,
|
||||
value,
|
||||
}: {
|
||||
definition: VariableDefinition;
|
||||
error?: string;
|
||||
onChange: (value: string) => void;
|
||||
value?: string;
|
||||
}) {
|
||||
const inputId = `${definition.name}-input`;
|
||||
|
||||
return (
|
||||
<FormControl
|
||||
required={!definition.defaultValue}
|
||||
label={definition.label}
|
||||
key={definition.name}
|
||||
inputId={inputId}
|
||||
tooltip={definition.description}
|
||||
size="small"
|
||||
errors={error}
|
||||
>
|
||||
<Input
|
||||
name={`variables.${definition.name}`}
|
||||
id={inputId}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={`Enter value or leave blank to use default of ${definition.defaultValue}`}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
export {
|
||||
CustomTemplatesVariablesField,
|
||||
type Values as VariablesFieldValue,
|
||||
validation as variablesFieldValidation,
|
||||
} from './CustomTemplatesVariablesField';
|
||||
|
||||
export { validation as variablesFieldValidation } from './validation';
|
||||
|
||||
export { getDefaultValues as getVariablesFieldDefaultValues } from './getDefaultValues';
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { array, object, string } from 'yup';
|
||||
|
||||
import { VariableDefinition } from '../CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
|
||||
|
||||
export function validation(definitions: VariableDefinition[]) {
|
||||
return array(
|
||||
object({
|
||||
key: string().default(''),
|
||||
value: string().default(''),
|
||||
}).test('required-if-no-default-value', 'This field is required', (obj) => {
|
||||
const definition = definitions.find((d) => d.name === obj.key);
|
||||
if (!definition) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!definition.defaultValue && !obj.value) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,188 @@
|
||||
/** Simulate user events on react-select dropdowns
|
||||
*
|
||||
* taken from https://github.com/lokalise/react-select-event/blob/migrate-to-user-event/src/index.ts
|
||||
* until package is updated
|
||||
*/
|
||||
|
||||
import {
|
||||
Matcher,
|
||||
findAllByText,
|
||||
findByText,
|
||||
waitFor,
|
||||
} from '@testing-library/dom';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
// find the react-select container from its input field 🤷
|
||||
function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
|
||||
return input.parentNode!.parentNode!.parentNode!.parentNode!
|
||||
.parentNode as HTMLElement;
|
||||
}
|
||||
|
||||
type User = ReturnType<typeof userEvent.setup> | typeof userEvent;
|
||||
|
||||
type UserEventOptions = {
|
||||
user?: User;
|
||||
};
|
||||
|
||||
/**
|
||||
* Utility for opening the select's dropdown menu.
|
||||
* @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
|
||||
*/
|
||||
export async function openMenu(
|
||||
input: HTMLElement,
|
||||
{ user = userEvent }: UserEventOptions = {}
|
||||
) {
|
||||
await user.click(input);
|
||||
await user.type(input, '{ArrowDown}');
|
||||
}
|
||||
|
||||
// type text in the input field
|
||||
async function type(
|
||||
input: HTMLElement,
|
||||
text: string,
|
||||
{ user }: Required<UserEventOptions>
|
||||
) {
|
||||
await user.type(input, text);
|
||||
}
|
||||
|
||||
// press the "clear" button, and reset various states
|
||||
async function clear(
|
||||
clearButton: Element,
|
||||
{ user }: Required<UserEventOptions>
|
||||
) {
|
||||
await user.click(clearButton);
|
||||
}
|
||||
|
||||
interface Config extends UserEventOptions {
|
||||
/** A container where the react-select dropdown gets rendered to.
|
||||
* Useful when rendering the dropdown in a portal using `menuPortalTarget`.
|
||||
*/
|
||||
container?: HTMLElement | (() => HTMLElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility for selecting a value in a `react-select` dropdown.
|
||||
* @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
|
||||
* @param {Matcher|Matcher[]} optionOrOptions The display name(s) for the option(s) to select
|
||||
* @param {Object} config Optional config options
|
||||
* @param {HTMLElement | (() => HTMLElement)} config.container A container for the react-select and its dropdown (defaults to the react-select container)
|
||||
* Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`.
|
||||
* Can be specified as a function if it needs to be lazily evaluated.
|
||||
*/
|
||||
export async function select(
|
||||
input: HTMLElement,
|
||||
optionOrOptions: Matcher | Array<Matcher>,
|
||||
{ user = userEvent, ...config }: Config = {}
|
||||
) {
|
||||
const options = Array.isArray(optionOrOptions)
|
||||
? optionOrOptions
|
||||
: [optionOrOptions];
|
||||
|
||||
// Select the items we care about
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const option of options) {
|
||||
await openMenu(input, { user });
|
||||
|
||||
let container;
|
||||
if (typeof config.container === 'function') {
|
||||
// when specified as a function, the container needs to be lazily evaluated, so
|
||||
// we have to wait for it to be visible:
|
||||
await waitFor(config.container);
|
||||
container = config.container();
|
||||
} else if (config.container) {
|
||||
container = config.container;
|
||||
} else {
|
||||
container = getReactSelectContainerFromInput(input);
|
||||
}
|
||||
|
||||
// only consider visible, interactive elements
|
||||
const matchingElements = await findAllByText(container, option, {
|
||||
ignore: "[aria-live] *,[style*='visibility: hidden']",
|
||||
});
|
||||
|
||||
// When the target option is already selected, the react-select display text
|
||||
// will also match the selector. In this case, the actual dropdown element is
|
||||
// positioned last in the DOM tree.
|
||||
const optionElement = matchingElements[matchingElements.length - 1];
|
||||
await user.click(optionElement);
|
||||
}
|
||||
}
|
||||
|
||||
interface CreateConfig extends Config, UserEventOptions {
|
||||
createOptionText?: string | RegExp;
|
||||
waitForElement?: boolean;
|
||||
}
|
||||
/**
|
||||
* Utility for creating and selecting a value in a Creatable `react-select` dropdown.
|
||||
* @async
|
||||
* @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
|
||||
* @param {String} option The display name for the option to type and select
|
||||
* @param {Object} config Optional config options
|
||||
* @param {HTMLElement} config.container A container for the react-select and its dropdown (defaults to the react-select container)
|
||||
* Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
|
||||
* @param {boolean} config.waitForElement Whether create should wait for new option to be populated in the select container
|
||||
* @param {String|RegExp} config.createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
|
||||
*/
|
||||
export async function create(
|
||||
input: HTMLElement,
|
||||
option: string,
|
||||
{ waitForElement = true, user = userEvent, ...config }: CreateConfig = {}
|
||||
) {
|
||||
const createOptionText = config.createOptionText || /^Create "/;
|
||||
await openMenu(input, { user });
|
||||
await type(input, option, { user });
|
||||
|
||||
await select(input, createOptionText, { ...config, user });
|
||||
|
||||
if (waitForElement) {
|
||||
await findByText(getReactSelectContainerFromInput(input), option);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility for clearing the first value of a `react-select` dropdown.
|
||||
* @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
|
||||
*/
|
||||
export async function clearFirst(
|
||||
input: HTMLElement,
|
||||
{ user = userEvent }: UserEventOptions = {}
|
||||
) {
|
||||
const container = getReactSelectContainerFromInput(input);
|
||||
// The "clear" button is the first svg element that is hidden to screen readers
|
||||
const clearButton = container.querySelector('svg[aria-hidden="true"]')!;
|
||||
await clear(clearButton, { user });
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility for clearing all values in a `react-select` dropdown.
|
||||
* @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
|
||||
*/
|
||||
export async function clearAll(
|
||||
input: HTMLElement,
|
||||
{ user = userEvent }: UserEventOptions = {}
|
||||
) {
|
||||
const container = getReactSelectContainerFromInput(input);
|
||||
// The "clear all" button is the penultimate svg element that is hidden to screen readers
|
||||
// (the last one is the dropdown arrow)
|
||||
const elements = container.querySelectorAll('svg[aria-hidden="true"]');
|
||||
const clearAllButton = elements[elements.length - 2];
|
||||
await clear(clearAllButton, { user });
|
||||
}
|
||||
|
||||
function setup(user: User): typeof selectEvent {
|
||||
return {
|
||||
select: (...params: Parameters<typeof select>) =>
|
||||
select(params[0], params[1], { user, ...params[2] }),
|
||||
create: (...params: Parameters<typeof create>) =>
|
||||
create(params[0], params[1], { user, ...params[2] }),
|
||||
clearFirst: (...params: Parameters<typeof clearFirst>) =>
|
||||
clearFirst(params[0], { user, ...params[1] }),
|
||||
clearAll: (...params: Parameters<typeof clearAll>) =>
|
||||
clearAll(params[0], { user, ...params[1] }),
|
||||
openMenu: (...params: Parameters<typeof openMenu>) =>
|
||||
openMenu(params[0], { user, ...params[1] }),
|
||||
};
|
||||
}
|
||||
|
||||
const selectEvent = { select, create, clearFirst, clearAll, openMenu };
|
||||
export default { ...selectEvent, setup };
|
||||
Loading…
Reference in new issue