properly delete old ingress key when edited (#4314)

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

@@ -1,27 +1,29 @@
-import Button from "components/porter/Button";
-import { ControlledInput } from "components/porter/ControlledInput";
-import Spacer from "components/porter/Spacer";
-import { PorterAppFormData } from "lib/porter-apps";
 import React from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import styled from "styled-components";
 
+import Button from "components/porter/Button";
+import { ControlledInput } from "components/porter/ControlledInput";
+import Spacer from "components/porter/Spacer";
+import { type PorterAppFormData } from "lib/porter-apps";
+
 type Props = {
   index: number;
 };
 
 const IngressCustomAnnotations: React.FC<Props> = ({ index }) => {
-  const { control, register } = useFormContext<PorterAppFormData>();
+  const { control, register, setValue } = useFormContext<PorterAppFormData>();
   const { remove, append, fields } = useFieldArray({
     control,
     name: `app.services.${index}.config.ingressAnnotations`,
   });
-  const { append: appendAnnotationDeletion } = useFieldArray({
-    control,
-    name: `app.services.${index}.ingressAnnotationDeletions`,
-  });
+  const { append: appendAnnotationDeletion, fields: fieldsAnnotationDeletion } =
+    useFieldArray({
+      control,
+      name: `app.services.${index}.ingressAnnotationDeletions`,
+    });
 
-  const onRemove = (i: number, key: string) => {
+  const onRemove = (i: number, key: string): void => {
     remove(i);
     appendAnnotationDeletion({
       key,
@@ -44,7 +46,30 @@ const IngressCustomAnnotations: React.FC<Props> = ({ index }) => {
                       "You may only edit this field in your porter.yaml."
                     }
                     {...register(
-                      `app.services.${index}.config.ingressAnnotations.${i}.key`
+                      `app.services.${index}.config.ingressAnnotations.${i}.key`,
+                      {
+                        // If the user edits an existing key, we need to mark the old key as deleted.
+                        // Otherwise, the backend will merge the old set of keys with the new set, and the original key
+                        // will still exist.
+                        onChange: (e) => {
+                          if (
+                            e.target.value &&
+                            e.target.value !== annotation.key
+                          ) {
+                            setValue(
+                              `app.services.${index}.config.ingressAnnotations.${i}.key`,
+                              e.target.value
+                            );
+                            if (
+                              !fieldsAnnotationDeletion.find(
+                                (d) => d.key === annotation.key
+                              )
+                            ) {
+                              appendAnnotationDeletion({ key: annotation.key });
+                            }
+                          }
+                        },
+                      }
                     )}
                   />
                   <ControlledInput