fix(edge-stacks): various custom template issues [BE-11414] (#189)

portainer · Dec 9, 2024 · 97e7a3c · 97e7a3c
1 parent 16a1825
commit 97e7a3c
Show file tree

Hide file tree

Showing 24 changed files with 737 additions and 362 deletions.
diff --git a/app/edge/__module.js b/app/edge/__module.js
@@ -74,6 +74,10 @@ angular
       data: {
         docs: '/user/edge/stacks/add',
       },
+      params: {
+        templateId: { dynamic: true },
+        templateType: { dynamic: true },
+      },
     };
 
     const stacksEdit = {

diff --git a/app/portainer/registry-management/views/edit/registry.html b/app/portainer/registry-management/views/edit/registry.html
@@ -271,7 +271,7 @@
             <div class="col-sm-12">
               <button
                 type="button"
-                class="btn btn-primary btn-sm"
+                class="btn btn-primary btn-sm !ml-0"
                 ng-disabled="$ctrl.isUpdateButtonDisabled() || editRegistry.$invalid"
                 ng-click="$ctrl.updateRegistry()"
                 button-spinner="$ctrl.state.actionInProgress"

diff --git a/app/react/components/RadioGroup/RadioGroup.tsx b/app/react/components/RadioGroup/RadioGroup.tsx
@@ -14,7 +14,7 @@ export function RadioGroup<T extends string | number = string>({
   onOptionChange,
 }: Props<T>) {
   return (
-    <div>
+    <div className="flex flex-wrap gap-x-2 gap-y-1">
       {options.map((option) => (
         <label
           key={option.value}

diff --git a/app/react/edge/edge-stacks/CreateView/CreateForm.test.tsx b/app/react/edge/edge-stacks/CreateView/CreateForm.test.tsx
diff --git a/app/react/edge/edge-stacks/CreateView/CreateForm.tsx b/app/react/edge/edge-stacks/CreateView/CreateForm.tsx
@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 
 import { toGitFormModel } from '@/react/portainer/gitops/types';
 import { getDefaultRelativePathModel } from '@/react/portainer/gitops/RelativePathFieldset/types';
@@ -18,12 +18,12 @@ import { DeploymentType } from '../types';
 import { getDefaultStaggerConfig } from '../components/StaggerFieldset.types';
 
 import { InnerForm } from './InnerForm';
-import { FormValues } from './types';
 import { useValidation } from './CreateForm.validation';
 import { Values as TemplateValues } from './TemplateFieldset/types';
 import { getInitialTemplateValues } from './TemplateFieldset/TemplateFieldset';
 import { useTemplateParams } from './useTemplateParams';
 import { useCreate } from './useCreate';
+import { FormValues } from './types';
 
 export function CreateForm() {
   const [webhookId] = useState(() => createWebhookId());
@@ -38,33 +38,12 @@ export function CreateForm() {
     templateType: templateParams.type,
   });
 
-  if (
-    templateParams.id &&
-    !(templateQuery.customTemplate || templateQuery.appTemplate)
-  ) {
+  const initialValues = useInitialValues(templateQuery, templateParams);
+
+  if (!initialValues) {
     return null;
   }
 
-  const template = templateQuery.customTemplate || templateQuery.appTemplate;
-
-  const initialValues: FormValues = {
-    name: '',
-    groupIds: [],
-    deploymentType: DeploymentType.Compose,
-    envVars: [],
-    privateRegistryId: 0,
-    prePullImage: false,
-    retryDeploy: false,
-    staggerConfig: getDefaultStaggerConfig(),
-    method: templateParams.id ? 'template' : 'editor',
-    git: toGitFormModel(undefined, parseAutoUpdateResponse()),
-    relativePath: getDefaultRelativePathModel(),
-    enableWebhook: false,
-    fileContent: '',
-    templateValues: getTemplateValues(templateParams.type, template),
-    useManifestNamespaces: false,
-  };
-
   return (
     <div className="row">
       <div className="col-sm-12">
@@ -128,7 +107,66 @@ function useTemplate(
   });
 
   return {
-    appTemplate: appTemplateQuery.data,
-    customTemplate: customTemplateQuery.data,
+    appTemplate: type === 'app' ? appTemplateQuery.data : undefined,
+    customTemplate: type === 'custom' ? customTemplateQuery.data : undefined,
   };
 }
+
+function useInitialValues(
+  templateQuery: {
+    appTemplate: TemplateViewModel | undefined;
+    customTemplate: CustomTemplate | undefined;
+  },
+  templateParams: {
+    id: number | undefined;
+    type: 'app' | 'custom' | undefined;
+  }
+) {
+  const template = templateQuery.customTemplate || templateQuery.appTemplate;
+  const initialValues: FormValues = useMemo(
+    () => ({
+      name: '',
+      groupIds: [],
+      // if edge custom templates allow kube manifests/helm charts in future, add logic for setting this for the initial deploymentType
+      deploymentType: DeploymentType.Compose,
+      envVars: [],
+      privateRegistryId:
+        templateQuery.customTemplate?.EdgeSettings?.PrivateRegistryId ?? 0,
+      prePullImage:
+        templateQuery.customTemplate?.EdgeSettings?.PrePullImage ?? false,
+      retryDeploy:
+        templateQuery.customTemplate?.EdgeSettings?.RetryDeploy ?? false,
+      staggerConfig:
+        templateQuery.customTemplate?.EdgeSettings?.StaggerConfig ??
+        getDefaultStaggerConfig(),
+      method: templateParams.id ? 'template' : 'editor',
+      git: toGitFormModel(
+        templateQuery.customTemplate?.GitConfig,
+        parseAutoUpdateResponse()
+      ),
+      relativePath:
+        templateQuery.customTemplate?.EdgeSettings?.RelativePathSettings ??
+        getDefaultRelativePathModel(),
+      enableWebhook: false,
+      fileContent: '',
+      templateValues: getTemplateValues(templateParams.type, template),
+      useManifestNamespaces: false,
+    }),
+    [
+      templateQuery.customTemplate,
+      templateParams.id,
+      templateParams.type,
+      template,
+    ]
+  );
+
+  if (
+    templateParams.id &&
+    !templateQuery.customTemplate &&
+    !templateQuery.appTemplate
+  ) {
+    return null;
+  }
+
+  return initialValues;
+}
diff --git a/app/react/edge/edge-stacks/CreateView/CreateForm.validation.ts b/app/react/edge/edge-stacks/CreateView/CreateForm.validation.ts
@@ -117,7 +117,7 @@ export function useValidation({
           }),
           templateValues: templateFieldsetValidation({
             customVariablesDefinitions: customTemplate?.Variables || [],
-            envVarDefinitions: appTemplate?.Env || [],
+            appTemplateVariablesDefinitions: appTemplate?.Env || [],
           }),
           git: mixed().when('method', {
             is: 'repository',