remove default margins from HtCard UI component

the responsibility of layout should not be a part of the card component

client/src/components/Manifest/QuickerSign/SignBtn/HandlerSignBtn.spec.tsx

@@ -1,79 +1,103 @@
 import '@testing-library/jest-dom';
-import { HandlerSignBtn } from 'components/Manifest/QuickerSign/index';
+import { ManifestContext } from 'components/Manifest/ManifestForm';
+import { Handler, RcraSiteType } from 'components/Manifest/manifestSchema';
+import { QuickSignBtn } from 'components/Manifest/QuickerSign/index';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'test-utils';
 import { createMockMTNHandler } from 'test-utils/fixtures';
 import { afterEach, describe, expect, test } from 'vitest';
+import { undefined } from 'zod';
 
 afterEach(() => {
   cleanup();
 });
 
-describe('QuickerSignModalBtn', () => {
+function TestComponent({
+  siteType,
+  handler,
+  signingSite,
+  status = 'NotAssigned',
+}: {
+  siteType?: RcraSiteType;
+  handler?: Handler;
+  signingSite?: string;
+  status?: 'NotAssigned' | 'Pending' | 'Scheduled' | 'InTransit' | 'ReadyForSignature';
+}) {
+  if (!siteType) siteType = 'Generator';
+
+  return (
+    <div>
+      {/*@ts-ignore*/}
+      <ManifestContext.Provider value={{ manifestStatus: status, signingSite }}>
+        <QuickSignBtn siteType={siteType} mtnHandler={handler} handleClick={() => undefined} />
+      </ManifestContext.Provider>
+      ,
+    </div>
+  );
+}
+
+describe('QuickSignBtn', () => {
   test('renders', () => {
-    const handler = createMockMTNHandler();
-    renderWithProviders(
-      <HandlerSignBtn siteType={'Generator'} mtnHandler={handler} handleClick={() => undefined} />
-    );
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-  test('is disabled when already signed', () => {
-    const signed_handler = createMockMTNHandler({
-      signed: true,
-    });
-    renderWithProviders(
-      <HandlerSignBtn
-        siteType={'Generator'}
-        mtnHandler={signed_handler}
-        handleClick={() => undefined}
-      />
-    );
-    expect(screen.getByRole('button')).toBeDisabled();
-  });
-  test('is not disabled when user org is rcrainfo integrated', () => {
-    const unsigned_handler = createMockMTNHandler({
-      signed: false,
-      paperSignatureInfo: undefined,
-      electronicSignaturesInfo: undefined,
-    });
+    const handlerId = 'TXD987654321';
+    const handler = createMockMTNHandler({ siteType: 'Generator', epaSiteId: handlerId });
     renderWithProviders(
-      <HandlerSignBtn
-        siteType={'Generator'}
-        mtnHandler={unsigned_handler}
-        handleClick={() => undefined}
-      />,
+      <TestComponent handler={handler} signingSite={handlerId} status={'Scheduled'} />,
       {
-        // Redux store state with an API user is required for this button to be active
         preloadedState: {
           profile: {
+            user: 'testuser1',
             org: {
-              name: 'Test Org',
-              id: '123',
               rcrainfoIntegrated: true,
+              id: '123',
+              name: 'Test Org',
             },
-            user: 'username',
-            rcrainfoProfile: {
-              user: 'username',
-              phoneNumber: '1231231234',
-              apiUser: true,
+            sites: {
+              TXD987654321: {
+                name: 'Test Site',
+                handler: handler,
+                permissions: { eManifest: 'signer' },
+              },
             },
           },
         },
       }
     );
-    expect(screen.getByRole('button')).not.toBeDisabled();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+  test('is not disabled when user org is rcrainfo integrated', () => {
+    const unsigned_handler = createMockMTNHandler({
+      signed: false,
+      electronicSignaturesInfo: [],
+    });
+    renderWithProviders(<TestComponent siteType={'Generator'} handler={unsigned_handler} />, {
+      // Redux store state with an API user is required for this button to be active
+      preloadedState: {
+        profile: {
+          org: {
+            name: 'Test Org',
+            id: '123',
+            rcrainfoIntegrated: true,
+          },
+          user: 'username',
+          rcrainfoProfile: {
+            user: 'username',
+            phoneNumber: '1231231234',
+            apiUser: true,
+          },
+        },
+      },
+    });
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
   test('is disabled when API user but already signed', () => {
-    // A handler that has not signed the manifest to be rendered
+    const epaSiteId = 'TXD987654321';
     const unsigned_handler = createMockMTNHandler({
       signed: true,
+      siteType: 'Generator',
+      epaSiteId,
     });
     renderWithProviders(
-      <HandlerSignBtn
-        siteType={'Generator'}
-        mtnHandler={unsigned_handler}
-        handleClick={() => undefined}
-      />,
+      <TestComponent siteType={'Tsdf'} signingSite={'other_id'} handler={unsigned_handler} />,
       {
         // Redux store state with an API user is required for this button to be active
         preloadedState: {
@@ -88,6 +112,6 @@ describe('QuickerSignModalBtn', () => {
         },
       }
     );
-    expect(screen.getByRole('button')).toBeDisabled();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 });

client/src/components/Manifest/QuickerSign/SignBtn/HandlerSignBtn.tsx → client/src/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.tsx

@@ -24,7 +24,7 @@ interface QuickerSignModalBtnProps extends ButtonProps {
  * The button will be disabled if siteId (the EPA ID number) is not provided
  * @constructor
  */
-export function HandlerSignBtn({
+export function QuickSignBtn({
   siteType,
   mtnHandler,
   handleClick,

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

@@ -1,6 +1,6 @@
-import { HandlerSignBtn } from 'components/Manifest/QuickerSign/SignBtn/HandlerSignBtn';
+import { QuickSignBtn } from 'components/Manifest/QuickerSign/SignBtn/QuickSignBtn';
 import { QuickerSignature, QuickerSignData, QuickerSignForm } from './QuickerSignForm';
 import { QuickerSignModal } from './QuickerSignModal';
 
-export { QuickerSignForm, QuickerSignModal, HandlerSignBtn };
+export { QuickerSignForm, QuickerSignModal, QuickSignBtn };
 export type { QuickerSignature, QuickerSignData };

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

@@ -3,7 +3,7 @@ import { faAngleRight, faCheck, faSignature } from '@fortawesome/free-solid-svg-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Transporter } from 'components/Manifest';
 import { Manifest } from 'components/Manifest/manifestSchema';
-import { HandlerSignBtn, QuickerSignData } from 'components/Manifest/QuickerSign';
+import { QuickerSignData, QuickSignBtn } from 'components/Manifest/QuickerSign';
 import React, { useState } from 'react';
 import { Accordion, Button, Card, Col, Row, Table, useAccordionButton } from 'react-bootstrap';
 import { UseFieldArrayReturn } from 'react-hook-form';
@@ -67,7 +67,7 @@ function TransporterTable({
                 </Col>
                 <Col xs={1}>
                   {readOnly ? (
-                    <HandlerSignBtn
+                    <QuickSignBtn
                       siteType={'Transporter'}
                       mtnHandler={transporter}
                       handleClick={setupSign}

client/src/components/Org/UserOrg.tsx

@@ -18,8 +18,6 @@ export function UserOrg({ profile }: UserOrgProps) {
   return (
     <>
       <Row>
-        <hr />
-        <h3 className="text-center">Organization</h3>
         <Col>
           <h6>
             <b>Name</b>

client/src/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.tsx

@@ -37,7 +37,6 @@ export function SyncManifestBtn({
     <RcraApiUserBtn
       variant="primary"
       disabled={disabled || !siteId || inProgress}
-      className="mx-2"
       onClick={() => {
         if (siteId)
           manifestApi

client/src/components/UI/HtCard/HtCard.tsx

@@ -1,7 +1,7 @@
 import { ErrorBoundary } from 'components/Error';
 import { HtSpinner } from 'components/UI';
 import React, { ReactElement } from 'react';
-import { Card, CardHeaderProps, CardProps } from 'react-bootstrap';
+import { Card, CardHeaderProps, CardProps, Container } from 'react-bootstrap';
 
 interface HeaderProps extends CardHeaderProps {
   title?: string;
@@ -14,27 +14,28 @@ interface SpinnerProps extends CardProps {
 
 /**
  * Card with haztrak styling, yeah baby
- * @param {{children: ReactElement }} props react props
- * @constructor
  * @example
  * <HtCard>
  *   <HtCard.Header title="Card Title!">{top right dropdown button}<HtCard.Header>
  *   <HtCard.Body>Hello World!<HtCard.Body>
  *   <HtCard.Footer>submit button here<HtCard.Footer>
  * </HtCard>
  */
-export function HtCard(props: CardProps): ReactElement {
-  const baseAttributes = `my-3 shadow-lg bg-white rounded px-0 ${
-    props.className ? props.className : ''
+export function HtCard({ className, title, children, ...props }: CardProps): ReactElement {
+  const classAttributes = `card shadow-lg bg-white rounded px-0 border-0 ${
+    className ? className : ''
   }`;
-  const classAttributes =
-    props.border || props.className?.includes('border')
-      ? baseAttributes
-      : `border-0 ${baseAttributes}`;
   return (
-    <Card {...props} className={classAttributes}>
-      {props.children}
-    </Card>
+    <div {...props} className={classAttributes}>
+      {title ? (
+        <div className="row d-flex justify-content-start m-1 mb-0">
+          <h3 className="mb-0">{title}</h3>
+        </div>
+      ) : (
+        <></>
+      )}
+      {children}
+    </div>
   );
 }
 
@@ -84,17 +85,17 @@ HtCard.Footer = function (props: CardProps): ReactElement {
 
 /**
  * Card body with Haztrak styling
- * @param {{children: ReactElement}} props react props
- * @constructor
  * @example
  * <HtCard>
  *   <HtCard.Body>Hello World!<HtCard.Body>
  * </HtCard>
  */
-HtCard.Body = function (props: CardProps): ReactElement {
+HtCard.Body = function ({ className, children, ...props }: CardProps): ReactElement {
   return (
-    <Card.Body className={props.className ? `${props.className}` : ''}>
-      <ErrorBoundary>{props.children}</ErrorBoundary>
+    <Card.Body className={className ? `${className}` : ''} {...props}>
+      <ErrorBoundary>
+        <Container>{children}</Container>
+      </ErrorBoundary>
     </Card.Body>
   );
 };