@truedat/bg 7.4.0 → 7.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "7.4.0",
+  "version": "7.4.2",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.4.0",
+    "@truedat/test": "7.4.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,9 +86,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "7.4.0",
-    "@truedat/df": "7.4.0",
-    "@truedat/lm": "7.4.0",
+    "@truedat/core": "7.4.2",
+    "@truedat/df": "7.4.2",
+    "@truedat/lm": "7.4.2",
     "decode-uri-component": "^0.2.2",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
@@ -111,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "65eb6322cc8478fd4c35f2268c8ac1a41e8f129d"
+  "gitHead": "bfc4801642aec7b29767605d30866b52f67aacce"
 }

package/src/concepts/components/Concept.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Route } from "react-router-dom";
 import { Grid, Segment } from "semantic-ui-react";
+import StructureGrantCart from "@truedat/dd/components/StructureGrantCart";
 import { Comments, CommentsLoader } from "@truedat/core/components";
 import { CONCEPT_VERSION } from "@truedat/core/routes";
 import { useIntl } from "react-intl";
@@ -19,6 +20,7 @@ import ConceptTabPane from "./ConceptTabPane";
 import ConceptSummary from "./ConceptSummary";
 import ConceptTaxonomy from "./ConceptTaxonomy";
 import SharedToDomains from "./SharedToDomains";
+import ConceptContextProvider, { useConceptContext } from "./ConceptContext";
 
 const EventsLoader = React.lazy(() =>
   import("@truedat/audit/components/EventsLoader")
@@ -35,6 +37,9 @@ const ConceptRulesLoader = React.lazy(() =>
 export const Concept = ({ id, concept }) => {
   const { locales } = useLanguage();
   const { locale } = useIntl();
+  const {
+    conceptContext: { grantView },
+  } = useConceptContext();
 
   const defaultLang = _.flow(
     _.find({ is_default: true }),
@@ -128,11 +133,17 @@ export const Concept = ({ id, concept }) => {
           />
         </Grid.Column>
         <Grid.Column width={4}>
-          <ConceptSummary />
-          <ConceptRelationsSummary />
-          <ConceptTaxonomy />
-          <SharedToDomains />
-          <ConceptCompleteness />
+          {grantView ? (
+            <StructureGrantCart allowEmptyCart />
+          ) : (
+            <>
+              <ConceptSummary />
+              <ConceptRelationsSummary />
+              <ConceptTaxonomy />
+              <SharedToDomains />
+              <ConceptCompleteness />
+            </>
+          )}
         </Grid.Column>
       </Grid>
     </>
@@ -144,9 +155,20 @@ Concept.propTypes = {
   concept: PropTypes.object,
 };
 
+const ConceptWrapper = ({ id, concept }) => (
+  <ConceptContextProvider>
+    <Concept id={id} concept={concept} />
+  </ConceptContextProvider>
+);
+
+ConceptWrapper.propTypes = {
+  id: PropTypes.number.isRequired,
+  concept: PropTypes.object,
+};
+
 const mapStateToProps = ({ concept }) => ({
   id: _.prop("business_concept_id")(concept),
   concept: concept,
 });
 
-export default connect(mapStateToProps)(Concept);
+export default connect(mapStateToProps)(ConceptWrapper);

package/src/concepts/components/ConceptContext.js

@@ -0,0 +1,37 @@
+import React, { createContext, useState, useContext } from "react";
+import PropTypes from "prop-types";
+
+export const ConceptContext = createContext("conceptContext");
+
+const initialContext = {
+  grantView: false,
+};
+
+export const ConceptContextProvider = ({ children }) => {
+  const [context, setContext] = useState(initialContext);
+
+  const setProperty = (value) =>
+    setContext({
+      ...context,
+      ...value,
+    });
+
+  return (
+    <ConceptContext.Provider
+      value={{
+        conceptContext: context,
+        setConceptContextProperty: setProperty,
+      }}
+    >
+      {children}
+    </ConceptContext.Provider>
+  );
+};
+
+ConceptContextProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export const useConceptContext = () => useContext(ConceptContext);
+
+export default ConceptContextProvider;

package/src/concepts/components/__tests__/Concept.spec.js

@@ -3,6 +3,31 @@ import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import { LangProviderWrapper } from "@truedat/core/i18n";
 import { Concept } from "../Concept";
+import ConceptContextProvider, { useConceptContext } from "../ConceptContext";
+
+jest.mock("../ConceptContext", () => {
+  const originalModule = jest.requireActual("../ConceptContext");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useConceptContext: jest.fn(),
+  };
+});
+
+jest.mock("@truedat/core/hooks", () => {
+  const originalModule = jest.requireActual("@truedat/core/hooks");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useOperators: () => ({
+      data: {},
+      error: false,
+      loading: false,
+    }),
+  };
+});
 
 beforeAll(() => {
   jest.useFakeTimers();
@@ -116,9 +141,33 @@ describe("<Concept />", () => {
   };
 
   it("matches the latest snapshot", async () => {
+    useConceptContext.mockReturnValue({
+      conceptContext: { grantView: false },
+    });
+    const { container, queryByText } = render(
+      <LangProviderWrapper langs={["es", "en"]}>
+        <ConceptContextProvider>
+          <Concept {...props} />
+        </ConceptContextProvider>
+      </LangProviderWrapper>,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loading")).not.toBeInTheDocument();
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with grantView activated", async () => {
+    useConceptContext.mockReturnValue({
+      conceptContext: { grantView: true },
+    });
     const { container, queryByText } = render(
       <LangProviderWrapper langs={["es", "en"]}>
-        <Concept {...props} />
+        <ConceptContextProvider>
+          <Concept {...props} />
+        </ConceptContextProvider>
       </LangProviderWrapper>,
       renderOpts
     );

package/src/concepts/components/__tests__/ConceptContext.spec.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from "react";
+import { render } from "@truedat/test/render";
+import { renderHook, act } from "@testing-library/react-hooks";
+import ConceptContext, { useConceptContext } from "../ConceptContext";
+
+describe("<ConceptContext />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <ConceptContext>
+        <div>Hello world</div>
+      </ConceptContext>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should update context with new values when setProperty is called", () => {
+    const { result } = renderHook(() => useConceptContext(), {
+      wrapper: ({ children }) => <ConceptContext>{children}</ConceptContext>,
+    });
+
+    act(() => {
+      result.current.setConceptContextProperty({ newKey: "newValue" });
+    });
+
+    expect(result.current.conceptContext).toEqual(
+      expect.objectContaining({ newKey: "newValue" })
+    );
+  });
+
+  it("should provide context values to child components", () => {
+    const TestComponent = () => {
+      const { conceptContext, setConceptContextProperty } = useConceptContext();
+      useEffect(() => {
+        setConceptContextProperty({ testKey: "testValue" });
+      }, []);
+      return <div>{conceptContext.testKey}</div>;
+    };
+
+    const { getByText } = render(
+      <ConceptContext>
+        <TestComponent />
+      </ConceptContext>
+    );
+
+    expect(getByText("testValue")).toBeInTheDocument();
+  });
+});

package/src/concepts/components/__tests__/__snapshots__/Concept.spec.js.snap

@@ -307,3 +307,184 @@ exports[`<Concept /> matches the latest snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<Concept /> matches the latest snapshot with grantView activated 1`] = `
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      href="/concepts"
+    >
+      Business Glossary
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <a
+      class="section"
+      href="/concepts/pending"
+    >
+      Draft
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <span
+      class="active section"
+      style="cursor: default;"
+    >
+      Concept_en
+    </span>
+  </div>
+  <div
+    class="ui equal width grid"
+    style="margin-top: 0px;"
+  >
+    <div
+      class="twelve wide column"
+    >
+      <div
+        class="ui segment"
+      >
+        <div
+          class="ui grid"
+        >
+          <div
+            class="row"
+          >
+            <div
+              class="eight wide column"
+            >
+              <h2
+                class="ui header"
+              >
+                <i
+                  aria-hidden="true"
+                  class="book circular icon"
+                />
+                <div
+                  class="content"
+                >
+                  Concept_es
+                  <div
+                    class="sub header"
+                  >
+                    templates.undefined
+                  </div>
+                </div>
+              </h2>
+            </div>
+            <div
+              class="right aligned eight wide column"
+            >
+              <button
+                class="ui basic icon button button icon group-actions"
+                data-tooltip="Sharing"
+              >
+                <i
+                  aria-hidden="true"
+                  class="share alternate icon"
+                />
+              </button>
+              <button
+                class="ui basic icon button button icon group-actions structureButton"
+              >
+                <i
+                  aria-hidden="true"
+                  class="eye icon"
+                />
+              </button>
+            </div>
+          </div>
+          <div
+            class="row"
+          >
+            <div
+              class="eight wide column"
+            >
+              <div
+                class="ui left floated buttons"
+              >
+                <button
+                  class="ui mini active button"
+                >
+                  Spanish
+                </button>
+                <button
+                  class="ui mini button"
+                >
+                  English
+                </button>
+              </div>
+            </div>
+            <div
+              class="right aligned eight wide column"
+            />
+          </div>
+        </div>
+        <div
+          class="ui pointing secondary top attached tabular menu"
+        >
+          <a
+            class="item"
+            href="/concepts/1/versions/1"
+          >
+            Concept
+          </a>
+          <a
+            class="item"
+            href="/concepts/1/versions/1/links/structures"
+          >
+            Linkage
+          </a>
+          <a
+            class="item"
+            href="/concepts/1/versions/1/rules"
+          >
+            Quality Rules
+          </a>
+          <a
+            class="item"
+            href="/concepts/1/versions/1/archive"
+          >
+            History
+          </a>
+          <a
+            class="item"
+            href="/concepts/1/versions/1/events"
+          >
+            Audit
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      class="four wide column"
+    >
+      <div
+        class="ui segment structure-grant-cart"
+      >
+        <div
+          class="ui header"
+          title="structure.grant.cart"
+        >
+          structure.grant.cart
+        </div>
+        <div
+          class="ui divider"
+        />
+        <div
+          class="list"
+        />
+        <p>
+          structure.grant.cart.empty
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/concepts/components/__tests__/__snapshots__/ConceptContext.spec.js.snap

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

package/src/concepts/reducers/concept.js

@@ -32,6 +32,7 @@ const pickFields = _.pick([
   "rule_count",
   "concept_count",
   "i18n_content",
+  "actions",
 ]);
 
 export const concept = (state = initialState, { type, payload, meta }) => {

package/src/concepts/relations/components/ConceptLinkActions.js

@@ -1,29 +1,55 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
+import { PropTypes } from "prop-types";
 import { connect } from "react-redux";
-import { Icon } from "semantic-ui-react";
+import { Button, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { ConfirmModal } from "@truedat/core/components";
 import { conceptLinkAction } from "../routines";
 
-export const DeleteLink = ({ conceptLinkAction, action, loading }) =>
-  loading ? (
+export const DeleteLink = ({ conceptLinkAction, action, loading }) => {
+  const [openModal, setOpenModal] = useState(false);
+
+  return loading ? (
     <Icon loading name="circle notch" color="red" />
   ) : (
-    <ConfirmModal
-      icon="trash"
-      trigger={<Icon name="trash alternate outline" color="red" />}
-      header={
-        <FormattedMessage id="relations.actions.data_field.delete.confirmation.header" />
-      }
-      content={
-        <FormattedMessage id="relations.actions.data_field.delete.confirmation.content" />
-      }
-      onConfirm={() => conceptLinkAction(action)}
-      onOpen={(e) => e.stopPropagation()}
-      onClose={(e) => e.stopPropagation()}
-    />
+    <>
+      <ConfirmModal
+        open={openModal}
+        trigger={
+          <Button
+            basic
+            color="red"
+            icon
+            onClick={() => setOpenModal(true)}
+            size="mini"
+          >
+            <Icon name="trash alternate outline" color="red" />
+          </Button>
+        }
+        header={
+          <FormattedMessage id="relations.actions.data_field.delete.confirmation.header" />
+        }
+        content={
+          <FormattedMessage id="relations.actions.data_field.delete.confirmation.content" />
+        }
+        onConfirm={() => conceptLinkAction(action)}
+        onOpen={() => {
+          setOpenModal(true);
+        }}
+        onClose={() => {
+          setOpenModal(false);
+        }}
+      />
+    </>
   );
+};
+
+DeleteLink.propTypes = {
+  conceptLinkAction: PropTypes.func,
+  action: PropTypes.object,
+  loading: PropTypes.bool,
+};
 
 const mapStateToProps = ({ conceptLinkActionLoading }, ownProps) => ({
   loading: _.pathEq("action.href")(conceptLinkActionLoading)(ownProps),
@@ -36,4 +62,8 @@ export const DeleteLinkConnected = connect(mapStateToProps, {
 export const LinkActions = ({ delete: deleteAction }) =>
   deleteAction ? <DeleteLinkConnected action={deleteAction} /> : null;
 
+LinkActions.propTypes = {
+  delete: PropTypes.object,
+};
+
 export default LinkActions;

package/src/concepts/relations/components/ConceptLinksActions.js

@@ -1,37 +1,64 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { Button } from "semantic-ui-react";
 import { Link } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
+import { Checkbox } from "semantic-ui-react";
 
-export const ConceptLinksActions = ({ createLinkUrl }) =>
-  createLinkUrl ? (
-    <Button
-      primary
-      floated="right"
-      as={Link}
-      to={createLinkUrl}
-      content={<FormattedMessage id="links.actions.create" />}
-    />
+import ConceptLinkstRequestGrantButton from "./ConceptLinkstRequestGrantButton";
+
+export const ConceptLinksActions = ({
+  canManageGrantRequests,
+  createLinkUrl,
+  grantView,
+  onGrantViewChange,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return createLinkUrl ? (
+    <div style={{ float: "right" }}>
+      {canManageGrantRequests ? (
+        <React.Fragment>
+          <Checkbox
+            id="execute_checkbox"
+            className="bgOrange"
+            toggle
+            checked={grantView}
+            onChange={() => onGrantViewChange(!grantView)}
+            style={{ top: "6px", marginRight: "7.5px" }}
+          />
+          <ConceptLinkstRequestGrantButton disabled={!grantView} />
+        </React.Fragment>
+      ) : null}
+      <Button
+        primary
+        as={Link}
+        to={createLinkUrl}
+        content={formatMessage({ id: "links.actions.create" })}
+      />
+    </div>
   ) : null;
+};
 
 ConceptLinksActions.propTypes = {
-  createLinkUrl: PropTypes.string
+  canManageGrantRequests: PropTypes.bool,
+  createLinkUrl: PropTypes.string,
+  grantView: PropTypes.bool,
+  onGrantViewChange: PropTypes.func,
 };
 
-const mapStateToProps = ({
-  conceptActions,
-  conceptActionLoading,
-  concept
-}) => ({
-  createLinkUrl:
-    _.has("create_structure_link")(conceptActions) && _.has("id")(concept)
-      ? linkTo.CONCEPT_LINKS_STRUCTURES_NEW(concept)
-      : null,
-  conceptActionLoading
-});
+const mapStateToProps = ({ conceptActions, conceptActionLoading, concept }) => {
+  return {
+    createLinkUrl:
+      _.has("create_structure_link")(conceptActions) && _.has("id")(concept)
+        ? linkTo.CONCEPT_LINKS_STRUCTURES_NEW(concept)
+        : null,
+    conceptActionLoading,
+    canManageGrantRequests: concept.actions?.manage_grant_requests,
+  };
+};
 
 export default connect(mapStateToProps)(ConceptLinksActions);

package/src/concepts/relations/components/ConceptLinkstRequestGrantButton.js

@@ -0,0 +1,65 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { Button } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { addGrantRequestToCart } from "@truedat/dd/routines";
+
+export const ConceptLinkstRequestGrantButton = ({
+  disabled,
+  addGrantRequestToCart,
+  requested,
+}) => {
+  const { formatMessage } = useIntl();
+  const { searchData } = useSearchContext();
+  const structures = searchData?.data;
+
+  const requestAllStructures = () => {
+    _.forEach((structure) => {
+      const authorizedRequest = _.pathOr(
+        false,
+        "request_grant"
+      )(structure.user_permissions);
+
+      const isRequested = _.flow(
+        _.find({ id: `${structure.id}` }),
+        _.negate(_.isUndefined)
+      )(requested);
+
+      const granted = _.has("my_grant_request")(structure);
+
+      if (authorizedRequest && !isRequested && !granted)
+        addGrantRequestToCart({
+          ...structure,
+          id: `${structure.id}`,
+        });
+    })(structures);
+  };
+
+  return (
+    <Button
+      secondary
+      icon="shield"
+      title={formatMessage({ id: "links.actions.grant_request.tooltip" })}
+      disabled={disabled}
+      content={formatMessage({ id: "links.actions.grant_request" })}
+      onClick={requestAllStructures}
+    />
+  );
+};
+
+ConceptLinkstRequestGrantButton.propTypes = {
+  disabled: PropTypes.bool,
+  addGrantRequestToCart: PropTypes.func,
+  requested: PropTypes.arrayOf(PropTypes.object),
+};
+
+const mapStateToProps = ({ grantRequestsCart }) => ({
+  requested: _.pathOr([], "structures")(grantRequestsCart),
+});
+
+export default connect(mapStateToProps, { addGrantRequestToCart })(
+  ConceptLinkstRequestGrantButton
+);

package/src/concepts/relations/components/ConceptStructureLinks.js

@@ -2,26 +2,109 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Segment } from "semantic-ui-react";
+import { Segment, Grid } from "semantic-ui-react";
+import {
+  useDataStructureFilters,
+  useDataStructureSearch,
+} from "@truedat/dd/hooks/useStructures";
+import translations from "@truedat/dd/utils/structureCustomTranslations";
+import StructuresSearchResults from "@truedat/dd/components/StructuresSearchResults";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
 import { getConceptLinks } from "../selectors";
+import { useConceptContext } from "../../components/ConceptContext";
 import ConceptLinksActions from "./ConceptLinksActions";
 
 const LinksPane = React.lazy(() => import("@truedat/lm/components/LinksPane"));
 
-export const ConceptStructureLinksPane = ({ groups, visible }) => {
-  const LinksActions = visible ? <ConceptLinksActions /> : null;
+const ConceptStructureLinksSegment = ({ groups, visible }) => {
+  const { conceptContext, setConceptContextProperty } = useConceptContext();
+  const { searchData, loading } = useSearchContext();
+  const structures = searchData?.data;
+
+  const { grantView } = conceptContext;
+
+  const onGrantViewChange = (grantViewNewState) =>
+    setConceptContextProperty({ grantView: grantViewNewState });
+
+  const LinksActions = visible ? (
+    <ConceptLinksActions
+      grantView={grantView}
+      onGrantViewChange={onGrantViewChange}
+    />
+  ) : null;
+
   return (
     <Segment attached="bottom">
-      <LinksPane
-        groups={groups}
-        sourceType="concept"
-        targetType="structure"
-        linksActions={LinksActions}
-      />
+      {grantView ? (
+        <Grid>
+          <Grid.Row>
+            <Grid.Column>{LinksActions}</Grid.Column>
+          </Grid.Row>
+          <Grid.Row>
+            <Grid.Column>
+              <StructuresSearchResults
+                structures={structures}
+                loading={loading}
+                grantable
+              />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      ) : (
+        <LinksPane
+          groups={groups}
+          sourceType="concept"
+          targetType="structure"
+          linksActions={LinksActions}
+        />
+      )}
     </Segment>
   );
 };
 
+ConceptStructureLinksSegment.propTypes = {
+  groups: PropTypes.array,
+  visible: PropTypes.bool,
+};
+
+export const ConceptStructureLinksPane = ({ groups, visible }) => {
+  const structures_ids = _.flow(
+    _.flatMap(([_columns, [_tag, links]]) => links),
+    _.map(({ resource_id }) => parseInt(resource_id))
+  )(groups);
+
+  const enrichSearchPayload = {
+    my_grant_requests: true,
+    with_data_fields: false,
+  };
+
+  const searchProps = {
+    initialSortColumn: "name.raw",
+    initialSortDirection: "ascending",
+    useSearch: useDataStructureSearch,
+    useFilters: useDataStructureFilters,
+    pageSize: 20,
+    userFiltersType: "user_search_filters",
+    userFilterScope: "data_structure",
+    translations,
+    filtersGroup: [],
+    defaultFilters: {
+      exists: { field: "classes._grantable" },
+      ids: structures_ids,
+    },
+    enrichSearchPayload,
+  };
+
+  return (
+    <SearchContextProvider {...searchProps}>
+      <ConceptStructureLinksSegment groups={groups} visible={visible} />
+    </SearchContextProvider>
+  );
+};
+
 ConceptStructureLinksPane.propTypes = {
   groups: PropTypes.array,
   visible: PropTypes.bool,

package/src/concepts/relations/components/__tests__/ConceptLinksActions.spec.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import ConceptLinksActions from "../ConceptLinksActions";
+
+jest.mock("@truedat/core/search/SearchContext", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/search/SearchContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchContext: jest.fn(),
+  };
+});
+
+const renderOpts = {
+  state: {
+    conceptActions: {
+      create_structure_link: true,
+    },
+    concept: {
+      id: 1,
+      business_concept_id: 11,
+    },
+  },
+};
+
+describe("<ConceptLinksActions />", () => {
+  it("matches the latest snapshot with Grant Requests permission", () => {
+    useSearchContext.mockReturnValue({ searchData: [] });
+
+    const grRenderOpts = {
+      ...renderOpts,
+      state: {
+        ...renderOpts.state,
+        concept: {
+          ...renderOpts.state.concept,
+          actions: {
+            manage_grant_requests: {},
+          },
+        },
+      },
+    };
+
+    const { container } = render(
+      <ConceptLinksActions onGrantViewChange={jest.fn()} />,
+      grRenderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot without Grant Requests permission", () => {
+    useSearchContext.mockReturnValue({ searchData: [] });
+
+    const { container } = render(
+      <ConceptLinksActions onGrantViewChange={jest.fn()} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/concepts/relations/components/__tests__/ConceptLinkstRequestGrantButton.spec.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import ConceptLinkstRequestGrantButton from "../ConceptLinkstRequestGrantButton";
+
+jest.mock("@truedat/core/search/SearchContext", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/search/SearchContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchContext: jest.fn(),
+  };
+});
+
+const renderOpts = {
+  state: {
+    grantRequestsCart: {
+      structures: [],
+    },
+  },
+};
+
+describe("<ConceptLinkstRequestGrantButton />", () => {
+  it("matches the latest snapshot", () => {
+    useSearchContext.mockReturnValue({ searchData: [] });
+
+    const { container } = render(
+      <ConceptLinkstRequestGrantButton onGrantViewChange={jest.fn()} />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/concepts/relations/components/__tests__/ConceptStructureLinks.spec.js

@@ -1,15 +1,91 @@
 import _ from "lodash/fp";
-import React from "react";
-import { shallow } from "enzyme";
+import React, { Suspense } from "react";
+import { render } from "@truedat/test/render";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { ConceptStructureLinksPane } from "../ConceptStructureLinks";
 
+import { useConceptContext } from "../../../components/ConceptContext";
+
+jest.mock("../../../components/ConceptContext", () => {
+  const originalModule = jest.requireActual(
+    "../../../components/ConceptContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useConceptContext: jest.fn(),
+  };
+});
+
+jest.mock("@truedat/core/search/SearchContext", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/search/SearchContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchContext: jest.fn(),
+  };
+});
+
+beforeAll(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(new Date("2025-01-01T10:00:00Z"));
+});
+
+afterAll(() => {
+  jest.useRealTimers();
+});
+
 describe("<ConceptStructureLinksPane />", () => {
   const props = {
-    groups: [[[{ name: "name" }], ["group", [{ name: "foo" }]]]]
+    groups: [[[{ name: "name" }], ["group", [{ name: "foo" }]]]],
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ConceptStructureLinksPane {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    useConceptContext.mockReturnValue({
+      conceptContext: { grantView: false },
+    });
+    useSearchContext.mockReturnValue({
+      searchData: [],
+    });
+
+    const { container, findByText } = render(
+      <Suspense fallback={null}>
+        <ConceptStructureLinksPane {...props} />
+      </Suspense>
+    );
+
+    await findByText("Links to Structures");
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with grantView", async () => {
+    useConceptContext.mockReturnValue({
+      conceptContext: { grantView: true },
+    });
+    useSearchContext.mockReturnValue({
+      searchData: {
+        data: [
+          {
+            id: 1,
+            name: "test structure",
+            type: "Data Base",
+            group: "test",
+            system: { name: "System_Test" },
+            path: ["path", "to", "structure"],
+            updated_at: "2024-02-26 10:30:29.909476Z",
+          },
+        ],
+      },
+      loading: false,
+    });
+
+    const { container } = render(<ConceptStructureLinksPane {...props} />);
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptLinksActions.spec.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptLinksActions /> matches the latest snapshot with Grant Requests permission 1`] = `
+<div>
+  <div
+    style="float: right;"
+  >
+    <div
+      class="ui fitted toggle checkbox bgOrange"
+      style="top: 6px; margin-right: 7.5px;"
+    >
+      <input
+        class="hidden"
+        id="execute_checkbox"
+        readonly=""
+        tabindex="0"
+        type="checkbox"
+        value=""
+      />
+      <label
+        for="execute_checkbox"
+      />
+    </div>
+    <button
+      class="ui secondary disabled button"
+      disabled=""
+      tabindex="-1"
+      title="links.actions.grant_request.tooltip"
+    >
+      <i
+        aria-hidden="true"
+        class="shield icon"
+      />
+      links.actions.grant_request
+    </button>
+    <a
+      class="ui primary button"
+      href="/concepts/11/versions/1/links/structures/new"
+      role="button"
+    >
+      Add Link
+    </a>
+  </div>
+</div>
+`;
+
+exports[`<ConceptLinksActions /> matches the latest snapshot without Grant Requests permission 1`] = `
+<div>
+  <div
+    style="float: right;"
+  >
+    <a
+      class="ui primary button"
+      href="/concepts/11/versions/1/links/structures/new"
+      role="button"
+    >
+      Add Link
+    </a>
+  </div>
+</div>
+`;

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptLinkstRequestGrantButton.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptLinkstRequestGrantButton /> matches the latest snapshot 1`] = `
+<div>
+  <button
+    class="ui secondary button"
+    title="links.actions.grant_request.tooltip"
+  >
+    <i
+      aria-hidden="true"
+      class="shield icon"
+    />
+    links.actions.grant_request
+  </button>
+</div>
+`;

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptStructureLinks.spec.js.snap

@@ -1,32 +1,197 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConceptStructureLinksPane /> matches the latest snapshot 1`] = `
-<Segment
-  attached="bottom"
->
-  <lazy
-    groups={
-      [
-        [
-          [
-            {
-              "name": "name",
-            },
-          ],
-          [
-            "group",
-            [
-              {
-                "name": "foo",
-              },
-            ],
-          ],
-        ],
-      ]
-    }
-    linksActions={null}
-    sourceType="concept"
-    targetType="structure"
-  />
-</Segment>
+<div>
+  <div
+    class="ui bottom attached segment"
+    style=""
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="column"
+        />
+      </div>
+      <div
+        class="row"
+      >
+        <div
+          class="column"
+        >
+          <h3
+            class="ui header"
+          >
+            Links to Structures
+          </h3>
+          <table
+            class="ui table"
+          >
+            <thead
+              class=""
+            >
+              <tr
+                class=""
+              >
+                <th
+                  class=""
+                >
+                  Structure
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class=""
+            >
+              <tr
+                class=""
+              >
+                <td
+                  class=""
+                >
+                  foo
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ConceptStructureLinksPane /> matches the latest snapshot with grantView 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="column"
+        />
+      </div>
+      <div
+        class="row"
+      >
+        <div
+          class="column"
+        >
+          <div
+            class="dimmable structure-table-overflow"
+          >
+            <div
+              class="ui label structures-label-results"
+            >
+              NaN structures found
+            </div>
+            <table
+              class="ui sortable table"
+            >
+              <thead
+                class=""
+              >
+                <tr
+                  class=""
+                >
+                  <th
+                    class="two wide"
+                  >
+                    Structure
+                  </th>
+                  <th
+                    class="one wide disabled"
+                  >
+                    Type
+                  </th>
+                  <th
+                    class="one wide"
+                  >
+                    System
+                  </th>
+                  <th
+                    class="one wide disabled"
+                  >
+                    Relation Type
+                  </th>
+                  <th
+                    class="one wide disabled"
+                  >
+                    Group
+                  </th>
+                  <th
+                    class="one wide"
+                  >
+                    structure.last_change_at
+                  </th>
+                  <th
+                    class="center aligned"
+                  >
+                    Request grant
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class=""
+              >
+                <tr
+                  class=""
+                >
+                  <td
+                    class="structure-cell-overflow"
+                  >
+                    <a
+                      href="/structures/1"
+                      title="test structure"
+                    >
+                      test structure
+                    </a>
+                  </td>
+                  <td
+                    class=""
+                  >
+                    Data Base
+                  </td>
+                  <td
+                    class=""
+                  >
+                    System_Test
+                  </td>
+                  <td
+                    class=""
+                  />
+                  <td
+                    class=""
+                  >
+                    test
+                  </td>
+                  <td
+                    class=""
+                  >
+                    <time
+                      datetime="1735725600100"
+                    >
+                      2025-01-01 10:00
+                    </time>
+                  </td>
+                  <td
+                    class="collapsing center aligned one wide"
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;