@truedat/dd 7.6.3 → 7.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "7.6.3",
+  "version": "7.6.4",
   "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.6.3",
+    "@truedat/test": "7.6.4",
     "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": "bfd5e53aeb7fb8da6ad19e9403fc6d141fbe9693"
+  "gitHead": "994343683c2e0fb3fab85a021e627b1b86a7831f"
 }

package/src/api.js

@@ -22,7 +22,7 @@ const API_GRANT_REQUEST_BULK_APPROVAL = "/api/grant_requests/bulk_approval";
 const API_GRANT_REQUESTS_SEARCH = "/api/grant_requests/search";
 const API_GRANT_REQUESTS_FILTERS_SEARCH = "/api/grant_requests_filters/search";
 const API_GRANT = "/api/grants/:id";
-const API_GRANTS_CSV = "/api/grants/csv";
+const API_GRANTS_DOWNLOAD = "/api/grants/xlsx/download";
 const API_GRANTS_SEARCH = "/api/grants/search";
 const API_GRAPH = "/api/graphs/:id";
 const API_GRAPH_HASH = "/api/graphs/hash/:hash";
@@ -83,7 +83,7 @@ export {
   API_GRAPH_HASH,
   API_GRAPHS,
   API_GRAPH_CSV,
-  API_GRANTS_CSV,
+  API_GRANTS_DOWNLOAD,
   API_LINEAGE_EVENTS,
   API_MY_GRANTS_SEARCH,
   API_MY_GRANT_FILTERS_SEARCH,

package/src/components/GrantRoutes.js

@@ -33,14 +33,12 @@ import GrantApprovalRule from "./GrantApprovalRule";
 import GrantApprovalRuleEdit from "./GrantApprovalRuleEdit";
 import GrantApprovalRuleNew from "./GrantApprovalRuleNew";
 import GrantApprovalRules from "./GrantApprovalRules";
-import GrantFiltersLoader from "./GrantFiltersLoader";
 import GrantRequest from "./GrantRequest";
 import GrantRequestLoader from "./GrantRequestLoader";
 import GrantRequestsLoader from "./GrantRequestsLoader";
 import GrantRequestsSearchResults from "./GrantRequestsSearchResults";
 import GrantRequestApprovalResults from "./GrantRequestApprovalResults";
 import Grants from "./Grants";
-import GrantsLoader from "./GrantsLoader";
 import MyGrantRequests from "./MyGrantRequests";
 import StructureGrantCartCheckout from "./StructureGrantCartCheckout";
 import StructuresGrantRequestView from "./StructuresGrantRequestView";
@@ -78,23 +76,11 @@ export const GrantRoutes = ({ grantRequestLoaded }) => {
       <Route path="/grants/:id" element={<GrantView />} />
       <Route
         path="/grants"
-        element={
-          <>
-            <GrantsLoader />
-            <GrantFiltersLoader />
-            <Grants />
-          </>
-        }
+        element={<Grants />}
       />
       <Route
         path="/myGrants"
-        element={
-          <>
-            <GrantsLoader onlyMyGrants />
-            <GrantFiltersLoader onlyMyGrants />
-            <Grants onlyMyGrants />
-          </>
-        }
+        element={<Grants onlyMyGrants />}
       />
       <Route
         path="/myGrantRequests"

package/src/components/Grants.js

@@ -1,19 +1,21 @@
+import { useState } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
-
-import GrantDateFilter from "./GrantDateFilter";
-import GrantsSearch from "./GrantsSearch";
+import { SearchContextProvider } from "@truedat/core/search/SearchContext";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import { useGrantFilters, useGrantSearch } from "../hooks/useGrant";
 import GrantsTable from "./GrantsTable";
 import GrantsLabelResults from "./GrantsLabelResults";
 import GrantsDownloadButton from "./GrantsDownloadButton";
-
-import GrantSelectedFilters from "./GrantSelectedFilters";
 import GrantsPagination from "./GrantsPagination";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 
-export const Grants = ({ grantsLoading, onlyMyGrants }) => {
+export const Grants = ({ onlyMyGrants }) => {
   const { formatMessage } = useIntl();
+  const [downloading, setDownloading] = useState(false);
+  const { loading: grantsLoading } = useSearchContext();
+
   return (
     <Segment>
       <Header as="h2">
@@ -35,11 +37,14 @@ export const Grants = ({ grantsLoading, onlyMyGrants }) => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Segment attached="bottom">
-        <GrantsDownloadButton onlyMyGrants={onlyMyGrants} hasFilterApplied />
-        <GrantsSearch />
-        <GrantSelectedFilters />
-        <GrantDateFilter />
+
+      <Segment attached="bottom" loading={downloading} disabled={downloading}>
+        <GrantsDownloadButton
+          onlyMyGrants={onlyMyGrants}
+          hasFilterApplied
+          setDownloading={setDownloading}
+        />
+        <SearchWidget dateFilter searchField={"start_date,end_date"} isGrantDateRange />
         <Dimmer.Dimmable dimmed={grantsLoading}>
           {grantsLoading ? (
             <Dimmer active inverted>
@@ -48,7 +53,7 @@ export const Grants = ({ grantsLoading, onlyMyGrants }) => {
           ) : null}
         </Dimmer.Dimmable>
         <GrantsLabelResults />
-        <GrantsTable onlyMyGrants={onlyMyGrants} />
+        <GrantsTable onlyMyGrants={onlyMyGrants} setDownloading={setDownloading} />
         <GrantsPagination />
       </Segment>
     </Segment>
@@ -56,10 +61,32 @@ export const Grants = ({ grantsLoading, onlyMyGrants }) => {
 };
 
 Grants.propTypes = {
-  grantsLoading: PropTypes.bool,
   onlyMyGrants: PropTypes.bool,
 };
 
-const mapStateToProps = ({ grantsLoading }) => ({ grantsLoading });
+export const GrantsWrapper = ({ onlyMyGrants }) => {
+  const useSearch = useGrantSearch(onlyMyGrants);
+  const useFilters = useGrantFilters(onlyMyGrants);
+
+  const searchProps = {
+    initialSortColumn: "data_structure_version.name.raw",
+    initialSortDirection: "ascending",
+    useSearch: useSearch,
+    useFilters: useFilters,
+    pageSize: 20,
+    userFiltersType: "user_search_filters",
+    userFilterScope: onlyMyGrants ? "data_structure" : "",
+  };
+
+  return (
+    <SearchContextProvider key={onlyMyGrants ? "myGrants" : "allGrants"} {...searchProps}>
+      <Grants onlyMyGrants={onlyMyGrants} />
+    </SearchContextProvider>
+  );
+};
+
+GrantsWrapper.propTypes = {
+  onlyMyGrants: PropTypes.bool,
+};
 
-export default connect(mapStateToProps)(Grants);
+export default GrantsWrapper;

package/src/components/GrantsDownloadButton.js

@@ -1,32 +1,49 @@
 import _ from "lodash/fp";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { Button, Popup } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import { downloadGrants } from "../routines";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { useGrantDownload } from "../hooks/useGrant";
 
 const staticLabels = [
   "user_name",
   "data_structure_name",
+  "domain_name",
+  "system_name",
+  "structure_path",
   "start_date",
   "end_date",
-  "metadata",
-  "mutable_metadata",
+  "grant_details",
 ];
 
 export const GrantsDownloadButton = ({
-  grants,
-  grantsDownloading,
-  grantsLoading,
-  downloadGrants,
   hasFilterApplied,
   onlyMyGrants,
+  setDownloading,
 }) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage, locale } = useIntl();
+
+  const {
+    searchData,
+    loading: grantsLoading,
+    filterParams: searchParams,
+  } = useSearchContext();
+
+  const { trigger: triggerDownload, isMutating: grantsDownloading } =
+    useGrantDownload();
+
+  useEffect(() => {
+    setDownloading(grantsDownloading);
+  }, [setDownloading, grantsDownloading]);
+
+  const grants = searchData?.data;
+
   const headerLabels = _.flow(
     _.map((l) => [l, formatMessage({ id: `grants.props.${l}` })]),
     _.fromPairs
   )(staticLabels);
+
   const messagePopup =
     hasFilterApplied && !_.isEmpty(grants)
       ? formatMessage({ id: "grants.actions.download.tooltip" })
@@ -44,9 +61,12 @@ export const GrantsDownloadButton = ({
                 secondary
                 icon="download"
                 onClick={() =>
-                  downloadGrants({
+                  triggerDownload({
                     search_by: onlyMyGrants ? "user" : "permissions",
-                    headerLabels,
+                    header_labels: headerLabels,
+                    lang: locale,
+                    loading: grantsLoading,
+                    ...searchParams,
                   })
                 }
                 loading={grantsDownloading}
@@ -61,18 +81,9 @@ export const GrantsDownloadButton = ({
 };
 
 GrantsDownloadButton.propTypes = {
-  grantsDownloading: PropTypes.bool,
-  grantsLoading: PropTypes.bool,
-  downloadGrants: PropTypes.func,
   onlyMyGrants: PropTypes.bool,
+  hasFilterApplied: PropTypes.bool,
+  setDownloading: PropTypes.func,
 };
 
-const mapStateToProps = (state) => ({
-  grantsDownloading: state.grantsDownloading,
-  grantsLoading: state.grantsLoading,
-  grants: state.grants,
-});
-
-export default connect(mapStateToProps, { downloadGrants })(
-  GrantsDownloadButton
-);
+export default GrantsDownloadButton;

package/src/components/GrantsLabelResults.js

@@ -1,9 +1,13 @@
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import { Label } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+export const GrantsLabelResults = ( ) => {
+  const {
+    loading: grantsLoading,
+    count: grantCount,
+  } = useSearchContext();
 
-export const GrantsLabelResults = ({ grantCount, grantsLoading }) => {
   return (
     <Label className="grants-label-results">
       {grantsLoading ? (
@@ -18,14 +22,4 @@ export const GrantsLabelResults = ({ grantCount, grantsLoading }) => {
   );
 };
 
-GrantsLabelResults.propTypes = {
-  grantCount: PropTypes.number,
-  grantsLoading: PropTypes.bool,
-};
-
-const mapStateToProps = ({ grantCount, grantsLoading }) => ({
-  grantCount,
-  grantsLoading,
-});
-
-export default connect(mapStateToProps)(GrantsLabelResults);
+export default GrantsLabelResults;

package/src/components/GrantsPagination.js

@@ -1,14 +1,16 @@
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
 import { Pagination } from "@truedat/core/components";
-import { selectGrantPage } from "../routines";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({ selectPage: selectGrantPage }, dispatch);
+export default function GrantsPagination() {
+  const { page, size, count, selectPage } = useSearchContext();
 
-const mapStateToProps = ({ grantQuery, grantCount, grantsPageSize }) => ({
-  activePage: grantQuery?.page,
-  totalPages: Math.ceil(grantCount / grantsPageSize),
-});
+  const totalPages = Math.max(1, Math.ceil(count / size));
 
-export default connect(mapStateToProps, mapDispatchToProps)(Pagination);
+  return (
+    <Pagination
+      activePage={page}
+      totalPages={totalPages}
+      selectPage={selectPage}
+    />
+  );
+}

package/src/components/GrantsTable.js

@@ -1,35 +1,45 @@
 import _ from "lodash/fp";
-import { useState } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { useNavigate } from "react-router";
 import { Table, Header, Icon } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { columnDecoratorComponent } from "@truedat/core/services";
-import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
 import { linkTo } from "@truedat/core/routes";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { useGrantDownload } from "../hooks/useGrant";
 import { getGrantsTableColumns } from "../selectors";
 import { sortGrants } from "../routines";
 
 export const GrantsTable = ({
   columns,
-  grants,
-  grantsLoading,
-  sortGrants,
-  grantsSorting,
+  setDownloading,
 }) => {
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
+
+  const {
+    searchData,
+    loading: grantsLoading,
+    sortColumn: sortedColumn,
+    sortDirection: direction,
+    handleSortSelection,
+  } = useSearchContext();
+
+  const { isMutating: grantsDownloading } =
+    useGrantDownload();
+
+  useEffect(() => {
+    setDownloading(grantsDownloading);
+  }, [setDownloading, grantsDownloading]);
+
+  const grants = searchData?.data;
+
   const filteredColumns = _.filter((c) => _.any(_.prop(c.name))(grants))(
     columns
   );
 
-  const [sortedColumn, setColumn] = useState(
-    _.prop("column")(getSortInfo(grantsSorting))
-  );
-  const [direction, setDirection] = useState(
-    _.prop("direction")(getSortInfo(grantsSorting))
-  );
 
   return (
     <>
@@ -54,14 +64,7 @@ export const GrantsTable = ({
                     className={_.path("sort.name")(column) ? "" : "disabled"}
                     onClick={() => {
                       filteredColumns.includes(column)
-                        ? sortColumn(
-                            column,
-                            sortGrants,
-                            setDirection,
-                            setColumn,
-                            direction,
-                            sortedColumn
-                          )
+                        ? handleSortSelection(column.sort.name)
                         : null;
                     }}
                   />
@@ -99,17 +102,10 @@ export const GrantsTable = ({
 
 GrantsTable.propTypes = {
   columns: PropTypes.array,
-  grants: PropTypes.array,
-  grantsLoading: PropTypes.bool,
-  sortGrants: PropTypes.func,
-  grantsSorting: PropTypes.array,
 };
 
 const mapStateToProps = (state, { onlyMyGrants }) => ({
   columns: getGrantsTableColumns({ ...state, onlyMyGrants }),
-  grants: state.grants,
-  grantsLoading: state.grantsLoading,
-  grantsSorting: _.path("grantQuery.sort")(state),
 });
 
 export default connect(mapStateToProps, { sortGrants })(GrantsTable);

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

@@ -1,27 +1,168 @@
 import { render, waitForLoad } from "@truedat/test/render";
+import { screen } from "@testing-library/react";
 import { GrantsDownloadButton } from "../GrantsDownloadButton";
+import SearchContext from "@truedat/core/search/SearchContext";
+
+jest.mock("@truedat/dd/hooks/useGrant", () => ({
+  useGrantDownload: jest.fn(() => ({
+    trigger: jest.fn(),
+    isMutating: false,
+  })),
+}));
 
 describe("<GrantsDownloadButton />", () => {
   const renderOpts = {
     state: {
       userPermissions: { update: true },
     },
+    messages: {
+      en: {
+        "grants.actions.download.tooltip": "Download to XLSX",
+        "grants.props.data_structure_name": "Structure",
+        "grants.props.domain_name": "Domain",
+        "grants.props.end_date": "End date",
+        "grants.props.grant_details": "Details",
+        "grants.props.start_date": "Start date",
+        "grants.props.structure_path": "Path",
+        "grants.props.system_name": "System",
+      },
+    },
   };
 
-  const downloadGrants = jest.fn();
-  const grantsLoading = false;
+  const searchContext = {
+    searchData: {
+      data: [{ 
+        id: 1, 
+        end_date: "2025-05-16", 
+        start_date: "2025-01-01", 
+        detail: {},
+        user: { full_name: "Jane Doe" },
+        data_structure_version: { 
+          name: "country", 
+          path: ["postgres", "public"], 
+          domain: {name: "demo", id: 5}, 
+          system: {name: "PostgreSQL", id: 7}, 
+          external_id: "postgres://postgresql/postgres/public/country", 
+          data_structure_id: 241939
+        }
+      }],
+    },
+    loading: false,
+    filterParams: {},
+  };
 
   it("matches the latest snapshot", async () => {
-    const props = { downloadGrants, grantsLoading };
-    const rendered = render(<GrantsDownloadButton {...props} />, renderOpts);
+    const props = { hasFilterApplied: true, onlyMyGrants: false, setDownloading: jest.fn() };
+
+    const rendered = render(
+      <SearchContext value={searchContext}>
+        <GrantsDownloadButton {...props}/>
+      </SearchContext>,
+      renderOpts
+    );
+
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
-  it("is disabled if there are no structures to be downloaded", async () => {
-    const props = { downloadGrants, grantsLoading, grants: [] };
-    const rendered = render(<GrantsDownloadButton {...props} />, renderOpts);
-    await waitForLoad(rendered);
-    expect(rendered.container.querySelector("button")).toBeDisabled();
+  it("is enabled if there is any grant to be downloaded", async () => {
+    const props = { hasFilterApplied: true, onlyMyGrants: false, setDownloading: jest.fn() };
+
+    render(
+      <SearchContext value={searchContext}>
+        <GrantsDownloadButton {...props}/>
+      </SearchContext>,
+      renderOpts
+    );
+
+    const button = await screen.findByRole("button");
+    expect(button).toBeEnabled();
+  });
+
+  it("is disabled if there are no grants to be downloaded", async () => {
+    const searchContext = {
+      searchData: {
+        data: []
+      },
+      loading: false,
+      filterParams: {},
+    };
+
+    const props = { hasFilterApplied: false, onlyMyGrants: false, setDownloading: jest.fn() };
+
+    render(
+      <SearchContext value={searchContext}>
+        <GrantsDownloadButton {...props}/>
+      </SearchContext>,
+      renderOpts
+    );
+
+    const button = await screen.getByRole("button");
+    expect(button).toBeDisabled();
+  });
+
+  it("calls triggerDownload with the correct parameters on click", async () => {
+    const triggerMock = jest.fn();
+
+    jest.mocked(require("@truedat/dd/hooks/useGrant").useGrantDownload).mockReturnValue({
+      trigger: triggerMock,
+      isMutating: false,
+    });
+
+    const props = { hasFilterApplied: true, onlyMyGrants: true, setDownloading: jest.fn() };
+
+    render(
+      <SearchContext value={searchContext}>
+        <GrantsDownloadButton {...props} />
+      </SearchContext>,
+      renderOpts
+    );
+
+    const button = await screen.findByRole("button");
+    button.click();
+
+    expect(triggerMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        search_by: "user",
+        header_labels: expect.any(Object),
+        lang: "en",
+      })
+    );
+  });
+
+  it("calls setDownloading when isMutating changes", async () => {
+    const setDownloadingMock = jest.fn();
+
+    const grantHook = require("@truedat/dd/hooks/useGrant");
+
+    const props = { hasFilterApplied: true, onlyMyGrants: false, setDownloading: setDownloadingMock };
+
+    grantHook.useGrantDownload.mockReturnValue({
+      trigger: jest.fn(),
+      isMutating: false,
+    });
+
+    const { rerender } = render(
+      <SearchContext value={searchContext} >
+        <GrantsDownloadButton {...props} />
+      </SearchContext>,
+      renderOpts
+    );
+
+    grantHook.useGrantDownload.mockReturnValue({
+      trigger: jest.fn(),
+      isMutating: true,
+    });
+
+    const newProps = { hasFilterApplied: true, onlyMyGrants: false, setDownloading: setDownloadingMock };
+
+    rerender(
+      <SearchContext value={searchContext} >
+        <GrantsDownloadButton {...newProps} />
+      </SearchContext>,
+      renderOpts
+    );
+
+    expect(setDownloadingMock).toHaveBeenCalledWith(true);
   });
 });

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

@@ -1,5 +1,6 @@
 import { render, waitForLoad } from "@truedat/test/render";
 import { GrantsLabelResults } from "../GrantsLabelResults";
+import SearchContext from "@truedat/core/search/SearchContext";
 
 describe("<GrantsLabelResults />", () => {
   const renderOpts = {
@@ -7,10 +8,20 @@ describe("<GrantsLabelResults />", () => {
       userPermissions: { update: true },
     },
   };
+  const grantsLoading = false;
+  const searchContext = {
+    count: 22,
+    loading: grantsLoading,
+  };
 
   it("matches the latest snapshot", async () => {
     const props = { grantCount: 22 };
-    const rendered = render(<GrantsLabelResults {...props} />, renderOpts);
+    const rendered = render(
+      <SearchContext value={searchContext}>
+        <GrantsLabelResults {...props} />
+      </SearchContext>,
+      renderOpts
+    );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });