Transaction log ILLDEV-380

ui-rs/src/components/EventLog/EventLog.css

@@ -0,0 +1,93 @@
+.eventCard {
+  background-color: #ffe7ff;
+}
+
+.eventCardHeader {
+  background-color: #f4cdf4;
+  font-weight: var(--text-weight-bold);
+}
+
+.filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 12rem;
+}
+
+.filterCount {
+  white-space: nowrap;
+  font-weight: var(--text-weight-regular);
+  color: var(--color-text-p2);
+  font-size: var(--font-size-small);
+}
+
+.summaryDivider {
+  border-top: 1px solid var(--color-border-p2);
+  margin: 0.5rem 0;
+}
+
+.entryList {
+  display: flex;
+  flex-direction: column;
+}
+
+.entry + .entry {
+  border-top: 1px solid var(--color-border-p2);
+}
+
+.entryHeader {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4rem 0.5rem;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.entryHeader:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.entryHeader:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
+.entryCaret {
+  display: inline-flex;
+  align-items: center;
+}
+
+.entryTitle {
+  font-weight: var(--text-weight-medium);
+  white-space: nowrap;
+}
+
+.entrySummary {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--color-text-p2);
+}
+
+.entryTime {
+  white-space: nowrap;
+  color: var(--color-text-p2);
+  font-size: var(--font-size-small);
+}
+
+.matchLine {
+  background-color: var(--highlighter-fill);
+}
+
+.entryBody {
+  padding: 0.5rem 0.5rem 0.75rem;
+  background-color: rgba(255, 255, 255, 0.5);
+}

ui-rs/src/components/EventLog/EventLog.js

@@ -0,0 +1,83 @@
+import { useMemo, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Card, SearchField } from '@folio/stripes/components';
+import EventLogRow from './EventLogRow';
+import css from './EventLog.css';
+
+// Shared broker event log. The filter searches the same JSON shown in each
+// entry's raw-data accordion.
+const EventLog = ({
+  events = [],
+  cardId,
+  header,
+  emptyMessageId = 'ui-rs.eventHistory.empty',
+  children,
+}) => {
+  const intl = useIntl();
+  const [query, setQuery] = useState('');
+
+  // Avoid serializing every event again on each keystroke.
+  const searchable = useMemo(
+    () => events.map((event) => [event, JSON.stringify(event, null, 2).toLowerCase()]),
+    [events]
+  );
+  const filterQuery = query.trim().toLowerCase();
+  const visible = filterQuery
+    ? searchable.filter(([, json]) => json.includes(filterQuery)).map(([event]) => event)
+    : events;
+
+  let content;
+  if (events.length === 0) {
+    content = <FormattedMessage id={emptyMessageId} />;
+  } else if (visible.length === 0) {
+    content = <FormattedMessage id="ui-rs.eventLog.noMatches" />;
+  } else {
+    content = (
+      <div className={css.entryList}>
+        {visible.map((event) => (
+          <EventLogRow key={event.id} event={event} filterQuery={filterQuery} />
+        ))}
+      </div>
+    );
+  }
+
+  const label = intl.formatMessage({ id: 'ui-rs.eventLog.filter' });
+  const filter = events.length > 0 && (
+    <div className={css.filter}>
+      {filterQuery && (
+        <span className={css.filterCount}>
+          <FormattedMessage
+            id="ui-rs.eventLog.matchCount"
+            values={{ count: visible.length, total: events.length }}
+          />
+        </span>
+      )}
+      <SearchField
+        id={`${cardId}-filter`}
+        ariaLabel={label}
+        placeholder={label}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onClear={() => setQuery('')}
+        marginBottom0
+      />
+    </div>
+  );
+
+  return (
+    <Card
+      id={cardId}
+      headerStart={header}
+      headerEnd={filter}
+      roundedBorder
+      cardClass={css.eventCard}
+      headerClass={css.eventCardHeader}
+    >
+      {children}
+      {children && <div className={css.summaryDivider} />}
+      {content}
+    </Card>
+  );
+};
+
+export default EventLog;

ui-rs/src/components/EventLog/EventLog.test.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { fireEvent, screen } from '@folio/jest-config-stripes/testing-library/react';
+
+import { renderWithRs } from '../../test/renderWithRs';
+import EventLog from './EventLog';
+
+jest.mock('@folio/stripes-components/lib/Icon', () => require('../../test/iconMock').default);
+
+// Jest cannot parse react-syntax-highlighter's ESM entry points.
+jest.mock('react-syntax-highlighter', () => ({
+  LightAsync: ({ children }) => require('react').createElement('pre', null, children),
+}));
+jest.mock('react-syntax-highlighter/dist/esm/styles/hljs', () => ({ github: { hljs: {} } }));
+
+const renderLog = (events) => renderWithRs(
+  <EventLog events={events} header="header" cardId="card" />,
+  { messages: { 'ui-rs.eventLog.matchCount': '{count} of {total}' } }
+);
+
+const makeEvent = (over) => ({
+  id: 'ev-1',
+  timestamp: '2026-01-05T12:00:00Z',
+  eventName: 'invoke-action',
+  eventType: 'TASK',
+  eventStatus: 'SUCCESS',
+  eventData: {},
+  resultData: {},
+  ...over,
+});
+
+const events = [
+  makeEvent({ id: 'ev-1', eventData: { action: 'Request', user: 'jsmith' } }),
+  makeEvent({
+    id: 'ev-2',
+    eventData: { action: 'Cancel', user: 'jsmith', customData: { trace: 'raw-only-value' } },
+  }),
+  makeEvent({ id: 'ev-3', eventName: 'message-supplier', eventData: { user: 'apatel' } }),
+];
+
+const rows = () => screen.getAllByRole('button').filter((b) => b.className === 'entryHeader');
+const filterBox = () => screen.getByRole('searchbox');
+
+describe('EventLog', () => {
+  it('reads action, actor and message payloads off the event', () => {
+    renderLog([makeEvent({
+      eventData: { action: 'Request', user: 'jsmith', outgoingMessage: { request: {} } },
+    })]);
+
+    expect(screen.getByText(/ui-rs\.eventHistory\.event\.invokeAction: Request/)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /invokeAction/ }));
+
+    expect(screen.getByText('jsmith')).toBeInTheDocument();
+    expect(screen.getByText('Request')).toBeInTheDocument();
+    expect(screen.getByText('ui-rs.eventHistory.isoOutgoing')).toBeInTheDocument();
+  });
+
+  it('filters as you type on raw event JSON, counts matches, and restores on clear', () => {
+    renderLog(events);
+    expect(rows()).toHaveLength(3);
+    expect(screen.queryByText('3 of 3')).not.toBeInTheDocument();
+
+    fireEvent.focus(filterBox());
+    fireEvent.change(filterBox(), { target: { value: 'raw-only-value' } });
+    expect(rows()).toHaveLength(1);
+    expect(screen.getByText('1 of 3')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /clearThisField/i }));
+    expect(filterBox()).toHaveValue('');
+    expect(rows()).toHaveLength(3);
+  });
+
+  it('distinguishes no matches from an empty log', () => {
+    renderLog(events);
+    fireEvent.change(filterBox(), { target: { value: 'nothing-matches-this' } });
+    expect(screen.getByText('ui-rs.eventLog.noMatches')).toBeInTheDocument();
+    expect(screen.queryByText('ui-rs.eventHistory.empty')).not.toBeInTheDocument();
+
+    renderLog([]);
+    expect(screen.getByText('ui-rs.eventHistory.empty')).toBeInTheDocument();
+  });
+});