@spokane-folio/security-incident 1.0.28

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

@@ -0,0 +1,128 @@
+// IncidentsPaneset.test.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import IncidentsPaneset from './IncidentsPaneset';
+
+/* ------------------------------------------------------------------ *
+ * 1 mock externals                  
+ * ------------------------------------------------------------------ */
+jest.mock('@folio/stripes/core', () => ({
+  stripesConnect: (Comp) => Comp,
+}));
+
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  const make = (tag) => (p) => React.createElement(tag, p, p.children);
+  return {
+    Accordion: make('div'),
+    AutoSuggest: make('div'),
+    Checkbox: make('div'),
+    Paneset: make('div'),
+    Pane: make('div'),
+    SearchField: make('input'),
+    Button: make('button'),
+    Headline: make('h2'),
+    Datepicker: make('input'),
+    Row: make('div'),
+    Col: make('div'),
+    Icon: (p) => <span {...p}>{p.icon}</span>,
+    TextField: make('input'),
+    RadioButton: (p) => <input type="radio" {...p} />,
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 2 mock nested panes and utils                         
+ * ------------------------------------------------------------------ */
+jest
+  .mock('../../settings/GetLocationsInService', () => () => <div>Mock GetLocationsInService</div>)
+  .mock('./GetListDynamicQuery', () => () => <div>Mock GetListDynamicQuery</div>)
+  .mock('./GetLocations', () => () => <div>Mock GetLocations</div>)
+  .mock('../../settings/GetIncidentTypesDetails', () => () => <div>Mock GetIncidentTypesDetails</div>)
+  .mock('./GetOrgLocaleSettings', () => () => <div>Mock GetOrgLocaleSettings</div>)
+  .mock('./ResultsPane', () => () => <div>Mock ResultsPane</div>)
+  .mock('./DetailsPane', () => () => <div>Mock DetailsPane</div>)
+  .mock('./EditPane', () => () => <div>Mock EditPane</div>)
+  .mock('./CreatePane', () => () => <div>Mock CreatePane</div>);
+
+jest.mock('./usePersistedSort', () => () => ({
+  sortColumn: '',
+  sortDirection: 'asc',
+  setSortColumn: jest.fn(),
+  setSortDirection: jest.fn(),
+}));
+
+jest.mock('./helpers/buildQueryString', () => jest.fn(() => 'mockedQueryString'));
+
+/* ------------------------------------------------------------------ *
+ * 3 router and context                                 
+ * ------------------------------------------------------------------ */
+jest.mock('react-router-dom', () => ({
+  useLocation: () => ({ pathname: '/incidents', search: '' }),
+  useHistory: () => ({ push: jest.fn(), replace: jest.fn() }),
+  useParams: () => ({}),
+}));
+
+jest.mock('../../contexts/IncidentContext', () => ({
+  useIncidents: () => ({
+    /* pane toggles */
+    isDetailsPaneOpen: false,
+    isEditPaneOpen: false,
+    isCreatePaneOpen: false,
+    /* data / helpers */
+    incidentTypesNamesIdsList: [],
+    locationsInService: [],
+    organizationTimezone: 'America/Chicago',
+    /* query-string & paging */
+    queryString: '',
+    setQueryString: jest.fn(),
+    appliedSearchParams: {},
+    setAppliedSearchParams: jest.fn(),
+    limit: 20,
+    setLimit: jest.fn(),
+    offset: 0,
+    setOffset: jest.fn(),
+    /* misc */
+    setIncidentsList: jest.fn(),
+    setTotalResults: jest.fn(),
+  }),
+}));
+
+/* ------------------------------------------------------------------ *
+ * 4 test harness setup / teardown                                  *
+ * ------------------------------------------------------------------ */
+let container;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+});
+
+/* ------------------------------------------------------------------ *
+ * 5 test cases                                                     *
+ * ------------------------------------------------------------------ */
+it('renders without crashing (snapshot)', () => {
+  act(() => {
+    ReactDOM.render(<IncidentsPaneset />, container);
+  });
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('mounts key child panes', () => {
+  act(() => {
+    ReactDOM.render(<IncidentsPaneset />, container);
+  });
+  // Smoke-test that one or two top-level mocked panes are present
+  expect(container.textContent).toEqual(
+    expect.stringContaining('Mock GetLocationsInService')
+  );
+  expect(container.textContent).toEqual(
+    expect.stringContaining('Mock ResultsPane')
+  );
+});
+

package/src/components/incidents/LinkedIncident.js

@@ -0,0 +1,86 @@
+import convertUTCISOToPrettyDate from './helpers/convertUTCISOToPrettyDate';
+import { Icon } from '@folio/stripes/components';
+import { useIntl, FormattedMessage } from 'react-intl';
+const containerStyle = { padding: '2px 0' };
+
+const rowStyle = {
+  display: 'flex',
+  alignItems: 'flex-start', 
+  gap: '8px',
+};
+
+const linkBlockStyle = {
+  display: 'block',      
+  textDecoration: 'none',
+  color: 'rgb(0,0,238)',
+  fontWeight: 'bold',
+};
+
+const dateStyle = {
+  margin: 0,
+  lineHeight: 1.2,
+};
+
+const listStyle = {
+  margin: '6px 0 0 1.5rem',
+  padding: 0,
+  listStyleType: 'disc',
+  listStylePosition: 'outside',
+};
+
+const LinkedIncident = ({ summaryObj, onDelete, renderContext = 'create-edit' }) => {
+  const intl = useIntl();
+  const ariaLabel = intl.formatMessage({ 
+    id: 'linked-incident.aria-label-report-details-view' 
+  });
+
+  const customers = summaryObj.customers ?? [];
+  const created = summaryObj.createdDate;
+
+  const handleIconKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onDelete?.(summaryObj.id);
+    }
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={rowStyle}>
+        {renderContext !== 'details' && (
+          <button
+            style={{}}
+            onClick={() => onDelete?.(summaryObj.id)}
+            type="button"
+            aria-label="Remove linked incident"
+            onKeyDown={handleIconKeyDown}
+          >
+            <Icon icon="trash" size="medium" />
+          </button>
+        )}
+
+        <a
+          href={`/incidents/${summaryObj.id}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={ariaLabel}
+          style={linkBlockStyle}
+        >
+          <p style={dateStyle}>
+            {convertUTCISOToPrettyDate(created)}
+          </p>
+
+          {customers.length > 0 && (
+            <ul style={listStyle}>
+              {customers.map((cust, idx) => (
+                <li key={`${summaryObj.id}-${idx}`}>{cust}</li>
+              ))}
+            </ul>
+          )}
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default LinkedIncident;

package/src/components/incidents/ModalAddMedia.js

@@ -0,0 +1,262 @@
+import React, { useState, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Col,
+  MessageBanner,
+  Modal,
+  Pane,
+  Paneset,
+  ModalFooter,
+  Row,
+  TextField,
+} from '@folio/stripes/components';
+import css from './ModalStyle.css';
+import { useIncidents } from '../../contexts/IncidentContext';
+import { fileTypeFromBuffer } from 'file-type';
+
+const ModalAddMedia = ({ handleAddMedia, handleAddMediaAtCreate, context }) => {
+  const fileInputRef = useRef(null);
+  const {
+    isModalMedia,
+    closeModalMedia,
+    setIdForMediaCreate,
+    setFormDataArrayForMediaCreate,
+  } = useIncidents();
+  const [showBanner, setShowBanner] = useState(false);
+  const [validFile, setValidFile] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [mediaDataForm, setMediaDataForm] = useState({
+    description: '',
+    file: null,
+    contentType: '',
+    filePreviewUrl: null
+  });
+  const MAX_SIZE_IMAGE_OR_PDF = 10 * 1024 * 1024; // 10 MB
+  const MAX_SIZE_VIDEO = 100 * 1024 * 1024; // 100 MB
+
+  if (!isModalMedia) {
+    return null;
+  };
+
+  const resetFileState = () => {
+    setMediaDataForm((prev) => ({
+      ...prev,
+      description: '',
+      file: null,
+      contentType: '',
+      filePreviewUrl: null,
+    }));
+    if (fileInputRef.current) {
+      fileInputRef.current.value = null;
+    };
+  };
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setMediaDataForm((prev) => ({
+      ...prev,
+      [name]: value,
+    }))
+  };
+
+  const isFileSizeValid = (mime, size) => {
+    // if video/ type allow up to 100MB, else 10MB
+    if (mime.startsWith('video/')) {
+      return size <= MAX_SIZE_VIDEO;
+    } else {
+      return size <= MAX_SIZE_IMAGE_OR_PDF
+    }
+  };
+
+  const bytesToMB = (bytes) => {
+    const megabytes = bytes / (1024 * 1024); 
+    return megabytes.toFixed(1);
+  };
+
+  const handleFileChange = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return; 
+
+    setShowBanner(false);
+    setValidFile(false);
+
+    try {
+      // read small chunk of file for signature detection
+      const chunk = file.slice(0, 4100);
+      // read and return promise 
+      const arrayBuffer = await chunk.arrayBuffer();
+      // make byte-level view of raw data
+      const buffer = new Uint8Array(arrayBuffer);
+      // get detected type
+      const detectedType = await fileTypeFromBuffer(buffer);
+
+      // return if !detectedType
+      if (!detectedType) {
+        setErrorMessage(<FormattedMessage id="modal-add-media-error-msg-unrecognized"/>);
+        setShowBanner(true);
+        resetFileState();
+        return;
+      };
+
+      const { ext, mime } = detectedType;
+      const validExtensions = ['pdf', 'mp4', 'mpeg', 'jpeg', 'jpg', 'png'];
+
+      // check allowed extensions
+      if (!validExtensions.includes(ext)) {
+        console.log(`The ext: ${ext}`)
+        setErrorMessage(<FormattedMessage 
+          id="modal-add-media-error-msg-ext-not-allowed"
+          values={{ ext }}
+        />);
+        setShowBanner(true);
+        resetFileState();
+        return; 
+      };
+
+      // check if file size is acceptable 
+      if (!isFileSizeValid(mime, file.size)) {
+        const fileSize = bytesToMB(file.size);
+        setErrorMessage(<FormattedMessage 
+          id="modal-add-media-error-msg-file-too-large"
+          values={{ mime, fileSize }}
+        />);
+        setShowBanner(true);
+        resetFileState();
+        return; 
+      };
+
+      // work with valid file from here
+      setValidFile(true);
+
+      // make preview
+      let filePreviewUrl = null;
+      if (mime.startsWith('image/')) {
+        filePreviewUrl = URL.createObjectURL(file);
+      } else if (mime.startsWith('video/')) {
+        filePreviewUrl = 'isVideo';
+      } else if (mime === 'application/pdf') {
+        filePreviewUrl = 'isPdf'
+      };
+
+      // update state 
+      setMediaDataForm((prev) => ({
+        ...prev,
+        file,
+        contentType: mime,
+        filePreviewUrl
+      }));
+    } catch (error) {
+      console.log('error while reading file - error: ', error.message);
+      const errorMsg = error.message;
+      setErrorMessage(<FormattedMessage 
+          id="modal-add-media-error-msg-while-reading-file"
+          values={{ errorMsg }}
+        />)
+      setShowBanner(true);
+      resetFileState();
+    };
+  };
+
+  const handleCancel = () => {
+    setMediaDataForm({
+      description: '',
+      file: null,
+      contentType: ''
+    });
+    setIdForMediaCreate(null);
+    setFormDataArrayForMediaCreate(null);
+    setShowBanner(false);
+    setValidFile(false);
+    closeModalMedia();
+  };
+
+  const isFormDataPresent = () => {
+    const { description } = mediaDataForm;
+    return description.trim() !== '' && validFile
+  };
+
+  const handleSave = () => {
+    if (context === 'create') {
+      handleAddMediaAtCreate(mediaDataForm)
+    } else if (context === 'edit') {
+      handleAddMedia(mediaDataForm)
+    };
+    resetFileState();
+    setShowBanner(false);
+    setValidFile(false);
+    closeModalMedia();
+  };
+
+  const footer = (
+    <ModalFooter>
+      <Button
+        onClick={handleSave}
+        buttonStyle="primary"
+        disabled={!isFormDataPresent()}
+        marginBottom0
+      >
+        <FormattedMessage id="close-continue-button" />
+      </Button>
+      <Button onClick={handleCancel}>
+        <FormattedMessage id="cancel-button" />
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{ 
+        minHeight: '550px',
+        height: '80%', // allows modal to grow/shrink based on content
+        maxHeight: '300vh',  // modal will never exceed 90% of viewport height
+        maxWidth: '300vw', // modal width responsive to viewport width
+        width: '60%' // modal width adjusts based on content and window size
+      }}
+      open
+      dismissible
+      closeOnBackgroundClick
+      label={<FormattedMessage id="modal-add-media-label-add-media-file" />}
+      size="large"
+      onClose={handleCancel}
+      footer={footer}
+      contentClass={css.modalContent}
+    >
+      <Paneset>
+        <Pane
+          defaultWidth='fill'
+        >
+          <Row>
+            <Col xs={5}>
+              <TextField
+                onChange={handleChange}
+                value={mediaDataForm.description}
+                name="description"
+                label={
+                  <FormattedMessage id="modal-add-media-textField-description-media-file" />
+                }
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={6}>
+              <input type="file" onChange={handleFileChange} ref={fileInputRef}/>
+            </Col>
+          </Row>
+          <Row style={{ marginTop: '25px' }}>
+            <Col xs={8}>
+                <MessageBanner 
+                  dismissible
+                  type='error'
+                  show={showBanner}>
+                  {errorMessage || <FormattedMessage id="modal-add-media-error-msg-default"/>}
+                </MessageBanner>
+            </Col>
+          </Row>
+        </Pane>
+      </Paneset>
+    </Modal>
+  );
+};
+
+export default ModalAddMedia;

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import ModalAddMedia from './ModalAddMedia';
+
+// --- Mocks for External Dependencies ---
+
+// Mock react-intl so that FormattedMessage simply renders its id.
+jest.mock('react-intl', () => ({
+  FormattedMessage: (props) => <span>{props.id}</span>,
+}));
+
+// Mock react-router-dom with stable params and history.
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({}),
+  useHistory: () => ({ push: jest.fn() }),
+}));
+
+// Mock @folio/stripes/components with minimal implementations.
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  return {
+    Button: (props) => <button {...props}>{props.children}</button>,
+    Col: (props) => <div {...props}>{props.children}</div>,
+    MessageBanner: (props) => <div {...props}>{props.children}</div>,
+    Modal: (props) => <div {...props}>{props.children}</div>,
+    Pane: (props) => <div {...props}>{props.children}</div>,
+    Paneset: (props) => <div {...props}>{props.children}</div>,
+    ModalFooter: (props) => <div {...props}>{props.children}</div>,
+    Row: (props) => <div {...props}>{props.children}</div>,
+    TextField: (props) => <input type="text" {...props} />,
+  };
+});
+
+// --- Virtual Mock for file-type ---
+// Jest has trouble locating the file-type module (ESM-only), so we create a virtual module.
+jest.mock(
+  'file-type',
+  () => ({
+    fileTypeFromBuffer: jest.fn(() => Promise.resolve({ ext: 'jpg', mime: 'image/jpeg' })),
+  }),
+  { virtual: true }
+);
+
+// Mock the CSS module.
+jest.mock('./ModalStyle.css', () => ({}));
+
+// --- Mocks for the Incident Context ---
+// Define a stable context so that the same object is returned on every call.
+// This prevents useEffect dependencies from changing on every render.
+jest.mock('../../contexts/IncidentContext', () => {
+  const stableMediaContext = {
+    isModalMedia: true, // default open for our rendering test
+    closeModalMedia: jest.fn(),
+    setIdForMediaCreate: jest.fn(),
+    setFormDataArrayForMediaCreate: jest.fn(),
+  };
+  return {
+    useIncidents: () => stableMediaContext,
+  };
+});
+
+// --- Test Setup ---
+let container = null;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+afterEach(() => {
+  document.body.removeChild(container);
+  container = null;
+});
+
+// --- Test Cases ---
+
+// Test case 1: When isModalMedia is true, the modal should render.
+// We capture a snapshot to help detect unintended changes.
+test('ModalAddMedia renders correctly when open (snapshot test)', () => {
+  act(() => {
+    ReactDOM.render(<ModalAddMedia context="edit" handleAddMedia={() => {}} />, container);
+  });
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+// Test case 2: When isModalMedia is false, the component should return null.
+test('ModalAddMedia returns null when not open', () => {
+  // Get the stable context and set isModalMedia to false to simulate the modal being closed.
+  const { useIncidents } = require('../../contexts/IncidentContext');
+  const stableContext = useIncidents();
+  stableContext.isModalMedia = false;
+
+  act(() => {
+    ReactDOM.render(<ModalAddMedia context="edit" handleAddMedia={() => {}} />, container);
+  });
+  // When the modal is closed, the component returns null, so the container should be empty.
+  expect(container.innerHTML).toBe('');
+});

package/src/components/incidents/ModalAttentionDecOfService.js

@@ -0,0 +1,111 @@
+import React, { useMemo } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Col,
+  List,
+  Modal,
+  ModalFooter,
+  Row,
+} from '@folio/stripes/components';
+import css from './ModalStyle.css';
+
+const ModalAttentionDecOfService = ({ 
+  onNo, 
+  onYes,
+  missingIds,
+  allCustomers
+}) => {
+  const intl = useIntl();
+
+  // compute list to render
+  const customersList = useMemo(() => allCustomers.filter((c) => missingIds.includes(c.id)), 
+    [allCustomers, missingIds]
+  );
+  // console.log("customersList --> ", JSON.stringify(customersList, null, 2));
+
+  const itemFormatter = (cust) => {
+    const notAvailable = intl.formatMessage({ id: "unknown-name-placeholder" });
+    const firstName = cust.registered === false ? 
+      cust.firstName || notAvailable : cust.associatedFirstName;
+    const lastName = cust.registered === false ?
+      cust.lastName || notAvailable : cust.associatedLastName;
+    const name = `${lastName}, ${firstName}`;
+    return (
+      <li>
+        {name}
+      </li>
+    )
+  };
+
+  const footer = (
+    <ModalFooter>
+      <Button 
+        onClick={onYes}
+        buttonStyle="primary"
+        >
+        <FormattedMessage id="yes-button" />
+      </Button>
+      <Button
+        onClick={onNo}
+      >
+        <FormattedMessage id="no-button" />
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{ 
+        maxHeight: '500vh',
+        maxWidth: '300vw',
+        width: '60%' 
+      }}
+      open
+      closeOnBackgroundClick
+      label={<FormattedMessage id="modal-attention-declaration-of-service" />}
+      size="large"
+      footer={footer}
+      contentClass={css.modalContent}
+    >
+    <div 
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        // Ensure inner flex children can shrink and scroll properly
+        minHeight: 0,
+        maxHeight: 'calc(80vh - 120px)' // headroom for modal header/footer
+      }}>
+      <Row style={{ marginTop: '25px' }}>
+        <Col 
+          xs={12}
+          style={{ textAlign: 'center' }}
+          >
+         <FormattedMessage id="modal-attention-declaration-of-service-message" />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={12} >
+          <List
+            listStyle='bullet'
+            items={customersList}
+            itemFormatter={itemFormatter}
+          />
+        </Col>
+      </Row>
+
+      <Row style={{ marginBottom: '25px' }}>
+        <Col 
+          xs={12}
+          style={{ textAlign: 'center' }}>
+           <FormattedMessage id="modal-attention-declaration-of-service-question" />
+        </Col>
+      </Row>
+    </div>
+    </Modal>
+  );
+};
+
+export default ModalAttentionDecOfService;