ER: Toolkit and Project Filter Maintainability and User Experience Improvements

[Adastros]

Emergent Requirement - Problem

While reviewing the pull request linked below, I discovered the following:

1. The toolkit and projects filters were coded differently even though they perform the same function. This is due to how the toolkit and projects pages are coded. The pages and filter code should be refactored so that the filter can be a reusable component and the pages only import one version of the filter code
2. The scrollbar appears but doesn't scroll when a filter section overflows
3. Some filter tags contain overflowing text
4. The mobile-view of the filters do not scroll properly and some content is cut-off at the bottom of the filter
5. The filter arrows are not user friendly

See this comment and this comment for more details

Issue you discovered this emergent requirement in

• #4764

Date discovered

• 08JUN2023

Did you have to do something temporarily

• [ ] YES
• [x] NO

Who was involved

@kwangric @chrismenke45 @Adastros

What happens if this is not addressed

• Maintaining and updating the project and toolkit filters will be difficult
• User experience will be hampered

Resources

• Toolkit Page
• Projects Page

Recommended Action Items

• [ ] Make a new issue
• [ ] Discuss with team
• [x] Let a Team Lead know

Potential solutions [draft]

• Option 1:
  • Create an issue to refactor the project and toolkit filters. Wait for the refactor to complete before creating issues to fix the UX portions of filter.
• Option 2:
  • Create one issue to refactor the project and toolkit filters and fix UX elements at the same time
• Option 3:
  • Create issues to fix filter UX. Once the issues are completed, create an issue to refactor the project and toolkit filters.

[github-actions[bot]]

Hi @Adastros, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[Adastros]

Due to a lack of small, medium, and large issues in the prioritized backlog, I believe the best choice at this time is option 3. Creating the UX issues first before refactoring the filter would help provide work for devs. It may help lessen the complexity of the filter refactor as well.

[Adastros]

• Created issue #5282 to address point 5 in ER above

[Adastros]

• Created issue #5333 to address point 4 in ER above

[ExperimentsInHonesty]

Hi Danny! @Adastros Following up with you to see where we are. If there are specific issues that have to be completed before this can be worked on further. Please add them as dependencies to the top and unassign and stick this in the icebox

If the remaining issues can be worked on concurrently with the other issues, then please start making them.

[Adastros]

Hi @ExperimentsInHonesty, sorry for the delay in creating issues for this ER. Outside of this ER, there are no dependencies that need to be completed before this can be worked on further. I will work on creating the issues for this ER.

• Issue #5333 is ready for prioritization.

[Adastros]

• Issue #5730 created to address point 4 above

[Adastros]

• Issue #5770 created to address point 5 above

[github-actions[bot]]

Hi @roslynwythe, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[roslynwythe]

@ExperimentsInHonesty Here is a screenshot showing the truncation of the developer's name in a tablet sized screen:

Screenshot - truncation of name "Ahdithan Uthayakumar Tarang Gupta"

Potential Solution: Add comment to the frontmatter in the guides pages:

contributors:
# Please note: contributor names may be truncated to 21 characters for some screen sizes
  - Harish Lingam
  - Danielle Nedivi
  - Hannah Livnat

Shall I go ahead and write this issue?

Regarding point 2 (scrollbar appears but doesn't scroll when a filter section overflows), I was not able to reproduce the problem.

I believe the other points raised in this ER have been addressed.

[ExperimentsInHonesty]

@roslynwythe sure that works... or we could put dots after the name truncates e.g. Ahdithan Uthayakum... Thoughts

[roslynwythe]

@ExperimentsInHonesty I agree, putting dots is better. Is the requirement clear enough from these past comments, to prioritize this for creating the issue, or should I create an ER?

[ExperimentsInHonesty]

@roslynwythe lets make a new ER just for ease of the person making the issue..

[roslynwythe]

• I believe the last outstanding point in this ER is the truncation of contributor names in the toolkit filter tags. See #6787