@truedat/dd 5.16.2 → 5.16.4

package/src/components/GrantRequestsSearchResults.js

@@ -0,0 +1,156 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { toggleGrantRequestsFilterValue } from "../routines";
+import GrantRequestBulkActions from "./GrantRequestBulkActions";
+import GrantRequestsSearch from "./GrantRequestsSearch";
+import GrantRequestsSelectedFilters from "./GrantRequestsSelectedFilters";
+import GrantRequestsTable from "./GrantRequestsTable";
+import GrantRequestsLabelResults from "./GrantRequestsLabelResults";
+
+export const GrantRequestsSearchResults = ({
+  grantRequests,
+  loading,
+  rolesPermission,
+  toggleGrantRequestsFilterValue,
+  defaultFilters,
+}) => {
+  const [selectedGrantRequests, setSelectedGrantRequests] = useState([]);
+  const [roleSelected, setSelectedRole] = useState(null);
+
+  const onChangeRole = (role) => {
+    setSelectedRole(role);
+    toggleGrantRequestsFilterValue({
+      filter: "must_not_approved_by",
+      value: [role],
+    });
+  };
+
+  useEffect(() => {
+    if (_.size(rolesPermission) == 1) {
+      onChangeRole(_.first(rolesPermission));
+    }
+  }, [rolesPermission]);
+
+  const allChecked = () => {
+    const ids = _.map(_.prop("id"))(grantRequests);
+    return (
+      _.negate(_.isEmpty)(selectedGrantRequests) &&
+      _.every((id) => _.includes(id)(selectedGrantRequests))(ids)
+    );
+  };
+
+  const addAll = (_e, target) => {
+    const checkedAll = _.prop("checked")(target);
+    const ids = _.map(_.prop("id"))(grantRequests);
+    checkedAll
+      ? setSelectedGrantRequests(
+          _.flow(_.concat(ids), _.uniq)(selectedGrantRequests)
+        )
+      : setSelectedGrantRequests(
+          _.flow(
+            _.difference(selectedGrantRequests),
+            _.uniq
+          )(selectedGrantRequests)
+        );
+  };
+
+  const checkRow = (grantRequest) => {
+    const id = _.prop("id")(grantRequest);
+    const exists = _.some((selectedId) => _.eq(id, selectedId))(
+      selectedGrantRequests
+    );
+    exists
+      ? setSelectedGrantRequests(
+          _.flow(
+            _.remove((selectedId) => _.eq(id, selectedId)),
+            _.uniq()
+          )(selectedGrantRequests)
+        )
+      : setSelectedGrantRequests(
+          _.flow(_.concat(id), _.uniq)(selectedGrantRequests)
+        );
+  };
+
+  const isRowChecked = (grantRequest) => {
+    const id = _.prop("id")(grantRequest);
+    return _.some((selectedId) => _.eq(id, selectedId))(selectedGrantRequests);
+  };
+
+  const loadingDone =
+    _.size(rolesPermission) > 1 || (!loading && !_.isNull(roleSelected));
+
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon circular name="key" />
+        <Header.Content>
+          <FormattedMessage id={"grantRequests.header.approve"} />
+          <Header.Subheader>
+            <FormattedMessage id={"grantRequests.subheader.approve"} />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+
+      <Segment attached="bottom">
+        <GrantRequestBulkActions
+          selectedGrantRequests={selectedGrantRequests}
+          rolesPermission={rolesPermission}
+          onChangeRole={onChangeRole}
+          roleSelected={roleSelected}
+          loading={loading}
+          cleanSelectedGrantRequests={() => setSelectedGrantRequests([])}
+          defaultFilters={defaultFilters}
+          zeroResults={_.isEmpty(grantRequests)}
+        />
+
+        <GrantRequestsSearch />
+        <GrantRequestsSelectedFilters />
+        <Dimmer.Dimmable dimmed={loading}>
+          <Dimmer active={loading} inverted>
+            <Loader />
+          </Dimmer>
+
+          {loadingDone ? (
+            <>
+              <GrantRequestsLabelResults
+                roleSelected={roleSelected}
+                grantRequestToExecute={_.size(selectedGrantRequests)}
+              />
+              <GrantRequestsTable
+                addAll={addAll}
+                checkedAll={allChecked()}
+                checkRow={checkRow}
+                isRowChecked={isRowChecked}
+                selectedGrantRequests={selectedGrantRequests}
+                roleSelected={roleSelected}
+              />
+            </>
+          ) : null}
+        </Dimmer.Dimmable>
+      </Segment>
+    </Segment>
+  );
+};
+
+GrantRequestsSearchResults.propTypes = {
+  grantRequests: PropTypes.array,
+  loading: PropTypes.bool,
+  role: PropTypes.string,
+  rolesPermission: PropTypes.array,
+  defaultFilters: PropTypes.object,
+};
+
+const mapStateToProps = (state) => ({
+  loading:
+    state.grantRequestsSearchLoading || state.grantRequestPermissionsLoading,
+  grantRequests: state.grantRequestsSearch,
+  rolesPermission: state.grantRequestPermissions,
+});
+
+export default connect(mapStateToProps, { toggleGrantRequestsFilterValue })(
+  GrantRequestsSearchResults
+);

package/src/components/GrantRequestsSelectedFilters.js

@@ -0,0 +1,54 @@
+import _ from "lodash/fp";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import { makeOption } from "@truedat/core/services/i18n";
+import { SelectedFilters } from "@truedat/core/components";
+import {
+  closeGrantRequestsFilter,
+  openGrantRequestsFilter,
+  removeGrantRequestsFilter,
+  resetGrantRequestsFilters,
+  toggleGrantRequestsFilterValue,
+} from "../routines";
+import {
+  getGrantRequestsSelectedFilterActiveValues,
+  getGrantRequestsSelectedFilters,
+  getGrantRequestsSelectedFilterValues,
+  getGrantRequestsFilterTypes,
+} from "../selectors";
+
+export const mapStateToProps = (state) => {
+  const {
+    grantRequestsFiltersLoading: loading,
+    grantRequestsSelectedFilter: selectedFilter,
+  } = state;
+
+  const i18nValues = _.flow(
+    getGrantRequestsSelectedFilterValues,
+    _.map(makeOption({}, selectedFilter))
+  )(state);
+
+  return {
+    loading,
+    filterTypes: getGrantRequestsFilterTypes(state),
+    selectedFilter,
+    selectedFilters: getGrantRequestsSelectedFilters(state),
+    selectedFilterActiveValues:
+      getGrantRequestsSelectedFilterActiveValues(state),
+    selectedFilterValues: i18nValues,
+  };
+};
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      closeFilter: closeGrantRequestsFilter,
+      openFilter: openGrantRequestsFilter,
+      removeFilter: removeGrantRequestsFilter,
+      resetFilters: resetGrantRequestsFilters,
+      toggleFilterValue: toggleGrantRequestsFilterValue,
+    },
+    dispatch
+  );
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectedFilters);

package/src/components/GrantRequestsTable.js

@@ -0,0 +1,131 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
+import { Checkbox, Table, Header, Icon } from "semantic-ui-react";
+import { sortGrantRequests } from "../routines";
+import { getGrantRequestsSearchColumns } from "../selectors";
+import { GrantRequestRow } from "./GrantRequestRow";
+
+export const GrantRequestsTable = ({
+  addAll,
+  checkedAll,
+  checkRow,
+  isRowChecked,
+  grantRequests,
+  grantRequestsSearchLoading,
+  columns,
+  grantRequestsSort,
+  sortGrantRequests,
+  roleSelected,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const [sortedColumn, setColumn] = useState(
+    _.prop("column")(getSortInfo(grantRequestsSort))
+  );
+  const [direction, setDirection] = useState(
+    _.prop("direction")(getSortInfo(grantRequestsSort))
+  );
+
+  useEffect(() => {
+    const { column: sortedColumn, direction: direction } =
+      getSortInfo(grantRequestsSort);
+    setColumn(sortedColumn);
+    setDirection(direction);
+  }, [grantRequestsSort]);
+
+  return (
+    <>
+      {!_.isEmpty(grantRequests) ? (
+        <Table sortable>
+          <Table.Header>
+            <Table.Row>
+              {roleSelected ? (
+                <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) === sortedColumn
+                      ? direction
+                      : null
+                  }
+                  className={_.path("sort.name")(column) ? "" : "disabled"}
+                  onClick={() => {
+                    sortColumn(
+                      column,
+                      sortGrantRequests,
+                      setDirection,
+                      setColumn,
+                      direction,
+                      sortedColumn
+                    );
+                  }}
+                />
+              ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {grantRequests.map((gr, key) => (
+              <GrantRequestRow
+                roleSelected={roleSelected}
+                key={key}
+                checked={isRowChecked && isRowChecked(gr)}
+                grantRequest={gr}
+                columns={columns}
+                onChange={() => checkRow && checkRow(gr)}
+              />
+            ))}
+          </Table.Body>
+        </Table>
+      ) : null}
+      {_.isEmpty(grantRequests) && !grantRequestsSearchLoading ? (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "grantRequests.empty" })}
+          </Header.Content>
+        </Header>
+      ) : null}
+    </>
+  );
+};
+
+GrantRequestsTable.propTypes = {
+  addAll: PropTypes.func,
+  checkedAll: PropTypes.bool,
+  checkRow: PropTypes.func,
+  isRowChecked: PropTypes.func,
+  grantRequestsSort: PropTypes.array,
+  columns: PropTypes.array,
+  grantRequests: PropTypes.array,
+  sortGrantRequests: PropTypes.func,
+  grantRequestsSearchLoading: PropTypes.bool,
+  roleSelected: PropTypes.string,
+};
+
+const mapStateToProps = (state) => ({
+  columns: getGrantRequestsSearchColumns(state),
+  grantRequests: state.grantRequestsSearch,
+  grantRequestsSearchLoading: state.grantRequestsSearchLoading,
+  grantRequestsSort: _.path("grantRequestSearchQuery.sort")(state),
+});
+
+export default connect(mapStateToProps, { sortGrantRequests })(
+  GrantRequestsTable
+);

package/src/components/GrantRoutes.js

@@ -7,9 +7,9 @@ import {
   GRANT_APPROVAL_RULE,
   GRANT_APPROVAL_RULE_EDIT,
   GRANT_APPROVAL_RULE_NEW,
-  GRANT_REQUEST_APPROVALS,
   GRANT_REQUEST,
   GRANT_REQUESTS,
+  GRANT_REQUESTS_APPROVALS_RESULT,
   GRANTS_REQUESTS_CHECKOUT,
   GRANTS,
   GRANT,
@@ -25,9 +25,11 @@ import GrantApprovalRuleNew from "./GrantApprovalRuleNew";
 import GrantApprovalRules from "./GrantApprovalRules";
 import GrantFiltersLoader from "./GrantFiltersLoader";
 import GrantRequest from "./GrantRequest";
-import GrantRequestApprovals from "./GrantRequestApprovals";
 import GrantRequestLoader from "./GrantRequestLoader";
 import GrantRequestsLoader from "./GrantRequestsLoader";
+import GrantRequestsSearchResults from "./GrantRequestsSearchResults";
+import GrantRequestApprovalResults from "./GrantRequestApprovalResults";
+import GrantRequestsSearchLoader from "./GrantRequestsSearchLoader";
 import Grants from "./Grants";
 import GrantsLoader from "./GrantsLoader";
 import MyGrantRequests from "./MyGrantRequests";
@@ -36,6 +38,7 @@ import StructuresGrantRequestView from "./StructuresGrantRequestView";
 import StructuresLoader from "./StructuresLoader";
 import StructureFiltersLoader from "./StructureFiltersLoader";
 import UserSearchFiltersLoader from "./UserSearchFiltersLoader";
+import GrantRequestsFiltersLoader from "./GrantRequestsFiltersLoader";
 
 const RolesLoader = React.lazy(() =>
   import("@truedat/auth/roles/components/RolesLoader")
@@ -81,20 +84,7 @@ export const GrantRoutes = ({ grantRequestLoaded }) => {
           </>
         )}
       />
-      <Route
-        path={GRANT_REQUEST_APPROVALS}
-        render={() => (
-          <>
-            <GrantRequestsLoader
-              defaultPayload={{
-                action: "approve",
-                status: "pending",
-              }}
-            />
-            <GrantRequestApprovals />
-          </>
-        )}
-      />
+
       <Route
         path={MY_GRANT_REQUESTS}
         render={() => (
@@ -158,6 +148,34 @@ export const GrantRoutes = ({ grantRequestLoaded }) => {
         render={() => (
           <>
             <Switch>
+              <Route
+                exact
+                path={GRANT_REQUESTS}
+                render={() => {
+                  const defaultFilters = {
+                    current_status: ["pending"],
+                  };
+                  return (
+                    <>
+                      <GrantRequestsSearchLoader
+                        defaultFilters={defaultFilters}
+                      />
+                      <GrantRequestsFiltersLoader
+                        defaultFilters={defaultFilters}
+                      />
+
+                      <GrantRequestsSearchResults
+                        defaultFilters={defaultFilters}
+                      />
+                    </>
+                  );
+                }}
+              />
+              <Route
+                path={GRANT_REQUESTS_APPROVALS_RESULT}
+                exact
+                render={() => <GrantRequestApprovalResults />}
+              />
               <Route
                 path={GRANT_REQUEST}
                 render={() => (

package/src/components/Grants.js

@@ -28,6 +28,7 @@ export const Grants = ({ grantsLoading, onlyMyGrants }) => (
         </Header.Subheader>
       </Header.Content>
     </Header>
+
     <Segment attached="bottom">
       <GrantsDownloadButton onlyMyGrants={onlyMyGrants} hasFilterApplied />
       <GrantsSearch />

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import GrantRequestApprovalResults from "../GrantRequestApprovalResults";
+
+describe("<GrantRequestApprovalResults />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "grantRequests.header.approve": "approve",
+        "grantRequests.header.approve.results": "results",
+        "grant_request.bulk_approval.content": "content",
+        "grant_request.bulk_approval.approved.header": "header",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<GrantRequestApprovalResults />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("with is rejection ", () => {
+    jest.mock("react-router-dom", () => ({
+      ...jest.requireActual("react-router-dom"),
+      useLocation: () => ({ state: [{ is_rejection: true }] }),
+    }));
+    const { container } = render(<GrantRequestApprovalResults />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import GrantRequestBulkActions from "../GrantRequestBulkActions";
+
+describe("<GrantRequestBulkActions />", () => {
+  const cleanSelectedGrantRequests = jest.fn();
+  const props = {
+    cleanSelectedGrantRequests,
+  };
+
+  const renderOpts = {
+    messages: {
+      en: {
+        "grantRequestApproval.form.role.select": "select",
+        "grantRequest.actions.reject": "reject",
+        "grantRequest.actions.approve": "approve_request",
+        "grantRequestApproval.form.comment.label": "label",
+        "grantRequestApproval.form.comment.placeholder": "placeholder",
+        "grantRequestApproval.form.approve": "approve_request",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <GrantRequestBulkActions {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import GrantRequestBulkApprovalForm from "../GrantRequestBulkApprovalForm";
+
+describe("<GrantRequestBulkApprovalForm />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "grantRequest.actions.reject": "reject",
+        "grantRequest.actions.approve": "approve",
+        "grantRequestApproval.form.comment.label": "label",
+        "grantRequestApproval.form.comment.placeholder": "placeholder",
+        "grantRequestApproval.form.approve": "approve",
+        "grantRequestApproval.form.reject": "reject",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const props = {
+      isRejection: true,
+    };
+    const { container } = render(
+      <GrantRequestBulkApprovalForm {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("test approve grant_request functionality", async () => {
+    const onSubmit = jest.fn();
+    const props = {
+      isRejection: true,
+      onSubmit,
+    };
+
+    const { getByRole } = render(
+      <GrantRequestBulkApprovalForm {...props} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(getByRole("button", { name: "reject" })).toBeEnabled();
+    });
+
+    // submit
+    await waitFor(() => {
+      userEvent.click(getByRole("button", { name: "reject" }));
+    });
+
+    await waitFor(() => expect(onSubmit).toBeCalledTimes(1));
+  });
+});

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import GrantRequestBulkApprovalPopup from "../GrantRequestBulkApprovalPopup";
+
+describe("<GrantRequestBulkApprovalPopup />", () => {
+  const onSubmit = jest.fn();
+  const props = {
+    onSubmit,
+    isRejection: false,
+    content: "button content",
+    primary: true,
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(<GrantRequestBulkApprovalPopup {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+
+import GrantRequestBulkRoleSelector from "../GrantRequestBulkRoleSelector";
+
+describe("<GrantRequestBulkRoleSelector />", () => {
+  const onChange = jest.fn();
+  const props = {
+    roles: ["foo", "bar"],
+    disabled: false,
+    onChange,
+  };
+
+  const renderOpts = {
+    messages: {
+      en: {
+        "grantRequestApproval.form.role.select": "select",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <GrantRequestBulkRoleSelector {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("test select role", async () => {
+    const { getByRole } = render(
+      <GrantRequestBulkRoleSelector {...props} />,
+      renderOpts
+    );
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+    });
+
+    userEvent.click(getByRole("option", { name: /bar/i }));
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith("bar");
+    });
+  });
+});

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

@@ -0,0 +1,20 @@
+import { makeMapStateToProps } from "../GrantRequestsFiltersLoader";
+
+describe("makeMapStateToProps", () => {
+  const defaultFilters = { status: ["draft"] };
+  const mapStateToProps = makeMapStateToProps({});
+
+  it("returns a function which selects a combination of active and default filters", () => {
+    const state = {
+      grantRequestsActiveFilters: { foo: ["bar"] },
+      grantRequestsSelectedFilter: "status",
+    };
+    const props = { defaultFilters };
+
+    expect(mapStateToProps(state, props)).toEqual({
+      filters: { status: ["draft"], foo: ["bar"] },
+      selectedFilter: "status",
+      defaultFilters,
+    });
+  });
+});