@truedat/dd 4.54.12 → 4.56.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.56.0] 2022-11-17
+
+### Added
+
+- [TD-5258] Approve grants request rules
+
 ## [4.54.12] 2022-11-14
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.54.12",
+  "version": "4.56.1",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.54.12",
+    "@truedat/test": "4.56.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.0",
-    "@truedat/auth": "4.54.12",
-    "@truedat/core": "4.54.12",
-    "@truedat/df": "4.54.12",
+    "@truedat/auth": "4.56.1",
+    "@truedat/core": "4.56.1",
+    "@truedat/df": "4.56.1",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "98b0eb7a9b7818b4c3879809fde0916f9b5f4ec9"
+  "gitHead": "d2b3dcb36b7d81889ee5642699595439750c0801"
 }

package/src/api/mutations.js

@@ -75,3 +75,31 @@ export const DELETE_STRUCTURE_TAG = gql`
     }
   }
 `;
+
+export const CREATE_GRANT_APPROVAL_RULE = gql`
+  mutation CreateGrantApprovalRule(
+    $approvalRule: CreateGrantApprovalRuleInput!
+  ) {
+    createGrantApprovalRule(approvalRule: $approvalRule) {
+      id
+    }
+  }
+`;
+
+export const UPDATE_GRANT_APPROVAL_RULE = gql`
+  mutation UpdateGrantApprovalRule(
+    $approvalRule: UpdateGrantApprovalRuleInput!
+  ) {
+    updateGrantApprovalRule(approvalRule: $approvalRule) {
+      id
+    }
+  }
+`;
+
+export const DELETE_GRANT_APPROVAL_RULE = gql`
+  mutation DeleteGrantApprovalRule($id: ID!) {
+    deleteGrantApprovalRule(id: $id) {
+      id
+    }
+  }
+`;

package/src/api/queries.js

@@ -120,6 +120,42 @@ export const STRUCTURE_NOTES_QUERY = gql`
   }
 `;
 
+export const GRANT_APPROVAL_RULES_QUERY = gql`
+  query GrantApprovalRules {
+    grantApprovalRules {
+      id
+      name
+      action
+      role
+      domains {
+        name
+      }
+    }
+  }
+`;
+
+export const GRANT_APPROVAL_RULE_QUERY = gql`
+  query GrantApprovalRule($id: ID!) {
+    grantApprovalRule(id: $id) {
+      id
+      name
+      action
+      role
+      domainIds
+      userId
+      domains {
+        name
+      }
+      conditions {
+        field
+        operator
+        value
+      }
+      comment
+    }
+  }
+`;
+
 export const STRUCTURE_STRUCTURE_LINKS_QUERY = gql`
   query DataStructureLinks($id: ID!) {
     dataStructure(id: $id) {

package/src/components/GrantApprovalRule.js

@@ -0,0 +1,149 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useIntl } from "react-intl";
+import { useParams } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import {
+  Button,
+  Header,
+  Grid,
+  Icon,
+  List,
+  Segment,
+  Table,
+} from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import GenericCrumbs from "@truedat/core/components/GenericCrumbs";
+import { GRANT_APPROVAL_RULE_QUERY } from "../api/queries";
+import GrantApprovalRuleDeleteButton from "./GrantApprovalRuleDeleteButton";
+
+export const GrantApprovalRule = () => {
+  const { formatMessage } = useIntl();
+  const { id } = useParams();
+
+  const { loading, data } = useQuery(GRANT_APPROVAL_RULE_QUERY, {
+    variables: { id },
+    fetchPolicy: "cache-and-network",
+  });
+  const approvalRule = _.get("grantApprovalRule")(data);
+
+  const fields = [
+    { name: "name" },
+    { name: "domain", path: "domains[0].name" },
+    { name: "role" },
+    {
+      name: "action",
+      render: (action) =>
+        formatMessage({
+          id: `grantApprovalRule.action.${action}`,
+        }),
+    },
+    { name: "comment" },
+  ];
+
+  return approvalRule ? (
+    <>
+      <GenericCrumbs
+        header="grantApprovalRules.header"
+        title={approvalRule?.name}
+      />
+      <Segment loading={loading}>
+        <Grid>
+          <Grid.Column width={8}>
+            <Header as="h2">
+              <Icon circular name="key" />
+              <Header.Content>
+                {formatMessage({ id: "grantApprovalRule.subheader" })}
+              </Header.Content>
+            </Header>
+          </Grid.Column>
+          <Grid.Column width={8} textAlign="right">
+            <Button
+              primary
+              as={Link}
+              to={linkTo.GRANT_APPROVAL_RULE_EDIT({ id: approvalRule?.id })}
+              content={formatMessage({
+                id: "grantApprovalRules.edit",
+              })}
+            />
+            <GrantApprovalRuleDeleteButton approvalRule={approvalRule} />
+          </Grid.Column>
+        </Grid>
+        <List size="big" relaxed>
+          {fields.map(({ name, path, render = _.identity }, key) => (
+            <List.Item key={key}>
+              <List.Header>
+                {formatMessage({ id: `grantApprovalRule.${name}` })}
+              </List.Header>
+              <List.Content>
+                {render(_.prop(path || name)(approvalRule))}
+              </List.Content>
+            </List.Item>
+          ))}
+          <List.Item>
+            <List.Header>
+              {formatMessage({ id: "grantApprovalRule.conditions" })}
+            </List.Header>
+
+            <Table compact collapsing celled>
+              <Table.Header>
+                <Table.Row textAlign="center">
+                  <Table.HeaderCell>
+                    {formatMessage({
+                      id: "grantApprovalRule.conditions.field_prefix",
+                    })}
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    {formatMessage({
+                      id: "grantApprovalRule.conditions.field_name",
+                    })}
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    {formatMessage({
+                      id: "grantApprovalRule.conditions.operator",
+                    })}
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    {formatMessage({
+                      id: "grantApprovalRule.conditions.value",
+                    })}
+                  </Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
+
+              <Table.Body>
+                {_.getOr(
+                  [],
+                  "conditions"
+                )(approvalRule).map(({ field, operator, value }, key) => {
+                  const fields = field.match(/(\w+)\.(.*)/);
+                  const fieldPrefix = fields ? fields[1] : null;
+                  const fieldName = fields ? fields[2] : field;
+                  return (
+                    <Table.Row key={key} textAlign="center">
+                      <Table.Cell>
+                        {formatMessage({
+                          id: `grantApprovalRule.conditions.field_prefix.${fieldPrefix}`,
+                        })}
+                      </Table.Cell>
+                      <Table.Cell>{fieldName}</Table.Cell>
+                      <Table.Cell>
+                        {formatMessage({
+                          id: `grantApprovalRule.conditions.operator.${operator}`,
+                        })}
+                      </Table.Cell>
+                      <Table.Cell>{value}</Table.Cell>
+                    </Table.Row>
+                  );
+                })}
+              </Table.Body>
+            </Table>
+          </List.Item>
+        </List>
+      </Segment>
+    </>
+  ) : null;
+};
+
+export default GrantApprovalRule;

package/src/components/GrantApprovalRuleConditions.js

@@ -0,0 +1,134 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Button, Form, Icon, Grid } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+
+export default function GrantApprovalRuleConditions({
+  onChange,
+  value,
+  disabled,
+}) {
+  const { formatMessage } = useIntl();
+
+  const handleChange = (key, name, newValue) => {
+    const calculatedValue = _.update(`[${key}].${name}`, () => newValue)(value);
+    onChange(calculatedValue);
+  };
+
+  return (
+    <Grid verticalAlign="middle">
+      {value
+        ? value.map((condition, key) => (
+            <Grid.Row key={key} columns={2}>
+              <Grid.Column width={15}>
+                <Form.Group>
+                  <Form.Dropdown
+                    width={4}
+                    disabled={disabled}
+                    name="fieldPrefix"
+                    label={formatMessage({
+                      id: "grantApprovalRule.conditions.field_prefix",
+                    })}
+                    selection
+                    options={["request", "note", "metadata"].map((o) => ({
+                      key: o,
+                      value: o,
+                      text: formatMessage({
+                        id: `grantApprovalRule.conditions.field_prefix.${o}`,
+                      }),
+                    }))}
+                    onChange={(_e, { value, name }) =>
+                      handleChange(key, name, value)
+                    }
+                    placeholder={formatMessage({
+                      id: "grantApprovalRule.conditions.field_prefix.placeholder",
+                    })}
+                    value={condition.fieldPrefix}
+                  />
+                  <Form.Input
+                    id={`fieldName-${key}`}
+                    width={4}
+                    disabled={disabled}
+                    name="fieldName"
+                    label={formatMessage({
+                      id: "grantApprovalRule.conditions.field_name",
+                    })}
+                    value={condition.fieldName || ""}
+                    onChange={(_e, { value, name }) =>
+                      handleChange(key, name, value)
+                    }
+                  />
+                  <Form.Dropdown
+                    width={4}
+                    disabled={disabled}
+                    name="operator"
+                    label={formatMessage({
+                      id: "grantApprovalRule.conditions.operator",
+                    })}
+                    selection
+                    options={["eq", "neq"].map((o) => ({
+                      key: o,
+                      value: o,
+                      text: formatMessage({
+                        id: `grantApprovalRule.conditions.operator.${o}`,
+                      }),
+                    }))}
+                    onChange={(_e, { value, name }) =>
+                      handleChange(key, name, value)
+                    }
+                    placeholder={formatMessage({
+                      id: "grantApprovalRule.conditions.operator.placeholder",
+                    })}
+                    value={condition.operator}
+                  />
+                  <Form.Input
+                    id={`value-${key}`}
+                    width={4}
+                    disabled={disabled}
+                    name="value"
+                    label={formatMessage({
+                      id: "grantApprovalRule.conditions.value",
+                    })}
+                    value={condition.value || ""}
+                    onChange={(_e, { value, name }) =>
+                      handleChange(key, name, value)
+                    }
+                  />
+                </Form.Group>
+              </Grid.Column>
+              <Grid.Column width={1}>
+                {_.size(value) !== 1 ? (
+                  <Icon
+                    name="trash"
+                    className="selectable"
+                    onClick={() =>
+                      onChange([
+                        ..._.slice(0, key)(value),
+                        ..._.slice(key + 1, _.size(value))(value),
+                      ])
+                    }
+                  />
+                ) : null}
+              </Grid.Column>
+            </Grid.Row>
+          ))
+        : null}
+      <Grid.Row>
+        <Grid.Column>
+          <Button disabled={disabled} onClick={() => onChange([...value, {}])}>
+            {formatMessage({
+              id: "grantApprovalRule.conditions.addCondition",
+            })}
+          </Button>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+}
+
+GrantApprovalRuleConditions.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.array,
+  disabled: PropTypes.bool,
+};

package/src/components/GrantApprovalRuleDeleteButton.js

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Button } from "semantic-ui-react";
+import { ConfirmModal } from "@truedat/core/components";
+import { deleteGrantApprovalRule } from "../routines";
+
+export const GrantApprovalRuleDeleteButton = ({
+  approvalRule,
+  deleteGrantApprovalRule,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ConfirmModal
+      trigger={
+        <Button>
+          {formatMessage({
+            id: "grantApprovalRules.delete",
+          })}
+        </Button>
+      }
+      header={formatMessage({
+        id: "grantApprovalRule.actions.delete.confirmation.header",
+      })}
+      content={formatMessage({
+        id: "grantApprovalRule.actions.delete.confirmation.content",
+      })}
+      onConfirm={() => deleteGrantApprovalRule({ id: approvalRule.id })}
+      onOpen={(e) => e.stopPropagation()}
+      onClose={(e) => e.stopPropagation()}
+    />
+  );
+};
+
+GrantApprovalRuleDeleteButton.propTypes = {
+  approvalRule: PropTypes.object,
+  deleteGrantApprovalRule: PropTypes.func,
+};
+
+export default connect(null, { deleteGrantApprovalRule })(
+  GrantApprovalRuleDeleteButton
+);

package/src/components/GrantApprovalRuleEdit.js

@@ -0,0 +1,38 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Loader } from "semantic-ui-react";
+import { useQuery } from "@apollo/client";
+import { useParams } from "react-router-dom";
+import { connect } from "react-redux";
+import { GRANT_APPROVAL_RULE_QUERY } from "../api/queries";
+import { updateGrantApprovalRule } from "../routines";
+import GrantApprovalRuleForm from "./GrantApprovalRuleForm";
+
+export const GrantApprovalRuleEdit = ({ updateGrantApprovalRule }) => {
+  const { id } = useParams();
+
+  const { loading, data } = useQuery(GRANT_APPROVAL_RULE_QUERY, {
+    variables: { id },
+    fetchPolicy: "cache-and-network",
+  });
+
+  const approvalRule = _.get("grantApprovalRule")(data);
+
+  return !loading && approvalRule ? (
+    <GrantApprovalRuleForm
+      onSubmit={updateGrantApprovalRule}
+      approvalRule={approvalRule}
+    />
+  ) : (
+    <Loader />
+  );
+};
+
+GrantApprovalRuleEdit.propTypes = {
+  updateGrantApprovalRule: PropTypes.func,
+};
+
+export default connect(null, { updateGrantApprovalRule })(
+  GrantApprovalRuleEdit
+);