Merge pull request #1565 from bcgov/refactor/naics-ui-improvements

refactor: naics UI improvements

app/components/Admin/CreateNaicsCodeModal.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import {Button, Form, Modal, Container, Col, Row} from 'react-bootstrap';
+import {Button, Form, Modal, Container, Col, Row, Alert} from 'react-bootstrap';
 
 interface Props {
   validated: boolean;
   onSubmit: (e: React.SyntheticEvent<any>) => Promise<void>;
   show: boolean;
   onClose: () => void;
+  showActiveCodeError: boolean;
 }
 
 export const CreateNaicsCodeModal: React.FunctionComponent<Props> = ({
   validated,
   onSubmit,
   show,
-  onClose
+  onClose,
+  showActiveCodeError
 }) => {
   return (
     <>
@@ -53,6 +55,12 @@ export const CreateNaicsCodeModal: React.FunctionComponent<Props> = ({
                   NAICS Description is required
                 </Form.Control.Feedback>
               </Form.Group>
+              {showActiveCodeError && (
+                <Alert variant="danger">
+                  This NAICS code already exists. Please delete the currently
+                  active code before entering new information
+                </Alert>
+              )}
               <Button variant="primary" type="submit">
                 Submit
               </Button>

app/components/Admin/DeleteConfirmationModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Modal} from 'react-bootstrap';
+import {Button, Modal, Alert, Col, Row} from 'react-bootstrap';
 
 interface Props {
   deleteObject: {
@@ -19,25 +19,35 @@ export const DeleteConfirmationModal: React.FunctionComponent<Props> = ({
   onClose
 }) => {
   return (
-    <Modal
-      centered
-      size="sm"
-      show={show}
-      onHide={() => onClose()}
-      aria-modal="true"
-    >
-      <Modal.Header closeButton>
+    <Modal centered show={show} onHide={() => onClose()} aria-modal="true">
+      <Modal.Header>
         <Modal.Title style={{margin: 'auto'}}>
           Delete {deleteObject.deleteName}
         </Modal.Title>
       </Modal.Header>
       <Modal.Body style={{textAlign: 'center'}}>
-        <p>Confirm delete {deleteObject.deleteName}:</p>
+        <Alert variant="danger">
+          <p>Are you sure you want to delete this {deleteObject.deleteName}?</p>
+          <p>
+            Doing so will immediately remove it as an option for in-progress
+            applications and those not yet started. Submitted applications will
+            not be affected.
+          </p>
+        </Alert>
         <h5>{deleteObject.deleteItem}</h5>
         <p>{deleteObject.deleteItemDescription}</p>
-        <Button onClick={handleDelete} variant="danger">
-          Confirm Delete
-        </Button>
+        <Row>
+          <Col md={{span: 4, offset: 4}}>
+            <Button onClick={handleDelete} variant="danger">
+              Confirm Delete
+            </Button>
+          </Col>
+          <Col md={{span: 3, offset: 1}}>
+            <Button onClick={onClose} variant="secondary">
+              Cancel
+            </Button>
+          </Col>
+        </Row>
       </Modal.Body>
     </Modal>
   );

app/containers/Admin/NaicsCode/NaicsCodeTable.tsx

@@ -16,15 +16,30 @@ export const NaicsCodeTableContainer: React.FunctionComponent<Props> = (
 ) => {
   const [validated, setValidated] = useState(false);
   const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showActiveCodeError, setShowActiveCodeError] = useState(false);
   const {query} = props;
 
+  const handleClose = () => {
+    setShowCreateModal(false);
+    setValidated(false);
+    setShowActiveCodeError(false);
+  };
+
+  const naicsCodeIsActive = (naicsCode) => {
+    return query.allNaicsCodes.edges.some(
+      (edge) => edge.node.naicsCode === naicsCode
+    );
+  };
+
   const handleCreateNaicsCode = async (e: React.SyntheticEvent<any>) => {
     const form = e.currentTarget;
     e.stopPropagation();
     e.preventDefault();
     e.persist();
     setValidated(true);
-    if (form.checkValidity() === true) {
+
+    if (naicsCodeIsActive(e.target[0].value)) setShowActiveCodeError(true);
+    else if (form.checkValidity() === true) {
       const {environment} = props.relay;
       const variables = {
         input: {
@@ -38,7 +53,7 @@ export const NaicsCodeTableContainer: React.FunctionComponent<Props> = (
       } catch (e) {
         console.error(e);
       }
-      setShowCreateModal(false);
+      handleClose();
     }
   };
 
@@ -49,14 +64,15 @@ export const NaicsCodeTableContainer: React.FunctionComponent<Props> = (
           style={{marginTop: '-100px'}}
           onClick={() => setShowCreateModal(true)}
         >
-          New Naics Code
+          New NAICS Code
         </Button>
       </div>
       <CreateNaicsCodeModal
         validated={validated}
         onSubmit={handleCreateNaicsCode}
         show={showCreateModal}
-        onClose={() => setShowCreateModal(false)}
+        onClose={() => handleClose()}
+        showActiveCodeError={showActiveCodeError}
       />
       <Table striped bordered hover>
         <thead>
@@ -101,6 +117,7 @@ export default createFragmentContainer(NaicsCodeTableContainer, {
         edges {
           node {
             id
+            naicsCode
             ...NaicsCodeTableRow_naicsCode
           }
         }

app/tests/unit/components/Admin/DeleteConfirmationModal.test.tsx

@@ -18,7 +18,7 @@ describe('CreateNaicsCodeModal', () => {
     );
     expect(renderer).toMatchSnapshot();
   });
-  it('should call handleCreateNaicsCode when the form is submitted', async () => {
+  it('should call handleDelete when the Confirm button is clicked', async () => {
     const handleDelete = jest.fn();
     const renderer = shallow(
       <DeleteConfirmationModal
@@ -32,7 +32,7 @@ describe('CreateNaicsCodeModal', () => {
         onClose={jest.fn()}
       />
     );
-    renderer.find('Button').prop('onClick')({} as any);
+    renderer.find('Button').at(0).prop('onClick')({} as any);
     expect(handleDelete).toBeCalledTimes(1);
   });
 });

app/tests/unit/components/Admin/__snapshots__/DeleteConfirmationModal.test.tsx.snap

@@ -19,10 +19,9 @@ exports[`CreateNaicsCodeModal should match the snapshot with the DeleteConfirmat
   onHide={[Function]}
   restoreFocus={true}
   show={true}
-  size="sm"
 >
   <ModalHeader
-    closeButton={true}
+    closeButton={false}
     closeLabel="Close"
   >
     <ModalTitle
@@ -43,25 +42,78 @@ exports[`CreateNaicsCodeModal should match the snapshot with the DeleteConfirmat
       }
     }
   >
-    <p>
-      Confirm delete 
-      NAICS Code
-      :
-    </p>
+    <Alert
+      closeLabel="Close alert"
+      show={true}
+      transition={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "appear": false,
+            "in": false,
+            "mountOnEnter": false,
+            "timeout": 300,
+            "unmountOnExit": false,
+          },
+          "displayName": "Fade",
+          "render": [Function],
+        }
+      }
+      variant="danger"
+    >
+      <p>
+        Are you sure you want to delete this 
+        NAICS Code
+        ?
+      </p>
+      <p>
+        Doing so will immediately remove it as an option for in-progress applications and those not yet started. Submitted applications will not be affected.
+      </p>
+    </Alert>
     <h5>
       1234
     </h5>
     <p>
       description
     </p>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[MockFunction]}
-      variant="danger"
+    <Row
+      noGutters={false}
     >
-      Confirm Delete
-    </Button>
+      <Col
+        md={
+          Object {
+            "offset": 4,
+            "span": 4,
+          }
+        }
+      >
+        <Button
+          active={false}
+          disabled={false}
+          onClick={[MockFunction]}
+          variant="danger"
+        >
+          Confirm Delete
+        </Button>
+      </Col>
+      <Col
+        md={
+          Object {
+            "offset": 1,
+            "span": 3,
+          }
+        }
+      >
+        <Button
+          active={false}
+          disabled={false}
+          onClick={[MockFunction]}
+          variant="secondary"
+        >
+          Cancel
+        </Button>
+      </Col>
+    </Row>
   </ModalBody>
 </Modal>
 `;

app/tests/unit/containers/Admin/NaicsCodes/__snapshots__/NaicsCodeTable.test.tsx.snap

@@ -21,13 +21,14 @@ exports[`NaicsCodeTable should match the snapshot with the NaicsCodeTable contai
       }
       variant="primary"
     >
-      New Naics Code
+      New NAICS Code
     </Button>
   </div>
   <CreateNaicsCodeModal
     onClose={[Function]}
     onSubmit={[Function]}
     show={false}
+    showActiveCodeError={false}
     validated={false}
   />
   <ForwardRef