[BUU] Update product images

[dacook]

What? Why?

• Part of [BUU] See and update product images #11065
  This also includes some visual updates.

I'm taking baby steps with this one so I can get dev input on the approach:

1. The modal and form for the chosen image are loaded on-demand, with a Reflex
2. It submits a standard form to the existing ImagesController, because Reflex doesn't support file uploads.
   • Perhaps we'll submit this with AJAX later, instead of reloading the whole page. But we'll probably focus on other parts of the page first.
3. When updated, it redirects back to the product list (keeping any existing query params)

What should we test?

As per #11065
But you can only update existing images, not add a new one yet.

Release notes

Because admin_style_v3 has now been released to instance managers:

• User facing changes
• API changes (V0, V1, DFC or Webhook)
• Technical changes only
• Feature toggled

The title of the pull request will be included in the release notes.

Dependencies

• [BUU] See product images #11942

Documentation updates

[dacook]

Hi @mariocarabotta , this can be previewed on staging.

While working on this, I've generated some example errors by uploading a non-image file:

[mkllnk]

Nicely done.

[mkllnk]

I think that the future will be to upload the files directly to the storage (AWS) from the browser. Rails has everything we need for that. The form submission then just contains the id of the uploaded file and a checksum and should work with StimulusReflex. The downside of this approach is probably that the storage validations gem doesn't work with this. It inspects the uploaded files and we would need to download it from the storage first. Still possible. We need to download it anyway to generate all the variants.

[dacook]

@mkllnk , you pointed out that we can validate the image types on the client side.
The browser can do this for us, so I suggest we add the simple mime-type condition image/*, and leave the more specific validation in the Rails model (rather than try to duplicate it).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers

Sound ok to you?

[dacook]

Rebased to resolve conflict.

[mkllnk]

The browser can do this for us, so I suggest we add the simple mime-type condition image/*, and leave the more specific validation in the Rails model (rather than try to duplicate it).

Yes, perfect.

[mariocarabotta]

Hi @mariocarabotta , this can be previewed on staging.

While working on this, I've generated some example errors by uploading a non-image file:

is that actually one error with 2 different explanations?

[rioug]

Looks good ! It just looks like there is a leftover method in the products_reflex

[dacook]

is that actually one error with 2 different explanations?

Yes, you've guessed correctly. I took a look and found that the second error has been added as a more user-friendly message. It looks like it was intended to replace the first one, but for some reason they both show.
We can try to fix it when we work on error messages. I'll add a suggestion for this on the issue.

Edit: before we deal with error messages, I'd like to finish off the current approach, as that will dictate what's practical going forard.

[dacook]

Awaiting dependency merged before this can proceed.

[mariocarabotta]

is that actually one error with 2 different explanations?

Yes, you've guessed correctly. I took a look and found that the second error has been added as a more user-friendly message. It looks like it was intended to replace the first one, but for some reason they both show. We can try to fix it when we work on error messages. I'll add a suggestion for this on the issue.

Edit: before we deal with error messages, I'd like to finish off the current approach, as that will dictate what's practical going forard.

sure sure no rush on dealing with errors. let's sort it out when we have the full picture of everything else

[dacook]

Rebased, and added an update for hover behaviour and style fix.