separate predeploy into its own client service array

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

@@ -68,6 +68,7 @@ export const deletionValidator = z.object({
 export const clientAppValidator = z.object({
   name: z.string().min(1),
   services: serviceValidator.array(),
+  predeploy: serviceValidator.array().optional(),
   env: z.record(z.string(), z.string()).default({}),
   build: buildValidator,
 });
@@ -164,13 +165,12 @@ export function clientAppToProto(data: PorterAppFormData): PorterApp {
   const { app, source } = data;
 
   const services = app.services
-    .filter((s) => !isPredeployService(s))
     .reduce((acc: Record<string, Service>, svc) => {
       acc[svc.name.value] = serviceProto(serializeService(svc));
       return acc;
     }, {});
 
-  const predeploy = app.services.find((s) => isPredeployService(s));
+  const predeploy = app.predeploy?.[0]
 
   const proto = match(source)
     .with(
@@ -289,19 +289,20 @@ export function clientAppFromProto(
 
   const predeployOverrides = serializeService(overrides.predeploy);
   const predeploy = proto.predeploy
-    ? deserializeService({
-        service: serializedServiceFromProto({
-          name: "pre-deploy",
-          service: proto.predeploy,
-          isPredeploy: true,
-        }),
-        override: predeployOverrides,
-      })
+    ? [deserializeService({
+      service: serializedServiceFromProto({
+        name: "pre-deploy",
+        service: proto.predeploy,
+        isPredeploy: true,
+      }),
+      override: predeployOverrides,
+    })]
     : undefined;
 
   return {
     name: proto.name,
-    services: [...services, predeploy].filter(valueExists),
+    services,
+    predeploy,
     env: proto.env,
     build: clientBuildFromProto(proto.build) ?? {
       method: "pack",

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

@@ -26,7 +26,7 @@ interface ServiceProps {
   index: number;
   service: ClientService;
   chart?: any;
-  update: UseFieldArrayUpdate<PorterAppFormData, "app.services">;
+  update: UseFieldArrayUpdate<PorterAppFormData, "app.services" | "app.predeploy">;
   remove: (index: number) => void;
 }
 
@@ -47,7 +47,7 @@ const ServiceContainer: React.FC<ServiceProps> = ({
   const [maxRAM, setMaxRAM] = useState(
     Math.round(
       convert(AWS_INSTANCE_LIMITS["t3"]["medium"]["RAM"], "GiB").to("MB") *
-        UPPER_BOUND
+      UPPER_BOUND
     )
   ); //default is set to a t3 medium
   const context = useContext(Context);
@@ -140,7 +140,7 @@ const ServiceContainer: React.FC<ServiceProps> = ({
             );
           }
         })
-        .catch((error) => {});
+        .catch((error) => { });
     }
   }, []);
 
@@ -197,10 +197,16 @@ const ServiceContainer: React.FC<ServiceProps> = ({
       <ServiceHeader
         showExpanded={service.expanded}
         onClick={() => {
-          update(index, {
-            ...service,
-            expanded: !service.expanded,
-          });
+          try {
+            console.log(index);
+            update(index, {
+              ...service,
+              expanded: !service.expanded,
+            });
+          } catch (err) {
+            console.log(err);
+          }
+
         }}
         chart={chart}
         bordersRounded={!getHasBuiltImage() && !service.expanded}
@@ -246,7 +252,7 @@ const ServiceContainer: React.FC<ServiceProps> = ({
         // Check if has built image
         getHasBuiltImage() && (
           <StatusFooter
-            setExpandedJob={() => {}}
+            setExpandedJob={() => { }}
             chart={chart}
             service={service}
           />
@@ -331,7 +337,7 @@ const ServiceHeader = styled.div<{
     border-radius: 20px;
     margin-left: -10px;
     transform: ${(props: { showExpanded?: boolean; chart: any }) =>
-      props.showExpanded ? "" : "rotate(-90deg)"};
+    props.showExpanded ? "" : "rotate(-90deg)"};
   }
 `;
 

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

@@ -70,7 +70,7 @@ const ServiceList: React.FC<ServiceListProps> = ({
   });
   const { append, remove, update, fields } = useFieldArray({
     control: appControl,
-    name: "app.services",
+    name: isPredeploy ? "app.predeploy" : "app.services",
   });
   const {
     append: appendDeletion,