Validate-apply: don't append deletions for services that haven't been saved yet (#3517)

dashboard/src/lib/hooks/useDeploymentTarget.ts

@@ -19,7 +19,8 @@ export function useDefaultDeploymentTarget() {
   const { data } = useQuery(
     ["getDefaultDeploymentTarget", currentProject?.id, currentCluster?.id],
     async () => {
-      if (!currentProject?.id || !currentCluster?.id) {
+      // see Context.tsx L98 for why the last check is necessary
+      if (!currentProject?.id || !currentCluster?.id || currentCluster.id === -1) {
         return;
       }
       const res = await api.getDefaultDeploymentTarget(

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

@@ -191,7 +191,7 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
         porterApp.name,
       ]);
       setPreviewRevision(null);
-    } catch (err) {}
+    } catch (err) { }
   });
 
   useEffect(() => {
@@ -218,7 +218,6 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
           latestSource={latestSource}
           onSubmit={onSubmit}
         />
-        <Spacer y={1} />
         <AnimateHeight height={isDirty && !onlyExpandedChanged ? "auto" : 0}>
           <Banner
             type="warning"
@@ -252,11 +251,11 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
             { label: "Environment", value: "environment" },
             ...(latestProto.build
               ? [
-                  {
-                    label: "Build Settings",
-                    value: "build-settings",
-                  },
-                ]
+                {
+                  label: "Build Settings",
+                  value: "build-settings",
+                },
+              ]
               : []),
             { label: "Settings", value: "settings" },
           ]}

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

@@ -15,7 +15,7 @@ import { useLatestRevision } from "../LatestRevisionContext";
 
 const Overview: React.FC = () => {
   const { formState } = useFormContext<PorterAppFormData>();
-  const { porterApp } = useLatestRevision();
+  const { porterApp, latestProto } = useLatestRevision();
 
   const buttonStatus = useMemo(() => {
     if (formState.isSubmitting) {
@@ -43,6 +43,7 @@ const Overview: React.FC = () => {
                 type: "predeploy",
               }),
             })}
+            existingServiceNames={Object.keys(latestProto.services)}
             isPredeploy
           />
           <Spacer y={0.5} />

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

@@ -43,12 +43,14 @@ type ServiceListProps = {
   addNewText: string;
   prePopulateService?: ClientService;
   isPredeploy?: boolean;
+  existingServiceNames?: string[];
 };
 
 const ServiceList: React.FC<ServiceListProps> = ({
   addNewText,
   prePopulateService,
   isPredeploy = false,
+  existingServiceNames = [],
 }) => {
   // top level app form
   const { control: appControl } = useFormContext<PorterAppFormData>();
@@ -150,7 +152,10 @@ const ServiceList: React.FC<ServiceListProps> = ({
   const onRemove = (index: number) => {
     const name = services[index].svc.name.value;
     remove(index);
-    appendDeletion({ name });
+
+    if (existingServiceNames.includes(name)) {
+      appendDeletion({ name });
+    }
   };
 
   return (