Creating Sort + Filters for Search in Repository List Page

[natalialuzuriaga]

MENTOR

• @natalialuzuriaga
• SWE Fellow, USDigitalCorps
• dm on slack, #wg-government on CHAOSS.community slack,

BRIEF DESCRIPTION

Soon, the metrics website will have reports on dozens of GitHub organizations and repositories. With only a basic search bar functionality, it may be difficult for users to find reports for projects that they have in mind. We'd like the user to be able to search through the repository list page easily and be able to use features to narrow down their search.

Some ideas include but are not limited to:

• Sort that organizes repository list in a variety of ways: alphabetically, etc.
• Filters where users can find certain categories/groups of repositories: org, project type, tags

SCOPING

• 2 weeks

SKILLS NEEDED

Front-end, Webdev

REQUIRED DELIVERABLES

• Identify types of sorts + filtering to offer. Creating design mockups of these features.
• Frontend development with coordination with backend devs
• Testing

DESIRED DELIVERY WINDOW

• Any

NOTES/INSPO

TODO: Check work that Gaelen did with tags in the /open repo. May be able to apply this work here if we set up self-reported metrics / the json file.

ACKNOWLEDGEMENTS

• [X] - Yes, I agree to spend file a project proposal ticket
• [x] - Yes, I agree this project falls within a 2 week or less (ideally less) scope of time
• [x] - Yes, I agree to spend an hour per week of office hours and 1x1 mentoring
• [x] - Yes, I agree to spend an hour at the end of the sprint for filling out a Retro Template

[decause-gov]

7/22:

• Now that we have repometrics tags, we can start filtering!!!
• IDEA: Sorting on maturity model Tier! Sorting on Security issues.

[RicardoZamora01]

While looking into code.json examples, I stumbled upon code.gov's agencies list that uses filtering. They implemented a filtering design that I personally liked.

They used USWDS designs (accordion, checkbox, etc) to create a filter based on agencies. I can see us using a similar idea. Link to example: https://www.code.gov/agencies/

Sample

[RicardoZamora01]

USAJobs also has a "collapse all" and "expand all" filters option + sort by ideas https://www.usajobs.gov/Search/Results?jt=It%20Specialist%20(Applications%20Software)

USAJobs is open-source!

They use SASS to style their components. These might help for reference for sorting attribute. https://github.com/USAJOBS/design-system/blob/c8aaff2fcb15b6668566b6f7065e5bf2ff4eb881/_scss/component/search/controls.scss#L39C11-L39C20

https://github.com/USAJOBS/design-system/blob/c8aaff2fcb15b6668566b6f7065e5bf2ff4eb881/_scss/component/search/controls.scss#L61

[decause-gov]

07/26:

• Completed mockup for sorting/filtering! https://www.figma.com/design/wKwMcM5N00XYEU06viKvbT/CMS-OSPO-Metrics?node-id=17-4&t=k01jhMT6BxVIhxOg-0
• Working on creating front-end next! Using USWDS.

[decause-gov]

07/29:

• Working on front-end and functionality.
• Goal: Getting the PR ready for review!

[decause-gov]

08/02:

• Front-end filtering is right there but ran into issues with how to get project data. Spoke with Nat/Pat on how to get it, then pushing a PR today. Fix how we're retrieving project data (such as tier)
• GOAL: PR by EoB

[decause-gov]

08/05:

• Filtering is done! Working on sorting, should not take much longer.
• GOAL: PR by Tomo EoB

[natalialuzuriaga]

8/12:

• Pushed the rest of the changes and PR is ready for review: https://github.com/DSACMS/metrics/pull/198
• ACTION: review PR

[decause-gov]

08/15:

• Caused some production issues :/ There are path issues for metrics now. We've seen this previously, likely with prod/dev path issues, but will need some work. Not sure where it's wrong.
• Nat found where it is breaking
• After camelcase, Nat will ship a fix.
• After this is merged and fixed, we'll close this ticket.

[natalialuzuriaga]

09/05:

• Prod issues have been fixed! Camelcase PR has been shipped. Good to close 💯