add uuid in transporter section and transporter schema

client/src/components/Manifest/Transporter/TransporterSection.tsx

@@ -6,11 +6,16 @@ import { useReadOnly } from 'hooks/manifest';
 import { useHandlerSearchConfig } from 'hooks/manifest/useOpenHandlerSearch/useHandlerSearchConfig';
 import { Alert } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';
+import { v4 as uuidv4 } from 'uuid';
 
 interface TransporterSectionProps {
   setupSign: () => void;
 }
 
+interface TransporterWithKey extends Transporter {
+  key: string;
+}
+
 export function TransporterSection({ setupSign }: TransporterSectionProps) {
   const [, setSearchConfigs] = useHandlerSearchConfig();
   const [readOnly] = useReadOnly();
@@ -20,7 +25,14 @@ export function TransporterSection({ setupSign }: TransporterSectionProps) {
     control: manifestForm.control,
     name: 'transporters',
   });
-  const transporters: Array<Transporter> = manifestForm.getValues('transporters');
+  const transporters = transporterForm.fields;
+
+  transporters.forEach((transporter, index) => {
+    if (!transporter.clientKey) {
+      // @ts-ignore
+      manifestForm.setValue(`transporters[${index}].clientKey`, uuidv4());
+    }
+  });
 
   return (
     <>

client/src/components/Manifest/Transporter/TransporterTable.tsx

@@ -8,6 +8,7 @@ import { useReadOnly } from 'hooks/manifest';
 import React, { useState } from 'react';
 import { Accordion, Button, Card, Col, Row, Table, useAccordionButton } from 'react-bootstrap';
 import { UseFieldArrayReturn } from 'react-hook-form';
+import { v4 as uuidv4 } from 'uuid';
 import { TransporterRowActions } from './TransporterRowActions';
 
 interface TransporterTableProps {
@@ -52,7 +53,7 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
     <>
       <Accordion ref={parent}>
         {transporters.map((transporter, index) => {
-          const transporterKey: string = `${transporter.epaSiteId}-${index.toString()}`;
+          const transporterKey: string = transporter.clientKey || uuidv4();
           return (
             <Card key={transporterKey} className="py-2 ps-4 pe-2 my-2">
               <Row className="d-flex justify-content-around">

client/src/components/Manifest/manifestSchema.ts

@@ -47,6 +47,7 @@ export const handlerSchema = rcraSite.extend({
 export type Handler = z.infer<typeof handlerSchema>;
 
 export const transporterSchema = handlerSchema.extend({
+  clientKey: z.string().optional(),
   order: z.number(),
   manifest: z.number().optional(),
 });

client/src/setupTests.ts

@@ -21,3 +21,9 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: vi.fn(),
   })),
 });
+
+// Mocking the useAutoAnimate hook which causes error in the test environment
+// https://github.com/formkit/auto-animate/issues/149#issuecomment-1782772600
+vi.mock('@formkit/auto-animate/react', () => ({
+  useAutoAnimate: () => [null],
+}));