@truedat/core 8.13.0 → 8.13.1

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;
-};