@truedat/dd 8.13.6 → 8.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.13.6",
+  "version": "8.13.7",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.13.6",
+    "@truedat/test": "8.13.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -90,5 +90,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "c0943c8cf31e82a81fdca24d68ef57406fe5bcbc"
+  "gitHead": "704dcfcba34b6094a368a93059de7f4937502f32"
 }

package/src/components/GraphGenerationDialog.js

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Button, Modal } from "semantic-ui-react";
+
+export const GraphGenerationDialog = ({
+  open,
+  requestKey,
+  onBackground,
+  onClose = onBackground,
+}) => {
+  const { formatMessage } = useIntl();
+  const [delayed, setDelayed] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+  const previousFocus = useRef(null);
+  const attachDialog = useCallback((node) => {
+    if (node) {
+      previousFocus.current = document.activeElement;
+      node.querySelector("button")?.focus();
+    } else if (previousFocus.current?.isConnected) {
+      previousFocus.current.focus();
+    }
+  }, []);
+  const trapFocus = (event) => {
+    if (event.key !== "Tab") return;
+    const buttons = [
+      ...event.currentTarget.querySelectorAll("button:not(:disabled)"),
+    ];
+    const first = buttons[0];
+    const last = buttons[buttons.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first?.focus();
+    }
+  };
+
+  useEffect(() => {
+    setDelayed(false);
+    setWaiting(false);
+    if (!open) return undefined;
+    // One timer per request; polling updates do not restart the explanation.
+    const timeout = setTimeout(() => setDelayed(true), 3000);
+    return () => clearTimeout(timeout);
+  }, [open, requestKey]);
+
+  return (
+    <Modal
+      open={open}
+      basic
+      size="tiny"
+      className={`lineage-generation-dialog${delayed ? " lineage-generation-dialog--expanded" : ""}`}
+      dimmer={{ className: "lineage-generation-dimmer" }}
+      onClose={onClose}
+      closeOnDimmerClick={false}
+      aria-labelledby="lineage-generation-title"
+      aria-describedby={delayed ? "lineage-generation-description" : undefined}
+    >
+      <div
+        className="lineage-graph__loading-card"
+        ref={attachDialog}
+        onKeyDown={trapFocus}
+      >
+        <button
+          type="button"
+          className="lineage-generation-dialog__close"
+          onClick={onClose}
+          aria-label={formatMessage({ id: "lineage.graph.wait.close" })}
+        >
+          ×
+        </button>
+        <span className="lineage-graph__loading-spinner" aria-hidden="true" />
+        <p
+          id="lineage-generation-title"
+          className="lineage-graph__loading-title"
+          role="status"
+        >
+          <FormattedMessage
+            id="lineage.graph.loading"
+            defaultMessage="Analyzing..."
+          />
+        </p>
+        {delayed ? (
+          <>
+            <p
+              id="lineage-generation-description"
+              className="lineage-graph__loading-note"
+            >
+              {formatMessage({ id: "lineage.graph.wait.explanation" })}
+            </p>
+            <div className="lineage-generation-dialog__actions">
+              <Button
+                type="button"
+                primary
+                disabled={waiting}
+                onClick={(event) => {
+                  setWaiting(true);
+                  event.currentTarget.nextElementSibling?.focus();
+                }}
+              >
+                {formatMessage({
+                  id: waiting
+                    ? "lineage.graph.wait.waiting"
+                    : "lineage.graph.wait.continue",
+                })}
+              </Button>
+              <Button type="button" onClick={onBackground}>
+                {formatMessage({ id: "lineage.graph.wait.background" })}
+              </Button>
+            </div>
+          </>
+        ) : null}
+      </div>
+    </Modal>
+  );
+};
+GraphGenerationDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  requestKey: PropTypes.string,
+  onBackground: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+};
+export default GraphGenerationDialog;

package/src/components/GraphGenerationNotices.js

@@ -0,0 +1,67 @@
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Link } from "react-router";
+import { linkTo } from "@truedat/core/routes";
+import { dismissGraphGeneration } from "../routines";
+
+export const GraphGenerationNotices = ({
+  jobs = {},
+  dismissGraphGeneration,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <div className="lineage-generation-notices" aria-live="polite">
+      {Object.values(jobs)
+        .filter(
+          (job) => job.notify || (!job.background && job.status === "failed"),
+        )
+        .map((job) => {
+          const pending = ["pending", "awaitingEvent"].includes(job.status);
+          const message = pending
+            ? "background.notice"
+            : job.status === "failed"
+              ? "failed"
+              : "completed";
+          return (
+            <div
+              className={`lineage-generation-notices__item${job.status === "completed" ? " lineage-generation-notices__item--ready" : ""}`}
+              key={job.requestId}
+              role={job.status === "failed" ? "alert" : "status"}
+            >
+              <span>
+                {formatMessage({ id: `lineage.graph.wait.${message}` })}
+              </span>
+              {job.status === "completed" && job.graphId != null ? (
+                <Link
+                  to={linkTo.GRAPH({ id: job.graphId })}
+                  onClick={() => dismissGraphGeneration(job.requestId)}
+                >
+                  {formatMessage({ id: "lineage.graph.wait.open" })}
+                </Link>
+              ) : null}
+              {!pending ? (
+                <button
+                  type="button"
+                  onClick={() => dismissGraphGeneration(job.requestId)}
+                  aria-label={formatMessage({
+                    id: "lineage.graph.wait.dismiss",
+                  })}
+                >
+                  ×
+                </button>
+              ) : null}
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+GraphGenerationNotices.propTypes = {
+  jobs: PropTypes.object,
+  dismissGraphGeneration: PropTypes.func.isRequired,
+};
+export default connect(
+  ({ graphGenerationState }) => ({ jobs: graphGenerationState?.jobs }),
+  { dismissGraphGeneration },
+)(GraphGenerationNotices);

package/src/components/GraphLoader.js

@@ -1,21 +1,23 @@
 import _ from "lodash/fp";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useParams, useNavigate } from "react-router";
+import { useParams, useNavigate, useLocation } from "react-router";
 import { GRAPH } from "@truedat/core/routes";
-import { fetchGraph, clearGraph, cancelPoll } from "../routines";
+import { fetchGraph, clearGraph } from "../routines";
 
 export const GraphLoader = ({
   clearGraph,
   fetchGraph,
   graph,
-  cancelPoll,
   graphRedirect,
 }) => {
   const { id } = useParams();
 
   const navigate = useNavigate();
+  const { key: navigationKey } = useLocation();
+  const routeKey = `${navigationKey}:${id}`;
+  const requestedId = useRef(null);
 
   useEffect(() => {
     return () => {
@@ -24,27 +26,21 @@ export const GraphLoader = ({
   }, [clearGraph]);
 
   useEffect(() => {
-    if (id) {
+    // Keep one request per route, including failed or still pending responses.
+    if (id && requestedId.current !== routeKey) {
       if (_.isEmpty(graph)) {
+        requestedId.current = routeKey;
         fetchGraph({ id });
         /* If graphRedirect is present, a new graph has already been loaded, so
          * there is no need to fetchGraph. The URL is being changed by
          * GraphLoader history.push to the new graph id.
          */
       } else if (!graphRedirect && id != graph.id) {
+        requestedId.current = routeKey;
         fetchGraph({ id });
       }
     }
-  }, [graph, graphRedirect, fetchGraph, id]);
-
-  useEffect(() => {
-    return () => {
-      // && history.location.pathname === "any specific path")
-      if (history.action === "POP") {
-        cancelPoll();
-      }
-    };
-  }, [history]);
+  }, [graph, graphRedirect, fetchGraph, id, routeKey]);
 
   return null;
 };
@@ -53,7 +49,6 @@ GraphLoader.propTypes = {
   clearGraph: PropTypes.func.isRequired,
   fetchGraph: PropTypes.func.isRequired,
   graph: PropTypes.object,
-  cancelPoll: PropTypes.func,
   graphRedirect: PropTypes.string,
 };
 
@@ -62,6 +57,6 @@ const mapStateToProps = ({ graph, graphRedirect }) => ({
   graphRedirect,
 });
 
-export default connect(mapStateToProps, { clearGraph, fetchGraph, cancelPoll })(
+export default connect(mapStateToProps, { clearGraph, fetchGraph })(
   GraphLoader,
 );

package/src/components/GraphRedirector.js

@@ -10,11 +10,11 @@ export const GraphRedirector = ({ graph, graphRedirect, clearRedirect }) => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
   useEffect(() => {
-    if (graphRedirect && !_.isEqual(pathname, graphRedirect)) {
-      navigate(graphRedirect);
-      clearRedirect();
+    if (graphRedirect) {
+      if (!_.isEqual(pathname, graphRedirect)) navigate(graphRedirect);
+      else clearRedirect();
     }
-  }, [history, pathname, graphRedirect, clearRedirect]);
+  }, [navigate, pathname, graphRedirect, clearRedirect]);
   return null;
 };
 

package/src/components/LineageGraph.js

@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
 import Graph from "@truedat/core/components/Graph";
 import { EdgeHoverContext } from "@truedat/core/components/graph/ColoredEdge";
-import { cancelPoll } from "../routines";
+import { backgroundGraph } from "../routines";
 import { layoutVisibleLineageGraph } from "../utils/lineageLayout";
 import {
   createLineageGraphIndex,
@@ -62,6 +62,7 @@ import {
   spreadLegacyFieldIndexes,
   legacyPathEdges,
 } from "../utils/lineageGraph";
+import GraphGenerationDialog from "./GraphGenerationDialog";
 import LineageGraphNode from "./LineageGraphNode";
 import LineageModuleButton from "./LineageModuleButton";
 import LineageGraphToolbar, { visibleLegendKeys } from "./LineageGraphToolbar";
@@ -126,8 +127,8 @@ export const LineageGraph = ({
   resources: legacyResources = [],
   topology,
   loading,
-  loadingInfo,
-  cancelPoll,
+  generationJob,
+  backgroundGraph,
   graphType = "impact",
   nodeDesign = "redesigned",
   onGraphReady,
@@ -188,7 +189,10 @@ export const LineageGraph = ({
   const defaultCollapseSignatureRef = useRef("");
   const layoutAnchorNodeIdRef = useRef(null);
   const previousLayoutRef = useRef([]);
-  const { formatMessage } = useIntl();
+  const [waitDismissed, setWaitDismissed] = useState(false);
+  useEffect(() => {
+    setWaitDismissed(false);
+  }, [generationJob?.requestId, loading]);
   const positionedLayout = useMemo(
     () =>
       Boolean(preparedTopology) ||
@@ -223,8 +227,6 @@ export const LineageGraph = ({
     [groups, resources],
   );
 
-  useEffect(() => () => cancelPoll(), [cancelPoll]);
-
   useEffect(() => {
     const timeoutId = setTimeout(() => setSearchTerm(searchInput), 300);
 
@@ -1438,51 +1440,33 @@ export const LineageGraph = ({
   return (
     <div className="lineage-graph">
       <div className="lineage-graph__canvas">
-        {loading || (hasGraph && fittedGraphKey !== graphIdForFit) ? (
-          <div
-            className="lineage-graph__loading"
-            role="status"
-            aria-live="polite"
-          >
+        {!simplified && generationJob ? (
+          <GraphGenerationDialog
+            open={
+              !generationJob?.background &&
+              !waitDismissed &&
+              (loading || (hasGraph && fittedGraphKey !== graphIdForFit))
+            }
+            requestKey={generationJob?.requestId}
+            onClose={() => {
+              setWaitDismissed(true);
+              backgroundGraph?.({ notify: false });
+            }}
+            onBackground={() => {
+              setWaitDismissed(true);
+              backgroundGraph?.();
+            }}
+          />
+        ) : loading ? (
+          <div className="lineage-graph__loading" role="status">
             <div className="lineage-graph__loading-card">
               <span
                 className="lineage-graph__loading-spinner"
                 aria-hidden="true"
               />
               <p className="lineage-graph__loading-title">
-                <FormattedMessage
-                  id="lineage.graph.loading"
-                  defaultMessage="Analyzing..."
-                />
+                <FormattedMessage id="lineage.graph.loading" />
               </p>
-              {loadingInfo?.data?.graph_hash && loadingInfo?.data?.status ? (
-                <p className="lineage-graph__loading-note">
-                  {formatMessage({
-                    id:
-                      _.toLower(loadingInfo?.data?.status) === "already_started"
-                        ? "lineage.graph.loading.background.existing"
-                        : _.toLower(loadingInfo?.data?.status) ===
-                            "just_started" &&
-                          "lineage.graph.loading.background.launched",
-                  })}
-                </p>
-              ) : null}
-              {loadingInfo?.data?.graph_hash ? (
-                <p className="lineage-graph__loading-note">
-                  Graph hash:{" "}
-                  <span className="graph-hash">
-                    {loadingInfo?.data?.graph_hash}
-                  </span>
-                </p>
-              ) : null}
-              {loadingInfo?.data?.retry ? (
-                <p className="lineage-graph__loading-note">
-                  {formatMessage(
-                    { id: "lineage.graph.loading.polling" },
-                    { retry: loadingInfo?.data?.retry },
-                  )}
-                </p>
-              ) : null}
             </div>
           </div>
         ) : null}
@@ -1569,8 +1553,8 @@ LineageGraph.propTypes = {
   topology: PropTypes.object,
   height: PropTypes.string,
   loading: PropTypes.bool,
-  loadingInfo: PropTypes.object,
-  cancelPoll: PropTypes.func,
+  generationJob: PropTypes.object,
+  backgroundGraph: PropTypes.func,
   graphType: PropTypes.string,
   nodeDesign: PropTypes.oneOf(["classic", "redesigned"]),
   onGraphReady: PropTypes.func,
@@ -1582,7 +1566,10 @@ LineageGraph.propTypes = {
   structureId: PropTypes.string,
 };
 
-const mapStateToProps = ({ graph = {}, graphLoading }, ownProps) => {
+const mapStateToProps = (
+  { graph = {}, graphLoading, graphGenerationState },
+  ownProps,
+) => {
   const graphData = _.propOr(graph, "graph")(ownProps);
   const paths = _.propOr([], "paths")(graphData);
   const links = _.propOr(paths, "links")(graphData);
@@ -1599,11 +1586,13 @@ const mapStateToProps = ({ graph = {}, graphLoading }, ownProps) => {
     groups: _.prop("groups")(graphData),
     resources: _.prop("resources")(graphData),
     loading: graphLoading !== false,
-    loadingInfo: graphLoading,
+    generationJob: ownProps.simplified
+      ? undefined
+      : graphGenerationState?.jobs[graphGenerationState.active],
   };
 };
 
-export default connect(mapStateToProps, { cancelPoll })(LineageGraph);
+export default connect(mapStateToProps, { backgroundGraph })(LineageGraph);
 
 export const LineageGraphEmptyState = () => {
   const { formatMessage } = useIntl();

package/src/components/LineageRoutes.js

@@ -4,23 +4,30 @@ import { ProtectedRoute } from "@truedat/core/router";
 import { GRAPHS } from "@truedat/core/routes";
 import GraphLoader from "./GraphLoader";
 import Graphs from "./Graphs";
+import GraphGenerationNotices from "./GraphGenerationNotices";
 
 export const LineageRoutes = () => {
   return (
-    <Routes>
-      <Route path={GRAPHS} element={<ProtectedRoute authorization="lineage" />}>
+    <>
+      <GraphGenerationNotices />
+      <Routes>
         <Route
-          path=":id?"
-          element={
-            <>
-              <Graphs />
-              <GraphLoader />
-            </>
-          }
-        />
-      </Route>
-      <Route path="*" element={null} />
-    </Routes>
+          path={GRAPHS}
+          element={<ProtectedRoute authorization="lineage" />}
+        >
+          <Route
+            path=":id?"
+            element={
+              <>
+                <Graphs />
+                <GraphLoader />
+              </>
+            }
+          />
+        </Route>
+        <Route path="*" element={null} />
+      </Routes>
+    </>
   );
 };
 

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

@@ -0,0 +1,117 @@
+import { act, fireEvent, screen } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { GraphGenerationDialog } from "../GraphGenerationDialog";
+
+beforeEach(() => jest.useFakeTimers());
+afterEach(() => {
+  jest.runOnlyPendingTimers();
+  jest.useRealTimers();
+});
+
+test("reveals choices after three seconds and keeps waiting without closing", () => {
+  const onBackground = jest.fn();
+  render(
+    <GraphGenerationDialog open requestKey="a" onBackground={onBackground} />,
+  );
+  act(() => jest.advanceTimersByTime(2999));
+  expect(
+    screen.queryByRole("button", { name: "lineage.graph.wait.continue" }),
+  ).not.toBeInTheDocument();
+  act(() => jest.advanceTimersByTime(1));
+  fireEvent.click(
+    screen.getByRole("button", { name: "lineage.graph.wait.continue" }),
+  );
+  expect(
+    screen.getByRole("button", { name: "lineage.graph.wait.waiting" }),
+  ).toBeDisabled();
+  expect(onBackground).not.toHaveBeenCalled();
+  fireEvent.click(
+    screen.getByRole("button", { name: "lineage.graph.wait.background" }),
+  );
+  expect(onBackground).toHaveBeenCalledTimes(1);
+});
+
+test("manual close is available before the delay without enabling notifications", () => {
+  const onClose = jest.fn();
+  const onBackground = jest.fn();
+  render(
+    <GraphGenerationDialog
+      open
+      requestKey="a"
+      onClose={onClose}
+      onBackground={onBackground}
+    />,
+  );
+  fireEvent.click(
+    screen.getByRole("button", { name: "lineage.graph.wait.close" }),
+  );
+  expect(onClose).toHaveBeenCalledTimes(1);
+  expect(onBackground).not.toHaveBeenCalled();
+});
+
+test("escape uses manual close and unmount cancels its timer", () => {
+  const onClose = jest.fn();
+  const onBackground = jest.fn();
+  const { unmount } = render(
+    <GraphGenerationDialog
+      open
+      requestKey="a"
+      onClose={onClose}
+      onBackground={onBackground}
+    />,
+  );
+  fireEvent.keyDown(document, { key: "Escape", keyCode: 27 });
+  expect(onClose).toHaveBeenCalled();
+  expect(onBackground).not.toHaveBeenCalled();
+  unmount();
+  act(() => jest.advanceTimersByTime(3000));
+});
+
+test("progress rerenders do not restart the timer, and a new request resets the choice", () => {
+  const onBackground = jest.fn();
+  const { rerender } = render(
+    <GraphGenerationDialog open requestKey="a" onBackground={onBackground} />,
+  );
+  act(() => jest.advanceTimersByTime(2000));
+  rerender(
+    <GraphGenerationDialog open requestKey="a" onBackground={onBackground} />,
+  );
+  act(() => jest.advanceTimersByTime(1000));
+  fireEvent.click(
+    screen.getByRole("button", { name: "lineage.graph.wait.continue" }),
+  );
+  rerender(
+    <GraphGenerationDialog open requestKey="b" onBackground={onBackground} />,
+  );
+  expect(
+    screen.queryByRole("button", { name: "lineage.graph.wait.waiting" }),
+  ).not.toBeInTheDocument();
+  act(() => jest.advanceTimersByTime(3000));
+  expect(
+    screen.getByRole("button", { name: "lineage.graph.wait.continue" }),
+  ).toBeEnabled();
+});
+
+test("traps keyboard focus inside the dialog and restores it after closing", () => {
+  const trigger = document.createElement("button");
+  document.body.appendChild(trigger);
+  trigger.focus();
+  const { unmount } = render(
+    <GraphGenerationDialog open requestKey="a" onBackground={jest.fn()} />,
+  );
+  const close = screen.getByRole("button", {
+    name: "lineage.graph.wait.close",
+  });
+  expect(close).toHaveFocus();
+  act(() => jest.advanceTimersByTime(3000));
+  fireEvent.keyDown(close, { key: "Tab", shiftKey: true });
+  const background = screen.getByRole("button", {
+    name: "lineage.graph.wait.background",
+  });
+  expect(background).toHaveFocus();
+  fireEvent.keyDown(background, { key: "Tab" });
+  expect(close).toHaveFocus();
+  unmount();
+  expect(trigger).toHaveFocus();
+  trigger.remove();
+});

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

@@ -0,0 +1,60 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { GraphGenerationNotices } from "../GraphGenerationNotices";
+
+test("completion gives an explicit link without automatic navigation", () => {
+  const dismiss = jest.fn();
+  render(
+    <GraphGenerationNotices
+      jobs={{
+        a: {
+          requestId: "a",
+          background: true,
+          notify: true,
+          status: "completed",
+          graphId: 42,
+        },
+      }}
+      dismissGraphGeneration={dismiss}
+    />,
+  );
+  expect(
+    screen.getByRole("link", { name: "lineage.graph.wait.open" }),
+  ).toHaveAttribute("href", "/graphs/42");
+  expect(dismiss).not.toHaveBeenCalled();
+  fireEvent.click(
+    screen.getByRole("button", { name: "lineage.graph.wait.dismiss" }),
+  );
+  expect(dismiss).toHaveBeenCalledWith("a");
+});
+
+test("a failure is announced and has no success link", () => {
+  render(
+    <GraphGenerationNotices
+      jobs={{ a: { requestId: "a", status: "failed" } }}
+      dismissGraphGeneration={jest.fn()}
+    />,
+  );
+  expect(screen.getByRole("alert")).toHaveTextContent(
+    "lineage.graph.wait.failed",
+  );
+  expect(screen.queryByRole("link")).not.toBeInTheDocument();
+});
+
+test("background work without explicit notification consent stays silent", () => {
+  render(
+    <GraphGenerationNotices
+      jobs={{
+        a: {
+          requestId: "a",
+          background: true,
+          status: "completed",
+          graphId: 42,
+        },
+      }}
+      dismissGraphGeneration={jest.fn()}
+    />,
+  );
+  expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  expect(screen.queryByRole("status")).not.toBeInTheDocument();
+});