@truedat/core 8.13.0 → 8.13.2

package/src/components/UploadJobResults.js

@@ -0,0 +1,278 @@
+import { useId, useState } from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Icon, Label, Table } from "semantic-ui-react";
+import DateTime from "@truedat/core/components/DateTime";
+import { ResultDetailCell, ResultEntityCell } from "./UploadJobParser";
+import { getUploadJobScope } from "./UploadJobScope";
+
+const filters = ["all", "created", "updated", "unchanged", "error"];
+
+const filterMessages = {
+  all: { id: "uploadJob.results.filter.all" },
+  created: { id: "uploadJob.results.filter.created" },
+  updated: { id: "uploadJob.results.filter.updated" },
+  unchanged: { id: "uploadJob.results.filter.unchanged" },
+  error: { id: "uploadJob.results.filter.error" },
+};
+
+export const getResultEvents = (events = []) =>
+  events.filter(({ status }) => status === "INFO" || status === "ERROR");
+
+export const getResultOutcome = ({ status, response }) => {
+  if (status === "ERROR") return "error";
+  if (response?.type === "unchanged") return "unchanged";
+  if (response?.type === "created") return "created";
+  if (response?.type === "updated") return "updated";
+  return "unknown";
+};
+
+const Outcome = ({ event }) => {
+  const outcome = getResultOutcome(event);
+  const config = {
+    created: {
+      className: "upload-job-outcome-created",
+      id: "uploadJob.parser.info.created",
+    },
+    updated: {
+      className: "upload-job-outcome-updated",
+      id: "uploadJob.parser.info.updated",
+    },
+    unchanged: {
+      className: "upload-job-outcome-unchanged",
+      color: "grey",
+      id: "uploadJob.parser.info.unchanged",
+    },
+    error: {
+      className: "upload-job-outcome-error",
+      color: "red",
+      id: "uploadJob.parser.event.status.ERROR",
+    },
+    unknown: {
+      className: "upload-job-outcome-unknown",
+      color: "grey",
+      id: "uploadJob.parser.event.status.INFO",
+    },
+  }[outcome];
+
+  return (
+    <Label
+      color={config.color}
+      className={`upload-job-outcome ${config.className}`}
+      size="small"
+    >
+      <FormattedMessage id={config.id} />
+    </Label>
+  );
+};
+
+Outcome.propTypes = {
+  event: PropTypes.shape({
+    status: PropTypes.string,
+    response: PropTypes.shape({ type: PropTypes.string }),
+  }).isRequired,
+};
+
+const Origin = ({ response }) => {
+  const { formatMessage } = useIntl();
+  const sheet = response?.sheet;
+  const rowNumber = response?.row_number;
+
+  if (!sheet && !rowNumber) return null;
+
+  const origin = [
+    sheet,
+    rowNumber
+      ? formatMessage({ id: "uploadJob.results.origin.row" }, { rowNumber })
+      : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  return (
+    <Label size="small" className="upload-job-origin" title={origin}>
+      {origin}
+    </Label>
+  );
+};
+
+Origin.propTypes = {
+  response: PropTypes.shape({
+    row_number: PropTypes.number,
+    sheet: PropTypes.string,
+  }),
+};
+
+Origin.defaultProps = { response: undefined };
+
+export const getEntityColumnMessageId = (scope) =>
+  getUploadJobScope(scope).entityColumnMessageId;
+
+const UploadJobResults = ({
+  constrainResults,
+  events,
+  lifecycleStatus,
+  scope,
+}) => {
+  const { formatMessage } = useIntl();
+  const [expanded, setExpanded] = useState(false);
+  const [filter, setFilter] = useState("all");
+  const contentId = useId();
+  const enabled = lifecycleStatus === "COMPLETED";
+  const resultsTitleId = useId();
+  const resultEvents = getResultEvents(events);
+  const visibleEvents = resultEvents.filter(
+    (event) => filter === "all" || getResultOutcome(event) === filter,
+  );
+
+  const toggleExpanded = () => {
+    if (enabled) setExpanded((value) => !value);
+  };
+
+  return (
+    <section
+      className={`upload-job-results${enabled ? "" : " disabled"}`}
+      aria-labelledby={resultsTitleId}
+    >
+      <div className="upload-job-results-heading">
+        <button
+          type="button"
+          className="upload-job-results-toggle"
+          aria-expanded={expanded}
+          aria-controls={contentId}
+          disabled={!enabled}
+          onClick={toggleExpanded}
+        >
+          <span>
+            <strong id={resultsTitleId}>
+              <FormattedMessage id="uploadJob.results.title" />
+            </strong>
+            <small>
+              <FormattedMessage id="uploadJob.results.subtitle" />
+            </small>
+          </span>
+          <Icon
+            aria-hidden="true"
+            className="upload-job-results-chevron"
+            name={expanded ? "chevron up" : "chevron down"}
+          />
+        </button>
+        {expanded ? (
+          <div
+            className="upload-job-result-filters"
+            role="group"
+            aria-label={formatMessage({
+              id: "uploadJob.results.filter.label",
+            })}
+          >
+            {filters.map((name) => (
+              <button
+                key={name}
+                type="button"
+                className={`ui small button upload-job-result-filter upload-job-result-filter-${name}${
+                  filter === name ? " active" : ""
+                }`}
+                aria-pressed={filter === name}
+                onClick={() => setFilter(name)}
+              >
+                <FormattedMessage {...filterMessages[name]} />
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      <div
+        id={contentId}
+        className="upload-job-results-content"
+        hidden={!expanded}
+      >
+        {expanded ? (
+          <div
+            className={`upload-job-table-wrap${
+              constrainResults ? " upload-job-table-wrap-constrained" : ""
+            }`}
+            style={
+              constrainResults
+                ? { maxHeight: "48vh", overflow: "auto" }
+                : undefined
+            }
+          >
+            <Table>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell>
+                    <FormattedMessage id="uploadJob.results.column.outcome" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    <FormattedMessage id="uploadJob.results.column.processedAt" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    <FormattedMessage id={getEntityColumnMessageId(scope)} />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    <FormattedMessage id="uploadJob.table.detail" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    <FormattedMessage id="uploadJob.results.column.origin" />
+                  </Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {visibleEvents.map((event, index) => (
+                  <Table.Row key={event.id ?? `${event.status}-${index}`}>
+                    <Table.Cell className="upload-job-result-outcome-cell">
+                      <Outcome event={event} />
+                    </Table.Cell>
+                    <Table.Cell className="upload-job-result-processed-cell">
+                      <DateTime value={event.inserted_at} />
+                    </Table.Cell>
+                    <Table.Cell className="upload-job-result-entity-cell">
+                      <ResultEntityCell {...event} />
+                    </Table.Cell>
+                    <Table.Cell className="upload-job-result-detail-cell">
+                      <ResultDetailCell {...event} scope={scope} />
+                    </Table.Cell>
+                    <Table.Cell className="upload-job-result-origin-cell">
+                      <Origin response={event.response} />
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+                {visibleEvents.length === 0 ? (
+                  <Table.Row>
+                    <Table.Cell colSpan={5} textAlign="center">
+                      <FormattedMessage id="uploadJob.results.empty" />
+                    </Table.Cell>
+                  </Table.Row>
+                ) : null}
+              </Table.Body>
+            </Table>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+UploadJobResults.propTypes = {
+  constrainResults: PropTypes.bool,
+  events: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      inserted_at: PropTypes.string,
+      response: PropTypes.object,
+      status: PropTypes.string,
+    }),
+  ),
+  lifecycleStatus: PropTypes.string,
+  scope: PropTypes.string,
+};
+
+UploadJobResults.defaultProps = {
+  constrainResults: false,
+  events: [],
+  lifecycleStatus: undefined,
+  scope: "implementations",
+};
+
+export default UploadJobResults;

package/src/components/UploadJobScope.js

@@ -0,0 +1,37 @@
+import {
+  IMPLEMENTATIONS_UPLOAD_JOBS,
+  STRUCTURE_NOTES_UPLOAD_JOBS,
+  linkTo,
+} from "@truedat/core/routes";
+
+export const uploadJobScopes = {
+  implementations: {
+    listPath: IMPLEMENTATIONS_UPLOAD_JOBS,
+    detailPath: (id) => linkTo.IMPLEMENTATIONS_UPLOAD_JOB({ id }),
+    listHeaderId: "uploadJobs.implementations.header",
+    detailHeaderId: "uploadJob.implementations.header",
+    entityColumnMessageId: "uploadJob.results.column.implementation",
+    fieldMessagePrefix: "ruleImplementations.props",
+  },
+  notes: {
+    listPath: STRUCTURE_NOTES_UPLOAD_JOBS,
+    detailPath: (id) => linkTo.STRUCTURE_NOTES_UPLOAD_JOB({ id }),
+    listHeaderId: "uploadJobs.notes.header",
+    detailHeaderId: "uploadJob.notes.header",
+    entityColumnMessageId: "uploadJob.results.column.structure",
+    fieldMessagePrefix: "structures.props",
+    fieldMessageOverrides: { status: "structure.notes.status" },
+  },
+};
+
+const unknownScope = (scope) => ({
+  listPath: null,
+  detailPath: null,
+  listHeaderId: `uploadJobs.${scope}.header`,
+  detailHeaderId: `uploadJob.${scope}.header`,
+  entityColumnMessageId: uploadJobScopes.implementations.entityColumnMessageId,
+  fieldMessagePrefix: uploadJobScopes.implementations.fieldMessagePrefix,
+});
+
+export const getUploadJobScope = (scope) =>
+  uploadJobScopes[scope] ?? unknownScope(scope);

package/src/components/UploadJobSummary.js

@@ -0,0 +1,211 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Message } from "semantic-ui-react";
+
+export const lifecycleStatuses = ["PENDING", "STARTED", "COMPLETED", "FAILED"];
+
+const messagePropsByStatus = {
+  PENDING: { warning: true },
+  STARTED: { info: true },
+  COMPLETED: { positive: true },
+  FAILED: { negative: true },
+};
+
+const emptySummary = {
+  insert_count: 0,
+  update_count: 0,
+  unchanged_count: 0,
+  error_count: 0,
+};
+
+const resultTypeCounters = {
+  created: "insert_count",
+  updated: "update_count",
+  unchanged: "unchanged_count",
+};
+
+const summaryCounterKeys = [
+  "insert_count",
+  "update_count",
+  "unchanged_count",
+  "error_count",
+  "invalid_sheet_count",
+];
+
+const hasSummaryCounters = (response) =>
+  response && summaryCounterKeys.some((key) => key in response);
+
+export const getUploadJobStatus = (events = [], latestStatus) =>
+  _.flow(
+    _.filter(({ status }) => lifecycleStatuses.includes(status)),
+    _.last,
+    _.getOr(latestStatus, "status"),
+  )(events);
+
+export const classifyUploadJobErrorMessage = (message) => {
+  if (typeof message !== "string" || message.trim() === "") {
+    return { type: "unknown" };
+  }
+
+  const normalizedMessage = message.trim();
+  const isTechnicalError =
+    /^%[A-Z][A-Za-z0-9_.]*\{/.test(normalizedMessage) ||
+    /^\{:/.test(normalizedMessage) ||
+    /^\*\* \(/.test(normalizedMessage);
+
+  return isTechnicalError
+    ? { type: "unexpected_error" }
+    : { type: "message", message: normalizedMessage };
+};
+
+export const getUploadJobSummary = (events = [], latestResponse) => {
+  const completedResponse = _.flow(
+    _.filter(({ status }) => status === "COMPLETED"),
+    _.last,
+    _.get("response"),
+  )(events);
+  const response = hasSummaryCounters(completedResponse)
+    ? completedResponse
+    : latestResponse;
+
+  if (hasSummaryCounters(response)) {
+    return {
+      insert_count: response.insert_count ?? 0,
+      update_count: response.update_count ?? 0,
+      unchanged_count: response.unchanged_count ?? 0,
+      error_count:
+        (response.error_count ?? 0) + (response.invalid_sheet_count ?? 0),
+    };
+  }
+
+  return events.reduce((summary, { status, response: eventResponse }) => {
+    if (status === "ERROR") {
+      return { ...summary, error_count: summary.error_count + 1 };
+    }
+
+    const counter =
+      status === "INFO" && resultTypeCounters[eventResponse?.type];
+    return counter ? { ...summary, [counter]: summary[counter] + 1 } : summary;
+  }, emptySummary);
+};
+
+const SummaryItem = ({ messageId, value }) => (
+  <span>
+    <FormattedMessage id={messageId} />: <strong>{value}</strong>
+  </span>
+);
+
+SummaryItem.propTypes = {
+  messageId: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+const CompletedSummary = ({ summary }) => {
+  const total = Object.values(summary).reduce((sum, value) => sum + value, 0);
+
+  return (
+    <>
+      <strong>
+        <FormattedMessage id="uploadJob.summary.title" />
+      </strong>
+      <SummaryItem messageId="uploadJob.summary.total" value={total} />
+      <SummaryItem
+        messageId="uploadJob.parser.result.summary.created"
+        value={summary.insert_count}
+      />
+      <SummaryItem
+        messageId="uploadJob.parser.result.summary.updated"
+        value={summary.update_count}
+      />
+      <SummaryItem
+        messageId="uploadJob.parser.result.summary.unchanged"
+        value={summary.unchanged_count}
+      />
+      <SummaryItem
+        messageId="uploadJob.parser.result.summary.errors"
+        value={summary.error_count}
+      />
+    </>
+  );
+};
+
+CompletedSummary.propTypes = {
+  summary: PropTypes.shape({
+    insert_count: PropTypes.number.isRequired,
+    update_count: PropTypes.number.isRequired,
+    unchanged_count: PropTypes.number.isRequired,
+    error_count: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export const UploadJobSummary = ({ events, latestStatus, latestResponse }) => {
+  const { formatMessage } = useIntl();
+  const status = getUploadJobStatus(events, latestStatus);
+  const summary = getUploadJobSummary(events, latestResponse);
+  const eventFailedResponse = _.flow(
+    _.filter(({ status: eventStatus }) => eventStatus === "FAILED"),
+    _.last,
+    _.get("response"),
+  )(events);
+  const failedResponse = eventFailedResponse?.message
+    ? eventFailedResponse
+    : latestResponse;
+  const error = classifyUploadJobErrorMessage(failedResponse?.message);
+  const detail =
+    error.type === "message"
+      ? formatMessage({
+          id: `uploadJob.parser.error.${error.message}`,
+          defaultMessage: error.message,
+        })
+      : formatMessage({ id: `uploadJob.parser.error.${error.type}` });
+
+  return (
+    <Message
+      {...messagePropsByStatus[status]}
+      aria-label={formatMessage({ id: "uploadJob.summary.title" })}
+      className="upload-job-summary"
+    >
+      <div className="upload-job-summary-content">
+        {status === "COMPLETED" ? <CompletedSummary summary={summary} /> : null}
+        {status === "FAILED" ? (
+          <strong>
+            <FormattedMessage
+              id="uploadJob.summary.failed"
+              values={{ detail }}
+            />
+          </strong>
+        ) : null}
+        {status === "PENDING" || status === "STARTED" ? (
+          <>
+            <strong>
+              <FormattedMessage id="uploadJob.summary.title" />
+            </strong>
+            <FormattedMessage
+              id={`uploadJob.summary.${status.toLowerCase()}`}
+            />
+          </>
+        ) : null}
+      </div>
+    </Message>
+  );
+};
+
+UploadJobSummary.propTypes = {
+  events: PropTypes.arrayOf(
+    PropTypes.shape({
+      status: PropTypes.string,
+      response: PropTypes.object,
+    }),
+  ),
+  latestResponse: PropTypes.object,
+  latestStatus: PropTypes.string,
+};
+
+UploadJobSummary.defaultProps = {
+  events: [],
+  latestResponse: undefined,
+  latestStatus: undefined,
+};
+
+export default UploadJobSummary;

package/src/components/UploadJobs.js

@@ -1,7 +1,8 @@
 import _ from "lodash/fp";
 import moment from "moment";
+import PropTypes from "prop-types";
+import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useNavigate } from "react-router";
 import {
   Header,
   Icon,
@@ -10,27 +11,27 @@ import {
   Loader,
   Table,
 } from "semantic-ui-react";
-import { linkTo } from "@truedat/core/routes";
 import { useUploadJobs } from "../hooks/useUploadJobs";
+import { TrueModal } from "./TrueModal";
 import { StatusPill, ResponseCell } from "./UploadJobParser";
 import UploadJobBreadcrumbs from "./UploadJobBreadcrumbs";
+import { UploadJobModalContent } from "./UploadJob";
+import { getUploadJobScope } from "./UploadJobScope";
 
 export default function UploadJobs({ scope }) {
   const { formatMessage } = useIntl();
   const { data, loading } = useUploadJobs(scope);
   const jobs = data?.data;
-  const navigate = useNavigate();
+  const [selectedJobId, setSelectedJobId] = useState(null);
+  const scopeConfig = getUploadJobScope(scope);
 
-  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;
+  const openUploadJob = ({ id }) => setSelectedJobId(id);
+  const closeUploadJob = () => setSelectedJobId(null);
+
+  const handleRowKeyDown = (job) => (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openUploadJob(job);
     }
   };
 
@@ -47,7 +48,7 @@ export default function UploadJobs({ scope }) {
             })}
           />
           <Header.Content>
-            <FormattedMessage id={`uploadJobs.${scope}.header`} />
+            <FormattedMessage id={scopeConfig.listHeaderId} />
             <Header.Subheader>
               <FormattedMessage id="uploadJobs.subheader" />
             </Header.Subheader>
@@ -87,11 +88,14 @@ export default function UploadJobs({ scope }) {
                 </Table.Header>
                 <Table.Body>
                   {_.isArray(jobs) && !_.isEmpty(jobs) ? (
-                    jobs.map((job, idx) => (
+                    jobs.map((job) => (
                       <Table.Row
-                        key={idx}
+                        key={job.id}
                         style={{ cursor: "pointer" }}
-                        onClick={() => navigateToUploadJob(job)}
+                        tabIndex={0}
+                        aria-label={job.filename}
+                        onClick={() => openUploadJob(job)}
+                        onKeyDown={handleRowKeyDown(job)}
                       >
                         <Table.Cell>{job.filename}</Table.Cell>
                         <Table.Cell>
@@ -131,6 +135,33 @@ export default function UploadJobs({ scope }) {
           </Segment>
         </Dimmer.Dimmable>
       </Segment>
+      <TrueModal
+        open={selectedJobId != null}
+        onClose={closeUploadJob}
+        size="large"
+        className="upload-job-modal"
+        icon={formatMessage({
+          id: "uploadJob.header.icon",
+          defaultMessage: "cogs",
+        })}
+        title={formatMessage({
+          id: scopeConfig.detailHeaderId,
+          defaultMessage: "Upload detail",
+        })}
+        actions={[]}
+      >
+        {selectedJobId != null ? (
+          <UploadJobModalContent id={selectedJobId} scope={scope} />
+        ) : null}
+      </TrueModal>
     </>
   );
 }
+
+UploadJobs.propTypes = {
+  scope: PropTypes.string,
+};
+
+UploadJobs.defaultProps = {
+  scope: "implementations",
+};