Feat:WD-20929: Make the list of products configurable through UI

[immortalcodes]

Done

• created APIs for edit/add/delete operations on product
• amended database models to not allow orphan product_webpage rows
• components in UI to edit/add/delete the products for admin

Note

• making request panel for non-admins is not part of this task.

QA

QA steps

• run docker containers
  docker run -d -p 5432:5432 -e POSTGRES_PASSWORD=postgres postgres docker run -d -p 6379:6379 redis
• run yarn dev
• run dotrun
• It might take sometime fetching up the pages, feel free to reach out if you are missing any env variable
• Hardcoding admin/non-admin data could be useful in testing each flow.
• Visit any page and try to add/edit/delete products.
• See that the products are refreshed with the latest data.
• Check for edge cases like adding a pre-existing product etc
• See if it matches Figma

Fixes

• Fixes WD-20929

Screenshots

It could be helpful to provide some screenshots to aid in QAing the change.

[webteam-app]

Demo

Jenkins

demos.haus

[petesfrench]

We spoke about these in our call but I will present them for clairty:

• I created a product label 'test'. It didn't appear in the dropdown or in the `Edit product labels' ui. I refreshed the page, it still didn't appear. Only after making another change to the product labels list (e.d. delete/add another label) does it appear. The same thing happened with editing a labels.

• If you edit the same label twice in a row there can be inconsistencies, as see here with 'Anbox' and 'Anbox cloud'

[anusha-c18]

Thanks for adding this!
I found a few issues and left a couple of suggestions for improvements

[anusha-c18]

Thanks for the changes!
A couple of more suggestions and then we're good to merge

[anusha-c18]

Thanks for the changes, LGTM 🚀

[muhammad-ali-pk]

@immortalcodes These styles will target all form controls with these specific classes, even where undesired. To prevent this, always wrap the style within a custom-classed container.

[muhammad-ali-pk]

Also, I realized you did this to increase the width of the modal. Instead of increasing the width of input field to make the modal wider, you should target the modal directly

.p-product-modal .p-modal__dialog {
  min-width: 40rem;
}

[github-actions]

🎉 This PR is included in version 1.1.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀