@truedat/dd 5.19.0 → 5.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.19.0",
+  "version": "5.20.1",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.19.0",
-    "@truedat/core": "5.19.0",
-    "@truedat/df": "5.19.0",
+    "@truedat/auth": "5.20.1",
+    "@truedat/core": "5.20.1",
+    "@truedat/df": "5.20.1",
     "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": "df3fcd6655456c3468259d79762800c3c417147d"
+  "gitHead": "a7197e02a1b1a88c375fe044dee65c7e96ccd618"
 }

package/src/api/queries.js

@@ -94,7 +94,7 @@ export const REFERENCE_DATASET_QUERY = gql`
   }
 `;
 
-export const LATEST_GRANT_REQUEST_QUERY = gql`
+export const LATEST_GRANT_REQUEST_BY_DS_QUERY = gql`
   query latestGrantRequest($id: ID!) {
     latestGrantRequest(data_structure_id: $id) {
       id
@@ -103,6 +103,24 @@ export const LATEST_GRANT_REQUEST_QUERY = gql`
           id
         }
       }
+      requestType
+      status {
+        status
+      }
+    }
+  }
+`;
+
+export const LATEST_GRANT_REQUEST_BY_GRANT_QUERY = gql`
+  query latestGrantRequest($id: ID!, $requestType: RequestTypeEnum!) {
+    latestGrantRequest(grant_id: $id, requestType: $requestType) {
+      id
+      group {
+        grant {
+          id
+        }
+      }
+      requestType
       status {
         status
       }

package/src/components/Grant.js

@@ -1,17 +1,16 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
+import Moment from "react-moment";
 import { useIntl } from "react-intl";
 import { Link, useParams } from "react-router-dom";
-
-import Moment from "react-moment";
 import { Grid, Segment, Header, Icon, List, Button } from "semantic-ui-react";
-
 import { linkTo } from "@truedat/core/routes";
 import { useGrant, useGrantRemoval, useStructure } from "../hooks/useGrant";
 import GrantCrumbs from "./GrantCrumbs";
 import GrantRemoval from "./GrantRemoval";
 import GrantChangeRequest from "./GrantChangeRequest";
+
 const DynamicFieldValue = React.lazy(() =>
   import("@truedat/df/components/DynamicFieldValue")
 );
@@ -52,6 +51,8 @@ export const GrantHeader = ({ grant, title, actions, onStatusChange }) => {
               })} ${title}`}
             </Header.Content>
           </Header>
+        </Grid.Column>
+        <Grid.Column width={4} textAlign="right">
           {actions?.update && !loading ? (
             <GrantChangeRequest
               structure={data_structure}
@@ -66,30 +67,11 @@ export const GrantHeader = ({ grant, title, actions, onStatusChange }) => {
               />
             </GrantChangeRequest>
           ) : null}
-        </Grid.Column>
-        <Grid.Column width={4} textAlign="right">
-          {actions?.request_removal ? (
-            <GrantRemoval grant={grant} onConfirm={onStatusChange}>
-              <Button
-                className="button icon group-actions"
-                color="red"
-                content={formatMessage({
-                  id: "grant.actions.request_removal.button",
-                })}
-              />
-            </GrantRemoval>
-          ) : null}
-          {actions?.cancel_removal ? (
-            <GrantRemoval grant={grant} onConfirm={onStatusChange}>
-              <Button
-                className="button icon group-actions"
-                color="olive"
-                content={formatMessage({
-                  id: "grant.actions.cancel_removal.button",
-                })}
-              />
-            </GrantRemoval>
-          ) : null}
+          <GrantRemoval
+            actions={actions}
+            grant={grant}
+            onConfirm={onStatusChange}
+          />
         </Grid.Column>
       </Grid.Row>
     </Grid>

package/src/components/GrantRemoval.js

@@ -1,56 +1,48 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useIntl } from "react-intl";
-import { ConfirmModal } from "@truedat/core/components";
-import _ from "lodash";
 import { requestGrantRemoval } from "../routines";
+import GrantRemovalDirectButton from "./GrantRemovalDirectButton";
+import GrantRemovalWorkflow from "./GrantRemovalWorkflow";
 
 export const GrantRemoval = ({
   grant,
+  actions,
   requestGrantRemoval,
-  children,
   onConfirm,
-  previousStructureQuery,
+  userPermissions,
 }) => {
-  const { formatMessage } = useIntl();
-
   if (!grant) return null;
 
-  const action = grant.pending_removal ? "cancel_removal" : "request_removal";
+  const directButtonProps = ({ pending_removal }) => ({
+    actions,
+    grant,
+    requestGrantRemoval,
+    onConfirm,
+    operation: !pending_removal ? "markPendingRemoval" : "unmarkPendingRemoval",
+  });
+
+  // from StructureAccess
+  if (userPermissions?.update_grant_removal) {
+    return <GrantRemovalDirectButton {...directButtonProps(grant)} />;
+  }
+
+  // from Grant
+  if (actions?.manage_grant_removal) {
+    return <GrantRemovalDirectButton {...directButtonProps(grant)} />;
+  } else if (actions?.manage_grant_removal_request) {
+    return <GrantRemovalWorkflow grant={grant} actions={actions} />;
+  }
 
-  return (
-    <ConfirmModal
-      trigger={children}
-      header={formatMessage({
-        id: `grant.actions.${action}.confirmation.header`,
-      })}
-      content={formatMessage({
-        id: `grant.actions.${action}.confirmation.content`,
-      })}
-      onConfirm={() => {
-        const onConfirmPayload = {
-          id: grant.id,
-          action,
-          data_structure_id: _.prop("data_structure.id")(grant),
-          version: _.prop("data_structure_version.id")(grant),
-          previousStructureQuery,
-        };
-        if (_.isFunction(onConfirm)) onConfirm(onConfirmPayload);
-        else requestGrantRemoval(onConfirmPayload);
-      }}
-      onOpen={(e) => e.stopPropagation()}
-      onClose={(e) => e.stopPropagation()}
-    />
-  );
+  return null;
 };
 
 GrantRemoval.propTypes = {
   grant: PropTypes.object,
+  actions: PropTypes.object,
   requestGrantRemoval: PropTypes.func,
-  children: PropTypes.node,
+  userPermissions: PropTypes.object,
   onConfirm: PropTypes.func,
-  previousStructureQuery: PropTypes.object,
 };
 
 export default connect(null, { requestGrantRemoval })(GrantRemoval);

package/src/components/GrantRemovalDirectButton.js

@@ -0,0 +1,89 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { ConfirmModal } from "@truedat/core/components";
+import { Button } from "semantic-ui-react";
+
+export const GrantRemovalDirectButton = ({
+  actions,
+  grant,
+  requestGrantRemoval,
+  onConfirm,
+  previousStructureQuery,
+  operation,
+}) => {
+  const { formatMessage } = useIntl();
+  const [button, setButton] = useState(null);
+
+  useEffect(() => {
+    const { color, translation } =
+      operation === "markPendingRemoval"
+        ? {
+            color: "red",
+            translation: "grant.actions.markPendingRemoval.button",
+          }
+        : operation === "unmarkPendingRemoval"
+        ? {
+            color: "olive",
+            translation: "grant.actions.unmarkPendingRemoval.button",
+          }
+        : { color: null, translation: null };
+
+    setButton(
+      <Button
+        className="button icon group-actions"
+        color={color}
+        content={formatMessage({
+          id: translation,
+        })}
+      />
+    );
+  }, [operation, formatMessage]);
+
+  if (!grant) {
+    return null;
+  }
+
+  const action = grant.pending_removal
+    ? "unmarkPendingRemoval"
+    : "markPendingRemoval";
+
+  const removeGrant = _.isFunction(onConfirm) ? onConfirm : requestGrantRemoval;
+  const payload = {
+    id: grant.id,
+    action: _.snakeCase(action),
+    data_structure_id: _.prop("data_structure.id")(grant),
+    version: _.prop("data_structure_version.id")(grant),
+    previousStructureQuery,
+    version: grant?.data_structure_version?.id,
+  };
+
+  return (
+    <ConfirmModal
+      trigger={button}
+      header={formatMessage({
+        id: `grant.actions.${action}.confirmation.header`,
+      })}
+      content={formatMessage({
+        id: `grant.actions.${action}.confirmation.content`,
+      })}
+      onConfirm={() => {
+        removeGrant(payload)
+      }}
+      onOpen={(e) => e.stopPropagation()}
+      onClose={(e) => e.stopPropagation()}
+    />
+  );
+};
+
+GrantRemovalDirectButton.propTypes = {
+  actions: PropTypes.object,
+  grant: PropTypes.object,
+  requestGrantRemoval: PropTypes.func,
+  onConfirm: PropTypes.func,
+  previousStructureQuery: PropTypes.object,
+  operation: PropTypes.string,
+};
+
+export default GrantRemovalDirectButton;

package/src/components/GrantRemovalWorkflow.js

@@ -0,0 +1,107 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import { Button, Loader, Popup } from "semantic-ui-react";
+import { useHistory } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+import { LATEST_GRANT_REQUEST_BY_GRANT_QUERY } from "@truedat/dd/api/queries";
+import { useGrantRequestGroup } from "../hooks/useGrantRequest";
+import GrantRemovalWorkflowDropdown from "./GrantRemovalWorkflowDropdown";
+
+export const GrantRemovalWorkflow = ({
+  latestGrantRequest: latestGrantRequestProp,
+  grant,
+}) => {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [latestGrantRequest, setLatestGrantRequest] = useState(
+    latestGrantRequestProp
+  );
+  const grantRequestStatus = _.prop("status.status")(latestGrantRequest);
+  const { trigger: createGrantRequestGroupTrigger } = useGrantRequestGroup();
+
+  const createGrantRequestGroupAndRedirect = (payload) => async (e) => {
+    const {
+      data: {
+        data: {
+          _embedded: {
+            requests: [{ id: grantDeletionRequestId }],
+          },
+        },
+      },
+    } = await createGrantRequestGroupTrigger(payload);
+    history.push(linkTo.GRANT_REQUEST({ id: grantDeletionRequestId }));
+  };
+
+  const payload = {
+    grant_request_group: {
+      requests: [
+        {
+          grant_id: grant?.id,
+          filters: {},
+          request_type: "grant_removal",
+        },
+      ],
+    },
+  };
+
+  const requestButton = (
+    <Button
+      className="button basic icon group-actions"
+      icon="shield"
+      color="orange"
+      onClick={createGrantRequestGroupAndRedirect(payload)}
+    />
+  );
+
+  return (!grantRequestStatus || grantRequestStatus === "cancelled") &&
+    !grant.pending_removal ? (
+    <Popup
+      content={formatMessage({
+        id: "request.grantRemoval.action.start.description",
+      })}
+      trigger={requestButton}
+    />
+  ) : (
+    <GrantRemovalWorkflowDropdown
+      latestGrantRequest={latestGrantRequest}
+      setLatestGrantRequest={setLatestGrantRequest}
+      grant={grant}
+    />
+  );
+};
+
+GrantRemovalWorkflow.propTypes = {
+  latestGrantRequest: PropTypes.object,
+  grant: PropTypes.object,
+};
+
+export const GrantRemovalWorkflowLoader = (props) => {
+  const { loading, error, data } = useQuery(
+    LATEST_GRANT_REQUEST_BY_GRANT_QUERY,
+    {
+      fetchPolicy: "cache-and-network",
+      skip: props?.actions?.hasOwnProperty("manage_grant_removal"),
+      variables: { id: props.grant.id, requestType: "GRANT_REMOVAL" },
+    }
+  );
+  if (error) return null;
+  if (loading) return <Loader />;
+  const latestGrantRequest = data?.latestGrantRequest;
+  return (
+    <GrantRemovalWorkflow
+      loading={loading}
+      latestGrantRequest={latestGrantRequest}
+      {...props}
+    />
+  );
+};
+
+GrantRemovalWorkflowLoader.propTypes = {
+  actions: PropTypes.object,
+  grant: PropTypes.object,
+};
+
+export default GrantRemovalWorkflowLoader;

package/src/components/GrantRemovalWorkflowDropdown.js

@@ -0,0 +1,144 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Button, Dropdown, Popup, Header } from "semantic-ui-react";
+import { useHistory } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+
+import GrantRequestCancel from "./GrantRequestCancel";
+
+export const GrantRemovalWorkflowDropdown = ({
+  latestGrantRequest,
+  setLatestGrantRequest,
+  grant,
+}) => {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+
+  const grantRequestStatus = _.prop("status.status")(latestGrantRequest);
+
+  const actions = {
+    viewRequest: latestGrantRequest ? (
+      <Dropdown.Item
+        key="viewRequest"
+        onClick={() =>
+          history.push(linkTo.GRANT_REQUEST({ id: latestGrantRequest.id }))
+        }
+        icon="info"
+        text={formatMessage({
+          id: `grant.actions.viewRequest.confirmation.header`,
+        })}
+      />
+    ) : null,
+    cancelRequest: (
+      <GrantRequestCancel
+        key="cancelRequest"
+        grantRequest={latestGrantRequest}
+        setLatestGrantRequest={setLatestGrantRequest}
+      >
+        <Dropdown.Item
+          icon="delete"
+          text={formatMessage({
+            id: "structure.grant.cancel_grant_request",
+          })}
+        />
+      </GrantRequestCancel>
+    ),
+  };
+
+  const dropdownStates = {
+    pending: {
+      color: "yellow",
+      options: [actions["viewRequest"], actions["cancelRequest"]],
+      header: "request.grantRemoval.state.pending.description",
+    },
+    rejected: {
+      color: "red",
+      options: [actions["viewRequest"]],
+      header: "request.grantRemoval.state.rejected.description",
+    },
+    processing: {
+      color: "grey",
+      options: [actions["viewRequest"]],
+      header: "request.grantRemoval.state.processing.description",
+    },
+    approved: {
+      color: "brown",
+      options: [actions["viewRequest"]],
+      header:
+        "request.grantRemoval.state.approvedAndGrantPendingRemoval.description",
+    },
+    workflowBypassedActive: {
+      color: "grey",
+      options: [actions["viewRequest"]],
+      header: "request.grantRemoval.state.workflowBypassedActive.description",
+    },
+    workflowBypassedPendingRemoval: {
+      color: "grey",
+      options: [actions["viewRequest"]],
+      header:
+        "request.grantRemoval.state.workflowBypassedPendingRemoval.description",
+    },
+  };
+
+  const currentState = (() => {
+    if (!grant.pending_removal) {
+      if (["pending", "rejected", "processing"].includes(grantRequestStatus))
+        return grantRequestStatus;
+      else return "workflowBypassedActive";
+    } else {
+      if (grantRequestStatus === "approved") return "approved";
+      else return "workflowBypassedPendingRemoval";
+    }
+  })();
+
+  const stateProps = dropdownStates[currentState];
+  const grantRequestDetails = grantRequestStatus ? (
+    <>{formatMessage({ id: `grantRequest.content.${grantRequestStatus}` })}</>
+  ) : null;
+  const popupContent = (
+    <>
+      {stateProps?.header ? (
+        <Header as="h6">{formatMessage({ id: stateProps.header })}</Header>
+      ) : null}
+      {!["workflowBypassedActive", "workflowBypassedPendingRemoval"].includes(
+        currentState
+      ) && latestGrantRequest
+        ? grantRequestDetails
+        : null}
+    </>
+  );
+
+  const dropdown = (
+    <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 currentState ? (
+    <Popup content={popupContent} trigger={dropdown} />
+  ) : (
+    <p>Error: undefined currentState</p>
+  );
+};
+
+GrantRemovalWorkflowDropdown.propTypes = {
+  latestGrantRequest: PropTypes.object,
+  setLatestGrantRequest: PropTypes.func,
+  grant: PropTypes.object,
+};
+
+export default GrantRemovalWorkflowDropdown;

package/src/components/GrantRequest.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { linkTo } from "@truedat/core/routes";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Grid, Segment, List, Label } from "semantic-ui-react";
 import GenericCrumbs from "@truedat/core/components/GenericCrumbs";
 import { getGrantRequestTemplate } from "../selectors";
@@ -19,6 +19,7 @@ const ConditionSummary = React.lazy(() =>
   import("@truedat/dq/components/ConditionSummary")
 );
 
+
 export const GrantRequest = ({ grantRequest, template }) => {
   const { formatMessage } = useIntl();
   const metadata = grantRequest?.metadata;

package/src/components/GrantRequestCancel.js

@@ -8,6 +8,7 @@ import { createGrantRequestStatus } from "../routines";
 export const GrantRequestCancel = ({
   structureId,
   grantRequest,
+  setLatestGrantRequest,
   createGrantRequestStatus,
   children,
   previousStructureQuery,
@@ -27,7 +28,8 @@ export const GrantRequestCancel = ({
       onConfirm={() =>
         createGrantRequestStatus({
           structureId,
-          grantRequestId: grantRequest.id,
+          grantRequest,
+          setLatestGrantRequest,
           status: "cancelled",
           previousStructureQuery,
         })
@@ -44,6 +46,7 @@ GrantRequestCancel.propTypes = {
   createGrantRequestStatus: PropTypes.func,
   children: PropTypes.node,
   previousStructureQuery: PropTypes.object,
+  setLatestGrantRequest: PropTypes.func,
 };
 
-export default connect(null, { createGrantRequestStatus })(GrantRequestCancel);
+export default connect(null, { createGrantRequestStatus })(GrantRequestCancel);

package/src/components/GrantRequestHeader.js

@@ -6,12 +6,20 @@ import { useIntl } from "react-intl";
 import { Header, Grid, Icon } from "semantic-ui-react";
 import GrantRequestApprovalPopup from "./GrantRequestApprovalPopup";
 
-export const GrantRequestHeader = ({ grantRequest }) => {
-  const isModification = _.prop("_embedded.group._embedded.modification_grant")(
-    grantRequest
-  );
+const selectGrantTypeOptions = (grantRequest) => {
+  const [color, translationId] =
+    grantRequest?.request_type === "grant_removal"
+      ? ["red", "request.grantRemoval"]
+      : grantRequest?._embedded?.group?._embedded.modification_grant
+      ? ["yellow", "grantRequest.header.modification"]
+      : [undefined, "request.grantAccess"];
+  return { color, translationId };
+};
 
+export const GrantRequestHeader = ({ grantRequest }) => {
   const { formatMessage } = useIntl();
+  const { translationId: grantTypeTranslationId } =
+    selectGrantTypeOptions(grantRequest);
   const canApprove =
     grantRequest?.status === "pending" &&
     !_.isEmpty(grantRequest?.pending_roles);
@@ -22,9 +30,7 @@ export const GrantRequestHeader = ({ grantRequest }) => {
           <Icon circular name="key" />
           <Header.Content>
             {formatMessage({
-              id: isModification
-                ? "grantRequest.header.modification"
-                : "grantRequest.header",
+              id: grantTypeTranslationId,
             })}
           </Header.Content>
         </Header>

package/src/components/GrantRequestRow.js

@@ -40,7 +40,14 @@ export const GrantRequestRow = ({
         <Table.Cell
           key={key}
           textAlign={column.textAlign}
-          onClick={() => history.push(linkTo.GRANT_REQUEST(grantRequest))}
+          onClick={(ev) => {
+            /* Only do history.push if the table cell but not
+             * some possibly contained anchor (or an element
+             * inside an anchor, such as an icon) is clicked
+             */
+            !ev.target.closest("a") &&
+              history.push(linkTo.GRANT_REQUEST(grantRequest))
+          }}
           content={columnDecoratorComponent(column)(grantRequest)}
         />
       ))}

package/src/components/GrantRequests.js

@@ -51,9 +51,14 @@ export const GrantRequests = ({
                       <Table.Cell
                         key={key}
                         textAlign={column.textAlign}
-                        onClick={() =>
-                          history.push(linkTo.GRANT_REQUEST(grantRequest))
-                        }
+                        onClick={(ev) => {
+                          /* Only do history.push if the table cell but not
+                           * some possibly contained anchor (or an element
+                           * inside an anchor, such as an icon) is clicked
+                           */
+                          !ev.target.closest("a") &&
+                            history.push(linkTo.GRANT_REQUEST(grantRequest));
+                        }}
                         content={columnDecoratorComponent(column)(grantRequest)}
                       />
                     ))}

package/src/components/GrantRequestsTable.js

@@ -40,7 +40,7 @@ export const GrantRequestsTable = ({
   return (
     <>
       {!_.isEmpty(grantRequests) ? (
-        <Table sortable>
+        <Table sortable selectable>
           <Table.Header>
             <Table.Row>
               {roleSelected ? (