@truedat/core 4.43.6 → 4.44.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.44.0] 2022-05-10
+
+### Added
+
+- [TD-4723] New `DomainSelector` which loads domains using GraphQL query
+
 ## [4.43.6] 2022-05-05
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.43.6",
+  "version": "4.44.0",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -32,7 +32,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.43.6",
+    "@truedat/test": "4.44.0",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -106,5 +106,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "848143d79486499dd9deadea6a545929b5cdb39c"
+  "gitHead": "55fd4a8be70ca0d1bd4f3cb7b5eaf073b0350029"
 }

package/src/api/queries.js

@@ -0,0 +1,11 @@
+import { gql } from "@apollo/client";
+
+export const DOMAINS_QUERY = gql`
+  query DomainsQuery($action: String!) {
+    domains(action: $action) {
+      id
+      name
+      parentId
+    }
+  }
+`;

package/src/components/CatalogMenu.js

@@ -14,8 +14,8 @@ import Submenu from "./Submenu";
 const items = [{ name: "structures", routes: [STRUCTURES, SYSTEMS] }];
 
 const adminItems = [
-  { name: "structure_types", routes: [STRUCTURE_TYPES] },
-  { name: "structure_tags", routes: [STRUCTURE_TAGS] },
+  { name: "structureTypes", routes: [STRUCTURE_TYPES] },
+  { name: "structureTags", routes: [STRUCTURE_TAGS] },
 ];
 
 const structureNoteItems = [

package/src/components/DomainSelector.js

@@ -0,0 +1,42 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { useQuery } from "@apollo/client";
+import { accentInsensitivePathOrder } from "../services/sort";
+import { stratify, flatten } from "../services/tree";
+import { DOMAINS_QUERY } from "../api/queries";
+import TreeSelector from "./TreeSelector";
+
+export const DomainSelector = ({ action, onLoad, value, ...props }) => {
+  const { formatMessage } = useIntl();
+  const { loading, error, data } = useQuery(DOMAINS_QUERY, {
+    variables: { action },
+    onCompleted: onLoad,
+  });
+  if (error) return null;
+  if (loading) return null;
+  const options = _.flow(
+    _.propOr([], "domains"),
+    _.sortBy(accentInsensitivePathOrder("name")),
+    stratify({}),
+    flatten
+  )(data);
+
+  return (
+    <TreeSelector
+      options={options}
+      placeholder={formatMessage({ id: "domain.multiple.placeholder" })}
+      value={_.map(_.toString)(value)}
+      {...props}
+    />
+  );
+};
+
+DomainSelector.propTypes = {
+  action: PropTypes.string,
+  onLoad: PropTypes.func,
+  value: PropTypes.array,
+};
+
+export default DomainSelector;

package/src/components/DropdownMenuItem.js

@@ -43,7 +43,7 @@ export const DropdownMenuItem = ({
 };
 
 DropdownMenuItem.propTypes = {
-  id: PropTypes.number,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   canOpen: PropTypes.bool,
   check: PropTypes.bool,
   handleOpen: PropTypes.func,

package/src/components/TreeSelector.js

@@ -0,0 +1,161 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import { Dropdown, Form, Icon, Input, Label } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { lowerDeburr } from "../services/sort";
+import { recursiveMatch, descendents, childIds } from "../services/tree";
+import DropdownMenuItem from "./DropdownMenuItem";
+
+export const match =
+  (query) =>
+  ({ name }) =>
+    _.contains(query)(lowerDeburr(name));
+export const matchAny = recursiveMatch(match);
+
+export const TreeSelector = ({
+  options,
+  error,
+  label,
+  name,
+  onBlur,
+  onChange,
+  required = false,
+  placeholder,
+  value: initialValue = [],
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const [query, setQuery] = useState();
+  const [open, setOpen] = useState([]);
+  const [displayed, setDisplayed] = useState([]);
+
+  useEffect(() => {
+    const ids = childIds(open)(options);
+    setDisplayed((displayed) => _.union(displayed)(ids));
+  }, [options, open, value]);
+
+  const handleOpen = (id) => {
+    const option = _.find({ id })(options);
+    const isOpen = _.contains(id)(open);
+    const childIds = _.map("id")(option.children);
+    const descendentIds = descendents(option);
+
+    if (isOpen) {
+      setOpen(_.without([id, ...descendentIds])(open));
+      setDisplayed(_.without(descendentIds)(displayed));
+    } else {
+      setOpen(_.union([id])(open));
+      setDisplayed(_.union(childIds)(displayed));
+    }
+  };
+
+  const displayAll = () => {
+    const ids = _.map("id")(options);
+    setOpen(ids);
+    setDisplayed(ids);
+  };
+
+  const handleSearch = (e, { value }) => {
+    e.preventDefault();
+    setQuery(lowerDeburr(value));
+    if (!_.isEmpty(value)) {
+      displayAll();
+    }
+  };
+
+  const handleClick = (e, id) => {
+    const ids = _.includes(id)(value)
+      ? _.without([id])(value)
+      : _.union([id])(value);
+    setValue(ids);
+    onChange && onChange(e, { value: ids });
+  };
+
+  const filterSearch = query ? _.filter(matchAny(query)) : _.identity;
+
+  const filterDisplayed = _.filter(
+    ({ id, level }) => level === 0 || _.includes(id)(displayed)
+  );
+
+  const trigger = _.isEmpty(value) ? (
+    <label>{placeholder}</label>
+  ) : (
+    _.map((id) => (
+      <Label key={id}>
+        {_.flow(_.find({ id }), _.prop("name"))(options)}
+        <Icon
+          name="delete"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleClick(e, id);
+          }}
+        />
+      </Label>
+    ))(value)
+  );
+
+  const items = _.flow(
+    filterSearch,
+    filterDisplayed,
+    _.map((option) => (
+      <DropdownMenuItem
+        key={option?.id}
+        check={false}
+        handleOpen={handleOpen}
+        handleClick={handleClick}
+        open={_.contains(option.id)(open)}
+        canOpen={!_.isEmpty(option.children)}
+        selected={_.contains(option.id)(value)}
+        {...option}
+      />
+    ))
+  )(options);
+
+  return (
+    <Form.Dropdown
+      error={error}
+      floating
+      label={label}
+      name={name}
+      onBlur={onBlur}
+      upward={false}
+      required={required}
+      trigger={trigger}
+      multiple
+      value={value}
+    >
+      <Dropdown.Menu>
+        <Input
+          icon="search"
+          iconPosition="left"
+          className="search"
+          onKeyDown={(e) => {
+            if (e.key === " ") {
+              e.stopPropagation();
+            }
+          }}
+          onChange={handleSearch}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        />
+        <Dropdown.Menu scrolling>{items}</Dropdown.Menu>
+      </Dropdown.Menu>
+    </Form.Dropdown>
+  );
+};
+
+TreeSelector.propTypes = {
+  error: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  options: PropTypes.array,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  value: PropTypes.array,
+};
+
+export default TreeSelector;

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

@@ -1,15 +1,21 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { CatalogMenu } from "../CatalogMenu";
 
 jest.mock("../../hooks", () => ({
-  useActiveRoutes: jest.fn(() => true),
+  ...jest.requireActual("../../hooks"),
   useAuthorized: jest.fn(() => true),
 }));
 
+const renderOpts = {
+  messages: {
+    en: {},
+  },
+};
+
 describe("<CatalogMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<CatalogMenu />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<CatalogMenu />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { DOMAINS_QUERY } from "../../api/queries";
+import DomainSelector from "../DomainSelector";
+
+const action = "manageStructureTags";
+
+const domainsMock = {
+  request: { query: DOMAINS_QUERY, variables: { action } },
+  result: {
+    data: {
+      domains: [
+        { __typename: "Domain", id: "1", name: "foo", parentId: null },
+        { __typename: "Domain", id: "2", name: "bar", parentId: "1" },
+        { __typename: "Domain", id: "3", name: "baz", parentId: "2" },
+        { __typename: "Domain", id: "4", name: "xyzzy", parentId: "99" },
+      ],
+    },
+  },
+};
+const messages = {
+  en: {
+    "domain.multiple.placeholder": "Select domains",
+  },
+};
+
+const renderOpts = { mocks: [domainsMock], messages };
+
+describe("<DomainSelector />", () => {
+  it("matches latest snapshot", () => {
+    const props = { action, onChange: jest.fn() };
+    const { container } = render(<DomainSelector {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("calls onChange with selected values", async () => {
+    const props = { action, onChange: jest.fn() };
+    const { getByText, getByRole } = render(
+      <DomainSelector {...props} />,
+      renderOpts
+    );
+
+    await waitFor(() => {
+      expect(getByText("Select domains")).toBeTruthy();
+    });
+
+    userEvent.click(getByText("Select domains"));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /foo/i }));
+    expect(props.onChange.mock.calls.length).toBe(1);
+    expect(props.onChange.mock.calls[0][1]).toEqual({ value: ["1"] });
+  });
+});

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import TreeSelector from "../TreeSelector";
+
+const baz = { id: "3", level: 2, name: "baz", children: [] };
+const bar = { id: "2", level: 1, name: "bar", children: [baz] };
+const foo = { id: "1", level: 0, name: "foo", children: [bar] };
+const options = [foo, bar, baz];
+
+const renderOpts = {};
+const onChange = jest.fn();
+const props = { options, placeholder: "Select a domain", onChange };
+
+describe("<TreeSelector />", () => {
+  it("matches latest snapshot", () => {
+    const { container } = render(<TreeSelector {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("calls onChange with selected values", async () => {
+    const { getByText, getByRole } = render(
+      <TreeSelector {...props} />,
+      renderOpts
+    );
+
+    userEvent.click(getByText("Select a domain"));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /foo/i }));
+    expect(onChange.mock.calls.length).toBe(1);
+    expect(onChange.mock.calls[0][1]).toEqual({ value: ["1"] });
+  });
+});

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

@@ -1,43 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CatalogMenu /> matches the latest snapshot 1`] = `
-<Submenu
-  icon="block layout"
-  items={
-    Array [
-      Object {
-        "name": "structures",
-        "routes": Array [
-          "/structures",
-          "/systems",
-        ],
-      },
-      Object {
-        "name": "structure_types",
-        "routes": Array [
-          "/structure_types",
-        ],
-      },
-      Object {
-        "name": "structure_tags",
-        "routes": Array [
-          "/structure_tags",
-        ],
-      },
-      Object {
-        "name": "pending_structure_notes",
-        "routes": Array [
-          "/structure_notes",
-        ],
-      },
-      Object {
-        "name": "structures_upload_events",
-        "routes": Array [
-          "/bulk_update_template_content_events",
-        ],
-      },
-    ]
-  }
-  name="catalog"
-/>
+<div>
+  <div>
+    <div
+      aria-expanded="false"
+      class="ui item dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <a
+        class="ui"
+        href="/structures"
+      >
+        <i
+          aria-hidden="true"
+          class="block layout large icon"
+        />
+      </a>
+      <div
+        class="menu transition"
+      >
+        <div
+          class="header selectable"
+        >
+          catalog
+        </div>
+        <div
+          class="divider"
+        />
+        <a
+          aria-checked="false"
+          class="item"
+          href="/structures"
+          name="structures"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            structures
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/structureTypes"
+          name="structureTypes"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            structureTypes
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/structureTags"
+          name="structureTags"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            structureTags
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/structureNotes"
+          name="pending_structure_notes"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            pending_structure_notes
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/bulk_update_template_content_events"
+          name="structures_upload_events"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            structures_upload_events
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 `;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DomainSelector /> matches latest snapshot 1`] = `<div />`;

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

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TreeSelector /> matches latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <div
+      aria-expanded="false"
+      aria-multiselectable="true"
+      class="ui floating multiple dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <label>
+        Select a domain
+      </label>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
+      <div
+        class="menu transition"
+      >
+        <div
+          class="ui left icon input search"
+        >
+          <input
+            type="text"
+          />
+          <i
+            aria-hidden="true"
+            class="search icon"
+          />
+        </div>
+        <div
+          class="scrolling menu transition"
+        >
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              style="margin-left: 0px;"
+            >
+              <i
+                aria-hidden="true"
+                class="plus icon"
+              />
+              foo
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/index.js

@@ -12,6 +12,7 @@ import DashboardMenu from "./DashboardMenu";
 import DateFilter from "./DateFilter";
 import DateRangeFilter from "./DateRangeFilter";
 import DateTime from "./DateTime";
+import DomainSelector from "./DomainSelector";
 import DropdownMenuItem from "./DropdownMenuItem";
 import ErrorBoundary from "./ErrorBoundary";
 import FiltersLoader from "./FiltersLoader";
@@ -36,6 +37,7 @@ import SidebarToggle from "./SidebarToggle";
 import SideMenu from "./SideMenu";
 import Submenu from "./Submenu";
 import TaxonomyMenu from "./TaxonomyMenu";
+import TreeSelector from "./TreeSelector";
 import Unauthorized from "./Unauthorized";
 import UploadModal from "./UploadModal";
 
@@ -54,6 +56,7 @@ export {
   DateFilter,
   DateRangeFilter,
   DateTime,
+  DomainSelector,
   DropdownMenuItem,
   ErrorBoundary,
   FiltersLoader,
@@ -78,6 +81,7 @@ export {
   SideMenu,
   Submenu,
   TaxonomyMenu,
+  TreeSelector,
   Unauthorized,
-  UploadModal
+  UploadModal,
 };

package/src/messages/en.js

@@ -92,8 +92,8 @@ export default {
   "sidemenu.rules": "Quality Rules",
   "sidemenu.search": "Search",
   "sidemenu.sources": "Sources",
-  "sidemenu.structure_tags": "Structure Tags",
-  "sidemenu.structure_types": "Structure Types",
+  "sidemenu.structureTags": "Structure Tags",
+  "sidemenu.structureTypes": "Structure Types",
   "sidemenu.structures": "Structures",
   "sidemenu.structures_upload_events": "My loads",
   "sidemenu.subscriptions": "Subscriptions",

package/src/messages/es.js

@@ -95,8 +95,8 @@ export default {
   "sidemenu.rules": "Reglas",
   "sidemenu.search": "Búsqueda",
   "sidemenu.sources": "Orígenes",
-  "sidemenu.structure_tags": "Etiquetas de estructura",
-  "sidemenu.structure_types": "Tipos de estructura",
+  "sidemenu.structureTags": "Etiquetas de estructura",
+  "sidemenu.structureTypes": "Tipos de estructura",
   "sidemenu.structures": "Estructuras",
   "sidemenu.structures_upload_events": "Mis cargas",
   "sidemenu.subscriptions": "Suscripciones",

package/src/routes.js

@@ -1,9 +1,7 @@
 import _ from "lodash/fp";
 import { compile } from "path-to-regexp";
 
-export const GRANT_REQUEST_APPROVALS = "/grant_request_approvals";
 export const CALLBACK = "/callback";
-export const CONCEPT_VERSION = "/concepts/:business_concept_id/versions/:id";
 export const CONCEPTS = "/concepts";
 export const CONCEPTS_BULK_UPDATE = "/concepts/bulk_update";
 export const CONCEPTS_NEW = "/concepts/new";
@@ -17,17 +15,17 @@ export const CONCEPT_LINKS_CONCEPTS =
   "/concepts/:business_concept_id/versions/:id/links/concepts";
 export const CONCEPT_LINKS_CONCEPTS_NEW =
   "/concepts/:business_concept_id/versions/:id/links/concepts/new";
+export const CONCEPT_LINKS_IMPLEMENTATIONS =
+  "/concepts/:business_concept_id/versions/:id/links/implementations";
 export const CONCEPT_LINKS_STRUCTURES =
   "/concepts/:business_concept_id/versions/:id/links/structures";
 export const CONCEPT_LINKS_STRUCTURES_NEW =
   "/concepts/:business_concept_id/versions/:id/links/structures/new";
-
-export const CONCEPT_LINKS_IMPLEMENTATIONS =
-  "/concepts/:business_concept_id/versions/:id/links/implementations";
 export const CONCEPT_RULES =
   "/concepts/:business_concept_id/versions/:id/rules";
 export const CONCEPT_RULES_NEW =
   "/concepts/:business_concept_id/versions/:id/rules/new";
+export const CONCEPT_VERSION = "/concepts/:business_concept_id/versions/:id";
 export const CONFIGURATION = "/configurations/:external_id";
 export const CONFIGURATIONS = "/configurations";
 export const CONFIGURATION_CREATE = "/configurations/new";
@@ -44,11 +42,11 @@ export const DOMAIN_MEMBERS = "/domains/:id/members";
 export const DOMAIN_MEMBERS_NEW = "/domains/:id/members/new";
 export const DOMAIN_NEW = "/domains/:id/new";
 export const EXECUTION_GROUP = "/executionGroups/:id";
-export const GRANT_REQUESTS = "/grant_requests";
-export const GRANT_REQUEST = "/grant_requests/:id";
-
 export const GRANTS = "/grants";
 export const GRANTS_REQUESTS_CHECKOUT = "/grants_requests/checkout";
+export const GRANT_REQUEST = "/grant_requests/:id";
+export const GRANT_REQUESTS = "/grant_requests";
+export const GRANT_REQUEST_APPROVALS = "/grant_request_approvals";
 export const GRAPH = "/graphs/:id";
 export const GRAPHS = "/graphs";
 export const GROUP = "/groups/:id";
@@ -83,19 +81,19 @@ export const JOB = "/jobs/:id";
 export const JOBS = "/jobs";
 export const LINEAGE_EVENTS = "/lineage_events";
 export const LOGIN = "/login";
-export const MY_GRANT_REQUESTS = "/my_grant_requests";
 export const MY_GRANTS = "/my_grants";
+export const MY_GRANT_REQUESTS = "/my_grant_requests";
 export const PASSWORD = "/password";
-export const PENDING_STRUCTURE_NOTES = "/structure_notes";
+export const PENDING_STRUCTURE_NOTES = "/structureNotes";
 export const PROFILE_EXECUTION =
   "/profileGroups/:group_id/profileExecutions/:id";
 export const PROFILE_GROUP = "/profileGroups/:id";
 export const QUALITY_DASHBOARD = "/quality_dashboard";
-export const REMEDIATION_PLAN = "/rule_results/:rule_result_id/remediation";
 export const REMEDIATION_EDIT =
-  "/rules/:id/implementations/:implementation_id/ruleResults/:rule_result_id/remediation/edit";
+  "/rules/:id/implementations/:implementation_id/results/:rule_result_id/remediation/edit";
 export const REMEDIATION_NEW =
-  "/rules/:id/implementations/:implementation_id/ruleResults/:rule_result_id/remediation/new";
+  "/rules/:id/implementations/:implementation_id/results/:rule_result_id/remediation/new";
+export const REMEDIATION_PLAN = "/rule_results/:rule_result_id/remediation";
 export const ROLE = "/roles/:id";
 export const ROLES = "/roles";
 export const ROLES_NEW = "/roles/new";
@@ -106,17 +104,19 @@ export const RULE_EVENTS = "/rules/:id/events";
 export const RULE_IMPLEMENTATION =
   "/rules/:id/implementations/:implementation_id(\\d+)";
 export const RULE_IMPLEMENTATIONS = "/rules/:id/implementations";
-export const RULE_IMPLEMENTATION_EVENTS =
-  "/rules/:id/implementations/:implementation_id/events";
-export const RULE_IMPLEMENTATION_NEW = "/rules/:id/implementations/new";
-export const RULE_IMPLEMENTATION_EDIT =
-  "/rules/:id/implementations/:implementation_id/edit";
 export const RULE_IMPLEMENTATION_CLONE =
   "/rules/:id/implementations/:implementation_id/clone";
+export const RULE_IMPLEMENTATION_EDIT =
+  "/rules/:id/implementations/:implementation_id/edit";
+export const RULE_IMPLEMENTATION_EVENTS =
+  "/rules/:id/implementations/:implementation_id/events";
 export const RULE_IMPLEMENTATION_MOVE =
   "/rules/:id/implementations/:implementation_id/move";
+export const RULE_IMPLEMENTATION_NEW = "/rules/:id/implementations/new";
 export const RULE_IMPLEMENTATION_RESULT_DETAILS =
   "/rules/:id/implementations/:implementation_id/results/:rule_result_id";
+export const RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN =
+  "/rules/:id/implementations/:implementation_id/results/:rule_result_id/remediation_plan";
 export const RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS =
   "/rules/:id/implementations/:implementation_id/results/:rule_result_id/segment_results";
 export const RULE_IMPLEMENTATION_RESULT_REMEDIATION_PLAN =
@@ -156,11 +156,11 @@ export const STRUCTURE_PARENTS = "/structures/:id/parents";
 export const STRUCTURE_PROFILE = "/structures/:id/profile";
 export const STRUCTURE_RULES_IMPLEMENTATIONS =
   "/structures/:id/rules_implementations";
-export const STRUCTURE_TAGS = "/structure_tags";
-export const STRUCTURE_TAGS_NEW = "/structure_tags/new";
-export const STRUCTURE_TAGS_EDIT = "/structure_tags/:id/edit";
-export const STRUCTURE_TYPES = "/structure_types";
-export const STRUCTURE_TYPES_EDIT = "/structure_types/:id/edit";
+export const STRUCTURE_TAGS = "/structureTags";
+export const STRUCTURE_TAGS_EDIT = "/structureTags/:id/edit";
+export const STRUCTURE_TAGS_NEW = "/structureTags/new";
+export const STRUCTURE_TYPES = "/structureTypes";
+export const STRUCTURE_TYPES_EDIT = "/structureTypes/:id/edit";
 export const STRUCTURE_VERSION = "/structures/:id/versions/:version";
 export const STRUCTURE_VERSIONS = "/structures/:id/versions";
 export const STRUCTURE_VERSION_VERSIONS =
@@ -168,8 +168,8 @@ export const STRUCTURE_VERSION_VERSIONS =
 export const STRUCTURES_UPLOAD_EVENTS = "/bulk_update_template_content_events";
 export const SUBSCRIPTION = "/subscriptions/:id";
 export const SUBSCRIPTIONS = "/subscriptions";
-export const SUBSCRIPTION_NEW = "/subscriptions/new";
 export const SUBSCRIPTION_EDIT = "/subscriptions/:id/edit";
+export const SUBSCRIPTION_NEW = "/subscriptions/new";
 export const SYSTEMS = "/systems";
 export const SYSTEM_EDIT = "/systems/:id/edit";
 export const SYSTEM_NEW = "/systems/new";
@@ -189,90 +189,98 @@ export const USER_EDIT = "/users/:id/edit";
 export const USER_EDIT_PASSWORD = "/users/:id/password";
 
 const routes = {
-  GRANT_REQUEST_APPROVALS,
   CALLBACK,
+  CONCEPTS,
+  CONCEPTS_BULK_UPDATE,
+  CONCEPTS_NEW,
+  CONCEPTS_PENDING,
   CONCEPT_ARCHIVE,
   CONCEPT_EDIT,
   CONCEPT_EVENTS,
-  CONCEPT_LINKS_CONCEPTS_NEW,
   CONCEPT_LINKS_CONCEPTS,
-  CONCEPT_LINKS_STRUCTURES_NEW,
-  CONCEPT_LINKS_STRUCTURES,
+  CONCEPT_LINKS_CONCEPTS_NEW,
   CONCEPT_LINKS_IMPLEMENTATIONS,
-  CONCEPT_RULES_NEW,
+  CONCEPT_LINKS_STRUCTURES,
+  CONCEPT_LINKS_STRUCTURES_NEW,
   CONCEPT_RULES,
+  CONCEPT_RULES_NEW,
   CONCEPT_VERSION,
-  CONCEPTS_BULK_UPDATE,
-  CONCEPTS_NEW,
-  CONCEPTS_PENDING,
-  CONCEPTS,
-  CONFIGURATION_EDIT,
   CONFIGURATION,
+  CONFIGURATION_EDIT,
   DASHBOARD,
-  DOMAIN_ACTION,
-  DOMAIN_EDIT,
-  DOMAIN_MEMBERS_NEW,
-  DOMAIN_MEMBERS,
-  DOMAIN_NEW,
   DOMAIN,
+  DOMAINS,
   DOMAINS_ACTIONS,
   DOMAINS_NEW,
   DOMAINS_SEARCH,
-  DOMAINS,
+  DOMAIN_ACTION,
+  DOMAIN_EDIT,
+  DOMAIN_MEMBERS,
+  DOMAIN_MEMBERS_NEW,
+  DOMAIN_NEW,
   EXECUTION_GROUP,
-  GRANT_REQUEST,
-  GRANT_REQUESTS,
   GRANTS,
   GRANTS_REQUESTS_CHECKOUT,
+  GRANT_REQUEST,
+  GRANT_REQUESTS,
+  GRANT_REQUEST_APPROVALS,
   GRAPH,
   GRAPHS,
-  GROUP_CREATE,
-  GROUP_EDIT,
   GROUP,
   GROUPS,
+  GROUP_CREATE,
+  GROUP_EDIT,
   IMPLEMENTATIONS,
+  IMPLEMENTATION_CONCEPT_LINKS,
+  IMPLEMENTATION_CONCEPT_LINKS_NEW,
+  IMPLEMENTATION_STRUCTURES,
+  IMPLEMENTATION_STRUCTURES_NEW,
+  INGEST,
+  INGESTS,
+  INGESTS_NEW,
+  INGESTS_PENDING,
   INGEST_ARCHIVE,
   INGEST_DUPLICATE,
   INGEST_EDIT,
   INGEST_EVENTS,
   INGEST_EXECUTIONS,
-  INGEST_RELATIONS_INGESTS_NEW,
   INGEST_RELATIONS_INGESTS,
-  INGEST_RELATIONS_STRUCTURES_NEW,
+  INGEST_RELATIONS_INGESTS_NEW,
   INGEST_RELATIONS_STRUCTURES,
-  INGEST,
-  INGESTS_NEW,
-  INGESTS_PENDING,
-  INGESTS,
+  INGEST_RELATIONS_STRUCTURES_NEW,
   JOB,
   JOBS,
   LINEAGE_EVENTS,
   LOGIN,
-  MY_GRANT_REQUESTS,
   MY_GRANTS,
+  MY_GRANT_REQUESTS,
   PASSWORD,
   PENDING_STRUCTURE_NOTES,
   PROFILE_EXECUTION,
   PROFILE_GROUP,
   QUALITY_DASHBOARD,
-  REMEDIATION_PLAN,
   REMEDIATION_EDIT,
   REMEDIATION_NEW,
+  REMEDIATION_PLAN,
   ROLE,
-  ROLES_NEW,
   ROLES,
+  ROLES_NEW,
+  RULE,
+  RULES,
   RULE_EDIT,
   RULE_EVENTS,
+  RULE_IMPLEMENTATION,
+  RULE_IMPLEMENTATIONS,
   RULE_IMPLEMENTATION_CLONE,
   RULE_IMPLEMENTATION_EDIT,
   RULE_IMPLEMENTATION_EVENTS,
-  IMPLEMENTATION_CONCEPT_LINKS,
-  IMPLEMENTATION_CONCEPT_LINKS_NEW,
-  IMPLEMENTATION_STRUCTURES,
-  IMPLEMENTATION_STRUCTURES_NEW,
   RULE_IMPLEMENTATION_MOVE,
   RULE_IMPLEMENTATION_NEW,
+  RULE_IMPLEMENTATION_RESULTS,
+  RULE_IMPLEMENTATION_RESULTS_DETAILS,
   RULE_IMPLEMENTATION_RESULT_DETAILS,
+  RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN,
+  RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
   RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
   RULE_IMPLEMENTATION_RESULT_REMEDIATION_PLAN,
   RULE_IMPLEMENTATION_RESULTS_DETAILS,
@@ -280,42 +288,43 @@ const routes = {
   RULE_IMPLEMENTATION,
   RULE_IMPLEMENTATIONS,
   RULE_NEW,
-  RULE,
-  RULES,
   SAMPLE,
+  SEARCH,
   SEARCH_CONCEPTS,
   SEARCH_INGESTS,
   SEARCH_RESULTS,
   SEARCH_STRUCTURES,
-  SEARCH,
+  SOURCE,
+  SOURCES,
   SOURCES_NEW,
   SOURCE_EDIT,
   SOURCE_JOB,
-  SOURCE_JOBS_NEW,
   SOURCE_JOBS,
-  SOURCE,
-  SOURCES,
+  SOURCE_JOBS_NEW,
+  STRUCTURE,
+  STRUCTURES,
+  STRUCTURES_BULK_UPDATE,
   STRUCTURE_CHILDREN,
   STRUCTURE_EVENTS,
   STRUCTURE_GRANTS,
   STRUCTURE_IMPACT,
   STRUCTURE_LINEAGE,
-  STRUCTURE_LINKS_NEW,
   STRUCTURE_LINKS,
+  STRUCTURE_LINKS_NEW,
   STRUCTURE_METADATA,
-  STRUCTURE_NOTES_EDIT,
   STRUCTURE_NOTES,
+  STRUCTURE_NOTES_EDIT,
   STRUCTURE_PARENTS,
   STRUCTURE_PROFILE,
   STRUCTURE_RULES_IMPLEMENTATIONS,
+  STRUCTURE_TAGS,
   STRUCTURE_TAGS_EDIT,
   STRUCTURE_TAGS_NEW,
-  STRUCTURE_TAGS,
-  STRUCTURE_TYPES_EDIT,
   STRUCTURE_TYPES,
-  STRUCTURE_VERSION_VERSIONS,
+  STRUCTURE_TYPES_EDIT,
   STRUCTURE_VERSION,
   STRUCTURE_VERSIONS,
+  STRUCTURE_VERSION_VERSIONS,
   STRUCTURE,
   STRUCTURES_BULK_UPDATE,
   STRUCTURES,
@@ -324,23 +333,25 @@ const routes = {
   SUBSCRIPTION_NEW,
   SUBSCRIPTION,
   SUBSCRIPTIONS,
+  SUBSCRIPTION_EDIT,
+  SUBSCRIPTION_NEW,
+  SYSTEMS,
   SYSTEM_EDIT,
   SYSTEM_NEW,
   SYSTEM_STRUCTURES,
-  SYSTEMS,
-  TAGS_NEW,
   TAGS,
-  TEMPLATE_EDIT,
-  TEMPLATE_SCOPE,
+  TAGS_NEW,
   TEMPLATE,
-  TEMPLATES_NEW,
   TEMPLATES,
+  TEMPLATES_NEW,
+  TEMPLATE_EDIT,
+  TEMPLATE_SCOPE,
   UNAUTHORIZED,
-  USER_EDIT_PASSWORD,
-  USER_EDIT,
   USER,
-  USERS_NEW,
   USERS,
+  USERS_NEW,
+  USER_EDIT,
+  USER_EDIT_PASSWORD,
 };
 
 export const linkTo = _.mapValues(compile)(routes);

package/src/services/__tests__/tree.spec.js

@@ -0,0 +1,68 @@
+import _ from "lodash/fp";
+import {
+  flatten,
+  childIds,
+  descendents,
+  recursiveMatch,
+  stratify,
+} from "../tree";
+
+const baz = { id: "3", name: "baz", children: [] };
+const bar = { id: "2", name: "bar", children: [baz] };
+const foo = { id: "1", name: "foo", children: [bar] };
+const options = [foo];
+
+describe("stratify", () => {
+  it("stratifies options", () => {
+    const foo = { id: 1, name: "foo" };
+    const bar = { id: 2, name: "bar", parentId: 1 };
+    const baz = { id: 3, name: "baz", parentId: 2 };
+    const xyzzy = { id: 4, name: "xyzzy", parentId: 99 };
+    const options = [foo, bar, baz, xyzzy];
+    const res = stratify({})(options);
+    expect(res).toEqual([
+      {
+        ...foo,
+        level: 0,
+        children: [{ ...bar, children: [{ ...baz, children: [] }] }],
+      },
+      { ...xyzzy, level: 0, children: [] },
+    ]);
+  });
+});
+
+describe("flatten", () => {
+  it("flattens stratified options and assigns level", () => {
+    const res = flatten(options);
+    expect(res).toEqual([
+      { ...foo, level: 0 },
+      { ...bar, level: 1 },
+      { ...baz, level: 2 },
+    ]);
+  });
+});
+
+describe("childIds", () => {
+  it("returns ids of children", () => {
+    const res = childIds("1")(options);
+    expect(res).toEqual(["2"]);
+  });
+});
+
+describe("descendents", () => {
+  it("returns descendent ids", () => {
+    const res = _.flatMap(descendents)(options);
+    expect(res).toEqual(["1", "2", "3"]);
+  });
+});
+
+describe("recursiveMatch", () => {
+  it("matches recursively", () => {
+    const match =
+      (query) =>
+      ({ name }) =>
+        _.contains(query)(name);
+    const res = _.filter(recursiveMatch(match)("baz"))(options);
+    expect(res).toEqual([foo]);
+  });
+});

package/src/services/tree.js

@@ -0,0 +1,44 @@
+import _ from "lodash/fp";
+
+const idFn = (d) => d.id;
+const parentFn = (d) => d.parentId;
+const nodeFn = ({ id, name, ...props }) => ({
+  id,
+  name,
+  children: [],
+  ...props,
+});
+
+export const stratify = (options) => (data) => {
+  const { node = nodeFn, id = idFn, parent = parentFn } = options || {};
+  const root = { children: [] };
+  const nodes = data.reduce((acc, d) => ({ ...acc, [id(d)]: node(d) }), {
+    root,
+  });
+  for (const d of data) {
+    const n = nodes[id(d)];
+    const p = nodes[parent(d)] || root;
+    p.children.push(n);
+  }
+  return root.children.map((c) => ({ ...c, level: 0 }));
+};
+
+export const flatten = (data, level = 0) =>
+  data.flatMap((d) =>
+    d.children?.length
+      ? [{ ...d, level }, ...flatten(d.children, level + 1)]
+      : [{ ...d, level }]
+  );
+
+export const recursiveMatch = (match) => (query) => (d) =>
+  match(query)(d) || _.some(recursiveMatch(match)(query))(d?.children);
+
+export const descendents = ({ id, children }) =>
+  _.isArray(children) ? [id, ...children.flatMap(descendents)] : [id];
+
+export const childIds = (ids) =>
+  _.flow(
+    _.filter(({ id }) => _.contains(id)(ids)),
+    _.flatMap("children"),
+    _.map("id")
+  );