fix bug with predeploy

dashboard/src/lib/porter-apps/index.ts

@@ -257,6 +257,7 @@ export function clientAppFromProto(
   proto: PorterApp,
   overrides: DetectedServices | null
 ): ClientPorterApp {
+  console.log("services", proto.services)
   const services = Object.entries(proto.services)
     .map(([name, service]) => serializedServiceFromProto({ name, service }))
     .map((svc) => {
@@ -273,10 +274,21 @@ export function clientAppFromProto(
       return deserializeService({ service: svc });
     });
 
+  const predeployList = [];
+  if (proto.predeploy) {
+    predeployList.push(deserializeService({
+      service: serializedServiceFromProto({
+        name: "pre-deploy",
+        service: proto.predeploy,
+        isPredeploy: true,
+      })
+    }))
+  }
   if (!overrides?.predeploy) {
     return {
       name: proto.name,
       services,
+      predeploy: predeployList,
       env: proto.env,
       build: clientBuildFromProto(proto.build) ?? {
         method: "pack",
@@ -299,6 +311,8 @@ export function clientAppFromProto(
     })]
     : undefined;
 
+  console.log(predeploy)
+
   return {
     name: proto.name,
     services,

dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx

@@ -109,6 +109,8 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
       },
     },
   });
+  console.log("values", porterAppFormMethods.getValues())
+  console.log("client app from proto", clientAppFromProto(latestProto, servicesFromYaml))
   const {
     reset,
     handleSubmit,

dashboard/src/main/home/app-dashboard/app-view/tabs/Overview.tsx

@@ -45,13 +45,14 @@ const Overview: React.FC = () => {
             })}
             existingServiceNames={Object.keys(latestProto.services)}
             isPredeploy
+            fieldArrayName={"app.predeploy"}
           />
           <Spacer y={0.5} />
         </>
       )}
       <Text size={16}>Application services</Text>
       <Spacer y={0.5} />
-      <ServiceList addNewText={"Add a new service"} />
+      <ServiceList addNewText={"Add a new service"} fieldArrayName={"app.services"} existingServiceNames={Object.keys(latestProto.services)} />
       <Spacer y={0.75} />
       <Button
         type="submit"

dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx

@@ -121,6 +121,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
     setValue,
     handleSubmit,
     setError,
+    clearErrors,
     formState: { isSubmitting: isValidating, errors },
   } = porterAppFormMethods;
 
@@ -302,6 +303,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
   // reset services when source changes
   useEffect(() => {
     setValue("app.services", []);
+    setValue("app.predeploy", []);
     setDetectedServices({
       detected: false,
       count: 0,
@@ -325,7 +327,8 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
   useEffect(() => {
     if (servicesFromYaml && !detectedServices.detected) {
       const { services, predeploy } = servicesFromYaml;
-      setValue("app.services", [...services, predeploy].filter(valueExists));
+      setValue("app.services", services);
+      setValue("app.predeploy", [predeploy].filter(valueExists));
       setDetectedServices({
         detected: true,
         count: services.length,
@@ -334,6 +337,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
 
     if (!servicesFromYaml && detectedServices.detected) {
       setValue("app.services", []);
+      setValue("app.predeploy", []);
       setDetectedServices({
         detected: false,
         count: 0,
@@ -346,7 +350,8 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
       setError("app.name", {
         message: "An app with this name already exists",
       });
-      return;
+    } else {
+      clearErrors("app.name");
     }
   }, [porterApps, name]);
 
@@ -455,7 +460,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                       )}
                     </Container>
                     <Spacer y={0.5} />
-                    <ServiceList addNewText={"Add a new service"} />
+                    <ServiceList addNewText={"Add a new service"} fieldArrayName={"app.services"} />
                   </>,
                   <>
                     <Text size={16}>Environment variables (optional)</Text>
@@ -482,8 +487,10 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                             name: "pre-deploy",
                             type: "predeploy",
                           }),
+                          expanded: true,
                         })}
                         isPredeploy
+                        fieldArrayName={"app.predeploy"}
                       />
                     </>
                   ),

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceContainer.tsx

@@ -197,16 +197,10 @@ const ServiceContainer: React.FC<ServiceProps> = ({
       <ServiceHeader
         showExpanded={service.expanded}
         onClick={() => {
-          try {
-            console.log(index);
-            update(index, {
-              ...service,
-              expanded: !service.expanded,
-            });
-          } catch (err) {
-            console.log(err);
-          }
-
+          update(index, {
+            ...service,
+            expanded: !service.expanded,
+          });
         }}
         chart={chart}
         bordersRounded={!getHasBuiltImage() && !service.expanded}

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceList.tsx

@@ -44,6 +44,7 @@ type ServiceListProps = {
   prePopulateService?: ClientService;
   isPredeploy?: boolean;
   existingServiceNames?: string[];
+  fieldArrayName: "app.services" | "app.predeploy";
 };
 
 const ServiceList: React.FC<ServiceListProps> = ({
@@ -51,6 +52,7 @@ const ServiceList: React.FC<ServiceListProps> = ({
   prePopulateService,
   isPredeploy = false,
   existingServiceNames = [],
+  fieldArrayName,
 }) => {
   // top level app form
   const { control: appControl } = useFormContext<PorterAppFormData>();
@@ -72,7 +74,7 @@ const ServiceList: React.FC<ServiceListProps> = ({
   });
   const { append, remove, update, fields } = useFieldArray({
     control: appControl,
-    name: isPredeploy ? "app.predeploy" : "app.services",
+    name: fieldArrayName,
   });
   const {
     append: appendDeletion,
@@ -93,6 +95,9 @@ const ServiceList: React.FC<ServiceListProps> = ({
   const services = useMemo(() => {
     // if predeploy, only show predeploy services
     // if not predeploy, only show non-predeploy services
+    if (isPredeploy) {
+      console.log("fields", fields)
+    }
     return fields.map((svc, idx) => {
       const predeploy = isPredeployService(svc);
       return {

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/tabs/JobTabs.tsx

@@ -39,14 +39,14 @@ const JobTabs: React.FC<Props> = ({
 
   const tabs = isPredeploy
     ? [
-        { label: "Main", value: "main" as const },
-        { label: "Resources", value: "resources" as const },
-      ]
+      { label: "Main", value: "main" as const },
+      { label: "Resources", value: "resources" as const },
+    ]
     : [
-        { label: "Main", value: "main" as const },
-        { label: "Resources", value: "resources" as const },
-        { label: "Advanced", value: "advanced" as const },
-      ];
+      { label: "Main", value: "main" as const },
+      { label: "Resources", value: "resources" as const },
+      { label: "Advanced", value: "advanced" as const },
+    ];
 
   return (
     <>
@@ -56,13 +56,14 @@ const JobTabs: React.FC<Props> = ({
         setCurrentTab={setCurrentTab}
       />
       {match(currentTab)
-        .with("main", () => <MainTab index={index} service={service} />)
+        .with("main", () => <MainTab index={index} service={service} isPredeploy={isPredeploy} />)
         .with("resources", () => (
           <Resources
             index={index}
             maxCPU={maxCPU}
             maxRAM={maxRAM}
             service={service}
+            isPredeploy={isPredeploy}
           />
         ))
         .with("advanced", () => (

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/tabs/Main.tsx

@@ -12,9 +12,10 @@ import Link from "components/porter/Link";
 type MainTabProps = {
   index: number;
   service: ClientService;
+  isPredeploy?: boolean;
 };
 
-const MainTab: React.FC<MainTabProps> = ({ index, service }) => {
+const MainTab: React.FC<MainTabProps> = ({ index, service, isPredeploy = false }) => {
   const { register, watch } = useFormContext<PorterAppFormData>();
   const cron = watch(`app.services.${index}.config.cron.value`);
 
@@ -45,7 +46,7 @@ const MainTab: React.FC<MainTabProps> = ({ index, service }) => {
         width="300px"
         disabled={service.run.readOnly}
         disabledTooltip={"You may only edit this field in your porter.yaml."}
-        {...register(`app.services.${index}.run.value`)}
+        {...register(isPredeploy ? `app.predeploy.${index}.run.value` : `app.services.${index}.run.value`)}
       />
       {service.config.type === "job" && (
         <>

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/tabs/PreDeployTabs.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import Text from "components/porter/Text";
+import Spacer from "components/porter/Spacer";
+import TabSelector from "components/TabSelector";
+import Checkbox from "components/porter/Checkbox";
+
+import { ClientService } from "lib/porter-apps/services";
+import { match } from "ts-pattern";
+import MainTab from "./Main";
+import Resources from "./Resources";
+import { Controller, useFormContext } from "react-hook-form";
+import { PorterAppFormData } from "lib/porter-apps";
+
+interface Props {
+    index: number;
+    service: ClientService & {
+        config: {
+            type: "job" | "predeploy";
+        };
+    };
+    chart?: any;
+    maxRAM: number;
+    maxCPU: number;
+    isPredeploy?: boolean;
+}
+
+const JobTabs: React.FC<Props> = ({
+    index,
+    service,
+    maxRAM,
+    maxCPU,
+    isPredeploy,
+}) => {
+    const { control } = useFormContext<PorterAppFormData>();
+    const [currentTab, setCurrentTab] = React.useState<
+        "main" | "resources" | "advanced"
+    >("main");
+
+    const tabs = isPredeploy
+        ? [
+            { label: "Main", value: "main" as const },
+            { label: "Resources", value: "resources" as const },
+        ]
+        : [
+            { label: "Main", value: "main" as const },
+            { label: "Resources", value: "resources" as const },
+            { label: "Advanced", value: "advanced" as const },
+        ];
+
+    return (
+        <>
+            <TabSelector
+                options={tabs}
+                currentTab={currentTab}
+                setCurrentTab={setCurrentTab}
+            />
+            {match(currentTab)
+                .with("main", () => <MainTab index={index} service={service} />)
+                .with("resources", () => (
+                    <Resources
+                        index={index}
+                        maxCPU={maxCPU}
+                        maxRAM={maxRAM}
+                        service={service}
+                    />
+                ))
+                .with("advanced", () => (
+                    <>
+                        <Spacer y={1} />
+                        <Controller
+                            name={`app.services.${index}.config.allowConcurrent`}
+                            control={control}
+                            render={({ field: { value, onChange } }) => (
+                                <Checkbox
+                                    checked={value.value}
+                                    toggleChecked={() => {
+                                        onChange({
+                                            ...value,
+                                            value: !value.value,
+                                        });
+                                    }}
+                                    disabled={value.readOnly}
+                                    disabledTooltip={
+                                        "You may only edit this field in your porter.yaml."
+                                    }
+                                >
+                                    <Text color="helper">Allow jobs to execute concurrently</Text>
+                                </Checkbox>
+                            )}
+                        />
+                    </>
+                ))
+                .exhaustive()}
+        </>
+    );
+};
+
+export default JobTabs;

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/tabs/Resources.tsx

@@ -14,6 +14,7 @@ type ResourcesProps = {
   maxCPU: number;
   maxRAM: number;
   service: ClientService;
+  isPredeploy?: boolean;
 };
 
 const Resources: React.FC<ResourcesProps> = ({
@@ -21,6 +22,7 @@ const Resources: React.FC<ResourcesProps> = ({
   maxCPU,
   maxRAM,
   service,
+  isPredeploy = false,
 }) => {
   const { control, register, watch } = useFormContext<PorterAppFormData>();
 
@@ -32,7 +34,7 @@ const Resources: React.FC<ResourcesProps> = ({
     <>
       <Spacer y={1} />
       <Controller
-        name={`app.services.${index}.cpuCores`}
+        name={isPredeploy ? `app.predeploy.${index}.cpuCores` : `app.services.${index}.cpuCores`}
         control={control}
         render={({ field: { value, onChange } }) => (
           <InputSlider
@@ -58,7 +60,7 @@ const Resources: React.FC<ResourcesProps> = ({
       />
       <Spacer y={1} />
       <Controller
-        name={`app.services.${index}.ramMegabytes`}
+        name={isPredeploy ? `app.predeploy.${index}.ramMegabytes` : `app.services.${index}.ramMegabytes`}
         control={control}
         render={({ field: { value, onChange } }) => (
           <InputSlider