From e3158fc2e1bd7674adf92879aff5bec8cce8676c Mon Sep 17 00:00:00 2001
From: Mike Heneghan <mike@opensystemslab.io>
Date: Mon, 13 Nov 2023 16:42:45 +0000
Subject: [PATCH 1/2] fix: resolve bug where deleting a file didn't remove
 label

- Reinstate the `merge` which updates state directly
- This isn't best practice but does show how the bug started happening
---
 .../src/@planx/components/FileUploadAndLabel/model.ts          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts
index a818f0e802..9206717fa3 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts
@@ -1,4 +1,5 @@
 import cloneDeep from "lodash/cloneDeep";
+import merge from "lodash/merge";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import { Store } from "pages/FlowEditor/lib/store";
@@ -367,7 +368,7 @@ export const removeSlots = (
   uploadedFile: FileUploadSlot,
   fileList: FileList,
 ): FileList => {
-  const updatedFileList: FileList = cloneDeep(fileList);
+  const updatedFileList: FileList = merge(fileList);
   const categories = Object.keys(updatedFileList) as Array<
     keyof typeof updatedFileList
   >;

From 3f5a68832ec3c02707a1519825cc4fd03398f818 Mon Sep 17 00:00:00 2001
From: Mike Heneghan <mike@opensystemslab.io>
Date: Mon, 13 Nov 2023 16:46:56 +0000
Subject: [PATCH 2/2] refactor: update the remove method to avoid direct state
 update

- Create a clone of fileList before removing the file
- Remove the file and update state with the setter
---
 .../src/@planx/components/FileUploadAndLabel/Public.tsx        | 3 ++-
 .../src/@planx/components/FileUploadAndLabel/model.ts          | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
index 87decf9a4e..e11537ca0e 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -240,11 +240,12 @@ function Component(props: Props) {
                       ),
                     );
                     setFileUploadStatus(`${slot.file.path} was deleted`);
-                    removeSlots(
+                    const updatedFileList = removeSlots(
                       getTagsForSlot(slot.id, fileList),
                       slot,
                       fileList,
                     );
+                    setFileList(updatedFileList);
                   }}
                 />
               );
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts
index 9206717fa3..a818f0e802 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts
@@ -1,5 +1,4 @@
 import cloneDeep from "lodash/cloneDeep";
-import merge from "lodash/merge";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import { Store } from "pages/FlowEditor/lib/store";
@@ -368,7 +367,7 @@ export const removeSlots = (
   uploadedFile: FileUploadSlot,
   fileList: FileList,
 ): FileList => {
-  const updatedFileList: FileList = merge(fileList);
+  const updatedFileList: FileList = cloneDeep(fileList);
   const categories = Object.keys(updatedFileList) as Array<
     keyof typeof updatedFileList
   >;