@truedat/core 8.1.1 → 8.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.1.1",
+  "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.1",
+    "@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": "26ff4767ae2a60605d4958208ca73d91cfe7f81a"
+  "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/GlossaryMenu.js

@@ -26,20 +26,17 @@ import {
 import Submenu from "./Submenu";
 
 function isMenuSubscope(pathname, subscope) {
-  // const match = matchPath(
-  //   {
-  //     path: [
-  //       CONCEPTS_SUBSCOPE,
-  //       CONCEPTS_SIDEMENU_SUBSCOPE,
-  //       CONCEPTS_SIDEMENU_SUBSCOPE_DEPRECATED,
-  //       CONCEPTS_SIDEMENU_SUBSCOPE_PENDING,
-  //     ],
-  //   },
-  //   pathname
-  // );
-
-  // return !!match?.params?.subscope && subscope === match.params.subscope;
-  return false;
+  const pathsToCheck = [
+    CONCEPTS_SUBSCOPE,
+    CONCEPTS_SIDEMENU_SUBSCOPE,
+    CONCEPTS_SIDEMENU_SUBSCOPE_DEPRECATED,
+    CONCEPTS_SIDEMENU_SUBSCOPE_PENDING,
+  ];
+
+  return pathsToCheck.some(path => {
+    const match = matchPath({ path }, pathname);
+    return match?.params?.subscope && subscope === decodeURIComponent(match.params.subscope);
+  });
 }
 
 function mainMenuSubscopes(allSubscopes, rootSubscopes) {
@@ -247,7 +244,6 @@ export const GlossaryMenu = ({ bgSubscopes, rootSubscopes }) => {
 
     const isActiveSubscope = () =>
       conceptSubscope === name || isMenuSubscope(location.pathname, name);
-
     return (
       <Submenu
         key={name}

package/src/components/QualityMenu.js

@@ -6,16 +6,17 @@ import { useAuthorized } from "../hooks";
 import {
   EXECUTION_GROUPS,
   IMPLEMENTATIONS,
+  IMPLEMENTATIONS_BY_SUBSCOPE,
   IMPLEMENTATIONS_DEPRECATED,
   IMPLEMENTATIONS_PENDING,
   IMPLEMENTATIONS_UPLOAD_JOBS,
   QUALITY_DASHBOARD,
   RULES,
 } from "../routes";
-import { getQualityDashboardConfig } from "../selectors";
+import { getQualityDashboardConfig, getRiSubscopes } from "../selectors";
 import Submenu from "./Submenu";
 
-export const ITEMS = [
+export const BASE_ITEMS = [
   { name: "rules", routes: [RULES], groups: ["quality"] },
   { name: "implementations", routes: [IMPLEMENTATIONS], groups: ["quality"] },
   {
@@ -45,7 +46,7 @@ export const ITEMS = [
   },
 ];
 
-export const QualityMenu = ({ dashboardConfig }) => {
+export const QualityMenu = ({ dashboardConfig, riSubscopes }) => {
   const { formatMessage } = useIntl();
   const iconQuality = formatMessage({
     id: "sidemenu.quality.icon",
@@ -57,21 +58,45 @@ export const QualityMenu = ({ dashboardConfig }) => {
     "quality_implementation_additional_actions"
   );
 
-  const filteredItems = _.filter(
+  if (!authorized) return null;
+
+  const filteredBaseItems = _.filter(
     ({ name }) => name != "quality_dashboard" || !_.isEmpty(dashboardConfig)
-  )(ITEMS);
+  )(BASE_ITEMS);
+
+  const extendedItems = filteredBaseItems.reduce((acc, item) => {
+    acc.push(item);
+
+    if (item.name === "implementations") {
+      riSubscopes.forEach(subscope => {
+        acc.push({
+          name: subscope,
+          routes: [IMPLEMENTATIONS_BY_SUBSCOPE.replace(':subscope', subscope)],  
+          groups: ["quality"],
+        });
+      });
+    }
+
+    return acc;
+  }, []);
 
-  return authorized ? (
-    <Submenu items={filteredItems} icon={iconQuality} name="quality" />
-  ) : null;
+  return (
+    <Submenu items={extendedItems} icon={iconQuality} name="quality" />
+  );
 };
 
 QualityMenu.propTypes = {
   dashboardConfig: PropTypes.object,
+  riSubscopes: PropTypes.array,
+};
+
+QualityMenu.defaultProps = {
+  riSubscopes: [],
 };
 
 export const mapStateToProps = (state) => ({
   dashboardConfig: getQualityDashboardConfig(state),
+  riSubscopes: getRiSubscopes(state),
 });
 
-export default connect(mapStateToProps)(QualityMenu);
+export default connect(mapStateToProps)(QualityMenu);

package/src/components/Submenu.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
-import { useLocation, Link, useNavigate } from "react-router";
+import { useLocation, Link, useNavigate, matchPath } from "react-router";
 import { Dropdown, Icon, Menu } from "semantic-ui-react";
 import { useAuthorizedItems, useActiveRoutes } from "@truedat/core/hooks";
 import { clearNavFilter as clearBucketFilterRoutine } from "@truedat/core/routines";
@@ -84,14 +84,49 @@ export const Submenu = ({
   }, [location]);
 
   const primaryRoute = _.flow(_.flatMap("routes"), _.head)(filteredItems);
+  const pathname = location.pathname;
+  const decodedPathname = decodeURIComponent(pathname);
+  const routes = _.flatMap("routes")(filteredItems);
+
+  const pathParts = pathname.split('/').filter(part => part !== '');
+  const hasSubscopeInPath = pathname.includes('/subscope/');
+  let subscopeName = null;
+  if (hasSubscopeInPath && pathParts.length >= 3 && pathParts[1] === 'subscope') {
+    subscopeName = decodeURIComponent(pathParts[2]).replace(/%20/g, ' ');
+  }
+
+  const isSubmenuActiveForSubscope = hasSubscopeInPath && subscopeName &&
+    _.some(item =>
+      item.name.toLowerCase() === subscopeName.toLowerCase()
+    )(filteredItems);
+
+  const isSubmenuActiveForRoutes = _.some(item =>
+    _.some(route => {
+      const decodedPathname = decodeURIComponent(pathname);
+      return decodedPathname === route ||
+             decodedPathname.startsWith(`${route}/`) ||
+             matchPath({ path: route }, decodedPathname);
+    })(item.routes)
+  )(filteredItems);
+
+  // Determine if submenu should be active, with special handling for management URLs
+  const submenuIsActive = (isActive || isSubmenuActiveForSubscope || isSubmenuActiveForRoutes) &&
+    !(name === 'glossary' && location.pathname.startsWith('/concepts/management/'));
+
 
-  if (isActive && sidebarVisible) {
+  if (submenuIsActive && sidebarVisible) {
     const menuItems = filteredItems.map((item, i) => {
       const isItemActive =
-        isActive &&
+        submenuIsActive &&
         (item.isActive
           ? item.isActive()
-          : _.includes(activeRoute, item.routes));
+          : hasSubscopeInPath && subscopeName
+            ? item.name.toLowerCase() === subscopeName.toLowerCase() 
+            : item.routes.some(route =>
+                route === activeRoute || 
+                route === pathname || route === decodedPathname || 
+                matchPath({ path: route }, pathname) || matchPath({ path: route }, decodedPathname) // Pattern match
+              ));
 
       return (
         <MenuItem
@@ -120,7 +155,7 @@ export const Submenu = ({
       </Menu.Item>
     );
   } else {
-    const className = isActive ? "active" : null;
+    const className = submenuIsActive ? "active" : null;
 
     const trigger = (
       <Link to={primaryRoute} className="ui">
@@ -132,10 +167,16 @@ export const Submenu = ({
     );
     const dropdownItems = filteredItems.map((item, i) => {
       const isItemActive =
-        isActive &&
+        submenuIsActive &&
         (item.isActive
           ? item.isActive()
-          : _.includes(activeRoute, item.routes));
+          : hasSubscopeInPath && subscopeName
+            ? item.name.toLowerCase() === subscopeName.toLowerCase() 
+            : item.routes.some(route =>
+                route === activeRoute || 
+                route === pathname || route === decodedPathname || 
+                matchPath({ path: route }, pathname) || matchPath({ path: route }, decodedPathname) 
+              ));
 
       return (
         <DropdownItem

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;