Add LOINC description fields on add/edit device page (#7795)

* add adtional values to supportedDiseasesFormData type * add input fields to front end * update input field * set values and update graphQL * update tests * update snapshots * Add separator and styling * Remove @ts-ignore and type correctly --------- Co-authored-by: elisa lee <[email protected]>
CDCgov · Jun 26, 2024 · 8b2b70f · 8b2b70f
1 parent 16eff5e
commit 8b2b70f
Show file tree

Hide file tree

Showing 14 changed files with 820 additions and 584 deletions.
diff --git a/frontend/src/app/Settings/Users/UserInfoTab.scss b/frontend/src/app/Settings/Users/UserInfoTab.scss
@@ -25,9 +25,3 @@
   color: #1b1b1b;
   margin-top: 0;
 }
-
-.userinfo-divider {
-  border-bottom: 1px solid #dcdee0;
-  margin-right: -18px;
-  margin-left: -32px;
-}
diff --git a/frontend/src/app/Settings/Users/UserInfoTab.tsx b/frontend/src/app/Settings/Users/UserInfoTab.tsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 
 import Button from "../../commonComponents/Button/Button";
 import { User } from "../../../generated/graphql";
+import SeparatorLine from "../../supportAdmin/Components/SeparatorLine";
 
 import { SettingsUser } from "./ManageUsersContainer";
 import DeleteUserModal from "./DeleteUserModal";
@@ -95,7 +96,7 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
             disabled={isUpdating || !isUserActive}
           />
         </div>
-        <div className="userinfo-divider"></div>
+        <SeparatorLine classNames={"margin-left-neg-4 margin-right-neg-2"} />
         <h3 className="user-controls-header">User controls</h3>
         <div
           className={classnames(

diff --git a/frontend/src/app/Settings/Users/__snapshots__/ManageUsersContainer.test.tsx.snap b/frontend/src/app/Settings/Users/__snapshots__/ManageUsersContainer.test.tsx.snap
@@ -325,7 +325,7 @@ exports[`ManageUsersContainer loads the component and displays users successfull
               </button>
             </div>
             <div
-              class="userinfo-divider"
+              class="sr-separator-line margin-left-neg-4 margin-right-neg-2"
             />
             <h3
               class="user-controls-header"

diff --git a/frontend/src/app/supportAdmin/Components/SeparatorLine.scss b/frontend/src/app/supportAdmin/Components/SeparatorLine.scss
@@ -0,0 +1,3 @@
+.sr-separator-line {
+  border-bottom: 1px solid #dcdee0;
+}
diff --git a/frontend/src/app/supportAdmin/Components/SeparatorLine.tsx b/frontend/src/app/supportAdmin/Components/SeparatorLine.tsx
@@ -0,0 +1,12 @@
+import "./SeparatorLine.scss";
+import React from "react";
+import classnames from "classnames";
+
+interface Props {
+  classNames?: string;
+}
+const SeparatorLine: React.FC<Props> = ({ classNames }) => {
+  return <div className={classnames("sr-separator-line", classNames)} />;
+};
+
+export default SeparatorLine;
diff --git a/frontend/src/app/supportAdmin/DeviceType/DeviceForm.test.tsx b/frontend/src/app/supportAdmin/DeviceType/DeviceForm.test.tsx
@@ -65,6 +65,8 @@ describe("create new device", () => {
     await user.selectOptions(screen.getByLabelText("Disease *"), "COVID-19");
     await addValue(user, "Test performed *", "1920-12");
     await addValue(user, "Test ordered *", "2102-91");
+    await addValue(user, "Test Ordered Loinc Long Name", "Test Value");
+    await addValue(user, "Test Performed Loinc Long Name", "Test Value II");
     await waitFor(() =>
       expect(
         screen.queryByText("This is a required field")
@@ -91,8 +93,15 @@ describe("create new device", () => {
         screen.getByLabelText("Equipment Uid"),
         "equipmentUid321"
       );
-
       await user.type(screen.getByLabelText("Uid Type"), "equipmentUidType123");
+      await user.type(
+        screen.getByLabelText("Test Performed Loinc Long Name"),
+        "longest loinc"
+      );
+      await user.type(
+        screen.getByLabelText("Test Ordered Loinc Long Name"),
+        "longest loinc"
+      );
     };
 
     it("enables the save button", async () => {
@@ -122,6 +131,8 @@ describe("create new device", () => {
               equipmentUid: "equipmentUid321",
               equipmentUidType: "equipmentUidType123",
               testOrderedLoincCode: "2102-91",
+              testOrderedLoincLongName: "longest loinc",
+              testPerformedLoincLongName: "longest loinc",
             },
           ],
         })
@@ -447,6 +458,16 @@ describe("update existing devices", () => {
           "equipmentUidType123"
         );
 
+        await user.type(
+          screen.getAllByLabelText("Test Ordered Loinc Long Name")[1],
+          "longLoinc123"
+        );
+
+        await user.type(
+          screen.getAllByLabelText("Test Performed Loinc Long Name")[1],
+          "longLoinc123"
+        );
+
         await user.click(screen.getByText("Save changes"));
 
         await waitFor(() =>
@@ -473,6 +494,8 @@ describe("update existing devices", () => {
                 equipmentUid: "equipmentUid321",
                 equipmentUidType: "equipmentUidType123",
                 testkitNameId: "testkitNameId123",
+                testOrderedLoincLongName: "longLoinc123",
+                testPerformedLoincLongName: "longLoinc123",
               },
             ],
           })

diff --git a/frontend/src/app/supportAdmin/DeviceType/DeviceForm.tsx b/frontend/src/app/supportAdmin/DeviceType/DeviceForm.tsx
@@ -19,6 +19,8 @@ export type SupportedDiseasesFormData = {
   testPerformedLoincCode: string;
   testOrderedLoincCode?: string;
   testkitNameId?: string;
+  testOrderedLoincLongName?: string;
+  testPerformedLoincLongName?: string;
 };
 
 export type DeviceFormData = {
@@ -81,30 +83,34 @@ const DeviceForm = (props: Props) => {
       name: deviceData.name,
       supportedDiseaseTestPerformed: deviceData.supportedDiseases.map(
         (supportedDisease: SupportedDiseasesFormData) => {
-          const convertedSupportedDisease = {
+          const convertedSupportedDisease: SupportedDiseasesFormData = {
             supportedDisease: supportedDisease.supportedDisease,
             testPerformedLoincCode: supportedDisease.testPerformedLoincCode,
           };
           if (supportedDisease.equipmentUid) {
-            // @ts-ignore
             convertedSupportedDisease["equipmentUid"] =
               supportedDisease.equipmentUid;
           }
           if (supportedDisease.equipmentUidType) {
-            // @ts-ignore
             convertedSupportedDisease["equipmentUidType"] =
               supportedDisease.equipmentUidType;
           }
           if (supportedDisease.testkitNameId) {
-            // @ts-ignore
             convertedSupportedDisease["testkitNameId"] =
               supportedDisease.testkitNameId;
           }
           if (supportedDisease.testOrderedLoincCode) {
-            // @ts-ignore
             convertedSupportedDisease["testOrderedLoincCode"] =
               supportedDisease.testOrderedLoincCode;
           }
+          if (supportedDisease.testOrderedLoincLongName) {
+            convertedSupportedDisease["testOrderedLoincLongName"] =
+              supportedDisease.testOrderedLoincLongName;
+          }
+          if (supportedDisease.testPerformedLoincLongName) {
+            convertedSupportedDisease["testPerformedLoincLongName"] =
+              supportedDisease.testPerformedLoincLongName;
+          }
           return convertedSupportedDisease;
         }
       ),
@@ -170,6 +176,10 @@ const DeviceForm = (props: Props) => {
                 equipmentUid: diseaseTestPerformed.equipmentUid,
                 equipmentUidType: diseaseTestPerformed.equipmentUidType,
                 testOrderedLoincCode: diseaseTestPerformed.testOrderedLoincCode,
+                testPerformedLoincLongName:
+                  diseaseTestPerformed.testPerformedLoincLongName,
+                testOrderedLoincLongName:
+                  diseaseTestPerformed.testOrderedLoincLongName,
               })
             ),
         }