From 2a27b029d9258f9c0187e7608d3ad16dd4f46124 Mon Sep 17 00:00:00 2001 From: Sean Heckathorne Date: Wed, 29 May 2024 00:09:22 -0500 Subject: [PATCH 1/3] in reference to issue #620 https://github.com/USEPA/haztrak/issues/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. --- .../Transporter/TransporterRowActions.tsx | 8 ++--- .../Transporter/TransporterTable.spec.tsx | 30 +++++++++++++++++-- .../Manifest/Transporter/TransporterTable.tsx | 9 +++--- 3 files changed, 37 insertions(+), 10 deletions(-) diff --git a/client/src/components/Manifest/Transporter/TransporterRowActions.tsx b/client/src/components/Manifest/Transporter/TransporterRowActions.tsx index c0bda24d..e89a01c4 100644 --- a/client/src/components/Manifest/Transporter/TransporterRowActions.tsx +++ b/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`, }, ]; diff --git a/client/src/components/Manifest/Transporter/TransporterTable.spec.tsx b/client/src/components/Manifest/Transporter/TransporterTable.spec.tsx index fbcc0dcd..f3f8a6d9 100644 --- a/client/src/components/Manifest/Transporter/TransporterTable.spec.tsx +++ b/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( + , + { 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(); +}); diff --git a/client/src/components/Manifest/Transporter/TransporterTable.tsx b/client/src/components/Manifest/Transporter/TransporterTable.tsx index 06da5e042..13139a7b 100644 --- a/client/src/components/Manifest/Transporter/TransporterTable.tsx +++ b/client/src/components/Manifest/Transporter/TransporterTable.tsx @@ -52,8 +52,9 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp <> {transporters.map((transporter, index) => { + const transporterKey: string = `${transporter.epaSiteId}-${index.toString()}`; return ( - +
{transporter.order}
@@ -76,19 +77,19 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp {readOnly ? ( - + ) : ( )} - + From eff012bcb1d89a7f71008983b280383e8c8b2402 Mon Sep 17 00:00:00 2001 From: David Graham Date: Thu, 30 May 2024 09:21:00 -0400 Subject: [PATCH 2/3] add uuid in transporter section and transporter schema --- .../Manifest/Transporter/TransporterSection.tsx | 14 +++++++++++++- .../Manifest/Transporter/TransporterTable.tsx | 3 ++- client/src/components/Manifest/manifestSchema.ts | 1 + client/src/setupTests.ts | 6 ++++++ 4 files changed, 22 insertions(+), 2 deletions(-) diff --git a/client/src/components/Manifest/Transporter/TransporterSection.tsx b/client/src/components/Manifest/Transporter/TransporterSection.tsx index 99493a89..54f00139 100644 --- a/client/src/components/Manifest/Transporter/TransporterSection.tsx +++ b/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 = manifestForm.getValues('transporters'); + const transporters = transporterForm.fields; + + transporters.forEach((transporter, index) => { + if (!transporter.clientKey) { + // @ts-ignore + manifestForm.setValue(`transporters[${index}].clientKey`, uuidv4()); + } + }); return ( <> diff --git a/client/src/components/Manifest/Transporter/TransporterTable.tsx b/client/src/components/Manifest/Transporter/TransporterTable.tsx index 13139a7b..49d95cf3 100644 --- a/client/src/components/Manifest/Transporter/TransporterTable.tsx +++ b/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 <> {transporters.map((transporter, index) => { - const transporterKey: string = `${transporter.epaSiteId}-${index.toString()}`; + const transporterKey: string = transporter.clientKey || uuidv4(); return ( diff --git a/client/src/components/Manifest/manifestSchema.ts b/client/src/components/Manifest/manifestSchema.ts index 52941e6a..575a6ae0 100644 --- a/client/src/components/Manifest/manifestSchema.ts +++ b/client/src/components/Manifest/manifestSchema.ts @@ -47,6 +47,7 @@ export const handlerSchema = rcraSite.extend({ export type Handler = z.infer; export const transporterSchema = handlerSchema.extend({ + clientKey: z.string().optional(), order: z.number(), manifest: z.number().optional(), }); diff --git a/client/src/setupTests.ts b/client/src/setupTests.ts index fc698e61..be149e55 100644 --- a/client/src/setupTests.ts +++ b/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], +})); From c4c82e2e5be5b2a8c1b725b5195e8c1e9b337e36 Mon Sep 17 00:00:00 2001 From: David Graham Date: Thu, 30 May 2024 09:47:29 -0400 Subject: [PATCH 3/3] increment patch version --- client/package-lock.json | 4 ++-- client/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index c7f2862f..b005efe8 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1,12 +1,12 @@ { "name": "haztrak", - "version": "0.7.1", + "version": "0.7.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "haztrak", - "version": "0.7.1", + "version": "0.7.2", "dependencies": { "@formkit/auto-animate": "^0.8.2", "@fortawesome/fontawesome-svg-core": "^6.5.2", diff --git a/client/package.json b/client/package.json index 1e130876..424fcdd7 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "haztrak", - "version": "0.7.1", + "version": "0.7.2", "private": true, "type": "module", "scripts": {