@spokane-folio/security-incident 1.0.28

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

@@ -0,0 +1,187 @@
+/**
+ * EditPane.test.js
+ * Snapshot + smoke tests for the EditPane container.
+ */
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createRoot } from 'react-dom/client';
+import EditPane from './EditPane';
+
+/* ------------------------------------------------------------------ *
+ * 1. react-intl / router / stripes mocks                              *
+ * ------------------------------------------------------------------ */
+jest.mock('react-intl', () => ({
+  useIntl          : () => ({ formatMessage: ({ id }) => id }),
+  FormattedMessage : (p) => <span>{p.id}</span>,
+}));
+jest.mock('react-router-dom', () => ({
+  useParams   : () => ({ id: 'edit-id' }),
+  useHistory  : () => ({ push: jest.fn(), replace: jest.fn() }),
+  useLocation : () => ({ pathname: '/incidents/edit-id', search: '' }),
+}));
+jest.mock('@folio/stripes/core', () => ({
+  useStripes: () => ({ hasPerm: jest.fn(() => true) }),
+}));
+
+/* ------------------------------------------------------------------ *
+ * 2. stripes/components mock (minimal DOM)                            *
+ * ------------------------------------------------------------------ */
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  const mk = (tag) => (p) => React.createElement(tag, p, p.children);
+
+  /* need PaneHeader/PaneFooter to render footer buttons */
+  return {
+    Accordion        : mk('div'),
+    AccordionSet     : mk('div'),
+    Button           : mk('button'),
+    Checkbox         : mk('div'),
+    Col              : mk('div'),
+    Datepicker       : mk('input'),
+    Editor           : mk('textarea'),
+    ExpandAllButton  : mk('button'),
+    Icon             : (p) => <span {...p}>{p.icon}</span>,
+    Label            : mk('label'),
+    List             : (p) => <ul>{(p.items||[]).map((x,i)=><li key={i}>{x}</li>)}</ul>,
+    LoadingPane      : mk('div'),
+    MetaSection      : mk('div'),
+    MessageBanner    : mk('div'),
+    Pane             : mk('div'),
+    PaneHeader       : mk('div'),
+    PaneFooter       : mk('div'),
+    Row              : mk('div'),
+    Select           : mk('select'),
+    TextArea         : mk('textarea'),
+    Timepicker       : mk('input'),
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 3. Child-component stubs                                            *
+ * ------------------------------------------------------------------ */
+jest
+  .mock('../../settings/GetLocationsInService', () => () => <div>Mock GetLocationsInService</div>)
+  .mock('../../settings/GetIncidentTypesDetails', () => () => <div>Mock GetIncidentTypesDetails</div>)
+  .mock('./ModalSelectKnownCustomer',   () => () => <div>Mock ModalSelectKnownCustomer</div>)
+  .mock('./ModalDescribeCustomer',      () => () => <div>Mock ModalDescribeCustomer</div>)
+  .mock('./ModalSelectIncidentTypes',   () => () => <div>Mock ModalSelectIncidentTypes</div>)
+  .mock('./ModalSelectWitness',         () => () => <div>Mock ModalSelectWitness</div>)
+  .mock('./ModalTrespass',              () => () => <div>Mock ModalTrespass</div>)
+  .mock('./ModalCustomerDetails',       () => () => <div>Mock ModalCustomerDetails</div>)
+  .mock('./ModalAddMedia',              () => () => <div>Mock ModalAddMedia</div>)
+  .mock('./CreateMedia',                () => () => <div>Mock CreateMedia</div>)
+  .mock('./GetDetails',                 () => () => <div>Mock GetDetails</div>)
+  .mock('./GetListDQLinkIncident',      () => () => <div>Mock GetListDQLinkIncident</div>)
+  .mock('./GEtOrgLocaleSettings',       () => () => <div>Mock GEtOrgLocaleSettings</div>)
+  .mock('./GetSelf',                    () => () => <div>Mock GetSelf</div>)
+  .mock('./GetMedia',                   () => () => <div>Mock GetMedia</div>)
+  .mock('./GetName',                    () => () => <div>Mock GetName</div>)
+  .mock('./GetLocations',               () => () => <div>Mock GetLocations</div>)
+  .mock('./GetSummary',                 () => () => <div>Mock GetSummary</div>)
+  .mock('./GetNameCreatedBy',           () => () => <div>Mock GetNameCreatedBy</div>)
+  .mock('./Thumbnail',                  () => () => <div>Mock Thumbnail</div>)
+  .mock('./ThumbnailSkeleton',          () => () => <div>Mock ThumbnailSkeleton</div>)
+  .mock('./ThumbnailMarkRemoval',       () => () => <div>Mock ThumbnailMarkRemoval</div>)
+  .mock('./ThumbnailTempPreSave',       () => () => <div>Mock ThumbnailTempPreSave</div>)
+  .mock('./UpdateReport',               () => () => <div>Mock UpdateReport</div>)
+  .mock('./ModalCustomWitness',         () => () => <div>Mock ModalCustomWitness</div>)
+  .mock('../../settings/GetTrespassTemplates', () => () => <div>Mock GetTrespassTemplates</div>)
+  .mock('../../settings/GetTrespassReasons', () => () => <div>Mock GetTrespassReasons</div>);
+
+/* ------------------------------------------------------------------ *
+ * 4. Simple helper mocks                                              *
+ * ------------------------------------------------------------------ */
+jest.mock('./helpers/convertUTCISOToPrettyDate', () => jest.fn((d)=>d));
+jest.mock('./helpers/convertUTCISOToLocalePrettyTime', () => jest.fn((d)=>d));
+jest.mock('./helpers/parseMMDDYYYY',    () => jest.fn((d)=>new Date(d)));
+jest.mock('./helpers/isValidDateFormat',() => jest.fn(()=>true));
+jest.mock('./helpers/isValidTimeInput', () => jest.fn(()=>true));
+jest.mock('./helpers/formatDateToUTCISO',        () => jest.fn((d)=>d));
+jest.mock('./helpers/formatDateAndTimeToUTCISO', () => jest.fn((d,t)=>`${d}T${t}`));
+jest.mock('./helpers/stripHTML', () => jest.fn((s)=>s));
+jest.mock('./helpers/getTodayDate', () => jest.fn(()=> '01/01/2020'));
+jest.mock('../../settings/helpers/makeId', () => () => 'mockedId');
+
+/* ------------------------------------------------------------------ *
+ * 5. IncidentContext mock (defined inside the factory)                *
+ * ------------------------------------------------------------------ */
+jest.mock('../../contexts/IncidentContext', () => {
+  const context = {
+    singleIncident : {
+      id: 'edit-id',
+      customerNa          : false,
+      customers           : [],
+      incidentLocation    : 'loc-1',
+      subLocation         : '',
+      dateTimeOfIncident  : '2020-01-01T12:00:00Z',
+      isApproximateTime   : false,
+      detailedDescriptionOfIncident: 'desc',
+      incidentWitnesses   : [],
+      incidentTypes       : [],
+      attachments         : [],
+      metadata            : {},
+      staffSuppressed     : false,
+    },
+    closeEditPane     : jest.fn(),
+    openModalSelectTypes   : jest.fn(),
+    openModalUnknownCust   : jest.fn(),
+    openModalSelectKnownCust: jest.fn(),
+    selectedCustomers      : [],
+    setSelectedCustomers   : jest.fn(),
+    selectedWitnesses      : [],
+    setSelectedWitnesses   : jest.fn(),
+    openModalSelectWitness : jest.fn(),
+    self                   : { id:'self', firstName:'Self', lastName:'User' },
+    openModalTrespass      : jest.fn(),
+    isLoadingDetails       : false,
+    openLoadingDetails     : jest.fn(),
+    isUpdatingReport       : false,
+    setIsUpdatingReport    : jest.fn(),
+    openModalMedia         : jest.fn(),
+    setAttachmentsData     : jest.fn(),
+    idForMediaCreate       : null,
+    setIdForMediaCreate    : jest.fn(),
+    formDataArrayForMediaCreate : null,
+    setFormDataArrayForMediaCreate: jest.fn(),
+    openModalCustomerDetails: jest.fn(),
+    locationsInService     : [],
+    incidentTypesList      : [],
+    isImageArrayLoading    : false,
+    openImageSkeleton      : jest.fn(),
+    closeImageSkeleton     : jest.fn(),
+    openModalCustomWitness : jest.fn(),
+    trespassTemplates      : [],
+    triggerDocumentError   : jest.fn(),
+  };
+  return { useIncidents: () => context };
+});
+
+/* ------------------------------------------------------------------ *
+ * 6. DOM setup / teardown                                             *
+ * ------------------------------------------------------------------ */
+let container, root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  root.unmount();
+  document.body.removeChild(container);
+  container = null;
+});
+
+/* ------------------------------------------------------------------ *
+ * 7. Tests                                                            *
+ * ------------------------------------------------------------------ */
+it('renders without crashing (snapshot)', async () => {
+  await act(async () => { root.render(<EditPane />); });
+  await act(async () => {});
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('mounts key child components', () => {
+  act(() => { root.render(<EditPane />); });
+  expect(container.textContent).toContain('Mock GetDetails');
+  expect(container.textContent).toContain('Mock GetLocationsInService');
+});

package/src/components/incidents/GetDetails.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class GetDetails extends React.Component {
+  static contextType = IncidentContext;
+
+  static manifest = Object.freeze({
+    incident: {
+      type: 'okapi',
+      path: (_q, _p, _r, _logger, props) => `incidents/${props.id}`,
+      records: '',
+      throwErrors: false,
+      accumulate: false  
+    },
+  });
+
+  static propTypes = {
+    id: PropTypes.string,
+    resources: PropTypes.object.isRequired,
+  };
+
+  componentDidMount () { 
+    this.trySetRecord(this.props);
+  };
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.id !== prevProps.id ||  // navigation
+      this.props.resources.incident !== prevProps.resources.incident // load complete
+    ) {
+      this.trySetRecord(this.props);
+    }
+  };
+
+  trySetRecord({ resources }) {
+    this.context.openLoadingDetails();
+    const { incident } = resources;
+    if (!incident?.hasLoaded || !incident.records?.length) return;
+    // console.log("trySetRecord - incident --> ", JSON.stringify(incident, null, 2));
+
+    // console.log("trySetRecord - incident.records[0] --> ", JSON.stringify(incident.records[0], null, 2));
+
+    this.context.setSingleIncident(incident.records[0]);
+    this.context.closeLoadingDetails();
+  };
+
+  render() {
+    return null;
+  };
+};
+
+GetDetails.contextType = IncidentContext;
+export default stripesConnect(GetDetails, '@spokane-folio/security-incident');

package/src/components/incidents/GetListDQLinkIncident.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { getHeaderWithCredentials } from '@folio/stripes/util';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class GetListDQLinkIncident extends React.Component {
+  static contextType = IncidentContext;
+
+  constructor(props) {
+    super(props);
+    const { stripes } = this.props;
+    const { okapi } = stripes;
+    this.okapiURL = okapi.url;
+  };
+
+  static propTypes = {
+    stripes: PropTypes.object.isRequired,          
+    history : PropTypes.object,
+  };
+
+  componentDidMount() { this.fetchListDQLinkIncident(); }
+  componentDidUpdate() {
+    if (this.props.queryStringLinkIncident !== this.lastQuery) this.fetchListDQLinkIncident();
+  }
+
+  fetchListDQLinkIncident = async () => {
+    const { stripes } = this.props;
+    const credsObj = getHeaderWithCredentials(stripes.okapi);        
+    const qs         = this.props.queryStringLinkIncident;
+    this.lastQuery   = qs;
+
+    this.context.openLoadingSearch();
+
+    // console.log("@fetchListDQLinkIncident - qs --> ", qs)
+
+    const mergedHeaders = {
+      ...credsObj.headers, 
+    }
+
+    const options = {
+      ...credsObj,
+      headers: mergedHeaders
+    }
+
+    try {
+      const resp = await fetch(
+        `${this.okapiURL}/incidents?${qs}`, 
+        options
+      );
+
+      if (!resp.ok) throw new Error(`server ${resp.status}`);
+
+      const json = await resp.json();
+
+      this.props.setIncidentsListForLink(prev => {
+        if (this.props.offset === 0) return json.incidents; // first page replaces
+        const next = [...prev, ...json.incidents];
+        // dedupe by id 
+        const seen = new Set();
+        return next.filter(r => {
+          const id = r.id || r._id;
+          if (!id) return true;
+          if (seen.has(id)) return false;
+          seen.add(id);
+          return true;
+        });
+      });
+      this.props.setTotalResultsForLink(json.totalRecords);
+      
+    } catch (err) {
+      console.error('@fetchListDQLinkIncident - incident fetch failed', err);
+    } finally {
+      this.context.closeLoadingSearch();
+    }
+  };
+
+  render() { return null; }
+};
+
+export default stripesConnect(GetListDQLinkIncident,'@spokane-folio/security-incident');

package/src/components/incidents/GetListDynamicQuery.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { getHeaderWithCredentials } from '@folio/stripes/util';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class GetListDynamicQuery extends React.Component {
+  static contextType = IncidentContext;
+
+  constructor(props) {
+    super(props);
+    const { stripes } = this.props;
+    const { okapi } = stripes;
+    this.okapiURL = okapi.url;
+  };
+
+  static propTypes = {
+    stripes: PropTypes.object.isRequired,          
+    history : PropTypes.object,
+  };
+
+  componentDidMount() { this.fetchListDynamicQuery(); }
+  componentDidUpdate() {
+    if (this.context.queryString !== this.lastQuery) this.fetchListDynamicQuery();
+  }
+
+  fetchListDynamicQuery = async () => {
+    const { stripes } = this.props;
+    const credsObj = getHeaderWithCredentials(stripes.okapi);        
+    const qs         = this.context.queryString;
+    this.lastQuery   = qs;
+
+    this.context.openLoadingSearch();
+
+    const mergedHeaders = {
+      ...credsObj.headers, // tenant / token / content-type
+    }
+
+    const options = {
+      ...credsObj,
+      headers: mergedHeaders
+    }
+
+    try {
+      const resp = await fetch(
+        `${this.okapiURL}/incidents?${qs}`, 
+        options
+      );
+
+      if (!resp.ok) throw new Error(`server ${resp.status}`);
+
+      const json = await resp.json();
+      this.context.setTotalResults(json.totalRecords);
+      this.context.setIncidentsList(json.incidents);
+    } catch (err) {
+      console.error('incident fetch failed', err);
+    } finally {
+      this.context.closeLoadingSearch();
+    }
+  };
+
+  render() { return null; }
+};
+
+
+export default stripesConnect(GetListDynamicQuery,'@spokane-folio/security-incident');

package/src/components/incidents/GetLocations.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+class GetLocations extends React.Component {
+  static contextType = IncidentContext;
+
+  static manifest = Object.freeze({
+    locations: {
+      type: 'okapi',
+      path: 'locations?limit=100',
+      accumulate: true,
+    },
+  });
+
+  static propTypes = {
+    locations: PropTypes.shape({
+      records: PropTypes.object,
+    }),
+
+    context: PropTypes.object,
+    mutator: PropTypes.shape({
+      locations: PropTypes.shape({
+        GET: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+    // not required, used in context of <NewLocationsZones />
+    handleFetchedLocations: PropTypes.func 
+  };
+
+  componentDidMount() {
+    this.fetchLocations();
+  }
+
+  fetchLocations() {
+    this.props.mutator.locations
+      .GET({ path: `locations?limit=100` })
+      .then((records) => {
+        const data = records.locations;
+        const names = data.map((record) => {
+          return record.discoveryDisplayName;
+        });
+        if (this.props.context === 'new-location-zones' || this.props.context === 'opt-in-locations') {
+          this.props.handleFetchedLocations(names);
+        }
+        this.context.setLocations(names);
+      });
+  }
+
+  render() {
+    return <></>;
+  }
+}
+
+GetLocations.contextType = IncidentContext;
+
+export default stripesConnect(GetLocations, '@spokane-folio/security-incident');

package/src/components/incidents/GetMedia.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { stripesConnect } from '@folio/stripes/core';
+import { getHeaderWithCredentials } from '@folio/stripes/util';
+
+class GetMedia extends React.Component {
+  constructor(props) {
+    super(props);
+    const { stripes } = this.props;
+    const { okapi } = stripes;
+    this.okapiURL = okapi.url;
+  };
+
+  componentDidMount() {
+    this.GetMedia()
+  };
+
+  componentDidUpdate(prevProps) {
+    if(this.props.id !== prevProps.id || this.props.imageId !== prevProps.imageId) {
+      this.GetMedia()
+    }
+  };
+
+  GetMedia = async () => {
+    const { id, imageId, mediaHandler, context, contentType } = this.props;
+    const { stripes } = this.props;
+    // console.log("stripes: ", JSON.stringify(stripes, null, 2))
+    const headersWithCredentials = getHeaderWithCredentials(stripes.okapi);
+    const { headers } = headersWithCredentials
+    // console.log("headersWithCredentials: ", JSON.stringify(headersWithCredentials, null, 2))
+    // console.log("headers: ", JSON.stringify(headers, null, 2))
+
+    if(context === 'thumbnail') {
+      if(contentType.startsWith('video')) {
+        const placeholderUrl = 'isVideo'
+        mediaHandler(placeholderUrl, this.props.imageId)
+        return; 
+      };
+
+      try {
+        const response = await fetch(`${this.okapiURL}/incidents/${id}/media/${imageId}?format=thumbnail`, {
+          method: 'GET',
+          headers: {
+            ...headers
+          }
+        });
+        if(response.status === 200) {
+          const blob = await response.blob();
+          const mediaUrl = URL.createObjectURL(blob)
+          this.props.mediaHandler(mediaUrl, this.props.imageId)
+        } 
+      } catch (error) {
+        console.error('@GetMedia thumbnail context - error: ', error)
+      }
+    } else if(context === 'original-or-video') {
+      try {
+        const response = await fetch(`${this.okapiURL}/incidents/${id}/media/${imageId}`, {
+          method: 'GET',
+          headers: {
+            ...headers
+          }
+        });
+        if(response.status === 200) {
+          const blob = await response.blob();
+          const mediaUrl = URL.createObjectURL(blob)
+          this.props.handleDataResponse(mediaUrl)
+          // this.props.mediaHandler(mediaUrl, this.props.imageId)
+        } 
+      } catch (error) {
+        console.error('@GetMedia - error: ', error)
+      }
+    } else if(context === 'document') {
+      try {
+        const response = await fetch(`${this.okapiURL}/incidents/${id}/media/${imageId}`, {
+          method: 'GET',
+          headers: {
+            ...headers
+          }
+        });
+        if(response.status === 200) {
+          // console.log("context === 'document' RAN, the response: ", response)
+          const blob = await response.blob();
+          const mediaUrl = URL.createObjectURL(blob)
+          this.props.mediaHandler(mediaUrl, this.props.imageId)
+        } 
+      } catch (error) {
+        console.error('@GetMedia - error: ', error)
+      }
+    } else {
+      console.log("@GetMedia - no context provided")
+    }
+  };
+
+  render() {
+    return null;
+  };
+};
+
+export default stripesConnect(GetMedia, '@spokane-folio/security-incident')

package/src/components/incidents/GetName.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class GetName extends React.Component {
+  static contextType = IncidentContext;
+  static manifest = Object.freeze({
+    customer: {
+      type: 'okapi',
+      accumulate: true,
+      throwErrors: false // handle 4xx/5xx errors on our own
+    },
+  });
+
+  static propTypes = {
+    context: PropTypes.string,
+    uuid: PropTypes.string,
+    isCustomWitness: PropTypes.object,
+    handleGetWitnessName: PropTypes.func,
+    handleGetCustName: PropTypes.func,
+    handleGetCreatedByName: PropTypes.func,
+    handleGetUpdatedByName: PropTypes.func,
+    mutator: PropTypes.shape({
+      customer: PropTypes.shape({
+        GET: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  componentDidMount() {
+    this.fetchName();
+  };
+
+  componentDidUpdate(prevProps) {
+    if (this.props.uuid !== prevProps.uuid) {
+      this.fetchName();
+    }
+  };
+
+  fetchName() {
+    // if we have a custom witness, skip the network call:
+    if (this.props.isCustomWitness) {
+      const customWitnessRecord = {
+        id: this.props.isCustomWitness.id,
+        barcode: this.props.isCustomWitness.barcode,
+        firstName: this.props.isCustomWitness.firstName,
+        lastName: this.props.isCustomWitness.lastName,
+        role: this.props.isCustomWitness.role,
+        phone: this.props.isCustomWitness.phone,
+        email: this.props.isCustomWitness.email,
+        isCustom: this.props.isCustomWitness.isCustom
+      };
+      this.props.handleGetWitnessName(customWitnessRecord);
+      return;
+    }
+
+    // fetch customer at /users via uuid
+    if (this.props.uuid) {
+      this.props.mutator.customer
+        .GET({
+          path: `users/${this.props.uuid}`,
+          throwErrors: false
+        })
+        .then((response) => {
+          if (response && response.httpStatus === 404) {
+            console.log(`@GetName: user for uuid="${this.props.uuid}" not found.`);
+            return;
+          };
+
+
+          if (response && response.id) {
+            const refinedRecord = {
+              id: response.id,
+              barcode: response.barcode,
+              firstName: response.personal.firstName,
+              lastName: response.personal.lastName,
+              profilePicLinkOrUUID: response.personal.profilePictureLink ? response.personal.profilePictureLink : ''
+            };
+
+            if (this.props.context === 'customer') {
+              this.props.handleGetCustName(refinedRecord);
+            } else if (this.props.context === 'witness') {
+              this.props.handleGetWitnessName(refinedRecord);
+            } else if (this.props.context === 'createdBy') {
+              this.props.handleGetCreatedByName(refinedRecord);
+            } else if (this.props.context === 'updatedBy') {
+              this.props.handleGetUpdatedByName(refinedRecord);
+            } else {
+              console.log('@fetchName - something went wrong - no data context recognized');
+            }
+          };
+        })
+        .catch((error) => {
+          // if stripes-connect rejects the promise
+          if (error?.httpStatus === 404) {
+            console.log(`@GetName: user for uuid="${this.props.uuid}" not found.`);
+            this.props.handleMissingUsers(this.props.uuid)
+            return;
+          }
+          console.error('@GetName: unhandled error fetching user:', error);
+        });
+    };
+  };
+
+  render() {
+    return null; 
+  };
+};
+
+export default stripesConnect(GetName, '@spokane-folio/security-incident');