@truedat/core 8.12.12 → 8.13.1

package/package.json

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

package/src/components/TrueModal.js

@@ -0,0 +1,137 @@
+import { useId } from "react";
+import PropTypes from "prop-types";
+import { useIntl, FormattedMessage } from "react-intl";
+import { Button, Icon, Modal } from "semantic-ui-react";
+import _ from "lodash/fp";
+
+const bannerIcons = {
+  warning: "warning sign",
+  danger: "times circle",
+  success: "check circle",
+  info: "info circle",
+};
+
+export const TrueModal = ({
+  title,
+  subtitle,
+  icon,
+  headerColor,
+  headerTextColor,
+  children,
+  banner,
+  bannerType = "warning",
+  bannerIcon,
+  actions,
+  footer,
+  onCancel,
+  onCreate,
+  className,
+  ...modalProps
+}) => {
+  const titleId = useId();
+  const { formatMessage } = useIntl();
+  const defaultActions = _.compact([
+    onCancel && {
+      key: "cancel",
+      content: <FormattedMessage id="actions.cancel" defaultMessage="Cancel" />,
+      secondary: true,
+      onClick: onCancel,
+    },
+    onCreate && {
+      key: "create",
+      content: <FormattedMessage id="actions.create" defaultMessage="Create" />,
+      primary: true,
+      onClick: onCreate,
+    },
+  ]);
+  const resolvedActions = actions?.length ? actions : defaultActions;
+
+  return (
+    <Modal
+      {..._.omit(["header", "content", "closeIcon"])(modalProps)}
+      className={_.compact(["true-modal", className]).join(" ")}
+      role="dialog"
+      aria-labelledby={
+        modalProps["aria-labelledby"] ||
+        (modalProps["aria-label"] ? undefined : titleId)
+      }
+      closeIcon={
+        <button
+          type="button"
+          className="true-modal-close"
+          style={{ color: headerTextColor }}
+          aria-label={formatMessage({
+            id: "actions.close",
+            defaultMessage: "Close",
+          })}
+        >
+          &times;
+        </button>
+      }
+    >
+      <Modal.Header style={{ background: headerColor, color: headerTextColor }}>
+        {icon ? <Icon name={icon} size="large" /> : null}
+        <div className="true-modal-heading">
+          <span id={titleId}>{title}</span>
+          {subtitle != null ? (
+            <p className="true-modal-subtitle">{subtitle}</p>
+          ) : null}
+        </div>
+      </Modal.Header>
+      <Modal.Content className="true-modal-content">{children}</Modal.Content>
+      {banner != null && banner !== false ? (
+        <div className={`true-modal-banner ${bannerType}`}>
+          <Icon name={bannerIcon || bannerIcons[bannerType]} />
+          <div>{banner}</div>
+        </div>
+      ) : null}
+      {footer != null ? (
+        footer
+      ) : resolvedActions.length ? (
+        <Modal.Actions className="true-modal-actions">
+          {resolvedActions.map(({ key, disabled, loading, ...buttonProps }) => (
+            <Button
+              key={key}
+              type="button"
+              {...buttonProps}
+              disabled={disabled || loading}
+              loading={loading}
+            />
+          ))}
+        </Modal.Actions>
+      ) : null}
+    </Modal>
+  );
+};
+
+TrueModal.propTypes = {
+  title: PropTypes.node.isRequired,
+  subtitle: PropTypes.node,
+  icon: PropTypes.string,
+  headerColor: PropTypes.string,
+  headerTextColor: PropTypes.string,
+  children: PropTypes.node,
+  banner: PropTypes.node,
+  bannerType: PropTypes.oneOf(["warning", "danger", "success", "info"]),
+  bannerIcon: PropTypes.string,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      content: PropTypes.node,
+      onClick: PropTypes.func,
+      disabled: PropTypes.bool,
+      loading: PropTypes.bool,
+      primary: PropTypes.bool,
+      secondary: PropTypes.bool,
+      negative: PropTypes.bool,
+      type: PropTypes.string,
+      "aria-label": PropTypes.string,
+    }),
+  ),
+  footer: PropTypes.node,
+  onCancel: PropTypes.func,
+  onCreate: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export default TrueModal;

package/src/components/UploadJob.js

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

package/src/components/UploadJobBreadcrumbs.js

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