Skip to content

Agency cards#15

Merged
DinneK merged 15 commits intomainfrom
agency-cards
Jun 3, 2025
Merged

Agency cards#15
DinneK merged 15 commits intomainfrom
agency-cards

Conversation

@DinneK
Copy link

@DinneK DinneK commented Jun 1, 2025 •
edited
Loading

module-name: Agency and project card functionality

Problem

The code-gov front-end needs a way to display agencies and their projects in an organized and searchable format.

Solution

Implemented a comprehensive agency and project card system by creating the following components:

Data

  • Created a centralized place to process data in _data/codegovData.js
    • This will allow data to only be changed in one place, additional properties and be easily added or deleted
    • Extract all pertinent metadata from codegov.json
    • This allows filter options to be built dynamically based on data not on HTML tags

Filtering

  • Created two files for filtering _includes/filters.html and assets/_common/js/filters.js
  • Both components are reusable and work for both agencies and projects
  • Used a debounce function to create a real time search
  • Created a sorting system that supports multiple criteria

Agencies & Projects

  • Agencies and projects now display clearly on-load

Result

  • Browse agencies
  • Browse projects
  • Sort by name(A-Z/Z-A) or project count (fewest/most)
  • Clear filters with a click
  • Filter on:
    • status
    • organization
    • category
    • language
    • platform

Notes

  • No SCSS has been added this is the initial functionality

Test Plan

  • Test in browser, navigate to /agencies/ then to /projects/
  • Manually search
  • Validated data in console

Next steps

  • Add SCSS

DinneK added 12 commits June 1, 2025 13:18
@DinneK
Add mock data
183ac12 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
index.md change
46d485e 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Add agency cards
c66648b 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
add initial agency cards
026d8ad 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Add draft cards
e784f56 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Changed agency cards
69c8d7c 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Add filter component
4d1f149 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Add sort function
e5fffc1 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Create state
8313fd3 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Add event handlers to filters and cards
21d3322 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Add event binding
a932f0d 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Inititial cards and filtering built
19ac6e1 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK DinneK self-assigned this Jun 2, 2025
@DinneK DinneK added the enhancement New feature or request label Jun 2, 2025
@DinneK DinneK marked this pull request as ready for review June 2, 2025 20:41
DinneK added 2 commits June 2, 2025 21:03
@DinneK
Fix filtering
a971d77 
Signed-off-by: Dinne Kopelevich <[email protected]>
@DinneK
Fix platform label
9b4fb20 
Signed-off-by: Dinne Kopelevich <[email protected]>
decause-gov
decause-gov approved these changes Jun 3, 2025
View reviewed changes
Copy link

@decause-gov decause-gov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wowow! So much work here!

I had just one question about whether we keep test-agency-indexes as a path/folder, but everything else looks solid to me, assuming you coordinated with @natalialuzuriaga on the IA.

We could put some comments in places wherever we're using dsacms.github.io/* URLs, so that we can remember we need to swap them out if/when GSA deploys our repos, but, if they wanna just point the URL towards us, that's ok too ;)

LGTM +1 🚢 💪

@natalialuzuriaga natalialuzuriaga changed the base branch from dev to main June 3, 2025 16:02
natalialuzuriaga
natalialuzuriaga requested changes Jun 3, 2025
View reviewed changes
Copy link

@natalialuzuriaga natalialuzuriaga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couple of minor issues resolving our tests and files that can be removed. This is an amazing addition to the site 🤩

@DinneK
Fix template build
407697f 
Signed-off-by: Dinne Kopelevich <[email protected]>
github-advanced-security[bot]
github-advanced-security bot found potential problems Jun 3, 2025
View reviewed changes
assets/_common/js/filters.js
Comment on lines +203 to +205
cardElement.innerHTML = targetType === 'agencies'
? createAgencyCardHTML(item)
: createProjectCardHTML(item)

Check failure

Code scanning / CodeQL

DOM text reinterpreted as HTML High

DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.

Copilot Autofix

AI 8 months ago

To fix the issue, we need to ensure that any untrusted data used to generate HTML is properly sanitized or escaped. The best approach is to use a library like DOMPurify to sanitize the HTML content before assigning it to innerHTML. Alternatively, we can escape the interpolated values to ensure that special characters are not interpreted as HTML. This fix will involve:

  1. Importing and using DOMPurify to sanitize the output of createAgencyCardHTML and createProjectCardHTML before assigning it to innerHTML.
  2. Ensuring that all dynamic data interpolated into the HTML is sanitized or escaped.
Suggested changeset 2
assets/_common/js/filters.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/assets/_common/js/filters.js b/assets/_common/js/filters.js
--- a/assets/_common/js/filters.js
+++ b/assets/_common/js/filters.js
@@ -1 +1,3 @@
+import DOMPurify from 'dompurify';
+
 const createFilterState = (data, targetType) => ({
@@ -202,5 +204,6 @@
     const cardElement = document.createElement('div');
-    cardElement.innerHTML = targetType === 'agencies'
+    const rawHTML = targetType === 'agencies'
         ? createAgencyCardHTML(item)
-        : createProjectCardHTML(item)
+        : createProjectCardHTML(item);
+    cardElement.innerHTML = DOMPurify.sanitize(rawHTML);
 
EOF
@@ -1 +1,3 @@
import DOMPurify from 'dompurify';

const createFilterState = (data, targetType) => ({
@@ -202,5 +204,6 @@
const cardElement = document.createElement('div');
cardElement.innerHTML = targetType === 'agencies'
const rawHTML = targetType === 'agencies'
? createAgencyCardHTML(item)
: createProjectCardHTML(item)
: createProjectCardHTML(item);
cardElement.innerHTML = DOMPurify.sanitize(rawHTML);

package.json
Outside changed files

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -64,3 +64,4 @@
     "luxon": "^2.3.1",
-    "markdown-it-footnote": "^3.0.3"
+    "markdown-it-footnote": "^3.0.3",
+    "dompurify": "^3.2.6"
   },
EOF
@@ -64,3 +64,4 @@
"luxon": "^2.3.1",
"markdown-it-footnote": "^3.0.3"
"markdown-it-footnote": "^3.0.3",
"dompurify": "^3.2.6"
},
This fix introduces these dependencies
Package Version Security advisories
dompurify (npm) 3.2.6 None
Copilot is powered by AI and may make mistakes. Always verify output.
@DinneK DinneK requested a review from natalialuzuriaga June 3, 2025 18:48
natalialuzuriaga
natalialuzuriaga approved these changes Jun 3, 2025
View reviewed changes
Copy link

@natalialuzuriaga natalialuzuriaga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, LGTM!

@DinneK DinneK merged commit 54807c9 into main Jun 3, 2025
6 of 9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@natalialuzuriaga natalialuzuriaga natalialuzuriaga approved these changes

@decause-gov decause-gov decause-gov approved these changes

@IsaacMilarky IsaacMilarky Awaiting requested review from IsaacMilarky

@sachin-panayil sachin-panayil Awaiting requested review from sachin-panayil

Assignees

@DinneK DinneK

Labels

enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@DinneK @natalialuzuriaga @decause-gov