Bob/6117 reorg support menu (#6185)

* change organization of homepage * changes from laura * update tests * missed one * one more * pull page titles into a common file * remove bad import * codegen? * acctually commit this time * lint * one last snapshot upgrade * remove list * replace one more string in the e2e's * one more snapshot * make imports typescript imports * switch back to the strings * hopefully one last string * final tweaks * get tests working * missed one more string * switch facility titles back and use ampersand * snapshot update
CDCgov · Jul 27, 2023 · ca44471 · ca44471
1 parent b7c15f7
commit ca44471
Show file tree

Hide file tree

Showing 16 changed files with 102 additions and 40 deletions.
diff --git a/cypress/e2e/01-organization_sign_up.cy.js b/cypress/e2e/01-organization_sign_up.cy.js
@@ -46,7 +46,7 @@ describe("Organization sign up",() => {
     cy.injectSRAxe();
     cy.checkAccessibility();
 
-    cy.contains("Identity verification").click();
+    cy.contains("Verify/edit organization identity").click();
     cy.get("[data-cy=pending-orgs-title]").should("be.visible");
 
     cy.contains("td", `${organization.name}`);
@@ -65,7 +65,7 @@ describe("Organization sign up",() => {
   it("spoofs into the org", () => {
     cy.visit("/admin");
 
-    cy.contains("Organization data").click();
+    cy.contains("Access organization account").click();
     cy.get("[data-testid='combo-box-input']").clear();
     cy.get("[data-testid='combo-box-input']").type(
       `${organization.name}{enter}`

diff --git a/cypress/e2e/03-add_devices.cy.js b/cypress/e2e/03-add_devices.cy.js
@@ -1,7 +1,6 @@
 import { generateCovidOnlyDevice, generateMultiplexDevice, loginHooks } from "../support/e2e";
 import {graphqlURL} from "../utils/request-utils";
 import {aliasGraphqlOperations} from "../utils/graphql-test-utils";
-
 const covidOnlyDevice = generateCovidOnlyDevice();
 const multiplexDevice = generateMultiplexDevice();
 
@@ -25,7 +24,7 @@ describe("Adding covid only and multiplex devices", () => {
       cy.visit("/admin/create-device-type");
       cy.wait("@getSpecimenTypes");
       cy.wait("@getSupportedDiseases");
-      cy.contains("Device type");
+      cy.contains("Add new device");
       cy.contains("Save changes").should("be.not.enabled");
       cy.injectSRAxe();
       cy.checkAccessibility();

diff --git a/frontend/src/app/supportAdmin/AddOrganizationAdmin/AddOrganizationAdminForm.tsx b/frontend/src/app/supportAdmin/AddOrganizationAdmin/AddOrganizationAdminForm.tsx
@@ -6,6 +6,7 @@ import RequiredMessage from "../../commonComponents/RequiredMessage";
 import OrganizationComboDropDown, {
   OrganizationOption,
 } from "../Components/OrganizationComboDropdown";
+import { addOrgAdminPageTitle } from "../pageTitles";
 
 import FacilityAdmin from "./FacilityAdmin";
 
@@ -64,7 +65,7 @@ const AddOrganizationAdminForm = ({
           <div className="prime-container card-container">
             <div className="usa-card__header">
               <div>
-                <h2 className="font-heading-lg">Add organization admin</h2>
+                <h2 className="font-heading-lg">{addOrgAdminPageTitle}</h2>
                 <RequiredMessage />
               </div>
               <div

diff --git a/...tend/src/app/supportAdmin/AddOrganizationAdmin/AddOrganizationAdminFormContainer.test.tsx b/...tend/src/app/supportAdmin/AddOrganizationAdmin/AddOrganizationAdminFormContainer.test.tsx
@@ -15,6 +15,7 @@ import {
   Role,
 } from "../../../generated/graphql";
 import * as srToast from "../../utils/srToast";
+import { addOrgAdminPageTitle } from "../pageTitles";
 
 import AddOrganizationAdminFormContainer from "./AddOrganizationAdminFormContainer";
 
@@ -96,7 +97,7 @@ function renderView() {
 
 const waitForOrgLoadReturnTitle = async () => {
   return await waitFor(() => {
-    return screen.getByText("Add organization admin", { exact: false });
+    return screen.getByText(addOrgAdminPageTitle, { exact: false });
   });
 };
 

diff --git a/frontend/src/app/supportAdmin/AddOrganizationAdmin/AddOrganizationAdminFormContainer.tsx b/frontend/src/app/supportAdmin/AddOrganizationAdmin/AddOrganizationAdminFormContainer.tsx
@@ -10,11 +10,12 @@ import {
 } from "../../../generated/graphql";
 import { useDocumentTitle } from "../../utils/hooks";
 import { useSelectedFacility } from "../../facilitySelect/useSelectedFacility";
+import { addOrgAdminPageTitle } from "../pageTitles";
 
 import AddOrganizationAdminForm from "./AddOrganizationAdminForm";
 
 const AddOrganizationAdminFormContainer = () => {
-  useDocumentTitle("Add organization admin");
+  useDocumentTitle(addOrgAdminPageTitle);
   const [activeFacility] = useSelectedFacility();
   const [submitted, setSubmitted] = useState(false);
   const { data, loading, error } = useGetOrganizationsQuery({

diff --git a/frontend/src/app/supportAdmin/DeviceType/DeviceTypeFormContainer.tsx b/frontend/src/app/supportAdmin/DeviceType/DeviceTypeFormContainer.tsx
@@ -12,11 +12,12 @@ import { showError, showSuccess } from "../../utils/srToast";
 import { LoadingCard } from "../../commonComponents/LoadingCard/LoadingCard";
 import { useSelectedFacility } from "../../facilitySelect/useSelectedFacility";
 import { useDocumentTitle } from "../../utils/hooks";
+import { addNewDevicePageTitle } from "../pageTitles";
 
 import DeviceForm from "./DeviceForm";
 
 const DeviceTypeFormContainer = () => {
-  useDocumentTitle("Device type");
+  useDocumentTitle(addNewDevicePageTitle);
 
   const [submitted, setSubmitted] = useState(false);
   const [activeFacility] = useSelectedFacility();
@@ -70,7 +71,7 @@ const DeviceTypeFormContainer = () => {
     );
     return (
       <DeviceForm
-        formTitle="Device type"
+        formTitle={addNewDevicePageTitle}
         saveDeviceType={saveDeviceType}
         swabOptions={swabOptions}
         supportedDiseaseOptions={supportedDiseaseOptions}

diff --git a/frontend/src/app/supportAdmin/DeviceType/ManageDeviceTypeFormContainer.test.tsx b/frontend/src/app/supportAdmin/DeviceType/ManageDeviceTypeFormContainer.test.tsx
@@ -4,6 +4,7 @@ import selectEvent from "react-select-event";
 
 import { DeviceType, SpecimenType } from "../../../generated/graphql";
 import SRToastContainer from "../../commonComponents/SRToastContainer";
+import { editDevicePageTitle } from "../pageTitles";
 
 import ManageDeviceTypeFormContainer from "./ManageDeviceTypeFormContainer";
 import mockSupportedDiseaseTestPerformedCovid from "./mocks/mockSupportedDiseaseTestPerformedCovid";
@@ -150,7 +151,7 @@ describe("ManageDeviceTypeFormContainer", () => {
   });
 
   it("should show the device type form", async () => {
-    expect(await screen.findByText("Manage devices")).toBeInTheDocument();
+    expect(await screen.findByText(editDevicePageTitle)).toBeInTheDocument();
   });
 
   it("should update the selected device", async () => {

diff --git a/frontend/src/app/supportAdmin/DeviceType/ManageDeviceTypeFormContainer.tsx b/frontend/src/app/supportAdmin/DeviceType/ManageDeviceTypeFormContainer.tsx
@@ -13,11 +13,12 @@ import { LoadingCard } from "../../commonComponents/LoadingCard/LoadingCard";
 import { showError, showSuccess } from "../../utils/srToast";
 import { useSelectedFacility } from "../../facilitySelect/useSelectedFacility";
 import { useDocumentTitle } from "../../utils/hooks";
+import { editDevicePageTitle } from "../pageTitles";
 
 import DeviceForm from "./DeviceForm";
 
 const ManageDeviceTypeFormContainer = () => {
-  useDocumentTitle("Manage devices");
+  useDocumentTitle(editDevicePageTitle);
 
   const [submitted, setSubmitted] = useState(false);
   const [activeFacility] = useSelectedFacility();
@@ -86,7 +87,7 @@ const ManageDeviceTypeFormContainer = () => {
 
     return (
       <DeviceForm
-        formTitle="Manage devices"
+        formTitle={editDevicePageTitle}
         saveDeviceType={updateDevice}
         swabOptions={swabOptions}
         supportedDiseaseOptions={supportedDiseaseOptions}

diff --git a/frontend/src/app/supportAdmin/DeviceType/__snapshots__/DeviceTypeFormContainer.test.tsx.snap b/frontend/src/app/supportAdmin/DeviceType/__snapshots__/DeviceTypeFormContainer.test.tsx.snap
@@ -23,7 +23,7 @@ Object {
                 <h1
                   class="font-heading-lg margin-top-0 margin-bottom-0"
                 >
-                  Device type
+                  Add new device
                 </h1>
                 <div
                   style="display: flex; justify-content: center; align-items: center;"
@@ -540,7 +540,7 @@ Object {
               <h1
                 class="font-heading-lg margin-top-0 margin-bottom-0"
               >
-                Device type
+                Add new device
               </h1>
               <div
                 style="display: flex; justify-content: center; align-items: center;"

diff --git a/...src/app/supportAdmin/DeviceType/__snapshots__/ManageDeviceTypeFormContainer.test.tsx.snap b/...src/app/supportAdmin/DeviceType/__snapshots__/ManageDeviceTypeFormContainer.test.tsx.snap
@@ -23,7 +23,7 @@ Object {
                 <h1
                   class="font-heading-lg margin-top-0 margin-bottom-0"
                 >
-                  Manage devices
+                  Edit existing device
                 </h1>
                 <div
                   style="display: flex; justify-content: center; align-items: center;"
@@ -746,7 +746,7 @@ Object {
               <h1
                 class="font-heading-lg margin-top-0 margin-bottom-0"
               >
-                Manage devices
+                Edit existing device
               </h1>
               <div
                 style="display: flex; justify-content: center; align-items: center;"

diff --git a/frontend/src/app/supportAdmin/PendingOrganizations/PendingOrganizations.tsx b/frontend/src/app/supportAdmin/PendingOrganizations/PendingOrganizations.tsx
@@ -9,6 +9,7 @@ import {
 } from "../../../generated/graphql";
 import { showSuccess } from "../../utils/srToast";
 import { useDocumentTitle } from "../../utils/hooks";
+import { identityVerificationPageTitle } from "../pageTitles";
 
 import {
   PendingOrganizationFormValues,
@@ -31,15 +32,14 @@ interface Props {
 }
 
 const phoneUtil = PhoneNumberUtil.getInstance();
-
 const PendingOrganizations = ({
   organizations,
   submitIdentityVerified,
   submitDeletion,
   loading,
   refetch,
 }: Props) => {
-  useDocumentTitle("Edit or verify organization identity");
+  useDocumentTitle(identityVerificationPageTitle);
 
   const [orgToVerify, setOrgToVerify] = useState<PendingOrganization | null>(
     null
@@ -243,7 +243,7 @@ const PendingOrganizations = ({
                 data-cy="pending-orgs-title"
                 className="font-heading-lg margin-top-0 margin-bottom-0"
               >
-                Edit or verify organization identity
+                {identityVerificationPageTitle}
               </h1>
             </div>
             <div className="usa-card__body">

diff --git a/frontend/src/app/supportAdmin/SupportAdmin.tsx b/frontend/src/app/supportAdmin/SupportAdmin.tsx
@@ -3,6 +3,17 @@ import { useFeature } from "flagged";
 import { LinkWithQuery } from "../commonComponents/LinkWithQuery";
 import { useDocumentTitle } from "../utils/hooks";
 
+import {
+  addNewDevicePageTitle,
+  addOrgAdminPageTitle,
+  devicesColumnTitle,
+  editDevicePageTitle,
+  identityVerificationPageTitle,
+  orgAccessPageTitle,
+  orgFacilityColumnTitle,
+  usersAndPatientsColumnTitle,
+} from "./pageTitles";
+
 type CategoryMenuProps = {
   heading: string;
   children: React.ReactNode;
@@ -36,35 +47,38 @@ const SupportAdmin = () => {
             </div>
             <div className="usa-card__body">
               <div className="grid-row grid-gap">
-                <CategoryMenu heading="Organization">
+                <CategoryMenu heading={orgFacilityColumnTitle}>
                   <li>
                     <LinkWithQuery to={`/admin/pending-organizations`}>
-                      Identity verification
+                      {identityVerificationPageTitle}
                     </LinkWithQuery>
                   </li>
                   <li>
                     <LinkWithQuery to="/admin/add-organization-admin">
-                      Add organization admin
+                      {addOrgAdminPageTitle}
                     </LinkWithQuery>
                   </li>
                   <li>
                     <LinkWithQuery to="/admin/tenant-data-access">
-                      Organization data
+                      {orgAccessPageTitle}
                     </LinkWithQuery>
                   </li>
                 </CategoryMenu>
-                <CategoryMenu heading="Test Devices">
+                <CategoryMenu heading={devicesColumnTitle}>
                   <li>
                     <LinkWithQuery to="/admin/create-device-type">
-                      Add a new testing device
+                      {addNewDevicePageTitle}
                     </LinkWithQuery>
                   </li>
                   <li>
                     <LinkWithQuery to="/admin/manage-devices">
-                      Edit existing testing device
+                      {editDevicePageTitle}
                     </LinkWithQuery>
                   </li>
                 </CategoryMenu>
+                <CategoryMenu heading={usersAndPatientsColumnTitle}>
+                  <li></li>
+                </CategoryMenu>
                 {hivEnabled && (
                   <CategoryMenu heading="Beta">
                     <li>

diff --git a/frontend/src/app/supportAdmin/TenantDataAccess/TenantDataAccessForm.tsx b/frontend/src/app/supportAdmin/TenantDataAccess/TenantDataAccessForm.tsx
@@ -8,6 +8,7 @@ import OrganizationComboDropDown, {
   useOrganizationDropDownValidation,
   OrganizationOption,
 } from "../Components/OrganizationComboDropdown";
+import { orgAccessPageTitle } from "../pageTitles";
 
 const sortOrganizationOptions = (organizationOptions: OrganizationOption[]) =>
   Object.values(organizationOptions).sort((a, b) => {
@@ -92,7 +93,7 @@ const TenantDataAccessForm: React.FC<Props> = (props) => {
           <div className="prime-container card-container">
             <div className="usa-card__header">
               <div>
-                <h1 className="font-heading-lg">Organization Data Access</h1>
+                <h1 className="font-heading-lg">{orgAccessPageTitle}</h1>
                 <p className="text-base">
                   This page allows you to reproduce a specific user's issues by
                   accessing their account. Access automatically expires after an

diff --git a/frontend/src/app/supportAdmin/TenantDataAccess/TenantDataAccessFormContainer.tsx b/frontend/src/app/supportAdmin/TenantDataAccess/TenantDataAccessFormContainer.tsx
@@ -9,11 +9,12 @@ import {
 } from "../../../generated/graphql";
 import { getAppInsights } from "../../TelemetryService";
 import { useDocumentTitle } from "../../utils/hooks";
+import { orgAccessPageTitle } from "../pageTitles";
 
 import TenantDataAccessForm from "./TenantDataAccessForm";
 
 const TenantDataAccessFormContainer = () => {
-  useDocumentTitle("Organization data access");
+  useDocumentTitle(orgAccessPageTitle);
 
   const [submitted, setSubmitted] = useState(false);
   const { data, loading, error } = useGetOrganizationsQuery({