EREGCSC- 2875 subject counts -- Implement counts of filtered search r…

…esults by subject (#1452)

* feat: add ability to refine counts composable response by field name

* feat: make FetchContainer more generic and use with Subjects dropdown

* feat: filter subjects list based on counts

* feat: add counts to subject selector items in dropdown

* feat: add totalCount li and hook it to clearClick

* feat: better style list item

* feat: limit count params to only q

* fix: provide consistent data type when passing in counts

* chore: remove allSubjects list item

* chore: remove totalCounts artifacts

* fix: add aria-label where needed

* fix: rename prop to match changes

* test: when matching Doc Type label text, make string matcher more permissive

* test: Vitest tweaks (linting, alias) and one unit test

* chore: linting

* test: update counts fixture; begin e2e tests

* chore: remove loading indicator from categories dropdown

in order to match subjects dropdown's lack of loading indicator

* test: first pass as Subjects DD E2E tests

* feat: clear subjects button E2E test

* chore: make subject selector li class more generic

since it no longer exists only in the subjects page sidebar

* style: add left margin to count span

* chore: remove explicit height on subjects DD ul

* chore: tweak subject selector styles

to mitigate unnecessary scroll bars for those who see them

* chore: further scrollbar refinements

solution/ui/e2e/cypress/e2e/search.spec.cy.js

@@ -41,6 +41,10 @@ describe("Search flow", () => {
         cy.intercept("**/v3/resources/public/categories**", {
             fixture: "categories.json",
         }).as("categories");
+
+        cy.intercept(`**/v3/content-search/counts**`, {
+            fixture: "counts.json",
+        }).as("counts");
     });
 
     it("has a working search box on the homepage on desktop", () => {
@@ -161,10 +165,6 @@ describe("Search flow", () => {
     });
 
     it("should not show internal checkbox when not logged in", () => {
-        cy.intercept(`**/v3/content-search/counts**`, {
-            fixture: "counts.json",
-        }).as("counts");
-
         cy.viewport("macbook-15");
         cy.visit(`/search/?q=${SEARCH_TERM}`, { timeout: 60000 });
         cy.get(".doc-type__toggle fieldset > div")
@@ -196,7 +196,7 @@ describe("Search flow", () => {
             .should("have.text", "Internal Resources(1)");
     });
 
-    it("should not show the categories dropdown when only regulations are selected", () => {
+    it("should not show the categories or subjects dropdowns when only regulations are selected", () => {
         cy.viewport("macbook-15");
 
         cy.eregsLogin({
@@ -207,16 +207,22 @@ describe("Search flow", () => {
 
         cy.visit(`/search/?q=${SEARCH_TERM}`, { timeout: 60000 });
         cy.get("div[data-testid='category-select']").should("be.visible");
+        cy.get("button[data-testid='subjects-activator']").should("be.visible");
         cy.get(".doc-type__toggle fieldset > div")
             .eq(0)
             .find("input")
             .check({ force: true });
         cy.get("div[data-testid='category-select']").should("not.be.visible");
+        cy.get("button[data-testid='subjects-activator']").should(
+            "not.be.visible",
+        );
+        cy.get(".doc-type__toggle fieldset > div");
         cy.get(".doc-type__toggle fieldset > div")
             .eq(1)
             .find("input")
             .check({ force: true });
         cy.get("div[data-testid='category-select']").should("be.visible");
+        cy.get("button[data-testid='subjects-activator']").should("be.visible");
     });
 
     it("has the correct type params in URL for each doc type combination", () => {
@@ -263,13 +269,124 @@ describe("Search flow", () => {
 
     it("category should be selected on load if included in URL", () => {
         cy.viewport("macbook-15");
-        cy.visit("/subjects/?categories=3");
+        cy.visit(`/search?q={SEARCH_TERM}&categories=3`);
         cy.get("div[data-testid='category-select']")
             .should("exist")
             .find(".v-select__selection")
             .should("have.text", "Related Regulations Fixture Item");
     });
 
+    it("subject should be selected on load if included in the URL", () => {
+        cy.viewport("macbook-15");
+        cy.visit(`/search?q={SEARCH_TERM}&subjects=2`);
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .find(".subjects-select__label")
+            .should("have.text", "ABP")
+            .click({ force: true });
+
+        cy.get("button[data-testid=add-subject-2]").should(
+            "have.class",
+            "subjects-li__button--selected",
+        );
+    });
+
+    it("subject should change in URL if new subject is selected from the Subjects dropdown", () => {
+        cy.viewport("macbook-15");
+        cy.visit(`/search?q=${SEARCH_TERM}&subjects=2`);
+
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .find(".subjects-select__label")
+            .should("have.text", "ABP")
+            .click({ force: true });
+
+        cy.get("button[data-testid=add-subject-3]")
+            .should("not.have.class", "subjects-li__button--selected")
+            .find(".count")
+            .should("have.text", "(15)");
+
+        cy.get("button[data-testid=add-subject-3]").click({ force: true });
+
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .find(".subjects-select__label")
+            .should("have.text", "Access to Services")
+            .click({ force: true });
+
+        cy.get("button[data-testid=add-subject-2]").should(
+            "not.have.class",
+            "subjects-li__button--selected",
+        );
+
+        cy.get("button[data-testid=add-subject-3]").should(
+            "have.class",
+            "subjects-li__button--selected",
+        );
+
+        cy.url().should("include", "subjects=3");
+    });
+
+    it("subjects and categories can be selected simultaneously", () => {
+        cy.viewport("macbook-15");
+        cy.visit(`/search?q=${SEARCH_TERM}`);
+
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .click();
+
+        cy.get("button[data-testid=add-subject-3]").click({ force: true });
+
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .find(".subjects-select__label")
+            .should("have.text", "Access to Services")
+            .click({ force: true });
+
+        cy.get("div[data-testid='category-select']").click();
+        cy.get("div[data-testid='external-0']").click({ force: true });
+
+        cy.get("div[data-testid='category-select']")
+            .find(".v-select__selection")
+            .should("have.text", "Related Statutes in Fixture");
+
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .find(".subjects-select__label")
+            .should("have.text", "Access to Services");
+
+        cy.url().should("include", "subjects=3").and("include", "categories=1");
+    });
+
+    it("subjects can be cleared by clicking the clear button", () => {
+        cy.viewport("macbook-15");
+        cy.visit(`/search?q=${SEARCH_TERM}`);
+
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .click();
+
+        cy.get("button[data-testid=add-subject-3]").click({ force: true });
+
+        cy.url().should("include", "subjects=3");
+
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .find(".subjects-select__label")
+            .should("have.text", "Access to Services")
+            .click({ force: true });
+
+        cy.get("i[data-testid='subjects-select-clear']").click({ force: true });
+
+        cy.get("button[data-testid='subjects-activator']")
+            .should("exist")
+            .find(".subjects-select__label")
+            .should("have.text", "Choose Subject");
+
+        cy.url().should("not.include", "subjects=3");
+
+    });
+
     it("displays results of the search and highlights search term in regulation text", () => {
         cy.viewport("macbook-15");
         cy.visit(`/search/?q=${SEARCH_TERM}`, { timeout: 60000 });

solution/ui/e2e/cypress/e2e/subjects.spec.cy.js

@@ -427,14 +427,14 @@ describe("Find by Subjects", () => {
         cy.get(`button[data-testid=remove-subject-77]`).should("exist");
         cy.get("button[data-testid=add-subject-63]").should(
             "not.have.class",
-            "sidebar-li__button--selected"
+            "subjects-li__button--selected"
         );
         cy.get("button[data-testid=add-subject-63]").click({
             force: true,
         });
         cy.get("button[data-testid=add-subject-63]").should(
             "have.class",
-            "sidebar-li__button--selected"
+            "subjects-li__button--selected"
         );
         cy.get(`button[data-testid=remove-subject-63]`).should("exist");
         cy.get(`button[data-testid=remove-subject-77]`).should("not.exist");
@@ -541,11 +541,11 @@ describe("Find by Subjects", () => {
         cy.get(".doc-type__toggle fieldset > div")
             .eq(0)
             .find("label")
-            .should("have.text", "Public Resources");
+            .should("include.text", "Public Resources");
         cy.get(".doc-type__toggle fieldset > div")
             .eq(1)
             .find("label")
-            .should("have.text", "Internal Resources");
+            .should("include.text", "Internal Resources");
 
         // Remove subject
         cy.get("button[data-testid=remove-subject-63]").click({ force: true });
@@ -566,11 +566,11 @@ describe("Find by Subjects", () => {
         cy.get(".doc-type__toggle fieldset > div")
             .eq(0)
             .find("label")
-            .should("have.text", "Public Resources");
+            .should("include.text", "Public Resources");
         cy.get(".doc-type__toggle fieldset > div")
             .eq(1)
             .find("label")
-            .should("have.text", "Internal Resources");
+            .should("include.text", "Internal Resources");
 
         // Clear search
         cy.get("form.search-form .v-field__clearable i").click({

solution/ui/e2e/cypress/fixtures/counts.json

@@ -1,5 +1,36 @@
 {
     "internal_resource_count": 1,
     "public_resource_count": 2,
-    "regulation_text_count": 3
+    "regulation_text_count": 3,
+    "subjects": [
+        {
+            "subject": 2,
+            "count": 41
+        },
+        {
+            "subject": 3,
+            "count": 15
+        },
+        {
+            "subject": 4,
+            "count": 6
+        }
+    ],
+    "categories": [
+        {
+            "category": 2,
+            "parent": null,
+            "count": 100
+        },
+        {
+            "category": 4,
+            "parent": 3,
+            "count": 20
+        },
+        {
+            "category": 5,
+            "parent": 3,
+            "count": 13
+        }
+    ]
 }

solution/ui/regulations/alias.js

@@ -4,6 +4,7 @@ const r = (p) => resolve(__dirname, p);
 
 export default {
     "@": r("src"),
+    composables: r("./composables"),
     cypress: r("../e2e/cypress"),
     eregsComponentLib: r("../regulations/eregs-component-lib"),
     legacy: r("../../regulations"),

solution/ui/regulations/css/scss/partials/_search.scss

@@ -14,7 +14,6 @@
         &--menu {
             background-color: white;
             max-height: 300px;
-            overflow-y: scroll;
 
             .subjects__list-container {
                 form {

solution/ui/regulations/css/scss/partials/_subjects_selector.scss

@@ -76,7 +76,7 @@
 
     ul.subjects__list {
         height: 300px;
-        overflow: scroll;
+        overflow-y: auto;
         padding: 0;
         margin: 0;
 
@@ -87,19 +87,11 @@
                 margin-bottom: 0;
             }
 
-            .sidebar-li__button {
+            .subjects-li__button {
                 text-align: left;
                 color: #000;
                 width: 100%;
 
-                .match__container {
-                    @include font-bold-keep-width;
-
-                    .match {
-                        @include font-bold-keep-width-reset;
-                    }
-                }
-
                 &--selected {
                     @include font-bold-keep-width;
 
@@ -113,6 +105,18 @@
 
                     cursor: pointer;
                 }
+
+                .match__container {
+                    @include font-bold-keep-width;
+
+                    .match {
+                        @include font-bold-keep-width-reset;
+                    }
+                }
+
+                .count {
+                    margin-left: var(--spacer-1);
+                }
             }
         }
     }
@@ -160,6 +164,12 @@
                     font-size: $font_size_sm;
                     line-height: 22px;
                     margin-bottom: var(--spacer-2);
+
+                    .subjects-li__button {
+                        display: flex;
+                        justify-content: space-between;
+                        line-height: 22px;
+                    }
                 }
             }
         }

solution/ui/regulations/eregs-vite/src/components/SearchContinueResearch.test.js

@@ -5,9 +5,7 @@ import SearchContinueResearch from "./SearchContinueResearch.vue";
 describe("Search Continue Research", () => {
     it("correctly determines if a query string has spaces", () => {
         expect(SearchContinueResearch.hasSpaces("test")).toBe(false);
-        expect(SearchContinueResearch.hasSpaces("test query")).toBe(
-            true
-        );
+        expect(SearchContinueResearch.hasSpaces("test query")).toBe(true);
     });
 
     it("correctly determines if a query has quotes", () => {

solution/ui/regulations/eregs-vite/src/components/dropdowns/Categories.vue

@@ -187,7 +187,6 @@ const onMenuUpdate = () => {
         data-testid="category-select"
         item-type="CategoriesItem"
         label="Choose Category"
-        :loading="loading"
         :disabled="loading"
         :items="list"
         :item-props="itemProps"