disallow having zero services (#3835)

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

@@ -131,6 +131,15 @@ export const porterAppFormValidator = z
         "if using Docker registry or building via a Dockerfile, service must not include `docker run` in its start command; instead, leave the start command empty",
       path: ["app", "services"],
     }
+  )
+  .refine(
+    ({ app }) => {
+      return app.services.length !== 0;
+    },
+    {
+      message: "app must have at least one service",
+      path: ["app", "services"],
+    }
   );
 export type PorterAppFormData = z.infer<typeof porterAppFormValidator>;
 

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

@@ -392,9 +392,7 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
         const appErrors = Object.keys(errors.app ?? {});
         if (appErrors.includes("build")) {
           errorMessage = "Build settings are not properly configured.";
-        }
-
-        if (appErrors.includes("services")) {
+        } else if (appErrors.includes("services")) {
           errorMessage = "Service settings are not properly configured";
           if (
             errors.app?.services?.root?.message ||
@@ -405,11 +403,8 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
               errors.app?.services?.message;
             errorMessage = `${errorMessage} - ${serviceErrorMessage}`;
           }
-          errorMessage = `${errorMessage}.`;
-        }
-
-        // this is the high level error message coming from the apply
-        if (appErrors.includes("message")) {
+          errorMessage = `${errorMessage}. To undo all changes, refresh the page.`;
+        } else if (appErrors.includes("message")) {  // this is the high level error message coming from the apply
           errorMessage = errors.app?.message ?? errorMessage;
         }
       }

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

@@ -60,8 +60,8 @@ const ServiceStatusFooter: React.FC<ServiceStatusFooterProps> = ({
         <>
             {status.map((versionStatus, i) => {
                 return (
-                    <>
-                        <StyledStatusFooterTop key={i} expanded={expanded}>
+                    <div key={i}>
+                        <StyledStatusFooterTop expanded={expanded}>
                             <StyledContainer row spaced>
                                 {match(versionStatus)
                                     .with({ status: "failing" }, (vs) => {
@@ -127,7 +127,7 @@ const ServiceStatusFooter: React.FC<ServiceStatusFooterProps> = ({
                                 </StyledStatusFooter>
                             </AnimateHeight>
                         )}
-                    </>
+                    </div>
                 );
             })}
         </>