@truedat/core 8.12.12 → 8.13.1

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",
+};

package/src/components/UploadJobHistory.js

@@ -0,0 +1,90 @@
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Table } from "semantic-ui-react";
+import DateTime from "@truedat/core/components/DateTime";
+import { StatusPill } from "./UploadJobParser";
+import { lifecycleStatuses } from "./UploadJobSummary";
+
+export const getLifecycleEvents = (events = []) =>
+  events.filter(({ status }) => lifecycleStatuses.includes(status));
+
+const UploadJobHistory = ({ events }) => {
+  const lifecycleEvents = getLifecycleEvents(events);
+
+  return (
+    <section
+      className="upload-job-history"
+      aria-labelledby="upload-job-history-title"
+    >
+      <h3 id="upload-job-history-title">
+        <FormattedMessage id="uploadJob.history.title" />
+      </h3>
+      <Table
+        basic="very"
+        className="upload-job-history-table"
+        verticalAlign="middle"
+      >
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell className="upload-job-visually-hidden">
+              <FormattedMessage id="uploadJob.table.status" />
+            </Table.HeaderCell>
+            <Table.HeaderCell className="upload-job-visually-hidden">
+              <FormattedMessage id="uploadJob.table.inserted_at" />
+            </Table.HeaderCell>
+            <Table.HeaderCell className="upload-job-visually-hidden">
+              <FormattedMessage id="uploadJob.table.response" />
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {lifecycleEvents.map((event, index) => (
+            <Table.Row
+              key={event.id ?? `${event.status}-${index}`}
+              className={
+                index === lifecycleEvents.length - 1
+                  ? "upload-job-history-final"
+                  : "upload-job-history-intermediate"
+              }
+            >
+              <Table.Cell textAlign="center">
+                <span className="upload-job-history-pill">
+                  <StatusPill status={event.status} />
+                </span>
+              </Table.Cell>
+              <Table.Cell>
+                <DateTime value={event.inserted_at} />
+              </Table.Cell>
+              <Table.Cell>
+                <FormattedMessage id={`uploadJob.history.${event.status}`} />
+              </Table.Cell>
+            </Table.Row>
+          ))}
+          {lifecycleEvents.length === 0 ? (
+            <Table.Row>
+              <Table.Cell colSpan={3}>
+                <FormattedMessage id="uploadJob.history.empty" />
+              </Table.Cell>
+            </Table.Row>
+          ) : null}
+        </Table.Body>
+      </Table>
+    </section>
+  );
+};
+
+UploadJobHistory.propTypes = {
+  events: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      inserted_at: PropTypes.string,
+      status: PropTypes.string,
+    }),
+  ),
+};
+
+UploadJobHistory.defaultProps = {
+  events: [],
+};
+
+export default UploadJobHistory;

package/src/components/UploadJobParser.js

@@ -1,15 +1,19 @@
 import _ from "lodash/fp";
-import { useState } from "react";
+import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import Label from "semantic-ui-react/dist/commonjs/elements/Label";
 import RuleImplementationLink from "@truedat/dq/components/RuleImplementationLink";
 import StructureNoteLink from "@truedat/dd/components/StructureNoteLink";
+import { ChangesDetail, ErrorDetailsDisclosure } from "./UploadJobDetails";
+import { classifyUploadJobErrorMessage } from "./UploadJobSummary";
 
 export const StatusPill = ({ status }) => (
   <Label
     color={_.cond([
       [_.eq("COMPLETED"), _.constant("green")],
       [_.eq("FAILED"), _.constant("red")],
+      [_.eq("PENDING"), _.constant("yellow")],
+      [_.eq("STARTED"), _.constant("blue")],
       [_.eq("ERROR"), _.constant("red")],
       [_.eq("INFO"), _.constant("blue")],
       [_.stubTrue, _.constant("grey")],
@@ -20,23 +24,34 @@ export const StatusPill = ({ status }) => (
   </Label>
 );
 
-export const ResponseCell = ({ response, status }) => {
+export const ResponseCell = ({
+  response,
+  status,
+  showOrigin = true,
+  scope,
+}) => {
   if (!response || (_.isObject(response) && _.isEmpty(response))) return null;
 
   switch (status) {
-    case "FAILED":
+    case "FAILED": {
+      const error = classifyUploadJobErrorMessage(response.message);
       return (
         <FormattedMessage
-          id={`uploadJob.parser.error.${response.message}`}
-          defaultMessage={response.message}
+          id={`uploadJob.parser.error.${
+            error.type === "message" ? error.message : error.type
+          }`}
+          defaultMessage={error.message}
         />
       );
+    }
     case "ERROR":
-      return <ErrorDetail response={response} />;
+      return <ErrorDetail response={response} showOrigin={showOrigin} />;
     case "COMPLETED":
       return <CompletedDetail response={response} />;
     case "INFO":
-      return <InfoDetail response={response} />;
+      return (
+        <InfoDetail response={response} showOrigin={showOrigin} scope={scope} />
+      );
     default:
       return (
         <pre
@@ -54,6 +69,86 @@ export const ResponseCell = ({ response, status }) => {
   }
 };
 
+export const ResultEntityCell = ({ response, status }) => {
+  if (!response?.details || !["INFO", "ERROR"].includes(status)) return null;
+
+  if (status === "ERROR" && response.type === "data_structure_not_found") {
+    return null;
+  }
+
+  return response.details.implementation_key != null ? (
+    <RuleImplementationLink {...response.details} />
+  ) : status === "INFO" &&
+    (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}
+      alias={response.details.alias}
+      name={response.details.name}
+    />
+  ) : status === "ERROR" &&
+    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}
+      alias={response.details.alias}
+      name={response.details.name}
+    />
+  ) : null;
+};
+
+ResultEntityCell.propTypes = {
+  response: PropTypes.shape({
+    details: PropTypes.shape({
+      data_structure_id: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+      ]),
+      external_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      alias: PropTypes.string,
+      implementation_key: PropTypes.string,
+      implementation_ref: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+      ]),
+      name: PropTypes.string,
+    }),
+  }),
+  status: PropTypes.string,
+};
+
+export const ResultDetailCell = ({ response, status, scope }) => {
+  if (status === "ERROR")
+    return <ErrorDetail response={response} showOrigin={false} />;
+  if (
+    status !== "INFO" ||
+    !["updated", "implementation_updated"].includes(response?.type)
+  )
+    return null;
+
+  return (
+    <ChangesDetail
+      changes={response?.details?.changes}
+      changeDetails={response?.details?.change_details}
+      scope={scope}
+    />
+  );
+};
+
+ResultDetailCell.propTypes = {
+  response: PropTypes.shape({
+    details: PropTypes.shape({
+      change_details: PropTypes.object,
+      changes: PropTypes.object,
+    }),
+    type: PropTypes.string,
+  }),
+  scope: PropTypes.string,
+  status: PropTypes.string,
+};
+
 const SheetAndLine = ({ response }) => (
   <Label size="small">
     <span>{response.sheet}</span>
@@ -67,14 +162,16 @@ const SheetAndLine = ({ response }) => (
   </Label>
 );
 
-const CellHeader = ({ header, response }) => (
+const CellHeader = ({ header, response, showOrigin = true }) => (
   <div style={{ display: "flex", justifyContent: "space-between" }}>
     <b>
       <FormattedMessage id={header} />
     </b>
-    <div>
-      <SheetAndLine response={response} />
-    </div>
+    {showOrigin ? (
+      <div>
+        <SheetAndLine response={response} />
+      </div>
+    ) : null}
   </div>
 );
 
@@ -83,12 +180,14 @@ const externalIdDetailValue = (details) =>
     <StructureNoteLink
       data_structure_id={details.data_structure_id}
       external_id={details.external_id}
+      alias={details.alias}
+      name={details.name}
     />
   ) : (
     (details?.external_id ?? "")
   );
 
-const ErrorDetail = ({ response }) => {
+const ErrorDetail = ({ response, showOrigin }) => {
   const { formatMessage } = useIntl();
 
   if (!response || !response.type) {
@@ -97,6 +196,14 @@ const ErrorDetail = ({ response }) => {
   const { type } = response;
   const messagePrefix = "uploadJob.parser.detail";
 
+  if (!showOrigin && type === "data_structure_not_found") {
+    return (
+      <span className="upload-job-simple-error">
+        <FormattedMessage id="uploadJob.parser.error.data_structure_not_found" />
+      </span>
+    );
+  }
+
   const detailBuilders = {
     missing_required_headers: (details) => [
       [
@@ -225,11 +332,29 @@ const ErrorDetail = ({ response }) => {
     details,
   );
 
+  const resultDetails =
+    !showOrigin &&
+    _.isEmpty(visibleDetails) &&
+    response.details != null &&
+    (typeof response.details !== "object" || !_.isEmpty(response.details))
+      ? [
+          [
+            formatMessage({ id: `${messagePrefix}.message` }),
+            formatErrorValue(response.details),
+          ],
+        ]
+      : visibleDetails;
+
+  if (!showOrigin && !_.isEmpty(resultDetails)) {
+    return <ErrorDetailsDisclosure details={resultDetails} />;
+  }
+
   return (
     <div>
       <CellHeader
         header={`uploadJob.parser.error.${type}`}
         response={response}
+        showOrigin={showOrigin}
       />
 
       {_.isEmpty(visibleDetails)
@@ -253,6 +378,15 @@ const ErrorDetail = ({ response }) => {
     </div>
   );
 };
+
+const formatErrorValue = (value) => {
+  if (typeof value === "string" || typeof value === "number") return value;
+  if (typeof value === "boolean") return String(value);
+  if (_.isArray(value)) return value.map(formatErrorValue).join(", ");
+  if (_.isObject(value)) return JSON.stringify(value);
+  return String(value ?? "");
+};
+
 const summaryItems = [
   {
     key: "invalid_sheet_count",
@@ -301,7 +435,7 @@ const CompletedDetail = ({ response }) => {
   return <span>&nbsp;|&nbsp;{items}&nbsp;|&nbsp;</span>;
 };
 
-const InfoDetail = ({ response }) =>
+const InfoDetail = ({ response, showOrigin, scope }) =>
   !response || !response.type ? null : (
     <div>
       <CellHeader
@@ -311,6 +445,7 @@ const InfoDetail = ({ response }) =>
             : `uploadJob.parser.info.${response.type}`
         }
         response={response}
+        showOrigin={showOrigin}
       />
       {response.details ? (
         <div>
@@ -321,85 +456,16 @@ const InfoDetail = ({ response }) =>
             <StructureNoteLink
               data_structure_id={response.details.data_structure_id}
               external_id={response.details.external_id}
+              alias={response.details.alias}
+              name={response.details.name}
             />
           ) : 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>
-        ))}
+      <ChangesDetail
+        changes={response?.details?.changes}
+        changeDetails={response?.details?.change_details}
+        scope={scope}
+      />
     </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("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;
-};