@truedat/dd 4.54.12 → 4.56.0

package/src/components/GrantApprovalRuleForm.js

@@ -0,0 +1,264 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useForm, useWatch, Controller } from "react-hook-form";
+import { useIntl } from "react-intl";
+import { useQuery } from "@apollo/client";
+import { Button, Form, Segment, Label } from "semantic-ui-react";
+import { DomainSelector, HistoryBackButton } from "@truedat/core/components";
+import { CURRENT_ROLES } from "@truedat/core/api/queries";
+import GrantApprovalRuleConditions from "./GrantApprovalRuleConditions";
+
+const initialValues = {
+  name: "",
+  action: "approve",
+  role: null,
+  domainId: null,
+  comment: "",
+  conditions: [{}],
+};
+
+export default function GrantApprovalRuleForm({ onSubmit, approvalRule }) {
+  const { formatMessage } = useIntl();
+
+  const defaultValues = approvalRule
+    ? {
+        ..._.pick(["id", "name", "action", "role", "comment"])(approvalRule),
+        conditions: _.flow(
+          _.get("conditions"),
+          _.map(({ field, operator, value }) => {
+            const fields = field.match(/(\w+)\.(.*)/);
+            const fieldPrefix = fields ? fields[1] : null;
+            const fieldName = fields ? fields[2] : field;
+            return { fieldPrefix, fieldName, operator, value };
+          })
+        )(approvalRule),
+        domainId: _.path("domainIds[0]")(approvalRule),
+      }
+    : initialValues;
+
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues,
+  });
+
+  const domainId = useWatch({ name: "domainId", control });
+
+  const {
+    error,
+    loading,
+    data: rolesData,
+  } = useQuery(CURRENT_ROLES, {
+    variables: { domainId, permission: "approve_grant_request" },
+  });
+  const roleOptions =
+    loading || error
+      ? null
+      : _.flow(
+          _.get("currentRoles"),
+          _.map((role) => ({ key: role, value: role, text: role }))
+        )(rolesData);
+
+  const doHandleSubmit = handleSubmit((data) => {
+    const { domainId } = data;
+    const conditions = _.flow(
+      _.get("conditions"),
+      _.map(({ fieldPrefix, fieldName, operator, value }) => ({
+        field: [fieldPrefix, fieldName].join("."),
+        operator,
+        value,
+      }))
+    )(data);
+    const approvalRule = _.flow(
+      _.omit(["domainId"]),
+      _.set("domainIds", [domainId]),
+      _.set("conditions", conditions)
+    )(data);
+    onSubmit({ approvalRule });
+  });
+
+  const disabledForm = !domainId || !roleOptions;
+
+  const { isValid } = formState;
+
+  const validateConditions = (value) =>
+    _.size(value) >= 1 &&
+    _.every((condition) =>
+      _.every(
+        (field) =>
+          !_.isNil(_.get(field)(condition)) &&
+          !_.isEmpty(_.get(field)(condition))
+      )(["fieldPrefix", "fieldName", "operator", "value"])
+    )(value);
+
+  return (
+    <>
+      <Form onSubmit={doHandleSubmit}>
+        <Controller
+          control={control}
+          name="name"
+          rules={{ required: true }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Input
+              id="name"
+              error={!!error}
+              label={formatMessage({ id: "grantApprovalRule.name" })}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({
+                id: "grantApprovalRule.name.placeholder",
+              })}
+              value={value}
+              required
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="domainId"
+          rules={{ required: true }}
+          render={({ field: { onChange, value } }) => (
+            <DomainSelector
+              action="approveGrantRequests"
+              label={formatMessage({ id: "domain.selector.label" })}
+              required
+              labels
+              value={value}
+              onChange={(_e, { value }) => onChange(value)}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="role"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Dropdown
+              required
+              disabled={disabledForm}
+              name="role"
+              label={formatMessage({ id: "grantApprovalRule.role" })}
+              selection
+              options={roleOptions}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({
+                id: "grantApprovalRule.role.placeholder",
+              })}
+              value={value}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          rules={{ required: true }}
+          name="action"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Dropdown
+              required
+              disabled={disabledForm}
+              name="action"
+              label={formatMessage({ id: "grantApprovalRule.action" })}
+              selection
+              options={["approve", "reject"].map((action, key) => ({
+                key,
+                value: action,
+                text: formatMessage({
+                  id: `grantApprovalRule.action.${action}`,
+                }),
+              }))}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({
+                id: "grantApprovalRule.action.placeholder",
+              })}
+              value={value}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="comment"
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Input
+              id="comment"
+              label={formatMessage({ id: "grantApprovalRule.comment" })}
+              disabled={disabledForm}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+              placeholder={formatMessage({
+                id: "grantApprovalRule.comment.placeholder",
+              })}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="conditions"
+          rules={{
+            validate: {
+              conditions: (value) =>
+                validateConditions(value) || "invalid_conditions",
+            },
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Segment disabled={disabledForm}>
+              <div className="field">
+                <label>
+                  {formatMessage({
+                    id: "grantApprovalRule.conditions",
+                  })}
+                  {error ? (
+                    <Label pointing="left">
+                      {formatMessage({
+                        id: `grantApprovalRule.conditions.error.${error.message}`,
+                      })}
+                    </Label>
+                  ) : null}
+                </label>
+              </div>
+              <GrantApprovalRuleConditions
+                disabled={disabledForm}
+                onChange={onChange}
+                value={value}
+                onBlur={onBlur}
+              />
+            </Segment>
+          )}
+        />
+
+        <div className="actions">
+          <HistoryBackButton
+            content={formatMessage({ id: "actions.cancel" })}
+          />
+          <Button
+            primary
+            type="submit"
+            // loading={isLoading}
+            disabled={!isValid}
+            content={formatMessage({ id: "actions.save" })}
+          />
+        </div>
+      </Form>
+    </>
+  );
+}
+
+GrantApprovalRuleForm.propTypes = {
+  onSubmit: PropTypes.func,
+  approvalRule: PropTypes.object,
+};

package/src/components/GrantApprovalRuleNew.js

@@ -0,0 +1,15 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { createGrantApprovalRule } from "../routines";
+import GrantApprovalRuleForm from "./GrantApprovalRuleForm";
+
+export const GrantApprovalRuleNew = ({ createGrantApprovalRule }) => {
+  return <GrantApprovalRuleForm onSubmit={createGrantApprovalRule} />;
+};
+
+GrantApprovalRuleNew.propTypes = {
+  createGrantApprovalRule: PropTypes.func,
+};
+
+export default connect(null, { createGrantApprovalRule })(GrantApprovalRuleNew);

package/src/components/GrantApprovalRules.js

@@ -0,0 +1,113 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useIntl } from "react-intl";
+import { useQuery } from "@apollo/client";
+import {
+  Button,
+  Header,
+  Icon,
+  Loader,
+  Segment,
+  Table,
+} from "semantic-ui-react";
+import { Link, useHistory } from "react-router-dom";
+import { GRANT_APPROVAL_RULE_NEW, linkTo } from "@truedat/core/routes";
+import { columnDecoratorComponent } from "@truedat/core/services";
+import { GRANT_APPROVAL_RULES_QUERY } from "../api/queries";
+
+export default function GrantApprovalRules() {
+  const { formatMessage } = useIntl();
+  const history = useHistory();
+
+  const columns = [
+    { name: "name" },
+    { name: "action" },
+    { name: "role" },
+    {
+      name: "domain",
+      fieldSelector: _.prop("domains[0].name"),
+    },
+  ];
+
+  const { loading, data } = useQuery(GRANT_APPROVAL_RULES_QUERY, {
+    fetchPolicy: "cache-and-network",
+  });
+
+  const grantApprovalRules = _.get("grantApprovalRules")(data);
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon circular name="key" />
+        <Header.Content>
+          {formatMessage({ id: "grantApprovalRules.header" })}
+          <Header.Subheader>
+            {formatMessage({ id: "grantApprovalRules.subheader" })}
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Segment textAlign="right" basic>
+        <Button
+          primary
+          as={Link}
+          to={GRANT_APPROVAL_RULE_NEW}
+          content={formatMessage({
+            id: "grantApprovalRules.new",
+          })}
+        />
+      </Segment>
+
+      {!_.isEmpty(grantApprovalRules) && !loading ? (
+        <Table selectable>
+          <Table.Header>
+            <Table.Row>
+              {columns.map((column, i) => {
+                return (
+                  <Table.HeaderCell
+                    key={i}
+                    width={column.width}
+                    content={formatMessage({
+                      id: `grantApprovalRule.${column.name}`,
+                    })}
+                  />
+                );
+              })}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {grantApprovalRules.map((grantApprovalRule, i) => {
+              return (
+                <Table.Row
+                  key={i}
+                  onClick={() =>
+                    history.push(
+                      linkTo.GRANT_APPROVAL_RULE({ id: grantApprovalRule.id })
+                    )
+                  }
+                >
+                  {columns.map((column, key) => (
+                    <Table.Cell
+                      key={key}
+                      textAlign={column.textAlign}
+                      content={columnDecoratorComponent(column)(
+                        grantApprovalRule
+                      )}
+                    />
+                  ))}
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+        </Table>
+      ) : loading ? (
+        <Loader />
+      ) : (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "grantApprovalRules.empty" })}
+          </Header.Content>
+        </Header>
+      )}
+    </Segment>
+  );
+}

package/src/components/GrantRequest.js

@@ -6,8 +6,8 @@ import { Link } from "react-router-dom";
 import { linkTo } from "@truedat/core/routes";
 import { useIntl } from "react-intl";
 import { Grid, Segment, List, Label } from "semantic-ui-react";
+import GenericCrumbs from "@truedat/core/components/GenericCrumbs";
 import { getGrantRequestTemplate } from "../selectors";
-import GrantRequestCrumbs from "./GrantRequestCrumbs";
 import GrantRequestHeader from "./GrantRequestHeader";
 import GrantRequestSummary from "./GrantRequestSummary";
 
@@ -34,8 +34,9 @@ export const GrantRequest = ({ grantRequest, template }) => {
     grantRequest?._embedded?.group?._embedded?.created_by?.user_name;
   return (
     <>
-      <GrantRequestCrumbs
-        title={formatMessage({ id: "grantRequest.crumb.title" })}
+      <GenericCrumbs
+        header="grantRequests.header"
+        title="grantRequest.crumb.title"
       />
       <Grid columns="equal" style={{ marginTop: 0 }}>
         <Grid.Column width={12}>

package/src/components/GrantRoutes.js

@@ -4,14 +4,20 @@ import PropTypes from "prop-types";
 import { Route, Switch } from "react-router-dom";
 import { connect } from "react-redux";
 import {
+  GRANT_APPROVAL_RULE,
+  GRANT_APPROVAL_RULE_EDIT,
+  GRANT_APPROVAL_RULE_NEW,
   GRANT_REQUEST_APPROVALS,
   GRANT_REQUEST,
   GRANT_REQUESTS,
   GRANTS_REQUESTS_CHECKOUT,
   GRANTS,
+  GRANT_APPROVAL_RULES,
   MY_GRANT_REQUESTS,
   MY_GRANTS,
 } from "@truedat/core/routes";
+import GrantApprovalRuleNew from "./GrantApprovalRuleNew";
+import GrantApprovalRuleEdit from "./GrantApprovalRuleEdit";
 import GrantRequestApprovals from "./GrantRequestApprovals";
 import StructureGrantCartCheckout from "./StructureGrantCartCheckout";
 import GrantFiltersLoader from "./GrantFiltersLoader";
@@ -19,6 +25,8 @@ import GrantRequestsLoader from "./GrantRequestsLoader";
 import GrantRequestLoader from "./GrantRequestLoader";
 import GrantsLoader from "./GrantsLoader";
 import Grants from "./Grants";
+import GrantApprovalRule from "./GrantApprovalRule";
+import GrantApprovalRules from "./GrantApprovalRules";
 import MyGrantRequests from "./MyGrantRequests";
 import GrantRequest from "./GrantRequest";
 
@@ -80,6 +88,28 @@ export const GrantRoutes = ({ grantRequestLoaded }) => (
         </>
       )}
     />
+    <Switch>
+      <Route
+        exact
+        path={GRANT_APPROVAL_RULE_NEW}
+        render={() => <GrantApprovalRuleNew />}
+      />
+      <Route
+        exact
+        path={GRANT_APPROVAL_RULE_EDIT}
+        render={() => <GrantApprovalRuleEdit />}
+      />
+      <Route
+        exact
+        path={GRANT_APPROVAL_RULE}
+        render={() => <GrantApprovalRule />}
+      />
+      <Route
+        exact
+        path={GRANT_APPROVAL_RULES}
+        render={() => <GrantApprovalRules />}
+      />
+    </Switch>
     <Route
       path={GRANT_REQUESTS}
       render={() => (

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { GrantApprovalRule } from "../GrantApprovalRule";
+import { GRANT_APPROVAL_RULE_QUERY } from "../../api/queries";
+import en from "../../messages/en";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: 123 }),
+}));
+
+const grantApprovalRule = {
+  grantApprovalRule: {
+    __typename: "ApprovalRule",
+    id: "123",
+    name: "rule_name",
+    action: "approve",
+    role: "grants",
+    domainIds: ["1"],
+    userId: "1",
+    domains: [
+      {
+        __typename: "Domain",
+        name: "domain_test",
+      },
+    ],
+    conditions: [
+      {
+        __typename: "Condition",
+        field: "request.foo",
+        operator: "neq",
+        value: "bar",
+      },
+      {
+        __typename: "Condition",
+        field: "invalid_field",
+        operator: "eq",
+        value: "baz",
+      },
+    ],
+    comment: "comment invalid",
+  },
+};
+
+const approvalRuleMock = {
+  request: { query: GRANT_APPROVAL_RULE_QUERY, variables: { id: 123 } },
+  result: { data: grantApprovalRule },
+};
+
+const renderOpts = {
+  mocks: [approvalRuleMock],
+  messages: { en },
+  fallback: "lazy",
+};
+
+describe("<GrantApprovalRule />", () => {
+  it("matches the last snapshot", async () => {
+    const { container, queryByText } = render(
+      <GrantApprovalRule />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,120 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import GrantApprovalRuleConditions from "../GrantApprovalRuleConditions";
+import en from "../../messages/en";
+
+const renderOpts = {
+  messages: { en },
+};
+
+describe("<GrantApprovalRuleConditions />", () => {
+  it("matches the last snapshot with values", () => {
+    const props = {
+      onChange: jest.fn(),
+      value: [
+        {
+          fieldPrefix: "request",
+          fieldName: "foo",
+          operator: "eq",
+          value: "bar",
+        },
+        {
+          fieldPrefix: null,
+          fieldname: "invalid_field",
+          operator: "eq",
+          value: "bar",
+        },
+      ],
+    };
+    const { container } = render(
+      <GrantApprovalRuleConditions {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the last snapshot with empty values", () => {
+    const props = {
+      onChange: jest.fn(),
+      value: [{}],
+    };
+    const { container } = render(
+      <GrantApprovalRuleConditions {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the last snapshot with no values", () => {
+    const props = {
+      onChange: jest.fn(),
+    };
+    const { container } = render(
+      <GrantApprovalRuleConditions {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the last snapshot disable", () => {
+    const props = {
+      onChange: jest.fn(),
+      value: [{}],
+      disable: true,
+    };
+    const { container } = render(
+      <GrantApprovalRuleConditions {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("changing the form will trigger onChange function", async () => {
+    const onChange = jest.fn();
+    const props = {
+      onChange,
+      value: [{}],
+    };
+    const { findByText, getByRole } = render(
+      <GrantApprovalRuleConditions {...props} />,
+      renderOpts
+    );
+
+    userEvent.click(await findByText(/request metadata/i));
+    userEvent.type(getByRole("textbox", { name: /field/i }), "F");
+    userEvent.click(await findByText(/is equal/i));
+    userEvent.type(getByRole("textbox", { name: /value/i }), "V");
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.length).toBe(4);
+    });
+    expect(onChange.mock.calls).toMatchObject([
+      [[{ fieldPrefix: "request" }]],
+      [[{ fieldName: "F" }]],
+      [[{ operator: "eq" }]],
+      [[{ value: "V" }]],
+    ]);
+  });
+
+  it("add and remove condition", async () => {
+    const onChange = jest.fn();
+    const props = {
+      onChange,
+      value: [{}, {}],
+    };
+    const { container, findByText } = render(
+      <GrantApprovalRuleConditions {...props} />,
+      renderOpts
+    );
+
+    userEvent.click(await findByText(/add condition/i));
+    userEvent.click(container.querySelector("i.trash"));
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.length).toBe(2);
+    });
+    expect(onChange.mock.calls).toMatchObject([[[{}, {}, {}]], [[{}]]]);
+  });
+});