@spokane-folio/security-incident 1.0.28

package/src/components/incidents/ModalLinkIncidentStyle.css

@@ -0,0 +1,32 @@
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.modalBody {
+  overflow: hidden;
+  display: flex;
+  flex-grow: 1;
+  min-height: 0;
+  padding-bottom: 0;
+}
+
+.leftPaneScroll {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
+  overflow-y: auto;
+  padding-bottom: 120px;
+}
+
+.mclContainer {
+  height: 100%;
+  display: flex;
+  flex-grow: 1;
+  overflow-y: auto;
+  padding-bottom: 90px;
+}

package/src/components/incidents/ModalSelectIncidentTypes.js

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Checkbox,
+  Col,
+  Modal,
+  ModalFooter,
+  Pane,
+  Paneset,
+  Row,
+} from '@folio/stripes/components';
+import IncidentTypeCard from './IncidentTypeCard';
+import GetIncidentTypesDetails from '../../settings/GetIncidentTypesDetails';
+import GetIncidentCategories from '../../settings/GetIncidentCategories';
+import { useIncidents } from '../../contexts/IncidentContext';
+import css from './ModalStyle.css';
+
+const ModalSelectIncidentTypes = ({ handleIncidentTypeToggle, formDataIncidentTypes }) => {
+  const { 
+    isModalSelectTypesOpen, 
+    closeModalSelectTypes, 
+    incidentTypesList, // general list of available types, not an instance list
+    incidentCategories 
+  } = useIncidents();
+
+  // for Checkbox filtering
+  const [filterArgs, setFilterArgs] = useState([]);
+
+  // handles Checkbox filtering
+  const filterHandler = (event) => {
+    if (event.target.checked) {
+      setFilterArgs((prevArgs) => [...prevArgs, event.target.value]);
+    } else {
+      setFilterArgs((prevArgs) =>
+        prevArgs.filter((arg) => arg !== event.target.value)
+      );
+    }
+  };
+  // handles Checkbox filtering
+  const filteredList = incidentTypesList.filter((type) =>
+    // if filterArgs is empty, new array has all incidentTypes (no filter)
+    // else new array is only incidentTypes w/ that category_id(s)
+    filterArgs.length > 0 ? filterArgs.includes(type.category_id) : true
+  );
+
+  if (!isModalSelectTypesOpen) {
+    return null;
+  };
+
+  const handleTypeToggle = (typeObject) => {
+    handleIncidentTypeToggle(typeObject)
+    // allow keyboard only users immediate access to the close button on select
+    document.getElementById('close-continue-button-access').focus();
+  };
+
+  const handleSave = () => {
+    closeModalSelectTypes();
+    setFilterArgs([]);
+  };
+
+  const handleCancelDismiss = () => {
+    closeModalSelectTypes();
+    setFilterArgs([]);
+  };
+
+  const chunkArray = (array, size) => {
+    const chunkedArr = [];
+    for (let i = 0; i < array.length; i += size) {
+      chunkedArr.push(array.slice(i, i + size));
+    }
+    return chunkedArr;
+  };
+
+  const chunkedIncidentTypes = chunkArray(filteredList, 3);
+
+  const footer = (
+    <ModalFooter
+      className={css.customModalFooter}
+      style={{ position: 'relative' }}
+    >
+      <Button
+        id="close-continue-button-access"
+        onClick={handleSave}
+        buttonStyle="primary"
+      >
+        <FormattedMessage id="close-continue-button" />
+      </Button>
+      <Button onClick={handleCancelDismiss}>
+        <FormattedMessage id="cancel-button" />
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        maxHeight: '90vh', 
+        minHeight: '550px',
+        overflow: 'hidden',
+      }}
+      open
+      dismissible
+      closeOnBackgroundClick
+      label={<FormattedMessage id="modal-incident-type-label" />}
+      size="large"
+      onClose={handleCancelDismiss}
+      footer={footer}
+      contentClass={css.modalContent}
+    >
+      <GetIncidentTypesDetails context="incidents" />
+      <GetIncidentCategories />
+
+      <div className={css.modalBody}>
+        <Paneset style={{ height: '100%', flexGrow: 1 }}>
+        <Pane
+          defaultWidth="20%"
+          paneTitle={
+            <FormattedMessage id="modal-incident-type.filter-pane.paneTitle" />
+          }
+        >
+        {incidentCategories.map((cat) => (
+          <Checkbox 
+            key={cat.id}
+            label={cat.title} 
+            value={cat.id} 
+            onChange={filterHandler}
+            />
+        ))}
+
+        </Pane>
+        <Pane
+          defaultWidth="80%"
+          style={{ overflowY: 'auto', flexGrow: 1  }}
+          paneTitle={
+            <FormattedMessage id="modal-incident-type.incident-types-pane.paneTitle" />
+          }
+        >
+          <div className={css.incidentTypeCardsContainer}>
+            {chunkedIncidentTypes.map((row, rowIndex) => (
+            <Row key={rowIndex}>
+              {row.map((type, index) => {
+                // in context of map, isSelected logic runs on each instance of a card, and each card will only have one opportunity to return true
+                const isSelected = formDataIncidentTypes.some(
+                  (selectedType) => selectedType.id === type.id
+                );
+                return (
+                  <Col xs={4} key={type.id}>
+                    <IncidentTypeCard
+                      id={type.id}
+                      category_id={type.category_id}
+                      title={type.title}
+                      description={type.description}
+                      handleTypeToggle={handleTypeToggle}
+                      isSelected={isSelected}
+                    />
+                  </Col>
+                );
+              })}
+            </Row>
+          ))}
+          </div>
+        </Pane>
+      </Paneset>
+      </div>
+    </Modal>
+  );
+};
+
+ModalSelectIncidentTypes.propTypes = {
+  handleIncidentTypeSelection: PropTypes.func,
+  currentInstanceIncidentTypes: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default ModalSelectIncidentTypes;

package/src/components/incidents/ModalSelectIncidentTypes.test.js

@@ -0,0 +1,273 @@
+
+// This test file is currently still being built/is incomplete.
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import ModalSelectIncidentTypes from './ModalSelectIncidentTypes';
+
+// --- Mocks for the Incident Context ---
+const mockIncidentContext = {
+  isModalSelectTypesOpen: false,
+  closeModalSelectTypes: jest.fn(),
+  incidentTypesList: [],
+  incidentCategories: [],
+};
+
+// Provide a mock for the useIncidents hook
+jest.mock('../../contexts/IncidentContext', () => ({
+  useIncidents: () => mockIncidentContext,
+}));
+
+// Mocks for the child components used inside ModalSelectIncidentTypes
+jest.mock('../../settings/GetIncidentTypesDetails', () => () => <div>Mock GetIncidentTypesDetails</div>);
+jest.mock('../../settings/GetIncidentCategories', () => () => <div>Mock GetIncidentCategories</div>);
+jest.mock('./IncidentTypeCard', () => {
+  // We'll pretend IncidentTypeCard is a simple clickable div for test purposes
+  return function IncidentTypeCard(props) {
+    const { id, title, isSelected, handleTypeToggle } = props;
+    const handleClick = () => {
+      handleTypeToggle({ id, title });
+    };
+    return (
+      <div data-testid={`card-${id}`} onClick={handleClick}>
+        {title} {isSelected ? '(selected)' : '(not selected)'}
+      </div>
+    );
+  };
+});
+
+// Minimal mocks for stripes components
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  return {
+    Modal: (props) => {
+      // In your test, we want the label's ID to appear in the output
+      let labelId = '';
+      if (props.label && props.label.props && props.label.props.id) {
+        labelId = props.label.props.id;
+      }
+      return (
+        <div>
+          {labelId && <h2>{labelId}</h2>}
+          {props.children}
+        </div>
+      );
+    },
+    ModalFooter: (props) => <div>{props.children}</div>,
+    Button: (props) => <button {...props}>{props.children}</button>,
+    Checkbox: (props) => {
+      const { label, value, onChange, ...rest } = props;
+      const handleChange = (evt) => {
+        onChange({ target: { checked: evt.target.checked, value } });
+      };
+      return (
+        <label>
+          <input type="checkbox" onChange={handleChange} {...rest} />
+          {label}
+        </label>
+      );
+    },
+    Row: (props) => <div>{props.children}</div>,
+    Col: (props) => <div>{props.children}</div>,
+    Pane: (props) => <div>{props.children}</div>,
+    Paneset: (props) => <div>{props.children}</div>,
+  };
+});
+
+describe('ModalSelectIncidentTypes', () => {
+  let container;
+  let handleIncidentTypeToggle;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    // Provide a fresh mock toggle function for each test
+    handleIncidentTypeToggle = jest.fn();
+
+    // Reset the stable context defaults
+    mockIncidentContext.isModalSelectTypesOpen = false;
+    mockIncidentContext.closeModalSelectTypes.mockClear();
+    mockIncidentContext.incidentTypesList = [];
+    mockIncidentContext.incidentCategories = [];
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  test('returns null when modal is not open', () => {
+    act(() => {
+      ReactDOM.render(
+        <ModalSelectIncidentTypes
+          handleIncidentTypeToggle={handleIncidentTypeToggle}
+          formDataIncidentTypes={[]}
+        />,
+        container
+      );
+    });
+    // The entire container should be empty
+    expect(container.innerHTML).toBe('');
+  });
+
+  test('renders basic structure when open', () => {
+    mockIncidentContext.isModalSelectTypesOpen = true;
+    mockIncidentContext.incidentCategories = [
+      { id: 'cat-1', title: 'Category One' },
+      { id: 'cat-2', title: 'Category Two' },
+    ];
+    mockIncidentContext.incidentTypesList = [
+      { id: 'type-1', title: 'Type One', category_id: 'cat-1' },
+      { id: 'type-2', title: 'Type Two', category_id: 'cat-2' },
+    ];
+
+    act(() => {
+      ReactDOM.render(
+        <ModalSelectIncidentTypes
+          handleIncidentTypeToggle={handleIncidentTypeToggle}
+          formDataIncidentTypes={[]}
+        />,
+        container
+      );
+    });
+
+    const text = container.textContent;
+    // Should see the label for the modal
+    expect(text).toMatch(/modal-incident-type-label/);
+
+    // Should see the checkboxes for categories
+    expect(text).toMatch(/Category One/);
+    expect(text).toMatch(/Category Two/);
+
+    // Should see the 2 "cards"
+    expect(text).toMatch(/Type One \(not selected\)/);
+    expect(text).toMatch(/Type Two \(not selected\)/);
+
+    // Should see child mocks
+    expect(text).toMatch(/Mock GetIncidentTypesDetails/);
+    expect(text).toMatch(/Mock GetIncidentCategories/);
+  });
+
+  test('clicking type card calls handleIncidentTypeToggle', () => {
+    mockIncidentContext.isModalSelectTypesOpen = true;
+    mockIncidentContext.incidentTypesList = [
+      { id: 'type-10', title: 'Type Ten', category_id: 'cat-A' },
+    ];
+
+    act(() => {
+      ReactDOM.render(
+        <ModalSelectIncidentTypes
+          handleIncidentTypeToggle={handleIncidentTypeToggle}
+          formDataIncidentTypes={[]}
+        />,
+        container
+      );
+    });
+
+    // The "card" is a <div data-testid="card-type-10" /> from our mock
+    const cardDiv = container.querySelector('[data-testid="card-type-10"]');
+    expect(cardDiv).toBeTruthy();
+
+    act(() => {
+      cardDiv.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    // Should have called handleIncidentTypeToggle once
+    expect(handleIncidentTypeToggle).toHaveBeenCalledTimes(1);
+
+    // The param: { id: 'type-10', title: 'Type Ten' }
+    expect(handleIncidentTypeToggle).toHaveBeenCalledWith({
+      id: 'type-10',
+      title: 'Type Ten',
+    });
+  });
+
+  test('clicking category checkboxes filters the incident types shown', () => {
+    mockIncidentContext.isModalSelectTypesOpen = true;
+    mockIncidentContext.incidentCategories = [
+      { id: 'cat-x', title: 'Category X' },
+      { id: 'cat-y', title: 'Category Y' },
+    ];
+    mockIncidentContext.incidentTypesList = [
+      { id: 'type-1', title: 'Type One', category_id: 'cat-x' },
+      { id: 'type-2', title: 'Type Two', category_id: 'cat-x' },
+      { id: 'type-3', title: 'Type Three', category_id: 'cat-y' },
+    ];
+
+    act(() => {
+      ReactDOM.render(
+        <ModalSelectIncidentTypes
+          handleIncidentTypeToggle={handleIncidentTypeToggle}
+          formDataIncidentTypes={[]}
+        />,
+        container
+      );
+    });
+
+    let text = container.textContent;
+    // All 3 types appear initially
+    expect(text).toMatch(/Type One \(not selected\)/);
+    expect(text).toMatch(/Type Two \(not selected\)/);
+    expect(text).toMatch(/Type Three \(not selected\)/);
+
+    // Now let's simulate checking a single category, e.g. cat-x
+    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    expect(checkboxes.length).toBe(2); // cat-x and cat-y
+    const catXBox = [...checkboxes].find(cb => cb.parentElement.textContent.includes('Category X'));
+
+    act(() => {
+      catXBox.checked = true;
+      catXBox.dispatchEvent(new MouseEvent('change', { bubbles: true }));
+    });
+
+    // With only cat-x checked, we expect to see only Type One, Type Two
+    text = container.textContent;
+    expect(text).toMatch(/Type One \(not selected\)/);
+    expect(text).toMatch(/Type Two \(not selected\)/);
+    // Type Three should be filtered out
+    expect(text).not.toMatch(/Type Three \(not selected\)/);
+  });
+
+  test('clicking "Close and Continue" calls closeModalSelectTypes and resets filterArgs', () => {
+    mockIncidentContext.isModalSelectTypesOpen = true;
+
+    act(() => {
+      ReactDOM.render(
+        <ModalSelectIncidentTypes
+          handleIncidentTypeToggle={handleIncidentTypeToggle}
+          formDataIncidentTypes={[]}
+        />,
+        container
+      );
+    });
+
+    const button = container.querySelector('#close-continue-button-access');
+    act(() => {
+      button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    expect(mockIncidentContext.closeModalSelectTypes).toHaveBeenCalledTimes(1);
+  });
+
+  test('clicking "Cancel" also closes the modal', () => {
+    mockIncidentContext.isModalSelectTypesOpen = true;
+
+    act(() => {
+      ReactDOM.render(
+        <ModalSelectIncidentTypes
+          handleIncidentTypeToggle={handleIncidentTypeToggle}
+          formDataIncidentTypes={[]}
+        />,
+        container
+      );
+    });
+
+    const cancelButton = [...container.querySelectorAll('button')].find(btn =>
+      btn.textContent.includes('cancel-button')
+    );
+    act(() => {
+      cancelButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    expect(mockIncidentContext.closeModalSelectTypes).toHaveBeenCalledTimes(1);
+  });
+});