@truedat/dd 5.5.2 → 5.6.1

package/src/components/StructuresLoader.js

@@ -8,6 +8,7 @@ export const StructuresLoader = ({
   clearStructures,
   fetchStructures,
   payload,
+  withGrantRequests,
 }) => {
   useEffect(() => {
     return () => {
@@ -15,8 +16,8 @@ export const StructuresLoader = ({
     };
   }, [clearStructures]);
   useEffect(() => {
-    fetchStructures(payload);
-  }, [payload, fetchStructures]);
+    fetchStructures({ ...payload, my_grant_requests: !!withGrantRequests });
+  }, [payload, fetchStructures, withGrantRequests]);
   return null;
 };
 
@@ -24,6 +25,7 @@ StructuresLoader.propTypes = {
   clearStructures: PropTypes.func,
   fetchStructures: PropTypes.func,
   payload: PropTypes.object,
+  withGrantRequests: PropTypes.bool,
 };
 
 const makeMapStateToProps = () => {

package/src/components/StructuresSearch.js

@@ -13,6 +13,7 @@ const StructuresSearch = ({
   toggleStructureDateFilter,
 }) => {
   const { formatMessage } = useIntl();
+
   return (
     <Input
       value={query}

package/src/components/StructuresSearchResults.js

@@ -10,6 +10,7 @@ import StructuresLabelResults from "./StructuresLabelResults";
 
 export const StructuresSearchResults = ({
   columns,
+  grantable,
   size,
   onSelect,
   selectedStructure,
@@ -27,6 +28,7 @@ export const StructuresSearchResults = ({
         <StructuresLabelResults />
         <StructuresTable
           columns={columns}
+          grantable={grantable}
           size={size}
           selectedStructure={selectedStructure}
           structures={structures}
@@ -54,6 +56,7 @@ export const StructuresSearchResults = ({
 
 StructuresSearchResults.propTypes = {
   columns: PropTypes.array,
+  grantable: PropTypes.bool,
   size: PropTypes.string,
   onSelect: PropTypes.func,
   structures: PropTypes.array,

package/src/components/StructuresTable.js

@@ -44,6 +44,7 @@ export class StructuresTable extends React.Component {
   render() {
     const {
       columns,
+      grantable,
       onStructureSelected,
       selectedStructure,
       size,
@@ -65,31 +66,41 @@ export class StructuresTable extends React.Component {
             ? structures
             : [selectedStructure, ...structures]
           : structures;
-      const headerRow = columns.map((column, key) => (
-        <Table.HeaderCell
-          key={key}
-          content={
-            <FormattedMessage
-              id={`structure.${column.header || column.name}`}
+      const headerRow = (
+        <Table.Row>
+          {columns.map((column, key) => (
+            <Table.HeaderCell
+              key={key}
+              content={
+                <FormattedMessage
+                  id={`structure.${column.header || column.name}`}
+                />
+              }
+              sorted={
+                _.path("sort.name")(column) === sortedColumn ? direction : null
+              }
+              className={_.path("sort.name")(column) ? "" : "disabled"}
+              onClick={() =>
+                sortColumn(
+                  column,
+                  sortStructures,
+                  this.setDirection,
+                  this.setColumn,
+                  direction,
+                  sortedColumn
+                )
+              }
+              width={_.propOr(1, "width")(column)}
             />
-          }
-          sorted={
-            _.path("sort.name")(column) === sortedColumn ? direction : null
-          }
-          className={_.path("sort.name")(column) ? "" : "disabled"}
-          onClick={() =>
-            sortColumn(
-              column,
-              sortStructures,
-              this.setDirection,
-              this.setColumn,
-              direction,
-              sortedColumn
-            )
-          }
-          width={_.propOr(1, "width")(column)}
-        />
-      ));
+          ))}
+          {grantable && (
+            <Table.HeaderCell textAlign="center">
+              Request grant
+            </Table.HeaderCell>
+          )}
+        </Table.Row>
+      );
+
       const renderBodyRow = (s, i) => (
         <StructureRow
           key={i}
@@ -98,6 +109,7 @@ export class StructuresTable extends React.Component {
           active={selectedStructure && _.propEq("id", s.id)(selectedStructure)}
           positive={isPositive(links, s.id)}
           onClick={onStructureSelected}
+          grantable={grantable}
         />
       );
       return (
@@ -115,6 +127,7 @@ export class StructuresTable extends React.Component {
 }
 
 StructuresTable.propTypes = {
+  grantable: PropTypes.bool,
   columns: PropTypes.array.isRequired,
   onStructureSelected: PropTypes.func,
   selectedStructure: PropTypes.object,

package/src/components/StructuresView.js

@@ -55,6 +55,7 @@ const StructuresViewContent = ({
 
 StructuresViewContent.propTypes = {
   actions: PropTypes.object,
+  grantable: PropTypes.bool,
   structures: PropTypes.array,
   loading: PropTypes.bool,
   hasFilterApplied: PropTypes.bool,
@@ -91,15 +92,13 @@ const selectedFilters = ({ structureActiveFilters, structureDateFilter }) =>
 
 const isEmptyPath = (state, path) => _.flow(_.path(path), _.isEmpty)(state);
 
-const mapStateToProps = (state) => {
-  return {
-    structures: structureRowsSelector(state),
-    actions: state.structuresActions,
-    loading: state.structuresLoading,
-    systemsLoading: state.systemsLoading,
-    hasFilterApplied:
-      !isEmptyPath(state, "structureQuery.query") || selectedFilters(state),
-  };
-};
+const mapStateToProps = (state) => ({
+  structures: structureRowsSelector(state),
+  actions: state.structuresActions,
+  loading: state.structuresLoading,
+  systemsLoading: state.systemsLoading,
+  hasFilterApplied:
+    !isEmptyPath(state, "structureQuery.query") || selectedFilters(state),
+});
 
 export default connect(mapStateToProps)(StructuresView);

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

@@ -1,4 +1,3 @@
-import _ from "lodash/fp";
 import React from "react";
 import { fireEvent } from "@testing-library/react";
 import { render } from "@truedat/test/render";
@@ -6,12 +5,13 @@ import userEvent from "@testing-library/user-event";
 import StructureGrantDropdown from "../StructureGrantDropdown";
 import en from "../../messages/en";
 
-const renderOptsBuilder = (grant, structureGrantPopup) => ({
-  state: {
-    structure: { grant },
-    structureGrantPopup,
-  },
-  messages: { en },
+const renderOpts = { messages: { en } };
+
+const propsBuilder = (grant, structureGrantPopup, requested) => ({
+  structure: { grant },
+  grant,
+  structureGrantPopup,
+  requested,
 });
 
 const mockHistory = {
@@ -25,12 +25,17 @@ jest.mock("react-router-dom", () => ({
 
 describe("<StructureGrantDropdown />", () => {
   it("matches the latest snapshot for pendingRequest state", () => {
+    const status = "pending";
     const grantRequest = {
-      status: { status: "pending" },
+      status: { status },
+    };
+    const props = {
+      ...propsBuilder({}),
+      grantRequest,
+      grantRequestStatus: status,
     };
-    const renderOpts = renderOptsBuilder({});
     const { container } = render(
-      <StructureGrantDropdown grantRequest={grantRequest} />,
+      <StructureGrantDropdown {...props} />,
       renderOpts
     );
 
@@ -38,13 +43,18 @@ describe("<StructureGrantDropdown />", () => {
   });
 
   it("matches the latest snapshot for pendingRequest state with modification", () => {
+    const status = "pending";
     const grantRequest = {
       group: { grant: { id: 1 } },
-      status: { status: "pending" },
+      status: { status },
+    };
+    const props = {
+      ...propsBuilder({}),
+      grantRequest,
+      grantRequestStatus: status,
     };
-    const renderOpts = renderOptsBuilder({});
     const { container } = render(
-      <StructureGrantDropdown grantRequest={grantRequest} />,
+      <StructureGrantDropdown {...props} />,
       renderOpts
     );
 
@@ -52,12 +62,17 @@ describe("<StructureGrantDropdown />", () => {
   });
 
   it("matches the latest snapshot for processingRequest state", () => {
+    const status = "processing";
     const grantRequest = {
-      status: { status: "processing" },
+      status: { status },
+    };
+    const props = {
+      ...propsBuilder({}),
+      grantRequest,
+      grantRequestStatus: status,
     };
-    const renderOpts = renderOptsBuilder({});
     const { container } = render(
-      <StructureGrantDropdown grantRequest={grantRequest} />,
+      <StructureGrantDropdown {...props} />,
       renderOpts
     );
 
@@ -65,13 +80,18 @@ describe("<StructureGrantDropdown />", () => {
   });
 
   it("matches the latest snapshot for processingRequest state with modification", () => {
+    const status = "processing";
     const grantRequest = {
       group: { grant: { id: 1 } },
-      status: { status: "processing" },
+      status: { status },
+    };
+    const props = {
+      ...propsBuilder({}),
+      grantRequest,
+      grantRequestStatus: status,
     };
-    const renderOpts = renderOptsBuilder({});
     const { container } = render(
-      <StructureGrantDropdown grantRequest={grantRequest} />,
+      <StructureGrantDropdown {...props} />,
       renderOpts
     );
 
@@ -80,9 +100,13 @@ describe("<StructureGrantDropdown />", () => {
 
   it("matches the latest snapshot for pendingRemovalGrant state", () => {
     const grantRequest = null;
-    const renderOpts = renderOptsBuilder({ pending_removal: true });
+    const props = {
+      ...propsBuilder({ pending_removal: true }),
+      grantRequest,
+      grantRequestStatus: null,
+    };
     const { container } = render(
-      <StructureGrantDropdown grantRequest={grantRequest} />,
+      <StructureGrantDropdown {...props} />,
       renderOpts
     );
 
@@ -91,9 +115,13 @@ describe("<StructureGrantDropdown />", () => {
 
   it("matches the latest snapshot for activeGrant state", () => {
     const grantRequest = null;
-    const renderOpts = renderOptsBuilder({ pending_removal: false });
+    const props = {
+      ...propsBuilder({ pending_removal: false }),
+      grantRequest,
+      grantRequestStatus: null,
+    };
     const { container } = render(
-      <StructureGrantDropdown grantRequest={grantRequest} />,
+      <StructureGrantDropdown {...props} />,
       renderOpts
     );
 
@@ -113,9 +141,13 @@ describe("<StructureGrantDropdown />", () => {
         foo: "bar",
       },
     };
-    const renderOpts = renderOptsBuilder(grant, structureGrantPopup);
-    const { findByRole, findByText, debug } = render(
-      <StructureGrantDropdown grantRequest={grantRequest} />,
+    const props = {
+      ...propsBuilder(grant, structureGrantPopup),
+      grantRequest,
+      grantRequestStatus: null,
+    };
+    const { findByRole, findByText } = render(
+      <StructureGrantDropdown {...props} />,
       renderOpts
     );
 
@@ -128,14 +160,19 @@ describe("<StructureGrantDropdown />", () => {
   });
 
   it("when clicking on viewRequest action, will redirect to grantResquest page", async () => {
+    const status = "pending";
     const grantRequest = {
       id: 8,
-      status: { status: "pending" },
+      status: { status },
+    };
+    const props = {
+      ...propsBuilder({}),
+      grantRequest,
+      grantRequestStatus: status,
     };
-    const renderOpts = renderOptsBuilder({});
 
     const { findByText } = render(
-      <StructureGrantDropdown grantRequest={grantRequest} />,
+      <StructureGrantDropdown {...props} />,
       renderOpts
     );
 

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

@@ -0,0 +1,77 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import StructureGrantListButton from "../StructureGrantListButton";
+
+const structure = {
+  id: 151596,
+  my_grants: [],
+  my_grant_request: null,
+  external_id: "structure_ext_id",
+  data_fields: [
+    {
+      external_id: "child_ext_id",
+      id: 151597,
+    },
+  ],
+  user_permissions: {
+    create_foreign_grant_request: true,
+    request_grant: true,
+  },
+};
+
+const renderOpts = {
+  state: {
+    structureGrantPopup: ["structureGrantPopup"],
+    previousStructureQuery: { foo: "bar" },
+    grantRequestsCart: {
+      structures: [{ id: 1 }],
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<StructureGrantListButton />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <StructureGrantListButton structure={structure} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for requested structure", () => {
+    const { container } = render(
+      <StructureGrantListButton structure={{ ...structure, id: 1 }} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with grant", () => {
+    const { container } = render(
+      <StructureGrantListButton
+        structure={{
+          ...structure,
+          my_grants: [
+            {
+              id: 2,
+              user_id: 564,
+            },
+          ],
+        }}
+      />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with grant request", () => {
+    const { container } = render(
+      <StructureGrantListButton
+        structure={{ ...structure, my_grant_request: { status: "pending" } }}
+      />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/__tests__/{StructureGrantButton.spec.js → StructureGrantSummaryButton.spec.js}

@@ -1,9 +1,8 @@
-import _ from "lodash/fp";
 import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { LATEST_GRANT_REQUEST_QUERY } from "../../api/queries";
-import StructureGrantButton from "../StructureGrantButton";
+import StructureGrantSummaryButton from "../StructureGrantSummaryButton";
 import en from "../../messages/en";
 
 const latestGrantMockBuilder = (status) => ({
@@ -42,14 +41,15 @@ const expectToRenderRequestButton = async (container, getByRole) => {
   expect(container.getElementsByClassName("dropdown")).toHaveLength(0);
   expect(await getByRole("button")).toBeTruthy();
 };
-describe("<StructureGrantButton />", () => {
+describe("<StructureGrantSummaryButton />", () => {
   it("matches snapshot for active grant and inactive grantRequest", async () => {
-    const renderOpts = renderOptsBuilder("processed", {});
+    const renderOpts = renderOptsBuilder("processed", { id: 1 });
 
     const { container, queryByText } = render(
-      <StructureGrantButton />,
+      <StructureGrantSummaryButton />,
       renderOpts
     );
+
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     await waitFor(() =>
       expect(queryByText(/loading/i)).not.toBeInTheDocument()
@@ -63,7 +63,7 @@ describe("<StructureGrantButton />", () => {
     const renderOpts = renderOptsBuilder("pending", {});
 
     const { container, queryByText } = render(
-      <StructureGrantButton />,
+      <StructureGrantSummaryButton />,
       renderOpts
     );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
@@ -79,7 +79,7 @@ describe("<StructureGrantButton />", () => {
     const renderOpts = renderOptsBuilder("approved", null);
 
     const { container, queryByText } = render(
-      <StructureGrantButton />,
+      <StructureGrantSummaryButton />,
       renderOpts
     );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
@@ -95,7 +95,7 @@ describe("<StructureGrantButton />", () => {
     const renderOpts = renderOptsBuilder("cancelled", null);
 
     const { container, getByRole, queryByText } = render(
-      <StructureGrantButton />,
+      <StructureGrantSummaryButton />,
       renderOpts
     );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
@@ -111,7 +111,7 @@ describe("<StructureGrantButton />", () => {
     const renderOpts = renderOptsBuilder(null, null);
 
     const { container, getByRole, queryByText } = render(
-      <StructureGrantButton />,
+      <StructureGrantSummaryButton />,
       renderOpts
     );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());

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

@@ -11,13 +11,13 @@ describe("<StructureRow />", () => {
       name: "s1",
       description: "dd",
       group: "gp",
-      system: "sys"
+      system: "sys",
     };
     const columns = [
       { name: "name" },
       { name: "domain", fieldSelector: _.path("domain.name") },
       { name: "system" },
-      { name: "group" }
+      { name: "group" },
     ];
     const props = { structure, columns };
     const wrapper = shallow(<StructureRow {...props} />);
@@ -31,18 +31,18 @@ describe("<StructureRow />", () => {
       name: "s1",
       description: "dd",
       group: "gp",
-      system: "sys"
+      system: "sys",
     };
     const columns = [
       { name: "name" },
       { name: "domain", fieldSelector: _.path("domain.name") },
       { name: "system" },
-      { name: "group" }
+      { name: "group" },
     ];
     const onClick = jest.fn();
     const props = { structure, columns, onClick };
     const wrapper = shallow(<StructureRow {...props} />);
-    wrapper.find("TableRow").simulate("click");
+    wrapper.find("TableCell").first().simulate("click");
     expect(onClick.mock.calls.length).toBe(1);
     expect(onClick.mock.calls[0][0]).toEqual(structure);
   });
@@ -51,13 +51,13 @@ describe("<StructureRow />", () => {
     const testValue = "value";
     const structure = {
       id: 1,
-      testObject: { internalValue: testValue }
+      testObject: { internalValue: testValue },
     };
     const columns = [
       {
         name: "testObject",
-        fieldSelector: ({ testObject: { internalValue } }) => internalValue
-      }
+        fieldSelector: ({ testObject: { internalValue } }) => internalValue,
+      },
     ];
     const props = { structure, columns };
     const wrapper = shallow(<StructureRow {...props} />);
@@ -65,11 +65,11 @@ describe("<StructureRow />", () => {
   });
 
   it("row prints field decorator", () => {
-    const fieldDecorator = x => x + "_decorated";
+    const fieldDecorator = (x) => x + "_decorated";
     const testValue = "value";
     const structure = {
       id: 1,
-      testObject: testValue
+      testObject: testValue,
     };
     const columns = [{ name: "testObject", fieldDecorator }];
     const props = { structure, columns };

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

@@ -0,0 +1,83 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { within } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import { functionsMock } from "@truedat/test/mocks";
+
+import StructuresGrantRequestView from "../StructuresGrantRequestView";
+
+const mockHistory = { push: jest.fn() };
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useLocation: () => ({ pathname: "/bar" }),
+  useHistory: () => mockHistory,
+}));
+
+const dispatch = jest.fn();
+describe("<StructuresGrantRequestView />", () => {
+  const structures = [1, 2, 3].map((id) => ({
+    id,
+    name: `structure_${id}`,
+    type: "table",
+    external_id: `structure_ext_id_${id}`,
+    my_grants: [],
+    my_grant_request: null,
+    user_permissions: {
+      request_grant: true,
+    },
+    updated_at: "2023-04-27",
+  }));
+
+  const renderOpts = {
+    mocks: [functionsMock],
+    state: {
+      structures,
+      structureCount: 3,
+      userPermissions: {
+        request_grant: true,
+      },
+    },
+    dispatch,
+    fallback: "lazy",
+  };
+
+  it("Clicking a grant request button triggers action", async () => {
+    const { container, queryByText } = render(
+      <StructuresGrantRequestView />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    await waitFor(() => expect(container).toMatchSnapshot());
+
+    const structure1Row = await queryByText(/structure_1/).closest("tr");
+    const structure1ReqButton = within(structure1Row).getByRole("button");
+
+    userEvent.click(structure1ReqButton);
+
+    await waitFor(() => {
+      expect(dispatch).toHaveBeenCalledWith({
+        payload: {
+          external_id: "structure_ext_id_1",
+          hasDataFields: false,
+          id: "1",
+          my_grant_request: null,
+          my_grants: [],
+          name: "structure_1",
+          structureFields: [],
+          structure_type: undefined,
+          type: "table",
+          updated_at: "2023-04-27",
+          user_permissions: {
+            request_grant: true,
+          },
+        },
+        type: "ADD_GRANT_REQUEST_TO_CART/TRIGGER",
+      });
+    });
+  });
+});

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

@@ -6,7 +6,7 @@ const getProps = () => ({
   clearStructures: jest.fn(),
   payload: {},
   structuresLoading: false,
-  fetchStructures: jest.fn()
+  fetchStructures: jest.fn(),
 });
 
 describe("<StructuresLoader />", () => {

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

@@ -52,6 +52,10 @@ exports[`<GrantRoutes /> matches the latest snapshot 1`] = `
       render={[Function]}
     />
   </Switch>
+  <Route
+    path="/structuresGrantRequests"
+    render={[Function]}
+  />
   <Route
     path="/grantRequests"
     render={[Function]}