@truedat/core 8.1.3 → 8.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.1.3",
+  "version": "8.1.4",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.1.3",
+    "@truedat/test": "8.1.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -85,5 +85,5 @@
     "slate-react": "^0.22.10",
     "swr": "^2.3.3"
   },
-  "gitHead": "0eaf0c4b1342771cddb87d09ed78a9e4c65a5ca2"
+  "gitHead": "49d0d43e081d0f631f221d8f5992e390098b3630"
 }

package/src/api.js

@@ -14,3 +14,5 @@ export const API_ACL_RESOURCE_ENTRIES = "/api/acl_entries/:type/:id";
 export const API_HIERARCHIES = "/api/hierarchies";
 export const API_HIERARCHY = "/api/hierarchies/:id";
 export const API_SYSTEMS = "/api/systems";
+export const API_UPLOAD_JOBS = "/api/upload_jobs";
+export const API_UPLOAD_JOB = "/api/upload_jobs/:id";

package/src/components/CatalogMenu.js

@@ -10,7 +10,7 @@ import {
   PENDING_STRUCTURE_NOTES,
   REFERENCE_DATASETS,
   STRUCTURES,
-  STRUCTURES_UPLOAD_EVENTS,
+  STRUCTURE_NOTES_UPLOAD_JOBS,
   STRUCTURE_TYPES,
   SYSTEMS,
   STRUCTURE_TAGS,
@@ -29,7 +29,7 @@ const adminItems = [
 
 const structureNoteItems = [
   { name: "pending_structure_notes", routes: [PENDING_STRUCTURE_NOTES] },
-  { name: "structures_upload_events", routes: [STRUCTURES_UPLOAD_EVENTS] },
+  { name: "structures_upload_events", routes: [STRUCTURE_NOTES_UPLOAD_JOBS] },
 ];
 
 const catalogViewConfigItems = (formatMessage) =>

package/src/components/UploadJob.js

@@ -0,0 +1,217 @@
+import _ from "lodash/fp";
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useParams } from "react-router";
+import {
+  Header,
+  Icon,
+  Segment,
+  Dimmer,
+  Loader,
+  Table,
+  Label,
+  Button,
+} from "semantic-ui-react";
+import { DateTime } from "@truedat/core/components";
+import { useUploadJob } from "../hooks/useUploadJobs";
+import { StatusPill, ResponseCell } from "./UploadJobParser";
+import UploadJobBreadcrumbs from "./UploadJobBreadcrumbs";
+
+export default function UploadJob({ scope }) {
+  const { id } = useParams();
+  const { data, loading } = useUploadJob(id);
+  const job = data?.data;
+
+  const { formatMessage } = useIntl();
+  const [expandedGroups, setExpandedGroups] = useState({});
+
+  // Group events by status
+  const groupedEvents = job?.events ? _.groupBy("status", job.events) : {};
+
+  const toggleGroup = (status) => {
+    setExpandedGroups((prev) => ({
+      ...prev,
+      [status]: !prev[status],
+    }));
+  };
+
+  const renderEventGroup = (status, events) => {
+    const isExpanded = expandedGroups[status];
+    const shouldCollapse = status === "INFO" || status === "ERROR";
+
+    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>
+      ));
+    }
+
+    // Render collapsible groups for INFO and ERROR
+    const groupRows = [];
+
+    // 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>
+    );
+
+    // 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>
+        );
+      });
+    }
+
+    return groupRows;
+  };
+
+  return (
+    <>
+      <UploadJobBreadcrumbs filename={job?.filename} scope={scope} />
+      <Segment>
+        <Header as="h2">
+          <Icon
+            circular
+            name={formatMessage({
+              id: "uploadJob.header.icon",
+              defaultMessage: "cogs",
+            })}
+          />
+          <Header.Content>
+            <FormattedMessage id={`uploadJob.${scope}.header`} />
+          </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>
+      </Segment>
+    </>
+  );
+}

package/src/components/UploadJobBreadcrumbs.js

@@ -0,0 +1,38 @@
+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";
+
+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;
+    }
+  };
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Section as={Link} to={uploadJobsPath(scope)}>
+        <FormattedMessage id={`uploadJobs.${scope}.header`} />
+      </Breadcrumb.Section>
+      {filename ? (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          <Breadcrumb.Section active>{filename}</Breadcrumb.Section>
+        </>
+      ) : null}
+    </Breadcrumb>
+  );
+};
+
+UploadJobBreadcrumbs.propTypes = {
+  filename: PropTypes.string,
+  scope: PropTypes.string.isRequired,
+};
+
+export default UploadJobBreadcrumbs;

package/src/components/UploadJobParser.js

@@ -0,0 +1,370 @@
+import _ from "lodash/fp";
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Label } from "semantic-ui-react";
+import { RichTextEditor } from "@truedat/core/components";
+
+import RuleImplementationLink from "@truedat/dq/components/RuleImplementationLink";
+import StructureNoteLink from "@truedat/dd/components/StructureNoteLink";
+
+export const StatusPill = ({ status }) => (
+  <Label
+    color={_.cond([
+      [_.eq("COMPLETED"), _.constant("green")],
+      [_.eq("FAILED"), _.constant("red")],
+      [_.eq("ERROR"), _.constant("red")],
+      [_.eq("INFO"), _.constant("blue")],
+      [_.stubTrue, _.constant("grey")],
+    ])(status)}
+    size="small"
+  >
+    <FormattedMessage
+      id={`uploadJob.parser.event.status.${status}`}
+    />
+  </Label>
+);
+
+export const ResponseCell = ({ response, status }) => {
+  if (!response || (_.isObject(response) && _.isEmpty(response))) return null;
+
+  switch (status) {
+    case "FAILED":
+      return (
+        <FormattedMessage
+          id={`uploadJob.parser.error.${response.message}`}
+          defaultMessage={response.message}
+        />
+      );
+    case "ERROR":
+      return <ErrorDetail response={response} />;
+    case "COMPLETED":
+      return <CompletedDetail response={response} />;
+    case "INFO":
+      return <InfoDetail response={response} />;
+    default:
+      return (
+        <pre
+          style={{
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-all",
+            margin: 0,
+          }}
+        >
+          {typeof response === "string"
+            ? response
+            : JSON.stringify(response, null, 2)}
+        </pre>
+      );
+  }
+};
+
+const SheetAndLine = ({ response }) => (
+  <Label size="small">
+    <span>{response.sheet}</span>
+    {response.row_number ? (
+      <span>
+        {" "}
+        -{" "}
+        <FormattedMessage id="uploadJob.parser.result.prop.row_number" />
+        : {response.row_number}
+      </span>
+    ) : null}
+  </Label>
+);
+
+const CellHeader = ({ header, response }) => (
+  <div style={{ display: "flex", justifyContent: "space-between" }}>
+    <b>
+      <FormattedMessage id={header} />
+    </b>
+    <div>
+      <SheetAndLine response={response} />
+    </div>
+  </div>
+);
+
+const externalIdDetailValue = (details) =>
+  details?.data_structure_id != null && details?.external_id != null ? (
+    <StructureNoteLink
+      data_structure_id={details.data_structure_id}
+      external_id={details.external_id}
+    />
+  ) : (
+    details?.external_id ?? ""
+  );
+
+const ErrorDetail = ({ response }) => {
+  const { formatMessage } = useIntl();
+
+  if (!response || !response.type) {
+    return null;
+  }
+  const { type } = response;
+  const messagePrefix = "uploadJob.parser.detail";
+
+  const detailBuilders = {
+    missing_required_headers: (details) => [
+      [
+        formatMessage({ id: `${messagePrefix}.headers` }),
+        details.missing_headers?.join(", "),
+      ],
+    ],
+    invalid_template_name: (details) => [
+      [
+        formatMessage({ id: `${messagePrefix}.templateName` }),
+        details.template_name,
+      ],
+    ],
+    invalid_domain_external_id: (details) => [
+      [
+        formatMessage({ id: `${messagePrefix}.domainExternalId` }),
+        details.domain_external_id,
+      ],
+    ],
+    invalid_associated_rule: (details) => [
+      [formatMessage({ id: `${messagePrefix}.ruleName` }), details.rule_name],
+    ],
+    deprecated_implementation: (details) => [
+      [
+        formatMessage({ id: `${messagePrefix}.itemKey` }),
+        details.implementation_key ?? details.item_key,
+      ],
+    ],
+    implementation_creation_error: (details) =>
+      details?.map(([field, [error]]) => [field, error]) || [],
+    duplicate_field_names: (details) => [
+      [
+        formatMessage({ id: `${messagePrefix}.duplicatedNames` }),
+        details?.duplicate_fields?.join(", "),
+      ],
+    ],
+    pending_approval_conflict: (details) =>
+      [
+        [formatMessage({ id: `${messagePrefix}.message` }), details?.message ?? ""],
+        [formatMessage({ id: `${messagePrefix}.externalId` }), externalIdDetailValue(details)],
+      ].filter(([, v]) => v !== undefined && v !== ""),
+    data_structure_not_found: (details) => [
+      [formatMessage({ id: `${messagePrefix}.externalId` }), externalIdDetailValue(details)],
+    ],
+    template_not_found: (details) => [
+      [formatMessage({ id: `${messagePrefix}.externalId` }), externalIdDetailValue(details)],
+    ],
+    unauthorized: (details) => [
+      [formatMessage({ id: `${messagePrefix}.externalId` }), externalIdDetailValue(details)],
+    ],
+    unreject_failed: (details) =>
+      [
+        [formatMessage({ id: `${messagePrefix}.reason` }), details?.reason ?? ""],
+        [formatMessage({ id: `${messagePrefix}.externalId` }), externalIdDetailValue(details)],
+      ].filter(([, v]) => v !== undefined && v !== ""),
+    field_validation_error: (details) =>
+      details?.errors?.map((e) => [
+        e?.field ?? formatMessage({ id: `${messagePrefix}.message` }),
+        e?.message ?? "",
+      ]) ?? [[formatMessage({ id: `${messagePrefix}.externalId` }), externalIdDetailValue(details)]],
+    unprocessable_entity: (details) => [
+      [formatMessage({ id: `${messagePrefix}.externalId` }), externalIdDetailValue(details)],
+    ],
+    structure_note_creation_error: (details) => {
+      const errorPairs = details?.errors?.length
+        ? details.errors.map((e) => [
+          e?.field ?? formatMessage({ id: `${messagePrefix}.message` }),
+          e?.message ?? "",
+        ])
+        : [[formatMessage({ id: `${messagePrefix}.reason` }), String(details?.reason ?? details?.error ?? "")]];
+      const externalIdPair = details?.external_id
+        ? [[formatMessage({ id: `${messagePrefix}.externalId` }), externalIdDetailValue(details)]]
+        : [];
+      return [...errorPairs, ...externalIdPair];
+    },
+  };
+
+  const detailBuilder = _.propOr(() => () => [], type)(detailBuilders);
+
+  const details = _.cond([
+    [_.isNil, _.constant([])],
+    [_.stubTrue, (d) => {
+      const result = detailBuilder(d);
+      return _.isArray(result) ? result : [];
+    }],
+  ])(response.details);
+
+  return (
+    <div>
+      <CellHeader
+        header={`uploadJob.parser.error.${type}`}
+        response={response}
+      />
+
+      {
+        _.isEmpty(details)
+          ? null
+          : details.map(([key, value], idx) => (
+            <div key={idx} style={{ paddingLeft: "10px" }}>
+              <span
+                style={{
+                  fontSize: "1em",
+                  fontWeight: "bold",
+                  paddingRight: "5px",
+                }}
+              >
+                {key}:
+              </span>
+              {value}
+            </div>
+          ))
+      }
+    </div >
+  );
+};
+const summaryItems = [
+  {
+    key: "invalid_sheet_count",
+    messageId: "uploadJob.parser.result.summary.invalid_sheets",
+  },
+  {
+    key: "insert_count",
+    messageId: "uploadJob.parser.result.summary.created",
+  },
+  {
+    key: "update_count",
+    messageId: "uploadJob.parser.result.summary.updated",
+  },
+  {
+    key: "unchanged_count",
+    messageId: "uploadJob.parser.result.summary.unchanged",
+  },
+  {
+    key: "error_count",
+    messageId: "uploadJob.parser.result.summary.errors",
+  },
+];
+
+const CompletedDetail = ({ response }) => {
+  const items = _.flow([
+    _.filter((item) => _.get(item.key, response) > 0),
+    (items) => {
+      const result = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        result.push(
+          <span key={item.key}>
+            <FormattedMessage id={item.messageId} />
+            {`: ${response[item.key]}`}
+            {i < items.length - 1 && <span>&nbsp;|&nbsp;</span>}
+          </span>
+        );
+      }
+      return result;
+    }
+  ])(summaryItems);
+
+  if (items.length === 0) return null;
+
+  return (
+    <span>&nbsp;|&nbsp;{items}&nbsp;|&nbsp;</span>
+  );
+};
+
+
+const InfoDetail = ({ response }) =>
+  !response || !response.type ? null : (
+    <div>
+      <CellHeader
+        header={`uploadJob.parser.info.${response.type}`}
+        response={response}
+      />
+      {response.details ? (
+        <div>
+          {response.details.implementation_key != null ? (
+            <RuleImplementationLink {...response.details} />
+          ) : (response.details.data_structure_id != null ||
+            response.details.external_id != null) ? (
+            <StructureNoteLink
+              data_structure_id={response.details.data_structure_id}
+              external_id={response.details.external_id}
+            />
+          ) : null}
+          {" "}
+        </div>
+      ) : null}
+      <ChangesDetail changes={response?.details?.changes} />
+    </div>
+  );
+const ChangesDetail = ({
+  changes,
+  header = "uploadJob.parser.result.prop.changes",
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  if (!changes) return null;
+  const changesList = _.toPairs(changes);
+
+  return (
+    <div>
+      <div
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          cursor: "pointer",
+          display: "flex",
+          gap: "5px",
+          alignItems: "center",
+        }}
+      >
+        <span>{isExpanded ? "▼" : "▶"}</span>
+        <span>
+          <FormattedMessage id={header} />
+        </span>
+        <span>({_.size(changesList)}) :</span>
+      </div>
+      {isExpanded &&
+        changesList.map(([key, value]) => (
+          <div key={key} style={{ paddingLeft: "10px" }}>
+            {key == "df_content" ? (
+              <ChangesDetail
+                changes={value}
+                header={`ruleImplementations.props.${key}`}
+              />
+            ) : (
+              <>
+                <span
+                  style={{
+                    fontSize: "1em",
+                    fontWeight: "bold",
+                    paddingRight: "5px",
+                  }}
+                >
+                  <FormattedMessage
+                    id={`ruleImplementations.props.${key}`}
+                    defaultMessage={key}
+                  />
+                  :
+                </span>
+                {formatValue(value, key)}
+              </>
+            )}
+          </div>
+        ))}
+    </div>
+  );
+};
+
+
+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("document")(value))
+      return <RichTextEditor readOnly value={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;
+};

package/src/components/UploadJobs.js

@@ -0,0 +1,136 @@
+import _ from "lodash/fp";
+import moment from "moment";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router";
+import {
+  Header,
+  Icon,
+  Segment,
+  Dimmer,
+  Loader,
+  Table,
+} from "semantic-ui-react";
+import { linkTo } from "@truedat/core/routes";
+import { useUploadJobs } from "../hooks/useUploadJobs";
+import { StatusPill, ResponseCell } from "./UploadJobParser";
+import UploadJobBreadcrumbs from "./UploadJobBreadcrumbs";
+
+export default function UploadJobs({ scope }) {
+  const { formatMessage } = useIntl();
+  const { data, loading } = useUploadJobs(scope);
+  const jobs = data?.data;
+  const navigate = useNavigate();
+
+  const navigateToUploadJob = ({ id }) => {
+    switch (scope) {
+      case "implementations":
+        navigate(linkTo.IMPLEMENTATIONS_UPLOAD_JOB({ id }));
+        break;
+      case "notes":
+        navigate(linkTo.STRUCTURE_NOTES_UPLOAD_JOB({ id }));
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <UploadJobBreadcrumbs scope={scope} />
+      <Segment>
+        <Header as="h2">
+          <Icon
+            circular
+            name={formatMessage({
+              id: `uploadJobs.header.icon`,
+              defaultMessage: "cogs",
+            })}
+          />
+          <Header.Content>
+            <FormattedMessage id={`uploadJobs.${scope}.header`} />
+            <Header.Subheader>
+              <FormattedMessage id="uploadJobs.subheader" />
+            </Header.Subheader>
+          </Header.Content>
+        </Header>
+        <Dimmer.Dimmable dimmed={loading}>
+          <Segment attached="bottom">
+            {jobs ? (
+              <Table selectable>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell>
+                      <FormattedMessage
+                        id={`uploadJob.table.filename`}
+                        defaultMessage="Filename"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <FormattedMessage
+                        id={`uploadJob.table.status`}
+                        defaultMessage="Status"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <FormattedMessage
+                        id={`uploadJob.table.response`}
+                        defaultMessage="Response"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <FormattedMessage
+                        id={`uploadJob.table.latest_event_at`}
+                        defaultMessage="Latest Event"
+                      />
+                    </Table.HeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {_.isArray(jobs) && !_.isEmpty(jobs) ? (
+                    jobs.map((job, idx) => (
+                      <Table.Row
+                        key={idx}
+                        style={{ cursor: "pointer" }}
+                        onClick={() => navigateToUploadJob(job)}
+                      >
+                        <Table.Cell>{job.filename}</Table.Cell>
+                        <Table.Cell>
+                          <StatusPill status={job.latest_status} />
+                        </Table.Cell>
+                        <Table.Cell>
+                          <ResponseCell
+                            response={job.latest_event_response}
+                            status={job.latest_status}
+                          />
+                        </Table.Cell>
+                        <Table.Cell>
+                          {job.latest_event_at
+                            ? moment(job.latest_event_at).fromNow()
+                            : ""}
+                        </Table.Cell>
+                      </Table.Row>
+                    ))
+                  ) : (
+                    <Table.Row>
+                      <Table.Cell colSpan={5}>
+                        <FormattedMessage
+                          id={`uploadJob.table.no_jobs`}
+                          defaultMessage="No jobs found."
+                        />
+                      </Table.Cell>
+                    </Table.Row>
+                  )}
+                </Table.Body>
+              </Table>
+            ) : null}
+            {loading ? (
+              <Dimmer active inverted>
+                <Loader />
+              </Dimmer>
+            ) : null}
+          </Segment>
+        </Dimmer.Dimmable>
+      </Segment>
+    </>
+  );
+}

package/src/components/__tests__/UploadJob.spec.js

@@ -0,0 +1,112 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+
+import { useUploadJob } from "../../hooks/useUploadJobs";
+import UploadJob from "../UploadJob";
+
+jest.mock("../../hooks/useUploadJobs", () => ({
+  useUploadJob: jest.fn(),
+}));
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: () => ({ id: "123" }),
+}));
+
+describe("<UploadJob />", () => {
+  const user = userEvent.setup({ delay: null });
+
+  beforeEach(() => {
+    useUploadJob.mockReset();
+  });
+
+  it("renders loading state", async () => {
+    useUploadJob.mockReturnValue({
+      loading: true,
+      data: null,
+    });
+
+    const rendered = render(<UploadJob />);
+
+    expect(rendered.container.querySelector(".ui.loader")).toBeInTheDocument();
+  });
+
+  it("renders empty state when no events", async () => {
+    useUploadJob.mockReturnValue({
+      loading: false,
+      data: {
+        data: {
+          filename: "test.xlsx",
+          hash: "abc123",
+          latest_status: "COMPLETED",
+          latest_event_at: "2023-01-01T00:00:00Z",
+          events: [],
+        },
+      },
+    });
+
+    const rendered = render(<UploadJob />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getAllByText(/test.xlsx/i)).toHaveLength(2);
+    expect(rendered.getByText(/abc123/i)).toBeInTheDocument();
+    expect(rendered.getByText(/no events found/i)).toBeInTheDocument();
+  });
+
+  it("renders events grouped by status", async () => {
+    useUploadJob.mockReturnValue({
+      loading: false,
+      data: {
+        data: {
+          filename: "test.xlsx",
+          hash: "abc123",
+          latest_status: "COMPLETED",
+          latest_event_at: "2023-01-01T00:00:00Z",
+          events: [
+            {
+              status: "INFO",
+              inserted_at: "2023-01-01T00:00:00Z",
+              response: { type: "info_message" },
+            },
+            {
+              status: "ERROR",
+              inserted_at: "2023-01-01T00:00:00Z",
+              response: { type: "error_message" },
+            },
+            {
+              status: "COMPLETED",
+              inserted_at: "2023-01-01T00:00:00Z",
+              response: { type: "completed_message" },
+            },
+          ],
+        },
+      },
+    });
+
+    const rendered = render(<UploadJob />);
+    await waitForLoad(rendered);
+
+    // Check group headers exist
+    expect(rendered.getByText(/info \(1\)/i)).toBeInTheDocument();
+    expect(rendered.getByText(/error \(1\)/i)).toBeInTheDocument();
+
+    // Expand INFO group
+    await user.click(rendered.getByText(/info \(1\)/i));
+    await waitFor(() => {
+      expect(rendered.getByText(/info_message/i)).toBeInTheDocument();
+    });
+
+    // Expand ERROR group
+    await user.click(rendered.getByText(/error \(1\)/i));
+    await waitFor(() => {
+      expect(rendered.getByText(/error_message/i)).toBeInTheDocument();
+    });
+
+    // COMPLETED events are always visible
+    expect(
+      rendered.getAllByText(
+        /uploadJob.parser.event.status.COMPLETED/i
+      )
+    ).toHaveLength(2);
+  });
+});

package/src/components/__tests__/UploadJobBreadcrumbs.spec.js

@@ -0,0 +1,37 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { UploadJobBreadcrumbs } from "../UploadJobBreadcrumbs";
+
+describe("ImplementationUploadJobBreadcrumbs", () => {
+  it("renders breadcrumbs without filename", async () => {
+    const rendered = render(<UploadJobBreadcrumbs scope="implementations" />);
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText(/uploadJobs.implementations.header/i)
+    ).toBeInTheDocument();
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders with scope header", async () => {
+    const rendered = render(<UploadJobBreadcrumbs scope="myscope" />);
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText(/uploadJobs.myscope.header/i)
+    ).toBeInTheDocument();
+  });
+
+  it("renders breadcrumbs with filename", async () => {
+    const filename = "test.csv";
+    const rendered = render(
+      <UploadJobBreadcrumbs scope="implementations" filename={filename} />
+    );
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText(/uploadJobs.implementations.header/i)
+    ).toBeInTheDocument();
+    expect(rendered.getByText(filename)).toBeInTheDocument();
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

package/src/components/__tests__/UploadJobParser.spec.js

@@ -0,0 +1,103 @@
+import { render } from "@truedat/test/render";
+import { StatusPill, ResponseCell } from "../UploadJobParser";
+
+describe("<StatusPill />", () => {
+  it("renders with correct color based on status", async () => {
+    const statuses = ["COMPLETED", "FAILED", "ERROR", "INFO", "OTHER"];
+    const expectedColors = ["green", "red", "red", "blue", "grey"];
+
+    statuses.forEach((status, index) => {
+      const rendered = render(<StatusPill status={status} />);
+      const label = rendered.container.querySelector(".ui.label");
+      expect(label).toHaveClass(expectedColors[index]);
+      expect(
+        rendered.getByText(
+          new RegExp(`uploadJob.parser.event.status.${status}`, "i")
+        )
+      ).toBeInTheDocument();
+    });
+  });
+});
+
+describe("<ResponseCell />", () => {
+  it("returns null when response is empty", () => {
+    const rendered = render(
+      <ResponseCell response={null} status="COMPLETED" />
+    );
+    expect(rendered.container.firstChild).toBeNull();
+
+    const rendered2 = render(<ResponseCell response={{}} status="COMPLETED" />);
+    expect(rendered2.container.firstChild).toBeNull();
+  });
+
+  it("renders FAILED status with message", () => {
+    const response = { message: "missing_required_headers" };
+    const rendered = render(
+      <ResponseCell response={response} status="FAILED" />
+    );
+    expect(
+      rendered.getByText(/missing_required_headers/i)
+    ).toBeInTheDocument();
+  });
+
+  it("renders ERROR status with details", () => {
+    const response = {
+      type: "missing_required_headers",
+      details: {
+        missing_headers: ["header1", "header2"],
+      },
+    };
+    const rendered = render(
+      <ResponseCell response={response} status="ERROR" />
+    );
+    expect(
+      rendered.getByText(
+        /uploadJob.parser.error.missing_required_headers/i
+      )
+    ).toBeInTheDocument();
+    expect(rendered.getByText(/header1, header2/i)).toBeInTheDocument();
+  });
+
+  it("renders COMPLETED status with summary", () => {
+    const response = {
+      insert_count: 2,
+      update_count: 1,
+      error_count: 0,
+    };
+    const rendered = render(
+      <ResponseCell response={response} status="COMPLETED" />
+    );
+    expect(
+      rendered.getByText(/uploadJob.parser.result.summary.created/i)
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByText(/uploadJob.parser.result.summary.updated/i)
+    ).toBeInTheDocument();
+  });
+
+  it("renders INFO status with implementation details", () => {
+    const response = {
+      type: "implementation_updated",
+      details: {
+        id: 123,
+        changes: {
+          name: "new name",
+        },
+      },
+    };
+    const rendered = render(<ResponseCell response={response} status="INFO" />);
+    expect(
+      rendered.getByText(
+        /uploadJob.parser.info.implementation_updated/i
+      )
+    ).toBeInTheDocument();
+  });
+
+  it("renders default case for unknown status", () => {
+    const response = "some text";
+    const rendered = render(
+      <ResponseCell response={response} status="UNKNOWN" />
+    );
+    expect(rendered.getByText(/some text/i)).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/UploadJobs.spec.js

@@ -0,0 +1,60 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { useUploadJobs } from "../../hooks/useUploadJobs";
+import UploadJobs from "../UploadJobs";
+
+jest.mock("../../hooks/useUploadJobs", () => ({
+  useUploadJobs: jest.fn(),
+}));
+
+describe("<UploadJobs />", () => {
+  it("renders loading state", async () => {
+    useUploadJobs.mockReturnValue({
+      loading: true,
+      data: null,
+    });
+
+    const rendered = render(<UploadJobs />);
+
+    expect(rendered.container.querySelector(".ui.loader")).toBeInTheDocument();
+  });
+
+  it("renders empty state", async () => {
+    useUploadJobs.mockReturnValue({
+      loading: false,
+      data: {
+        data: [],
+      },
+    });
+
+    const rendered = render(<UploadJobs />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/No jobs found./i)).toBeInTheDocument();
+  });
+
+  it("renders jobs list", async () => {
+    const mockJobs = [
+      {
+        id: 1,
+        filename: "test.csv",
+        latest_status: "completed",
+        latest_event_response: "Success",
+        latest_event_at: "2023-01-01T00:00:00Z",
+      },
+    ];
+
+    useUploadJobs.mockReturnValue({
+      loading: false,
+      data: {
+        data: mockJobs,
+      },
+    });
+
+    const rendered = render(<UploadJobs />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/test.csv/i)).toBeInTheDocument();
+    expect(rendered.getByText(/completed/i)).toBeInTheDocument();
+    expect(rendered.getByText(/success/i)).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/__snapshots__/CatalogMenu.spec.js.snap

@@ -56,7 +56,7 @@ exports[`<CatalogMenu /> matches the latest snapshot 1`] = `
       <a
         class="link item"
         data-discover="true"
-        href="/bulkUpdateTemplateContentEvents"
+        href="/structureNotes/uploadJobs"
       >
         structures_upload_events
       </a>

package/src/components/__tests__/__snapshots__/SideMenu.spec.js.snap

@@ -192,7 +192,7 @@ exports[`<SideMenu /> matches the latest snapshot 1`] = `
           <a
             class="link item"
             data-discover="true"
-            href="/bulkUpdateTemplateContentEvents"
+            href="/structureNotes/uploadJobs"
           >
             structures_upload_events
           </a>

package/src/components/__tests__/__snapshots__/UploadJobBreadcrumbs.spec.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImplementationUploadJobBreadcrumbs renders breadcrumbs with filename 1`] = `
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      data-discover="true"
+      href="/implementations/uploadJobs"
+    >
+      uploadJobs.implementations.header
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <div
+      class="active section"
+    >
+      test.csv
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImplementationUploadJobBreadcrumbs renders breadcrumbs without filename 1`] = `
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      data-discover="true"
+      href="/implementations/uploadJobs"
+    >
+      uploadJobs.implementations.header
+    </a>
+  </div>
+</div>
+`;

package/src/hooks/index.js

@@ -7,3 +7,4 @@ export * from "./usePath";
 export * from "./useOnScreen";
 export * from "./useOperators";
 export * from "./useTemplate";
+export * from "./useUploadJobs";

package/src/hooks/useUploadJobs.js

@@ -0,0 +1,24 @@
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import { apiJson } from "@truedat/core/services/api";
+import {
+  API_UPLOAD_JOBS,
+  API_UPLOAD_JOB,
+} from "../api";
+
+export const useUploadJobs = (scope) => {
+  const url = scope ? `${API_UPLOAD_JOBS}?scope=${scope}` : API_UPLOAD_JOBS;
+  const { data, error, mutate } = useSWR(
+    url,
+    apiJson
+  );
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};
+
+export const useUploadJob = (id) => {
+  const url = compile(API_UPLOAD_JOB)({
+    id: `${id}`,
+  });
+  const { data, error, mutate } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};

package/src/routes.js

@@ -234,7 +234,6 @@ export const SOURCE_JOBS_NEW = "/sources/:sourceId/jobs/new";
 export const STRUCTURE = "/structures/:id";
 export const STRUCTURES = "/structures";
 export const STRUCTURES_BULK_UPDATE = "/structures/bulkUpdate";
-export const STRUCTURES_UPLOAD_EVENTS = "/bulkUpdateTemplateContentEvents";
 export const STRUCTURE_CHILDREN = "/structures/:id/children";
 export const STRUCTURE_FIELDS = "/structures/:id/fields";
 export const STRUCTURE_VERSION_FIELDS =
@@ -254,6 +253,8 @@ export const STRUCTURE_MEMBERS_NEW = "/structures/:id/members/new";
 export const STRUCTURE_METADATA = "/structures/:id/metadata";
 export const STRUCTURE_NOTES = "/structures/:id/notes";
 export const STRUCTURE_NOTES_EDIT = "/structures/:id/notes/edit";
+export const STRUCTURE_NOTES_UPLOAD_JOBS = "/structureNotes/uploadJobs";
+export const STRUCTURE_NOTES_UPLOAD_JOB = "/structureNotes/uploadJobs/:id";
 export const STRUCTURE_PARENTS = "/structures/:id/parents";
 export const STRUCTURE_PROFILE = "/structures/:id/profile";
 export const STRUCTURE_RULES = "/structures/:id/rules";
@@ -473,7 +474,6 @@ const routes = {
   STRUCTURE,
   STRUCTURES,
   STRUCTURES_BULK_UPDATE,
-  STRUCTURES_UPLOAD_EVENTS,
   STRUCTURE_CHILDREN,
   STRUCTURE_FIELDS,
   STRUCTURE_VERSION_FIELDS,
@@ -491,6 +491,8 @@ const routes = {
   STRUCTURE_METADATA,
   STRUCTURE_NOTES_EDIT,
   STRUCTURE_NOTES,
+  STRUCTURE_NOTES_UPLOAD_JOBS,
+  STRUCTURE_NOTES_UPLOAD_JOB,
   STRUCTURE_PARENTS,
   STRUCTURE_PROFILE,
   STRUCTURE_RULES,