@truedat/dd 4.49.10 → 4.50.4

package/src/components/StructureGrantDropdown.js

@@ -0,0 +1,201 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Button, Dropdown, Popup, Header } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { useHistory } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import { Date } from "@truedat/core/components";
+
+import GrantChangeRequest from "./GrantChangeRequest";
+import GrantRemoval from "./GrantRemoval";
+import GrantRequestCancel from "./GrantRequestCancel";
+
+const isNilOrEmpty = (value) => _.isEmpty(value) || _.isNil(value);
+export const StructureGrantDropdown = ({
+  grantRequest,
+  structure,
+  structureGrantPopup,
+}) => {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const { grant } = structure;
+
+  const hasPendingGrantRequest = _.includes(
+    _.prop("status.status")(grantRequest)
+  )(["pending", "approved"]);
+
+  const hasProcessingGrantRequest =
+    _.prop("status.status")(grantRequest) === "processing";
+
+  const isModification = _.prop("group.grant")(grantRequest);
+
+  const actions = {
+    viewRequest: (
+      <Dropdown.Item
+        onClick={() =>
+          history.push(linkTo.GRANT_REQUEST({ id: grantRequest.id }))
+        }
+        icon="info"
+        text={formatMessage({
+          id: `grant.actions.view_request.confirmation.header`,
+        })}
+      />
+    ),
+    requestRemoval: (
+      <GrantRemoval grant={grant}>
+        <Dropdown.Item
+          icon="delete"
+          text={formatMessage({
+            id: `grant.actions.request_removal.confirmation.header`,
+          })}
+        />
+      </GrantRemoval>
+    ),
+    cancelRemoval: (
+      <GrantRemoval grant={grant}>
+        <Dropdown.Item
+          icon="delete"
+          text={formatMessage({
+            id: `grant.actions.cancel_removal.confirmation.header`,
+          })}
+        />
+      </GrantRemoval>
+    ),
+    requestChange: (
+      <GrantChangeRequest structure={structure} grant={grant}>
+        <Dropdown.Item
+          icon="edit"
+          text={formatMessage({
+            id: "structure.grant.request_grant_change",
+          })}
+        />
+      </GrantChangeRequest>
+    ),
+    cancelRequest: (
+      <GrantRequestCancel
+        structureId={structure.id}
+        grantRequest={grantRequest}
+      >
+        <Dropdown.Item
+          icon="delete"
+          text={formatMessage({
+            id: "structure.grant.cancel_grant_request",
+          })}
+        />
+      </GrantRequestCancel>
+    ),
+  };
+
+  const dropdownStates = {
+    pendingRequest: {
+      color: "yellow",
+      options: (
+        <>
+          {actions["viewRequest"]}
+          {actions["cancelRequest"]}
+        </>
+      ),
+      header: isModification
+        ? "structure.grant.requested_modification"
+        : "structure.grant.requested_access",
+    },
+    processingRequest: {
+      color: "grey",
+      options: actions["viewRequest"],
+      header: isModification
+        ? "structure.grant.modification.attended"
+        : "structure.grant.access.attended",
+    },
+    pendingRemovalGrant: {
+      color: "red",
+      options: actions["cancelRemoval"],
+      header: "structure.grant.has_grant_pending_removal",
+    },
+    activeGrant: {
+      color: "green",
+      options: (
+        <>
+          {actions["requestChange"]}
+          {actions["requestRemoval"]}
+        </>
+      ),
+      header: "structure.grant.has_grant",
+    },
+  };
+
+  const currentState = hasPendingGrantRequest
+    ? "pendingRequest"
+    : hasProcessingGrantRequest
+    ? "processingRequest"
+    : grant?.pending_removal
+    ? "pendingRemovalGrant"
+    : "activeGrant";
+
+  const stateProps = dropdownStates[currentState];
+
+  const grantDetails = _.flow(
+    _.reject(({ field }) => isNilOrEmpty(_.get(field)(grant))),
+    _.map(({ field, type }) => {
+      switch (type) {
+        case "date":
+          return <Date value={_.get(field)(grant)} key={field} />;
+        default:
+          return <div key={field}>{_.get(field)(grant)}</div>;
+      }
+    })
+  )(structureGrantPopup);
+
+  const status = _.prop("status.status")(grantRequest);
+
+  const grantRequestDetails = status ? (
+    <>{formatMessage({ id: `grantRequest.content.${status}` })}</>
+  ) : null;
+
+  const popupContent = (
+    <>
+      <Header as="h6">{formatMessage({ id: stateProps.header })}</Header>
+      {grantRequest ? grantRequestDetails : grantDetails}
+    </>
+  );
+
+  const trigger = (
+    <Dropdown
+      icon={null}
+      floating
+      direction="left"
+      trigger={
+        <Button
+          color={stateProps.color}
+          className="button basic icon group-actions"
+          icon="shield"
+        />
+      }
+    >
+      <Dropdown.Menu>{stateProps.options}</Dropdown.Menu>
+    </Dropdown>
+  );
+  return <Popup content={popupContent} trigger={trigger} />;
+};
+
+StructureGrantDropdown.propTypes = {
+  grantRequest: PropTypes.object,
+  structure: PropTypes.object,
+  structureGrantPopup: PropTypes.array,
+};
+
+const mapStateToProps = ({
+  structure,
+  structureFields,
+  structureGrantPopup,
+}) => ({
+  structure: {
+    ...structure,
+    hasDataFields: _.negate(_.isEmpty)(structureFields),
+    structureFields,
+  },
+  structureGrantPopup,
+});
+
+export default connect(mapStateToProps)(StructureGrantDropdown);

package/src/components/StructureGrantRequestButton.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Icon, Label } from "semantic-ui-react";
+import { Button, Icon, Popup } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { addGrantRequestToCart, removeGrantRequestFromCart } from "../routines";
@@ -21,21 +21,22 @@ export const StructureGrantRequestButton = ({
   const removeRequest = () => {
     removeGrantRequestFromCart(structure);
   };
-
-  return authorized ? (
-    <Label
-      as="a"
-      basic
+  const content = formatMessage({
+    id: requested
+      ? "structure.grant.requested_grant"
+      : "structure.grant.request_grant",
+  });
+  const trigger = (
+    <Button
+      icon={<Icon name="shield" />}
+      className="button basic icon group-actions"
       color={requested ? "blue" : "orange"}
       onClick={requested ? removeRequest : addRequest}
-    >
-      <Icon name="shield" />
-      {formatMessage({
-        id: requested
-          ? "structure.grant.requested_grant"
-          : "structure.grant.request_grant",
-      })}
-    </Label>
+    />
+  );
+
+  return authorized ? (
+    <Popup content={content} position="top center" trigger={trigger} />
   ) : null;
 };
 

package/src/components/StructureGrants.js

@@ -73,8 +73,8 @@ export const StructureGrants = ({ columns, grants, userPermissions }) => {
 };
 
 StructureGrants.propTypes = {
-  columns: PropTypes.array,
   grants: PropTypes.array,
+  columns: PropTypes.array,
   userPermissions: PropTypes.object,
 };
 

package/src/components/StructureSummary.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Header, Icon, Label, Grid } from "semantic-ui-react";
+import { Header, Icon, Label, Grid, Divider } from "semantic-ui-react";
 import Moment from "react-moment";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
@@ -74,7 +74,6 @@ export const StructureSummary = ({
             <Header as="h2">
               <Header.Content>
                 {_.defaultTo(name)(alias)}
-                {structureClasses?._grantable ? <StructureGrantButton /> : null}
                 {_.isEmpty(alias) ? null : (
                   <Header.Subheader>{name}</Header.Subheader>
                 )}
@@ -85,6 +84,8 @@ export const StructureSummary = ({
             {(deleted_at || updatedAt) && (
               <Date {...dateProperties(deleted_at, updatedAt)} />
             )}
+            <Divider hidden fitted />
+            {structureClasses?._grantable ? <StructureGrantButton /> : null}
             <ShareLinkPopup
               url={shareUrl}
               title={shareTitle}
@@ -92,11 +93,17 @@ export const StructureSummary = ({
               description={description}
             />
             {userPermissions.profile_permission &&
-              structureClass === "field" && <StructureProfileButton />}
+            structureClass === "field" ? (
+              <StructureProfileButton />
+            ) : null}
             {userPermissions.profile_permission &&
-              structureClass !== "field" && <StructuresProfileButton />}
-            {userPermissions.confidential && <StructureConfidentialButton />}
-            {isAdmin && !deleted_at && <StructureDeleteButton />}
+            structureClass !== "field" ? (
+              <StructuresProfileButton />
+            ) : null}
+            {userPermissions.confidential ? (
+              <StructureConfidentialButton />
+            ) : null}
+            {isAdmin && !deleted_at ? <StructureDeleteButton /> : null}
           </Grid.Column>
         </Grid.Row>
       </Grid>

package/src/components/StructureView.js

@@ -13,7 +13,7 @@ import StructureTabRoutes from "./StructureTabRoutes";
 export const StructureView = ({
   structureLoading,
   structure,
-  hasItemsInCart,
+  showGrantRequestCart,
 }) => (
   <Segment loading={structureLoading} className="structures">
     {structure && structure.id && !structureLoading && (
@@ -29,14 +29,14 @@ export const StructureView = ({
               <FilteredNav />
             </Segment>
           </Grid.Column>
-          <Grid.Column width={hasItemsInCart ? 8 : 12}>
+          <Grid.Column width={showGrantRequestCart ? 8 : 12}>
             <Segment>
               <StructureSummary />
               <StructureTabRoutes />
               <StructureTabPaneRoutes />
             </Segment>
           </Grid.Column>
-          {hasItemsInCart && (
+          {showGrantRequestCart && (
             <Grid.Column width={4}>
               <StructureGrantCart />
             </Grid.Column>
@@ -50,7 +50,7 @@ export const StructureView = ({
 StructureView.propTypes = {
   structureLoading: PropTypes.bool,
   structure: PropTypes.object,
-  hasItemsInCart: PropTypes.bool,
+  showGrantRequestCart: PropTypes.bool,
 };
 
 const mapStateToProps = ({
@@ -60,10 +60,9 @@ const mapStateToProps = ({
 }) => ({
   structureLoading,
   structure,
-  hasItemsInCart: _.flow(
-    _.pathOr([], "structures"),
-    _.negate(_.isEmpty)
-  )(grantRequestsCart),
+  showGrantRequestCart:
+    !grantRequestsCart.modificationGrant &&
+    _.flow(_.pathOr([], "structures"), _.negate(_.isEmpty))(grantRequestsCart),
 });
 
 export default connect(mapStateToProps)(StructureView);

package/src/components/TagForm.js

@@ -70,6 +70,7 @@ export const TagForm = ({ loading, onSubmit, saving, tag }) => {
             onChange={(_e, { value }) => onChange(value)}
             onLoad={() => setDomainsLoading(false)}
             value={value}
+            labels
           />
         )}
       />

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

@@ -15,6 +15,7 @@ describe("<MyGrantRequests />", () => {
         "grantRequest.content.failed": "failed",
         "grantRequest.content.pending": "pending",
         "grantRequest.content.approved": "approved",
+        "grantRequest.content.cancelled": "cancelled",
         "grantRequest.content.rejected": "rejected",
         "grantRequest.content.processing": "processing",
         "grantRequest.content.processed": "processed",
@@ -62,5 +63,9 @@ describe("<MyGrantRequests />", () => {
     expect(setGrantRequestsQuery).toHaveBeenCalledWith({
       status: "pending,approved,rejected,processing,failed",
     });
+    userEvent.click(await findByText(/cancelled/));
+    expect(setGrantRequestsQuery).toHaveBeenCalledWith({
+      status: "pending,approved,rejected,processing,failed,cancelled",
+    });
   });
 });

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

@@ -1,52 +1,125 @@
 import _ from "lodash/fp";
 import React from "react";
-import { fireEvent } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { LATEST_GRANT_REQUEST_QUERY } from "../../api/queries";
 import StructureGrantButton from "../StructureGrantButton";
+import en from "../../messages/en";
 
-describe("<StructureGrantButton />", () => {
-  const state = {
-    structure: {
-      grant: {
-        detail: { foo: "bar" },
-        pending_removal: false,
-      },
+const latestGrantMockBuilder = (status) => ({
+  request: { query: LATEST_GRANT_REQUEST_QUERY },
+  result: {
+    data: {
+      latestGrantRequest: status
+        ? {
+            id: 1,
+            group: {
+              grant: {
+                id: 1,
+              },
+            },
+            status: { status },
+          }
+        : null,
     },
-    structureGrantPopup: [],
-  };
+  },
+});
+
+const renderOptsBuilder = (status, grant) => ({
+  mocks: [latestGrantMockBuilder(status)],
+  state: {
+    structure: { grant },
+    userPermissions: { request_grant: true },
+  },
+  messages: { en },
+  fallback: "lazy",
+});
+
+const expectToRenderDropdownComponent = (container) =>
+  expect(container.getElementsByClassName("dropdown")).toHaveLength(1);
+
+const expectToRenderRequestButton = async (container, getByRole) => {
+  expect(container.getElementsByClassName("dropdown")).toHaveLength(0);
+  expect(await getByRole("button")).toBeTruthy();
+};
+describe("<StructureGrantButton />", () => {
+  it("matches snapshot for active grant and inactive grantRequest", async () => {
+    const renderOpts = renderOptsBuilder("processed", {});
+
+    const { container, queryByText } = render(
+      <StructureGrantButton />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expectToRenderDropdownComponent(container);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches snapshot for active grant and active grantRequest", async () => {
+    const renderOpts = renderOptsBuilder("pending", {});
+
+    const { container, queryByText } = render(
+      <StructureGrantButton />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
 
-  it("matches the latest snapshot", async () => {
-    const { findByText, container } = render(<StructureGrantButton />, {
-      state,
-    });
+    expectToRenderDropdownComponent(container);
     expect(container).toMatchSnapshot();
-    expect(
-      await findByText("You have granted access on this structure")
-    ).toBeTruthy();
   });
 
-  it("matches the latest snapshot pending_removal", async () => {
-    const customState = _.set("structure.grant.pending_removal", true)(state);
-    const { findByText, container } = render(<StructureGrantButton />, {
-      state: customState,
-    });
+  it("matches snapshot for no grant and active grantRequest", async () => {
+    const renderOpts = renderOptsBuilder("approved", null);
+
+    const { container, queryByText } = render(
+      <StructureGrantButton />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expectToRenderDropdownComponent(container);
     expect(container).toMatchSnapshot();
-    expect(
-      await findByText("You have granted access pending removal")
-    ).toBeTruthy();
   });
 
-  it("matches the latest snapshot with popup", async () => {
-    const customState = _.set("structureGrantPopup", [{ field: "detail.foo" }])(
-      state
+  it("matches snapshot for no grant and inactive grantRequest", async () => {
+    const renderOpts = renderOptsBuilder("cancelled", null);
+
+    const { container, getByRole, queryByText } = render(
+      <StructureGrantButton />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
     );
-    const { findByText } = render(<StructureGrantButton />, {
-      state: customState,
-    });
 
-    fireEvent.mouseOver(
-      await findByText("You have granted access on this structure")
+    await expectToRenderRequestButton(container, getByRole);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches snapshot for no grant and no grantRequest", async () => {
+    const renderOpts = renderOptsBuilder(null, null);
+
+    const { container, getByRole, queryByText } = render(
+      <StructureGrantButton />,
+      renderOpts
     );
-    expect(await findByText("bar")).toBeInTheDocument();
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    await expectToRenderRequestButton(container, getByRole);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,41 +1,20 @@
 import React, { Suspense } from "react";
-import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { singleTemplateMock } from "@truedat/test/mocks";
 import { StructureGrantCartTemplate } from "../StructureGrantCartTemplate";
 
 describe("<StructureGrantCartTemplate />", () => {
-  const fetchGrantRequestTemplates = jest.fn();
   const selectGrantRequestTemplate = jest.fn();
   const updateGrantRequestTemplateContent = jest.fn();
 
-  const template = {
-    id: 1,
-    content: [
-      {
-        name: "foo",
-        fields: [
-          {
-            type: "string",
-            name: "foo",
-            label: "Label",
-            cardinality: "1",
-          },
-        ],
-      },
-    ],
-  };
-  const templates = [template];
-  const templatesLoading = false;
+  const variables = { scope: "gr" };
+
   const templateContent = { foo: "bar" };
   const grantRequestsCart = {
-    templatesLoading,
-    template,
-    templates,
+    templateContent,
   };
   const props = {
     grantRequestsCart,
-    templateContent,
-    fetchGrantRequestTemplates,
     selectGrantRequestTemplate,
     updateGrantRequestTemplateContent,
   };
@@ -48,87 +27,19 @@ describe("<StructureGrantCartTemplate />", () => {
     },
   };
 
+  const renderOpts = {
+    mocks: [singleTemplateMock(variables)],
+    messages,
+    fallback: "lazy",
+  };
+
   it("matches the latest snapshot", () => {
     const { container } = render(
       <Suspense fallback={null}>
         <StructureGrantCartTemplate {...props} />
       </Suspense>,
-      {
-        messages,
-      }
+      renderOpts
     );
     expect(container).toMatchSnapshot();
   });
-
-  it("it calls fetchGrantRequestTemplates on render and selects template by default", async () => {
-    fetchGrantRequestTemplates.mockClear();
-    const { findByText } = render(
-      <Suspense fallback={null}>
-        <StructureGrantCartTemplate {...props} />
-      </Suspense>,
-      {
-        messages,
-      }
-    );
-    await waitFor(() => {
-      expect(fetchGrantRequestTemplates).toHaveBeenCalledTimes(1);
-    });
-    await waitFor(() => {
-      expect(selectGrantRequestTemplate).toHaveBeenCalledWith(template.id);
-    });
-
-    await waitFor(() => {
-      expect(findByText(/template/)).toBeTruthy();
-    });
-  });
-
-  it("it renders templates dropdown when there are many", async () => {
-    fetchGrantRequestTemplates.mockClear();
-    selectGrantRequestTemplate.mockClear();
-    const templates = [
-      template,
-      {
-        id: 2,
-        name: "bar",
-        content: [
-          {
-            fields: [
-              {
-                type: "string",
-                name: "bar",
-                label: "Label",
-                cardinality: "1",
-              },
-            ],
-          },
-        ],
-      },
-    ];
-    const { findByRole } = render(
-      <Suspense fallback={null}>
-        <StructureGrantCartTemplate
-          {...{
-            ...props,
-            grantRequestsCart: {
-              ...grantRequestsCart,
-              template: null,
-              templates,
-            },
-          }}
-        />
-      </Suspense>,
-      {
-        messages,
-      }
-    );
-    await waitFor(() => {
-      expect(fetchGrantRequestTemplates).toHaveBeenCalledTimes(1);
-    });
-    await waitFor(() => {
-      expect(selectGrantRequestTemplate).toHaveBeenCalledTimes(0);
-    });
-
-    expect(findByRole("option", { name: "foo" })).toBeTruthy();
-    expect(findByRole("option", { name: "bar" })).toBeTruthy();
-  });
 });