style(filter-component): redesign filter tag ui

[shobhitexe]

Closes #841

Problem

The filter tags on inventory is looking more of a buttons and blending in the background

Solution

Changes the style of tags as per figma design

Changes Made

• Updated the layout and styling of the filter tags.
• Changed the positioning of the button from absolute to flex to align it within the component.

Screenshots

2023-06-18.14-40-51.mp4

Checklist

• Code follows the contributing guidelines
• Changes have been thoroughly tested
• Documentation has been updated, if necessary
• Any dependencies have been added to the project, if necessary

Reviewers

@mlabouardy

[ShubhamPalriwala]

Hey @shobhitexe, thanks for the PR! 🚀 amazing work and really appreciate the screen recording! The changes look great.
However, I think, you missed the "+" symbol to add filters right next to the current filters as well?

Could you let me know what you think of that? Thanks

[shobhitexe]

Hey @shobhitexe, thanks for the PR! 🚀 amazing work and really appreciate the screen recording! The changes look great. However, I think, you missed the "+" symbol to add filters right next to the current filters as well?

Could you let me know what you think of that? Thanks

Thank you for your feedback and appreciation, I apologize for overlooking the addition of the "+" symbol to add filters next to the current filters. I appreciate you bringing it to my attention.

Regarding your question, I can make the necessary changes and include the "+" button in the current pull request. This way, we can keep all the related changes together in one place.
Alternatively, if you prefer, I can create a new pull request specifically for the addition of the "+" button. Please let me know your preference, and I will proceed accordingly.

Once again, thank you for your valuable feedback, and I'll make sure to address the missing "+" button promptly.

[ShubhamPalriwala]

Adding it here would be just perfect!🙌🏻 would be happy to review once pushed!

[mlabouardy]

Great job @shobhitexe, LGTM!
Just missing the "+" action as mentioned by @ShubhamPalriwala :)

[shobhitexe]

Hello I have implemented the functionality for "+" button Please review the pull request as I have made commits in the same branch.

• included an add icon and a separator div.

• Initially, the dropdown menu and the "Filter by" button were combined into the same component, which limited dropdown component reusability. To address this, I separated the dropdown into its own component, allowing it to be reused multiple times, such as in the add button.

2023-06-20.16-38-26.mp4

[mlabouardy]

Thanks for the changes @shobhitexe, I've identified a few bugs that need to be fixed :)

• The "+" button should be removed from a custom view as we don't allow users to update filters of a saved view:

Screen.Recording.2023-06-21.at.12.21.34.mov

• Might be related to the first bug but if you set up a filter on a view and then you jump back to "All resources", the previous values of the filter at set in the dropdown:

Screen.Recording.2023-06-21.at.12.24.18.mov

• I like that you keep the filters dropdown menu when a filter is added :) but can we close it if the filter was added from the "Filter by" button and not from the "+" button?

Screen.Recording.2023-06-21.at.12.28.59.mov

[shobhitexe]

Thanks for the changes @shobhitexe, I've identified a few bugs that need to be fixed :)

• The "+" button should be removed from a custom view as we don't allow users to update filters of a saved view:

Screen.Recording.2023-06-21.at.12.21.34.mov

• Might be related to the first bug but if you set up a filter on a view and then you jump back to "All resources", the previous values of the filter at set in the dropdown:

Screen.Recording.2023-06-21.at.12.24.18.mov

• I like that you keep the filters dropdown menu when a filter is added :) but can we close it if the filter was added from the "Filter by" button and not from the "+" button?

Screen.Recording.2023-06-21.at.12.28.59.mov

Thanks for the changes @shobhitexe, I've identified a few bugs that need to be fixed :)

• The "+" button should be removed from a custom view as we don't allow users to update filters of a saved view:

Screen.Recording.2023-06-21.at.12.21.34.mov

• Might be related to the first bug but if you set up a filter on a view and then you jump back to "All resources", the previous values of the filter at set in the dropdown:

Screen.Recording.2023-06-21.at.12.24.18.mov

• I like that you keep the filters dropdown menu when a filter is added :) but can we close it if the filter was added from the "Filter by" button and not from the "+" button?

Screen.Recording.2023-06-21.at.12.28.59.mov

Sure , as per i understood

• When in a saved view, there should not be any filters buttons present.
• The filters from different saved views are being saved, ( but they can be removed if we remove the filter buttons from the saved view. related to bug 1 )
• The "Filter By" button should only accept one filter at a time and then close, instead of staying open and waiting for additional filters.

Am i correct ?

[mlabouardy]

Thanks for the changes @shobhitexe, I've identified a few bugs that need to be fixed :)

• The "+" button should be removed from a custom view as we don't allow users to update filters of a saved view:

Screen.Recording.2023-06-21.at.12.21.34.mov

• Might be related to the first bug but if you set up a filter on a view and then you jump back to "All resources", the previous values of the filter at set in the dropdown:

Screen.Recording.2023-06-21.at.12.24.18.mov

• I like that you keep the filters dropdown menu when a filter is added :) but can we close it if the filter was added from the "Filter by" button and not from the "+" button?

Screen.Recording.2023-06-21.at.12.28.59.mov

Thanks for the changes @shobhitexe, I've identified a few bugs that need to be fixed :)

• The "+" button should be removed from a custom view as we don't allow users to update filters of a saved view:

Screen.Recording.2023-06-21.at.12.21.34.mov

• Might be related to the first bug but if you set up a filter on a view and then you jump back to "All resources", the previous values of the filter at set in the dropdown:

Screen.Recording.2023-06-21.at.12.24.18.mov

• I like that you keep the filters dropdown menu when a filter is added :) but can we close it if the filter was added from the "Filter by" button and not from the "+" button?

Screen.Recording.2023-06-21.at.12.28.59.mov

Sure , as per i understood

• When in a saved view, there should not be any filters buttons present.
• The filters from different saved views are being saved, ( but they can be removed if we remove the filter buttons from the saved view. related to bug 1 )
• The "Filter By" button should only accept one filter at a time and then close, instead of staying open and waiting for additional filters.

Am i correct ?

exactly :)

[shobhitexe]

Hello, I have made some changes to address the bugs. Could you please take a look

• The visibility of the filter in saved views has been fixed so that it is no longer visible in saved views.

2023-06-22.18-13-10.mp4

• The previous values of the filter summary are no longer stored from previous filters. ( implemented useEffect hook to clear the previous values on every render of the dropdown. )

2023-06-22.18-13-38.mp4

• The filter button now accepts only one submit and closes, while the add button can accept multiple submits and remains open.

2023-06-22.18-15-23.mp4

[ShubhamPalriwala]

Amazing work here @shobhitexe! Love the minute details that you have handled! Lgtm. Over to you @mlabouardy 🚀

[mlabouardy]

Thanks @shobhitexe for the changes 🙏🏻