fix(RV-447): Update fields

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: [

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);

frontend/src/components/Header.tsx

@@ -6,13 +6,15 @@ import "./Header.scss";
 interface UploadHeaderProps {
   title: string;
   isUpload?: boolean;
+  isDisabled?: boolean;
   onBack: () => void;
   onSubmit?: () => void;
 }
 
 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>
             )

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,

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[];
 }
 

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));
     });

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>

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;

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: [