Add unique key to transporter array elements (#718)

* in reference to issue #620 #620, created a unique key for each Transporter by combining the EPAID and array index. I also found a bug where the tooltips in the Transporter list displayed the zero-index value, i.e. 'view transporter 0 details' for transporter 1. I corrected the tests to reflect this change in tooltip labels. Also added a test to ensure that only one accordion expands when the same Transporter appears in the manifest and 'Details' is clicked.

* add uuid  in transporter section and transporter schema

* increment patch version

---------

Co-authored-by: David Graham <dpgraham4401@gmail.com>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haztrak",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": true,
   "type": "module",
   "scripts": {

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

@@ -54,7 +54,7 @@ export function TransporterRowActions({
         swapTransporter(index, index - 1);
       },
       disabled: isFirst,
-      label: `move transporter ${index} up`,
+      label: `move transporter ${index + 1} up`,
     },
     {
       text: 'Move Down',
@@ -68,7 +68,7 @@ export function TransporterRowActions({
         swapTransporter(index, index + 1);
       },
       disabled: isLast,
-      label: `move transporter ${index} down`,
+      label: `move transporter ${index + 1} down`,
     },
     {
       text: 'Remove',
@@ -77,7 +77,7 @@ export function TransporterRowActions({
         removeTransporter(index);
       },
       disabled: false,
-      label: `remove transporter ${index}`,
+      label: `remove transporter ${index + 1}`,
     },
     {
       text: open ? 'Close' : 'Details',
@@ -86,7 +86,7 @@ export function TransporterRowActions({
         decoratedOnClick(event);
       },
       disabled: false,
-      label: `View transporter ${index} details`,
+      label: `View transporter ${index + 1} details`,
     },
   ];
 

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.spec.tsx

@@ -94,7 +94,7 @@ describe('TransporterTable', () => {
     });
     for (let i = 1; i < TRAN_ARRAY.length; i++) {
       await userEvent.click(actionDropdowns[i]);
-      expect(screen.getByTitle(`move transporter ${i} up`)).not.toBeDisabled();
+      expect(screen.getByTitle(`move transporter ${i + 1} up`)).not.toBeDisabled();
     }
   });
   test('All but last move-down buttons are not disabled', async () => {
@@ -113,7 +113,33 @@ describe('TransporterTable', () => {
     });
     for (let i = 0; i < TRAN_ARRAY.length; i++) {
       await userEvent.click(actionDropdowns[i]);
-      expect(screen.getByTitle(`move transporter ${i} down`)).not.toBeDisabled();
+      expect(screen.getByTitle(`move transporter ${i + 1} down`)).not.toBeDisabled();
     }
   });
 });
+test('Expanding transporter opens one accordion only', async () => {
+  const emptyArrayFieldMethods = {}; // empty method placeholders to fulfill required prop
+  TRAN_ARRAY.push({
+    ...createMockTransporter({ epaSiteId: HANDLER_ID_1, name: HANDLER_NAME_1, order: 3 }),
+  });
+
+  renderWithProviders(
+    <TransporterTable
+      setupSign={mockSetupSign}
+      // @ts-ignore
+      arrayFieldMethods={emptyArrayFieldMethods}
+      transporters={TRAN_ARRAY}
+    />,
+    { preloadedState: { manifest: { readOnly: false } } }
+  );
+  const actionDropdown = await screen.findByRole('button', {
+    name: /transporter 1 actions/,
+  });
+  await userEvent.click(actionDropdown);
+  const detailButton = await screen.findByTitle('View transporter 1 details');
+  await userEvent.click(detailButton);
+
+  const accordion = document.querySelectorAll('.accordion-collapse.collapse.show');
+  expect(accordion).toHaveLength(1);
+  expect(accordion[0]).toBeInTheDocument();
+});

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,8 +53,9 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
     <>
       <Accordion ref={parent}>
         {transporters.map((transporter, index) => {
+          const transporterKey: string = transporter.clientKey || uuidv4();
           return (
-            <Card key={transporter.epaSiteId} className="py-2 ps-4 pe-2 my-2">
+            <Card key={transporterKey} className="py-2 ps-4 pe-2 my-2">
               <Row className="d-flex justify-content-around">
                 <Col xs={8} className="d-flex align-items-center">
                   <h5 className="mb-0 me-3">{transporter.order} </h5>
@@ -76,19 +78,19 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
                 </Col>
                 <Col xs={2} className="d-flex justify-content-end align-items-center">
                   {readOnly ? (
-                    <CustomToggle eventKey={transporter.epaSiteId}></CustomToggle>
+                    <CustomToggle eventKey={transporterKey}></CustomToggle>
                   ) : (
                     <TransporterRowActions
                       removeTransporter={arrayFieldMethods.remove}
                       swapTransporter={arrayFieldMethods.swap}
                       index={index}
                       length={transporters?.length}
-                      eventKey={transporter.epaSiteId}
+                      eventKey={transporterKey}
                     />
                   )}
                 </Col>
               </Row>
-              <Accordion.Collapse eventKey={transporter.epaSiteId}>
+              <Accordion.Collapse eventKey={transporterKey}>
                 <Card.Body>
                   <Table responsive>
                     <thead>

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],
+}));