@truedat/dd 8.10.2 → 8.10.3

package/src/components/LineageSelectionPanel.js

@@ -0,0 +1,165 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Button, Icon } from "semantic-ui-react";
+import { fetchLineageEvents } from "../routines";
+import LineageForm from "./LineageForm";
+import LineageEventsPanel from "./LineageEventsPanel";
+import { groupLineageEvents } from "./lineageEventHelpers";
+
+export const LineageSelectionPanel = ({
+  collapsed,
+  fetchLineageEvents,
+  onGraphLoad,
+  sidebarHintActive,
+  sidebarHintOn,
+  sidebarHintToken,
+  lineageEvents = [],
+  onToggle,
+}) => {
+  const { formatMessage } = useIntl();
+  const [activeSidebarTab, setActiveSidebarTab] = useState("lineage");
+  const sidebarRef = useRef();
+  const toggleLabel = formatMessage({
+    id: collapsed ? "lineage.sidebar.expand" : "lineage.sidebar.collapse",
+  });
+  const activeRailLabel =
+    activeSidebarTab === "events"
+      ? "lineage.sidebar.tabs.graphs"
+      : "lineage.sidebar.tabs.lineage";
+  const openTab = (tab) => {
+    setActiveSidebarTab(tab);
+    if (tab === "events") fetchLineageEvents();
+  };
+
+  useEffect(() => {
+    fetchLineageEvents();
+  }, [fetchLineageEvents]);
+
+  useEffect(() => {
+    if (collapsed) return;
+
+    const handleClickOutside = (e) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
+        onToggle();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [collapsed, onToggle]);
+
+  return (
+    <aside
+      className="lineage-view__sidebar"
+      aria-expanded={!collapsed}
+      ref={sidebarRef}
+    >
+      <div className="lineage-view__sidebar-panel" aria-hidden={collapsed}>
+        <div className="lineage-view__sidebar-header">
+          <div className="lineage-view__sidebar-tabs" role="tablist">
+            <button
+              aria-selected={activeSidebarTab === "lineage"}
+              className="lineage-view__sidebar-tab"
+              onClick={() => openTab("lineage")}
+              role="tab"
+              type="button"
+            >
+              <span className="lineage-view__sidebar-tab-icon">
+                <Icon name="sitemap" />
+              </span>
+              <span className="lineage-view__sidebar-tab-label">
+                <FormattedMessage
+                  id="lineage.sidebar.tabs.lineage"
+                  defaultMessage="Lineage"
+                />
+              </span>
+            </button>
+            <button
+              aria-selected={activeSidebarTab === "events"}
+              className="lineage-view__sidebar-tab"
+              onClick={() => openTab("events")}
+              role="tab"
+              type="button"
+            >
+              <span className="lineage-view__sidebar-tab-icon">
+                <Icon name="history" />
+              </span>
+              <span className="lineage-view__sidebar-tab-label">
+                <FormattedMessage
+                  id="lineage.sidebar.tabs.graphs"
+                  defaultMessage="Graphs"
+                />
+              </span>
+              <span className="lineage-view__sidebar-tab-count">
+                {groupLineageEvents(lineageEvents).length}
+              </span>
+            </button>
+          </div>
+          <Button
+            basic
+            icon
+            size="mini"
+            type="button"
+            aria-label={toggleLabel}
+            title={toggleLabel}
+            className="lineage-view__sidebar-toggle"
+            onClick={onToggle}
+          >
+            <Icon name="angle left" />
+          </Button>
+        </div>
+        <div
+          className={`lineage-view__sidebar-content lineage-view__sidebar-content--${activeSidebarTab}`}
+        >
+          {activeSidebarTab === "lineage" ? (
+            <LineageForm
+              autoCollapse={false}
+              collapsible={false}
+              onGraphSubmit={onGraphLoad}
+              showDownloadButton={false}
+            />
+          ) : (
+            <LineageEventsPanel onGraphLoad={onGraphLoad} />
+          )}
+        </div>
+      </div>
+      <Button
+        basic
+        icon
+        type="button"
+        aria-label={toggleLabel}
+        aria-hidden={!collapsed}
+        title={toggleLabel}
+        className={`lineage-view__sidebar-rail${
+          sidebarHintActive ? " lineage-view__sidebar-rail--hint" : ""
+        }${sidebarHintOn ? " lineage-view__sidebar-rail--hint-on" : ""}`}
+        key={`lineage-sidebar-rail-${sidebarHintToken}`}
+        onClick={onToggle}
+      >
+        <Icon name="angle right" />
+        <span>
+          <FormattedMessage id={activeRailLabel} />
+        </span>
+      </Button>
+    </aside>
+  );
+};
+
+LineageSelectionPanel.propTypes = {
+  collapsed: PropTypes.bool.isRequired,
+  fetchLineageEvents: PropTypes.func,
+  lineageEvents: PropTypes.array,
+  onGraphLoad: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  sidebarHintActive: PropTypes.bool,
+  sidebarHintOn: PropTypes.bool,
+  sidebarHintToken: PropTypes.number,
+};
+
+const mapStateToProps = ({ lineageEvents }) => ({ lineageEvents });
+
+export default connect(mapStateToProps, { fetchLineageEvents })(
+  LineageSelectionPanel,
+);

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

@@ -1,7 +1,46 @@
+import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render, waitForLoad } from "@truedat/test/render";
-import { domainsMock } from "@truedat/test/mocks";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import { LineageForm } from "../LineageForm";
+import { LINEAGE_DOMAIN_AVAILABILITY_CACHE_KEY } from "../lineageDomainCache";
+
+const defaultDomains = [
+  {
+    __typename: "Domain",
+    name: "fooDomain",
+    id: "1",
+    externalId: "foo",
+    parentId: null,
+    actions: null,
+  },
+  {
+    __typename: "Domain",
+    name: "barDomain",
+    id: "2",
+    externalId: "bar",
+    parentId: null,
+    actions: null,
+  },
+  {
+    __typename: "Domain",
+    name: "bazDomain",
+    id: "3",
+    externalId: "baz",
+    parentId: null,
+    actions: null,
+  },
+];
+
+const lineageDomainsMock = (domains = defaultDomains) => ({
+  request: {
+    query: DOMAINS_QUERY,
+    variables: { action: "viewLineage" },
+  },
+  result: {
+    data: { domains },
+  },
+});
 
 describe("<LineageForm />", () => {
   const fetchNodes = jest.fn();
@@ -15,6 +54,9 @@ describe("<LineageForm />", () => {
   const props = {
     createGraph: jest.fn(),
     clearNodes: jest.fn(),
+    domainAvailabilityChecker: jest.fn(async (domains) =>
+      domains.map(({ id }) => [`${id}`, true]),
+    ),
     graph: {},
     groupOptions,
     resourceOptions,
@@ -28,15 +70,105 @@ describe("<LineageForm />", () => {
   };
 
   const renderOpts = {
-    mocks: [domainsMock({ action: "viewLineage" })],
+    mocks: [lineageDomainsMock()],
   };
 
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
   it("matches the latest snapshot", async () => {
     const rendered = render(<LineageForm {...props} />, renderOpts);
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
+  it("uses the form loading state while lineage options are loading", async () => {
+    const rendered = render(
+      <LineageForm {...props} collapsible={false} loading />,
+      renderOpts,
+    );
+
+    expect(
+      rendered.container.querySelector(".lineage-toolbar__form.loading"),
+    ).toBeInTheDocument();
+    expect(
+      rendered.queryByText("lineage.graph.loading"),
+    ).not.toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(
+        ".lineage-events-panel__empty .circle.notched.loading.icon",
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders a domain dropdown skeleton while lineage domains are loading", async () => {
+    const rendered = render(<LineageForm {...props} collapsible={false} />, {
+      mocks: [
+        {
+          ...lineageDomainsMock(),
+          delay: 100,
+        },
+      ],
+    });
+
+    expect(
+      rendered.container.querySelector(".lineage-domain-selector-skeleton"),
+    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        rendered.queryByText("domain.selector.placeholder"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("uses cached lineage domain availability while it is valid", async () => {
+    const domainAvailabilityChecker = jest.fn();
+    localStorage.setItem(
+      LINEAGE_DOMAIN_AVAILABILITY_CACHE_KEY,
+      JSON.stringify({
+        checks: [
+          ["1", true],
+          ["2", false],
+          ["3", true],
+        ],
+        domainIds: ["1", "2", "3"],
+        expiresAt: Date.now() + 60000,
+      }),
+    );
+
+    const rendered = render(
+      <LineageForm
+        {...props}
+        domainAvailabilityChecker={domainAvailabilityChecker}
+      />,
+      renderOpts,
+    );
+
+    await waitFor(() => {
+      expect(
+        rendered.queryByText("domain.selector.placeholder"),
+      ).toBeInTheDocument();
+    });
+
+    expect(domainAvailabilityChecker).not.toHaveBeenCalled();
+  });
+
+  it("renders the lineage sidebar header with the same panel layout as my graphs", async () => {
+    const rendered = render(
+      <LineageForm {...props} collapsible={false} resourceOptions={[]} />,
+      renderOpts,
+    );
+    await waitForLoad(rendered);
+    const header = rendered
+      .getByText("lineage.form.panel.header")
+      .closest("div");
+
+    expect(header).toHaveClass("lineage-events-panel__header");
+    expect(header.querySelector(".sitemap.icon")).toBeInTheDocument();
+  });
+
   it("selecting group will call selectGroup function", async () => {
     const selectGroup = jest.fn();
     const rendered = render(
@@ -55,7 +187,14 @@ describe("<LineageForm />", () => {
   it("selecting resources will call selectResources function", async () => {
     const selectResources = jest.fn();
     const rendered = render(
-      <LineageForm {...props} selectResources={selectResources} />,
+      <LineageForm
+        {...props}
+        resourceOptions={[
+          { key: "res1", text: "res1", value: "res1" },
+          { key: "res2", text: "res2", value: "res2" },
+        ]}
+        selectResources={selectResources}
+      />,
       renderOpts,
     );
     await waitForLoad(rendered);
@@ -68,13 +207,105 @@ describe("<LineageForm />", () => {
     expect(selectResources).toHaveBeenCalledWith(["res1"]);
   });
 
+  it("selects all resources from the icon toggle", async () => {
+    const selectResources = jest.fn();
+    const rendered = render(
+      <LineageForm
+        {...props}
+        resourceOptions={[
+          { key: "res1", text: "res1", value: "res1" },
+          { key: "res2", text: "res2", value: "res2" },
+        ]}
+        selectResources={selectResources}
+        selectedResources={[]}
+      />,
+      renderOpts,
+    );
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(
+      rendered.getByRole("button", { name: /lineage.resources.add_all/i }),
+    );
+
+    expect(selectResources).toHaveBeenCalledWith(["res1", "res2"]);
+  });
+
+  it("clears all resources from the icon toggle", async () => {
+    const selectResources = jest.fn();
+    const rendered = render(
+      <LineageForm
+        {...props}
+        resourceOptions={[
+          { key: "res1", text: "res1", value: "res1" },
+          { key: "res2", text: "res2", value: "res2" },
+        ]}
+        selectResources={selectResources}
+        selectedResources={["res1", "res2"]}
+      />,
+      renderOpts,
+    );
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(
+      rendered.getByRole("button", { name: /lineage.resources.remove_all/i }),
+    );
+
+    expect(selectResources).toHaveBeenCalledWith([]);
+  });
+
+  it("selects the next single group option automatically", async () => {
+    const selectGroup = jest.fn();
+    render(
+      <LineageForm
+        {...props}
+        groupOptions={[[{ key: "grp1", text: "grp1", value: "grp1" }]]}
+        resourceOptions={[]}
+        selectGroup={selectGroup}
+      />,
+      renderOpts,
+    );
+
+    await waitFor(() => {
+      expect(selectGroup).toHaveBeenCalledWith({
+        id: "grp1",
+        domain_id: null,
+      });
+    });
+  });
+
+  it("does not skip a previous group dropdown with multiple options", async () => {
+    const selectGroup = jest.fn();
+    const rendered = render(
+      <LineageForm
+        {...props}
+        groupOptions={[
+          [
+            { key: "grp1", text: "grp1", value: "grp1" },
+            { key: "grp2", text: "grp2", value: "grp2" },
+          ],
+          [{ key: "subgrp1", text: "subgrp1", value: "subgrp1" }],
+        ]}
+        resourceOptions={[]}
+        selectGroup={selectGroup}
+      />,
+      renderOpts,
+    );
+
+    await waitForLoad(rendered);
+    expect(selectGroup).not.toHaveBeenCalled();
+  });
+
   it("handle submit action", async () => {
     const selectedResources = ["id1", "id2"];
     const createGraph = jest.fn();
+    const onGraphSubmit = jest.fn();
     const rendered = render(
       <LineageForm
         {...props}
         createGraph={createGraph}
+        onGraphSubmit={onGraphSubmit}
         selectedResources={selectedResources}
       />,
       renderOpts,
@@ -96,6 +327,72 @@ describe("<LineageForm />", () => {
       levels: 4,
       isRedirected: true,
     });
+    expect(onGraphSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it("notifies graph submit when requesting impact", async () => {
+    const createGraph = jest.fn();
+    const onGraphSubmit = jest.fn();
+    const rendered = render(
+      <LineageForm
+        {...props}
+        createGraph={createGraph}
+        onGraphSubmit={onGraphSubmit}
+        selectedResources={["id1"]}
+      />,
+      renderOpts,
+    );
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(
+      rendered.getByRole("button", {
+        name: /navigation.lineage.impact/i,
+      }),
+    );
+
+    expect(createGraph).toHaveBeenCalledWith({
+      ids: ["id1"],
+      type: "impact",
+      levels: 4,
+      isRedirected: true,
+    });
+    expect(onGraphSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it("clears the whole lineage form including the selected domain", async () => {
+    const clearNodes = jest.fn();
+    const fetchNodes = jest.fn();
+    const selectResources = jest.fn();
+    const rendered = render(
+      <LineageForm
+        {...props}
+        clearNodes={clearNodes}
+        fetchNodes={fetchNodes}
+        selectResources={selectResources}
+        selectedGroups={["grp1"]}
+        selectedResources={["res1"]}
+      />,
+      renderOpts,
+    );
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByText(/foodomain/i));
+    await waitFor(() => {
+      expect(fetchNodes).toHaveBeenCalledWith({ domain_id: "1" });
+    });
+
+    await user.click(
+      rendered.getByRole("button", { name: /navigation.lineage.clean/i }),
+    );
+
+    expect(clearNodes).toHaveBeenCalledTimes(1);
+    expect(selectResources).toHaveBeenCalledWith([]);
+    expect(fetchNodes).not.toHaveBeenCalledWith({});
+    expect(
+      rendered.getByText("domain.selector.placeholder"),
+    ).toBeInTheDocument();
   });
 
   it("calls clearNodes when component unmounts but not when it mounts", async () => {
@@ -119,4 +416,47 @@ describe("<LineageForm />", () => {
     await user.click(rendered.getByRole("option", { name: /foodomain/i }));
     expect(fetchNodes).toHaveBeenCalledWith({ domain_id: "1" });
   });
+
+  it("loads nodes automatically when a single lineage domain is available", async () => {
+    const fetchNodes = jest.fn();
+    const rendered = render(
+      <LineageForm {...props} fetchNodes={fetchNodes} />,
+      {
+        mocks: [lineageDomainsMock([defaultDomains[0]])],
+      },
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(fetchNodes).toHaveBeenCalledWith({ domain_id: "1" });
+    });
+  });
+
+  it("disables domains without lineage", async () => {
+    const fetchNodes = jest.fn();
+    const rendered = render(
+      <LineageForm
+        {...props}
+        domainAvailabilityChecker={jest.fn(async () => [
+          ["1", true],
+          ["2", false],
+        ])}
+        fetchNodes={fetchNodes}
+      />,
+      {
+        mocks: [lineageDomainsMock([defaultDomains[0], defaultDomains[1]])],
+      },
+    );
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await waitFor(() => {
+      expect(rendered.getByRole("option", { name: /bardomain/i })).toHaveClass(
+        "disabled",
+      );
+    });
+    await user.click(rendered.getByRole("option", { name: /bardomain/i }));
+
+    expect(fetchNodes).not.toHaveBeenCalledWith({ domain_id: "2" });
+  });
 });