EREGCSC-2346 -- Internal Docs in Reader Sidebar (#1107)

* feat: right sidebar login banner

* test: update doctype label snapshot test assertion to use appropriate props

* feat: conditionally show public DocTypelabel

* Enable debug mode

* Fix 500 error when repo categories are present

* Remove debug = true

* feat: api method and container component setup

* feat: further table setting; get categories

* fix: inherit from correct mixin for section and subpart queries

* feat: get selected section and fetch on hash change

* feat: add mitt eventbus to replace deprecated vue 2.x root methods

* feat: clear eventbus listeners before destroy/unmount

* feat: fetch and watch logic

* feat: display crude item list

* feat: transform and load props in correct formats

* feat: getFileTypeButton moved to utils

* feat: logic cleanup

* feat: tweaks to bettery style doc lists

* feat: iron out styling

* chore: refactor existing categories method

for internal and external documents

* chore: remove comments

* emit and listen to clear sections event

* chore: formatting

* feat: add more space to bottom of right sidebar

* fix: tweak show if empty logic and category description logic

* test: update API test suite

* feat: tweak login call to action

* test: add unit tests for formatResourceCategories utility method

* chore: improve jsdoc documentation

* test: add e2e test coverage

* test: update contains assertion to take env into account

* test: remove potentially flaky assertions

* feat: remove unneeded styles that introduced side effect

---------

Co-authored-by: Caleb Godwin <[email protected]>

solution/backend/content_search/views.py

@@ -18,13 +18,13 @@
 from common.mixins import PAGINATION_PARAMS, OptionalPaginationMixin
 from file_manager.models import AbstractRepoCategory, DocumentType, Subject
 from resources.models import AbstractCategory, AbstractLocation
-from resources.views.mixins import LocationExplorerViewSetMixin
+from resources.views.mixins import LocationFiltererMixin
 
 from .models import ContentIndex
 from .serializers import ContentListSerializer, ContentSearchSerializer, ContentUpdateSerializer
 
 
-class ContentSearchViewset(LocationExplorerViewSetMixin, OptionalPaginationMixin, viewsets.ReadOnlyModelViewSet):
+class ContentSearchViewset(LocationFiltererMixin, OptionalPaginationMixin, viewsets.ReadOnlyModelViewSet):
     model = ContentIndex
     queryset = ContentIndex.objects.all()
     paginate_by_default = True
@@ -52,7 +52,7 @@ class ContentSearchViewset(LocationExplorerViewSetMixin, OptionalPaginationMixin
                     OpenApiQueryParameter("resource-type",
                                           "Limit results to only resources found within this resource type.  Internal, External,"
                                           "all. Use \"&resource-type=external\"", str, ''),
-                    ] + LocationExplorerViewSetMixin.PARAMETERS + OptionalPaginationMixin.PARAMETERS + PAGINATION_PARAMS
+                    ] + LocationFiltererMixin.PARAMETERS + OptionalPaginationMixin.PARAMETERS + PAGINATION_PARAMS
     )
     def list(self, request):
         locations = self.request.GET.getlist("locations")

solution/backend/regulations/templates/regulations/partials/login_sidebar_banner.html

@@ -0,0 +1,11 @@
+<div class="div__login-sidebar">
+    {% if user.is_authenticated %}
+        Resources you can access include policy documents internal to CMCS.
+    {% else %}
+        CMCS staff participating in the Policy Repository pilot can
+        <a id="loginSidebar" href="{% url 'login' %}?next={{ request.path }}"
+            >sign in</a
+        >
+        to see internal resources.
+    {% endif %}
+</div>

solution/backend/regulations/templates/regulations/partials/sidebar_right.html

@@ -1,23 +1,49 @@
 {% load string_formatters %}
 
 {{ categories|json_script:"categories" }}
+{{ node_list|json_script:"node_list" }}
 
 <section id="right-sidebar" data-cache-key="sidebar" data-cache-value="{{label_id}}">
     {% include "regulations/partials/view-button.html" %}
     <print-btn btn_type="labeled-icon"></print-btn>
     <hr />
 
     {% if node_list %}
+        <supplemental-content
+            api-url="{{ API_BASE }}"
+            title="{{ title }}"
+            part="{{ reg_part }}"
+            resources-url="{% url 'resources' %}"
+            :resource-display=true
+            :sections="{{ node_list.sections }}"
+            :subparts="{{ node_list.subparts }}"
+        >
+            <template #login-banner>
+                {% include "regulations/partials/login_sidebar_banner.html" %}
+            </template>
+            {% if user.is_authenticated %}
+                <template #public-label>
+                    <div class="label__container">
+                        <doc-type-label icon-type="external" doc-type="Public" />
+                    </div>
+                </template>
+            {% endif %}
+        </supplemental-content>
+        {% if user.is_authenticated %}
+            <div class="authed__container">
+                <hr />
+                <div class="label__container label__container--internal">
+                    <doc-type-label icon-type="internal" doc-type="Internal" />
+                </div>
 
-    <supplemental-content
-        api-url="{{ API_BASE }}"
-        title="{{ title }}"
-        part="{{ reg_part }}"
-        resources-url="{% url 'resources' %}"
-        :resource-display=true
-        :sections="{{ node_list.sections }}"
-        :subparts="{{ node_list.subparts }}"
-    ></supplemental-content>
+                <internal-docs-container
+                    api-url="{{ API_BASE }}"
+                    title="{{ title }}"
+                    part="{{ reg_part }}"
+                ></internal-docs-container>
+            </div>
+            <div class="login__spacer"></div>
+        {% endif %}
     {% endif %}
 
 </section>

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

@@ -24,8 +24,10 @@ const SPECIAL_CHARACTERS = [
 
 const API_ENDPOINTS_V3 = [
     `/v3/acts`,
+    `/v3/content-search`,
     `/v3/ecfr_parser_result/${TITLE}`,
-    `v3/file-manager/subjects`,
+    `/v3/file-manager/categories`,
+    `/v3/file-manager/subjects`,
     `/v3/parser_config`,
     `/v3/resources/`,
     `/v3/resources/categories`,

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

@@ -1,3 +1,6 @@
+const username = Cypress.env("TEST_USERNAME");
+const password = Cypress.env("TEST_PASSWORD");
+
 describe("Part View", () => {
     beforeEach(() => {
         cy.clearIndexedDB();
@@ -63,6 +66,72 @@ describe("Part View", () => {
         });
     });
 
+    it("has a login call to action in the right sidebar of a subpart view", () => {
+        cy.viewport("macbook-15");
+        cy.visit("/42/433/51");
+
+        cy.get(".div__login-sidebar").contains(
+            "CMCS staff participating in the Policy Repository pilot can sign in to see internal resources."
+        );
+
+        cy.get("a#loginSidebar")
+            .should("have.attr", "href")
+            .and("include", "/admin/login/?next=")
+            .and("include", "/42/433/Subpart-B/");
+    });
+
+    it("has a login confirmation banner and internal documents in the right sidebar of a subpart view when logged in", () => {
+        cy.intercept("**/v3/resources/?&locations=42.431.A**").as("resources");
+        cy.intercept("**/v3/file-manager/categories", {
+            fixture: "categories-internal.json",
+        }).as("internal-categories");
+        cy.intercept(
+            "**/v3/content-search/?resource-type=internal&locations=42.431.A**",
+            {
+                fixture: "42.431.internal.json",
+            }
+        ).as("internal431");
+        cy.viewport("macbook-15");
+        cy.eregsLogin({ username, password });
+        cy.visit("/42/431/10");
+
+        cy.get(".div__login-sidebar").contains(
+            "Resources you can access include policy documents internal to CMCS."
+        );
+        cy.get("#loginIndicator").should("be.visible");
+        cy.get("a#loginSidebar").should("not.exist");
+
+        cy.wait("@resources").then(() => {
+            cy.get(".right-sidebar").scrollTo("bottom");
+            cy.get(`button[data-test=TestCat]`).click({
+                force: true,
+            });
+            cy.wait(250);
+            cy.get(".right-sidebar").scrollTo("bottom");
+            cy.get(`button[data-test=TestSubCat]`).click({
+                force: true,
+            });
+            cy.wait(250);
+            cy.get(".right-sidebar").scrollTo("bottom");
+            cy.get(
+                ".internal-docs__container div[data-test=TestSubCat] .supplemental-content"
+            )
+                .first()
+                .get(".supplemental-content-date")
+                .contains("August 30, 2023");
+            cy.get(
+                ".internal-docs__container div[data-test=TestSubCat] .supplemental-content"
+            )
+                .first()
+                .get(".supplemental-content-description")
+                .contains("42 431 test");
+            cy.get(".show-more-button")
+                .contains("+ Show More (6)")
+                .click({ force: true })
+                .contains("- Show Less (6)");
+        });
+    });
+
     it("loads a subpart view in a mobile width", () => {
         cy.viewport("iphone-x");
         cy.visit("/42/433/");
@@ -176,7 +245,7 @@ describe("Part View", () => {
         // it recently broke because the latest year changed from 2021 to 2022
         // so I'm commenting it out for now until we can figure out a better way
         //cy.get(
-            //"#433-8 .reg-history-link-container .tooltip.clicked .gov-info-links a:nth-child(1)"
+        //"#433-8 .reg-history-link-container .tooltip.clicked .gov-info-links a:nth-child(1)"
         //).contains("2021");
         cy.get(
             "#433-8 .reg-history-link-container .tooltip.clicked .gov-info-links a:nth-child(1)"