@truedat/dd 8.9.1 → 8.10.1

package/src/components/GrantRequestsTable.js

@@ -26,65 +26,69 @@ export const GrantRequestsTable = ({
 
   const grantRequests = _.propOr([], "data")(searchData);
 
+  const showEmpty = _.isEmpty(grantRequests) && !loading;
+
   return (
-    <>
-      {!_.isEmpty(grantRequests) ? (
-        <Table sortable selectable>
-          <Table.Header>
-            <Table.Row>
-              {approveView ? (
-                <Table.HeaderCell textAlign="center">
-                  <Checkbox
-                    id="selectGrantRequest"
-                    onChange={addAll}
-                    checked={checkedAll}
-                  />
-                </Table.HeaderCell>
-              ) : null}
-              {columns.map((column, key) => (
-                <Table.HeaderCell
-                  key={key}
-                  width={column.width}
-                  content={formatMessage({
-                    id: `grantRequest.header.${column.name}`,
-                    defaultMessage: column.name,
-                  })}
-                  sorted={
-                    _.path("sort.name")(column) === sortColumn
-                      ? sortDirection
-                      : null
-                  }
-                  className={_.path("sort.name")(column) ? "" : "disabled"}
-                  onClick={() =>
-                    handleSortSelection(_.path("sort.name")(column))
-                  }
-                />
-              ))}
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {grantRequests.map((gr, key) => (
-              <GrantRequestRow
-                key={key}
-                checked={isRowChecked && isRowChecked(gr)}
-                grantRequest={gr}
-                columns={columns}
-                approveView={approveView}
-                onCheckboxChange={() => checkRow && checkRow(gr)}
+    <Table sortable={!showEmpty} selectable={!showEmpty}>
+      <Table.Header>
+        <Table.Row>
+          {approveView ? (
+            <Table.HeaderCell textAlign="center">
+              <Checkbox
+                id="selectGrantRequest"
+                onChange={addAll}
+                checked={checkedAll}
               />
-            ))}
-          </Table.Body>
-        </Table>
-      ) : null}
-      {_.isEmpty(grantRequests) && !loading ? (
-        <Header as="h4">
-          <Icon name="search" />
-          <Header.Content>
-            {formatMessage({ id: "grantRequests.empty" })}
-          </Header.Content>
-        </Header>
-      ) : null}
-    </>
+            </Table.HeaderCell>
+          ) : null}
+          {columns.map((column, key) => (
+            <Table.HeaderCell
+              key={key}
+              width={column.width}
+              content={formatMessage({
+                id: `grantRequest.header.${column.name}`,
+                defaultMessage: column.name,
+              })}
+              sorted={
+                _.path("sort.name")(column) === sortColumn
+                  ? sortDirection
+                  : null
+              }
+              className={_.path("sort.name")(column) ? "" : "disabled"}
+              onClick={() => handleSortSelection(_.path("sort.name")(column))}
+            />
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {showEmpty ? (
+          <Table.Row>
+            <Table.Cell
+              colSpan={columns.length + (approveView ? 1 : 0)}
+              textAlign="center"
+            >
+              <Header as="h4">
+                <Icon name="search" />
+                <Header.Content>
+                  {formatMessage({ id: "grantRequests.empty" })}
+                </Header.Content>
+              </Header>
+            </Table.Cell>
+          </Table.Row>
+        ) : (
+          grantRequests.map((gr, key) => (
+            <GrantRequestRow
+              key={key}
+              checked={isRowChecked && isRowChecked(gr)}
+              grantRequest={gr}
+              columns={columns}
+              approveView={approveView}
+              onCheckboxChange={() => checkRow && checkRow(gr)}
+            />
+          ))
+        )}
+      </Table.Body>
+    </Table>
   );
 };
 

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

@@ -40,6 +40,7 @@ describe("<GrantRequestBulkActions />", () => {
     loading: false,
     toggleHiddenFilterValue: jest.fn(),
     resetFilters: jest.fn(),
+    setHiddenFilters: jest.fn(),
     searchMust: { foo: "bar" },
     cleanQuery: jest.fn(),
   };
@@ -52,6 +53,7 @@ describe("<GrantRequestBulkActions />", () => {
     loading: false,
     toggleHiddenFilterValue: jest.fn(),
     resetFilters: jest.fn(),
+    setHiddenFilters: jest.fn(),
     searchMust: { foo: "bar" },
     cleanQuery: jest.fn(),
   };
@@ -88,6 +90,8 @@ describe("<GrantRequestBulkActions />", () => {
       renderOpts,
     );
     await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("option", { name: /role1/i }));
     expect(
       rendered.getByRole("button", { name: /approve_request/i }),
     ).toBeEnabled();

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

@@ -5,11 +5,11 @@ import { linkTo } from "@truedat/core/routes";
 
 import GrantRequestRow from "../GrantRequestRow";
 
-const mockHistory = jest.fn();
+const mockNavigate = jest.fn();
 
 jest.mock("react-router", () => ({
   ...jest.requireActual("react-router"),
-  useNavigate: () => mockHistory,
+  useNavigate: () => mockNavigate,
 }));
 
 const columns = [
@@ -33,6 +33,10 @@ describe("<GrantRequestRow />", () => {
   const onCheckboxChange = jest.fn();
   const onClick = jest.fn();
 
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+
   const props = {
     active: true,
     checked: true,
@@ -90,7 +94,7 @@ describe("<GrantRequestRow />", () => {
     });
   });
 
-  it("navigates to grant request", async () => {
+  it("navigates to grant request in the same window", async () => {
     const rendered = render(
       <table>
         <tbody>
@@ -105,6 +109,6 @@ describe("<GrantRequestRow />", () => {
     });
 
     await user.click(rendered.queryByText(/blah/i));
-    expect(mockHistory).toHaveBeenCalledWith(linkTo.GRANT_REQUEST({ id: 1 }));
+    expect(mockNavigate).toHaveBeenCalledWith(linkTo.GRANT_REQUEST({ id: 1 }));
   });
 });

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

@@ -0,0 +1,198 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { screen } from "@testing-library/react";
+import SearchContext from "@truedat/core/search/SearchContext";
+import { GrantRequestsDownloadButton } from "../GrantRequestsDownloadButton";
+
+jest.mock("@truedat/dd/hooks/useGrantRequest", () => ({
+  useGrantRequestsDownload: jest.fn(() => ({
+    trigger: jest.fn(),
+    isMutating: false,
+  })),
+}));
+
+describe("<GrantRequestsDownloadButton />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "grantRequest.actions.download.tooltip": "Descargar / Download",
+        "grantRequest.actions.download.popup":
+          "Search or apply a filter to download grant requests",
+        "grantRequests.props.current_status": "Status",
+        "grantRequests.props.user_full_name": "User",
+        "grantRequests.props.created_by_full_name": "Created by",
+        "grantRequests.props.structure_external_id": "Structure",
+        "grantRequests.props.domains": "Domains",
+        "grantRequests.props.system_name": "System",
+        "grantRequests.props.structure_path": "Path",
+        "grantRequests.props.request_type": "Request type",
+      },
+    },
+  };
+
+  const buildSearchContext = (filterParams = {}) => ({
+    searchData: {
+      data: [
+        {
+          id: 1,
+          current_status: "pending",
+          user: { full_name: "Jane Doe" },
+          created_by: { full_name: "Admin" },
+          data_structure_version: {
+            name: "country",
+            path: ["postgres", "public"],
+            domain: { name: "demo", id: 5 },
+            system: { name: "PostgreSQL", id: 7 },
+            external_id: "postgres/postgres/public/country",
+            data_structure_id: 241939,
+          },
+        },
+      ],
+    },
+    loading: false,
+    filterParams,
+  });
+
+  it("matches the latest snapshot", async () => {
+    const props = {
+      hasFilterApplied: true,
+      searchBy: "approve",
+      setDownloading: jest.fn(),
+    };
+
+    const rendered = render(
+      <SearchContext value={buildSearchContext({ status: ["pending"] })}>
+        <GrantRequestsDownloadButton {...props} />
+      </SearchContext>,
+      renderOpts,
+    );
+
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("is enabled if there are results and a filter applied", async () => {
+    const props = {
+      hasFilterApplied: true,
+      searchBy: "all",
+      setDownloading: jest.fn(),
+    };
+
+    render(
+      <SearchContext value={buildSearchContext({ status: ["pending"] })}>
+        <GrantRequestsDownloadButton {...props} />
+      </SearchContext>,
+      renderOpts,
+    );
+
+    const button = await screen.findByRole("button");
+    expect(button).toBeEnabled();
+  });
+
+  it("is disabled when there are no results", async () => {
+    const props = {
+      hasFilterApplied: true,
+      searchBy: "all",
+      setDownloading: jest.fn(),
+    };
+
+    render(
+      <SearchContext
+        value={{
+          searchData: { data: [] },
+          loading: false,
+          filterParams: { status: ["pending"] },
+        }}
+      >
+        <GrantRequestsDownloadButton {...props} />
+      </SearchContext>,
+      renderOpts,
+    );
+
+    const button = await screen.getByRole("button");
+    expect(button).toBeDisabled();
+  });
+
+  it("is disabled when no filter is applied", async () => {
+    const props = {
+      hasFilterApplied: false,
+      searchBy: "all",
+      setDownloading: jest.fn(),
+    };
+
+    render(
+      <SearchContext value={buildSearchContext({})}>
+        <GrantRequestsDownloadButton {...props} />
+      </SearchContext>,
+      renderOpts,
+    );
+
+    const button = await screen.getByRole("button");
+    expect(button).toBeDisabled();
+  });
+
+  it("calls triggerDownload with search_by 'approve' from approve view", async () => {
+    const triggerMock = jest.fn();
+    const grantRequestHook = require("@truedat/dd/hooks/useGrantRequest");
+    grantRequestHook.useGrantRequestsDownload.mockReturnValue({
+      trigger: triggerMock,
+      isMutating: false,
+    });
+
+    const props = {
+      hasFilterApplied: true,
+      searchBy: "approve",
+      setDownloading: jest.fn(),
+    };
+
+    render(
+      <SearchContext value={buildSearchContext({ status: ["pending"] })}>
+        <GrantRequestsDownloadButton {...props} />
+      </SearchContext>,
+      renderOpts,
+    );
+
+    const button = await screen.findByRole("button");
+    button.click();
+
+    expect(triggerMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        search_by: "approve",
+        header_labels: expect.any(Object),
+        lang: "en",
+        status: ["pending"],
+      }),
+    );
+  });
+
+  it("calls triggerDownload with search_by 'all' from search view", async () => {
+    const triggerMock = jest.fn();
+    const grantRequestHook = require("@truedat/dd/hooks/useGrantRequest");
+    grantRequestHook.useGrantRequestsDownload.mockReturnValue({
+      trigger: triggerMock,
+      isMutating: false,
+    });
+
+    const props = {
+      hasFilterApplied: true,
+      searchBy: "all",
+      setDownloading: jest.fn(),
+    };
+
+    render(
+      <SearchContext value={buildSearchContext({ query: "foo" })}>
+        <GrantRequestsDownloadButton {...props} />
+      </SearchContext>,
+      renderOpts,
+    );
+
+    const button = await screen.findByRole("button");
+    button.click();
+
+    expect(triggerMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        search_by: "all",
+        query: "foo",
+      }),
+    );
+  });
+});

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

@@ -4,7 +4,7 @@ exports[`<GrantRequestBulkActions /> matches the latest snapshot 1`] = `
 <div>
   <div
     aria-expanded="false"
-    class="ui selection dropdown grant-requests-bulk-role-selector"
+    class="ui selection dropdown grant-requests-bulk-role-selector "
     role="listbox"
     tabindex="0"
   >
@@ -23,6 +23,20 @@ exports[`<GrantRequestBulkActions /> matches the latest snapshot 1`] = `
     <div
       class="menu transition"
     >
+      <div
+        aria-checked="false"
+        aria-disabled="true"
+        aria-selected="false"
+        class="disabled item header"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <span
+          class="text"
+        >
+          select
+        </span>
+      </div>
       <div
         aria-checked="true"
         aria-selected="true"
@@ -52,12 +66,12 @@ exports[`<GrantRequestBulkActions /> matches the latest snapshot 1`] = `
     </div>
   </div>
   <button
-    class="ui primary button button icon group-actions"
+    class="ui primary button button icon group-actions grant-requests-approval-button"
   >
     approve_request
   </button>
   <button
-    class="ui secondary button button icon group-actions"
+    class="ui secondary button button icon group-actions grant-requests-approval-button"
   >
     reject
   </button>

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

@@ -3,7 +3,7 @@
 exports[`<GrantRequestBulkApprovalPopup /> matches the latest snapshot 1`] = `
 <div>
   <button
-    class="ui primary button button icon group-actions"
+    class="ui primary button button icon group-actions grant-requests-approval-button"
   >
     button content
   </button>

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GrantRequestsDownloadButton /> matches the latest snapshot 1`] = `
+<div>
+  <button
+    class="ui icon secondary button"
+    data-position="top right"
+    data-tooltip="Descargar / Download"
+  >
+    <i
+      aria-hidden="true"
+      class="download icon"
+    />
+  </button>
+</div>
+`;

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

@@ -8,7 +8,12 @@ exports[`<GrantRequestsLabelResults /> When is loading 1`] = `
     <div
       class="ui label"
     >
-      searching
+      results
+    </div>
+    <div
+      class="ui label"
+    >
+      selected
     </div>
   </div>
   ,