1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00

refactor(edge/stacks): migrate create view to react [EE-2223] (#11575)
Some checks are pending
ci / build_images (map[arch:amd64 platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:amd64 platform:windows version:1809]) (push) Waiting to run
ci / build_images (map[arch:amd64 platform:windows version:ltsc2022]) (push) Waiting to run
ci / build_images (map[arch:arm platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:arm64 platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:ppc64le platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:s390x platform:linux version:]) (push) Waiting to run
ci / build_manifests (push) Blocked by required conditions
/ triage (push) Waiting to run
Lint / Run linters (push) Waiting to run
Test / test-client (push) Waiting to run
Test / test-server (map[arch:amd64 platform:linux]) (push) Waiting to run
Test / test-server (map[arch:amd64 platform:windows version:1809]) (push) Waiting to run
Test / test-server (map[arch:amd64 platform:windows version:ltsc2022]) (push) Waiting to run
Test / test-server (map[arch:arm64 platform:linux]) (push) Waiting to run

This commit is contained in:
Chaim Lev-Ari 2024-05-06 08:08:03 +03:00 committed by GitHub
parent f22aed34b5
commit 8a81d95253
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 1878 additions and 1005 deletions

View file

@ -1,49 +1,38 @@
import { SetStateAction, useEffect, useState } from 'react';
import { SetStateAction } from 'react';
import { FormikErrors } from 'formik';
import { getVariablesFieldDefaultValues } 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';
import { getDefaultValues as getAppVariablesDefaultValues } from '../../../../portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset';
import { TemplateSelector } from './TemplateSelector';
import { SelectedTemplateValue, Values } from './types';
import { Values } from './types';
import { CustomTemplateFieldset } from './CustomTemplateFieldset';
import { AppTemplateFieldset } from './AppTemplateFieldset';
export function TemplateFieldset({
values: initialValues,
setValues: setInitialValues,
values,
setValues,
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
}
error={errors?.templateId}
value={values}
onChange={handleChangeTemplate}
/>
{values.template && (
{values.templateId && (
<>
{values.type === 'custom' && (
<CustomTemplateFieldset
template={values.template}
templateId={values.templateId}
values={values.variables}
onChange={(variables) =>
setValues((values) => ({ ...values, variables }))
@ -54,7 +43,7 @@ export function TemplateFieldset({
{values.type === 'app' && (
<AppTemplateFieldset
template={values.template}
templateId={values.templateId}
values={values.envVars}
onChange={(envVars) =>
setValues((values) => ({ ...values, envVars }))
@ -67,36 +56,36 @@ export function TemplateFieldset({
</>
);
function setValues(values: SetStateAction<Values>) {
setControlledValues(values);
setInitialValues(values);
}
function handleChangeTemplate(value?: SelectedTemplateValue) {
function handleChangeTemplate(
template: TemplateViewModel | CustomTemplate | undefined,
type: 'app' | 'custom' | undefined
): void {
setValues(() => {
if (!value || !value.type || !value.template) {
if (!template || !type) {
return {
type: undefined,
template: undefined,
templateId: undefined,
variables: [],
envVars: {},
};
}
if (value.type === 'app') {
if (type === 'app') {
return {
template: value.template,
type: value.type,
templateId: template.Id,
type,
variables: [],
envVars: getAppVariablesDefaultValues(value.template.Env || []),
envVars: getAppVariablesDefaultValues(
(template as TemplateViewModel).Env || []
),
};
}
return {
template: value.template,
type: value.type,
templateId: template.Id,
type,
variables: getVariablesFieldDefaultValues(
value.template.Variables || []
(template as CustomTemplate).Variables || []
),
envVars: {},
};
@ -106,10 +95,9 @@ export function TemplateFieldset({
export function getInitialTemplateValues(): Values {
return {
template: undefined,
templateId: undefined,
type: undefined,
variables: [],
file: '',
envVars: {},
};
}