From 8b5bd02233d207c2261d5b4b31b431f8e358142a Mon Sep 17 00:00:00 2001
From: Phil Reese <preese@fearless.tech>
Date: Mon, 4 Nov 2024 09:07:19 -0500
Subject: [PATCH] EREGCSC-2685 -- Move subject page search box to filter region
 (#1461)

* feat: move search input on subjects page; direct to search page when used

* feat: method to get subject name as input placeholder

* feat: styles; use v-input label instead of placeholder

because placeholder does not allow text-overflow: ellipsis

* style: various style tweaks

* fix: counts based on q on search page and subjects param on subj pg

* test: fix a few failing tests

* chore: remove q param from subjects page logic

* chore: clean up vestigial logic concerning search query labels in subjects pg

* test: linting; begin updating subjects test suite

* test: fix a11y test and a few others

* test: update all subjects test to work without search query

* chore: remove search slot from policysidebar component

* style: tweak subjects page filters mobile styling

* chore: linting

* feat: refactor search input redirect/clear logic in subjects page

* test: clearing subjects input field should not reload page

* chore: tweak back button behavior

* style: tweak subjects page doc type selectors narrow styles
---
 solution/ui/e2e/cypress/e2e/search.spec.cy.js |   8 +-
 .../ui/e2e/cypress/e2e/subjects.spec.cy.js    | 317 ++++++++----------
 .../support/common-commands/policyDocs.js     |   2 +-
 .../css/scss/partials/_search.scss            |  17 +-
 .../css/scss/partials/_subjects.scss          |  28 ++
 .../src/components/SearchErrorMsg.vue         |   4 +-
 .../eregs-vite/src/components/SearchInput.vue |  21 +-
 .../subjects/DocumentTypeSelector.vue         |  15 +-
 .../src/components/subjects/PolicyResults.vue |  21 --
 .../src/components/subjects/PolicySidebar.vue |  10 +-
 .../ui/regulations/eregs-vite/src/main.js     |   9 +-
 .../eregs-vite/src/views/Search.vue           |   2 -
 .../eregs-vite/src/views/Subjects.vue         |  89 ++---
 13 files changed, 262 insertions(+), 281 deletions(-)

diff --git a/solution/ui/e2e/cypress/e2e/search.spec.cy.js b/solution/ui/e2e/cypress/e2e/search.spec.cy.js
index 2fc842744b..4b454310a1 100644
--- a/solution/ui/e2e/cypress/e2e/search.spec.cy.js
+++ b/solution/ui/e2e/cypress/e2e/search.spec.cy.js
@@ -87,7 +87,7 @@ describe("Search flow", () => {
         cy.viewport("macbook-15");
         cy.visit(`/search`, { timeout: 60000 });
         cy.get("input#main-content")
-            .should("be.visible")
+            .should("exist")
             .type("test search", { force: true });
         cy.get('[data-testid="search-form-submit"]').click({
             force: true,
@@ -106,7 +106,7 @@ describe("Search flow", () => {
         });
 
         cy.get("input#main-content")
-            .should("be.visible")
+            .should("exist")
             .type("test", { force: true });
 
         cy.findByDisplayValue("test")
@@ -148,7 +148,7 @@ describe("Search flow", () => {
         });
 
         cy.get("input#main-content")
-            .should("be.visible")
+            .should("exist")
             .type(`${SEARCH_TERM_2}`, { force: true });
         cy.get('[data-testid="search-form-submit"]').click({
             force: true,
@@ -184,7 +184,7 @@ describe("Search flow", () => {
         });
 
         cy.get("input#main-content")
-            .should("be.visible")
+            .should("exist")
             .type(`${SEARCH_TERM}`, { force: true });
         cy.get('[data-testid="search-form-submit"]').click({
             force: true,
diff --git a/solution/ui/e2e/cypress/e2e/subjects.spec.cy.js b/solution/ui/e2e/cypress/e2e/subjects.spec.cy.js
index ae8a90461c..3c9f03208b 100644
--- a/solution/ui/e2e/cypress/e2e/subjects.spec.cy.js
+++ b/solution/ui/e2e/cypress/e2e/subjects.spec.cy.js
@@ -39,25 +39,31 @@ const _beforePaginate = () => {
         "**/v3/resources/public?show_regulations=false&show_internal=false**",
         {
             fixture: "policy-docs-50-p1.json",
-        }
+        },
     ).as("initialPage");
 
-    cy.intercept("**/v3/resources/public?show_regulations=false&show_internal=false&page=1**", {
-        fixture: "policy-docs-50-p1.json",
-    }).as("page1");
+    cy.intercept(
+        "**/v3/resources/public?show_regulations=false&show_internal=false&page=1**",
+        {
+            fixture: "policy-docs-50-p1.json",
+        },
+    ).as("page1");
 
-    cy.intercept("**/v3/resources/public?show_regulations=false&show_internal=false&page=2**", {
-        fixture: "policy-docs-50-p2.json",
-    }).as("page2");
+    cy.intercept(
+        "**/v3/resources/public?show_regulations=false&show_internal=false&page=2**",
+        {
+            fixture: "policy-docs-50-p2.json",
+        },
+    ).as("page2");
 };
 
 Cypress.Commands.add("getPolicyDocs", ({ username, password }) => {
-    cy.intercept("**/v3/content-search/?q=mock**", {
+    cy.intercept("**/v3/resources/?subjects=3**", {
         fixture: "policy-docs-search.json",
     }).as("subjectFiles");
     cy.viewport("macbook-15");
     cy.eregsLogin({ username, password, landingPage: "/subjects/" });
-    cy.visit("/subjects/?q=mock");
+    cy.visit("/subjects/?subjects=3");
     cy.injectAxe();
     cy.wait("@subjectFiles").then((interception) => {
         expect(interception.response.statusCode).to.eq(200);
@@ -69,17 +75,13 @@ describe("Find by Subjects", () => {
 
     it("redirects /policy-repository to /subjects", () => {
         cy.viewport("macbook-15");
-        cy.visit("/policy-repository?subjects=2&q=test");
+        cy.visit("/policy-repository?subjects=2");
         cy.url().should("not.include", "/policy-repository");
-        cy.url()
-            .should("include", "/subjects/")
-            .and("include", "subjects=2")
-            .and("include", "q=test");
+        cy.url().should("include", "/subjects/").and("include", "subjects=2");
         cy.get(".div__login-sidebar a")
             .should("have.attr", "href")
             .and("include", "next")
             .and("include", "subjects/")
-            .and("include", "q=test")
             .and("include", "subjects=2");
     });
 
@@ -95,6 +97,14 @@ describe("Find by Subjects", () => {
             .and("not.include", "q=test");
     });
 
+    it("strips the q parameter out of the URL if it is included in the URL on load", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/subjects/?subjects=2&q=test");
+        cy.url()
+            .should("include", "/subjects?subjects=2")
+            .and("not.include", "q=test");
+    });
+
     it("shows the custom eua login screen when you visit /subjects/ and click 'sign in'", () => {
         cy.viewport("macbook-15");
         cy.visit("/subjects/");
@@ -123,15 +133,15 @@ describe("Find by Subjects", () => {
         cy.checkAccessibility();
 
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-3] a"
+            ".subj-toc__list li[data-testid=subject-toc-li-3] a",
         ).scrollIntoView();
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-3] div.subj-toc-li__count"
+            ".subj-toc__list li[data-testid=subject-toc-li-3] div.subj-toc-li__count",
         )
             .should("be.visible")
             .and("have.text", "1 public resource");
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-63] a"
+            ".subj-toc__list li[data-testid=subject-toc-li-63] a",
         ).scrollIntoView();
         cy.get(".subj-toc__list li[data-testid=subject-toc-li-63] a")
             .should("have.text", "Managed Care")
@@ -159,19 +169,19 @@ describe("Find by Subjects", () => {
         cy.visit("/subjects");
         cy.url().should("include", "/subjects/");
         cy.get("button[data-testid='user-account-button']").should(
-            "be.visible"
+            "be.visible",
         );
         cy.get(".subject__heading").should("not.exist");
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-3] a"
+            ".subj-toc__list li[data-testid=subject-toc-li-3] a",
         ).scrollIntoView();
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-3] div.subj-toc-li__count"
+            ".subj-toc__list li[data-testid=subject-toc-li-3] div.subj-toc-li__count",
         )
             .should("be.visible")
             .and("have.text", "1 public and 0 internal resources");
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-63] a"
+            ".subj-toc__list li[data-testid=subject-toc-li-63] a",
         ).scrollIntoView();
         cy.get(".subj-toc__list li[data-testid=subject-toc-li-63] a")
             .should("have.text", "Managed Care")
@@ -186,27 +196,81 @@ describe("Find by Subjects", () => {
         cy.url().should("include", "/subjects?subjects=2");
     });
 
-    it("should display the appropriate results column header whether viewing keyword search results or viewing the items within a subject.", () => {
-        cy.intercept("**/v3/content-search/**", {
-            fixture: "policy-docs-search.json",
+    it("should redirect to the Search page with the correct selected subject when a search term is entered", () => {
+        cy.viewport("macbook-15");
+        cy.eregsLogin({ username, password });
+        cy.visit("/subjects");
+        cy.get(
+            ".subj-toc__list li[data-testid=subject-toc-li-3] a",
+        ).scrollIntoView();
+        cy.get(".subj-toc__list li[data-testid=subject-toc-li-3] a")
+            .should("have.text", "Access to Services")
+            .click({ force: true });
+        cy.get("input#main-content").type("mock", { force: true });
+        cy.get('[data-testid="search-form-submit"]').click({
+            force: true,
         });
-        cy.intercept(
-            "**/v3/resources/?&page_size=50&group_resources=false",
-            {
-                fixture: "policy-docs-subjects.json",
-            }
+        cy.url()
+            .should("include", "/search")
+            .and("include", "q=mock")
+            .and("include", "subjects=3");
+    });
+
+    it("clearing the search input should not reload the page", () => {
+        cy.viewport("macbook-15");
+        cy.eregsLogin({ username, password });
+        cy.visit("/subjects");
+
+        // select subject
+        cy.get(
+            ".subj-toc__list li[data-testid=subject-toc-li-3] a",
+        ).scrollIntoView();
+        cy.get(".subj-toc__list li[data-testid=subject-toc-li-3] a")
+            .should("have.text", "Access to Services")
+            .click({ force: true });
+
+        // select category
+        cy.get("div[data-testid='category-select']").click();
+        cy.get("div[data-testid='external-0']").click({ force: true });
+
+        cy.url().should(
+            "include",
+            "/subjects?subjects=3&categories=1&type=external",
         );
+
+        cy.get("input#main-content").invoke("val").should("eq", "");
+
+        cy.get("input#main-content").type("mock", { force: true });
+
+        cy.get("input#main-content").invoke("val").should("eq", "mock");
+
+        cy.get(".search-field")
+            .find(".v-field__clearable i")
+            .click({ force: true });
+
+        cy.get("input#main-content").invoke("val").should("eq", "");
+
+        cy.url().should(
+            "include",
+            "/subjects?subjects=3&categories=1&type=external",
+        );
+    });
+
+    it("should display the appropriate results column header when viewing the items within a subject.", () => {
+        cy.intercept("**/v3/resources/?&page_size=50&group_resources=false", {
+            fixture: "policy-docs-subjects.json",
+        });
         cy.intercept(
             "**/v3/resources/?subjects=3&show_regulations=false&page_size=50&group_resources=false",
             {
                 fixture: "policy-docs-subjects.json",
-            }
+            },
         );
         cy.viewport("macbook-15");
         cy.eregsLogin({ username, password });
         cy.visit("/subjects");
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-3] a"
+            ".subj-toc__list li[data-testid=subject-toc-li-3] a",
         ).scrollIntoView();
         cy.get(".subj-toc__list li[data-testid=subject-toc-li-3] a")
             .should("have.text", "Access to Services")
@@ -218,30 +282,11 @@ describe("Find by Subjects", () => {
         cy.get("search-results__heading").should("not.exist");
         cy.get(".search-results-count").should(
             "have.text",
-            "1 - 3 of 3 documents"
-        );
-        cy.get("input#main-content").type("mock", { force: true });
-        cy.get('[data-testid="search-form-submit"]').click({
-            force: true,
-        });
-        cy.get(".subject__heading").should("not.exist");
-        cy.get(".search-results__heading")
-            .should("exist")
-            .and("have.text", " Search Results ");
-        cy.get(".search-results-count").should(
-            "have.text",
-            "1 - 4 of 4 results for mock within Access to Services"
-        );
-        cy.get(`button[data-testid=remove-subject-3]`).click({
-            force: true,
-        });
-        cy.get(".search-results-count").should(
-            "have.text",
-            "1 - 4 of 4 results for mock"
+            "1 - 3 of 3 documents",
         );
     });
 
-    it("loads the correct subject and search query when the URL is changed", () => {
+    it("loads the correct subject when the URL is changed", () => {
         cy.viewport("macbook-15");
         cy.eregsLogin({
             username,
@@ -294,20 +339,6 @@ describe("Find by Subjects", () => {
         cy.go("back");
         cy.url().should("include", "/subjects?subjects=2");
         cy.get(`button[data-testid=remove-subject-3]`).should("not.exist");
-
-        cy.get("input#main-content")
-            .should("be.visible")
-            .type("test", { force: true });
-        cy.get('[data-testid="search-form-submit"]').click({
-            force: true,
-        });
-        cy.url().should("include", "/subjects?subjects=2&q=test");
-
-        cy.get(`button[data-testid=remove-subject-2]`).click({
-            force: true,
-        });
-        cy.get(`button[data-testid=remove-subject-2]`).should("not.exist");
-        cy.url().should("include", "/subjects?q=test");
     });
 
     it("should display and fetch the correct subjects on load if they are included in URL", () => {
@@ -326,13 +357,13 @@ describe("Find by Subjects", () => {
             .find("a")
             .should("not.have.class", "external")
             .find(
-                "span[data-testid=download-chip-868e968c-d1f5-4518-b458-b6e735ef0f3d]"
+                "span[data-testid=download-chip-868e968c-d1f5-4518-b458-b6e735ef0f3d]",
             )
             .should("include.text", "Download MSG");
         cy.get(".result__link") // regulations link
             .eq(1)
             .find("a")
-            .should("not.include.text", "Download")
+            .should("not.include.text", "Download");
         cy.get(".result__link") // internal_link
             .eq(2)
             .find("a")
@@ -368,7 +399,7 @@ describe("Find by Subjects", () => {
     });
 
     it("should update the URL when a subject chip is clicked", () => {
-        cy.intercept("**/v3/content-search/**", {
+        cy.intercept("**/v3/resources/?subjects=3**", {
             fixture: "policy-docs-search.json",
         }).as("subjectFiles");
         cy.viewport("macbook-15");
@@ -383,28 +414,11 @@ describe("Find by Subjects", () => {
             force: true,
         });
         cy.url().should("include", "/subjects?subjects=3");
-        cy.get("input#main-content")
-            .should("be.visible")
-            .type("test search", { force: true });
-        cy.get('[data-testid="search-form-submit"]').click({
-            force: true,
-        });
-        cy.url().should(
-            "include",
-            "/subjects?subjects=3&q=test+search"
-        );
-        cy.get(".search-form .form-helper-text .search-suggestion").should(
-            "not.exist"
-        );
-        cy.get(".document__subjects a")
-            .eq(0)
-            .should("have.text", "FMAP");
+        cy.get(".document__subjects a").eq(0).should("have.text", "FMAP");
         cy.get(".document__subjects a")
             .eq(1)
             .should("have.text", "Preventive Services");
-        cy.get(".document__subjects a")
-            .eq(2)
-            .should("have.text", "VIII group");
+        cy.get(".document__subjects a").eq(2).should("have.text", "VIII group");
         cy.get(`a[data-testid=add-subject-chip-167]`)
             .should("have.attr", "title")
             .and("include", "New Adult Group");
@@ -427,14 +441,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",
-            "subjects-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",
-            "subjects-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");
@@ -455,10 +469,10 @@ describe("Find by Subjects", () => {
         cy.get(`button[data-testid=remove-subject-1]`).should("not.exist");
         cy.get(`button[data-testid=add-subject-1]`).should(
             "include.text",
-            "Cures Act"
+            "Cures Act",
         );
         cy.get(`button[data-testid=clear-subject-filter]`).should(
-            "not.be.visible"
+            "not.be.visible",
         );
 
         cy.checkAccessibility();
@@ -473,7 +487,7 @@ describe("Find by Subjects", () => {
         cy.get(".subjects__list li").should("have.length", 1);
         cy.get(`button[data-testid=add-subject-1]`).should(
             "include.text",
-            "21st Century Cures Act"
+            "21st Century Cures Act",
         );
         cy.get(`button[data-testid=add-subject-1]`).click({
             force: true,
@@ -495,28 +509,7 @@ describe("Find by Subjects", () => {
         cy.get(".subjects__list li").should("have.length", 78);
     });
 
-    it("should display and fetch the correct search query on load if it is included in URL", () => {
-        cy.intercept(
-            "**/v3/content-search/?q=streamlined%20modular%20certification**"
-        ).as("qFiles");
-        cy.viewport("macbook-15");
-        cy.eregsLogin({
-            username,
-            password,
-            landingPage: "/subjects/",
-        });
-        cy.visit("/subjects/?q=streamlined%20modular%20certification");
-        cy.wait("@qFiles").then((interception) => {
-            expect(interception.response.statusCode).to.eq(200);
-        });
-        cy.get("input#main-content").should(
-            "have.value",
-            "streamlined modular certification"
-        );
-        cy.get(".subject__heading").should("not.exist");
-    });
-
-    it("should have a Documents to Show checkbox list only when a subject is selected or text is searched", () => {
+    it("should have a Documents to Show checkbox list only when a subject or category is selected", () => {
         cy.viewport("macbook-15");
         cy.eregsLogin({
             username,
@@ -528,9 +521,9 @@ describe("Find by Subjects", () => {
         // doc type checkboxes should not be visible on load
         cy.get(".doc-type__toggle fieldset").should("not.exist");
 
-        // select a subject fro ToC
+        // select a subject from ToC
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-63] a"
+            ".subj-toc__list li[data-testid=subject-toc-li-63] a",
         ).scrollIntoView();
         cy.get(".subj-toc__list li[data-testid=subject-toc-li-63] a")
             .should("have.text", "Managed Care")
@@ -553,13 +546,13 @@ describe("Find by Subjects", () => {
         // doc type checkboxes should no longer be visible
         cy.get(".doc-type__toggle fieldset").should("not.exist");
 
-        // search for a term
-        cy.get("input#main-content")
-            .should("be.visible")
-            .type("test", { force: true });
-        cy.get('[data-testid="search-form-submit"]').click({
-            force: true,
-        });
+        // select a subject from ToC once again
+        cy.get(
+            ".subj-toc__list li[data-testid=subject-toc-li-63] a",
+        ).scrollIntoView();
+        cy.get(".subj-toc__list li[data-testid=subject-toc-li-63] a")
+            .should("have.text", "Managed Care")
+            .click({ force: true });
 
         // doc type checkboxes should be visible now
         cy.get(".doc-type__toggle fieldset > div").should("have.length", 2);
@@ -572,13 +565,23 @@ describe("Find by Subjects", () => {
             .find("label")
             .should("include.text", "Internal Resources");
 
-        // Clear search
-        cy.get("form.search-form .v-field__clearable i").click({
-            force: true,
-        });
+        // Select a category
+        cy.get("div[data-testid='category-select']").click();
+        cy.get("div[data-testid='external-0']").click({ force: true });
 
-        // doc type checkboxes should no longer be visible
-        cy.get(".doc-type__toggle fieldset").should("not.exist");
+        // remove subject
+        cy.get("button[data-testid=remove-subject-63]").click({ force: true });
+
+        // doc type checkboxes should still be visible
+        cy.get(".doc-type__toggle fieldset > div").should("have.length", 2);
+        cy.get(".doc-type__toggle fieldset > div")
+            .eq(0)
+            .find("label")
+            .should("include.text", "Public Resources");
+        cy.get(".doc-type__toggle fieldset > div")
+            .eq(1)
+            .find("label")
+            .should("include.text", "Internal Resources");
     });
 
     it("should show only the Table of Contents if both or neither checkboxes are checked", () => {
@@ -638,7 +641,7 @@ describe("Find by Subjects", () => {
         cy.viewport("macbook-15");
 
         // Visit without authenticating
-        cy.visit("/subjects?q=test");
+        cy.visit("/subjects?subjects=3");
 
         // Assert that category select label is visible
         cy.get("div[data-testid='category-select']")
@@ -659,7 +662,7 @@ describe("Find by Subjects", () => {
 
         // Log in and visit the same page
         cy.eregsLogin({ username, password, landingPage: "/subjects/" });
-        cy.visit("/subjects?q=test");
+        cy.visit("/subjects?subjects=3");
 
         // Open category select dropdown and assert that
         // Doc Type label is visible
@@ -690,7 +693,7 @@ describe("Find by Subjects", () => {
 
         // Select subject
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-63] a"
+            ".subj-toc__list li[data-testid=subject-toc-li-63] a",
         ).scrollIntoView();
         cy.get(".subj-toc__list li[data-testid=subject-toc-li-63] a")
             .should("have.text", "Managed Care")
@@ -722,7 +725,7 @@ describe("Find by Subjects", () => {
 
         // Select a subject
         cy.get(
-            ".subj-toc__list li[data-testid=subject-toc-li-63] a"
+            ".subj-toc__list li[data-testid=subject-toc-li-63] a",
         ).scrollIntoView();
         cy.get(".subj-toc__list li[data-testid=subject-toc-li-63] a")
             .should("have.text", "Managed Care")
@@ -761,7 +764,7 @@ describe("Find by Subjects", () => {
 
         cy.url().should(
             "include",
-            "/subjects?subjects=63&categories=1&type=external"
+            "/subjects?subjects=63&categories=1&type=external",
         );
 
         // Select a different subject
@@ -792,26 +795,8 @@ describe("Find by Subjects", () => {
             .should("not.be.visible");
         cy.url().should(
             "include",
-            "/subjects?subjects=1&categories=1&type=external"
+            "/subjects?subjects=1&categories=1&type=external",
         );
-
-        // Add text query and submit
-        cy.get("input#main-content")
-            .should("be.visible")
-            .type("test", { force: true });
-        cy.get('[data-testid="search-form-submit"]').click({
-            force: true,
-        });
-
-        // Assert that category is removed from URL and
-        // category select label is reset
-        cy.url().should("include", "/subjects?subjects=1&type=external&q=test");
-        cy.url().should("not.include", "&categories=3");
-        cy.get("div[data-testid='category-select']")
-            .should("exist")
-            .find("label")
-            .should("have.text", "Choose Category")
-            .and("be.visible");
     });
 
     it("goes to another SPA page from the subjects page", () => {
@@ -830,14 +815,6 @@ describe("Find by Subjects", () => {
         cy.url().should("include", "/statutes");
     });
 
-    it("should have the correct labels for public and internal documents", () => {
-        cy.checkPolicyDocs({
-            username,
-            password,
-            landingPage: "/subjects/",
-        });
-    });
-
     it("should not show document type selector after you log out", () => {
         cy.viewport("macbook-15");
         cy.eregsLogin({
@@ -872,12 +849,12 @@ describe("Subjects Page -- Pagination", () => {
         cy.get(".current-page.selected").contains("1");
         cy.get(".pagination-control.left-control > .back-btn").should(
             "have.class",
-            "disabled"
+            "disabled",
         );
         cy.wait("@initialPage").then((interception) => {
             const count = interception.response.body.count;
             cy.get(".search-results-count").contains(
-                `1 - 50 of ${count} documents`
+                `1 - 50 of ${count} documents`,
             );
         });
         cy.get(".pagination-control.right-control")
@@ -887,7 +864,7 @@ describe("Subjects Page -- Pagination", () => {
             const count = interception.response.body.count;
             cy.url().should("include", "page=2");
             cy.get(".search-results-count").contains(
-                `51 - 100 of ${count} documents`
+                `51 - 100 of ${count} documents`,
             );
             cy.get(".current-page.selected").contains("2");
         });
@@ -905,7 +882,7 @@ describe("Subjects Page -- Pagination", () => {
             const count = interception.response.body.count;
             cy.url().should("include", "page=2");
             cy.get(".search-results-count").contains(
-                `51 - 100 of ${count} documents`
+                `51 - 100 of ${count} documents`,
             );
             cy.get(".current-page.selected").contains("2");
         });
@@ -918,7 +895,7 @@ describe("Subjects Page -- Pagination", () => {
         cy.wait("@page2").then((interception) => {
             const count = interception.response.body.count;
             cy.get(".search-results-count").contains(
-                `51 - 100 of ${count} documents`
+                `51 - 100 of ${count} documents`,
             );
             cy.get(".current-page.selected").contains("2");
         });
@@ -931,12 +908,12 @@ describe("Subjects Page -- Pagination", () => {
         cy.wait("@page2").then((interception) => {
             const count = interception.response.body.count;
             cy.get(".search-results-count").contains(
-                `51 - 100 of ${count} documents`
+                `51 - 100 of ${count} documents`,
             );
             cy.get(".current-page.selected").contains("2");
             cy.url().should(
                 "include",
-                "/subjects/?type=external&page=2&categories=3"
+                "/subjects/?type=external&page=2&categories=3",
             );
         });
     });
diff --git a/solution/ui/e2e/cypress/support/common-commands/policyDocs.js b/solution/ui/e2e/cypress/support/common-commands/policyDocs.js
index 1b1eaef2f4..67be94d5d4 100644
--- a/solution/ui/e2e/cypress/support/common-commands/policyDocs.js
+++ b/solution/ui/e2e/cypress/support/common-commands/policyDocs.js
@@ -19,7 +19,7 @@ export const checkPolicyDocs = ({ username, password, landingPage }) => {
         landingPage,
     });
     cy.get("input#main-content")
-        .should("be.visible")
+        .should("exist")
         .type("mock", { force: true });
     cy.get('[data-testid="search-form-submit"]').click({
         force: true,
diff --git a/solution/ui/regulations/css/scss/partials/_search.scss b/solution/ui/regulations/css/scss/partials/_search.scss
index 8e63859b04..eb7e9686af 100644
--- a/solution/ui/regulations/css/scss/partials/_search.scss
+++ b/solution/ui/regulations/css/scss/partials/_search.scss
@@ -141,17 +141,14 @@
 .search-field {
     background-color: #fff;
 
-    .v-field__input {
-        padding-left: 12px;
+    label.v-field-label {
+        margin-inline-start: var(--spacer-2);
+        color: $secondary_text_color;
+        opacity: 1;
+    }
 
-        &::placeholder {
-            letter-spacing: normal;
-            position: absolute;
-            top: calc(50% + 0.5px);
-            transform: translateY(-50%);
-            opacity: 1;
-            color: #0009;
-        }
+    .v-field__input {
+        padding-left: var(--spacer-2);
     }
 
     .v-field__append-inner i,
diff --git a/solution/ui/regulations/css/scss/partials/_subjects.scss b/solution/ui/regulations/css/scss/partials/_subjects.scss
index 40e28d5f25..62febe97a7 100644
--- a/solution/ui/regulations/css/scss/partials/_subjects.scss
+++ b/solution/ui/regulations/css/scss/partials/_subjects.scss
@@ -307,6 +307,11 @@
         padding-left: 0px;
         padding-right: 0px;
 
+        @media (max-width: 543px) {
+            padding-left: var(--spacer-6);
+            padding-right: var(--spacer-6);
+        }
+
         @include screen-md {
             padding-right: 1rem;
             border-right: 2px solid $border_color;
@@ -471,6 +476,29 @@
         gap: 1rem;
         align-items: center;
         margin-bottom: 1rem;
+
+        .doc-type__toggle fieldset {
+            @media (max-width: 475px) {
+                flex-direction: column;
+            }
+        }
+
+        .ds-c-choice-wrapper label {
+            @media (max-width: 475px) {
+                width: calc(100% - 28px);
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
+
+    .subject__search--row {
+        padding: 0 var(--spacer-4);
+        margin-bottom: var(--spacer-4);
+
+        .search-field {
+            width: 320px;
+        }
     }
 
     .doc__list {
diff --git a/solution/ui/regulations/eregs-vite/src/components/SearchErrorMsg.vue b/solution/ui/regulations/eregs-vite/src/components/SearchErrorMsg.vue
index 85aa0e308b..f3c3331da1 100644
--- a/solution/ui/regulations/eregs-vite/src/components/SearchErrorMsg.vue
+++ b/solution/ui/regulations/eregs-vite/src/components/SearchErrorMsg.vue
@@ -18,10 +18,10 @@ const props = defineProps({
 <template>
     <div class="error-msg__container">
         <span class="error__msg" data-testid="error__msg">
-            <span class="error__msg--apology" v-if="showApology"
+            <span v-if="showApology" class="error__msg--apology"
                 >Sorry, we’re unable to display results<span
-                    class="error__msg--query"
                     v-if="searchQuery"
+                    class="error__msg--query"
                 >
                     for <strong>{{ searchQuery }}</strong></span
                 >
diff --git a/solution/ui/regulations/eregs-vite/src/components/SearchInput.vue b/solution/ui/regulations/eregs-vite/src/components/SearchInput.vue
index a3af15a9b4..233a593135 100644
--- a/solution/ui/regulations/eregs-vite/src/components/SearchInput.vue
+++ b/solution/ui/regulations/eregs-vite/src/components/SearchInput.vue
@@ -2,18 +2,19 @@
     <form ref="formRef" :class="formClass" @submit.prevent="submitForm">
         <v-text-field
             id="main-content"
+            ref="searchInput"
             v-model="searchInputValue"
             clearable
             variant="outlined"
             density="compact"
-            :placeholder="label"
+            :label="label"
             :aria-label="label"
             type="input"
             class="search-field"
             clear-icon="mdi-close"
             hide-details
             single-line
-            @update:modelValue="updateSearchValue"
+            @update:model-value="updateSearchValue"
         >
             <template #clear>
                 <v-icon
@@ -103,10 +104,16 @@ export default {
             type: Boolean,
             default: false,
         },
+        redirectTo: {
+            type: String,
+            default: undefined,
+        },
     },
 
     created() {
-        this.searchInputValue = this.searchQuery;
+        if (this.parent !== "subjects") {
+            this.searchInputValue = this.searchQuery;
+        }
     },
     data() {
         return {
@@ -129,6 +136,10 @@ export default {
     methods: {
         submitForm() {
             this.$emit("execute-search", { query: this.searchInputValue });
+
+            // clear search input so input is clear if user clicks back button
+            // to return to this page
+            this.$refs.searchInput.reset();
         },
         clearForm() {
             this.searchInputValue = undefined;
@@ -139,7 +150,7 @@ export default {
         },
         synonymLink(synonym) {
             this.$router.push({
-                name: this.parent,
+                name: this.redirectTo || this.parent,
                 query: {
                     ...this.queryParams,
                     page: undefined,
@@ -149,7 +160,7 @@ export default {
         },
         quotedLink() {
             this.$router.push({
-                name: this.parent,
+                name: this.redirectTo || this.parent,
                 query: {
                     ...this.queryParams,
                     page: undefined,
diff --git a/solution/ui/regulations/eregs-vite/src/components/subjects/DocumentTypeSelector.vue b/solution/ui/regulations/eregs-vite/src/components/subjects/DocumentTypeSelector.vue
index 07e6b90f4b..ec934595ff 100644
--- a/solution/ui/regulations/eregs-vite/src/components/subjects/DocumentTypeSelector.vue
+++ b/solution/ui/regulations/eregs-vite/src/components/subjects/DocumentTypeSelector.vue
@@ -44,8 +44,6 @@ if (!isAuthenticated)
 
 const { counts, fetchCounts } = useCounts();
 
-fetchCounts({ apiUrl, queryParams: $route.query });
-
 // v-model with a ref to control if the checkbox is displayed as checked or not
 let boxesArr;
 
@@ -105,16 +103,21 @@ const onCheckboxChange = (event) => {
 watch(
     () => $route.query,
     (newQuery) => {
-        const { type: typeParams, q } = newQuery;
+        const { type: typeParams, subjects, q } = newQuery;
 
-        fetchCounts({ apiUrl, queryParams: { q } });
+        if (props.parent === "search") {
+            fetchCounts({ apiUrl, queryParams: { q } });
+        } else {
+            fetchCounts({ apiUrl, queryParams: { subjects } });
+        }
 
         if (_isUndefined(typeParams) || typeParams.includes("all")) {
             checkedBoxes.value = [];
         } else {
             checkedBoxes.value = typeParams.split(",");
         }
-    }
+    },
+    { immediate: true }
 );
 
 const onPopState = (event) => {
@@ -136,7 +139,7 @@ const makeLabel = ({ type }) => {
 };
 
 const makeCount = ({ type }) => {
-    if (props.loading) return "";
+    if (props.loading || counts.value.loading) return "";
 
     const mappedType = COUNT_TYPES_MAP[type];
 
diff --git a/solution/ui/regulations/eregs-vite/src/components/subjects/PolicyResults.vue b/solution/ui/regulations/eregs-vite/src/components/subjects/PolicyResults.vue
index 00d659f4d6..1c742e8842 100644
--- a/solution/ui/regulations/eregs-vite/src/components/subjects/PolicyResults.vue
+++ b/solution/ui/regulations/eregs-vite/src/components/subjects/PolicyResults.vue
@@ -175,10 +175,6 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
-    view: {
-        type: String,
-        default: undefined,
-    },
 });
 
 const $route = useRoute();
@@ -228,12 +224,6 @@ const currentPageResultsRange = getCurrentPageResultsRange({
 
 <template>
     <div class="doc__list">
-        <h2
-            v-if="view !== 'search' && searchQuery"
-            class="search-results__heading"
-        >
-            Search Results
-        </h2>
         <div class="search-results-count">
             <span v-if="results.length > 0"
                 >{{ currentPageResultsRange[0] }} -
@@ -242,17 +232,6 @@ const currentPageResultsRange = getCurrentPageResultsRange({
             {{ resultsCount }} <span v-if="searchQuery">result</span
             ><span v-else>document</span>
             <span v-if="results.length != 1">s</span>
-            <template v-if="view !== 'search'">
-                <span v-if="searchQuery">
-                    for
-                    <span class="search-query__span">{{
-                        searchQuery
-                    }}</span></span
-                >
-                <span v-if="searchQuery && selectedSubjectParts[0]">
-                    within {{ selectedSubjectParts[1][0] }}</span
-                >
-            </template>
         </div>
         <slot name="empty-state"></slot>
         <ResultsItem
diff --git a/solution/ui/regulations/eregs-vite/src/components/subjects/PolicySidebar.vue b/solution/ui/regulations/eregs-vite/src/components/subjects/PolicySidebar.vue
index a61c20e7e6..72091a6acf 100644
--- a/solution/ui/regulations/eregs-vite/src/components/subjects/PolicySidebar.vue
+++ b/solution/ui/regulations/eregs-vite/src/components/subjects/PolicySidebar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { inject} from "vue";
+import { inject } from "vue";
 import { useRoute } from "vue-router";
 import useLoginRedirectUrl from "composables/login";
 
@@ -9,8 +9,11 @@ const isAuthenticated = inject("isAuthenticated");
 
 const $route = useRoute();
 
-const loginUrl = useLoginRedirectUrl({ customLoginUrl, homeUrl, route: $route });
-
+const loginUrl = useLoginRedirectUrl({
+    customLoginUrl,
+    homeUrl,
+    route: $route,
+});
 </script>
 
 <template>
@@ -20,7 +23,6 @@ const loginUrl = useLoginRedirectUrl({ customLoginUrl, homeUrl, route: $route })
         </slot>
         <div class="sidebar-filters__container">
             <slot name="selections"> </slot>
-            <slot name="search"> </slot>
             <template v-if="!isAuthenticated">
                 <div class="div__login-sidebar">
                     CMCS staff participating in the Policy Repository pilot can
diff --git a/solution/ui/regulations/eregs-vite/src/main.js b/solution/ui/regulations/eregs-vite/src/main.js
index e55be141c7..bdfe1fa1a5 100644
--- a/solution/ui/regulations/eregs-vite/src/main.js
+++ b/solution/ui/regulations/eregs-vite/src/main.js
@@ -46,10 +46,17 @@ router.beforeEach((to) => {
             document.title = pageTitle;
         }
 
+        // strip out q param if it exists; it's not needed for subjects
+        const { q, ...qlessQuery } = to.query;
+
         if (isAuthenticated === "False" && to.query?.type) {
-            const { type, ...typelessQuery } = to.query;
+            const { type, ...typelessQuery } = qlessQuery;
             return { name: "subjects", query: typelessQuery };
         }
+
+        if (q) {
+            return { name: "subjects", query: qlessQuery };
+        }
     }
 
     return true;
diff --git a/solution/ui/regulations/eregs-vite/src/views/Search.vue b/solution/ui/regulations/eregs-vite/src/views/Search.vue
index 2f13f6740b..3d4ce523ea 100644
--- a/solution/ui/regulations/eregs-vite/src/views/Search.vue
+++ b/solution/ui/regulations/eregs-vite/src/views/Search.vue
@@ -396,7 +396,6 @@ getDocsOnLoad();
                         :has-editable-job-code="hasEditableJobCode"
                         :search-query="searchQuery"
                         :selected-subject-parts="selectedSubjectParts"
-                        view="search"
                     />
                     <div class="pagination-expand-row">
                         <div class="pagination-expand-container">
@@ -405,7 +404,6 @@ getDocsOnLoad();
                                 :count="policyDocList.count"
                                 :page="parseInt($route.query.page, 10) || 1"
                                 :page-size="pageSize"
-                                view="search"
                             />
                         </div>
                     </div>
diff --git a/solution/ui/regulations/eregs-vite/src/views/Subjects.vue b/solution/ui/regulations/eregs-vite/src/views/Subjects.vue
index 4652620d13..338b8aa0a2 100644
--- a/solution/ui/regulations/eregs-vite/src/views/Subjects.vue
+++ b/solution/ui/regulations/eregs-vite/src/views/Subjects.vue
@@ -63,8 +63,12 @@ provide("FilterTypesDict", FilterTypesDict);
 
 // provide router query params to remove on child component change
 const commonRemoveList = ["page", "categories", "intcategories"];
-const policySelectionsRemoveList = ["subjects"];
-const searchInputRemoveList = commonRemoveList.concat(["q"]);
+const policySelectionsRemoveList = ["subjects", "q"];
+const searchInputRemoveList = commonRemoveList.concat([
+    "q",
+    "type",
+    "categories",
+]);
 
 provide("commonRemoveList", commonRemoveList);
 provide("policySelectionsRemoveList", policySelectionsRemoveList);
@@ -90,12 +94,6 @@ const allDocTypesOnly = (queryParams) => {
     return false;
 };
 
-// search query refs and methods
-const searchQuery = ref($route.query.q || "");
-const clearSearchQuery = () => {
-    searchQuery.value = "";
-};
-
 const executeSearch = (payload) => {
     const routeClone = { ...$route.query };
 
@@ -104,29 +102,9 @@ const executeSearch = (payload) => {
         removeList: searchInputRemoveList,
     });
 
-    $router.push({
-        name: "subjects",
-        query: {
-            ...cleanedRoute,
-            q: payload.query,
-        },
-    });
-};
-
-const clearSearchInput = () => {
-    const routeClone = { ...$route.query };
-
-    const cleanedRoute = useRemoveList({
-        route: routeClone,
-        removeList: searchInputRemoveList,
-    });
-
-    $router.push({
-        name: "subjects",
-        query: {
-            ...cleanedRoute,
-        },
-    });
+    const redirectParams = new URLSearchParams(cleanedRoute);
+    const redirectPath = `${homeUrl}search/?${redirectParams.toString() ? redirectParams.toString() + "&" : ""}q=${payload.query}`;
+    window.location.assign(redirectPath);
 };
 
 // partsLastUpdated fetch for related regulations citations filtering
@@ -187,11 +165,6 @@ const setSelectedParams = (subjectsListRef) => (param) => {
         return;
     }
 
-    if (paramType === "q") {
-        searchQuery.value = paramValue;
-        return;
-    }
-
     const paramList = !_isArray(paramValue) ? [paramValue] : paramValue;
     paramList.forEach((paramId) => {
         const subject = subjectsListRef.value.results.filter(
@@ -248,7 +221,6 @@ const getDocSubjects = async () => {
         if (!allDocTypesOnly($route.query)) {
             // wipe everything clean to start
             clearSelectedParams();
-            clearSearchQuery();
 
             // now that everything is cleaned, iterate over new query params
             Object.entries($route.query).forEach((param) => {
@@ -286,6 +258,18 @@ const setSelectedSubjectParts = () => {
     }
 };
 
+const getSearchInputLabel = (selectedSubjectParts) => {
+    if (policyDocSubjects.value.loading) {
+        return "Loading...";
+    }
+
+    if (selectedSubjectParts.length) {
+        return `Search within ${selectedSubjectParts[0][0] || selectedSubjectParts[1][0]}`;
+    }
+
+    return "Search for a document";
+};
+
 watch(
     () => policyDocSubjects.value.loading,
     async (newLoading) => {
@@ -319,7 +303,6 @@ watch(
 
         // wipe everything clean to start
         clearSelectedParams();
-        clearSearchQuery();
 
         const sanitizedQueryParams = Object.entries(newQueryParams).filter(
             ([key]) => PARAM_VALIDATION_DICT[key]
@@ -404,16 +387,6 @@ getDocSubjects();
                         <template #selections>
                             <PolicySelections />
                         </template>
-                        <template #search>
-                            <SearchInput
-                                form-class="search-form"
-                                label="Search for a document"
-                                parent="subjects"
-                                :search-query="searchQuery"
-                                @execute-search="executeSearch"
-                                @clear-form="clearSearchInput"
-                            />
-                        </template>
                         <template #filters>
                             <SubjectSelector
                                 :policy-doc-subjects="policyDocSubjects"
@@ -431,7 +404,7 @@ getDocSubjects();
                     />
                     <template v-else>
                         <div
-                            v-if="selectedSubjectParts.length && !searchQuery"
+                            v-if="selectedSubjectParts.length"
                             class="subject__heading"
                         >
                             <SelectedSubjectHeading
@@ -456,6 +429,17 @@ getDocSubjects();
                                 />
                             </FetchItemsContainer>
                         </div>
+                        <div class="subject__search--row">
+                            <SearchInput
+                                form-class="search-form"
+                                :label="
+                                    getSearchInputLabel(selectedSubjectParts)
+                                "
+                                parent="subjects"
+                                redirect-to="search"
+                                @execute-search="executeSearch"
+                            />
+                        </div>
                         <template
                             v-if="
                                 policyDocList.loading ||
@@ -467,16 +451,12 @@ getDocSubjects();
                         <template v-else-if="policyDocList.error">
                             <div class="doc__list">
                                 <h2
-                                    v-if="
-                                        !selectedSubjectParts.length ||
-                                        searchQuery
-                                    "
+                                    v-if="!selectedSubjectParts.length"
                                     class="search-results__heading"
                                 >
                                     Search Results
                                 </h2>
                                 <SearchErrorMsg
-                                    :search-query="searchQuery"
                                     show-apology
                                     :survey-url="surveyUrl"
                                 />
@@ -491,7 +471,6 @@ getDocSubjects();
                                 :page-size="pageSize"
                                 :parts-last-updated="partsLastUpdated.results"
                                 :has-editable-job-code="hasEditableJobCode"
-                                :search-query="searchQuery"
                                 :selected-subject-parts="selectedSubjectParts"
                             />
                             <div class="pagination-expand-row">