@truedat/core 8.10.2 → 8.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.10.2",
+  "version": "8.10.4",
   "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.10.2",
+    "@truedat/test": "8.10.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -98,5 +98,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "40436c0d8d650f31421d9695035f2d54e5b1c28c"
+  "gitHead": "fe4fda03b2b73d26f644219d806dcc45767a3c7a"
 }

package/src/components/DomainSearchFilterItem.js

@@ -26,8 +26,8 @@ const ToggleChildrenButton = ({ toggleChildrenOn, onClick }) => {
   return (
     <button type="button" className="toggle-children" onClick={onClick}>
       <span title={hoverText} className="toggle-children-content">
-        {icon && <Icon name={icon} />}
-        {label && <span>{label}</span>}
+        {icon ? <Icon name={icon} /> : null}
+        {label ? <span>{label}</span> : null}
       </span>
     </button>
   );

package/src/components/DomainSelector.js

@@ -1,4 +1,5 @@
 import _ from "lodash/fp";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { useQuery } from "@apollo/client";
@@ -7,39 +8,91 @@ import { stratify, flatten } from "../services/tree";
 import { DOMAINS_QUERY } from "../api/queries";
 import TreeSelector from "./TreeSelector";
 import Loading from "./Loading";
+
+const readCachedData = (cacheKey) => {
+  if (!cacheKey || typeof localStorage === "undefined") return null;
+
+  try {
+    const cached = JSON.parse(localStorage.getItem(cacheKey));
+
+    if (!cached?.expiresAt || cached.expiresAt <= Date.now()) {
+      localStorage.removeItem(cacheKey);
+      return null;
+    }
+
+    return cached.data || null;
+  } catch (_error) {
+    localStorage.removeItem(cacheKey);
+    return null;
+  }
+};
+
+const writeCachedData = (cacheKey, cacheTtl, data) => {
+  if (!cacheKey || !cacheTtl || typeof localStorage === "undefined") return;
+
+  localStorage.setItem(
+    cacheKey,
+    JSON.stringify({
+      data,
+      expiresAt: Date.now() + cacheTtl,
+    }),
+  );
+};
+
 export const DomainSelector = ({
   allNodesOpen,
   action,
+  cacheKey,
+  cacheTtl,
   className,
+  loadingComponent,
   multiple,
   domainActions,
   domainIds,
   notDropdown,
   onNodeClick,
   onLoad,
+  optionDisabled,
+  query = DOMAINS_QUERY,
   value,
   ascendants,
   ...props
 }) => {
   const { formatMessage } = useIntl();
-  const { loading, error, data } = useQuery(DOMAINS_QUERY, {
+  const [cachedData] = useState(() => readCachedData(cacheKey));
+  const { loading, error, data } = useQuery(query, {
     fetchPolicy: "cache-and-network",
+    skip: !!cachedData,
     variables: {
       action: action || "viewDomain",
       domainActions,
       ids: domainIds,
     },
-    onCompleted: onLoad,
+    onCompleted: (loadedData) => {
+      writeCachedData(cacheKey, cacheTtl, loadedData);
+      onLoad && onLoad(loadedData);
+    },
   });
+
+  useEffect(() => {
+    if (cachedData) onLoad && onLoad(cachedData);
+  }, [cachedData, onLoad]);
+
   if (error) return null;
-  if (loading) return <Loading />;
+  if (loading && !cachedData) return loadingComponent || <Loading />;
+
+  const resolvedData = cachedData || data;
 
   const options = _.flow(
     _.propOr([], "domains"),
+    _.map((domain) => ({
+      ...domain,
+      disabled: optionDisabled ? optionDisabled(domain) : false,
+    })),
     _.sortBy(accentInsensitivePathOrder("name")),
     stratify({}),
     flatten,
-  )(data);
+  )(resolvedData);
 
   return (
     <TreeSelector
@@ -64,13 +117,18 @@ export const DomainSelector = ({
 DomainSelector.propTypes = {
   allNodesOpen: PropTypes.bool,
   action: PropTypes.string,
+  cacheKey: PropTypes.string,
+  cacheTtl: PropTypes.number,
   className: PropTypes.string,
+  loadingComponent: PropTypes.node,
   multiple: PropTypes.bool,
   domainActions: PropTypes.array,
   domainIds: PropTypes.array,
   notDropdown: PropTypes.bool,
   onNodeClick: PropTypes.func,
   onLoad: PropTypes.func,
+  optionDisabled: PropTypes.func,
+  query: PropTypes.object,
   ascendants: PropTypes.array,
   value: PropTypes.oneOfType([
     PropTypes.array,

package/src/components/DropdownMenuItem.js

@@ -23,19 +23,25 @@ export const DropdownMenuItem = ({
   const handleClick = (e) => {
     e && e.preventDefault();
     e && e.stopPropagation();
-    onClick(e, id);
+    if (!disabled && onClick) {
+      onClick(e, id);
+    }
   };
 
   const itemStyle = {
     marginLeft: `${20 * level}px`,
     paddingLeft: !canOpen ? "25px" : "5px",
   };
+  const itemClassName = [className, disabled ? "disabled" : ""]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <Dropdown.Item
+      aria-disabled={disabled}
       onClick={handleClick}
       selected={!check && selected}
-      className={className}
+      className={itemClassName}
     >
       <div className="item-content" style={itemStyle}>
         {canOpen ? (

package/src/components/LineageMenu.js

@@ -1,12 +1,9 @@
 import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
-import { GRAPHS, LINEAGE_EVENTS } from "../routes";
+import { GRAPHS } from "../routes";
 import Submenu from "./Submenu";
 
-const items = [
-  { name: "lineage", routes: [GRAPHS] },
-  { name: "lineage_events", routes: [LINEAGE_EVENTS] },
-];
+const items = [{ name: "lineage", routes: [GRAPHS] }];
 
 export const LineageMenu = () => {
   const { formatMessage } = useIntl();

package/src/components/OptionGroup.js

@@ -95,7 +95,7 @@ export const OptionGroup = ({
               key: i,
               children: (
                 <>
-                  <Dropdown.Divider />
+                  {i > 0 && <Dropdown.Divider />}
                   <Dropdown.Header icon={option.icon} content={option.label} />
                 </>
               ),

package/src/components/TreeSelector.js

@@ -68,6 +68,7 @@ export const TreeSelector = ({
   allNodesOpen,
   check = false,
   className = "",
+  closeOnSelect = false,
   disabled = false,
   error,
   label,
@@ -169,6 +170,9 @@ export const TreeSelector = ({
       setDropdownOpen(false);
     }
     onChange && onChange(e, { value: nextValue });
+    if (closeOnSelect && !multiple && !notDropdown) {
+      setDropdownOpen(false);
+    }
   };
 
   const filterSearch = query ? _.filter(matchAny(query)) : _.identity;
@@ -190,26 +194,36 @@ export const TreeSelector = ({
     <label>{placeholder}</label>
   );
 
-  const isEnabled = ({ level }, minDepth) => level >= minDepth;
+  const isEnabled = ({ disabled, level }, minDepth) =>
+    !disabled && level >= minDepth;
 
   const items = _.flow(
     filterSearch,
     filterDisplayed,
-    _.map((option) => (
-      <DropdownMenuItem
-        key={option?.id}
-        check={check}
-        onOpen={handleOpen}
-        onClick={isEnabled(option, minDepth) ? handleClick : () => {}}
-        open={_.contains(option.id)(open)}
-        canOpen={!_.isEmpty(option.children)}
-        level={option.level}
-        disabled={!isEnabled(option, minDepth)}
-        selected={selected(option.id)}
-        className={ascendants?.includes(String(option?.id)) ? "ascendant" : ""}
-        {...option}
-      />
-    )),
+    _.map((option) => {
+      const enabled = isEnabled(option, minDepth);
+      const optionClassName = [
+        ascendants?.includes(String(option?.id)) ? "ascendant" : "",
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return (
+        <DropdownMenuItem
+          {...option}
+          key={option?.id}
+          check={check}
+          onOpen={handleOpen}
+          onClick={enabled ? handleClick : undefined}
+          open={_.contains(option.id)(open)}
+          canOpen={!_.isEmpty(option.children)}
+          level={option.level}
+          disabled={!enabled}
+          selected={selected(option.id)}
+          className={optionClassName}
+        />
+      );
+    }),
   )(options);
 
   const renderTreeSelector = () => {
@@ -273,6 +287,7 @@ TreeSelector.propTypes = {
   ascendants: PropTypes.array,
   check: PropTypes.bool,
   className: PropTypes.string,
+  closeOnSelect: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   label: PropTypes.string,

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

@@ -11,6 +11,10 @@ const variables = { action: action };
 const renderOpts = { mocks: [domainsMock(variables)] };
 
 describe("<DomainSelector />", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
   it("matches latest snapshot", async () => {
     const props = { action, onChange: jest.fn(), className: "test className" };
     const { container, queryByText } = render(
@@ -61,4 +65,72 @@ describe("<DomainSelector />", () => {
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: ["1"] });
   });
+
+  it("renders domains from a valid localStorage cache", async () => {
+    const onLoad = jest.fn();
+    localStorage.setItem(
+      "domain-selector-cache-test",
+      JSON.stringify({
+        expiresAt: Date.now() + 60000,
+        data: {
+          domains: [
+            {
+              __typename: "Domain",
+              name: "cachedDomain",
+              id: "cached",
+              parentId: null,
+            },
+          ],
+        },
+      }),
+    );
+
+    const { getByText } = render(
+      <DomainSelector
+        action={action}
+        cacheKey="domain-selector-cache-test"
+        cacheTtl={60000}
+        onLoad={onLoad}
+      />,
+      { mocks: [] },
+    );
+
+    await waitFor(() => {
+      expect(getByText(/cachedDomain/)).toBeInTheDocument();
+    });
+    expect(onLoad).toHaveBeenCalledWith({
+      domains: [
+        {
+          __typename: "Domain",
+          name: "cachedDomain",
+          id: "cached",
+          parentId: null,
+        },
+      ],
+    });
+  });
+
+  it("stores loaded domains in localStorage when cache options are provided", async () => {
+    const { queryByText } = render(
+      <DomainSelector
+        action={action}
+        cacheKey="domain-selector-cache-test"
+        cacheTtl={60000}
+      />,
+      renderOpts,
+    );
+
+    await waitFor(() => {
+      expect(queryByText(/fooDomain/)).toBeInTheDocument();
+    });
+
+    const cached = JSON.parse(
+      localStorage.getItem("domain-selector-cache-test"),
+    );
+
+    expect(cached.expiresAt).toBeGreaterThan(Date.now());
+    expect(cached.data.domains).toEqual(
+      expect.arrayContaining([expect.objectContaining({ name: "fooDomain" })]),
+    );
+  });
 });

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

@@ -88,6 +88,55 @@ describe("<TreeSelector />", () => {
     });
   });
 
+  it("closes dropdown after a single closeOnSelect selection", async () => {
+    const props = {
+      closeOnSelect: true,
+      onChange: jest.fn(),
+      options,
+      placeholder: "Select a domain",
+    };
+    const rendered = render(<TreeSelector {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByText(/select a domain/i));
+    await waitFor(() => {
+      expect(
+        rendered.getByRole("option", { name: /foo/i }),
+      ).toBeInTheDocument();
+    });
+
+    await user.click(rendered.getByRole("option", { name: /foo/i }));
+
+    await waitFor(() => {
+      expect(rendered.getByRole("listbox")).toHaveAttribute(
+        "aria-expanded",
+        "false",
+      );
+    });
+  });
+
+  it("does not call onChange for disabled options", async () => {
+    const props = {
+      onChange: jest.fn(),
+      options: [{ ...foo, disabled: true }],
+      placeholder: "Select a domain",
+    };
+    const rendered = render(<TreeSelector {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByText(/select a domain/i));
+    await user.click(rendered.getByRole("option", { name: /foo/i }));
+
+    expect(props.onChange).not.toHaveBeenCalled();
+    expect(rendered.getByRole("option", { name: /foo/i })).toHaveClass(
+      "disabled",
+    );
+  });
+
   it("select node with allowed depth (multiple)", async () => {
     const minDepth = 2;
 

package/src/components/__tests__/__snapshots__/LineageMenu.spec.js.snap

@@ -24,14 +24,6 @@ exports[`<LineageMenu /> matches the latest snapshot 1`] = `
       <div
         class="menu transition"
       >
-        <div
-          class="header selectable"
-        >
-          lineage
-        </div>
-        <div
-          class="divider"
-        />
         <a
           aria-checked="false"
           class="item"
@@ -46,20 +38,6 @@ exports[`<LineageMenu /> matches the latest snapshot 1`] = `
             lineage
           </span>
         </a>
-        <a
-          aria-checked="false"
-          class="item"
-          data-discover="true"
-          href="/lineageEvents"
-          name="lineage_events"
-          role="option"
-        >
-          <span
-            class="text"
-          >
-            lineage_events
-          </span>
-        </a>
       </div>
     </div>
   </div>

package/src/components/__tests__/__snapshots__/SideMenu.spec.js.snap

@@ -412,24 +412,6 @@ exports[`<SideMenu /> matches the latest snapshot 1`] = `
           />
           lineage
         </a>
-        <div
-          class="menu"
-        >
-          <a
-            class="link item"
-            data-discover="true"
-            href="/graphs"
-          >
-            lineage
-          </a>
-          <a
-            class="link item"
-            data-discover="true"
-            href="/lineageEvents"
-          >
-            lineage_events
-          </a>
-        </div>
       </div>
       <div
         class="active item selectable"

package/src/routes.js

@@ -77,7 +77,9 @@ export const DOMAIN_SUBDOMAINS = "/domains/:id/subdomains";
 export const ELASTICINDEXES = "/search/elasticIndexes";
 export const EXECUTION_GROUP = "/executionGroups/:id";
 export const EXECUTION_GROUPS = "/executionGroups";
+export const FUNCTION = "/functions/:id";
 export const FUNCTIONS = "/functions";
+export const FUNCTIONS_NEW = "/functions/new";
 export const GRANT_APPROVAL_RULE = "/grantApproveRules/:id";
 export const GRANT_APPROVAL_RULE_NEW = "/grantApproveRules/new";
 export const GRANT_APPROVAL_RULE_EDIT = "/grantApproveRules/:id/edit";
@@ -165,7 +167,6 @@ export const INGEST_RELATIONS_STRUCTURES_NEW =
   "/ingests/:id/relations/structures/new";
 export const JOB = "/jobs/:id";
 export const JOBS = "/jobs";
-export const LINEAGE_EVENTS = "/lineageEvents";
 export const LOGIN = "/login";
 export const MY_GRANTS = "/myGrants";
 export const MY_GRANT_REQUESTS = "/myGrantRequests";
@@ -225,7 +226,6 @@ export const RULE_IMPLEMENTATIONS = "/rules/:id/implementations";
 export const RULE_IMPLEMENTATION_NEW = "/rules/:id/implementations/new";
 export const RULE_IMPLEMENTATION_NEW_RAW = "/rules/:id/implementations/new_raw";
 export const RULE_NEW = "/rules/new";
-export const SAMPLE = "/sample";
 export const MY_SCORE_GROUPS = "/myScoreGroups";
 export const SCORE_GROUPS = "/scoreGroups";
 export const SCORE_GROUP = "/scoreGroups/:id";
@@ -424,7 +424,6 @@ const routes = {
   INGEST_RELATIONS_STRUCTURES_NEW,
   JOB,
   JOBS,
-  LINEAGE_EVENTS,
   LOGIN,
   MY_GRANTS,
   MY_GRANT_REQUESTS,
@@ -471,7 +470,6 @@ const routes = {
   RULE_IMPLEMENTATION_NEW,
   RULE_IMPLEMENTATION_NEW_RAW,
   RULE_NEW,
-  SAMPLE,
   MY_SCORE_GROUPS,
   SCORE_GROUPS,
   SCORE_GROUP,