Show summary of changes on badge owner edit

app/routes/badges/$id/edit.tsx

@@ -94,13 +94,6 @@ export default function EditBadgePage() {
   );
 }
 
-function submitButtonText(amountOfChanges: number) {
-  if (amountOfChanges === 0) return "Submit";
-  if (amountOfChanges === 1) return `Submit ${amountOfChanges} change`;
-
-  return `Submit ${amountOfChanges} changes`;
-}
-
 function Managers({ data }: { data: BadgeDetailsLoaderData }) {
   const [managers, setManagers] = React.useState(
     data.managers.map((m) => ({
@@ -171,6 +164,13 @@ function Managers({ data }: { data: BadgeDetailsLoaderData }) {
       </Button>
     </div>
   );
+
+  function submitButtonText(amountOfChanges: number) {
+    if (amountOfChanges === 0) return "Submit";
+    if (amountOfChanges === 1) return `Submit ${amountOfChanges} change`;
+
+    return `Submit ${amountOfChanges} changes`;
+  }
 }
 
 function Owners({ data }: { data: BadgeDetailsLoaderData }) {
@@ -182,11 +182,7 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
     }))
   );
 
-  const amountOfChanges = owners.reduce((acc, owner) => {
-    const oldOwner = data.owners.find((o) => o.id === owner.id);
-    const hasChanged = !oldOwner || owner.count !== oldOwner.count;
-    return acc + (hasChanged ? 1 : 0);
-  }, 0);
+  const ownerDifferences = getOwnerDifferences(owners, data.owners);
 
   return (
     <div className="stack md">
@@ -231,6 +227,37 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
           userIdsToOmit={new Set(owners.map((m) => m.id))}
         />
       </div>
+      {ownerDifferences.length > 0 ? (
+        <ul className="badges-edit__differences">
+          {ownerDifferences.map((o) => (
+            <li key={o.id}>
+              {o.type === "added" ? (
+                <>
+                  {o.difference}{" "}
+                  <span
+                    className="text-success font-semi-bold"
+                    data-cy="difference-added"
+                  >
+                    added
+                  </span>{" "}
+                  to {o.discordFullName}
+                </>
+              ) : (
+                <>
+                  {o.difference}{" "}
+                  <span
+                    className="text-error font-semi-bold"
+                    data-cy="difference-removed"
+                  >
+                    removed
+                  </span>{" "}
+                  from {o.discordFullName}
+                </>
+              )}
+            </li>
+          ))}
+        </ul>
+      ) : null}
       <input
         type="hidden"
         name="ownerIds"
@@ -240,16 +267,57 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
         type="submit"
         tiny
         className="badges-edit__submit-button"
-        disabled={amountOfChanges === 0}
+        disabled={ownerDifferences.length === 0}
         name="_action"
         value="OWNERS"
+        data-cy="save-owners-button"
       >
-        {submitButtonText(amountOfChanges)}
+        Save
       </Button>
     </div>
   );
 }
 
+function getOwnerDifferences(
+  newOwners: Array<{
+    id: number;
+    discordFullName: string;
+    count: number;
+  }>,
+  oldOwners: BadgeDetailsLoaderData["owners"]
+) {
+  const result: Array<{
+    id: User["id"];
+    type: "added" | "removed";
+    difference: number;
+    discordFullName: string;
+  }> = [];
+
+  for (const owner of newOwners) {
+    const oldOwner = oldOwners.find((o) => o.id === owner.id);
+    if (!oldOwner) {
+      result.push({
+        id: owner.id,
+        type: "added",
+        difference: owner.count,
+        discordFullName: owner.discordFullName,
+      });
+      continue;
+    }
+
+    if (owner.count !== oldOwner.count) {
+      result.push({
+        id: owner.id,
+        type: owner.count > oldOwner.count ? "added" : "removed",
+        difference: Math.abs(owner.count - oldOwner.count),
+        discordFullName: owner.discordFullName,
+      });
+    }
+  }
+
+  return result;
+}
+
 function countArrayToDuplicatedIdsArray(
   owners: Array<{ id: User["id"]; count: number }>
 ) {

app/styles/badges.css

@@ -93,6 +93,17 @@
   font-size: var(--fonts-md);
 }
 
+.badges-edit__differences {
+  padding: 0;
+  font-size: var(--fonts-xs);
+  list-style: none;
+}
+
+.badges-edit__differences > li::before {
+  padding-inline-end: 5px;
+  content: "-";
+}
+
 .badges-edit__submit-button {
   margin: 0 auto;
 }

app/styles/common.css

@@ -205,6 +205,10 @@
   color: var(--theme-success);
 }
 
+.font-semi-bold {
+  font-weight: var(--semi-bold);
+}
+
 .w-full {
   width: 100%;
 }

cypress/e2e/badges.cy.ts

@@ -39,7 +39,8 @@ describe("Plus suggestions page", () => {
     cy.getCy("new-owner-combobox-input").clear().type("N-ZAP{enter}");
     cy.getCy("owner-count-input").last().type("1"); // new count = 11
 
-    cy.contains("1 change").click();
+    cy.getCy("difference-added");
+    cy.getCy("save-owners-button").click();
     cy.contains("11");
   });
 
@@ -56,7 +57,8 @@ describe("Plus suggestions page", () => {
 
         cy.getCy("owner-count-input").first().type("{selectall}").type("0");
 
-        cy.contains("1 change").click();
+        cy.getCy("difference-removed");
+        cy.getCy("save-owners-button").click();
 
         cy.visit(BADGES_PAGE);
         cy.getCy("badge-nav-link").first().click();