@spokane-folio/security-incident 1.0.28

package/src/components/incidents/ModalSelectWitness.js

@@ -0,0 +1,406 @@
+import React, { useEffect, useState } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { useStripes } from '@folio/stripes/core';
+import {
+  Button,
+  Icon,
+  LoadingPane,
+  Modal,
+  ModalFooter,
+  MultiColumnList,
+  Pane,
+  Paneset,
+  PaneHeader,
+  SearchField,
+} from '@folio/stripes/components';
+import css from './ModalStyle.css';
+import { useIncidents } from '../../contexts/IncidentContext';
+import SearchCustomerOrWitness from './SearchCustomerOrWitness';
+import ProfilePicture from './helpers/ProfilePicture/ProfilePicture.js';
+import GetPatronGroups from './GetPatronGroups';
+
+const ModalSelectWitness = ({ 
+  context,
+  setFormData, 
+  formData, 
+  setRemovedWitnessIds, 
+  removedWitnessIds}) => {
+  const stripes = useStripes();
+  const intl = useIntl();
+  const [patronGroups, setPatronGroups] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [search, setSearch] = useState('');
+
+  const {
+    isModalSelectWitness,
+    closeModalSelectWitness,
+    isLoadingSearch,
+    selectedWitnesses,
+    setSelectedWitnesses,
+    setCustomers,
+    customers, // response array
+  } = useIncidents();
+
+  const hasViewProfilePicturePerm = stripes.hasPerm('ui-users.profile-pictures.view');
+
+  let endOflistTotal = 0;
+
+  // set end of list value
+  if (customers) {
+    endOflistTotal = customers.length;
+  };
+
+  const handleChange = (event) => {
+    const term = event.target.value;
+    setSearchTerm(term);
+  };
+
+  const handleSearchSubmit = () => {
+    setSearch(searchTerm.trim());
+  };
+
+  // toggle handler for context of edit
+  const handleToggleWitness = (data) => {
+    const isInstanceWitness = formData.incidentWitnesses.some(wit => wit.id === data.id);
+    const isRemovedWitness = removedWitnessIds.includes(data.id);
+    if (isInstanceWitness && !isRemovedWitness) {
+      setFormData(prevFormData => ({
+        ...prevFormData,
+        incidentWitnesses: prevFormData.incidentWitnesses.filter(wit => wit.id !== data.id)
+      }));
+      setRemovedWitnessIds(prev => [...prev, data.id]); //mark as removed
+      return;
+    };
+    // handle adding / removing from selectedWitnesses
+    setSelectedWitnesses((prevState) => {
+      const index = prevState.findIndex((cust) => cust.id === data.id);
+      if (index > -1) {
+        // remove witness from selectedWitnesses
+        return prevState.filter((cust) => cust.id !== data.id);
+      } else {
+        // add witness to selectedWitnesses
+        return [...prevState, data];
+      }
+    });
+    // handle if instance wit removed, remove from removedWitnessIds
+    // so can be treated as a newly selected witness
+    if(isRemovedWitness) {
+      setRemovedWitnessIds(prev => prev.filter(id => id !== data.id))
+    };
+    // allow keyboard only users immediate access to the close button on select
+    document.getElementById('close-continue-button').focus();
+  };
+
+  const handleSave = () => {
+    closeModalSelectWitness();
+    setCustomers([]);
+    setSearch('');
+  };
+
+  const handleDismissClose = () => {
+    closeModalSelectWitness();
+    setCustomers([]);
+    setSearch('');
+  };
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handleSearchSubmit();
+    }
+  };
+
+  // formatter for context of edit
+  const resultsFormatter = {
+    active: (item) => {
+      return <p>{item.active ? 
+        (<FormattedMessage id="modal-select-customer.resultsFormatter-active"/>) 
+        : 
+        (<FormattedMessage id="modal-select-customer.resultsFormatter-inactive"/>)}
+      </p>;
+    },
+    name: (item) => {
+      if (item.middleName && item.middleName !== '') {
+        return `${item.lastName}, ${item.firstName} ${item.middleName}`;
+      } else {
+        return `${item.lastName}, ${item.firstName}`;
+      }
+    },
+    patronGroup: (item) => {
+      const patronGroupName = patronGroups.find((pg) => pg.id === item.patronGroup);
+      return patronGroupName ? patronGroupName.group : null;
+    },
+    id: (item) => {
+      const isWitnessSelected = selectedWitnesses.some(
+        (cust) => cust.id === item.id
+      );
+      const isInstanceWitness = formData.incidentWitnesses.some(
+        (wit) => wit.id === item.id
+      );
+      const isRemovedWitness = removedWitnessIds.includes(item.id);
+      const showCheckMark = (isWitnessSelected || isInstanceWitness) && !isRemovedWitness;
+      const buttonStyle = showCheckMark ? 'success' : 'primary';
+      const buttonText = showCheckMark ? <Icon icon="check-circle" /> : 'Add';
+      const custData = {
+        id: item.id,
+        firstName: item.firstName,
+        lastName: item.lastName,
+        barcode: item.barcode,
+      };
+      return (
+        <Button
+          onClick={() => handleToggleWitness(custData)}
+          buttonStyle={buttonStyle}
+        >
+          {buttonText}
+        </Button>
+      );
+    },
+    profilePicLinkOrUUID: (item) => {
+      return (
+        <div style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',   // horizontal
+          alignItems: 'center'        // vertical
+        }}>
+          {/* fixed-size box to prevent overflow/shift */}
+          <div 
+            style={{ 
+              width: 100, 
+              height: 100, 
+              display: 'flex', 
+              alignItems: 'center', 
+              justifyContent: 'center' 
+            }}>
+            <ProfilePicture profilePictureLink={item.profilePicLinkOrUUID} />
+          </div>
+        </div>
+      )
+    }
+  };
+
+  const handleToggleWitnessCreate = (data) => {
+    setSelectedWitnesses((prevState) => {
+      const index = prevState.findIndex((cust) => cust.id === data.id);
+      if (index > -1) {
+        // remove witness from selectedWitnesses
+        return prevState.filter((cust) => cust.id !== data.id);
+      } else {
+        // add witness to selectedWitnesses
+        return [...prevState, data];
+      }
+    });
+    // allow keyboard only users immediate access to the close button on select
+    document.getElementById('close-continue-button').focus();
+  };
+
+
+  // formatter for context of create
+  const resultsFormatterCreate = {
+    active: (item) => {
+      return <p>{item.active === true ?  
+        (<FormattedMessage id="modal-select-customer.resultsFormatter-active"/>) 
+        : 
+        (<FormattedMessage id="modal-select-customer.resultsFormatter-inactive"/>)}
+      </p>;
+    },
+    name: (item) => {
+      if (item.middleName && item.middleName !== '') {
+        return `${item.lastName}, ${item.firstName} ${item.middleName}`;
+      } else {
+        return `${item.lastName}, ${item.firstName}`;
+      }
+    },
+    patronGroup: (item) => {
+      const patronGroupName = patronGroups.find((pg) => pg.id === item.patronGroup);
+      return patronGroupName ? patronGroupName.group : null;
+    },
+    id: (item) => {
+      const isWitnessSelected = selectedWitnesses.some(
+        (cust) => cust.id === item.id
+      );
+      const buttonStyle = isWitnessSelected ? 'success' : 'primary';
+      const buttonText = isWitnessSelected ? (
+        <Icon icon="check-circle" />
+      ) : (
+        'Add'
+      );
+      const custData = {
+        id: item.id,
+        firstName: item.firstName,
+        lastName: item.lastName,
+        barcode: item.barcode,
+      };
+      return (
+        <Button
+          onClick={() => handleToggleWitnessCreate(custData)}
+          buttonStyle={buttonStyle}
+        >
+          {buttonText}
+        </Button>
+      );
+    },
+    profilePicLinkOrUUID: (item) => {
+      return (
+        <div style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',   // horizontal
+          alignItems: 'center'        // vertical
+        }}>
+          {/* fixed-size box to prevent overflow/shift */}
+          <div 
+            style={{ 
+              width: 100, 
+              height: 100, 
+              display: 'flex', 
+              alignItems: 'center', 
+              justifyContent: 'center' 
+            }}>
+            <ProfilePicture profilePictureLink={item.profilePicLinkOrUUID} />
+          </div>
+        </div>
+      )
+    }
+  };
+
+  const isFormDataPresent = () => {
+    const isTermValid = searchTerm && searchTerm.trim() !== '';
+    return isTermValid;
+  };
+
+  const resultCount = intl.formatMessage(
+    { id: `modal-select-witness.results-pane.paneSubTitle` },
+    { count: customers.length }
+  );
+
+  if (!isModalSelectWitness) {
+    return null;
+  };
+
+  const renderHeader = (renderProps) => (
+    <PaneHeader {...renderProps} paneSub={resultCount} />
+  );
+
+  const footer = (
+    <ModalFooter>
+      <Button
+        id="close-continue-button"
+        onClick={handleSave}
+        buttonStyle="primary"
+        marginBottom0
+      >
+        <FormattedMessage id="close-continue-button" />
+      </Button>
+      <Button onClick={handleDismissClose}>
+        <FormattedMessage id="cancel-button" />
+      </Button>
+    </ModalFooter>
+  );
+
+  const columnWidths = {
+    patronGroup: '110px',
+    barcode: '130px',
+    profilePicLinkOrUUID: '120px'
+  }
+
+  return (
+    <Modal
+      style={{ 
+        minHeight: '550px',
+        height: '80%', // allows modal to grow/shrink based on content
+        maxHeight: '300vh', 
+        maxWidth: '400vw', // modal width responsive to viewport width
+        width: '70%' // modal width adjusts based on content and window size
+      }}
+      open
+      dismissible
+      closeOnBackgroundClick
+      label={<FormattedMessage id="modal-select-witness.paneTitle" />}
+      size="large"
+      onClose={handleDismissClose}
+      footer={footer}
+      contentClass={css.modalContent}
+    >
+      {search && <SearchCustomerOrWitness term={search} />}
+      <GetPatronGroups setPatronGroups={setPatronGroups}/>
+
+      <div className={css.modalBody}>
+        <Paneset style={{ height: '100%', flexGrow: 1 }}>
+        <Pane
+          paneTitle={<FormattedMessage id="search-pane.paneTitle" />}
+          defaultWidth="30%"
+        >
+          <SearchField
+            placeholder="Name or barcode"
+            value=""
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+          />
+          <Button 
+          disabled={!isFormDataPresent()}
+          onClick={handleSearchSubmit}
+          >
+            <FormattedMessage id="search-button" />
+          </Button>
+        </Pane>
+
+        {isLoadingSearch ? (
+          <LoadingPane
+            defaultWidth="fill"
+            paneTitle={
+              <FormattedMessage id="modal-select-witness.loading-pane-paneTitle" />
+            }
+          />
+        ) : (
+          <Pane
+            paneTitle={
+              <FormattedMessage id="modal-select-witness.results-pane-paneTitle" />
+            }
+            defaultWidth="80%"
+            style={{ overflowY: 'auto', flexGrow: 1  }}
+            renderHeader={renderHeader}
+          >
+            <div className={css.mclContainer}>
+              <MultiColumnList
+                autosize
+                virtualize
+                totalCount={endOflistTotal}
+                contentData={customers}
+                visibleColumns={hasViewProfilePicturePerm ? [
+                  'name', 
+                  'active', 
+                  'patronGroup', 
+                  'barcode', 
+                  'profilePicLinkOrUUID',
+                  'id'
+                ] : [
+                  'name', 
+                  'active', 
+                  'patronGroup', 
+                  'barcode', 
+                  'id'
+                ]}
+                columnMapping={{
+                  name: <FormattedMessage id="column-mapping.name" />,
+                  active: <FormattedMessage id="column-mapping.active" />,
+                  patronGroup: <FormattedMessage id="column-mapping.patronGroup" />,
+                  barcode: <FormattedMessage id="column-mapping.barcode" />,
+                  profilePicLinkOrUUID: <FormattedMessage id="column-mapping.profilePicture" />,
+                  id: 'Add',
+                }}
+                formatter={context === 'edit' ? resultsFormatter : resultsFormatterCreate}
+                columnWidths={columnWidths}
+              />
+            </div>
+          </Pane>
+        )}
+      </Paneset>
+      </div>
+    </Modal>
+  );
+};
+
+export default ModalSelectWitness;

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

@@ -0,0 +1,308 @@
+/**
+ * ModalSelectWitness.test.js
+ * Snapshot + smoke + basic interactions for ModalSelectWitness.
+ */
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import ModalSelectWitness from './ModalSelectWitness';
+
+/* ------------------------------------------------------------------ *
+ * 1) intl + stripes/core mocks
+ * ------------------------------------------------------------------ */
+jest.mock('react-intl', () => ({
+  useIntl: () => ({ formatMessage: ({ id }) => id }),
+  FormattedMessage: (p) => <span>{p.id}</span>,
+}));
+
+// allow toggling permission behavior if needed
+let HAS_PFPERM = true;
+jest.mock('@folio/stripes/core', () => ({
+  useStripes: () => ({ hasPerm: () => HAS_PFPERM }),
+}));
+
+/* ------------------------------------------------------------------ *
+ * 2) stripes/components mocks
+ * ------------------------------------------------------------------ */
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  const mk = (tag) => (p) => React.createElement(tag, p, p.children);
+
+  const Pane = (p) => (
+    <div data-pane>
+      {typeof p.renderHeader === 'function' ? p.renderHeader({}) : p.renderHeader}
+      <div>{p.children}</div>
+      {p.footer}
+    </div>
+  );
+
+  const PaneHeader = (p) => <div data-pane-header>{p.paneSub || p.paneTitle || p.children}</div>;
+  const Paneset = (p) => <div data-paneset>{p.children}</div>;
+
+  const ModalFooter = (p) => <div data-modal-footer>{p.children}</div>;
+  const Modal = (p) =>
+    p.open ? (
+      <div data-modal>
+        <div data-modal-body>{p.children}</div>
+        {p.footer}
+      </div>
+    ) : null;
+
+  // NOTE: we intentionally do NOT pass the "disabled" prop to DOM to avoid browser-disabled click semantics in tests.
+  const Button = ({ buttonStyle, marginBottom0, disabled, ...rest }) => <button {...rest}>{rest.children}</button>;
+  const Icon = ({ icon, ...rest }) => <span {...rest}>{icon}</span>;
+
+  // IMPORTANT: make SearchField UNCONTROLLED; ignore the `value` prop entirely.
+  const SearchField = ({ onChange, onKeyDown, placeholder }) => (
+    <input placeholder={placeholder} onChange={onChange} onKeyDown={onKeyDown} />
+  );
+
+  const LoadingPane = (p) => <div data-loading-pane>{p.children}</div>;
+
+  const MultiColumnList = (p) => {
+    const items = p.contentData || [];
+    const cols = p.visibleColumns || Object.keys(p.columnMapping || {});
+    const fmt = p.formatter || {};
+    return (
+      <table data-mcl>
+        <tbody>
+          {items.map((item, r) => (
+            <tr key={item.id ?? r}>
+              {cols.map((col) => (
+                <td key={col} data-col={col}>
+                  {fmt[col] ? fmt[col](item) : String(item[col] ?? '')}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  };
+
+  return {
+    Button,
+    Icon,
+    LoadingPane,
+    Modal,
+    ModalFooter,
+    MultiColumnList,
+    Pane,
+    PaneHeader,
+    Paneset,
+    SearchField,
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 3) child-component + css mocks
+ * ------------------------------------------------------------------ */
+jest.mock('./SearchCustomerOrWitness', () => (p) => (
+  <div>Mock SearchCustomerOrWitness: {p.term}</div>
+));
+
+jest.mock('../helpers/ProfilePicture/ProfilePicture.js', () => {
+  const React = require('react');
+  return function ProfilePictureMock(props) {
+    return <div data-profile-picture>{props.profilePictureLink}</div>;
+  };
+});
+
+jest.mock('./GetPatronGroups', () => {
+  const React = require('react');
+  return function GetPatronGroupsMock({ setPatronGroups }) {
+    React.useEffect(() => {
+      setPatronGroups?.([
+        { id: 'pg1', group: 'Staff' },
+        { id: 'pg2', group: 'Visitor' },
+      ]);
+    }, [setPatronGroups]);
+    return <div>Mock GetPatronGroups</div>;
+  };
+});
+
+// CSS module stub
+jest.mock('./ModalStyle.css', () => ({
+  modalContent: 'modalContent',
+  modalBody: 'modalBody',
+  mclContainer: 'mclContainer',
+}));
+
+/* ------------------------------------------------------------------ *
+ * 4) IncidentContext mock (hook)
+ * ------------------------------------------------------------------ */
+let mockCtxState = {
+  isModalSelectWitness: true,
+  closeModalSelectWitness: jest.fn(),
+  isLoadingSearch: false,
+  selectedWitnesses: [],
+  setSelectedWitnesses: jest.fn(),
+  setCustomers: jest.fn(),
+  customers: [
+    {
+      id: 'u1',
+      firstName: 'Jane',
+      middleName: 'Q',
+      lastName: 'Public',
+      barcode: '111',
+      active: true,
+      patronGroup: 'pg1',
+      profilePicLinkOrUUID: 'uuid-111',
+    },
+    {
+      id: 'u2',
+      firstName: 'John',
+      lastName: 'Doe',
+      barcode: '222',
+      active: false,
+      patronGroup: 'pg2',
+      profilePicLinkOrUUID: 'uuid-222',
+    },
+  ],
+};
+
+jest.mock('../../contexts/IncidentContext', () => ({
+  useIncidents: () => mockCtxState,
+}));
+
+/* ------------------------------------------------------------------ *
+ * 5) DOM setup / teardown
+ * ------------------------------------------------------------------ */
+let container, root;
+beforeEach(() => {
+  jest.clearAllMocks();
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(async () => {
+  await act(async () => {
+    root.unmount();
+  });
+  document.body.removeChild(container);
+  container = null;
+});
+
+/* ------------------------------------------------------------------ *
+ * helpers
+ * ------------------------------------------------------------------ */
+const flushAll = async () => {
+  await act(async () => { await Promise.resolve(); });
+  await act(async () => { await new Promise(r => setTimeout(r, 0)); });
+};
+
+const findButtonByText = (rootEl, text) =>
+  Array.from(rootEl.querySelectorAll('button')).find((b) =>
+    (b.textContent || '').includes(text)
+  );
+
+/* ------------------------------------------------------------------ *
+ * fixtures (props)
+ * ------------------------------------------------------------------ */
+const baseProps = {
+  context: 'create', // use create to avoid edit-specific toggling with removed ids
+  setFormData: jest.fn(),
+  formData: { incidentWitnesses: [] },
+  setRemovedWitnessIds: jest.fn(),
+  removedWitnessIds: [],
+};
+
+/* ------------------------------------------------------------------ *
+ * tests
+ * ------------------------------------------------------------------ */
+it('returns null when the modal flag is false', async () => {
+  mockCtxState.isModalSelectWitness = false;
+  await act(async () => {
+    root.render(<ModalSelectWitness {...baseProps} />);
+  });
+  expect(container.innerHTML).toBe('');
+  mockCtxState.isModalSelectWitness = true; // restore
+});
+
+it('renders open modal with search + results (snapshot)', async () => {
+  await act(async () => {
+    root.render(<ModalSelectWitness {...baseProps} />);
+  });
+  await flushAll();
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('search field typing is accepted (smoke; no fragile disabled assertions)', async () => {
+  await act(async () => {
+    root.render(<ModalSelectWitness {...baseProps} />);
+  });
+  await flushAll();
+
+  const input = container.querySelector('input[placeholder="Name or barcode"]');
+  expect(input).toBeTruthy();
+
+  // Type value; component reads e.target.value in onChange
+  await act(async () => {
+    input.value = 'Jane';
+    input.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+  });
+  await flushAll();
+
+  // Button is present; we do not assert disabled/enabled to avoid timing flakes.
+  const searchBtn = findButtonByText(container, 'search-button');
+  expect(searchBtn).toBeTruthy();
+});
+
+it('shows an "Add" button for rows and calls setSelectedWitnesses when clicked', async () => {
+  mockCtxState.selectedWitnesses = [];
+  mockCtxState.setSelectedWitnesses = jest.fn();
+
+  await act(async () => {
+    root.render(<ModalSelectWitness {...baseProps} />);
+  });
+  await flushAll();
+
+  const addButtons = Array.from(container.querySelectorAll('button')).filter((b) =>
+    (b.textContent || '').includes('Add')
+  );
+  expect(addButtons.length).toBeGreaterThan(0);
+
+  await act(async () => {
+    addButtons[0].click();
+  });
+  await flushAll();
+
+  expect(mockCtxState.setSelectedWitnesses).toHaveBeenCalled();
+});
+
+it('in edit context shows a check for witnesses already present in formData', async () => {
+  const editProps = {
+    ...baseProps,
+    context: 'edit',
+    formData: { incidentWitnesses: [{ id: 'u1' }] },
+  };
+
+  await act(async () => {
+    root.render(<ModalSelectWitness {...editProps} />);
+  });
+  await flushAll();
+
+  expect(container.textContent).toContain('check-circle');
+});
+
+it('clicking "Close & Continue" calls close + clears customers + clears search', async () => {
+  mockCtxState.closeModalSelectWitness = jest.fn();
+  mockCtxState.setCustomers = jest.fn();
+
+  await act(async () => {
+    root.render(<ModalSelectWitness {...baseProps} />);
+  });
+  await flushAll();
+
+  const closeBtn = container.querySelector('#close-continue-button');
+  expect(closeBtn).toBeTruthy();
+
+  await act(async () => {
+    closeBtn.click();
+  });
+  await flushAll();
+
+  expect(mockCtxState.closeModalSelectWitness).toHaveBeenCalled();
+  expect(mockCtxState.setCustomers).toHaveBeenCalledWith([]);
+  expect(container.textContent).not.toContain('Mock SearchCustomerOrWitness:');
+});