Sticky Headers on Create / Details / Edit screens

frontend/cypress/e2e/complaint-list.cy.ts

@@ -22,31 +22,6 @@ describe("Complaint List Functionality", () => {
         cy.get("#ers-tab").should("contain.text", "Enforcement");
       }
     });
-
-    it(
-      "Verifies the complaint tabs, filter and table header are sticky",
-      { scrollBehavior: false },
-      () => {
-        cy.visit("/");
-        cy.waitForSpinner();
-
-        cy.get(complaintTypes[index]).click({ force: true });
-
-        // remove the open filter
-        cy.get("#comp-status-filter").click({ force: true });
-        cy.get("#comp-zone-filter").click({ force: true });
-
-        //-- check to make sure there are enough rows to scroll
-        cy.get(".pagination").should("exist");
-
-        //scroll to the bottom of the page
-        cy.scrollTo("bottom");
-
-        cy.get(".fixed-nav-header").isInViewport();
-        cy.get(".fixed-filter-header").isInViewport();
-        cy.get(".fixed-table-header").isInViewport();
-      },
-    );
 
     it("Verifies that the complaint link styles are applied correctly", () => {
       cy.visit("/");

frontend/cypress/e2e/sticky-headers.cy.ts

@@ -0,0 +1,93 @@
+import COMPLAINT_TYPES from "../../src/app/types/app/complaint-types";
+
+/*
+Tests to verify complaint list specification functionality
+*/
+describe("Sticky Headers", () => {
+    const complaintTypes = ["#hwcr-tab", "#ers-tab"];
+
+    beforeEach(function () {
+      cy.viewport("macbook-16");
+      cy.kcLogout().kcLogin();
+    });
+
+    Cypress._.times(complaintTypes.length, (index) => {  
+      it(
+        "Verifies the complaint tabs, filter and table header are sticky",
+        { scrollBehavior: false },
+        () => {
+          cy.visit("/");
+          cy.waitForSpinner();
+
+          cy.get(complaintTypes[index]).click({ force: true });
+
+          // remove the open filter
+          cy.get("#comp-status-filter").click({ force: true });
+          cy.get("#comp-zone-filter").click({ force: true });
+
+          //-- check to make sure there are enough rows to scroll
+          cy.get(".pagination").should("exist");
+
+          //scroll to the bottom of the page
+          cy.scrollTo("bottom");
+
+          cy.get(".comp-header").isInViewport();
+          cy.get(".fixed-nav-header").isInViewport();
+          cy.get(".fixed-filter-header").isInViewport();
+          cy.get(".fixed-table-header").isInViewport();
+        },
+      );  
+    });
+
+    it(
+        "Verifies that the Create Header is sticky",
+        { scrollBehavior: false },
+        () => {
+          cy.visit("/");
+          cy.waitForSpinner();
+
+          cy.navigateToCreateScreen();
+
+          //scroll to the bottom of the page
+          cy.scrollTo("bottom");
+
+          cy.get(".comp-header").isInViewport();
+          cy.get(".comp-create-header").isInViewport();
+        },
+    );  
+
+    it(
+        "Verifies that the Details Header is sticky",
+        { scrollBehavior: false },
+        () => {
+            cy.visit("/");
+            cy.waitForSpinner();
+
+            cy.navigateToDetailsScreen(COMPLAINT_TYPES.HWCR, "23-000076");
+
+            //scroll to the bottom of the page
+            cy.scrollTo("bottom");
+
+            cy.get(".comp-header").isInViewport();
+            cy.get(".comp-details-header").isInViewport();
+        },
+    );
+
+    it(
+        "Verifies that the Edit Header is sticky",
+        { scrollBehavior: false },
+        () => {
+            cy.visit("/");
+            cy.waitForSpinner();
+
+            cy.navigateToEditScreen(COMPLAINT_TYPES.ERS, "23-006888");
+
+            //scroll to the bottom of the page
+            cy.scrollTo("bottom");
+
+            cy.get(".comp-header").isInViewport();
+            cy.get(".comp-details-header").isInViewport();
+        },
+    );  
+  });
+

frontend/cypress/support/commands.ts

@@ -240,11 +240,11 @@ Cypress.Commands.add("isInViewport", { prevSubject: true }, (subject) => {
   const bottom = Cypress.$(cy.state("window")).height();
   const rect = subject[0].getBoundingClientRect();
 
-  expect(rect.top).not.to.be.greaterThan(
+  expect(rect.top).not.to.be.least(
     bottom,
     `Expected element not to be below the visible scrolled area`,
   );
-  expect(rect.top).to.be.greaterThan(
+  expect(rect.top).to.be.least(
     0,
     `Expected element not to be above the visible scrolled area`,
   );

frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx

@@ -31,7 +31,6 @@ import {
 import { Officer } from "../../../../types/person/person";
 import { selectOfficers } from "../../../../store/reducers/officer";
 import { CreateComplaintHeader } from "./create-complaint-header";
-import { Button } from "react-bootstrap";
 import { CancelConfirm } from "../../../../types/modal/modal-types";
 import {
   createAllegationComplaint,
@@ -1564,26 +1563,6 @@ export const CreateComplaint: FC = () => {
           </div>
         </div>
       )}
-      <div className="comp-box-footer">
-        <div className="comp-box-footer-actions">
-          <Button
-            id="details_screen_cancel_edit_button_footer"
-            title="Cancel Create Complaint"
-            variant="outline-primary"
-            onClick={cancelButtonClick}
-          >
-            <span>Cancel</span>
-          </Button>
-          <Button
-            id="details_screen_cancel_save_button_footer"
-            title="Save Complaint"
-            variant="primary"
-            onClick={saveButtonClick}
-          >
-            <span>Save Changes</span>
-          </Button>
-        </div>
-      </div>
     </div>
   );
 };

frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx

@@ -59,7 +59,6 @@ import { ComplaintHeader } from "./complaint-header";
 import { CallDetails } from "./call-details";
 import { CallerInformation } from "./caller-information";
 import { SuspectWitnessDetails } from "./suspect-witness-details";
-import { Button } from "react-bootstrap";
 
 type ComplaintParams = {
   id: string;
@@ -1622,29 +1621,6 @@ export const ComplaintDetailsEdit: FC = () => {
           )}
         </>
       )}
-
-      {!readOnly && (
-        <div className="comp-box-footer">
-          <div className="comp-box-footer-actions">
-            <Button
-              id="details_screen_cancel_edit_button_footer"
-              title="Cancel Edit Complaint"
-              variant="outline-primary"
-              onClick={cancelButtonClick}
-            >
-              <span>Cancel</span>
-            </Button>
-            <Button
-              id="details_screen_cancel_save_button_footer"
-              title="Save Complaint"
-              variant="primary"
-              onClick={saveButtonClick}
-            >
-              <span>Save Changes</span>
-            </Button>
-          </div>
-        </div>
-      )}
     </div>
   );
 };