EREGCSC-2459 -- Annotate search results with keyword/subject

solution/ui/e2e/cypress/e2e/policy-repository.spec.cy.js

@@ -48,7 +48,7 @@ describe("Policy Repository", () => {
         cy.url().should("include", "/login");
     });
 
-    it("show the policy repository page when logged in", () => {
+    it("should show the policy repository page when logged in", () => {
         cy.viewport("macbook-15");
         cy.eregsLogin({ username, password, landingPage: "/policy-repository/" });
         cy.visit("/policy-repository");
@@ -79,6 +79,63 @@ describe("Policy Repository", () => {
         cy.url().should("include", "/policy-repository?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.json",
+        }).as("subjectFiles");
+        cy.viewport("macbook-15");
+        cy.eregsLogin({ username, password });
+        cy.visit("/policy-repository");
+        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.url().should("include", "/policy-repository?subjects=3");
+        cy.get(".subject__heading")
+            .should("exist")
+            .and("have.text", "Access to Services");
+        cy.get("search-results__heading").should("not.exist");
+        cy.get(".search-results-count").should(
+            "have.text",
+            "1 - 2 of 2 documents"
+        );
+        cy.get("input#main-content").type("test", { force: true });
+        cy.get(".search-field .v-input__icon--append button").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 - 2 of 2 results for test within Access to Services"
+        );
+        cy.get(`button[data-testid=remove-subject-3]`).click({
+            force: true,
+        });
+        cy.get(".search-results-count").should(
+            "have.text",
+            "1 - 2 of 2 results for test"
+        );
+        cy.get("input#main-content").clear();
+        cy.get(".search-field .v-input__icon--append button").click({
+            force: true,
+        });
+        cy.get(".doc-type__toggle fieldset > div")
+            .eq(0)
+            .find("input")
+            .uncheck({ force: true });
+        cy.get("search-results__heading").should("not.exist");
+        cy.get(".subject__heading").should("not.exist");
+        cy.get(".search-results-count").should(
+            "have.text",
+            "1 - 2 of 2 documents"
+        );
+    });
+
     it("should make a successful request to the content-search endpoint", () => {
         cy.intercept("**/v3/content-search/?**").as("files");
         cy.viewport("macbook-15");
@@ -193,6 +250,7 @@ describe("Policy Repository", () => {
 
         cy.checkAccessibility();
     });
+
     it("should not display edit button for individual uploaded items if signed in and authorized to edit", () => {
         cy.getPolicyDocs({
             username: readerUsername,
@@ -201,11 +259,13 @@ describe("Policy Repository", () => {
         cy.get(".edit-button").should("not.exist");
         cy.checkAccessibility();
     });
+
     it("should display edit button for individual uploaded items if signed in and authorized to edit", () => {
         cy.getPolicyDocs({ username, password });
         cy.get(".edit-button").should("exist");
         cy.checkAccessibility();
     });
+
     it("should update the URL when a subject chip is clicked", () => {
         cy.intercept("**/v3/content-search/**", {
             fixture: "policy-docs.json",

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

@@ -35,11 +35,6 @@
         max-width: 100%;
     }
 
-    h2 {
-        font-family: "Open Sans", Helvetica, sans-serif;
-        margin: 0 0 1rem !important; // !important to override the default h2 margin due to vuetify defaults
-    }
-
     h3 {
         margin: 0;
         line-height: 24px;
@@ -59,6 +54,11 @@
             border-bottom: none;
         }
 
+        h2 {
+            margin: 0 0 1rem !important; // !important to override the default h2 margin due to vuetify defaults
+            font-family: "Open Sans", Helvetica, sans-serif;
+        }
+
         .sidebar-toggle__button {
             position: absolute;
             top: 0;
@@ -338,9 +338,18 @@
     }
 
     .doc__list {
+        h2 {
+            padding: 0 1rem;
+            margin: 0 0 0.75rem !important;
+        }
+
         .search-results-count {
             padding: 0 1rem;
             margin-bottom: 2rem;
+
+            .search-query__span {
+                font-weight: 700;
+            }
         }
 
         .doc-list__document {

solution/ui/regulations/eregs-vite/src/components/policy-repository/PolicyResults.vue

@@ -96,6 +96,14 @@ defineProps({
         type: Boolean,
         default: false,
     },
+    searchQuery: {
+        type: String,
+        default: "",
+    },
+    selectedSubjectParts: {
+        type: Array,
+        default: () => [],
+    },
 });
 
 const $route = useRoute();
@@ -119,14 +127,21 @@ const resultLinkClasses = (doc) => ({
 
 <template>
     <div class="doc__list">
+        <h2 v-if="searchQuery" class="search-results__heading">
+            Search Results
+        </h2>
         <div class="search-results-count">
-            <span v-if="results.length > 0">
-                Showing 1 -
-                {{ results.length }} of
-            </span>
-            {{ results.length }} document<span v-if="results.length != 1"
-                >s</span
-            >.
+            <span v-if="results.length > 0">1 - {{ results.length }} of</span>
+            {{ results.length }} <span v-if="searchQuery">result</span
+            ><span v-else>document</span>
+            <span v-if="results.length != 1">s</span>
+            <span v-if="searchQuery">
+                for
+                <span class="search-query__span">{{ searchQuery }}</span></span
+            >
+            <span v-if="searchQuery && selectedSubjectParts[0]">
+                within {{ selectedSubjectParts[1][0] }}</span
+            >
         </div>
         <ResultsItem
             v-for="doc in results"

solution/ui/regulations/eregs-vite/src/views/PolicyRepository.vue

@@ -395,7 +395,7 @@ getDocSubjects();
                     />
                     <template v-else>
                         <div
-                            v-if="selectedSubjectParts.length"
+                            v-if="selectedSubjectParts.length && !searchQuery"
                             class="subject__heading"
                         >
                             <SelectedSubjectHeading
@@ -416,6 +416,8 @@ getDocSubjects();
                                 :results="policyDocList.results"
                                 :parts-last-updated="partsLastUpdated.results"
                                 :has-editable-job-code="hasEditableJobCode"
+                                :search-query="searchQuery"
+                                :selected-subject-parts="selectedSubjectParts"
                             />
                         </template>
                     </template>