@truedat/dd 7.8.4 → 7.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "7.8.4",
+  "version": "7.8.6",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.8.4",
+    "@truedat/test": "7.8.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -83,5 +83,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "9132f94c91f8a749e0363ef1d6ce8af40284236d"
+  "gitHead": "8dbca36fe9ab1cb4e8455c6a9d122fe289759b72"
 }

package/src/components/StructureGrantCartCheckout.js

@@ -8,12 +8,14 @@ import { useIntl, FormattedMessage } from "react-intl";
 import { checkoutGrantRequest } from "../routines";
 import StructureGrantCart from "./StructureGrantCart";
 import StructureGrantCartInformation from "./StructureGrantCartInformation";
+import { useState } from "react";
 
 export const StructureGrantCartCheckout = ({
   grantRequestsCart,
   checkoutGrantRequest,
 }) => {
   const { formatMessage } = useIntl();
+  const [isRequesting, setIsRequesting] = useState(false);
 
   const { template, templateContent, modificationGrant, validCart, user } =
     grantRequestsCart;
@@ -37,6 +39,7 @@ export const StructureGrantCartCheckout = ({
         created_by_id: user?.id,
       }),
     };
+    setIsRequesting(true);
     checkoutGrantRequest(payload);
   };
 
@@ -62,7 +65,7 @@ export const StructureGrantCartCheckout = ({
             <Button
               primary
               onClick={checkout}
-              disabled={!validCart || !user.valid}
+              disabled={!validCart || !user.valid || isRequesting}
               content={formatMessage({ id: "actions.save" })}
             />
           </GridColumn>

package/src/components/StructureTabPane.js

@@ -1,14 +1,11 @@
+import _ from "lodash/fp";
 import { lazy } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
 import { Route, Routes } from "react-router";
 import { ErrorBoundary } from "@truedat/core/components";
-import {
-  STRUCTURE_LINKS_NEW,
-  STRUCTURE_STRUCTURE_LINKS_NEW,
-  STRUCTURE_NOTES_EDIT,
-} from "@truedat/core/routes";
 import { getActiveTab } from "../selectors/getActiveTab";
+import { useStructureCustomTabs } from "../hooks/useCustomTabs";
 import {
   getTabVisibility,
   getLinkedImplementationsToStructuresColumns,
@@ -43,7 +40,19 @@ const RuleImplementationsTable = lazy(
   () => import("@truedat/dq/components/RuleImplementationsTable")
 );
 
-export const StructureTabPane = ({ activeTab, tabVisibility, columns }) => {
+const CustomTab = ({ tabs, activeTab }) => {
+  if (_.isEmpty(tabs)) return null;
+  const tab = _.find((tab) => (tab.name === activeTab))(tabs);
+  return tab?.content;
+}
+
+export const StructureTabPane = ({ path }) => {
+  const customTabs = useStructureCustomTabs();
+  const tabVisibility = useSelector(getTabVisibility);
+  const structureTabsOrder = useSelector(state => state.structureTabsOrder);
+  const columns = useSelector(state => getLinkedImplementationsToStructuresColumns(state));
+  const activeTab = getActiveTab({ tabVisibility, path, structureTabsOrder, customTabs });
+
   return (
     <ErrorBoundary>
       {activeTab === "fields" && <StructureFields />}
@@ -83,24 +92,11 @@ export const StructureTabPane = ({ activeTab, tabVisibility, columns }) => {
       )}
       {activeTab === "lineage" && <StructureLineage />}
       {activeTab === "impact" && <StructureImpact />}
+      {<CustomTab tabs={customTabs} activeTab={activeTab} />}
     </ErrorBoundary>
   );
 };
 
-StructureTabPane.propTypes = {
-  activeTab: PropTypes.string,
-  tabVisibility: PropTypes.object,
-  columns: PropTypes.array,
-};
-
-const mapStateToProps = ({ structureTabsOrder, ...state }, { path }) => {
-  const tabVisibility = getTabVisibility(state);
-  const activeTab = getActiveTab(tabVisibility, path, structureTabsOrder);
-  return {
-    tabVisibility,
-    activeTab,
-    columns: getLinkedImplementationsToStructuresColumns(state),
-  };
-};
+StructureTabPane.propTypes = { path: PropTypes.string, };
 
-export default connect(mapStateToProps)(StructureTabPane);
+export default StructureTabPane;

package/src/components/StructureTabPaneRoutes.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import { lazy } from "react";
 import { Route, Routes } from "react-router";
 import {
@@ -21,6 +22,7 @@ import {
   STRUCTURE_VERSIONS,
   STRUCTURE_VERSION_VERSIONS,
 } from "@truedat/core/routes";
+import { useStructureCustomTabs } from "../hooks/useCustomTabs";
 import { useParams } from "react-router";
 import StructureTabPane from "./StructureTabPane";
 
@@ -32,8 +34,9 @@ const StructureEventsLoader = () => {
   return <EventsLoader resource_id={id} resource_type="data_structure" />;
 };
 
-export const StructureTabPaneRoutes = ({}) => (
-  <Routes>
+export const StructureTabPaneRoutes = ({ }) => {
+  const customTabs = useStructureCustomTabs();
+  return <Routes>
     <Route index exact element={<StructureTabPane path={STRUCTURE} />} />
 
     <Route path="versions">
@@ -110,7 +113,10 @@ export const StructureTabPaneRoutes = ({}) => (
       path="grants"
       element={<StructureTabPane path={STRUCTURE_GRANTS} />}
     />
+    {_.map((tab) => (
+      <Route path={tab.name} element={<StructureTabPane path={tab.route} />} />
+    ))(customTabs)}
   </Routes>
-);
+};
 
 export default StructureTabPaneRoutes;

package/src/components/StructureTabRoutes.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import { Route, Routes } from "react-router";
 import {
   STRUCTURE,
@@ -20,64 +21,72 @@ import {
   STRUCTURE_VERSION_VERSIONS,
   STRUCTURE_METADATA,
 } from "@truedat/core/routes";
+import { useStructureCustomTabs } from "../hooks/useCustomTabs";
 import StructureTabs from "./StructureTabs";
 
-export const StructureTabRoutes = () => (
-  <Routes>
-    <Route index exact element={<StructureTabs path={STRUCTURE} />} />
+export const StructureTabRoutes = () => {
+  const customTabs = useStructureCustomTabs();
 
-    <Route path="versions">
-      <Route index element={<StructureTabs path={STRUCTURE_VERSIONS} />} />
+  return (
+    <Routes>
+      <Route index exact element={<StructureTabs path={STRUCTURE} />} />
 
-      <Route path=":version">
-        <Route index element={<StructureTabs path={STRUCTURE_VERSION} />} />
-        <Route
-          path="versions"
-          element={<StructureTabs path={STRUCTURE_VERSION_VERSIONS} />}
-        />
-        <Route
-          path="fields"
-          element={<StructureTabs path={STRUCTURE_VERSION_FIELDS} />}
-        />
+      <Route path="versions">
+        <Route index element={<StructureTabs path={STRUCTURE_VERSIONS} />} />
+
+        <Route path=":version">
+          <Route index element={<StructureTabs path={STRUCTURE_VERSION} />} />
+          <Route
+            path="versions"
+            element={<StructureTabs path={STRUCTURE_VERSION_VERSIONS} />}
+          />
+          <Route
+            path="fields"
+            element={<StructureTabs path={STRUCTURE_VERSION_FIELDS} />}
+          />
+        </Route>
       </Route>
-    </Route>
 
-    <Route
-      path="profile"
-      element={<StructureTabs path={STRUCTURE_PROFILE} />}
-    />
-    <Route path="links/*" element={<StructureTabs path={STRUCTURE_LINKS} />} />
-    <Route
-      path="structureLinks/*"
-      element={<StructureTabs path={STRUCTURE_STRUCTURE_LINKS} />}
-    />
-    <Route path="events" element={<StructureTabs path={STRUCTURE_EVENTS} />} />
-    <Route
-      path="metadata"
-      element={<StructureTabs path={STRUCTURE_METADATA} />}
-    />
-    <Route path="notes/*" element={<StructureTabs path={STRUCTURE_NOTES} />} />
-    <Route
-      path="members"
-      element={<StructureTabs path={STRUCTURE_MEMBERS} />}
-    />
-    <Route path="rules" element={<StructureTabs path={STRUCTURE_RULES} />} />
-    <Route
-      path="lineage"
-      element={<StructureTabs path={STRUCTURE_LINEAGE} />}
-    />
-    <Route
-      path="children"
-      element={<StructureTabs path={STRUCTURE_CHILDREN} />}
-    />
-    <Route path="fields" element={<StructureTabs path={STRUCTURE_FIELDS} />} />
-    <Route
-      path="parents"
-      element={<StructureTabs path={STRUCTURE_PARENTS} />}
-    />
-    <Route path="impact" element={<StructureTabs path={STRUCTURE_IMPACT} />} />
-    <Route path="grants" element={<StructureTabs path={STRUCTURE_GRANTS} />} />
-  </Routes>
-);
+      <Route
+        path="profile"
+        element={<StructureTabs path={STRUCTURE_PROFILE} />}
+      />
+      <Route path="links/*" element={<StructureTabs path={STRUCTURE_LINKS} />} />
+      <Route
+        path="structureLinks/*"
+        element={<StructureTabs path={STRUCTURE_STRUCTURE_LINKS} />}
+      />
+      <Route path="events" element={<StructureTabs path={STRUCTURE_EVENTS} />} />
+      <Route
+        path="metadata"
+        element={<StructureTabs path={STRUCTURE_METADATA} />}
+      />
+      <Route path="notes/*" element={<StructureTabs path={STRUCTURE_NOTES} />} />
+      <Route
+        path="members"
+        element={<StructureTabs path={STRUCTURE_MEMBERS} />}
+      />
+      <Route path="rules" element={<StructureTabs path={STRUCTURE_RULES} />} />
+      <Route
+        path="lineage"
+        element={<StructureTabs path={STRUCTURE_LINEAGE} />}
+      />
+      <Route
+        path="children"
+        element={<StructureTabs path={STRUCTURE_CHILDREN} />}
+      />
+      <Route path="fields" element={<StructureTabs path={STRUCTURE_FIELDS} />} />
+      <Route
+        path="parents"
+        element={<StructureTabs path={STRUCTURE_PARENTS} />}
+      />
+      <Route path="impact" element={<StructureTabs path={STRUCTURE_IMPACT} />} />
+      <Route path="grants" element={<StructureTabs path={STRUCTURE_GRANTS} />} />
+      {_.map((tab) => (
+        <Route path={tab.name} element={<StructureTabs path={`/structures/:id/${tab.name}`} />} />
+      ))(customTabs)}
+    </Routes>
+  )
+};
 
 export default StructureTabRoutes;

package/src/components/StructureTabs.js

@@ -1,10 +1,12 @@
 import _ from "lodash/fp";
+import { compile } from "path-to-regexp";
 import PropTypes from "prop-types";
 import { Divider, Menu } from "semantic-ui-react";
 import { Link } from "react-router";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
 import { useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
+import { useStructureCustomTabs } from "../hooks/useCustomTabs";
 import { getActiveTab } from "../selectors/getActiveTab";
 import { getTabVisibility } from "../selectors/getTabVisibility";
 
@@ -19,157 +21,151 @@ const versionsLink = ({ id }, version) =>
     ? linkTo.STRUCTURE_VERSIONS({ id })
     : linkTo.STRUCTURE_VERSION_VERSIONS({ id, version });
 
-export const StructureTabs = ({
-  activeTab,
-  tabVisibility: {
-    children,
-    events,
-    fields,
-    grants,
-    impact,
-    lineage,
-    links,
-    structureLinks,
-    metadata,
-    notes,
-    parents,
-    profile,
-    rules,
-    roles,
-    versions,
-  } = {},
-  structure,
-  structureTabsOrder,
-  version,
-}) => {
+export const StructureTabs = ({ path }) => {
   const { formatMessage } = useIntl();
+  const customTabs = useStructureCustomTabs();
+  const version = useSelector(state => state.structureVersion);
+  const structure = useSelector(state => state.structure);
+  const structureTabsOrder = useSelector(state => state.structureTabsOrder);
+  const tabVisibility = useSelector(getTabVisibility);
+  const activeTab = getActiveTab({ tabVisibility, path, structureTabsOrder, customTabs });
+
+  const customTabsItems = _.map((tab) => ({
+    active: activeTab === tab.name,
+    as: Link,
+    to: compile(tab.route)({ id: structure.id }),
+    content: formatMessage({ id: `tabs.dd.${tab.name}` }),
+    key: tab.name,
+  }))(customTabs);
+
   const items = !_.isEmpty(structure)
     ? _.filter("content")([
-        {
-          active: activeTab === "fields",
-          as: Link,
-          to: structureFields(structure, version),
-          content: fields ? formatMessage({ id: "tabs.dd.fields" }) : false,
-          key: "fields",
-        },
-        {
-          active: activeTab === "children",
-          as: Link,
-          to: linkTo.STRUCTURE_CHILDREN(structure),
-          content: children ? formatMessage({ id: "tabs.dd.children" }) : false,
-          key: "children",
-        },
-        {
-          active: activeTab === "notes",
-          as: Link,
-          to: linkTo.STRUCTURE_NOTES(structure),
-          content: notes ? formatMessage({ id: "tabs.dd.notes" }) : false,
-          key: "notes",
-        },
-        {
-          active: activeTab === "parents",
-          as: Link,
-          to: linkTo.STRUCTURE_PARENTS(structure),
-          content: parents ? formatMessage({ id: "tabs.dd.parents" }) : false,
-          key: "parents",
-        },
-        {
-          active: activeTab === "grants",
-          as: Link,
-          to: linkTo.STRUCTURE_GRANTS(structure),
-          content: grants ? formatMessage({ id: "tabs.dd.grants" }) : false,
-          key: "grants",
-        },
-        {
-          active: activeTab === "metadata",
-          as: Link,
-          to: linkTo.STRUCTURE_METADATA(structure),
-          content: metadata ? formatMessage({ id: "tabs.dd.metadata" }) : false,
-          key: "metadata",
-        },
-        {
-          active: activeTab === "profile",
-          as: Link,
-          to: linkTo.STRUCTURE_PROFILE(structure),
-          content: profile ? formatMessage({ id: "tabs.dd.profile" }) : false,
-          key: "profile",
-        },
-        {
-          active: activeTab === "rules",
-          as: Link,
-          to: linkTo.STRUCTURE_RULES(structure),
-          content: rules ? formatMessage({ id: "tabs.dd.rules" }) : false,
-          key: "rules",
-        },
-        {
-          active: activeTab === "links",
-          as: Link,
-          to: linkTo.STRUCTURE_LINKS(structure),
-          content: links ? formatMessage({ id: "tabs.dd.links" }) : false,
-          key: "links",
-        },
-        {
-          active: activeTab === "structureLinks",
-          as: Link,
-          to: linkTo.STRUCTURE_STRUCTURE_LINKS(structure),
-          content: structureLinks
-            ? formatMessage({ id: "tabs.dd.structureLinks" })
-            : false,
-          key: "structureLinks",
-        },
-        {
-          active: activeTab === "lineage",
-          as: Link,
-          to: linkTo.STRUCTURE_LINEAGE(structure),
-          content: lineage ? formatMessage({ id: "tabs.dd.lineage" }) : false,
-          key: "lineage",
-        },
-        {
-          active: activeTab === "impact",
-          as: Link,
-          to: linkTo.STRUCTURE_IMPACT(structure),
-          content: impact ? formatMessage({ id: "tabs.dd.impact" }) : false,
-          key: "impact",
-        },
-        {
-          active: activeTab === "versions",
-          as: Link,
-          to: versionsLink(structure, version),
-          content: versions ? formatMessage({ id: "tabs.dd.versions" }) : false,
-          key: "versions",
-        },
-        {
-          active: activeTab === "events",
-          as: Link,
-          to: linkTo.STRUCTURE_EVENTS(structure),
-          content: events ? formatMessage({ id: "tabs.dd.audit" }) : false,
-          key: "events",
-        },
-        {
-          active: activeTab === "roles",
-          as: Link,
-          to: linkTo.STRUCTURE_MEMBERS(structure),
-          content: roles ? formatMessage({ id: "tabs.dd.roles" }) : false,
-          key: "roles",
-        },
-      ])
+      {
+        active: activeTab === "fields",
+        as: Link,
+        to: structureFields(structure, version),
+        content: tabVisibility?.fields ? formatMessage({ id: "tabs.dd.fields" }) : false,
+        key: "fields",
+      },
+      {
+        active: activeTab === "children",
+        as: Link,
+        to: linkTo.STRUCTURE_CHILDREN(structure),
+        content: tabVisibility?.children ? formatMessage({ id: "tabs.dd.children" }) : false,
+        key: "children",
+      },
+      {
+        active: activeTab === "notes",
+        as: Link,
+        to: linkTo.STRUCTURE_NOTES(structure),
+        content: tabVisibility?.notes ? formatMessage({ id: "tabs.dd.notes" }) : false,
+        key: "notes",
+      },
+      {
+        active: activeTab === "parents",
+        as: Link,
+        to: linkTo.STRUCTURE_PARENTS(structure),
+        content: tabVisibility?.parents ? formatMessage({ id: "tabs.dd.parents" }) : false,
+        key: "parents",
+      },
+      {
+        active: activeTab === "grants",
+        as: Link,
+        to: linkTo.STRUCTURE_GRANTS(structure),
+        content: tabVisibility?.grants ? formatMessage({ id: "tabs.dd.grants" }) : false,
+        key: "grants",
+      },
+      {
+        active: activeTab === "metadata",
+        as: Link,
+        to: linkTo.STRUCTURE_METADATA(structure),
+        content: tabVisibility?.metadata ? formatMessage({ id: "tabs.dd.metadata" }) : false,
+        key: "metadata",
+      },
+      {
+        active: activeTab === "profile",
+        as: Link,
+        to: linkTo.STRUCTURE_PROFILE(structure),
+        content: tabVisibility?.profile ? formatMessage({ id: "tabs.dd.profile" }) : false,
+        key: "profile",
+      },
+      {
+        active: activeTab === "rules",
+        as: Link,
+        to: linkTo.STRUCTURE_RULES(structure),
+        content: tabVisibility?.rules ? formatMessage({ id: "tabs.dd.rules" }) : false,
+        key: "rules",
+      },
+      {
+        active: activeTab === "links",
+        as: Link,
+        to: linkTo.STRUCTURE_LINKS(structure),
+        content: tabVisibility?.links ? formatMessage({ id: "tabs.dd.links" }) : false,
+        key: "links",
+      },
+      {
+        active: activeTab === "structureLinks",
+        as: Link,
+        to: linkTo.STRUCTURE_STRUCTURE_LINKS(structure),
+        content: tabVisibility?.structureLinks
+          ? formatMessage({ id: "tabs.dd.structureLinks" })
+          : false,
+        key: "structureLinks",
+      },
+      {
+        active: activeTab === "lineage",
+        as: Link,
+        to: linkTo.STRUCTURE_LINEAGE(structure),
+        content: tabVisibility?.lineage ? formatMessage({ id: "tabs.dd.lineage" }) : false,
+        key: "lineage",
+      },
+      {
+        active: activeTab === "impact",
+        as: Link,
+        to: linkTo.STRUCTURE_IMPACT(structure),
+        content: tabVisibility?.impact ? formatMessage({ id: "tabs.dd.impact" }) : false,
+        key: "impact",
+      },
+      {
+        active: activeTab === "versions",
+        as: Link,
+        to: versionsLink(structure, version),
+        content: tabVisibility?.versions ? formatMessage({ id: "tabs.dd.versions" }) : false,
+        key: "versions",
+      },
+      {
+        active: activeTab === "events",
+        as: Link,
+        to: linkTo.STRUCTURE_EVENTS(structure),
+        content: tabVisibility?.events ? formatMessage({ id: "tabs.dd.audit" }) : false,
+        key: "events",
+      },
+      {
+        active: activeTab === "roles",
+        as: Link,
+        to: linkTo.STRUCTURE_MEMBERS(structure),
+        content: tabVisibility?.roles ? formatMessage({ id: "tabs.dd.roles" }) : false,
+        key: "roles",
+      },
+      ...customTabsItems,
+    ])
     : null;
 
   structureTabsOrder
     ? items.sort((a, b) => {
-        const aIndex = _.indexOf(a.key)(structureTabsOrder);
-        const bIndex = _.indexOf(b.key)(structureTabsOrder);
-        if (aIndex !== -1 && bIndex !== -1) {
-          return aIndex - bIndex;
-        }
-        if (aIndex !== -1) {
-          return -1;
-        }
-        if (bIndex !== -1) {
-          return 1;
-        }
-        return 0;
-      })
+      const aIndex = _.indexOf(a.key)(structureTabsOrder);
+      const bIndex = _.indexOf(b.key)(structureTabsOrder);
+      if (aIndex !== -1 && bIndex !== -1) {
+        return aIndex - bIndex;
+      }
+      if (aIndex !== -1) {
+        return -1;
+      }
+      if (bIndex !== -1) {
+        return 1;
+      }
+      return 0;
+    })
     : items;
 
   return (
@@ -187,27 +183,6 @@ export const StructureTabs = ({
   );
 };
 
-StructureTabs.propTypes = {
-  structure: PropTypes.object,
-  structureTabsOrder: PropTypes.array,
-  version: PropTypes.string,
-  activeTab: PropTypes.string,
-  tabVisibility: PropTypes.object,
-};
-
-const mapStateToProps = ({ structureTabsOrder, ...state }, ownProps) => {
-  const { path } = ownProps;
-  const { structureVersion: version, structure } = state;
-  const tabVisibility = getTabVisibility(state, path);
-  const activeTab = getActiveTab(tabVisibility, path, structureTabsOrder);
-
-  return {
-    activeTab,
-    structure,
-    structureTabsOrder,
-    tabVisibility,
-    version,
-  };
-};
+StructureTabs.propTypes = { path: PropTypes.string, };
 
-export default connect(mapStateToProps)(StructureTabs);
+export default StructureTabs;

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

@@ -1,7 +1,27 @@
 import React from "react";
 import { render, waitForLoad } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
 import { StructureTabPane } from "../StructureTabPane";
-import { STRUCTURE_NOTES_EDIT } from "@truedat/core/routes";
+import {
+  STRUCTURE_CHILDREN,
+  STRUCTURE_FIELDS,
+  STRUCTURE_METADATA,
+  STRUCTURE_NOTES,
+  STRUCTURE_NOTES_EDIT,
+  STRUCTURE_PARENTS,
+  STRUCTURE_PROFILE,
+  STRUCTURE_STRUCTURE_LINKS,
+  STRUCTURE_MEMBERS,
+  STRUCTURE_RULES,
+  STRUCTURE_LINKS,
+  STRUCTURE_VERSIONS,
+  STRUCTURE_GRANTS,
+  STRUCTURE_EVENTS,
+  STRUCTURE_LINEAGE,
+  STRUCTURE_IMPACT,
+} from "@truedat/core/routes";
+import * as getTabVisibilityModule from "../../selectors/getTabVisibility";
+import * as useCustomTabsModule from "../../hooks/useCustomTabs";
 
 jest.mock("../StructureFields", () => () => <div>StructureFields</div>);
 jest.mock("../StructureNotes", () => () => <div>StructureNotes</div>);
@@ -48,18 +68,21 @@ describe("<StructureTabPane />", () => {
     rules: true,
   };
 
+  const state = {
+    structureTabsOrder: [],
+  };
+
   it("renders correctly with fields tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="fields" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_FIELDS} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with notes edit route", async () => {
     const rendered = render(
-      <StructureTabPane activeTab="notes" tabVisibility={tabVisibility} />,
-      { routes: [STRUCTURE_NOTES_EDIT] }
+      <StructureTabPane path={STRUCTURE_NOTES_EDIT} />,
+      { routes: [STRUCTURE_NOTES_EDIT], state }
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
@@ -67,120 +90,120 @@ describe("<StructureTabPane />", () => {
 
   it("renders correctly with notes default route", async () => {
     const rendered = render(
-      <StructureTabPane activeTab="notes" tabVisibility={tabVisibility} />
+      <StructureTabPane path={STRUCTURE_NOTES} />, { state }
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with grants tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="grants" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_GRANTS} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with profile tab", async () => {
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
     const rendered = render(
-      <StructureTabPane activeTab="profile" tabVisibility={tabVisibility} />
+      <StructureTabPane path={STRUCTURE_PROFILE} />, { state }
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with metadata tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="metadata" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_METADATA} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with rules tab", async () => {
-    const rendered = render(
-      <StructureTabPane
-        activeTab="rules"
-        tabVisibility={tabVisibility}
-        columns={[]}
-      />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_RULES} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with links tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="links" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_LINKS} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with structure links tab", async () => {
-    const rendered = render(
-      <StructureTabPane
-        activeTab="structureLinks"
-        tabVisibility={tabVisibility}
-      />
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_STRUCTURE_LINKS} />, { state }
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with parents tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="parents" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_PARENTS} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with children tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="children" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_CHILDREN} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with versions tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="versions" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_VERSIONS} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with events tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="events" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_EVENTS} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with roles tab", async () => {
-    const rendered = render(
-      <StructureTabPane activeTab="roles" tabVisibility={tabVisibility} />
-    );
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(<StructureTabPane path={STRUCTURE_MEMBERS} />, { state });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with lineage tab", async () => {
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
     const rendered = render(
-      <StructureTabPane activeTab="lineage" tabVisibility={tabVisibility} />
+      <StructureTabPane path={STRUCTURE_LINEAGE} />, { state }
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders correctly with impact tab", async () => {
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    const rendered = render(
+      <StructureTabPane path={STRUCTURE_IMPACT} />, { state }
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with custom tab", async () => {
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+    jest.spyOn(useCustomTabsModule, "useStructureCustomTabs").mockReturnValue([{ name: "custom", route: "/structures/:id/custom", content: <p>Custom</p> },]);
     const rendered = render(
-      <StructureTabPane activeTab="impact" tabVisibility={tabVisibility} />
+      <StructureTabPane path={"/structures/:id/custom"} />, { state }
     );
     await waitForLoad(rendered);
+    await waitFor(() => {
+      expect(rendered.getByText("Custom")).toBeInTheDocument();
+    });
     expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
 import { render, waitForLoad } from "@truedat/test/render";
 import { StructureTabs } from "../StructureTabs";
+import * as getTabVisibilityModule from "../../selectors/getTabVisibility";
 
 describe("<StructureTabs />", () => {
   const tabs = [
@@ -27,8 +28,10 @@ describe("<StructureTabs />", () => {
   const activeTab = "metadata";
 
   it("matches the latest snapshot: " + activeTab, async () => {
-    const props = { structure, version, tabVisibility, activeTab };
-    const rendered = render(<StructureTabs {...props} />);
+    jest.spyOn(getTabVisibilityModule, "getTabVisibility").mockReturnValue(tabVisibility);
+
+    const props = { path: "/structures/:id/metadata" };
+    const rendered = render(<StructureTabs {...props} />, { state: { structure, structureVersion: version, structureTabsOrder: [] } });
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });

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

@@ -8,6 +8,14 @@ exports[`<StructureTabPane /> renders correctly with children tab 1`] = `
 </div>
 `;
 
+exports[`<StructureTabPane /> renders correctly with custom tab 1`] = `
+<div>
+  <p>
+    Custom
+  </p>
+</div>
+`;
+
 exports[`<StructureTabPane /> renders correctly with events tab 1`] = `
 <div>
   <div>

package/src/hooks/useCustomTabs.js

@@ -0,0 +1,14 @@
+import _ from "lodash/fp";
+import { useWebContext } from "@truedat/core/webContext";
+import { useMemo } from "react";
+
+export function useStructureCustomTabs() {
+  const { structureTabs } = useWebContext();
+
+  return useMemo(() => {
+    if (!structureTabs?.customTabs) return [];
+    return _.map((tab) => ({ ...tab, route: `/structures/:id/${tab.name}` }))(
+      structureTabs.customTabs
+    );
+  }, [structureTabs]);
+}

package/src/selectors/__tests__/getActiveTab.spec.js

@@ -17,6 +17,8 @@ import {
   STRUCTURE_VERSION_VERSIONS,
   STRUCTURE_GRANTS,
 } from "@truedat/core/routes";
+const customPath = "/structures/:id/custom";
+
 import { defaultTab, getActiveTab } from "../getActiveTab";
 
 describe("selectors: defaultTab", () => {
@@ -79,25 +81,26 @@ describe("selectors: getActiveTab", () => {
   const tabVisibility = { fields: true };
 
   it("should determine value according to path and tab visibility", () => {
-    expect(getActiveTab(tabVisibility, STRUCTURE)).toBe("fields");
-    expect(getActiveTab(tabVisibility, STRUCTURE_VERSION)).toBe("fields");
-    expect(getActiveTab(tabVisibility, STRUCTURE_CHILDREN)).toBe("children");
-    expect(getActiveTab(tabVisibility, STRUCTURE_NOTES)).toBe("notes");
-    expect(getActiveTab(tabVisibility, STRUCTURE_NOTES_EDIT)).toBe("notes");
-    expect(getActiveTab(tabVisibility, STRUCTURE_PARENTS)).toBe("parents");
-    expect(getActiveTab(tabVisibility, STRUCTURE_PROFILE)).toBe("profile");
-    expect(getActiveTab(tabVisibility, STRUCTURE_RULES)).toBe("rules");
-    expect(getActiveTab(tabVisibility, STRUCTURE_MEMBERS)).toBe("roles");
-    expect(getActiveTab(tabVisibility, STRUCTURE_LINKS)).toBe("links");
-    expect(getActiveTab(tabVisibility, STRUCTURE_LINKS_NEW)).toBe("links");
-    expect(getActiveTab(tabVisibility, STRUCTURE_VERSIONS)).toBe("versions");
-    expect(getActiveTab(tabVisibility, STRUCTURE_VERSION_VERSIONS)).toBe(
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE })).toBe("fields");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_VERSION })).toBe("fields");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_CHILDREN })).toBe("children");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_NOTES })).toBe("notes");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_NOTES_EDIT })).toBe("notes");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_PARENTS })).toBe("parents");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_PROFILE })).toBe("profile");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_RULES })).toBe("rules");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_MEMBERS })).toBe("roles");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_LINKS })).toBe("links");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_LINKS_NEW })).toBe("links");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_VERSIONS })).toBe("versions");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_VERSION_VERSIONS })).toBe(
       "versions"
     );
-    expect(getActiveTab(tabVisibility, STRUCTURE_EVENTS)).toBe("events");
-    expect(getActiveTab(tabVisibility, STRUCTURE_LINEAGE)).toBe("lineage");
-    expect(getActiveTab(tabVisibility, STRUCTURE_IMPACT)).toBe("impact");
-    expect(getActiveTab(tabVisibility, STRUCTURE_GRANTS)).toBe("grants");
-    expect(getActiveTab(tabVisibility, "foo")).toBe(undefined);
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_EVENTS })).toBe("events");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_LINEAGE })).toBe("lineage");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_IMPACT })).toBe("impact");
+    expect(getActiveTab({ tabVisibility, path: STRUCTURE_GRANTS })).toBe("grants");
+    expect(getActiveTab({ tabVisibility, path: "foo" })).toBe(undefined);
+    expect(getActiveTab({ tabVisibility, path: customPath, customTabs: [{ name: "custom", route: customPath }] })).toBe("custom");
   });
 });

package/src/selectors/getActiveTab.js

@@ -23,7 +23,7 @@ import {
   STRUCTURE_IMPACT,
 } from "@truedat/core/routes";
 
-export const defaultTab = (tabVisibility, tabsOrder = []) => {
+export const defaultTab = (tabVisibility, tabsOrder = [], customTabs = []) => {
   const defaultOrder = [
     "fields",
     "children",
@@ -36,15 +36,18 @@ export const defaultTab = (tabVisibility, tabsOrder = []) => {
     "roles",
     "links",
     "versions",
+    ..._.map((tab) => tab.name)(customTabs),
   ];
 
   return _.find((tab) => tabVisibility[tab])([...tabsOrder, ...defaultOrder]);
 };
 
-export const getActiveTab = (tabVisibility, path, tabsOrder) => {
+const getCustomTabs = (customTabs) => _.map((tab) => [_.eq(tab.route), _.constant(tab.name)])(customTabs)
+
+export const getActiveTab = ({ tabVisibility, path, tabsOrder, customTabs }) => {
   return _.cond([
-    [_.eq(STRUCTURE), _.constant(defaultTab(tabVisibility, tabsOrder))],
-    [_.eq(STRUCTURE_VERSION), _.constant(defaultTab(tabVisibility, tabsOrder))],
+    [_.eq(STRUCTURE), _.constant(defaultTab(tabVisibility, tabsOrder, customTabs))],
+    [_.eq(STRUCTURE_VERSION), _.constant(defaultTab(tabVisibility, tabsOrder, customTabs))],
     [_.eq(STRUCTURE_VERSION_FIELDS), _.constant("fields")],
     [_.eq(STRUCTURE_FIELDS), _.constant("fields")],
     [_.eq(STRUCTURE_CHILDREN), _.constant("children")],
@@ -64,5 +67,6 @@ export const getActiveTab = (tabVisibility, path, tabsOrder) => {
     [_.eq(STRUCTURE_EVENTS), _.constant("events")],
     [_.eq(STRUCTURE_LINEAGE), _.constant("lineage")],
     [_.eq(STRUCTURE_IMPACT), _.constant("impact")],
+    ...getCustomTabs(customTabs),
   ])(path);
 };

package/src/selectors/getTabVisibility.js

@@ -1,4 +1,5 @@
 import _ from "lodash/fp";
+import { createSelector } from "reselect";
 import { getStructureToConceptLinks } from "./getStructureLinks";
 import { metadataViewsSelector } from "./metadataViewsSelector";
 
@@ -58,7 +59,7 @@ const eventsTabVisible = _.flow(
 );
 const grantsTabVisible = _.flow(_.path("structure.grants"), notEmpty);
 
-export const getTabVisibility = (state) => ({
+export const getTabVisibility = createSelector([state => state], (state) => ({
   fields: fieldsTabVisible(state),
   profile: profileTabVisible(state),
   links: linksTabVisible(state),
@@ -74,4 +75,4 @@ export const getTabVisibility = (state) => ({
   children: childrenTabVisible(state),
   grants: grantsTabVisible(state),
   roles: rolesTabVisible(state),
-});
+}));