@truedat/dd 4.51.2 → 4.51.4

package/src/components/StructureGrantCartCheckout.js

@@ -8,7 +8,7 @@ import { HistoryBackButton } from "@truedat/core/components";
 import { useIntl, FormattedMessage } from "react-intl";
 import { checkoutGrantRequest } from "../routines";
 import StructureGrantCart from "./StructureGrantCart";
-import StructureGrantCartTemplate from "./StructureGrantCartTemplate";
+import StructureGrantCartInformation from "./StructureGrantCartInformation";
 
 export const StructureGrantCartCheckout = ({
   grantRequestsCart,
@@ -16,7 +16,7 @@ export const StructureGrantCartCheckout = ({
 }) => {
   const { formatMessage } = useIntl();
 
-  const { template, templateContent, modificationGrant, validCart } =
+  const { template, templateContent, modificationGrant, validCart, user } =
     grantRequestsCart;
 
   const checkout = () => {
@@ -30,11 +30,12 @@ export const StructureGrantCartCheckout = ({
       };
     })(grantRequestsCart.structures);
     const payload = {
-      grant_request_group: {
+      grant_request_group: _.omitBy(_.isNil)({
         requests,
         type: template,
         modification_grant_id: modificationGrant ? modificationGrant.id : null,
-      },
+        user_id: user?.id,
+      }),
     };
     checkoutGrantRequest(payload);
   };
@@ -61,14 +62,14 @@ export const StructureGrantCartCheckout = ({
             <Button
               primary
               onClick={checkout}
-              disabled={!validCart}
+              disabled={!validCart || !user.valid}
               content={formatMessage({ id: "actions.save" })}
             />
           </GridColumn>
         </Grid.Row>
         <Grid.Row>
           <Grid.Column width={5}>
-            <StructureGrantCartTemplate />
+            <StructureGrantCartInformation />
           </Grid.Column>
           <Grid.Column width={11}>
             <StructureGrantCart />

package/src/components/{StructureGrantCartTemplate.js → StructureGrantCartInformation.js}

@@ -1,29 +1,36 @@
 import _ from "lodash/fp";
 import React from "react";
+import { useQuery } from "@apollo/client";
 import PropTypes from "prop-types";
 import { Segment, Divider, Form, Header } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import {
   selectGrantRequestTemplate,
   updateGrantRequestTemplateContent,
 } from "../routines";
+import StructureGrantCartUserSelector from "./StructureGrantCartUserSelector";
 
 const SelectableDynamicForm = React.lazy(() =>
   import("@truedat/df/components/SelectableDynamicForm")
 );
 
-export const StructureGrantCartTemplate = ({
+export const StructureGrantCartInformation = ({
   grantRequestsCart,
   selectGrantRequestTemplate,
   updateGrantRequestTemplateContent,
 }) => {
   const { formatMessage } = useIntl();
-
   const templateContent = _.pathOr({}, "templateContent")(grantRequestsCart);
 
+  const { loading, data } = useQuery(DOMAINS_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { action: "createForeignGrantRequest" },
+  });
+
   return (
-    <Segment>
+    <Segment loading={loading}>
       <Header
         title={`${formatMessage({ id: `structure.grant.cart.template` })}`}
       >
@@ -31,6 +38,9 @@ export const StructureGrantCartTemplate = ({
       </Header>
       <Divider />
       <Form>
+        {!loading && !_.isEmpty(data?.domains) ? (
+          <StructureGrantCartUserSelector />
+        ) : null}
         <SelectableDynamicForm
           scope="gr"
           required
@@ -47,7 +57,7 @@ export const StructureGrantCartTemplate = ({
   );
 };
 
-StructureGrantCartTemplate.propTypes = {
+StructureGrantCartInformation.propTypes = {
   grantRequestsCart: PropTypes.object,
   selectGrantRequestTemplate: PropTypes.func,
   updateGrantRequestTemplateContent: PropTypes.func,
@@ -58,4 +68,4 @@ const mapStateToProps = ({ grantRequestsCart }) => ({ grantRequestsCart });
 export default connect(mapStateToProps, {
   selectGrantRequestTemplate,
   updateGrantRequestTemplateContent,
-})(StructureGrantCartTemplate);
+})(StructureGrantCartInformation);

package/src/components/StructureGrantCartUserSelector.js

@@ -0,0 +1,93 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Form, Checkbox } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import { updateGrantRequestUser } from "../routines";
+
+const UsersSearchLoader = React.lazy(() =>
+  import("@truedat/auth/users/components/UsersSearchLoader")
+);
+
+export const StructureGrantCartUserSelector = ({
+  grantRequestsCart,
+  updateGrantRequestUser,
+  options,
+}) => {
+  const { formatMessage } = useIntl();
+  const [usersGroupsQuery, setUsersGroupsQuery] = useState("");
+  const [thirdParty, setThirdParty] = useState(false);
+  const [userId, setUserId] = useState(_.path("user.id")(grantRequestsCart));
+
+  useEffect(() => {
+    updateGrantRequestUser({
+      id: userId,
+      valid:
+        !thirdParty || (thirdParty && !(_.isNil(userId) && _.isEmpty(userId))),
+    });
+  }, [userId, thirdParty]);
+
+  const onSearch = (_currentOptions, { searchQuery }) =>
+    setUsersGroupsQuery(lowerDeburrTrim(searchQuery));
+
+  const selectUser = (userId) => {
+    setUserId(userId);
+    if (!_.isNil(userId)) setThirdParty(true);
+    if (userId === "") setThirdParty(false);
+  };
+
+  return (
+    <>
+      <UsersSearchLoader
+        query={usersGroupsQuery}
+        permission="allow_foreign_grant_request"
+        hideLoading
+      />
+      <Form.Dropdown
+        placeholder={formatMessage({
+          id: "grantRequestCart.user.placeholder",
+        })}
+        clearable
+        onChange={(_e, { value }) => selectUser(value)}
+        deburr
+        onSearchChange={onSearch}
+        search={_.identity}
+        selection
+        required={thirdParty}
+        label={
+          <Checkbox
+            label={formatMessage({ id: "grantRequestCart.user.label" })}
+            onChange={(e, data) => {
+              setThirdParty(data.checked);
+              selectUser(null);
+            }}
+            checked={thirdParty}
+          />
+        }
+        options={options}
+        value={userId}
+      />
+    </>
+  );
+};
+
+StructureGrantCartUserSelector.propTypes = {
+  grantRequestsCart: PropTypes.object,
+  options: PropTypes.array,
+  updateGrantRequestUser: PropTypes.func,
+};
+
+const mapStateToProps = ({ grantRequestsCart, usersSearch }) => ({
+  grantRequestsCart,
+  options: _.map(({ full_name, id }) => ({
+    text: full_name,
+    value: id,
+    icon: "user",
+  }))(usersSearch),
+});
+
+export default connect(mapStateToProps, { updateGrantRequestUser })(
+  StructureGrantCartUserSelector
+);

package/src/components/StructureGrantDropdown.js

@@ -11,12 +11,15 @@ import { Date } from "@truedat/core/components";
 import GrantChangeRequest from "./GrantChangeRequest";
 import GrantRemoval from "./GrantRemoval";
 import GrantRequestCancel from "./GrantRequestCancel";
+import StructureGrantRequestAddCart from "./StructureGrantRequestAddCart";
 
 const isNilOrEmpty = (value) => _.isEmpty(value) || _.isNil(value);
 export const StructureGrantDropdown = ({
   grantRequest,
   structure,
   structureGrantPopup,
+  authorized,
+  requested,
 }) => {
   const history = useHistory();
   const { formatMessage } = useIntl();
@@ -32,8 +35,19 @@ export const StructureGrantDropdown = ({
   const isModification = _.prop("group.grant")(grantRequest);
 
   const actions = {
+    addToCart: (
+      <StructureGrantRequestAddCart structure={structure} key="addToCart">
+        <Dropdown.Item
+          icon="cart"
+          text={formatMessage({
+            id: "structure.grant.request_grant",
+          })}
+        />
+      </StructureGrantRequestAddCart>
+    ),
     viewRequest: (
       <Dropdown.Item
+        key="viewRequest"
         onClick={() =>
           history.push(linkTo.GRANT_REQUEST({ id: grantRequest.id }))
         }
@@ -44,7 +58,7 @@ export const StructureGrantDropdown = ({
       />
     ),
     requestRemoval: (
-      <GrantRemoval grant={grant}>
+      <GrantRemoval grant={grant} key="requestRemoval">
         <Dropdown.Item
           icon="delete"
           text={formatMessage({
@@ -54,7 +68,7 @@ export const StructureGrantDropdown = ({
       </GrantRemoval>
     ),
     cancelRemoval: (
-      <GrantRemoval grant={grant}>
+      <GrantRemoval grant={grant} key="cancelRemoval">
         <Dropdown.Item
           icon="delete"
           text={formatMessage({
@@ -64,7 +78,11 @@ export const StructureGrantDropdown = ({
       </GrantRemoval>
     ),
     requestChange: (
-      <GrantChangeRequest structure={structure} grant={grant}>
+      <GrantChangeRequest
+        structure={structure}
+        grant={grant}
+        key="requestChange"
+      >
         <Dropdown.Item
           icon="edit"
           text={formatMessage({
@@ -75,6 +93,7 @@ export const StructureGrantDropdown = ({
     ),
     cancelRequest: (
       <GrantRequestCancel
+        key="cancelRequest"
         structureId={structure.id}
         grantRequest={grantRequest}
       >
@@ -91,36 +110,27 @@ export const StructureGrantDropdown = ({
   const dropdownStates = {
     pendingRequest: {
       color: "yellow",
-      options: (
-        <>
-          {actions["viewRequest"]}
-          {actions["cancelRequest"]}
-        </>
-      ),
+      options: [actions["viewRequest"], actions["cancelRequest"]],
+
       header: isModification
         ? "structure.grant.requested_modification"
         : "structure.grant.requested_access",
     },
     processingRequest: {
       color: "grey",
-      options: actions["viewRequest"],
+      options: [actions["viewRequest"]],
       header: isModification
         ? "structure.grant.modification.attended"
         : "structure.grant.access.attended",
     },
     pendingRemovalGrant: {
       color: "red",
-      options: actions["cancelRemoval"],
+      options: [actions["cancelRemoval"]],
       header: "structure.grant.has_grant_pending_removal",
     },
     activeGrant: {
       color: "green",
-      options: (
-        <>
-          {actions["requestChange"]}
-          {actions["requestRemoval"]}
-        </>
-      ),
+      options: [actions["requestChange"], actions["requestRemoval"]],
       header: "structure.grant.has_grant",
     },
   };
@@ -160,6 +170,11 @@ export const StructureGrantDropdown = ({
     </>
   );
 
+  const optionsWithCart =
+    authorized && !requested
+      ? [actions["addToCart"], ...stateProps.options]
+      : stateProps.options;
+
   const trigger = (
     <Dropdown
       icon={null}
@@ -173,7 +188,9 @@ export const StructureGrantDropdown = ({
         />
       }
     >
-      <Dropdown.Menu>{stateProps.options}</Dropdown.Menu>
+      <Dropdown.Menu>
+        <>{optionsWithCart}</>
+      </Dropdown.Menu>
     </Dropdown>
   );
   return <Popup content={popupContent} trigger={trigger} />;
@@ -183,12 +200,16 @@ StructureGrantDropdown.propTypes = {
   grantRequest: PropTypes.object,
   structure: PropTypes.object,
   structureGrantPopup: PropTypes.array,
+  authorized: PropTypes.bool,
+  requested: PropTypes.bool,
 };
 
 const mapStateToProps = ({
   structure,
   structureFields,
   structureGrantPopup,
+  userPermissions,
+  grantRequestsCart,
 }) => ({
   structure: {
     ...structure,
@@ -196,6 +217,12 @@ const mapStateToProps = ({
     structureFields,
   },
   structureGrantPopup,
+  requested: _.flow(
+    _.pathOr([], "structures"),
+    _.find({ id: structure.id }),
+    _.negate(_.isUndefined)
+  )(grantRequestsCart),
+  authorized: _.pathOr(false, "create_foreign_grant_request")(userPermissions),
 });
 
 export default connect(mapStateToProps)(StructureGrantDropdown);

package/src/components/StructureGrantRequestAddCart.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { addGrantRequestToCart } from "../routines";
+
+export const StructureGrantRequestAddCart = ({
+  structure,
+  addGrantRequestToCart,
+  children,
+}) => {
+  if (!structure) return;
+
+  return React.cloneElement(children, {
+    onClick: () => addGrantRequestToCart(structure),
+  });
+};
+
+StructureGrantRequestAddCart.propTypes = {
+  structure: PropTypes.object,
+  addGrantRequestToCart: PropTypes.func,
+  children: PropTypes.node,
+};
+
+export default connect(null, { addGrantRequestToCart })(
+  StructureGrantRequestAddCart
+);

package/src/components/StructuresRoutes.js

@@ -11,7 +11,6 @@ import {
   STRUCTURE_EVENTS,
   STRUCTURE_VERSION,
 } from "@truedat/core/routes";
-import DomainsLoader from "@truedat/bg/taxonomy/components/DomainsLoader";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureLoader from "./StructureLoader";
 import UserSearchFiltersLoader from "./UserSearchFiltersLoader";
@@ -122,16 +121,7 @@ export const StructuresRoutes = () => {
   return (
     <Route
       path={STRUCTURES}
-      render={() =>
-        authorized ? (
-          <>
-            <AuthorizedRoutes />
-            <DomainsLoader actions="manage_structures_domain" />
-          </>
-        ) : (
-          <Unauthorized />
-        )
-      }
+      render={() => (authorized ? <AuthorizedRoutes /> : <Unauthorized />)}
     />
   );
 };

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

@@ -2,14 +2,17 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
+import { domainsMock } from "@truedat/test/mocks";
 import { EditDomainForm } from "../EditDomainForm";
 
+const mocks = [domainsMock({ action: "manageStructuresDomain" })];
+
 describe("<EditDomainForm />", () => {
   const updateStructure = jest.fn();
 
   const domains = [
-    { id: 1, name: "Domain 1", level: 0 },
-    { id: 2, name: "Domain 2", level: 0 },
+    { id: 1, name: "fooDomain", level: 0 },
+    { id: 2, name: "barDomain", level: 0 },
   ];
 
   const structure = {
@@ -20,61 +23,46 @@ describe("<EditDomainForm />", () => {
     title: "title",
     updateStructure,
     structure,
-    domainOptions: domains,
   };
 
-  const messages = {
-    en: {
-      "structure.edit_domain.title": "Edit domain",
-      "structureDomain.actions.update": "Update",
-      "structureDomain.actions.update.inherit": "Apply on children",
-      "domain.selector.label": "Domain",
-      "domain.selector.placeholder": "Select a domain...",
-      "domain.multiple.placeholder": "Select domains ...",
-    },
-  };
+  const renderOpts = { mocks, state: { domains } };
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it("matches the latest snapshot", () => {
-    const { container } = render(<EditDomainForm {...props} />, {
-      state: { domains },
-      messages,
-    });
+    const { container } = render(<EditDomainForm {...props} />, renderOpts);
     expect(container).toMatchSnapshot();
   });
 
   it("enables send button when selecting domain", async () => {
-    const { getByRole } = render(<EditDomainForm {...props} />, {
-      state: { domains },
-      messages,
-    });
+    const { getByRole, findByText } = render(
+      <EditDomainForm {...props} />,
+      renderOpts
+    );
 
     const button = getByRole("button", { name: /update/i });
-    const option = getByRole("option", { name: /Domain 1/i });
 
     expect(button).toBeDisabled();
-    userEvent.click(option);
+    userEvent.click(await findByText("fooDomain"));
     await waitFor(() => {
       expect(button).not.toBeDisabled();
     });
   });
 
   it("invokes function when send button clicked", async () => {
-    const { getByRole } = render(<EditDomainForm {...props} />, {
-      state: { domains },
-      messages,
-    });
+    const { getByRole, findByText } = render(
+      <EditDomainForm {...props} />,
+      renderOpts
+    );
 
     const button = getByRole("button", { name: /update/i });
     const checkbox = getByRole("checkbox");
-    const option = getByRole("option", { name: /Domain 1/i });
 
     expect(button).toBeDisabled();
     expect(checkbox).toBeChecked();
-    userEvent.click(option);
+    userEvent.click(await findByText("fooDomain"));
     await waitFor(() => {
       expect(button).not.toBeDisabled();
     });
@@ -84,7 +72,7 @@ describe("<EditDomainForm />", () => {
     });
     expect(updateStructure).toHaveBeenCalledWith(
       expect.objectContaining({
-        data_structure: { domain_ids: [1], id: 42 },
+        data_structure: { domain_ids: ["1"], id: 42 },
         inherit: true,
         redirect: "/structures/42/notes",
       })
@@ -92,18 +80,17 @@ describe("<EditDomainForm />", () => {
   });
 
   it("invokes function when send button clicked with modified inheritance", async () => {
-    const { getByRole } = render(<EditDomainForm {...props} />, {
-      state: { domains },
-      messages,
-    });
+    const { getByRole, findByText } = render(
+      <EditDomainForm {...props} />,
+      renderOpts
+    );
 
     const button = getByRole("button", { name: /update/i });
     const checkbox = getByRole("checkbox");
-    const option = getByRole("option", { name: /Domain 1/i });
 
     expect(button).toBeDisabled();
     expect(checkbox).toBeChecked();
-    userEvent.click(option);
+    userEvent.click(await findByText("fooDomain"));
     userEvent.click(checkbox);
     await waitFor(() => {
       expect(button).not.toBeDisabled();
@@ -114,7 +101,7 @@ describe("<EditDomainForm />", () => {
     });
     expect(updateStructure).toHaveBeenCalledWith(
       expect.objectContaining({
-        data_structure: { domain_ids: [1], id: 42 },
+        data_structure: { domain_ids: ["1"], id: 42 },
         inherit: false,
         redirect: "/structures/42/notes",
       })
@@ -122,20 +109,18 @@ describe("<EditDomainForm />", () => {
   });
 
   it("send selected multiple domain ids when button clicked", async () => {
-    const { getByRole } = render(<EditDomainForm {...props} />, {
-      state: { domains },
-      messages,
-    });
+    const { getByRole, findByText } = render(
+      <EditDomainForm {...props} />,
+      renderOpts
+    );
 
     const button = getByRole("button", { name: /update/i });
     const checkbox = getByRole("checkbox");
-    const optionOne = getByRole("option", { name: /Domain 1/i });
-    const optionTwo = getByRole("option", { name: /Domain 2/i });
 
     expect(button).toBeDisabled();
     expect(checkbox).toBeChecked();
-    userEvent.click(optionTwo);
-    userEvent.click(optionOne);
+    userEvent.click(await findByText("barDomain"));
+    userEvent.click(await findByText("fooDomain"));
     await waitFor(() => {
       expect(button).not.toBeDisabled();
     });
@@ -145,7 +130,7 @@ describe("<EditDomainForm />", () => {
     });
     expect(updateStructure).toHaveBeenCalledWith(
       expect.objectContaining({
-        data_structure: { domain_ids: [2, 1], id: 42 },
+        data_structure: { domain_ids: ["2", "1"], id: 42 },
         inherit: true,
         redirect: "/structures/42/notes",
       })