ERA-11154: Do not add a collection item when pressing "cancel" upon first creation

[gaboDev]

What does this PR do?

• Adds logic to the Collection component to remove new empty collection items when user cancels an addition.

Relevant link(s)

• Tracking tickets: ERA-11154
• Hosted demo environments

[luixlive]

You got the right place for the implementation, however I don't think it matches the requirements we got from design. I added a comment with some guidance based on what came to my mind when discussing this with Tiffany. You don't have to follow my implementation, of course, you may find a better approach, but I wanted to share it so you have a reference 👍

[luixlive]

I don't think this logic matches the requirement 🤔

What I read here is: when the user clicks cancel on a collection item modal, if the inner fields of the item don't have values yet, delete it. This means that items that were not recently added could be deleted with Cancel if they are empty, but that's not the idea, we have a trash button for that. Cancel is designed just to "undo" the changes done while having the modal open.

The requirement from design is: when the user adds a new item and immediately clicks cancel, delete the item (only on that first time the modal opened automatically after adding the item). In that first render of the modal we want the cancel button to work as a delete because from the user perspective "Cancel" would mean to cancel the "addition" of the item, not to cancel the changes.

I think there's a very simple approach using a ref to track if the item was just added without having to pass too many props around. What I would have expected is to add some logic in the Item component like:

const Item = ({...}) => {
  const errorsBeforeEditingRef = useRef(null);
  const formDataBeforeEditingRef = useRef(null);
  const shouldDeleteOnCancelRef = useRef(true);  // <--- New Ref
  ...
  const onFormModalCancel = () => {
    // New if: if shouldDeleteOnCancelRef.current is true, the item was just added, so if the user clicks cancel we delete it.
    if (shouldDeleteOnCancelRef.current) {
      onDeleteItem();
    } else {
      onChange(formDataBeforeEditingRef.current, errorsBeforeEditingRef.current);
      setIsFormModalOpen(false);
    }
  };
  ...
  // New callback to attach to the <FormModal onDone={onFormModalDone} />
  const onFormModalDone = () => {
    setIsFormModalOpen(false);

    // If the user clicks Done, we now set the ref as false so next time the modal opens we don't delete it on cancel.
    shouldDeleteOnCancelRef.current = false;
  };
  ...
};

I'm not sure if this code runs perfectly, probably not, but this is the overall idea I have of a simple implementation of the requirements. Also I remember we said that the trash icon at the bottom left of the modal shouldn't show up in that first modal opening, since the cancel button already works as a delete:

With the approach I suggest, now you have a flag shouldDeleteOnCancelRef.current that you can use to conditionally render the trash button 😄