@truedat/dd 6.10.1 → 6.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "6.10.1",
+  "version": "6.10.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": "6.10.1",
-    "@truedat/core": "6.10.1",
-    "@truedat/df": "6.10.1",
+    "@truedat/auth": "6.10.3",
+    "@truedat/core": "6.10.3",
+    "@truedat/df": "6.10.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": "24842b079c16460f87d1fae762d9aab6feb6f8db"
+  "gitHead": "a1cf73b088952f0488a80001bef16a45f40b3829"
 }

package/src/components/GrantRequestBulkActions.js

@@ -1,61 +1,66 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect, useRef } from "react";
-import { connect } from "react-redux";
+import React, { useState, useEffect } from "react";
 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 { Dropdown } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { GRANT_REQUESTS_APPROVALS_RESULT } from "@truedat/core/routes";
-import { useGrantRequestBulkApproval } from "../hooks/useGrantRequest";
-import { fetchGrantRequestsSearch } from "../routines";
+import { useGrantRequestBulkApproval } from "@truedat/dd/hooks/useGrantRequest";
 import GrantRequestBulkApprovalPopup from "./GrantRequestBulkApprovalPopup";
-import GrantRequestBulkRoleSelector from "./GrantRequestBulkRoleSelector";
 
-const usePrevious = (value) => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
+// import GrantRequestBulkRoleSelector from "./GrantRequestBulkRoleSelector";
 
 export const GrantRequestBulkActions = ({
   selectedGrantRequests,
-  loading,
-  onChangeRole,
-  rolesPermission,
-  roleSelected,
-  query,
   cleanSelectedGrantRequests,
-  zeroResults,
-  canApprove,
 }) => {
+  const {
+    searchData,
+    loading,
+    toggleHiddenFilterValue,
+    resetFilters,
+    searchMust,
+    cleanQuery,
+  } = useSearchContext();
   const history = useHistory();
+  const [selectedRole, setSelectedRole] = useState(null);
   const [saving, setSaving] = useState();
   const { formatMessage } = useIntl();
   const { trigger } = useGrantRequestBulkApproval();
 
-  const previousQuery = usePrevious(query);
-  const clean = !_.isEqual(query)(previousQuery);
+  const selectRole = (role) => {
+    setSelectedRole(role);
+    resetFilters();
+    cleanSelectedGrantRequests();
+    cleanQuery();
+    toggleHiddenFilterValue({
+      filter: "must_not_approved_by",
+      value: [role],
+    });
+  };
+
+  const rolesPermission = _.propOr([], "_permissions")(searchData);
+  const grantRequests = _.propOr([], "data")(searchData);
+  const zeroResults = _.isEmpty(grantRequests);
 
+  const firstRole = _.first(rolesPermission);
   useEffect(() => {
-    cleanSelectedGrantRequests();
-  }, [clean]);
+    selectRole(firstRole);
+  }, [firstRole]);
 
   const onSubmit = ({ comment, isRejection }) => {
     setSaving(true);
     const payload = {
       comment,
       is_rejection: isRejection,
-      role: roleSelected,
+      role: selectedRole,
     };
-    const must = _.prop("must")(query);
     trigger(
       _.isEmpty(selectedGrantRequests)
         ? {
             ...payload,
-            must,
+            must: searchMust,
           }
         : {
             ...payload,
@@ -66,74 +71,46 @@ export const GrantRequestBulkActions = ({
     });
   };
 
+  const roleOptions = _.flow(
+    _.sortBy(_.identity),
+    _.map((role) => ({ key: role, value: role, text: role }))
+  )(rolesPermission);
+
   return (
-    <div className="grant-requests-bulk-actions">
-      <Grid.Column width={4} textAlign="right">
-        <GrantRequestBulkRoleSelector
-          roles={rolesPermission}
-          disabled={_.size(rolesPermission) == 1 || !canApprove}
-          selectedRole={roleSelected}
-          onChange={onChangeRole}
-        />
+    <>
+      <Dropdown
+        className="grant-requests-bulk-role-selector"
+        placeholder={formatMessage({
+          id: "grantRequestApproval.form.role.select",
+        })}
+        selection
+        options={roleOptions}
+        onChange={(_e, { value }) => selectRole(value)}
+        value={selectedRole}
+      />
 
-        <GrantRequestBulkApprovalPopup
-          onSubmit={onSubmit}
-          content={formatMessage({ id: "grantRequest.actions.approve" })}
-          disabled={
-            _.isNull(roleSelected) ||
-            loading ||
-            zeroResults ||
-            _.size(selectedGrantRequests) == 0 ||
-            !canApprove
-          }
-          loading={saving}
-          primary
-        />
-        <GrantRequestBulkApprovalPopup
-          onSubmit={onSubmit}
-          isRejection
-          content={formatMessage({ id: "grantRequest.actions.reject" })}
-          disabled={
-            _.isNull(roleSelected) ||
-            loading ||
-            zeroResults ||
-            _.size(selectedGrantRequests) == 0 ||
-            !canApprove
-          }
-          loading={saving}
-          secondary
-        />
-      </Grid.Column>
-    </div>
+      <GrantRequestBulkApprovalPopup
+        onSubmit={onSubmit}
+        content={formatMessage({ id: "grantRequest.actions.approve" })}
+        disabled={_.isNil(selectedRole) || loading || zeroResults}
+        loading={saving}
+        primary
+      />
+      <GrantRequestBulkApprovalPopup
+        onSubmit={onSubmit}
+        isRejection
+        content={formatMessage({ id: "grantRequest.actions.reject" })}
+        disabled={_.isNil(selectedRole) || loading || zeroResults}
+        loading={saving}
+        secondary
+      />
+    </>
   );
 };
 
 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;
+  cleanSelectedGrantRequests: PropTypes.func,
 };
 
-export default connect(makeMapStateToProps, { fetchGrantRequestsSearch })(
-  GrantRequestBulkActions
-);
+export default GrantRequestBulkActions;

package/src/components/GrantRequestBulkApprovalForm.js

@@ -47,6 +47,7 @@ export const GrantRequestBulkApprovalForm = ({ isRejection, onSubmit }) => {
         />
         <div className="actions">
           <Button
+            data-testid="approve-button-id"
             type="submit"
             primary
             content={formatMessage({

package/src/components/GrantRequestBulkRoleSelector.js

@@ -7,7 +7,6 @@ import { Dropdown } from "semantic-ui-react";
 export const GrantRequestBulkRoleSelector = ({
   roles,
   selectedRole,
-  disabled,
   onChange,
 }) => {
   const { formatMessage } = useIntl();
@@ -24,7 +23,6 @@ export const GrantRequestBulkRoleSelector = ({
       })}
       clearable
       selection
-      disabled={disabled}
       options={options}
       onChange={(_e, { value }) => onChange(value)}
       value={selectedRole}
@@ -35,7 +33,6 @@ export const GrantRequestBulkRoleSelector = ({
 GrantRequestBulkRoleSelector.propTypes = {
   roles: PropTypes.array,
   selectedRole: PropTypes.string,
-  disabled: PropTypes.bool,
   onChange: PropTypes.func,
 };
 

package/src/components/GrantRequestRow.js

@@ -12,10 +12,9 @@ export const GrantRequestRow = ({
   columns,
   disabled,
   onClick,
-  onChange,
+  onCheckboxChange,
   grantRequest,
-  roleSelected,
-  canApprove,
+  approveView,
 }) => {
   const history = useHistory();
   const createdById = _.path("created_by_id")(grantRequest);
@@ -28,12 +27,12 @@ export const GrantRequestRow = ({
       onClick={() => onClick && onClick(grantRequest)}
       warning={createdById !== userId}
     >
-      {roleSelected && canApprove ? (
+      {approveView ? (
         <Table.Cell collapsing width="1" textAlign="center">
           <Checkbox
             id={grantRequest.id}
             checked={checked}
-            onChange={onChange}
+            onChange={onCheckboxChange}
           />
         </Table.Cell>
       ) : null}
@@ -58,13 +57,12 @@ export const GrantRequestRow = ({
 
 GrantRequestRow.propTypes = {
   active: PropTypes.bool,
-  canApprove: PropTypes.bool,
+  approveView: PropTypes.bool,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   grantRequest: PropTypes.object,
-  roleSelected: PropTypes.string,
   columns: PropTypes.array,
-  onChange: PropTypes.func,
+  onCheckboxChange: PropTypes.func,
   onClick: PropTypes.func,
 };
 

package/src/components/GrantRequestsLabelResults.js

@@ -1,52 +1,41 @@
 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";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 
-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,
-          }}
-        />
+export const GrantRequestsLabelResults = ({ selectedCount, approveView }) => {
+  const { count, loading } = useSearchContext();
+
+  return (
+    <div className="grant-requests-bulk-label-results">
+      <Label>
+        {loading ? (
+          <FormattedMessage id="grantRequests.searching" />
+        ) : (
+          <FormattedMessage
+            id="grantRequests.retrieved.results"
+            values={{ count }}
+          />
+        )}
       </Label>
-    ) : null}
-  </>
-);
+      {!loading && approveView ? (
+        <Label>
+          <FormattedMessage
+            id="grantRequests.bulk.selected"
+            values={{
+              count: selectedCount || count,
+            }}
+          />
+        </Label>
+      ) : null}
+    </div>
+  );
+};
 
 GrantRequestsLabelResults.propTypes = {
-  grantRequestCount: PropTypes.number,
-  grantRequestToExecute: PropTypes.number,
-  grantRequestsSearchLoading: PropTypes.bool,
-  roleSelected: PropTypes.string,
+  selectedCount: PropTypes.number,
+  approveView: PropTypes.bool,
 };
 
-const mapStateToProps = ({
-  grantRequestCount,
-  grantRequestsSearchLoading,
-}) => ({
-  grantRequestCount,
-  grantRequestsSearchLoading,
-});
-
-export default connect(mapStateToProps)(GrantRequestsLabelResults);
+export default GrantRequestsLabelResults;

package/src/components/GrantRequestsSearchResults.js

@@ -1,65 +1,48 @@
 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,
-  removeGrantRequestsFilter,
-} from "../routines";
+  Header,
+  Button,
+  Icon,
+  Segment,
+  Dimmer,
+  Loader,
+  GridColumn,
+  GridRow,
+} from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import Pagination from "@truedat/core/search/Pagination";
 import GrantRequestBulkActions from "./GrantRequestBulkActions";
-import GrantRequestsSearch from "./GrantRequestsSearch";
-import GrantRequestsSelectedFilters from "./GrantRequestsSelectedFilters";
 import GrantRequestsTable from "./GrantRequestsTable";
 import GrantRequestsLabelResults from "./GrantRequestsLabelResults";
-import GrantRequestPagination from "./GrantRequestPagination";
-
-export const GrantRequestsSearchResults = ({
-  grantRequests,
-  loading,
-  rolesPermission,
-  defaultFilters,
-  activeFilters,
-  toggleGrantRequestsFilterValue,
-  removeGrantRequestsFilter,
-}) => {
+
+export const GrantRequestsSearchResults = () => {
+  const { searchData, loading, setOnSearchChange, setHiddenFilters } =
+    useSearchContext();
+
+  const rolesPermission = _.propOr([], "_permissions")(searchData);
+  const grantRequests = _.propOr([], "data")(searchData);
+  const hasApproveRoles = !_.isEmpty(rolesPermission);
+
   const [selectedGrantRequests, setSelectedGrantRequests] = useState([]);
-  const [roleSelected, setSelectedRole] = useState(null);
-  const [canApprove, setCanApprove] = useState(false);
+  const [approveView, setApproveView] = useState(hasApproveRoles);
 
-  const isOnlyPending = (status) => {
-    return _.size(_.uniq(status)) === 1 && _.includes("pending", status);
-  };
+  const cleanSelection = () => setSelectedGrantRequests([]);
 
   useEffect(() => {
-    if (_.size(rolesPermission) == 1) {
-      setSelectedRole(_.first(rolesPermission));
-    }
-  }, [rolesPermission]);
+    setOnSearchChange(() => cleanSelection);
+  }, []);
 
   useEffect(() => {
-    if (canApprove && roleSelected) {
-      toggleGrantRequestsFilterValue({
-        filter: "must_not_approved_by",
-        value: [roleSelected],
-      });
-    } else {
-      removeGrantRequestsFilter({ filter: "must_not_approved_by" });
-    }
-  }, [canApprove, roleSelected]);
+    setApproveView(hasApproveRoles);
+  }, [hasApproveRoles]);
 
-  useEffect(() => {
-    const canApprove = _.flow(
-      _.propOr([], "current_status"),
-      _.cond([
-        [_.isEmpty, _.negate(_.stubTrue)],
-        [isOnlyPending, _.stubTrue],
-        [_.stubTrue, _.negate(_.stubTrue)],
-      ])
-    )(activeFilters);
-    setCanApprove(canApprove);
-  }, [activeFilters]);
+  const setSearchView = () => {
+    setApproveView(false);
+    setHiddenFilters({});
+  };
 
   const allChecked = () => {
     const ids = _.map(_.prop("id"))(grantRequests);
@@ -106,9 +89,6 @@ export const GrantRequestsSearchResults = ({
     return _.some((selectedId) => _.eq(id, selectedId))(selectedGrantRequests);
   };
 
-  const loadingDone =
-    _.size(rolesPermission) > 1 || (!loading && !_.isNull(roleSelected));
-
   return (
     <Segment>
       <Header as="h2">
@@ -122,69 +102,70 @@ export const GrantRequestsSearchResults = ({
       </Header>
 
       <Segment attached="bottom">
-        <GrantRequestBulkActions
-          selectedGrantRequests={selectedGrantRequests}
-          rolesPermission={rolesPermission}
-          onChangeRole={setSelectedRole}
-          roleSelected={roleSelected}
-          loading={loading}
-          cleanSelectedGrantRequests={() => setSelectedGrantRequests([])}
-          defaultFilters={defaultFilters}
-          zeroResults={_.isEmpty(grantRequests)}
-          canApprove={canApprove}
-        />
-
-        <GrantRequestsSearch />
-        <GrantRequestsSelectedFilters />
+        <div className="grant-requests-bulk-actions">
+          <div>
+            <SearchWidget />
+          </div>
+          <div>
+            {hasApproveRoles ? (
+              <>
+                <GridRow className="grant-requests-approve-actions">
+                  <GridColumn width={5}>
+                    <Button.Group>
+                      <Button
+                        active={approveView}
+                        icon
+                        onClick={() => setApproveView(true)}
+                      >
+                        Approve view
+                      </Button>
+                      <Button
+                        active={!approveView}
+                        icon
+                        onClick={() => setSearchView()}
+                      >
+                        Search view
+                      </Button>
+                    </Button.Group>
+                  </GridColumn>
+                </GridRow>
+
+                {approveView ? (
+                  <GridRow>
+                    <GridColumn textAlign="right" width={5}>
+                      <GrantRequestBulkActions
+                        selectedGrantRequests={selectedGrantRequests}
+                        cleanSelectedGrantRequests={cleanSelection}
+                      />
+                    </GridColumn>
+                  </GridRow>
+                ) : null}
+              </>
+            ) : null}
+          </div>
+        </div>
+
         <Dimmer.Dimmable dimmed={loading}>
           <Dimmer active={loading} inverted>
             <Loader />
           </Dimmer>
 
-          {loadingDone ? (
-            <>
-              <GrantRequestsLabelResults
-                roleSelected={roleSelected}
-                grantRequestToExecute={_.size(selectedGrantRequests)}
-              />
-              <GrantRequestsTable
-                addAll={addAll}
-                canApprove={canApprove}
-                checkedAll={allChecked()}
-                checkRow={checkRow}
-                isRowChecked={isRowChecked}
-                selectedGrantRequests={selectedGrantRequests}
-                roleSelected={roleSelected}
-              />
-            </>
-          ) : null}
-          <GrantRequestPagination />
+          <GrantRequestsLabelResults
+            approveView={approveView}
+            selectedCount={_.size(selectedGrantRequests)}
+          />
+          <GrantRequestsTable
+            approveView={approveView}
+            addAll={addAll}
+            checkedAll={allChecked()}
+            checkRow={checkRow}
+            isRowChecked={isRowChecked}
+          />
+          <Pagination />
         </Dimmer.Dimmable>
       </Segment>
     </Segment>
   );
 };
 
-GrantRequestsSearchResults.propTypes = {
-  grantRequests: PropTypes.array,
-  loading: PropTypes.bool,
-  role: PropTypes.string,
-  rolesPermission: PropTypes.array,
-  defaultFilters: PropTypes.object,
-  activeFilters: PropTypes.object,
-  toggleGrantRequestsFilterValue: PropTypes.func,
-  removeGrantRequestsFilter: PropTypes.func,
-};
-
-const mapStateToProps = (state) => ({
-  loading:
-    state.grantRequestsSearchLoading || state.grantRequestPermissionsLoading,
-  grantRequests: state.grantRequestsSearch,
-  rolesPermission: state.grantRequestPermissions,
-  activeFilters: state.grantRequestsActiveFilters,
-});
-
-export default connect(mapStateToProps, {
-  toggleGrantRequestsFilterValue,
-  removeGrantRequestsFilter,
-})(GrantRequestsSearchResults);
+export default GrantRequestsSearchResults;