@truedat/dd 5.15.2 → 5.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.15.2",
+  "version": "5.16.3",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.15.2",
-    "@truedat/core": "5.15.2",
-    "@truedat/df": "5.15.2",
+    "@truedat/auth": "5.16.3",
+    "@truedat/core": "5.16.3",
+    "@truedat/df": "5.16.3",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "c1454a0ebd579263c17b3abea9715fc1ca3cf9ae"
+  "gitHead": "04f0a731f5a7fb410b71939dcce10e8c5c67c37f"
 }

package/src/api.js

@@ -15,6 +15,9 @@ const API_GRANT_REQUEST_APPROVALS = "/api/grant_requests/:id/approvals";
 const API_GRANT_REQUEST_STATUS = "/api/grant_requests/:id/status";
 const API_GRANT_REQUEST_GROUP = "/api/grant_request_groups";
 const API_GRANT_REQUESTS = "/api/grant_requests";
+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_SEARCH = "/api/grants/search";
@@ -63,10 +66,13 @@ export {
   API_GRANT,
   API_GRANT_FILTERS_SEARCH,
   API_GRANT_REQUEST,
+  API_GRANT_REQUEST_BULK_APPROVAL,
   API_GRANT_REQUEST_APPROVALS,
   API_GRANT_REQUEST_STATUS,
   API_GRANT_REQUEST_GROUP,
   API_GRANT_REQUESTS,
+  API_GRANT_REQUESTS_SEARCH,
+  API_GRANT_REQUESTS_FILTERS_SEARCH,
   API_GRANTS_SEARCH,
   API_GRAPH,
   API_GRAPH_HASH,

package/src/components/GrantRequestApprovalResults.js

@@ -0,0 +1,40 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useIntl } from "react-intl";
+import { Breadcrumb, Message } from "semantic-ui-react";
+import { useLocation, Link } from "react-router-dom";
+import { GRANT_REQUESTS } from "@truedat/core/routes";
+
+export default function GrantRequestApprovalResults() {
+  const { state } = useLocation();
+  const { formatMessage } = useIntl();
+  const count = _.size(state);
+  const isRejection = _.prop("[0].is_rejection")(state);
+  return (
+    <>
+      <Breadcrumb>
+        <Breadcrumb.Section as={Link} to={GRANT_REQUESTS} active={false}>
+          {formatMessage({ id: "grantRequests.header.approve" })}
+        </Breadcrumb.Section>
+
+        <Breadcrumb.Divider icon="right angle" />
+        <Breadcrumb.Section active>
+          {formatMessage({ id: "grantRequests.header.approve.results" })}
+        </Breadcrumb.Section>
+      </Breadcrumb>
+      <Message positive={!isRejection} warning={isRejection}>
+        <Message.Header>
+          {formatMessage({
+            id: `grant_request.bulk_approval.${
+              isRejection ? "rejected" : "approved"
+            }.header`,
+          })}
+        </Message.Header>
+        {formatMessage(
+          { id: "grant_request.bulk_approval.content" },
+          { count }
+        )}
+      </Message>
+    </>
+  );
+}

package/src/components/GrantRequestBulkActions.js

@@ -0,0 +1,136 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect, useRef } from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { Grid } from "semantic-ui-react";
+import { makeSearchQuerySelector } from "@truedat/core/selectors";
+import { GRANT_REQUESTS_APPROVALS_RESULT } from "@truedat/core/routes";
+import { useGrantRequestBulkApproval } from "../hooks/useGrantRequest";
+import { fetchGrantRequestsSearch } from "../routines";
+import GrantRequestBulkApprovalPopup from "./GrantRequestBulkApprovalPopup";
+import GrantRequestBulkRoleSelector from "./GrantRequestBulkRoleSelector";
+
+const usePrevious = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+export const GrantRequestBulkActions = ({
+  selectedGrantRequests,
+  loading,
+  onChangeRole,
+  rolesPermission,
+  roleSelected,
+  query,
+  cleanSelectedGrantRequests,
+  zeroResults,
+}) => {
+  const history = useHistory();
+  const [saving, setSaving] = useState();
+  const { formatMessage } = useIntl();
+  const { trigger } = useGrantRequestBulkApproval();
+
+  const previousQuery = usePrevious(query);
+  const clean = !_.isEqual(query)(previousQuery);
+
+  useEffect(() => {
+    cleanSelectedGrantRequests();
+  }, [clean]);
+
+  const onSubmit = ({ comment, isRejection }) => {
+    setSaving(true);
+    const payload = {
+      comment,
+      is_rejection: isRejection,
+      role: roleSelected,
+    };
+    const must = _.prop("must")(query);
+    trigger(
+      _.isEmpty(selectedGrantRequests)
+        ? {
+            ...payload,
+            must,
+          }
+        : {
+            ...payload,
+            must: { id: selectedGrantRequests },
+          }
+    ).then((data) => {
+      history.push(GRANT_REQUESTS_APPROVALS_RESULT, _.prop("data.data")(data));
+    });
+  };
+
+  return (
+    <div className="grant-requests-bulk-actions">
+      <Grid.Column width={4} textAlign="right">
+        <GrantRequestBulkRoleSelector
+          roles={rolesPermission}
+          disabled={_.size(rolesPermission) == 1}
+          selectedRole={roleSelected}
+          onChange={onChangeRole}
+        />
+
+        <GrantRequestBulkApprovalPopup
+          onSubmit={onSubmit}
+          content={formatMessage({ id: "grantRequest.actions.approve" })}
+          disabled={
+            _.isNull(roleSelected) ||
+            loading ||
+            zeroResults ||
+            _.size(selectedGrantRequests) == 0
+          }
+          loading={saving}
+          primary
+        />
+        <GrantRequestBulkApprovalPopup
+          onSubmit={onSubmit}
+          isRejection
+          content={formatMessage({ id: "grantRequest.actions.reject" })}
+          disabled={
+            _.isNull(roleSelected) ||
+            loading ||
+            zeroResults ||
+            _.size(selectedGrantRequests) == 0
+          }
+          loading={saving}
+          secondary
+        />
+      </Grid.Column>
+    </div>
+  );
+};
+
+GrantRequestBulkActions.propTypes = {
+  roleSelected: PropTypes.string,
+  onChangeRole: PropTypes.func,
+  rolesPermission: PropTypes.array,
+  selectedGrantRequests: PropTypes.array,
+  role: PropTypes.string,
+  addGrantRequestsFilter: PropTypes.func,
+  toggleGrantRequestsFilterValue: PropTypes.func,
+  createGrantRequestBulkApproval: PropTypes.func,
+  closeGrantRequestsFilter: PropTypes.func,
+  loading: PropTypes.bool,
+  zeroResults: PropTypes.bool,
+};
+
+const makeMapStateToProps = () => {
+  const searchQuerySelector = makeSearchQuerySelector(
+    "grantRequestSearchQuery",
+    "grantRequestsActiveFilters"
+  );
+
+  const mapStateToProps = (state, props) => ({
+    query: searchQuerySelector(state, { ...props, pageSize: 1000 }),
+  });
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps, { fetchGrantRequestsSearch })(
+  GrantRequestBulkActions
+);

package/src/components/GrantRequestBulkApprovalForm.js

@@ -0,0 +1,69 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Button, Container, Form, Header } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+
+export const GrantRequestBulkApprovalForm = ({ isRejection, onSubmit }) => {
+  const { formatMessage } = useIntl();
+
+  const { handleSubmit, control } = useForm({
+    mode: "all",
+    defaultValues: {
+      comment: "",
+      isRejection,
+    },
+  });
+
+  return (
+    <Container className="grant-requests-bulk-approval-form">
+      <Header
+        as="h2"
+        content={formatMessage({
+          id: isRejection
+            ? "grantRequestApproval.form.reject"
+            : "grantRequestApproval.form.approve",
+        })}
+      />
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          control={control}
+          name="comment"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.TextArea
+              data-testid="comment-id"
+              label={formatMessage({
+                id: "grantRequestApproval.form.comment.label",
+              })}
+              placeholder={formatMessage({
+                id: "grantRequestApproval.form.comment.placeholder",
+              })}
+              value={value}
+              onBlur={onBlur}
+              onChange={(_, { value }) => onChange(value)}
+            />
+          )}
+        />
+        <div className="actions">
+          <Button
+            type="submit"
+            primary
+            content={formatMessage({
+              id: isRejection
+                ? "grantRequest.actions.reject"
+                : "grantRequest.actions.approve",
+            })}
+          />
+        </div>
+      </Form>
+    </Container>
+  );
+};
+
+GrantRequestBulkApprovalForm.propTypes = {
+  isRejection: PropTypes.bool,
+  onSubmit: PropTypes.func,
+};
+
+export default GrantRequestBulkApprovalForm;

package/src/components/GrantRequestBulkApprovalPopup.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Button, Popup } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import GrantRequestBulkApprovalForm from "./GrantRequestBulkApprovalForm";
+
+export const GrantRequestBulkApprovalPopup = ({
+  onSubmit,
+  isRejection,
+  ...buttonProps
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popup
+      on="click"
+      basic
+      flowing
+      content={
+        <GrantRequestBulkApprovalForm
+          onSubmit={(item) => onSubmit(item, () => setOpen(false))}
+          isRejection={isRejection}
+        />
+      }
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      open={open}
+      position="bottom right"
+      size="large"
+      positionFixed
+      trigger={
+        <Button className="button icon group-actions" {...buttonProps} />
+      }
+    />
+  );
+};
+
+GrantRequestBulkApprovalPopup.propTypes = {
+  grantRequest: PropTypes.object,
+  isRejection: PropTypes.bool,
+  saving: PropTypes.bool,
+  onSubmit: PropTypes.func,
+};
+export default GrantRequestBulkApprovalPopup;

package/src/components/GrantRequestBulkRoleSelector.js

@@ -0,0 +1,41 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Dropdown } from "semantic-ui-react";
+
+export const GrantRequestBulkRoleSelector = ({
+  roles,
+  selectedRole,
+  disabled,
+  onChange,
+}) => {
+  const { formatMessage } = useIntl();
+  const options = _.flow(
+    _.sortBy(_.identity),
+    _.map((role) => ({ key: role, value: role, text: role }))
+  )(roles);
+
+  return (
+    <Dropdown
+      className="grant-requests-bulk-role-selector"
+      placeholder={formatMessage({
+        id: "grantRequestApproval.form.role.select",
+      })}
+      selection
+      disabled={disabled}
+      options={options}
+      onChange={(_e, { value }) => onChange(value)}
+      value={selectedRole}
+    />
+  );
+};
+
+GrantRequestBulkRoleSelector.propTypes = {
+  roles: PropTypes.array,
+  selectedRole: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default GrantRequestBulkRoleSelector;

package/src/components/GrantRequestRow.js

@@ -0,0 +1,62 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Checkbox, Table } from "semantic-ui-react";
+import { useHistory } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import { columnDecoratorComponent } from "@truedat/core/services";
+
+export const GrantRequestRow = ({
+  active,
+  checked,
+  columns,
+  disabled,
+  onClick,
+  onChange,
+  grantRequest,
+  roleSelected,
+}) => {
+  const history = useHistory();
+  const createdById = _.path("created_by_id")(grantRequest);
+  const userId = _.path("user_id")(grantRequest);
+
+  return _.isEmpty(columns) || _.isEmpty(grantRequest) ? null : (
+    <Table.Row
+      active={active}
+      disabled={disabled}
+      onClick={() => onClick && onClick(grantRequest)}
+      warning={createdById !== userId}
+    >
+      {roleSelected ? (
+        <Table.Cell collapsing width="1" textAlign="center">
+          <Checkbox
+            id={grantRequest.id}
+            checked={checked}
+            onChange={onChange}
+          />
+        </Table.Cell>
+      ) : null}
+      {columns.map((column, key) => (
+        <Table.Cell
+          key={key}
+          textAlign={column.textAlign}
+          onClick={() => history.push(linkTo.GRANT_REQUEST(grantRequest))}
+          content={columnDecoratorComponent(column)(grantRequest)}
+        />
+      ))}
+    </Table.Row>
+  );
+};
+
+GrantRequestRow.propTypes = {
+  active: PropTypes.bool,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  grantRequest: PropTypes.object,
+  columns: PropTypes.array,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  roleSelected: PropTypes.string,
+};
+
+export default GrantRequestRow;

package/src/components/GrantRequestSearchFilters.js

@@ -0,0 +1,22 @@
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { AvailableFilters } from "@truedat/core/components";
+import { addGrantRequestsFilter, resetGrantRequestsFilters } from "../routines";
+import { getGrantRequestsAvailableFilters } from "../selectors";
+
+const mapStateToProps = (state) => ({
+  filters: getGrantRequestsAvailableFilters(state),
+  disabled: state.grantRequestsFiltersLoading,
+  loading: state.grantRequestsFiltersLoading,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      addFilter: addGrantRequestsFilter,
+      resetFilters: resetGrantRequestsFilters,
+    },
+    dispatch
+  );
+
+export default connect(mapStateToProps, mapDispatchToProps)(AvailableFilters);

package/src/components/GrantRequestsFiltersLoader.js

@@ -0,0 +1,33 @@
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { FiltersLoader } from "@truedat/core/components";
+import { makeActiveFiltersSelector } from "@truedat/core/selectors";
+import {
+  clearGrantRequestsFilters,
+  fetchGrantRequestsFilters,
+} from "../routines";
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      clearFilters: clearGrantRequestsFilters,
+      fetchFilters: fetchGrantRequestsFilters,
+    },
+    dispatch
+  );
+
+export const makeMapStateToProps = ({}) => {
+  const activeFiltersSelector = makeActiveFiltersSelector(
+    "grantRequestsActiveFilters"
+  );
+  const mapStateToProps = (state, props) => {
+    return {
+      selectedFilter: state.grantRequestsSelectedFilter,
+      filters: activeFiltersSelector(state, props),
+      defaultFilters: props?.defaultFilters,
+    };
+  };
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(FiltersLoader);

package/src/components/GrantRequestsLabelResults.js

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
+import { Label } from "semantic-ui-react";
+
+export const GrantRequestsLabelResults = ({
+  grantRequestCount,
+  grantRequestsSearchLoading,
+  grantRequestToExecute,
+  roleSelected,
+}) => (
+  <>
+    <Label className="grant-requests-bulk-label-results">
+      {grantRequestsSearchLoading ? (
+        <FormattedMessage id="grantRequests.searching" />
+      ) : (
+        <FormattedMessage
+          id="grantRequests.retrieved.results"
+          values={{ count: grantRequestCount }}
+        />
+      )}
+    </Label>
+    {!grantRequestsSearchLoading && roleSelected ? (
+      <Label className="grant-requests-bulk-label-results">
+        <FormattedMessage
+          id="grantRequests.bulk.selected"
+          values={{
+            count: grantRequestToExecute,
+          }}
+        />
+      </Label>
+    ) : null}
+  </>
+);
+
+GrantRequestsLabelResults.propTypes = {
+  grantRequestCount: PropTypes.number,
+  grantRequestToExecute: PropTypes.number,
+  grantRequestsSearchLoading: PropTypes.bool,
+  roleSelected: PropTypes.string,
+};
+
+const mapStateToProps = ({
+  grantRequestCount,
+  grantRequestsSearchLoading,
+}) => ({
+  grantRequestCount,
+  grantRequestsSearchLoading,
+});
+
+export default connect(mapStateToProps)(GrantRequestsLabelResults);

package/src/components/GrantRequestsSearch.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Input } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { searchGrantRequests } from "../routines";
+import GrantRequestSearchFilters from "./GrantRequestSearchFilters";
+
+export const GrantRequestsSearch = ({ query, searchGrantRequests }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Input
+      value={query}
+      onChange={(_e, data) => searchGrantRequests({ query: data.value })}
+      icon={{ name: "search", link: true }}
+      iconPosition="left"
+      action={<GrantRequestSearchFilters />}
+      placeholder={formatMessage({ id: "grantRequest.search.placeholder" })}
+    />
+  );
+};
+
+GrantRequestsSearch.propTypes = {
+  query: PropTypes.string,
+  searchGrantRequests: PropTypes.func,
+};
+
+const mapStateToProps = ({ grantRequestSearchQuery }) => ({
+  query: grantRequestSearchQuery?.query,
+});
+
+export default connect(mapStateToProps, {
+  searchGrantRequests,
+})(GrantRequestsSearch);

package/src/components/GrantRequestsSearchLoader.js

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { makeSearchQuerySelector } from "@truedat/core/selectors";
+import {
+  clearGrantRequestsSearch,
+  fetchGrantRequestsSearch,
+} from "../routines";
+
+export const GrantRequestsSearchLoader = ({
+  clearGrantRequestsSearch,
+  fetchGrantRequestsSearch,
+  query,
+}) => {
+  useEffect(() => {
+    return () => {
+      clearGrantRequestsSearch();
+    };
+  }, [clearGrantRequestsSearch]);
+  useEffect(() => {
+    fetchGrantRequestsSearch(query);
+  }, [fetchGrantRequestsSearch, query]);
+  return null;
+};
+
+GrantRequestsSearchLoader.propTypes = {
+  clearGrantRequestsSearch: PropTypes.func,
+  fetchGrantRequestsSearch: PropTypes.func,
+  query: PropTypes.object,
+};
+
+const makeMapStateToProps = () => {
+  const searchQuerySelector = makeSearchQuerySelector(
+    "grantRequestSearchQuery",
+    "grantRequestsActiveFilters"
+  );
+
+  const mapStateToProps = (state, props) => ({
+    query: searchQuerySelector(state, { ...props, pageSize: 1000 }),
+  });
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps, {
+  clearGrantRequestsSearch,
+  fetchGrantRequestsSearch,
+})(GrantRequestsSearchLoader);