fix: remove reset logic which cleared all slots (#2353)

* fix: remove reset logic which cleared all slots

- Encountered a bug where if a file went from having one label (tag) to no labels then a validation error would appear and all tags would be lost
- Discovered that in these cases resetAllSlots was being called causing this behaviour
- Removed the reset all logic which resolved the bug

* refactor: remove variable definition

- The `updatedFileList` was being defined but the value of that defintion was never being used
- Removed the definition and added repetition but hopefully leaving more readable code.

* refactor: use cloneDeep instead of merge

- Found that merge with a single argument was shallow copying
- This lead to us directly updating the fileList
- Changed to `cloneDeep` as there was already precedence within the file
- As per #1811 structuredClone not yet supported in our stack

editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx

@@ -16,7 +16,6 @@ import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import capitalize from "lodash/capitalize";
-import merge from "lodash/merge";
 import React, { useEffect, useState } from "react";
 import { usePrevious } from "react-use";
 import ErrorWrapper from "ui/ErrorWrapper";
@@ -28,7 +27,6 @@ import {
   FileList,
   getTagsForSlot,
   removeSlots,
-  resetAllSlots,
 } from "./model";
 import { fileLabelSchema } from "./schema";
 
@@ -172,23 +170,22 @@ const SelectMultiple = (props: SelectMultipleProps) => {
     previousTags: string[] | undefined,
     tags: string[],
   ) => {
-    let updatedFileList: FileList = merge(fileList);
     const updatedTags = tags.filter((tag) => !previousTags?.includes(tag));
     const removedTags = previousTags?.filter((tag) => !tags?.includes(tag));
 
     if (updatedTags.length > 0) {
-      updatedFileList = addOrAppendSlots(updatedTags, uploadedFile, fileList);
+      const updatedFileList = addOrAppendSlots(
+        updatedTags,
+        uploadedFile,
+        fileList,
+      );
+      setFileList(updatedFileList);
     }
 
     if (removedTags && removedTags.length > 0) {
-      updatedFileList = removeSlots(removedTags, uploadedFile, fileList);
+      const updatedFileList = removeSlots(removedTags, uploadedFile, fileList);
+      setFileList(updatedFileList);
     }
-
-    if (tags.length === 0 && previousTags) {
-      updatedFileList = resetAllSlots(fileList);
-    }
-
-    setFileList(updatedFileList);
   };
 
   useEffect(() => {

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";
@@ -331,7 +330,7 @@ export const addOrAppendSlots = (
   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
   >;
@@ -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
   >;
@@ -396,7 +395,7 @@ export const removeSlots = (
 };
 
 export const resetAllSlots = (fileList: FileList): FileList => {
-  const updatedFileList: FileList = merge(fileList);
+  const updatedFileList: FileList = cloneDeep(fileList);
   const categories = Object.keys(updatedFileList) as Array<
     keyof typeof updatedFileList
   >;