From 87ee87f7eec02239fd2b5c83c890efef0ad4b67b Mon Sep 17 00:00:00 2001
From: knguyenrise8 <159168836+knguyenrise8@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:54:22 -0600
Subject: [PATCH] fix(RV-447): Update fields (#469)

---
 frontend/e2e/utils/mock_data.ts               |  7 ++-
 frontend/src/components/ExtractUploadFile.tsx |  9 ++--
 frontend/src/components/Header.tsx            |  4 +-
 frontend/src/contexts/AnnotationContext.tsx   | 15 ++++--
 frontend/src/contexts/FilesContext.tsx        |  3 +-
 frontend/src/pages/SaveTemplate.test.tsx      | 13 ++++-
 frontend/src/pages/SaveTemplate.tsx           | 48 ++++++++++++++-----
 frontend/src/types/templates.ts               |  3 +-
 frontend/src/utils/constants.ts               |  3 --
 9 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/frontend/e2e/utils/mock_data.ts b/frontend/e2e/utils/mock_data.ts
index 61df7fd0..dcabe613 100644
--- a/frontend/e2e/utils/mock_data.ts
+++ b/frontend/e2e/utils/mock_data.ts
@@ -38,6 +38,8 @@ export const fakeTemplates = [
   {
     name: "covid",
     description: "covid",
+    condition: "covid",
+    facility: "texas",
     pages: [
       {
         fieldNames: [
@@ -96,6 +98,8 @@ export const fakeTemplates = [
   {
     name: "marge",
     description: "marge",
+    facility: 'texas',
+    condtion: 'covid',
     pages: [
       {
         fieldNames: [
@@ -186,7 +190,8 @@ export const fakeTemplates = [
   },
   {
     name: "template name",
-    description: "description",
+    condition: "condition",
+    facility: "texas",
     pages: [
       {
         fieldNames: [
diff --git a/frontend/src/components/ExtractUploadFile.tsx b/frontend/src/components/ExtractUploadFile.tsx
index 090dfa04..7084f614 100644
--- a/frontend/src/components/ExtractUploadFile.tsx
+++ b/frontend/src/components/ExtractUploadFile.tsx
@@ -29,7 +29,8 @@ interface IFilesObj {
 
 interface Template {
   name: string;
-  description: string;
+  condition: string;
+  facility: string;
   pages: {
     image: string;
     fieldNames: string[];
@@ -64,23 +65,25 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
     const sampleTemplates: Template[] = [
       {
         name: "Test Template COVID",
-        description: "This is the first sample template.",
         pages: [
           {
             image: "base64encodedimage1",
             fieldNames: ["patient_name", "patient_dob"],
           },
         ],
+        condition: "covid",
+        facility: "texas"
       },
       {
         name: "Test Template Syph",
-        description: "This is the second sample template.",
         pages: [
           {
             image: "base64encodedimage2",
             fieldNames: ["patient_name", "address"],
           },
         ],
+        condition: "covid",
+        facility: "texas"
       },
     ];
     setTemplates(sampleTemplates);
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 7c4ea1bf..09e42aa2 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -6,6 +6,7 @@ import "./Header.scss";
 interface UploadHeaderProps {
   title: string;
   isUpload?: boolean;
+  isDisabled?: boolean;
   onBack: () => void;
   onSubmit?: () => void;
 }
@@ -13,6 +14,7 @@ interface UploadHeaderProps {
 export const UploadHeader = ({
   title,
   isUpload,
+  isDisabled,
   onBack,
   onSubmit,
 }: UploadHeaderProps) => {
@@ -43,7 +45,7 @@ export const UploadHeader = ({
           </Button>
           {
             onSubmit && (
-              <Button disabled={isUpload} onClick={onSubmit} type="submit" base>
+              <Button disabled={isUpload || isDisabled} onClick={onSubmit} type="submit" base>
                 Submit
               </Button>
             )
diff --git a/frontend/src/contexts/AnnotationContext.tsx b/frontend/src/contexts/AnnotationContext.tsx
index b214b59a..8102ac8e 100644
--- a/frontend/src/contexts/AnnotationContext.tsx
+++ b/frontend/src/contexts/AnnotationContext.tsx
@@ -34,9 +34,11 @@ interface AnnotationContextType {
   setDrawnFields: React.Dispatch<React.SetStateAction<Set<string>>>;
   setShapes: React.Dispatch<React.SetStateAction<CustomShape[][]>>;
   name: string;
-  description: string;
+  condition: string;
+  facility: string;
   setName: (name: string) => void;
-  setDescription: (description: string) => void;
+  setCondition: (condition: string) => void;
+  setFacility: (facility: string) => void;
   index: number;
   setIndex: React.Dispatch<React.SetStateAction<number>>;
 }
@@ -72,7 +74,8 @@ export const AnnotationProvider = ({ children }: AnnotationProviderProps) => {
   ]);
   const [drawnFields, setDrawnFields] = useState<Set<string>>(new Set());
   const [name, setName] = useState<string>("");
-  const [description, setDescription] = useState<string>("");
+  const [condition, setCondition] = useState<string>("");
+  const [facility, setFacility] = useState<string>("");
   const [selectedField, setSelectedField] = useState<Field | null>(null);
   const [shapes, setShapes] = useState<CustomShape[][]>([]);
   const [index, setIndex] = useState<number>(0);
@@ -91,8 +94,10 @@ export const AnnotationProvider = ({ children }: AnnotationProviderProps) => {
         setFields,
         name,
         setName,
-        description,
-        setDescription,
+        condition,
+        setCondition,
+        facility,
+        setFacility,
         index,
         setIndex,
         drawnFields,
diff --git a/frontend/src/contexts/FilesContext.tsx b/frontend/src/contexts/FilesContext.tsx
index 32b70b2f..49cdebd9 100644
--- a/frontend/src/contexts/FilesContext.tsx
+++ b/frontend/src/contexts/FilesContext.tsx
@@ -29,7 +29,8 @@ export interface Page {
 
 export interface FileType {
   name: string;
-  description: string;
+  condition: string;
+  facility: string;
   pages: Page[];
 }
 
diff --git a/frontend/src/pages/SaveTemplate.test.tsx b/frontend/src/pages/SaveTemplate.test.tsx
index 384995dd..b86c4266 100644
--- a/frontend/src/pages/SaveTemplate.test.tsx
+++ b/frontend/src/pages/SaveTemplate.test.tsx
@@ -71,7 +71,10 @@ describe("SaveTemplate Component", () => {
       screen.getByTestId("segmentation-template-name-input"),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId("segmentation-template-description-input"),
+      screen.getByTestId("segmentation-template-facility-input"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("segmentation-template-condition-input"),
     ).toBeInTheDocument();
   });
 
@@ -103,6 +106,14 @@ describe("SaveTemplate Component", () => {
       </BrowserRouter>,
     );
 
+    const nameInput =   screen.getByTestId("segmentation-template-name-input");
+    const facilityInput = screen.getByTestId("segmentation-template-facility-input");
+    const conditionInput = screen.getByTestId("segmentation-template-condition-input");
+
+    fireEvent.change(nameInput, { target: { value: "Template 1" } });
+    fireEvent.change(facilityInput, { target: { value: "Facility 1" } });
+    fireEvent.change(conditionInput, { target: { value: "Condition 1" } });
+
     await act(async () => {
       fireEvent.click(screen.getByText(/submit/i));
     });
diff --git a/frontend/src/pages/SaveTemplate.tsx b/frontend/src/pages/SaveTemplate.tsx
index 5d641ba3..ece2ee22 100644
--- a/frontend/src/pages/SaveTemplate.tsx
+++ b/frontend/src/pages/SaveTemplate.tsx
@@ -14,11 +14,13 @@ export const SaveTemplate = () => {
   const navigate = useNavigate();
   const {
     fields,
-    setDescription,
     setName,
     name,
-    description,
+    condition,
+    facility,
     shapes,
+    setCondition,
+    setFacility,
     setShapes,
     setFields,
     setDrawnFields,
@@ -57,7 +59,7 @@ export const SaveTemplate = () => {
         };
       });
       if (pages.length !== images.length) {
-        images.forEach((_, idx) => {
+        images.forEach((_: unknown, idx: number) => {
           if (!tempFields[idx]) {
             pages.push({
               fieldNames: [],
@@ -74,7 +76,8 @@ export const SaveTemplate = () => {
       }
       const tempFile: FileType = {
         name,
-        description,
+        condition,
+        facility,
         pages: pages,
       };
 
@@ -100,6 +103,9 @@ export const SaveTemplate = () => {
     setFields([new Set(), new Set()]);
     setDrawnFields(new Set());
     setSelectedField(null);
+    setName('');
+    setFacility('');
+    setCondition('');
     reset();
     navigate("/");
   };
@@ -112,6 +118,7 @@ export const SaveTemplate = () => {
       <UploadHeader
         title="Save template"
         onBack={() => navigate("/new-template/annotate")}
+        isDisabled={name.length === 0 || facility.length === 0 || condition.length === 0}
         onSubmit={handleSubmit}
       />
       <Divider margin="0px" />
@@ -127,7 +134,7 @@ export const SaveTemplate = () => {
           <div className="display-flex flex-column flex-align-self-center">
             <div className="display-flex flex-column flex-align-start width-full">
               <Label htmlFor="segmentation-template-name">
-                Segmentation template name
+                Segmentation template name*
               </Label>
               <TextInput
                 id="segmentation-template-name"
@@ -141,16 +148,35 @@ export const SaveTemplate = () => {
           </div>
           <div className="display-flex flex-column flex-align-self-center">
             <div className="display-flex flex-column flex-align-start width-full">
-              <Label htmlFor="segmentation-template-description">
-                Segmentation template description
+              <Label htmlFor="segmentation-template-facility">
+                Facility*
               </Label>
               <TextInput
-                id="segmentation-template-description"
-                onChange={(e) => setDescription(e.target.value)}
+                id="segmentation-template-facility"
+                onChange={(e) => setFacility(e.target.value)}
+                value={facility}
+                required
                 className="bg-white"
-                name="segmentation-template-description"
+                name="segmentation-template-facility"
                 type="text"
-                data-testid="segmentation-template-description-input"
+                data-testid="segmentation-template-facility-input"
+              />
+            </div>
+          </div>
+          <div className="display-flex flex-column flex-align-self-center">
+            <div className="display-flex flex-column flex-align-start width-full">
+              <Label htmlFor="segmentation-template-condition">
+                Condition*
+              </Label>
+              <TextInput
+                id="segmentation-template-condition"
+                value={condition}
+                required
+                onChange={(e) => setCondition(e.target.value)}
+                className="bg-white"
+                name="segmentation-template-condition"
+                type="text"
+                data-testid="segmentation-template-condition-input"
               />
             </div>
           </div>
diff --git a/frontend/src/types/templates.ts b/frontend/src/types/templates.ts
index 41a56fd6..693ac7f8 100644
--- a/frontend/src/types/templates.ts
+++ b/frontend/src/types/templates.ts
@@ -5,7 +5,8 @@ import { Shape } from "react-image-label";
 export interface Template {
   id: string;
   name: string;
-  description: string;
+  condition: string;
+  facility: string;
   labName: string;
   pages: Page[];
   status: TemplateStatus;
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 1583a04f..73b71638 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -40,7 +40,6 @@ export const fakeData = {
 export const fakeTemplates: Array<any> = [
   {
     name: "covid",
-    description: "covid",
     pages: [
       {
         fieldNames: [
@@ -98,7 +97,6 @@ export const fakeTemplates: Array<any> = [
   },
   {
     name: "marge",
-    description: "marge",
     pages: [
       {
         fieldNames: [
@@ -189,7 +187,6 @@ export const fakeTemplates: Array<any> = [
   },
   {
     name: "template name",
-    description: "description",
     pages: [
       {
         fieldNames: [