chore: refactoring frontend forms

chore: almost feature complete

chore: refactoring tests

chore: serialized file info

test: frontend tests

Author: pbastia

bc_obps/registration/schema/operation.py

@@ -1,4 +1,4 @@
-from dataclasses import dataclass
+import json
 from uuid import UUID
 from registration.models.bc_obps_regulated_operation import BcObpsRegulatedOperation
 from typing import List, Optional
@@ -12,6 +12,16 @@
 from registration.models import Operator, User
 from ninja.types import DictStrAny
 
+
+def serialize_document(doc: Document | None) -> Optional[str]:
+    # Something similar to dataURL to allow passing metadata along with the filename.
+    # Required because RJSF expects a string for a file field.
+    if doc:
+        name = doc.file.name.split('/')[-1]
+        return json.dumps({"name": name, "id": doc.id, "status": doc.status})
+    return None
+
+
 #### Operation schemas
 
 
@@ -27,17 +37,11 @@ class OperationRegistrationOut(ModelSchema):
 
     @staticmethod
     def resolve_boundary_map(obj: Operation) -> Optional[str]:
-        boundary_map = obj.get_boundary_map()
-        if boundary_map:
-            return boundary_map.file.name  # type: ignore
-        return None
+        return serialize_document(obj.get_boundary_map())
 
     @staticmethod
     def resolve_process_flow_diagram(obj: Operation) -> Optional[str]:
-        process_flow_diagram = obj.get_process_flow_diagram()
-        if process_flow_diagram:
-            return process_flow_diagram.file.name  # type: ignore
-        return None
+        return serialize_document(obj.get_process_flow_diagram())
 
     @staticmethod
     def resolve_operation_has_multiple_operators(obj: Operation) -> bool:
@@ -135,19 +139,6 @@ class OptedOutOperationDetailIn(Schema):
     final_reporting_year: Optional[int] = None
 
 
-@dataclass
-class DocumentOut(ModelSchema):
-    name: str
-
-    @staticmethod
-    def resolve_name(obj: Document) -> str:
-        return obj.file.name.split('/')[-1]  # type: ignore
-
-    class Meta:
-        model = Document
-        fields = ['id', 'status']
-
-
 class OperationOut(ModelSchema):
     naics_code_id: Optional[int] = Field(None, alias="naics_code.id")
     secondary_naics_code_id: Optional[int] = Field(None, alias="secondary_naics_code.id")
@@ -211,21 +202,21 @@ class Meta:
 
 
 class OperationOutWithDocuments(OperationOut):
-    boundary_map: Optional[DocumentOut] = None
-    process_flow_diagram: Optional[DocumentOut] = None
-    new_entrant_application: Optional[DocumentOut] = None
+    boundary_map: Optional[str] = None
+    process_flow_diagram: Optional[str] = None
+    new_entrant_application: Optional[str] = None
 
     @staticmethod
-    def resolve_boundary_map(obj: Operation) -> Optional[Document]:
-        return obj.get_boundary_map()
+    def resolve_boundary_map(obj: Operation) -> Optional[str]:
+        return serialize_document(obj.get_boundary_map())
 
     @staticmethod
-    def resolve_process_flow_diagram(obj: Operation) -> Optional[Document]:
-        return obj.get_process_flow_diagram()
+    def resolve_process_flow_diagram(obj: Operation) -> Optional[str]:
+        return serialize_document(obj.get_process_flow_diagram())
 
     @staticmethod
-    def resolve_new_entrant_application(obj: Operation) -> Optional[Document]:
-        return obj.get_new_entrant_application()
+    def resolve_new_entrant_application(obj: Operation) -> Optional[str]:
+        return serialize_document(obj.get_new_entrant_application())
 
 
 class OperationCreateOut(ModelSchema):
@@ -261,10 +252,7 @@ class OperationNewEntrantApplicationOut(ModelSchema):
 
     @staticmethod
     def resolve_new_entrant_application(obj: Operation) -> Optional[str]:
-        new_entrant_application = obj.get_new_entrant_application()
-        if new_entrant_application:
-            return new_entrant_application.file.name  # type: ignore
-        return None
+        return serialize_document(obj.get_new_entrant_application())
 
     class Meta:
         model = Operation

bciers/apps/administration/app/components/operations/OperationInformationForm.tsx

@@ -60,11 +60,7 @@ const OperationInformationForm = ({
   const role = useSessionRole();
   const searchParams = useSearchParams();
 
-  const [fileWidgetContext, submitWithFiles] = useFileUploadWidget(
-    `registration/operations/${operationId}`,
-    "POST",
-    `/operations/${operationId}`,
-  );
+  const [fileWidgetContext, submitWithFiles] = useFileUploadWidget();
 
   const isRedirectedFromContacts = searchParams.get("from_contacts") as string;
 
@@ -105,16 +101,12 @@ const OperationInformationForm = ({
     setError(undefined);
     const pathToRevalidate = `/operations/${operationId}`;
 
-    const response = await submitWithFiles(data.formData);
-
-    // const response = await actionHandler(
-    //   `registration/operations/${operationId}`,
-    //   "PUT",
-    //   pathToRevalidate,
-    //   {
-    //     body: JSON.stringify(data.formData),
-    //   },
-    // );
+    const response = await submitWithFiles(
+      data.formData,
+      `registration/operations/${operationId}`,
+      "POST",
+      `/operations/${operationId}`,
+    );
 
     if (response?.error) {
       // Users get this error when they select a contact that's missing address information. We include a link to the Contacts page because the user has to fix the error from there, not here in the operation form.

bciers/apps/administration/app/components/operations/OperationInformationPage.tsx

@@ -19,8 +19,6 @@ const OperationInformationPage = async ({
     operation = await getOperationWithDocuments(operationId);
   } else throw new Error(`Invalid operation id: ${operationId}`);
 
-  console.log(operation);
-
   if (operation?.error) throw new Error("Error fetching operation information");
 
   const formSchema = await createAdministrationOperationInformationSchema(
@@ -38,6 +36,8 @@ const OperationInformationPage = async ({
 
   const uiSchema = await createAdministrationOperationInformationUiSchema();
 
+  console.log(operation);
+
   return (
     <>
       <NewTabBanner />

bciers/apps/administration/tests/components/operations/OperationInformationForm.test.tsx

@@ -51,11 +51,6 @@ vi.mock("@bciers/actions/api", () => ({
   getBusinessStructures: vi.fn(),
 }));
 
-const mockDataUri =
-  "data:application/pdf;name=testpdf.pdf;scanstatus=Clean;base64,ZHVtbXk=";
-const mockDataUri2 =
-  "data:application/pdf;name=testpdf2.pdf;scanstatus=Clean;base64,ZHVtbXk=";
-
 // Just using a simple schema for testing purposes
 const testSchema: RJSFSchema = {
   type: "object",
@@ -151,8 +146,8 @@ const formData = {
   secondary_naics_code_id: 2,
   operation_has_multiple_operators: true,
   activities: [1, 2],
-  boundary_map: mockDataUri,
-  process_flow_diagram: mockDataUri2,
+  boundary_map: { id: 1, name: "testboundary.pdf", status: "Clean" },
+  process_flow_diagram: { id: 2, name: "processflow.pdf", status: "Clean" },
   multiple_operators_array: [
     {
       mo_is_extraprovincial_company: false,
@@ -940,8 +935,12 @@ describe("the OperationInformationForm component", () => {
         registration_purpose: RegistrationPurposes.REPORTING_OPERATION,
         regulated_products: [1],
         operation_representatives: [1],
-        boundary_map: mockDataUri,
-        process_flow_diagram: mockDataUri,
+        boundary_map: { id: 1, name: "testboundary.pdf", status: "Clean" },
+        process_flow_diagram: {
+          id: 2,
+          name: "processflow.pdf",
+          status: "Clean",
+        },
       };
       useSessionRole.mockReturnValue(FrontEndRoles.INDUSTRY_USER_ADMIN);
 
@@ -991,8 +990,12 @@ describe("the OperationInformationForm component", () => {
             type: "Single Facility Operation",
             naics_code_id: 1,
             secondary_naics_code_id: 2,
-            process_flow_diagram: mockDataUri,
-            boundary_map: mockDataUri,
+            process_flow_diagram: {
+              id: 2,
+              name: "processflow.pdf",
+              status: "Clean",
+            },
+            boundary_map: { id: 1, name: "testboundary.pdf", status: "Clean" },
             operation_has_multiple_operators: false,
             registration_purpose: "Reporting Operation",
             operation_representatives: [2],
@@ -1042,8 +1045,8 @@ describe("the OperationInformationForm component", () => {
       registration_purpose: RegistrationPurposes.REPORTING_OPERATION,
       regulated_products: [1],
       operation_representatives: [],
-      boundary_map: mockDataUri,
-      process_flow_diagram: mockDataUri,
+      boundary_map: { id: 1, name: "testboundary.pdf", status: "Clean" },
+      process_flow_diagram: { id: 2, name: "processflow.pdf", status: "Clean" },
       status: OperationStatus.REGISTERED,
     };
     useSessionRole.mockReturnValue(FrontEndRoles.INDUSTRY_USER_ADMIN);

bciers/apps/registration/app/components/operations/registration/NewEntrantOperationForm.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { actionHandler } from "@bciers/actions";
 import { IChangeEvent } from "@rjsf/core";
 import MultiStepBase from "@bciers/components/form/MultiStepBase";
 import { newEntrantOperationUiSchema } from "apps/registration/app/data/jsonSchema/operationRegistration/newEntrantOperation";
 import {
   NewEntrantOperationFormData,
   OperationRegistrationFormProps,
 } from "apps/registration/app/components/operations/registration/types";
+import { useFileUploadWidget } from "@bciers/components/form/widgets/FileWidget";
 
 interface NewEntrantOperationFormProps extends OperationRegistrationFormProps {
   formData: NewEntrantOperationFormData;
@@ -21,14 +21,20 @@ const NewEntrantOperationForm = ({
   steps,
 }: NewEntrantOperationFormProps) => {
   const baseUrl = `/register-an-operation/${operation}`;
+
+  const [fileWidgetContext, submitWithFiles] = useFileUploadWidget();
+
   const handleSubmit = async (e: IChangeEvent) => {
     const endpoint = `registration/operations/${operation}/registration/new-entrant-application`;
     // errors are handled in MultiStepBase
-    const response = await actionHandler(endpoint, "PUT", `${baseUrl}`, {
-      body: JSON.stringify({
+    const response = await submitWithFiles(
+      {
         new_entrant_application: e.formData.new_entrant_application,
-      }),
-    });
+      },
+      endpoint,
+      "POST",
+      `${baseUrl}`,
+    );
     return response;
   };
 
@@ -43,6 +49,7 @@ const NewEntrantOperationForm = ({
       step={step}
       steps={steps}
       uiSchema={newEntrantOperationUiSchema}
+      formContext={fileWidgetContext}
     />
   );
 };

bciers/apps/registration/app/components/operations/registration/OperationInformationForm.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import MultiStepBase from "@bciers/components/form/MultiStepBase";
-import { actionHandler } from "@bciers/actions";
 import { RJSFSchema, UiSchema } from "@rjsf/utils";
 import { useState } from "react";
 import { IChangeEvent } from "@rjsf/core";
@@ -19,6 +18,7 @@ import { eioOperationInformationSchema } from "@/administration/app/data/jsonSch
 import ConfirmChangeOfFieldModal from "@/registration/app/components/operations/registration/ConfirmChangeOfFieldModal";
 import useKey from "@bciers/utils/src/useKey";
 import { Dict } from "@bciers/types/dictionary";
+import { useFileUploadWidget } from "@bciers/components/form/widgets/FileWidget";
 
 interface OperationInformationFormProps {
   rawFormData: Dict;
@@ -56,6 +56,7 @@ const OperationInformationForm = ({
   const searchParams = useSearchParams();
   const continueRegistration =
     searchParams.get("continueRegistration") === "true";
+  const [fileWidgetContext, submitWithFiles] = useFileUploadWidget();
   const [currentUiSchema, setCurrentUiSchema] = useState({
     ...uiSchema,
     section1: {
@@ -149,22 +150,23 @@ const OperationInformationForm = ({
     continueRegistration || !selectedOperation;
 
   const handleSubmit = async (e: IChangeEvent) => {
+    console.error(
+      "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~",
+      createUnnestedFormData(e.formData, ["section1", "section2", "section3"]),
+    );
+
     const formData = e.formData;
     const isCreating = !formData?.section1?.operation;
-    const postEndpoint = `registration/operations`;
-    const putEndpoint = `registration/operations/${formData?.section1?.operation}/registration/operation`;
-    const body = JSON.stringify(
+    const creatingEndpoint = `registration/operations`;
+    const updatingEndpoint = `registration/operations/${formData?.section1?.operation}/registration/operation`;
+
+    const response = await submitWithFiles(
       createUnnestedFormData(formData, ["section1", "section2", "section3"]),
-    );
-    const response = await actionHandler(
-      isCreating ? postEndpoint : putEndpoint,
-      isCreating ? "POST" : "PUT",
+      isCreating ? creatingEndpoint : updatingEndpoint,
+      "POST",
       isCreating
         ? ""
         : `/register-an-operation/${formData?.section1?.operation}/${step}`,
-      {
-        body,
-      },
     ).then((resolve) => {
       if (resolve?.error) {
         return { error: resolve.error };
@@ -360,6 +362,7 @@ const OperationInformationForm = ({
         }}
         uiSchema={currentUiSchema}
         customValidate={customValidate}
+        formContext={fileWidgetContext}
       />
     </>
   );

bciers/apps/registration/tests/components/operations/registration/NewEntrantOperationForm.test.tsx

@@ -24,8 +24,6 @@ useRouter.mockReturnValue({
   push: mockPush,
 });
 
-export const mockDataUri =
-  "data:application/pdf;name=testpdf.pdf;scanstatus=Clean;base64,ZHVtbXk=";
 const mockFile = new File(["test"], "test.pdf", { type: "application/pdf" });
 
 describe("the NewEntrantOperationForm component", () => {
@@ -63,7 +61,11 @@ describe("the NewEntrantOperationForm component", () => {
     render(
       <NewEntrantOperationForm
         formData={{
-          new_entrant_application: mockDataUri,
+          new_entrant_application: JSON.stringify({
+            id: 1,
+            name: "test_file.pdf",
+            status: "Unscanned",
+          }),
         }}
         operation="002d5a9e-32a6-4191-938c-2c02bfec592d"
         schema={newEntrantOperationSchema}
@@ -166,14 +168,19 @@ describe("the NewEntrantOperationForm component", () => {
     expect(actionHandler).toHaveBeenCalledTimes(1);
 
     // date_of_first_shipment is no longer sent in the request body for 2025+ registrations
-    expect(actionHandler).toHaveBeenCalledWith(
+    const callArgs = actionHandler.mock.calls[0];
+    expect(callArgs[0]).toBe(
       "registration/operations/002d5a9e-32a6-4191-938c-2c02bfec592d/registration/new-entrant-application",
-      "PUT",
+    );
+    expect(callArgs[1]).toBe("POST");
+    expect(callArgs[2]).toBe(
       "/register-an-operation/002d5a9e-32a6-4191-938c-2c02bfec592d",
-      {
-        body: '{"new_entrant_application":"data:application/pdf;name=test.pdf;base64,dGVzdA=="}',
-      },
     );
+
+    const submittedFormData = Object.fromEntries(callArgs[3].body);
+    expect(submittedFormData.payload).toEqual("123");
+    expect(typeof submittedFormData.new_entrant_application).toBe("File");
+
     await waitFor(() => {
       expect(mockPush).toHaveBeenCalledWith(
         "/register-an-operation/002d5a9e-32a6-4191-938c-2c02bfec592d/5",