@truedat/core 8.13.0 → 8.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.13.0",
+  "version": "8.13.1",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.13.0",
+    "@truedat/test": "8.13.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "b9d1c2133cea6293e6a5ce5d198a4cd49133b4c1"
+  "gitHead": "09ce6d3a8693835de75577e43d99d86addb2edf7"
 }

package/src/components/UploadJob.js

@@ -1,113 +1,119 @@
-import _ from "lodash/fp";
-import { useState } from "react";
+import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useParams } from "react-router";
 import {
+  Dimmer,
   Header,
   Icon,
-  Segment,
-  Dimmer,
-  Loader,
-  Table,
   Label,
-  Button,
+  Loader,
+  Segment,
 } from "semantic-ui-react";
 import DateTime from "@truedat/core/components/DateTime";
 import { useUploadJob } from "../hooks/useUploadJobs";
-import { StatusPill, ResponseCell } from "./UploadJobParser";
 import UploadJobBreadcrumbs from "./UploadJobBreadcrumbs";
+import UploadJobHistory from "./UploadJobHistory";
+import { StatusPill } from "./UploadJobParser";
+import UploadJobResults from "./UploadJobResults";
+import UploadJobSummary, { getUploadJobStatus } from "./UploadJobSummary";
+import { getUploadJobScope } from "./UploadJobScope";
 
-export default function UploadJob({ scope }) {
-  const { id } = useParams();
-  const { data, loading } = useUploadJob(id);
-  const job = data?.data;
+export const UploadJobContent = ({ constrainResults, job, loading, scope }) => {
+  const lifecycleStatus = getUploadJobStatus(job?.events, job?.latest_status);
 
-  const { formatMessage } = useIntl();
-  const [expandedGroups, setExpandedGroups] = useState({});
+  return (
+    <Dimmer.Dimmable dimmed={loading}>
+      <Segment attached="bottom" className="upload-job-card">
+        {job ? (
+          <>
+            <div className="upload-job-meta">
+              <div className="upload-job-file">
+                <strong>{job.filename}</strong>
+                <span>{job.hash}</span>
+              </div>
+              <StatusPill status={job.latest_status} />
+              <span>
+                <Label basic size="small" className="upload-job-date-label">
+                  <FormattedMessage
+                    id="uploadJob.table.inserted_at"
+                    defaultMessage="Inserted At"
+                  />
+                </Label>
+                <DateTime value={job.latest_event_at} />
+              </span>
+            </div>
 
-  // Group events by status
-  const groupedEvents = job?.events ? _.groupBy("status", job.events) : {};
+            <UploadJobSummary
+              events={job.events}
+              latestStatus={job.latest_status}
+              latestResponse={job.latest_event_response}
+            />
+            <UploadJobHistory events={job.events} />
+            <UploadJobResults
+              constrainResults={constrainResults}
+              events={job.events}
+              lifecycleStatus={lifecycleStatus}
+              scope={scope}
+            />
+          </>
+        ) : null}
+        {loading ? (
+          <Dimmer active inverted>
+            <Loader />
+          </Dimmer>
+        ) : null}
+      </Segment>
+    </Dimmer.Dimmable>
+  );
+};
 
-  const toggleGroup = (status) => {
-    setExpandedGroups((prev) => ({
-      ...prev,
-      [status]: !prev[status],
-    }));
-  };
+UploadJobContent.propTypes = {
+  constrainResults: PropTypes.bool,
+  job: PropTypes.object,
+  loading: PropTypes.bool,
+  scope: PropTypes.string,
+};
 
-  const renderEventGroup = (status, events) => {
-    const isExpanded = expandedGroups[status];
-    const shouldCollapse = status === "INFO" || status === "ERROR";
+UploadJobContent.defaultProps = {
+  constrainResults: false,
+  job: undefined,
+  loading: false,
+  scope: "implementations",
+};
 
-    if (!shouldCollapse) {
-      // Render non-collapsible events normally
-      return events.map((event, idx) => (
-        <Table.Row key={`${status}-${idx}`}>
-          <Table.Cell>
-            <StatusPill status={event.status} />
-          </Table.Cell>
-          <Table.Cell>
-            <DateTime value={event.inserted_at} />
-          </Table.Cell>
-          <Table.Cell>
-            <ResponseCell {...event} />
-          </Table.Cell>
-        </Table.Row>
-      ));
-    }
+export const UploadJobModalContent = ({ id, scope }) => {
+  const { data, loading } = useUploadJob(id);
 
-    // Render collapsible groups for INFO and ERROR
-    const groupRows = [];
+  return (
+    <UploadJobContent
+      constrainResults
+      job={data?.data}
+      loading={loading}
+      scope={scope}
+    />
+  );
+};
 
-    // Add group header row
-    groupRows.push(
-      <Table.Row
-        key={`${status}-header`}
-        style={{ backgroundColor: "#f8f9fa" }}
-      >
-        <Table.Cell>
-          <Button
-            basic
-            size="mini"
-            icon={isExpanded ? "chevron down" : "chevron right"}
-            content={` ${formatMessage({ id: `uploadJob.event.status.${status}` })} (${events.length})`}
-            onClick={() => toggleGroup(status)}
-            style={{ padding: "0.5em" }}
-          />
-        </Table.Cell>
-        <Table.Cell>
-          <DateTime value={events[0]?.inserted_at} />
-        </Table.Cell>
-        <Table.Cell></Table.Cell>
-      </Table.Row>,
-    );
+UploadJobModalContent.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  scope: PropTypes.string,
+};
 
-    // Add expanded events if group is expanded
-    if (isExpanded) {
-      events.forEach((event, idx) => {
-        groupRows.push(
-          <Table.Row key={`${status}-${idx}`} style={{ paddingLeft: "2em" }}>
-            <Table.Cell style={{ paddingLeft: "2em" }}>
-              <StatusPill status={event.status} />
-            </Table.Cell>
-            <Table.Cell>
-              <DateTime value={event.inserted_at} />
-            </Table.Cell>
-            <Table.Cell>
-              <ResponseCell {...event} />
-            </Table.Cell>
-          </Table.Row>,
-        );
-      });
-    }
+UploadJobModalContent.defaultProps = {
+  scope: "implementations",
+};
 
-    return groupRows;
-  };
+export default function UploadJob({ scope }) {
+  const { id } = useParams();
+  const { data, loading } = useUploadJob(id);
+  const job = data?.data;
+  const { formatMessage } = useIntl();
+  const scopeConfig = getUploadJobScope(scope);
 
   return (
     <>
       <UploadJobBreadcrumbs filename={job?.filename} scope={scope} />
-      <Segment>
+      <Segment className="upload-job-page">
         <Header as="h2">
           <Icon
             circular
@@ -117,101 +123,19 @@ export default function UploadJob({ scope }) {
             })}
           />
           <Header.Content>
-            <FormattedMessage id={`uploadJob.${scope}.header`} />
+            <FormattedMessage id={scopeConfig.detailHeaderId} />
           </Header.Content>
         </Header>
-        <Dimmer.Dimmable dimmed={loading}>
-          <Segment attached="bottom">
-            {job ? (
-              <>
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "1.5em",
-                    marginBottom: "1.5em",
-                    flexWrap: "wrap",
-                  }}
-                >
-                  <div style={{ display: "flex", flexDirection: "column" }}>
-                    <span style={{ fontWeight: 600, fontSize: "1.3em" }}>
-                      {job.filename}
-                    </span>
-                    <span style={{ color: "gray", fontSize: "0.7em" }}>
-                      {job.hash}
-                    </span>
-                  </div>
-                  <span>
-                    <Label basic size="small" style={{ marginRight: 4 }}>
-                      <FormattedMessage
-                        id="uploadJob.table.status"
-                        defaultMessage="Status"
-                      />
-                    </Label>
-                    <StatusPill status={job.latest_status} />
-                  </span>
-                  <span>
-                    <Label basic size="small" style={{ marginRight: 4 }}>
-                      <FormattedMessage
-                        id="uploadJob.table.inserted_at"
-                        defaultMessage="Inserted At"
-                      />
-                    </Label>
-                    <DateTime value={job.latest_event_at} />
-                  </span>
-                </div>
-                <Table>
-                  <Table.Header>
-                    <Table.Row>
-                      <Table.HeaderCell>
-                        <FormattedMessage
-                          id="uploadJob.table.status"
-                          defaultMessage="Status"
-                        />
-                      </Table.HeaderCell>
-                      <Table.HeaderCell>
-                        <FormattedMessage
-                          id="uploadJob.table.inserted_at"
-                          defaultMessage="Inserted At"
-                        />
-                      </Table.HeaderCell>
-                      <Table.HeaderCell>
-                        <FormattedMessage
-                          id="uploadJob.table.detail"
-                          defaultMessage="Detail"
-                        />
-                      </Table.HeaderCell>
-                    </Table.Row>
-                  </Table.Header>
-                  <Table.Body>
-                    {_.isArray(job.events) && !_.isEmpty(job.events) ? (
-                      Object.entries(groupedEvents)
-                        .map(([status, events]) =>
-                          renderEventGroup(status, events),
-                        )
-                        .flat()
-                    ) : (
-                      <Table.Row>
-                        <Table.Cell colSpan={3}>
-                          <FormattedMessage
-                            id="uploadJob.table.no_events"
-                            defaultMessage="No events found."
-                          />
-                        </Table.Cell>
-                      </Table.Row>
-                    )}
-                  </Table.Body>
-                </Table>
-              </>
-            ) : null}
-            {loading ? (
-              <Dimmer active inverted>
-                <Loader />
-              </Dimmer>
-            ) : null}
-          </Segment>
-        </Dimmer.Dimmable>
+        <UploadJobContent job={job} loading={loading} scope={scope} />
       </Segment>
     </>
   );
 }
+
+UploadJob.propTypes = {
+  scope: PropTypes.string,
+};
+
+UploadJob.defaultProps = {
+  scope: "implementations",
+};

package/src/components/UploadJobBreadcrumbs.js

@@ -2,27 +2,23 @@ import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
 import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
-import {
-  IMPLEMENTATIONS_UPLOAD_JOBS,
-  STRUCTURE_NOTES_UPLOAD_JOBS,
-} from "@truedat/core/routes";
+import { getUploadJobScope } from "./UploadJobScope";
 
 export const UploadJobBreadcrumbs = ({ filename, scope }) => {
-  const uploadJobsPath = (scope) => {
-    switch (scope) {
-      case "implementations":
-        return IMPLEMENTATIONS_UPLOAD_JOBS;
-      case "notes":
-        return STRUCTURE_NOTES_UPLOAD_JOBS;
-      default:
-        return null;
-    }
-  };
+  const scopeConfig = getUploadJobScope(scope);
+  const uploadJobsSection = scopeConfig.listPath ? (
+    <Breadcrumb.Section as={Link} to={scopeConfig.listPath}>
+      <FormattedMessage id={scopeConfig.listHeaderId} />
+    </Breadcrumb.Section>
+  ) : (
+    <Breadcrumb.Section>
+      <FormattedMessage id={scopeConfig.listHeaderId} />
+    </Breadcrumb.Section>
+  );
+
   return (
     <Breadcrumb>
-      <Breadcrumb.Section as={Link} to={uploadJobsPath(scope)}>
-        <FormattedMessage id={`uploadJobs.${scope}.header`} />
-      </Breadcrumb.Section>
+      {uploadJobsSection}
       {filename ? (
         <>
           <Breadcrumb.Divider icon="right angle" />

package/src/components/UploadJobDetails.js

@@ -0,0 +1,256 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { useId, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { getUploadJobScope } from "./UploadJobScope";
+
+export const ErrorDetailsDisclosure = ({ details }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const detailsId = useId();
+
+  return (
+    <div className="upload-job-change-details upload-job-error-details">
+      <button
+        type="button"
+        className="upload-job-change-toggle upload-job-error-toggle"
+        aria-controls={detailsId}
+        aria-expanded={isExpanded}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <span aria-hidden="true">{isExpanded ? "▼" : "▶"}</span>
+        <FormattedMessage
+          id="uploadJob.results.errors.errorFields"
+          values={{ count: details.length }}
+        />
+      </button>
+      <div
+        id={detailsId}
+        className="upload-job-change-table-wrap"
+        hidden={!isExpanded}
+      >
+        {isExpanded ? (
+          <table className="upload-job-change-table upload-job-error-table">
+            <thead>
+              <tr>
+                <th>
+                  <FormattedMessage id="uploadJob.results.errors.field" />
+                </th>
+                <th>
+                  <FormattedMessage id="uploadJob.results.errors.error" />
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {details.map(([field, error], index) => (
+                <tr key={`${field ?? "message"}-${index}`}>
+                  <th scope="row">
+                    {field ?? (
+                      <FormattedMessage id="uploadJob.parser.detail.message" />
+                    )}
+                  </th>
+                  <td>{error}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+ErrorDetailsDisclosure.propTypes = {
+  details: PropTypes.arrayOf(PropTypes.array),
+};
+
+ErrorDetailsDisclosure.defaultProps = {
+  details: [],
+};
+
+const isChangePair = (value) =>
+  _.isObject(value) &&
+  (Object.prototype.hasOwnProperty.call(value, "old") ||
+    Object.prototype.hasOwnProperty.call(value, "new"));
+
+export const flattenChanges = (changes, parent = "") =>
+  _.toPairs(changes).flatMap(([key, value]) => {
+    const path = parent ? `${parent}.${key}` : key;
+    if (isChangePair(value)) {
+      return [{ key: path, oldValue: value.old, newValue: value.new }];
+    }
+    if (
+      _.isObject(value) &&
+      !_.isArray(value) &&
+      (key === "df_content" || containsChangePair(value))
+    ) {
+      return flattenChanges(value, path);
+    }
+    return [{ key: path, oldValue: undefined, newValue: value }];
+  });
+
+const containsChangePair = (value) =>
+  _.isObject(value) &&
+  (isChangePair(value) ||
+    _.toPairs(value).some(([, nestedValue]) =>
+      containsChangePair(nestedValue),
+    ));
+
+export const ChangeField = ({ path, scope }) => {
+  const [root, ...nested] = path.split(".");
+  const field = nested.at(-1) ?? root;
+  const config = getUploadJobScope(scope);
+
+  return (
+    <FormattedMessage
+      id={
+        config.fieldMessageOverrides?.[field] ??
+        `${config.fieldMessagePrefix}.${field}`
+      }
+      defaultMessage={field}
+    />
+  );
+};
+
+ChangeField.propTypes = {
+  path: PropTypes.string.isRequired,
+  scope: PropTypes.string,
+};
+
+ChangeField.defaultProps = {
+  scope: "implementations",
+};
+
+const formatValue = (value, key) => {
+  if (_.has("value")(value)) return formatValue(value.value, key);
+  if (_.isArray(value)) {
+    return _.flow(
+      _.map((v) => formatValue(v, key)),
+      _.join(", "),
+    )(value);
+  }
+  if (_.isObject(value)) {
+    if (_.has("url_value")(value))
+      return `[${value.url_name}] (${value.url_value})`;
+    if (_.has("name")(value)) return value.name;
+    if (_.has("external_id")(value)) return value.external_id;
+    return _.flow(_.keys, _.join(", "))(value);
+  }
+  return value;
+};
+
+const ChangeValue = ({ className, value }) => {
+  const displayValue = value == null ? "—" : String(formatValue(value));
+
+  return (
+    <span className={className} title={displayValue}>
+      {displayValue}
+    </span>
+  );
+};
+
+ChangeValue.propTypes = {
+  className: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+};
+
+ChangeValue.defaultProps = {
+  value: undefined,
+};
+
+export const ChangesDetail = ({ changes, changeDetails, scope }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const detailsId = useId();
+  const details = changeDetails ?? changes;
+
+  if (!details) return null;
+
+  const changesList = flattenChanges(details);
+
+  return (
+    <div className="upload-job-change-details">
+      <button
+        type="button"
+        className="upload-job-change-toggle"
+        aria-controls={detailsId}
+        aria-expanded={isExpanded}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <span aria-hidden="true">{isExpanded ? "▼" : "▶"}</span>
+        <FormattedMessage
+          id="uploadJob.results.changes.modifiedFields"
+          values={{ count: changesList.length }}
+        />
+      </button>
+      <div
+        id={detailsId}
+        className="upload-job-change-table-wrap"
+        hidden={!isExpanded}
+      >
+        {isExpanded ? (
+          <table className="upload-job-change-table">
+            <thead>
+              <tr>
+                <th>
+                  <FormattedMessage id="uploadJob.results.changes.field" />
+                </th>
+                <th>
+                  <FormattedMessage id="uploadJob.results.changes.previous" />
+                </th>
+                <th>
+                  <span className="upload-job-visually-hidden">
+                    <FormattedMessage id="uploadJob.results.changes.change" />
+                  </span>
+                </th>
+                <th>
+                  <FormattedMessage id="uploadJob.results.changes.new" />
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {changesList.map(({ key, oldValue, newValue }) => (
+                <tr key={key}>
+                  <th scope="row">
+                    <ChangeField path={key} scope={scope} />
+                  </th>
+                  <td>
+                    <ChangeValue
+                      className="upload-job-old-value upload-job-change-value"
+                      value={oldValue}
+                    />
+                  </td>
+                  <td className="upload-job-change-arrow">
+                    <span aria-hidden="true">→</span>
+                  </td>
+                  <td>
+                    <ChangeValue
+                      className="upload-job-new-value upload-job-change-value"
+                      value={newValue}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+ChangesDetail.propTypes = {
+  changeDetails: PropTypes.object,
+  changes: PropTypes.object,
+  scope: PropTypes.string,
+};
+
+ChangesDetail.defaultProps = {
+  changeDetails: undefined,
+  changes: undefined,
+  scope: "implementations",
+};