@spokane-folio/security-incident 1.0.28

package/src/settings/IncidentCategoriesPane.js

@@ -0,0 +1,285 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Col,
+  MultiColumnList,
+  Pane,
+  PaneHeader,
+  Row,
+  TextField,
+} from '@folio/stripes/components';
+import makeId from './helpers/makeId';
+import GetIncidentCategories from './GetIncidentCategories';
+import ModalDeleteCategory from './ModalDeleteCategory';
+import { IncidentContext } from '../contexts/IncidentContext';
+
+class IncidentCategoriesPane extends React.Component {
+  static contextType = IncidentContext;
+  static manifest = Object.freeze({
+    incidentCategory: {
+      type: 'okapi',
+      path: 'incidents/configurations/incident-categories',
+      PUT: {
+        path: `incidents/configurations/incident-categories`, 
+      },
+      accumulate: true,
+    },
+  });
+
+  static propTypes = {
+    data: PropTypes.string,
+    mutator: PropTypes.shape({
+      incidentCategory: PropTypes.shape({
+        PUT: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      editableData: [], // local copy for edit in mcl
+      editRow: null,
+      isClickDelete: false,
+      toDeleteId: null,
+      prevContextCategories: null // local tracker for comparison
+    };
+  }
+
+  // move to setting 'setState editableData' with this.context.incidentCategories
+  // handleFetchedCategories = (data) => {
+  //   this.setState({ editableData: data });
+  // };
+
+  componentDidMount() {
+    const { incidentCategories } = this.context;
+    if (incidentCategories?.length) {
+      this.setState({
+        editableData: incidentCategories,
+        prevContextCategories: incidentCategories // hold what is used
+      })
+    }
+  }
+
+  componentDidUpdate() {
+    const { incidentCategories } = this.context;
+    if (incidentCategories !== this.state.prevContextCategories) {
+      this.setState({
+        editableData: incidentCategories,
+        prevContextCategories: incidentCategories // hold what is used
+      })
+    }
+  }
+
+  handleTitleChange = (newTitle, id) => {
+    this.setState((prevState) => ({
+      editableData: prevState.editableData.map((item) =>
+        item.id === id ? { ...item, title: newTitle } : item
+      ),
+    }));
+  };
+
+  handleEdit = (id) => {
+    this.setState({ editRow: id });
+  };
+
+  preventDuplicateId = (itemTitle) => {
+    const existingIds = new Set(this.state.editableData.map(cat => cat.id));
+    const baseId = makeId(itemTitle);
+    if (!existingIds.has(baseId)) return baseId; 
+
+    // else increment made id value "-1", "-2", ... until gap
+    let i = 1;
+    let candidate;
+    do {
+      candidate = `${baseId}-${i}`;
+      i += 1; 
+    } while (existingIds.has(candidate));
+
+    return candidate
+  };
+
+  handleSave = () => {
+    const isNewCategory = this.state.editRow === -1;
+    let updatedCategories = [...this.state.editableData];
+
+    if (isNewCategory) {
+      updatedCategories = updatedCategories.map((item) =>
+        item.id === -1 ? { ...item, id: this.preventDuplicateId(item.title) } : item
+      );
+    };
+
+    console.log("@handleSave - updatedCategories --> ", JSON.stringify(updatedCategories, null, 2))
+
+    const formattedReadyData = {
+      data: { 
+        value:  {
+          categories: updatedCategories
+        }  
+      }
+    };
+
+    console.log("formattedReadyData --> ", JSON.stringify(formattedReadyData, null, 2))
+
+    this.props.mutator.incidentCategory
+      .PUT(formattedReadyData)
+      .then((response) => {
+        console.log('update successful - response: ', JSON.stringify(response, null,2));
+      })
+      .catch((error) => {
+        console.error('@IncidentCategoriesPane error updating: ', error);
+      });
+    this.setState({ editRow: null });
+  };
+
+  handleCancelEdit = () => {
+    this.setState((prevState) => {
+      const updatedCategories = prevState.editableData.filter(
+        (item) => item.id !== -1
+      );
+      return {
+        editableData: updatedCategories,
+        // reset editRow to null for both cancel edit and cancel new
+        editRow: null,
+      };
+    });
+  };
+
+  handleNew = () => {
+    const newCategory = {
+      id: -1,
+      title: '',
+    };
+    this.setState((prevState) => ({
+      editableData: [newCategory, ...prevState.editableData],
+      editRow: -1,
+    }));
+  };
+
+  handleShowModal = (id) => {
+    this.setState({ isClickDelete: true, toDeleteId: id });
+  };
+
+  handleCloseModal = () => {
+    this.setState({ isClickDelete: false, toDeleteId: null });
+  };
+
+  handleDelete = () => {
+    const { toDeleteId } = this.state;
+    if (toDeleteId) {
+      this.setState(
+        (prevState) => {
+          const updatedCategories = prevState.editableData.filter(
+            (item) => item.id !== toDeleteId
+          );
+          return { editableData: updatedCategories };
+        },
+        () => {
+          const readyFormattedData = {
+            data: {
+              value: {
+                categories: this.state.editableData,
+              }
+            }
+          };
+          this.props.mutator.incidentCategory
+            .PUT(readyFormattedData)
+            .then(() => {
+              console.log('removal and update successful');
+            })
+            .catch((error) => {
+              console.error('error in updating after removal: ', error);
+            });
+          this.handleCloseModal();
+        }
+      );
+    }
+  };
+
+  render() {
+    const { editableData, editRow, isClickDelete } = this.state;
+    const resultsFormatter = {
+      title: (item) =>
+        editRow === item.id ? (
+          <TextField
+            value={editableData.find((cat) => cat.id === item.id).title}
+            onChange={(e) => this.handleTitleChange(e.target.value, item.id)}
+          />
+        ) : (
+          item.title
+        ),
+      id: (item) => (
+        <div>
+          {editRow === item.id ? (
+            <div>
+              <Button onClick={this.handleCancelEdit}>
+                <FormattedMessage id="settings.categories-cancel-button" />
+              </Button>
+              <Button onClick={this.handleSave}>
+                <FormattedMessage id="settings.categories-save-button" />
+              </Button>
+            </div>
+          ) : (
+            <div>
+              <Button onClick={() => this.handleEdit(item.id)}>
+                <FormattedMessage id="edit-button" />
+              </Button>
+              <Button onClick={() => this.handleShowModal(item.id)}>
+                <FormattedMessage id="settings.categories-delete-button" />
+              </Button>
+            </div>
+          )}
+        </div>
+      ),
+    };
+
+    const columnWidths = {
+      title: '225px'
+    }
+
+    return (
+      <Pane
+        paneTitle="Incident categories"
+        defaultWidth="fill"
+        renderHeader={(renderProps) => <PaneHeader {...renderProps} />}
+      >
+        <Row>
+          <Col xs={10}>
+            <Button buttonStyle="primary" onClick={this.handleNew}>
+              <FormattedMessage id="settings.categories-new-button" />
+            </Button>
+          </Col>
+        </Row>
+        <MultiColumnList
+          contentData={editableData}
+          formatter={resultsFormatter}
+          visibleColumns={['title', 'id']}
+          columnWidths={columnWidths}
+          isEmptyMessage={<FormattedMessage id="settings.categories.mcl-isEmptyMsg" />}
+          columnMapping={{
+            title: 
+              <FormattedMessage id="settings.categories.column-mapping-title" />
+            ,
+            id: 
+              <FormattedMessage id="settings.categories.column-mapping-actions" />
+            ,
+          }}
+        />
+        <GetIncidentCategories />
+        {isClickDelete && (
+          <ModalDeleteCategory
+            isOpen={isClickDelete}
+            onClose={this.handleCloseModal}
+            onConfirm={this.handleDelete}
+          />
+        )}
+      </Pane>
+    );
+  }
+}
+IncidentCategoriesPane.contextType = IncidentContext;
+
+export default stripesConnect(IncidentCategoriesPane);

package/src/settings/IncidentCategoriesPane.test.js

@@ -0,0 +1,229 @@
+/**
+ * IncidentCategoriesPane.test.js
+ * Snapshot + smoke + basic behavior tests for the IncidentCategoriesPane.
+ */
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import IncidentCategoriesPane from './IncidentCategoriesPane';
+
+/* ------------------------------------------------------------------ *
+ * 1) stripes/core + intl mocks
+ * ------------------------------------------------------------------ */
+jest.mock('@folio/stripes/core', () => ({
+  // Make stripesConnect a no-op so we can pass mutator manually
+  stripesConnect: (C) => C,
+}));
+
+jest.mock('react-intl', () => ({
+  useIntl          : () => ({ formatMessage: ({ id }) => id }),
+  FormattedMessage : (p) => <span>{p.id}</span>,
+}));
+
+/* ------------------------------------------------------------------ *
+ * 2) stripes/components mock
+ * ------------------------------------------------------------------ */
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  const mk = (tag) => (p) => React.createElement(tag, p, p.children);
+
+  // Render header and children so everything shows up in DOM
+  const Pane = (p) => (
+    <div>
+      {typeof p.renderHeader === 'function' ? p.renderHeader({}) : p.renderHeader}
+      {p.children}
+      {p.footer}
+    </div>
+  );
+
+  // Minimal MultiColumnList that applies the provided formatter
+  const MultiColumnList = (p) => {
+    const items = p.contentData || [];
+    const fmt   = p.formatter || {};
+    return (
+      <ul>
+        {items.map((item, i) => (
+          <li key={item.id ?? i}>
+            <div data-col="title">{fmt.title ? fmt.title(item) : item.title}</div>
+            <div data-col="id">{fmt.id ? fmt.id(item) : item.id}</div>
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  // Strip unknown DOM props to avoid warnings
+  const Button = ({ buttonStyle, ...rest }) => <button {...rest}>{rest.children}</button>;
+
+  return {
+    Button,
+    Col            : mk('div'),
+    MultiColumnList,
+    Pane,
+    PaneHeader     : mk('div'),
+    Row            : mk('div'),
+    TextField      : (p) => <input {...p} />,
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 3) child-component + helper mocks
+ * ------------------------------------------------------------------ */
+jest.mock('./GetIncidentCategories', () => () => (
+  <div>Mock GetIncidentCategories</div>
+));
+
+// Ensure deterministic IDs when adding a new category
+jest.mock('./helpers/makeId', () => jest.fn(() => 'new-cat'));
+
+// Simple delete modal that exposes confirm/close actions
+jest.mock('./ModalDeleteCategory', () => (p) =>
+  p.isOpen ? (
+    <div>
+      <div>Mock ModalDeleteCategory</div>
+      <button onClick={p.onConfirm}>confirm-delete</button>
+      <button onClick={p.onClose}>close-modal</button>
+    </div>
+  ) : null
+);
+
+/* ------------------------------------------------------------------ *
+ * 4) IncidentContext mock (class component uses contextType)
+ * ------------------------------------------------------------------ */
+jest.mock('../contexts/IncidentContext', () => {
+  const React = require('react');
+  return {
+    IncidentContext: React.createContext({
+      incidentCategories: [
+        { id: 'cat-1', title: 'Behavior' },
+        { id: 'cat-2', title: 'Property' },
+      ],
+    }),
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 5) DOM setup / teardown
+ * ------------------------------------------------------------------ */
+let container, root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(async () => {
+  // Wrap unmount in act to avoid warnings
+  await act(async () => {
+    root.unmount();
+  });
+  document.body.removeChild(container);
+  container = null;
+});
+
+/* ------------------------------------------------------------------ *
+ * 6) helpers
+ * ------------------------------------------------------------------ */
+const findButtonByText = (rootEl, text) =>
+  Array.from(rootEl.querySelectorAll('button')).find((b) =>
+    (b.textContent || '').includes(text)
+  );
+
+// Reliable flush (micro + macro) to ensure class setState fully commits
+const flushAll = async () => {
+  await act(async () => { await Promise.resolve(); });                     // microtask
+  await act(async () => { await new Promise(r => setTimeout(r, 0)); });    // macrotask
+};
+
+/* ------------------------------------------------------------------ *
+ * 7) tests
+ * ------------------------------------------------------------------ */
+it('renders without crashing (snapshot)', async () => {
+  const mutator = { incidentCategory: { PUT: jest.fn().mockResolvedValue({}) } };
+  await act(async () => {
+    root.render(<IncidentCategoriesPane mutator={mutator} />);
+  });
+  await flushAll();
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('mounts key child components', async () => {
+  const mutator = { incidentCategory: { PUT: jest.fn().mockResolvedValue({}) } };
+  await act(async () => {
+    root.render(<IncidentCategoriesPane mutator={mutator} />);
+  });
+  await flushAll();
+  expect(container.textContent).toContain('Mock GetIncidentCategories');
+});
+
+it('adds a new category and saves (calls PUT with new list)', async () => {
+  const put = jest.fn().mockResolvedValue({});
+  const mutator = { incidentCategory: { PUT: put } };
+
+  await act(async () => {
+    root.render(<IncidentCategoriesPane mutator={mutator} />);
+  });
+  await flushAll();
+
+  // Click "New"
+  const newBtn = findButtonByText(container, 'settings.categories-new-button');
+  expect(newBtn).toBeTruthy();
+  await act(async () => { newBtn.click(); });
+  await flushAll();
+
+  // The edit row input should appear (id = -1)
+  const input = container.querySelector('input');
+  expect(input).toBeTruthy();
+
+  // Type a title for the new category (best-effort – jsdom+class comps can be finicky)
+  await act(async () => {
+    input.value = 'New Category';
+    input.dispatchEvent(new Event('input',  { bubbles: true, cancelable: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+  });
+  await flushAll();
+
+  // Click "Save" within the actions cell for the edit row
+  const saveBtn = findButtonByText(container, 'settings.categories-save-button');
+  expect(saveBtn).toBeTruthy();
+
+  await act(async () => { saveBtn.click(); });
+  await flushAll();
+
+  expect(put).toHaveBeenCalledTimes(1);
+  const payload = put.mock.calls[0][0];
+  const cats = payload?.data?.value?.categories || [];
+  expect(Array.isArray(cats)).toBe(true);
+
+  // Core behavior: a new item with deterministic ID is persisted.
+  // (Avoid asserting the title string due to controlled-input flakiness in jsdom.)
+  const newItem = cats.find((c) => c.id === 'new-cat');
+  expect(!!newItem).toBe(true);
+});
+
+it('deletes a category via the modal and calls PUT with the reduced list', async () => {
+  const put = jest.fn().mockResolvedValue({});
+  const mutator = { incidentCategory: { PUT: put } };
+
+  await act(async () => {
+    root.render(<IncidentCategoriesPane mutator={mutator} />);
+  });
+  await flushAll();
+
+  // Click the first "Delete" button (for cat-1)
+  const delBtn = findButtonByText(container, 'settings.categories-delete-button');
+  expect(delBtn).toBeTruthy();
+  await act(async () => { delBtn.click(); });
+  await flushAll();
+
+  // Modal should render; confirm
+  const confirm = findButtonByText(container, 'confirm-delete');
+  expect(confirm).toBeTruthy();
+  await act(async () => { confirm.click(); });
+  await flushAll();
+
+  expect(put).toHaveBeenCalled();
+  const payload = put.mock.calls[put.mock.calls.length - 1][0];
+  const cats = payload?.data?.value?.categories || [];
+  // cat-1 should be removed; cat-2 should remain
+  expect(cats.some((c) => c.id === 'cat-1')).toBe(false);
+  expect(cats.some((c) => c.id === 'cat-2')).toBe(true);
+});