feat(edge/stacks): add app templates to deploy types [EE-6632] (#11070)

app/react/edge/templates/AppTemplatesView/AppTemplatesView.tsx

@@ -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"

app/react/edge/templates/AppTemplatesView/DeployForm.tsx

@@ -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]);
-  }
-}

app/react/edge/templates/AppTemplatesView/EnvVarsFieldset.tsx

@@ -1,76 +0,0 @@
-import { FormikErrors } from 'formik';
-
-import { TemplateEnv } from '@/react/portainer/templates/app-templates/types';
-
-import { FormControl } from '@@/form-components/FormControl';
-import { Input, Select } from '@@/form-components/Input';
-
-type Value = Record<string, string>;
-
-export function EnvVarsFieldset({
-  onChange,
-  options,
-  value,
-  errors,
-}: {
-  options: Array<TemplateEnv>;
-  onChange: (value: Value) => void;
-  value: Value;
-  errors?: FormikErrors<Value>;
-}) {
-  return (
-    <>
-      {options.map((env, index) => (
-        <Item
-          key={env.name}
-          option={env}
-          value={value[env.name]}
-          onChange={(value) => handleChange(env.name, value)}
-          errors={errors?.[index]}
-        />
-      ))}
-    </>
-  );
-
-  function handleChange(name: string, envValue: string) {
-    onChange({ ...value, [name]: envValue });
-  }
-}
-
-function Item({
-  onChange,
-  option,
-  value,
-  errors,
-}: {
-  option: TemplateEnv;
-  value: string;
-  onChange: (value: string) => void;
-  errors?: FormikErrors<string>;
-}) {
-  return (
-    <FormControl
-      label={option.label || option.name}
-      required={!option.preset}
-      errors={errors}
-    >
-      {option.select ? (
-        <Select
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          options={option.select.map((o) => ({
-            label: o.text,
-            value: o.value,
-          }))}
-          disabled={option.preset}
-        />
-      ) : (
-        <Input
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={option.preset}
-        />
-      )}
-    </FormControl>
-  );
-}

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

@@ -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"
       />