# Product Catalogue Review

## Relevant Links

[Motley]: https://staging.admin.fool.com/Shop/Products/

- Initial Jira ticket: [CMT-452](https://fool.atlassian.net/browse/CMT-452)
- New Jira ticket: [CMT-628](https://fool.atlassian.net/browse/CMT-628)
- Initial PR: [commerce-api#1744](https://github.com/themotleyfool/commerce-api/pull/1744)
- Product Catalogue Page
- [Motley]
- [Staging](https://commerce-api-staging-webadmin.eq-staging.fool.com/products)

## List of Bugs

- Bug: Fix table size—do not allow for auto-resizing:
- Do not allow table columns to jump around between pages
- Pin Pagination tabs to one place—do not let "Next" arrow jump around (relates to )
- Big: Fix "Last Modified By" sorter
- Bug: Add sorter for "Primary Tickers"
- Bug([[CMT-630]](https://fool.atlassian.net/browse/CMT-630)): Fix bug with Paging & Searching
- Bug: Fix search input
- Bug: Fix rogue last page of pagination—there is never any data on the final page
- Bug: Change "Active?" and "For Sale?" columns to display something other than read-only toggle
- Bug: Fix "Active" filter sizing: Select should be wide enough to hold "Inactive"
- Feature: Allow user to type in specific page
- Feature: A "Clear Search" button would be nice
- Feature: Include search/filter/sort/pagination parameters in URL
- Spike: Ask Member Services which default sort behavior would be ideal
- Spike: Have Member Services use the page in staging and call out things they want to change/add

## Q & A

1. Was the name difference (‘Find Products’ vs ‘Products’) intentional?
- **[ANSWER]** Honestly didn't even think about this. "Products" seems cleaner to me, though.
1. Was the different column order intentional? For example “Last Modified By” is now second to last, instead of right after product type
- **[ANSWER]** I think "Last Modified By" should reside directly next to "Last Modified," since they're directly related
1. Is the default sort order intentionally different? I’m not sure what it is, but it doesn’t seem the same between Motley Staging and this staging
- **[ANSWER]** This may be worth looking into... I believe our "Default Sort Order" is driven by the [Search Products Endpoint](https://apiary.fool.com/commerce/v1/products/search?limit=50&offset=0&orderByField=LastUpdatedDateTime&orderByDirection=Desc
). Unsure what Motley uses.
1. Will our customers know to use command+click to open “Open Fulfillment URL” in a separate tab? Or should we just always do so?
- **[ANSWER]** Um... not required! I don't believe [Motley] opens the fulfillment URL in a new tab/window by default. User should be able to command+click to open in new tab or simply click to open in existing tab.
1. Not sure I’m onboard with the “Click to cancel sort” paradigm
1. I didn’t realize that’s what was going on until I finally noticed the tool tips..
1. I think it’s far more likely that people will want to toggle back and forth between ASC & DESC, vs wanting to cancel sort all together.  I’d follow whatever Jira does for their UI.
- **[ANSWER]** I can see both sides of this coin... the challenge is what is default state without "Click to cancel sort"? Our Product table currently only supports one sorter at a time, so if you were to remove "Click to cancel," user would never be able to return to the default sort.
- We could choose one column to sort on by default and remove the click to sort
- This behavior is actually AntDesign's default behavior, so I would need to investigate how to change that (but naturally, we could do so!)
1. Opinion: The flyouts are annoying.. and more importantly they get in the way. For example here, I can’t click on the Active column when the flyout is out
1. Opinion: Also don’t need the tooltips on pagination tabs
1. Do we have any ADA requirements? I’m not the best with sussing those out, but doesn’t look like tabbing or keyboard shortcuts work well.
1. Acceptance Criteria says:
1. “Either” for filter name.. we have “Any”
- **[ANSWER]** I think "Any" is a bit cleaner, personally
- Which do you think is better?
1. “Product ID”… we have “Id”…. Maybe this one is fine, but might at least want “ID”
- **[ANSWER]** On the "Products" page, I'd expect "ID" to refer to the ID of the product, plus it saves space as the column can be smaller
- I will happily change it to ID
1. “Last Modified Date”.. we have “Last Modified”
- **[ANSWER]** Given the fact that each entry *is* a date, I feel like the "Last Modified" part works and the fact that it was *when* the product was last modified can be inferred. Thoughts?
1. “For Sale (Y/N)” we have “For Sale?”
- **[ANSWER]** Which do you think is better?
1. Does not reference Active?
1. “Actions”.. we have “”
- **[ANSWER]** Would you prefer it to include "Actions" in the header? I feel like this is inferred, as each option present is itself an action
1. Default to 50 / page.. we are defaulting to 10 / page
- **[ANSWER]** 50 Feels like a lot of scrolling, in my opinion. What would you like to default to?
1. Differences between Motley
1. Motley does not include UID for Modified By
- **[ANSWER]** Thought it might make debugging easier. Do you think we should remove it?
1. Motley has Date, not Date + Time, for Last Modifed Date
- **[ANSWER]** This was introduced by Stephen, we'd have to ask him
1. Motley default sorts Product Name ASC.. seems important to sort the way Member Services most commonly wants. Not sure what the Commerce Admin is default sorting to.
- **[ANSWER]** Would be happy to default to whatever Member Services wants... we should ask them!
1. Gotta be careful with the wormhole of mobile responsiveness. Do we need that for an Admin Tool? If not, might be more trouble than it’s worth.. the old experience might be better for Member Service people with old low resolution monitors
- **[ANSWER]** This is out-of-the-box behavior from AntDesign... also unsure why this would affect low-resolution monitors? Could you clarify?
- 

1. Not sure if this is fair game yet, but you’re going to ideally want Back / Cancel options on “Create New Product” and “Edit Product”. It’s pretty annoying to be on sorted page 8, click Edit, change your mind, and then have to sort and page again to get back to where you were.
- **[ANSWER]** I thought about this as well—I think the best way to do it would be including search params in the URL itself... would actually make for easier sharing between people as well :)
2. Debatable: If you’re on page 3 when sorting 50 / page, and change to 10/page.. you stay on page 3. Should you really be on page 15?
- **[ANSWER]** This is worth exploring

### Follow Up Items

- Do we have any ADA requirements? I’m not the best with sussing those out, but doesn’t look like tabbing or keyboard shortcuts work well.
- The Column Name tooltips are annoying.. and more importantly they get in the way. For example here, I can’t click on the Active column when the flyout is out