@spokane-folio/security-incident 1.0.28

package/src/settings/IncidentTypeDetailsPane.js

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { useParams } from 'react-router-dom';
+import {
+  AccordionSet,
+  Accordion,
+  Button,
+  Col,
+  Dropdown,
+  DropdownMenu,
+  Label,
+  Pane,
+  PaneHeader,
+  PaneMenu,
+  Row,
+} from '@folio/stripes/components';
+import GetIncidentCategories from './GetIncidentCategories';
+import GetSingleIncidentTypeDetails from './GetSingleIncidentTypeDetails';
+import ModalDeleteIncidentType from './ModalDeleteIncidentType';
+import GetIncidentTypesDetails from './GetIncidentTypesDetails';
+import PutIncidentType from './PutIncidentType';
+import getCategoryTitleById from './helpers/getCategoryTitleById';
+import { useIncidents } from '../contexts/IncidentContext';
+
+const IncidentTypeDetailsPane = ({
+  handleCloseDetails,
+  handleShowEdit,
+  ...props
+}) => {
+  const { incidentCategories } = useIncidents();
+  const { id } = useParams();
+  const [detailsData, setDetailsData] = useState(null);
+  const [allIncidentTypes, setAllIncidentTypes] = useState([]);
+  const [isClickDelete, setIsClickDelete] = useState(false);
+  const [toDeleteId, setToDeleteId] = useState(null);
+  const [formattedData, setFormattedData] = useState(null);
+
+  const handleFetchedDetails = (data) => {
+    setDetailsData(data);
+  };
+
+  const handleIncidentTypes = (data) => {
+    setAllIncidentTypes(data);
+  };
+
+  const handleShowModal = (incidentTypeId) => {
+    setIsClickDelete(true);
+    setToDeleteId(incidentTypeId);
+  };
+
+  const handleCloseModal = () => {
+    setIsClickDelete(false);
+    setToDeleteId(null);
+  };
+
+  const handleDeleteSuccess = () => {
+    handleCloseModal();
+    handleCloseDetails();
+  };
+
+  const handleDelete = () => {
+    if (toDeleteId) {
+      const updatedIncidentTypes = allIncidentTypes.filter((type) => {
+        return type.id !== toDeleteId;
+      });
+      const readyFormattedData = {
+        data: {
+          value: {
+            incidentTypes: updatedIncidentTypes
+          }
+        }
+      }
+      setFormattedData(readyFormattedData);
+    }
+  };
+
+  const { category_id, title, description } = detailsData || {};
+
+
+  const categoryTitle = React.useMemo(
+    () => getCategoryTitleById(incidentCategories, category_id),
+    [incidentCategories, category_id]
+  );
+  
+
+
+
+  const style = {
+    display: 'block',
+    width: '50%',
+    marginTop: '10px',
+  };
+
+  const lastMenu = (
+    <PaneMenu>
+      <Dropdown
+        label={<FormattedMessage id="dropdown-actions-button" />}
+        buttonProps={{ buttonStyle: 'primary' }}
+        style={{ marginTop: '8px' }}
+      >
+        <DropdownMenu>
+          <Button
+            buttonStyle="primary"
+            style={style}
+            onClick={() => handleShowEdit(id)}
+          >
+            <FormattedMessage id="edit-button" />
+          </Button>
+          <Button
+            buttonStyle="warning"
+            style={style}
+            onClick={() => handleShowModal(id)}
+          >
+            <FormattedMessage id="settings.incident-types.details-delete-button" />
+          </Button>
+        </DropdownMenu>
+      </Dropdown>
+    </PaneMenu>
+  );
+
+  const renderHeader = (renderProps) => (
+    <PaneHeader
+      {...renderProps}
+      dismissible
+      onClose={handleCloseDetails}
+      paneTitle={
+        <FormattedMessage id="settings.incident-types.details.paneTitle" />
+      }
+      lastMenu={lastMenu}
+    />
+  );
+
+  return (
+    <Pane
+      defaultWidth="70%"
+      paneTitle={
+        <FormattedMessage id="settings.incident-types.details.paneTitle" />
+      }
+      renderHeader={renderHeader}
+    >
+      <GetIncidentCategories />
+      <GetSingleIncidentTypeDetails
+        key={id}
+        detailsId={id}
+        handleFetchedDetails={handleFetchedDetails}
+      />
+      <GetIncidentTypesDetails
+        context="settings"
+        handleIncidentTypes={handleIncidentTypes}
+      />
+      {formattedData && (
+        <PutIncidentType
+          data={formattedData}
+          context="details"
+          handleDeleteSuccess={handleDeleteSuccess}
+        />
+      )}
+      {isClickDelete && (
+        <ModalDeleteIncidentType
+          isOpen={isClickDelete}
+          onClose={handleCloseModal}
+          onConfirm={handleDelete}
+        />
+      )}
+
+      <AccordionSet>
+        <Accordion
+          label={
+            <FormattedMessage id="settings.incident-types.details.accordion-general-info-label" />
+          }
+        >
+          <Row>
+            <Col xs={8}>
+              <Col>
+                <Label style={{ marginTop: '5px' }} size="medium" tag="h2">
+                  <FormattedMessage id="settings.incident-types.details.title-label" />
+                </Label>
+                <p>{title}</p>
+              </Col>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={8}>
+              <Col>
+                <Label style={{ marginTop: '5px' }} size="medium" tag="h2">
+                  <FormattedMessage id="settings.incident-types.details.category-label" />
+                </Label>
+                <p>{getCategoryTitleById(incidentCategories, category_id)}</p>
+              </Col>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={10}>
+              <Label style={{ marginTop: '5px' }} size="medium" tag="h2">
+                <FormattedMessage id="settings.incident-types.details.description-label" />
+              </Label>
+              <p>{description}</p>
+            </Col>
+          </Row>
+        </Accordion>
+        <Accordion
+          label={<FormattedMessage id="settings.additional-accordion-label" />}
+        />
+      </AccordionSet>
+    </Pane>
+  );
+};
+
+IncidentTypeDetailsPane.propTypes = {
+  handleCloseDetails: PropTypes.func.isRequired,
+  handleShowEdit: PropTypes.func.isRequired,
+};
+
+export default IncidentTypeDetailsPane;

package/src/settings/IncidentTypeDetailsPane.test.js

@@ -0,0 +1,220 @@
+/**
+ * IncidentTypeDetailsPane.test.js
+ * Snapshot + smoke + basic behavior tests for the IncidentTypeDetailsPane.
+ */
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createRoot } from 'react-dom/client';
+import IncidentTypeDetailsPane from './IncidentTypeDetailsPane';
+
+/* ------------------------------------------------------------------ *
+ * 1) external-library mocks
+ * ------------------------------------------------------------------ */
+jest.mock('react-intl', () => ({
+  useIntl          : () => ({ formatMessage: ({ id }) => id }),
+  FormattedMessage : (p) => <span>{p.id}</span>,
+}));
+
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({ id: 't1' }),
+}));
+
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  const mk = (tag) => (p) => React.createElement(tag, p, p.children);
+
+  // Pane: render header (so lastMenu appears) and children
+  const Pane = (p) => (
+    <div>
+      {typeof p.renderHeader === 'function' ? p.renderHeader({}) : p.renderHeader}
+      {p.children}
+      {p.footer}
+    </div>
+  );
+
+  // PaneHeader: include lastMenu so dropdown content is in DOM
+  const PaneHeader = (p) => <div>{p.children}{p.lastMenu}</div>;
+
+  // Simple dropdowns: just render children (always "open" for tests)
+  const Dropdown     = (p) => <div>{p.children}</div>;
+  const DropdownMenu = (p) => <div>{p.children}</div>;
+
+  // Buttons must be clickable
+  const Button = (p) => <button {...p}>{p.children}</button>;
+
+  return {
+    Accordion      : mk('div'),
+    AccordionSet   : mk('div'),
+    Button,
+    Col            : mk('div'),
+    Dropdown,
+    DropdownMenu,
+    Label          : mk('label'),
+    Pane,
+    PaneHeader,
+    PaneMenu       : mk('div'),
+    Paneset        : mk('div'),
+    Row            : mk('div'),
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 2) child-component mocks
+ * ------------------------------------------------------------------ */
+// Provide categories via context; this component also calls GetIncidentCategories
+jest.mock('./GetIncidentCategories', () => () => (
+  <div>Mock GetIncidentCategories</div>
+));
+
+// Feed details so content fields render
+jest.mock('./GetSingleIncidentTypeDetails', () => {
+  const React = require('react');
+  return (props) => {
+    React.useEffect(() => {
+      props.handleFetchedDetails?.({
+        id: 't1',
+        title: 'Type 1 - Disorderly',
+        category_id: 'cat-1',
+        description: 'Initial description',
+      });
+    }, []);
+    return <div>Mock GetSingleIncidentTypeDetails</div>;
+  };
+});
+
+// Provide all types so delete logic can filter & submit
+jest.mock('./GetIncidentTypesDetails', () => {
+  const React = require('react');
+  return (props) => {
+    React.useEffect(() => {
+      props.handleIncidentTypes?.([
+        { id: 't1', title: 'Type 1 - Disorderly', category_id: 'cat-1', description: 'Initial description' },
+        { id: 't2', title: 'Type 2 - Theft',       category_id: 'cat-2', description: 'Other' },
+      ]);
+    }, []);
+    return <div>Mock GetIncidentTypesDetails</div>;
+  };
+});
+
+// Render a confirm/close pair to drive the deletion flow
+jest.mock('./ModalDeleteIncidentType', () => (p) => (
+  p.isOpen ? (
+    <div>
+      <div>Mock ModalDeleteIncidentType</div>
+      <button onClick={p.onConfirm}>confirm-delete</button>
+      <button onClick={p.onClose}>close-modal</button>
+    </div>
+  ) : null
+));
+
+// Marker for submission
+jest.mock('./PutIncidentType', () => (p) => (
+  <div>Mock PutIncidentType (context={p?.context})</div>
+));
+
+/* ------------------------------------------------------------------ *
+ * 3) IncidentContext mock
+ * ------------------------------------------------------------------ */
+jest.mock('../contexts/IncidentContext', () => ({
+  useIncidents: () => ({
+    incidentCategories: [
+      { id: 'cat-1', title: 'Behavior' },
+      { id: 'cat-2', title: 'Property' },
+    ],
+  }),
+}));
+
+/* ------------------------------------------------------------------ *
+ * 4) 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;
+});
+
+/* ------------------------------------------------------------------ *
+ * 5) helpers
+ * ------------------------------------------------------------------ */
+const findButtonByText = (rootEl, text) =>
+  Array.from(rootEl.querySelectorAll('button')).find(b => (b.textContent || '').includes(text));
+
+/* ------------------------------------------------------------------ *
+ * 6) tests
+ * ------------------------------------------------------------------ */
+it('renders without crashing (snapshot)', async () => {
+  await act(async () => {
+    root.render(
+      <IncidentTypeDetailsPane handleCloseDetails={jest.fn()} handleShowEdit={jest.fn()} />
+    );
+  });
+  await act(async () => {}); // flush effects
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('mounts key child components', async () => {
+  await act(async () => {
+    root.render(
+      <IncidentTypeDetailsPane handleCloseDetails={jest.fn()} handleShowEdit={jest.fn()} />
+    );
+  });
+  await act(async () => {});
+  const txt = container.textContent;
+  expect(txt).toContain('Mock GetIncidentCategories');
+  expect(txt).toContain('Mock GetSingleIncidentTypeDetails');
+  expect(txt).toContain('Mock GetIncidentTypesDetails');
+});
+
+it('renders details fields (title, category, description)', async () => {
+  await act(async () => {
+    root.render(
+      <IncidentTypeDetailsPane handleCloseDetails={jest.fn()} handleShowEdit={jest.fn()} />
+    );
+  });
+  await act(async () => {});
+  const txt = container.textContent;
+  expect(txt).toContain('Type 1 - Disorderly'); // title
+  expect(txt).toContain('Behavior');            // category (resolved by helper against context)
+  expect(txt).toContain('Initial description'); // description
+});
+
+it('invokes handleShowEdit when Edit is clicked', async () => {
+  const onEdit = jest.fn();
+  await act(async () => {
+    root.render(
+      <IncidentTypeDetailsPane handleCloseDetails={jest.fn()} handleShowEdit={onEdit} />
+    );
+  });
+  await act(async () => {});
+  const editBtn = findButtonByText(container, 'edit-button');
+  expect(editBtn).toBeTruthy();
+  await act(async () => { editBtn.click(); });
+  expect(onEdit).toHaveBeenCalledWith('t1');
+});
+
+it('opens delete modal and submits PutIncidentType on confirm', async () => {
+  await act(async () => {
+    root.render(
+      <IncidentTypeDetailsPane handleCloseDetails={jest.fn()} handleShowEdit={jest.fn()} />
+    );
+  });
+  await act(async () => {});
+  // Click the delete action in the dropdown
+  const deleteBtn = findButtonByText(container, 'settings.incident-types.details-delete-button');
+  expect(deleteBtn).toBeTruthy();
+  await act(async () => { deleteBtn.click(); });
+
+  // Modal should be visible; confirm deletion
+  const confirm = findButtonByText(container, 'confirm-delete');
+  expect(confirm).toBeTruthy();
+  await act(async () => { confirm.click(); });
+
+  // Submission marker appears
+  expect(container.textContent).toContain('Mock PutIncidentType (context=details)');
+});

package/src/settings/IncidentTypeEditPane.js

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { useParams } from 'react-router-dom';
+import {
+  Accordion,
+  AccordionSet,
+  Button,
+  Col,
+  Pane,
+  PaneHeader,
+  PaneFooter,
+  Row,
+  Select,
+  TextArea,
+  TextField,
+} from '@folio/stripes/components';
+import GetSingleIncidentTypeDetails from './GetSingleIncidentTypeDetails';
+import GetIncidentTypesDetails from './GetIncidentTypesDetails';
+import GetIncidentCategories from './GetIncidentCategories';
+import PutIncidentType from './PutIncidentType';
+import { useIncidents } from '../contexts/IncidentContext';
+
+const IncidentTypeEditPane = ({ handleCloseEdit, ...props }) => {
+
+  const { incidentCategories } = useIncidents();
+  const { id } = useParams();
+  const [detailsData, setDetailsData] = useState(null);
+  // const [incidentCategories, setIncidentCategories] = useState([]);
+  const [allIncidentTypes, setAllIncidentTypes] = useState([]);
+  const [formattedData, setFormattedData] = useState(null);
+  const [formData, setFormData] = useState({
+    title: '',
+    category_id: '',
+    description: '',
+  });
+
+  const handleFetchedDetails = (data) => {
+    setDetailsData(data);
+  };
+
+  // const handleFetchedCategories = (data) => {
+  //   setIncidentCategories(data);
+  // };
+
+  const handleIncidentTypes = (data) => {
+    setAllIncidentTypes(data);
+  };
+
+  const dataOptions = incidentCategories.map((category) => ({
+    value: category.id,
+    label: category.title,
+  }));
+
+  useEffect(() => {
+    if (detailsData) {
+      setFormData({
+        title: detailsData.title || '',
+        category_id: detailsData.category_id || '',
+        description: detailsData.description || '',
+      });
+    }
+  }, [detailsData]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const isFormDataPresent = () => {
+    return formData.title && formData.category_id && formData.description;
+  };
+
+  const handleSubmit = (e) => {
+    if (e) e.preventDefault();
+    console.log("formData: ", JSON.stringify(formData, null, 2))
+    const updatedIncidentTypes = allIncidentTypes.map((type) => {
+      if (type.id === id) {
+        return { 
+          ...type, 
+          ...formData
+        };
+      } else {
+        return type;
+      }
+    });
+    const formattedReadyData = {
+      data: {
+        value: {
+          incidentTypes: updatedIncidentTypes
+        } 
+      }
+    };
+    setFormattedData(formattedReadyData);
+  };
+
+  const renderHeader = (renderProps) => (
+    <PaneHeader
+      {...renderProps}
+      dismissible
+      paneTitle={
+        <FormattedMessage id="settings.incident-types-edit.paneTitle" />
+      }
+      onClose={handleCloseEdit}
+    />
+  );
+
+  const footer = (
+    <PaneFooter
+      renderStart={
+        <Button onClick={handleCloseEdit}>
+          <FormattedMessage id="cancel-button" />
+        </Button>
+      }
+      renderEnd={
+        <Button
+          buttonStyle="primary"
+          onClick={handleSubmit}
+          disabled={!isFormDataPresent()}
+        >
+          <FormattedMessage id="save-and-close-button" />
+        </Button>
+      }
+    />
+  );
+
+  return (
+    <Pane defaultWidth="100%" renderHeader={renderHeader} footer={footer}>
+      <GetSingleIncidentTypeDetails
+        detailsId={id}
+        handleFetchedDetails={handleFetchedDetails}
+      />
+      <GetIncidentCategories />
+      <GetIncidentTypesDetails
+        context="settings"
+        handleIncidentTypes={handleIncidentTypes}
+      />
+      {formattedData && (
+        <PutIncidentType
+          data={formattedData}
+          context="edit"
+          handleCloseEdit={handleCloseEdit}
+        />
+      )}
+
+      <AccordionSet>
+        <Accordion
+          label={
+            <FormattedMessage id="settings.incident-types-edit.type-info-accordion-label" />
+          }
+        >
+          <Row>
+            <Col xs={8}>
+              <Col>
+                <TextField
+                  required={true}
+                  label={
+                    <FormattedMessage id="settings.incident-types-edit.title-text-field-label" />
+                  }
+                  name="title"
+                  value={formData.title}
+                  onChange={handleChange}
+                />
+              </Col>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={4}>
+              <Col>
+                <Select
+                  required={true}
+                  label={
+                    <FormattedMessage id="settings.incident-types-edit.category-select-label" />
+                  }
+                  name="category_id"
+                  value={formData.category_id}
+                  placeholder="Select a category"
+                  dataOptions={dataOptions}
+                  onChange={handleChange}
+                />
+              </Col>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={6}>
+              <TextArea
+                required={true}
+                label={
+                  <FormattedMessage id="settings.incident-types-edit.description-text-area-label" />
+                }
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                style={{ width: '100%', height: '200px' }}
+              />
+            </Col>
+          </Row>
+        </Accordion>
+      </AccordionSet>
+    </Pane>
+  );
+};
+
+IncidentTypeEditPane.propTypes = {
+  handleCloseEdit: PropTypes.func.isRequired,
+};
+
+export default IncidentTypeEditPane;