Refactor manifest into sections

.pre-commit-config.yaml

@@ -11,7 +11,7 @@ ci:
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: 'v3.2.0'
+    rev: 'v4.5.0'
     hooks:
       - id: trailing-whitespace
       - id: check-json
@@ -24,7 +24,7 @@ repos:
             \.vscode\/.*|
           )$
   - repo: https://github.com/charliermarsh/ruff-pre-commit
-    rev: 'v0.1.3'
+    rev: 'v0.1.11'
     hooks:
       - id: ruff
         args: [--fix, --exit-non-zero-on-fix]
@@ -38,13 +38,17 @@ repos:
           - python
         pass_filenames: false
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: 'v8.34.0'
+    rev: 'v8.56.0'
     hooks:
       - id: eslint
         files: \.[jt]sx?$
         types: [file]
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: 'v3.0.0-alpha.3'
+    rev: 'v3.1.0'
     hooks:
       - id: prettier
         exclude: infra/haztrak/
+  - repo: https://github.com/asottile/pyupgrade
+    rev: v3.15.0
+    hooks:
+      - id: pyupgrade

client/src/components/Manifest/Actions/ManifestEditBtn.tsx

@@ -12,16 +12,16 @@ interface ManifestEditBtnProps extends ButtonProps {}
 export function ManifestEditBtn({ children, ...props }: ManifestEditBtnProps) {
   const navigate = useNavigate();
   const { trackingNumber, viewingAsSiteId } = useContext(ManifestContext);
-  const [readOnly] = useReadOnly();
+  const [readOnly, setReadOnly] = useReadOnly();
   if (!readOnly) return <></>;
+
+  const handleClick = () => {
+    setReadOnly(false);
+    navigate(`/site/${viewingAsSiteId}/manifest/${trackingNumber}/edit`);
+  };
+
   return (
-    <HtButton
-      {...props}
-      variant="info"
-      type="button"
-      name="edit"
-      onClick={() => navigate(`/site/${viewingAsSiteId}/manifest/${trackingNumber}/edit`)}
-    >
+    <HtButton {...props} variant="info" type="button" name="edit" onClick={handleClick}>
       <span>Edit </span>
       <FontAwesomeIcon icon={faPenToSquare} />
     </HtButton>

client/src/components/Manifest/Actions/index.ts

@@ -0,0 +1,4 @@
+export { ManifestCancelBtn } from './ManifestCancelBtn';
+export { ManifestSaveBtn } from './ManifestSaveBtn';
+export { ManifestEditBtn } from './ManifestEditBtn';
+export { ManifestFABs } from './ManifestFABs';

client/src/components/Manifest/GeneralInfo/GeneralInfoForm.tsx

@@ -26,7 +26,7 @@ export function GeneralInfoForm({ manifestData, isDraft }: GeneralInfoFormProps)
   const { errors } = manifestForm.formState;
   return (
     <>
-      <Row>
+      <Row xs={1} sm={3}>
         <Col>
           <HtForm.Group>
             <HtForm.Label htmlFor="manifestTrackingNumber">MTN</HtForm.Label>
@@ -53,10 +53,10 @@ export function GeneralInfoForm({ manifestData, isDraft }: GeneralInfoFormProps)
           <ManifestTypeSelect readOnly={readOnly} isDraft={isDraft} />
         </Col>
       </Row>
-      <Row>
+      <Row xs={1} sm={3}>
         <Col>
           <HtForm.Group>
-            <HtForm.Label htmlFor="createdDate">
+            <HtForm.Label htmlFor="createdDate" className="text-nowrap">
               {'Created Date '}
               <InfoIconTooltip message={'This field is managed by EPA'} />
             </HtForm.Label>
@@ -75,7 +75,7 @@ export function GeneralInfoForm({ manifestData, isDraft }: GeneralInfoFormProps)
         </Col>
         <Col>
           <HtForm.Group>
-            <HtForm.Label htmlFor="updatedDate">
+            <HtForm.Label htmlFor="updatedDate" className="text-nowrap">
               {'Last Update Date '}
               <InfoIconTooltip message={'This field is managed by EPA'} />
             </HtForm.Label>
@@ -93,7 +93,7 @@ export function GeneralInfoForm({ manifestData, isDraft }: GeneralInfoFormProps)
         </Col>
         <Col>
           <HtForm.Group>
-            <HtForm.Label htmlFor="shippedDate">
+            <HtForm.Label htmlFor="shippedDate" className="text-nowrap">
               {'Shipped Date '}
               <InfoIconTooltip message={'This field is managed by EPA'} />
             </HtForm.Label>

client/src/components/Manifest/GeneralInfo/ManifestStatusSelect.tsx

@@ -1,7 +1,7 @@
 import { Manifest, ManifestStatus } from 'components/Manifest/manifestSchema';
 import { HtForm, InfoIconTooltip } from 'components/UI';
 import React from 'react';
-import { useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useGetProfileQuery } from 'store';
 import { manifest } from 'services';
 import Select, { SingleValue } from 'react-select';
@@ -51,30 +51,40 @@ export function ManifestStatusSelect({ readOnly, isDraft }: ManifestStatusFieldP
           <InfoIconTooltip message={'Once set to scheduled, this field is managed by EPA'} />
         )}
       </HtForm.Label>
-      <Select
-        id="status"
-        isDisabled={readOnly || !isDraft}
-        data-testid="manifestStatus"
-        aria-label="manifestStatus"
-        {...manifestForm.register('status')}
-        value={selectedStatus}
-        isLoading={profileLoading || !profile}
-        classNames={{
-          control: () => 'form-select py-0 rounded-3',
-        }}
-        onChange={(option: SingleValue<StatusOption>) => {
-          if (option) setStatus(option.value);
-        }}
-        options={statusOptions}
-        filterOption={(option) =>
-          // Hide options that are managed by EPA
-          availableStatuses.includes(option.value as ManifestStatus) || option.value === 'Scheduled'
-        }
-        isOptionDisabled={(option) =>
-          // Disable the 'Scheduled' option if it's not available
-          option.value === 'Scheduled' && !availableStatuses.includes('Scheduled')
-        }
-        components={{ IndicatorSeparator: () => null, DropdownIndicator: () => null }}
+      <Controller
+        name="status"
+        control={manifestForm.control}
+        render={({ field }) => (
+          <Select
+            {...field}
+            id="status"
+            aria-label="status"
+            value={selectedStatus}
+            options={statusOptions}
+            isDisabled={readOnly || !isDraft}
+            data-testid="manifestStatus"
+            isLoading={profileLoading || !profile}
+            onChange={(option: SingleValue<StatusOption>) => {
+              if (option) {
+                setStatus(option.value);
+                field.onChange(option.value);
+              }
+            }}
+            filterOption={(option) =>
+              // Hide options that are managed by EPA
+              availableStatuses.includes(option.value as ManifestStatus) ||
+              option.value === 'Scheduled'
+            }
+            isOptionDisabled={(option) =>
+              // Disable the 'Scheduled' option if it's not available
+              option.value === 'Scheduled' && !availableStatuses.includes('Scheduled')
+            }
+            classNames={{
+              control: () => 'form-select py-0 rounded-3',
+            }}
+            components={{ IndicatorSeparator: () => null, DropdownIndicator: () => null }}
+          />
+        )}
       />
     </HtForm.Group>
   );

client/src/components/Manifest/GeneralInfo/ManifestTypeSelect.tsx

@@ -1,18 +1,21 @@
 import { Manifest, SubmissionType } from 'components/Manifest/manifestSchema';
 import { HtForm } from 'components/UI';
-import React from 'react';
-import Select from 'react-select';
-import { useFormContext } from 'react-hook-form';
+import React, { useState } from 'react';
+import Select, { SingleValue } from 'react-select';
+import { Controller, useFormContext } from 'react-hook-form';
 
-const submissionTypeOptions: Array<{ value: SubmissionType; label: string }> = [
+interface SubmissionTypeOption {
+  value: SubmissionType;
+  label: string;
+}
+
+const submissionTypeOptions: Array<SubmissionTypeOption> = [
   { value: 'Hybrid', label: 'Hybrid' },
   { value: 'FullElectronic', label: 'Electronic' },
   { value: 'DataImage5Copy', label: 'Data + Image' },
   { value: 'Image', label: 'Image Only' },
 ];
 
-const DEFAULT_SUBMISSION_TYPE = submissionTypeOptions[0];
-
 /** uniform hazardous waste manifest type field. */
 export function ManifestTypeSelect({
   readOnly,
@@ -23,31 +26,44 @@ export function ManifestTypeSelect({
 }) {
   const manifestForm = useFormContext<Manifest>();
   const generatorCanESign = manifestForm.getValues('generator.canEsign');
+  const [submissionType, setSubmissionType] = useState<SubmissionType>(
+    manifestForm.getValues('submissionType') || 'Hybrid'
+  );
+  const selectedType = submissionTypeOptions.filter((option) => option.value === submissionType);
   return (
     <HtForm.Group>
       <HtForm.Label htmlFor="submissionType" className="mb-0">
         Type
       </HtForm.Label>
-      <Select
-        id="submissionType"
-        isDisabled={readOnly || !isDraft}
-        aria-label="submissionType"
-        {...manifestForm.register('submissionType')}
-        options={submissionTypeOptions}
-        getOptionValue={(option) => option.value}
-        defaultValue={DEFAULT_SUBMISSION_TYPE}
-        classNames={{
-          control: () => 'form-select py-0 rounded-3',
-        }}
-        components={{ IndicatorSeparator: () => null, DropdownIndicator: () => null }}
-        onChange={(option) => {
-          if (option) manifestForm.setValue('submissionType', option.value);
-        }}
-        filterOption={(option) =>
-          option.label.toLowerCase().includes('electronic') ||
-          option.label.toLowerCase().includes('hybrid')
-        }
-        isOptionDisabled={(option) => option.value === 'FullElectronic' && !generatorCanESign}
+      <Controller
+        control={manifestForm.control}
+        name={'submissionType'}
+        render={({ field }) => (
+          <Select
+            {...field}
+            id="submissionType"
+            aria-label="submission type"
+            isDisabled={readOnly || !isDraft}
+            value={selectedType}
+            options={submissionTypeOptions}
+            defaultValue={submissionTypeOptions[0]}
+            onChange={(option: SingleValue<SubmissionTypeOption>) => {
+              if (option) {
+                setSubmissionType(option.value);
+                field.onChange(option.value);
+              }
+            }}
+            filterOption={(option) =>
+              option.label.toLowerCase().includes('electronic') ||
+              option.label.toLowerCase().includes('hybrid')
+            }
+            isOptionDisabled={(option) => option.value === 'FullElectronic' && !generatorCanESign}
+            classNames={{
+              control: () => 'form-select py-0 rounded-3',
+            }}
+            components={{ IndicatorSeparator: () => null, DropdownIndicator: () => null }}
+          />
+        )}
       />
     </HtForm.Group>
   );

client/src/components/Manifest/GeneralInfo/index.ts

@@ -0,0 +1 @@
+export { GeneralInfoForm } from './GeneralInfoForm';

client/src/components/Manifest/Handler/GeneratorForm.spec.tsx → client/src/components/Manifest/Generator/GeneratorForm.spec.tsx

@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom';
 import { fireEvent } from '@testing-library/react';
-import { GeneratorForm } from 'components/Manifest/Handler/GeneratorForm';
 import { siteType } from 'components/Manifest/manifestSchema';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'test-utils';
 import { afterEach, describe, expect, test } from 'vitest';
+import { GeneratorForm } from './GeneratorForm';
 
 afterEach(() => {
   cleanup();

client/src/components/Manifest/Generator/GeneratorSection.spec.tsx

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { createMockHandler } from 'test-utils/fixtures';
+import { afterEach, describe, expect, test } from 'vitest';
+import { GeneratorSection } from './GeneratorSection';
+
+afterEach(() => cleanup());
+
+const TestComponent = () => {
+  return <GeneratorSection setupSign={() => undefined} signAble={true} />;
+};
+
+describe('GeneratorSection', () => {
+  test('renders', () => {
+    renderWithProviders(<TestComponent />, {
+      useFormProps: {
+        values: {
+          status: 'NotAssigned',
+          generator: createMockHandler({ epaSiteId: 'VATEST123' }),
+        },
+      },
+    });
+    expect(screen.getByText(/vatest123/i)).toBeInTheDocument();
+  });
+});