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

app/react/edge/edge-stacks/CreateView/DockerComposeForm.tsx

@@ -1,4 +1,5 @@
-import { useFormikContext } from 'formik';
+import { FormikErrors, useFormikContext } from 'formik';
+import { SetStateAction } from 'react';
 
 import { GitForm } from '@/react/portainer/gitops/GitForm';
 import { baseEdgeStackWebhookUrl } from '@/portainer/helpers/webhookHelper';
@@ -24,31 +25,18 @@ import { useRenderAppTemplate } from './useRenderAppTemplate';
 
 const buildMethods = [editor, upload, git, edgeStackTemplate] as const;
 
-export function DockerComposeForm({
-  webhookId,
-  onChangeTemplate,
-}: {
+interface Props {
   webhookId: string;
-  onChangeTemplate: ({
-    type,
-    id,
-  }: {
+  onChangeTemplate: (change: {
     type: 'app' | 'custom' | undefined;
     id: number | undefined;
   }) => void;
-}) {
+}
+
+export function DockerComposeForm({ webhookId, onChangeTemplate }: Props) {
   const { errors, values, setValues } = useFormikContext<DockerFormValues>();
   const { method } = values;
 
-  const { customTemplate, isInitialLoading: isCustomTemplateLoading } =
-    useRenderCustomTemplate(values.templateValues, setValues);
-  const { appTemplate, isInitialLoading: isAppTemplateLoading } =
-    useRenderAppTemplate(values.templateValues, setValues);
-
-  const isTemplate =
-    method === edgeStackTemplate.value && (customTemplate || appTemplate);
-  const isTemplateLoading = isCustomTemplateLoading || isAppTemplateLoading;
-
   return (
     <>
       <FormSection title="Build Method">
@@ -62,10 +50,10 @@ export function DockerComposeForm({
       </FormSection>
 
       {method === edgeStackTemplate.value && (
-        <TemplateFieldset
-          values={values.templateValues}
-          setValues={(templateAction) =>
-            setValues((values) => {
+        <>
+          <TemplateFieldset
+            values={values.templateValues}
+            setValues={(templateAction) => {
               const templateValues = applySetStateAction(
                 templateAction,
                 values.templateValues
@@ -74,25 +62,36 @@ export function DockerComposeForm({
                 id: templateValues.templateId,
                 type: templateValues.type,
               });
-
-              return {
+              setValues((values) => ({
                 ...values,
                 templateValues,
-              };
-            })
-          }
-          errors={errors?.templateValues}
-          isLoadingValues={isTemplateLoading}
-        />
+              }));
+            }}
+            errors={errors?.templateValues}
+          />
+          {values.templateValues.type === 'app' && (
+            <AppTemplateContentField
+              values={values}
+              handleChange={handleChange}
+              errors={errors}
+              setValues={setValues}
+            />
+          )}
+          {values.templateValues.type === 'custom' && (
+            <CustomTemplateContentField
+              values={values}
+              handleChange={handleChange}
+              errors={errors}
+              setValues={setValues}
+            />
+          )}
+        </>
       )}
 
-      {(method === editor.value || isTemplate) && !isTemplateLoading && (
+      {method === editor.value && (
         <DockerContentField
           value={values.fileContent}
           onChange={(value) => handleChange({ fileContent: value })}
-          readonly={
-            method === edgeStackTemplate.value && !!customTemplate?.GitConfig
-          }
           error={errors?.fileContent}
         />
       )}
@@ -154,3 +153,51 @@ export function DockerComposeForm({
     }));
   }
 }
+
+type TemplateContentFieldProps = {
+  values: DockerFormValues;
+  handleChange: (newValues: Partial<DockerFormValues>) => void;
+  errors?: FormikErrors<DockerFormValues>;
+  setValues: (values: SetStateAction<DockerFormValues>) => void;
+};
+
+function AppTemplateContentField({
+  values,
+  handleChange,
+  errors,
+  setValues,
+}: TemplateContentFieldProps) {
+  const { isInitialLoading } = useRenderAppTemplate(
+    values.templateValues,
+    setValues
+  );
+  return (
+    <DockerContentField
+      value={values.fileContent}
+      onChange={(value) => handleChange({ fileContent: value })}
+      error={errors?.fileContent}
+      isLoading={isInitialLoading}
+    />
+  );
+}
+
+function CustomTemplateContentField({
+  values,
+  handleChange,
+  errors,
+  setValues,
+}: TemplateContentFieldProps) {
+  const { customTemplate, isInitialLoading } = useRenderCustomTemplate(
+    values.templateValues,
+    setValues
+  );
+  return (
+    <DockerContentField
+      value={values.fileContent}
+      onChange={(value) => handleChange({ fileContent: value })}
+      error={errors?.fileContent}
+      readonly={!!customTemplate?.GitConfig}
+      isLoading={isInitialLoading}
+    />
+  );
+}