🚧 Products v3: viewing, searching, filtering & pagination #11163

jibees · 2023-07-06T07:44:24Z

What? Why?

This PR introduce the first bunch of features for the new products V3 page, under the admin_style_v3 feature toggle.

Includes:

What should we test?

There are extensive acceptance criteria on each of the issues listed above (although they behave as you'd expect). The first two had been merged already but haven't yet been tested. Please review each of these, and provide any feedback you might have.

Release notes

Changelog Category: User facing changes, under feature toggle

dacook

Phew, epic job!
As you're aware, it was hard to review as there's a lot of commits and changes. I've got some suggestions, and various comments. I would have gone ahead and tried these out but I'm afraid I've run out of time today.

I also think it will help to pull out my unrelated commits, particularly because one has an effect outside of the feature toggle that will be worth a quick test (I don't want to break the admin interface again!). I'll go ahead with that, and update this branch (and squash a few fixup commits).

app/webpacker/css/admin_v3/components/navigation.scss

dacook · 2023-07-12T02:21:33Z

app/webpacker/css/admin_v3/shared/tables.scss

+table + .pagination {
+  margin-top: -18px;
+}


Hmm that's a tricky one.
I think ideally tables should have a wrapper that applies the large margin, and pagination could go inside the wrapper. Let's solve that in a future update.

app/reflexes/products_reflex.rb

spec/system/admin/products_v3/products_spec.rb

app/reflexes/products_reflex.rb

app/webpacker/css/admin_v3/all.scss

jibees · 2023-07-12T08:14:47Z

Hi @dacook ! Thanks for this deep review. All the thumbs-up-ed comment you've made have been addressed. I let you resolve the one the want to resolve ;)

dacook

Thanks JB, great work.

I just booted it up in my dev environment and it's so beautiful and fast.. 🤩

I think for a second review, it would be better to have a fresh perspective and look at the overall diff on the Files changed tab, rather than review all the commits.

dacook · 2023-07-12T23:33:40Z

I've updated the testing notes to point to the acceptance criteria of each issue. I also re-ordered the list based on the order they were created.

mkllnk

Great work! 💪 ✨

app/reflexes/products_reflex.rb

mkllnk · 2023-07-17T06:41:50Z

app/reflexes/products_reflex.rb

+      # rubocop:disable Layout/LineLength
+      query.merge!(name_or_meta_keywords_or_variants_display_as_or_variants_display_name_or_supplier_name_cont: @search_term)
+      # rubocop:enable Layout/LineLength


Suggested change

# rubocop:disable Layout/LineLength

query.merge!(name_or_meta_keywords_or_variants_display_as_or_variants_display_name_or_supplier_name_cont: @search_term)

# rubocop:enable Layout/LineLength

search_key = %w[

name

meta_keywords

# ...

].join("_or_") + "_cont"

query.merge!(search_key => @search_term)

This could also be a constant on the variant model.

👌 75f7e0a

- Increase top menu underline height to 3px - reduce underline width to same width of label

as they are the same, expect the font-size

content (header, navigation, content) on both left and right

+ change height for border bottom on selected/hovered menu

For `admin_style_v3` use `<` and `>` for next and previous link instead of `next` and `previous` string Extract a mixin for a default box-shadow Maybe this needs to be redefined. Let's see how next things goes. When a table is followed by a pagination, remove its margin-bottom + border Finally, design the pagination component Add sorting/pagination module, on top of table We use `cablea_ready.replace`, so need to add `#products-content` id Use a `pagy` partial with reflex action, instead of the legacy one - revert the legacy one to its previous state - in reflex, fetch product with page attribute, 1 by default Move `pagy` into `admin/shared/v3/` to be reusable + use fontawesome icons for next and previous page Remove useless line

jibees · 2023-07-19T12:59:54Z

This one has already two approval reviews, but I'd be happy if @mkllnk and @dacook could see my comments and approve (or not). Back in Code Review then.

jibees · 2023-07-25T07:24:48Z

No more blocked since this PR will close #11268 (we cherry picked the commit from #11269 )

And do not apply `a` style to `.button` element. ie. ``` a:not(.button) ```

RachL · 2023-07-25T13:20:27Z

OK there are some stuff to fine tune, but as it's behind a feature toggle and this PR is already monstrously huge, let's unblocked this work! @jibees you can merge 💪

dacook · 2023-07-25T23:39:19Z

Hooray!

Just to confirm, were the eight issues (listed in the description above, now closed) tested to pass?

RachL · 2023-07-26T07:38:29Z

@dacook yes apart from error page display due to fail in the background which I don't know how to reproduce.
Not everything was working perfectly, but new issues will be open. In the future, it would help testers to have 1PR = 1 issue, this was hard to test and keep track :/

I think this resolves [this discussion](openfoodfoundation#11163 (comment)) I guess we just didn't know [how it works](https://docs.stimulusreflex.com/guide/cableready.html#order-of-operations) before..

jibees force-pushed the productsV3-searching-filtering-pagination branch 2 times, most recently from 1f6f60a to 4ab89dc Compare July 6, 2023 08:01

This was linked to issues Jul 6, 2023

Table data display tweaks #11161

Closed

[BUU] Change the number of products shown in my catalogue #11054

Closed

[BUU] Search for a product #11056

Closed

[BUU] Pagination tweaks #10878

Closed

jibees removed a link to an issue Jul 6, 2023

[BUU] Pagination tweaks #10878

Closed

11 tasks

jibees self-assigned this Jul 11, 2023

jibees changed the title ~~Products v3: searching filtering pagination~~ 🚧 Products v3: viewing, searching, filtering & pagination Jul 11, 2023

jibees force-pushed the productsV3-searching-filtering-pagination branch from 4ab89dc to d9ba104 Compare July 11, 2023 07:30

jibees marked this pull request as ready for review July 11, 2023 07:39

dacook requested changes Jul 12, 2023

View reviewed changes

dacook force-pushed the productsV3-searching-filtering-pagination branch from d9ba104 to 9b92996 Compare July 12, 2023 06:26

jibees force-pushed the productsV3-searching-filtering-pagination branch from b401a2b to 0620ebe Compare July 12, 2023 08:03

dacook approved these changes Jul 12, 2023

View reviewed changes

mkllnk approved these changes Jul 17, 2023

View reviewed changes

jibees force-pushed the productsV3-searching-filtering-pagination branch 4 times, most recently from cd95eeb to 59cb086 Compare July 19, 2023 09:35

jibees added 8 commits July 19, 2023 14:58

Create a pseudo element to add a line under the menu item

a8088ae

- Increase top menu underline height to 3px - reduce underline width to same width of label

Reduce padding

24c045a

Factorize menu and submenu into same definition

2892301

as they are the same, expect the font-size

Add same padding than #admin-menu,#sub-menu li a in order to align

1f3d419

content (header, navigation, content) on both left and right

Use the right color

9762819

Add a section for specific rules for both admin-menu and sub-menu

9b92c25

+ change height for border bottom on selected/hovered menu

Change color to EFF1F2

69cff85

jibees added 3 commits July 19, 2023 14:58

This spec is not flaky anymore

62eaf4a

Remove useless spec (will be tested right after)

bada2ef

To test the search by category, we need to use set primary_taxon attr

5d4ef5b

jibees force-pushed the productsV3-searching-filtering-pagination branch from 23c9286 to 5d4ef5b Compare July 19, 2023 12:58

mkllnk approved these changes Jul 19, 2023

View reviewed changes

jibees mentioned this pull request Jul 21, 2023

Buu specs #11255

Merged

RachL self-assigned this Jul 23, 2023

RachL added pr-staged-fr staging.coopcircuits.fr blocked and removed pr-staged-fr staging.coopcircuits.fr labels Jul 23, 2023

dacook mentioned this pull request Jul 25, 2023

🚧 Admin style v3: Add ability for non super-admin user to see products_v3 page #11269

Closed

Add ability for non super-admin user to see products_v3 page

2a81a9a

jibees removed the blocked label Jul 25, 2023

RachL added pr-staged-fr staging.coopcircuits.fr and removed pr-staged-fr staging.coopcircuits.fr labels Jul 25, 2023

Import typography.scss for admin_v3

352cf2f

And do not apply `a` style to `.button` element. ie. ``` a:not(.button) ```

RachL added pr-staged-fr staging.coopcircuits.fr and removed pr-staged-fr staging.coopcircuits.fr labels Jul 25, 2023

RachL removed the pr-staged-fr staging.coopcircuits.fr label Jul 25, 2023

jibees merged commit 605cb73 into openfoodfoundation:master Jul 25, 2023
52 checks passed

mkllnk mentioned this pull request Feb 27, 2024

[BUU, Bulk product edit page] Refreshing the page resets pagination options and search strings to default values #12020

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🚧 Products v3: viewing, searching, filtering & pagination #11163

🚧 Products v3: viewing, searching, filtering & pagination #11163

jibees commented Jul 6, 2023 •

edited

Loading

dacook left a comment

dacook Jul 12, 2023

jibees commented Jul 12, 2023 •

edited

Loading

dacook left a comment •

edited

Loading

dacook commented Jul 12, 2023

mkllnk left a comment

mkllnk Jul 17, 2023

jibees Jul 17, 2023 •

edited

Loading

jibees commented Jul 19, 2023

jibees commented Jul 25, 2023

RachL commented Jul 25, 2023

dacook commented Jul 25, 2023

RachL commented Jul 26, 2023

🚧 Products v3: viewing, searching, filtering & pagination #11163

🚧 Products v3: viewing, searching, filtering & pagination #11163

Conversation

jibees commented Jul 6, 2023 • edited Loading

What? Why?

What should we test?

Release notes

dacook left a comment

Choose a reason for hiding this comment

dacook Jul 12, 2023

Choose a reason for hiding this comment

jibees commented Jul 12, 2023 • edited Loading

dacook left a comment • edited Loading

Choose a reason for hiding this comment

dacook commented Jul 12, 2023

mkllnk left a comment

Choose a reason for hiding this comment

mkllnk Jul 17, 2023

Choose a reason for hiding this comment

jibees Jul 17, 2023 • edited Loading

Choose a reason for hiding this comment

jibees commented Jul 19, 2023

jibees commented Jul 25, 2023

RachL commented Jul 25, 2023

dacook commented Jul 25, 2023

RachL commented Jul 26, 2023

jibees commented Jul 6, 2023 •

edited

Loading

jibees commented Jul 12, 2023 •

edited

Loading

dacook left a comment •

edited

Loading

jibees Jul 17, 2023 •

edited

Loading