[BUU] See product images

[dacook]

What? Why?

• First part of [BUU] See and update product images #11065

Displays each product's image, and provides a shortcut to the edit page.
Sorry it should have been two separate commits, I hope it's ok to review as-is.

What should we test?

Viewing images
Given that I am in /admin/products
And I have products with an image
When my catalogue has loaded
Then I see the illustration for products

Interim scenario: Updating an image
Given that I am hovering on a product
When I select to edit its image
Then I see the image edit page and can update it.

Note that products without images don't have any new options yet. This will be expanded upon in the next part.

Release notes

Changelog Category (reviewers may add a label for the release notes):

• 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

Documentation updates

[rioug]

Nice one !

[mkllnk]

Nice.

[RachL]

@dacook @mariocarabotta one question here: the button "edit" appears as soon as we hover the line. does this mean that we will be able to edit the image by clicking anywhere on the line? Currently the button works only when we click on it.

If in the end we keep only the click on the button, maybe we should always display it instead of displaying it on hover? Or can we display it only when hovering the image?

[dacook]

To explain the current behaviour: on hover, we're simply revealing what options we have (we also reveal the text inputs). You can then click to the action that you want.

But I can now see how the button does appear to be related to the whole row. An idea: what if instead of a button, the image changed another way, eg an icon overlaid, to indicate that it's clickable? Rough mockup:

Hmm actually I don't think that makes much difference.

What if the button/icon don't show until you hover the actual image. Maybe it's easy enough for the user to discover, so we don't need to show anything on row hover.

Hmm I think we're over-thinking it!

[dacook]

Rebased to resolve conflict.

[RachL]

What if the button/icon don't show until you hover the actual image. Maybe it's easy enough for the user to discover, so we don't need to show anything on row hover.

That's the behavior on the old page FYI. It's not perfect but maybe we can keep it for now?

[dacook]

@mariocarabotta , Rachel suggests we change the hover behaviour, so that we display the "Edit" button only when hovering the image (not the whole row).
The assumption is that the user will discover this easily enough.

I'm happy with that, what do you think?

[mariocarabotta]

@mariocarabotta , Rachel suggests we change the hover behaviour, so that we display the "Edit" button only when hovering the image (not the whole row). The assumption is that the user will discover this easily enough.

I'm happy with that, what do you think?

sounds good!

[mariocarabotta]

@mariocarabotta , Rachel suggests we change the hover behaviour, so that we display the "Edit" button only when hovering the image (not the whole row). The assumption is that the user will discover this easily enough.
I'm happy with that, what do you think?

sounds good!

@dacook also I'm thinking about people using it on mobile, probably better to make the whole image clickable for editing - basically the edit button is more of a hint for new users for learning that you can edit the image by clicking on it

[dacook]

Thanks for confirming Mario. I've found it will be simpler to fix this in the next PR so will merge this one.

Have rebased again, with columns set properly.