Add Multi-Value Image/Video Prop Support (UI)

Will have feedback in the MR shortly - but switching from RTBC to ensure it's not merged yet.

The issue title and summary mention props multiple times, but the only tests in the MR work with the entity form, which does not deal with props at all. This should either update the issue summary to accurately scope what is being done (which seems to be reskinning the media library widget) or the tests need to be expanded to cover this UI change with components using a multi-media widget.

Feedback addressed.

There are issues with this sort implementation:

• Any sorting erases all media item data (and the problem is front end based, the data is erased before any request to the back end occurs)
• It will not be able to sort a mix of pre-existing items and ones newly added to the form

Fortunately, as part of helping with a separate issue, I found a way to implement sorting that seems to work well - see this MR and resembles what's being done here, though you'll notice some differences.

Because it was part of a larger issue, not all of it is specific to the sorting, but you should be able to pick the bits you need which is basically every JS / JSX file added, along with the changes in src/Hook/ReduxIntegratedFieldWidgetsHooks.php

It might be necessary to coordinate a bit between the two MRs, but I think that will ultimately be more efficient than bringing in the approach in this issue then having to perform a more surgical change.

Created a new MR https://git.drupalcode.org/issue/canvas-3577219/-/merge_requests/1 on top of https://git.drupalcode.org/project/canvas/-/merge_requests/725
as suggested by Ben.

I think this should get final sign-off from @bnjmnm prior to getting merged.

The MR linked in comment #16 doesn't seem to have any of the solutions I provided, and also seems to be a request to merge into the 3546869-sort-integration of this issue's fork, not 1.x.
I created an MR from the 3577219-add-multi-value-imagevideo-v2 as that looks to have the solution I provided. I will provide some feedback on that branch. At the very least, there are a few things from my solution that need to be addressed. If that MR isn't what you intend to merge, the feedback will still be relevant.

I realize I made it a little tricky by introducing a big chunk of code in something I was otherwise reviewing - it would be good if someone else reviews my additions. Despite the hassle I think these additions will ultimately save us time and suffering, but it does make the process a little odd.

My assumption was that we will do changes on top of https://git.drupalcode.org/project/canvas/-/merge_requests/725, so that once 725 is merged, only my changes remain.
Hence, https://git.drupalcode.org/issue/canvas-3577219/-/merge_requests/1 has additional changes on top of 725.

The approach to sort in MR 689 shouldn't ever be something merged to 1.x, especially since I already have a solution that works. I went through the other parts of 698 such as drag handle functionality (and how it is disabled on single items) and added those to a branch with the sorting approach i came up with. Please see 3577219-media-with-sort. Will switch to NR once tests are green

The only fail in CI is a PHPStan problem that was accidentally merged into 1.x

In https://git.drupalcode.org/project/canvas/-/merge_requests/733/diffs?com..., added drag handle conditionally and removed some unnecessary css changes.
Tested manually and it is working as expected.

Merged, thanks!

Is it correct to conclude that technical debt has been paid down thanks to this code having been deleted? 😊

// Some prop shapes do not have a means of representing an empty value, so they
// can't simply have their value replaced when removed. This special string
// flags items for removal that can't be replaced with an empty value.
export const VALUE_THAT_MEANS_REMOVE = '$%^&*JUST_REMOVE';

I don’t understand why this is no longer necessary. But it seems good to no longer have it 😄

Thanks for all the ℹ️ comments, Ben, that’s really helpful. Maybe just one more on that code block would be helpful for more people besides just me?

Sincerely, a React noob 🥸

Added MR 755 to address a race condition with the media remove button. The store update should not happen until the core AJAX request is complete, which can happen now that the update is triggered by the actual click of the remove button, and not a side effect of the AJAX replace.

Not switching status until it's green... I'm not sure if the playwright fails are valid, but it's not generating the artifacts that would help me determine that.