@truedat/core 8.12.7 → 8.12.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.12.7",
+  "version": "8.12.9",
   "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.7",
+    "@truedat/test": "8.12.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -71,7 +71,7 @@
     "@tiptap/react": "3.31.3",
     "@tiptap/starter-kit": "3.31.3",
     "@xyflow/react": "^12.6.4",
-    "axios": "^1.15.0",
+    "axios": "^1.20.0",
     "dompurify": "^3.4.11",
     "elkjs": "^0.10.0",
     "graphql": "^16.11.0",
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "dae06fd2f915163d5f1e7e3f26c414c8ee9bf055"
+  "gitHead": "daeb646a9077620db07b6a385b705fe8b8dd62ed"
 }

package/src/components/Graph.js

@@ -41,7 +41,7 @@ const DEFAULT_NODE_HEIGHT = 44;
 const TRANSLATE_EXTENT_MIN_PADDING = 8000;
 const TRANSLATE_EXTENT_SIZE_MULTIPLIER = 4;
 const DEFAULT_GRAPH_HEIGHT = "640px";
-const EXPANDED_GRAPH_HEIGHT = "82vh";
+const EXPANDED_GRAPH_HEIGHT = "100%";
 const DEFAULT_MIN_ZOOM = 0.03;
 const DEFAULT_MAX_ZOOM = 2;
 const FIT_VIEW_PADDING = 0.15;
@@ -1607,7 +1607,7 @@ const LayoutFlow = ({
           <GraphControlTooltip
             content={formatMessage({
               id: "graph.controls.return_normal",
-              defaultMessage: "Volver a vista normal",
+              defaultMessage: "Return to normal view",
             })}
           >
             <ControlButton
@@ -1615,7 +1615,7 @@ const LayoutFlow = ({
               onClick={onCloseExpanded}
               aria-label={formatMessage({
                 id: "graph.controls.return_normal",
-                defaultMessage: "Volver a vista normal",
+                defaultMessage: "Return to normal view",
               })}
             >
               <Minimize2 size={20} strokeWidth={2} />
@@ -1817,9 +1817,16 @@ export const Graph = ({
   graphOptions,
 }) => {
   const [expandedOpen, setExpandedOpen] = useState(false);
-
-  const openExpanded = useCallback(() => setExpandedOpen(true), []);
-  const closeExpanded = useCallback(() => setExpandedOpen(false), []);
+  const expandedTriggerRef = useRef(null);
+  const { formatMessage } = useIntl();
+  const openExpanded = useCallback((event) => {
+    expandedTriggerRef.current = event.currentTarget;
+    setExpandedOpen(true);
+  }, []);
+  const closeExpanded = useCallback(() => {
+    setExpandedOpen(false);
+    expandedTriggerRef.current?.focus();
+  }, []);
 
   return (
     <>
@@ -1843,7 +1850,6 @@ export const Graph = ({
         <Modal
           open={expandedOpen}
           onClose={closeExpanded}
-          closeIcon
           size="fullscreen"
           closeOnDimmerClick
           closeOnEscape
@@ -1866,6 +1872,17 @@ export const Graph = ({
               className={canvasClassName}
               graphOptions={graphOptions}
             />
+            <button
+              className="td-graph-expanded-return"
+              onClick={closeExpanded}
+              type="button"
+            >
+              <Minimize2 size={20} strokeWidth={2} aria-hidden="true" />
+              {formatMessage({
+                id: "graph.controls.return_normal",
+                defaultMessage: "Return to normal view",
+              })}
+            </button>
           </Modal.Content>
         </Modal>
       ) : null}

package/src/components/UploadJobParser.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Label } from "semantic-ui-react";
+import Label from "semantic-ui-react/dist/commonjs/elements/Label";
 import RuleImplementationLink from "@truedat/dq/components/RuleImplementationLink";
 import StructureNoteLink from "@truedat/dd/components/StructureNoteLink";
 

package/src/components/__tests__/Graph.spec.js

@@ -153,6 +153,27 @@ describe("<Graph />", () => {
     });
   });
 
+  it.each([0, 1])(
+    "returns from expanded view using exit %s and restores focus",
+    async (index) => {
+      render(<Graph {...props} />);
+      const trigger = screen.getByLabelText("graph.controls.open_expanded");
+      fireEvent.click(trigger);
+      const buttons = await screen.findAllByRole("button", {
+        name: "Return to normal view",
+      });
+      expect(buttons).toHaveLength(2);
+      expect(document.querySelector(".td-graph-modal > .close")).toBeNull();
+      fireEvent.click(buttons[index]);
+      await waitFor(() =>
+        expect(
+          screen.queryByRole("button", { name: "Return to normal view" }),
+        ).not.toBeInTheDocument(),
+      );
+      expect(trigger).toHaveFocus();
+    },
+  );
+
   it("uses horizontal controls by default and keeps vertical controls in fullscreen", async () => {
     render(
       <Graph {...props} graphOptions={{ controlsOrientation: "vertical" }} />,

package/src/components/__tests__/UploadJobParser.spec.js

@@ -1,7 +1,10 @@
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
 import { StatusPill, ResponseCell } from "../UploadJobParser";
 
+jest.mock("@truedat/dq/components/RuleImplementationLink", () => () => null);
+jest.mock("@truedat/dd/components/StructureNoteLink", () => () => null);
+
 describe("<StatusPill />", () => {
   it("renders with correct color based on status", async () => {
     const statuses = ["COMPLETED", "FAILED", "ERROR", "INFO", "OTHER"];

package/src/search/__tests__/SearchContext.spec.js

@@ -6,11 +6,6 @@ import {
   useSearchContext,
 } from "@truedat/core/search/SearchContext";
 
-jest.mock("react-router", () => ({
-  ...jest.requireActual("react-router"),
-  useLocation: jest.fn(),
-}));
-
 const useFilters = () => ({
   trigger: () => ({
     then: (callback) =>
@@ -152,10 +147,6 @@ describe("<SearchContextProvider />", () => {
   };
 
   it(`matches the latest snapshot`, async () => {
-    jest
-      .spyOn(require("react-router"), "useLocation")
-      .mockReturnValue({ pathname: "/concepts" });
-
     const { container, findByText } = render(
       <SearchContextProvider {...searchProps} defaultFilters={{}}>
         <ChildComponent />

package/src/styles/Graph.less

@@ -23,3 +23,63 @@
     }
   }
 }
+
+.ui.dimmer > .ui.fullscreen.modal.td-graph-modal--expanded {
+  position: fixed;
+  inset: 0 !important;
+  width: 100% !important;
+  max-width: none;
+  height: 100dvh;
+  margin: 0 !important;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+
+  > .content {
+    position: relative;
+    height: 100%;
+    padding: 0 !important;
+    border-radius: 0;
+    overflow: hidden;
+  }
+
+  .td-graph-container {
+    height: 100%;
+  }
+}
+
+.td-graph-expanded-return {
+  position: absolute;
+  bottom: max(20px, env(safe-area-inset-bottom));
+  left: 50%;
+  z-index: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: max-content;
+  max-width: calc(100% - 32px);
+  min-height: 44px;
+  padding: 10px 20px;
+  transform: translateX(-50%);
+  border: 1px solid #d7dde6;
+  border-radius: 999px;
+  background: #fff;
+  color: #334155;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.13);
+  font: inherit;
+  cursor: pointer;
+
+  &:hover {
+    background: #f1f5f9;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--td-graph-accent, #ed5c17);
+    outline-offset: 2px;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}