@truedat/dd 4.45.5 → 4.45.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.45.8] 2022-06-09
+
+### Added
+
+- [TD-4431] Support for requesting Grant removal
+
 ## [4.45.5] 2022-06-06
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.45.5",
+  "version": "4.45.8",
   "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.45.1",
+    "@truedat/test": "4.45.8",
     "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.6.4",
-    "@truedat/auth": "4.45.5",
-    "@truedat/core": "4.45.1",
-    "@truedat/df": "4.45.5",
+    "@truedat/auth": "4.45.8",
+    "@truedat/core": "4.45.8",
+    "@truedat/df": "4.45.8",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -111,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "c4454f208bd09af1ce23225a76df44c6390299c3"
+  "gitHead": "1b5acb1dc1233181e5a47353fd8a5da1424e7a47"
 }

package/src/api.js

@@ -12,6 +12,7 @@ const API_GRANT_REQUEST = "/api/grant_requests/:id";
 const API_GRANT_REQUEST_APPROVALS = "/api/grant_requests/:id/approvals";
 const API_GRANT_REQUEST_GROUP = "/api/grant_request_groups";
 const API_GRANT_REQUESTS = "/api/grant_requests";
+const API_GRANT = "/api/grants/:id";
 const API_GRANTS_CSV = "/api/grants/csv";
 const API_GRANTS_SEARCH = "/api/grants/search";
 const API_GRAPH = "/api/graphs/:id";
@@ -54,6 +55,7 @@ export {
   API_DATA_STRUCTURE_FILTERS_SEARCH,
   API_DATA_STRUCTURE_VERSION,
   API_PROFILE_EXECUTION,
+  API_GRANT,
   API_GRANT_FILTERS_SEARCH,
   API_GRANT_REQUEST,
   API_GRANT_REQUEST_APPROVALS,

package/src/components/GrantRemoval.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 { ConfirmModal } from "@truedat/core/components";
+import { requestGrantRemoval } from "../routines";
+
+export const GrantRemoval = ({ grant, requestGrantRemoval, children }) => {
+  const { formatMessage } = useIntl();
+
+  if (!grant) return;
+
+  const action = grant.pending_removal ? "cancel_removal" : "request_removal";
+
+  return (
+    <ConfirmModal
+      trigger={children}
+      header={formatMessage({
+        id: `grant.actions.${action}.confirmation.header`,
+      })}
+      content={formatMessage({
+        id: `grant.actions.${action}.confirmation.content`,
+      })}
+      onConfirm={() =>
+        requestGrantRemoval({
+          id: grant.id,
+          action,
+          data_structure_id: grant.data_structure.id,
+          version: grant.data_structure_version.id,
+        })
+      }
+      onOpen={(e) => e.stopPropagation()}
+      onClose={(e) => e.stopPropagation()}
+    />
+  );
+};
+
+GrantRemoval.propTypes = {
+  grant: PropTypes.object,
+  requestGrantRemoval: PropTypes.func,
+  children: PropTypes.node,
+};
+
+export default connect(null, { requestGrantRemoval })(GrantRemoval);

package/src/components/Grants.js

@@ -29,10 +29,7 @@ export const Grants = ({ grantsLoading, onlyMyGrants }) => (
       </Header.Content>
     </Header>
     <Segment attached="bottom">
-      <GrantsDownloadButton
-        onlyMyGrants={onlyMyGrants}
-        hasFilterApplied={true}
-      />
+      <GrantsDownloadButton onlyMyGrants={onlyMyGrants} hasFilterApplied />
       <GrantsSearch />
       <GrantSelectedFilters />
       <GrantDateFilter />

package/src/components/LineageGroup.js

@@ -20,11 +20,11 @@ export const LineageGroup = ({
   structure_id: structureId,
   onClick,
   selected,
-  onHover
+  onHover,
 }) => {
   const handleClick =
     structureId && onClick
-      ? e => {
+      ? (e) => {
           e.preventDefault();
           e.stopPropagation();
           onClick();
@@ -47,7 +47,7 @@ export const LineageGroup = ({
   const content = selected ? (
     <Popup
       size="small"
-      open={true}
+      open
       content={
         <LineageContextMenu
           id={id}
@@ -67,7 +67,7 @@ export const LineageGroup = ({
   )([
     ["group", `z${z}`],
     type ? [lowerDeburr(type)] : [],
-    active ? ["active"] : []
+    active ? ["active"] : [],
   ]);
   return (
     <g className={classNames} onMouseOver={onHover} onContextMenu={handleClick}>
@@ -91,7 +91,7 @@ LineageGroup.propTypes = {
   structure_id: PropTypes.number,
   type: PropTypes.string,
   onClick: PropTypes.func,
-  onHover: PropTypes.func
+  onHover: PropTypes.func,
 };
 
 export default LineageGroup;

package/src/components/LineageResource.js

@@ -17,10 +17,10 @@ export const LineageResource = ({
   structure_id: structureId,
   onClick,
   selected,
-  onHover
+  onHover,
 }) => {
   const handleClick = onClick
-    ? e => {
+    ? (e) => {
         e.preventDefault();
         e.stopPropagation();
         onClick();
@@ -37,7 +37,7 @@ export const LineageResource = ({
   const content = selected ? (
     <Popup
       size="small"
-      open={true}
+      open
       content={
         <LineageContextMenu
           id={id}
@@ -72,7 +72,7 @@ LineageResource.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string,
   selected: PropTypes.bool,
-  onHover: PropTypes.func
+  onHover: PropTypes.func,
 };
 
 export default LineageResource;

package/src/components/StructureDeleteButton.js

@@ -25,7 +25,7 @@ export const StructureDeleteButton = ({ structure, deleteStructure }) => {
       })}
       onConfirm={() => deleteStructure({ id: structure.id })}
       onOpen={(e) => e.stopPropagation()}
-      onClone={(e) => e.stopPropagation()}
+      onClose={(e) => e.stopPropagation()}
     />
   );
 };

package/src/components/StructureGrantButton.js

@@ -0,0 +1,63 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Icon, Label, Popup } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { DateTime } from "@truedat/core/components";
+import GrantRemoval from "./GrantRemoval";
+import StructureGrantRequestButton from "./StructureGrantRequestButton";
+
+const isNilOrEmpty = (value) => _.isEmpty(value) || _.isNil(value);
+export const StructureGrantButton = ({ structure, structureGrantPopup }) => {
+  const { formatMessage } = useIntl();
+  const { grant } = structure;
+
+  const popupContent = _.flow(
+    _.reject(({ field }) => isNilOrEmpty(_.get(field)(grant))),
+    _.map(({ field, type }) => {
+      switch (type) {
+        case "datetime":
+          return <DateTime value={_.get(field)(grant)} key={field} />;
+        default:
+          return <div key={field}>{_.get(field)(grant)}</div>;
+      }
+    })
+  )(structureGrantPopup);
+
+  const label = grant ? (
+    grant.pending_removal ? (
+      <Label color="orange">
+        <Icon name="shield" />
+        {formatMessage({ id: "structure.grant.has_grant_pending_removal" })}
+        <GrantRemoval grant={grant}>
+          <Icon name="undo" />
+        </GrantRemoval>
+      </Label>
+    ) : (
+      <Label color="green">
+        <Icon name="shield" />
+        {formatMessage({ id: "structure.grant.has_grant" })}
+        <GrantRemoval grant={grant}>
+          <Icon name="delete" />
+        </GrantRemoval>
+      </Label>
+    )
+  ) : (
+    <StructureGrantRequestButton />
+  );
+  return _.isEmpty(popupContent) ? (
+    label
+  ) : (
+    <Popup content={popupContent} trigger={label} />
+  );
+};
+
+StructureGrantButton.propTypes = {
+  structure: PropTypes.object,
+  structureGrantPopup: PropTypes.array,
+};
+
+const mapStateToProps = _.pick(["structure", "structureGrantPopup"]);
+
+export default connect(mapStateToProps)(StructureGrantButton);

package/src/components/StructureGrantCart.js

@@ -87,7 +87,7 @@ export const StructureGrantCart = ({
                         {canHasFilters(s) && inCartCheckout ? (
                           <Button
                             compact
-                            basic={true}
+                            basic
                             icon="filter"
                             color={hasFilters(s) ? "blue" : null}
                             onClick={() => setOpenedStructureFilter(s.id)}
@@ -96,7 +96,7 @@ export const StructureGrantCart = ({
                         <Button
                           onClick={removeRequest(s)}
                           compact
-                          basic={true}
+                          basic
                           icon="trash alternate outline"
                           color="red"
                         />

package/src/components/StructureGrants.js

@@ -2,16 +2,43 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Table } from "semantic-ui-react";
+import { Table, Button } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { columnDecorator } from "@truedat/core/services";
 import { getGrantsColumns } from "../selectors";
+import GrantRemoval from "./GrantRemoval";
 
-export const StructureGrants = ({ columns, grants }) => {
+export const RemovalButtonDecorator = (grant) => (
+  <GrantRemoval grant={grant}>
+    {grant.pending_removal ? (
+      <Button size="mini" color="olive" icon="undo" />
+    ) : (
+      <Button size="mini" color="red" icon="delete" />
+    )}
+  </GrantRemoval>
+);
+
+export const StructureGrants = ({ columns, grants, userPermissions }) => {
   const { formatMessage } = useIntl();
   const filteredColumns = _.filter((c) => _.any(_.prop(c.name))(grants))(
     columns
   );
+  const canUpdateRemoval = _.getOr(
+    false,
+    "update_grant_removal"
+  )(userPermissions);
+
+  const columnsWithActions = [
+    ...columns,
+    ...(canUpdateRemoval
+      ? [
+          {
+            fieldSelector: _.identity,
+            fieldDecorator: RemovalButtonDecorator,
+          },
+        ]
+      : []),
+  ];
 
   return (
     grants && (
@@ -33,14 +60,13 @@ export const StructureGrants = ({ columns, grants }) => {
         <Table.Body>
           {grants.map((grant, i) => (
             <Table.Row key={i}>
-              {columns &&
-                columns.map((column, key) => (
-                  <Table.Cell
-                    key={key}
-                    textAlign={column.textAlign}
-                    content={columnDecorator(column)(grant)}
-                  />
-                ))}
+              {columnsWithActions.map((column, key) => (
+                <Table.Cell
+                  key={key}
+                  textAlign={column.textAlign}
+                  content={columnDecorator(column)(grant)}
+                />
+              ))}
             </Table.Row>
           ))}
         </Table.Body>
@@ -52,11 +78,13 @@ export const StructureGrants = ({ columns, grants }) => {
 StructureGrants.propTypes = {
   columns: PropTypes.array,
   grants: PropTypes.array,
+  userPermissions: PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({
   grants: state.structure.grants,
   columns: getGrantsColumns(state),
+  userPermissions: state.userPermissions,
 });
 
 export default connect(mapStateToProps)(StructureGrants);

package/src/components/StructureSummary.js

@@ -10,7 +10,7 @@ import { getStructureUpdatedAt } from "../selectors";
 import StructureProperties from "./StructureProperties";
 import StructureConfidentialButton from "./StructureConfidentialButton";
 import StructureDeleteButton from "./StructureDeleteButton";
-import StructureGrantRequestButton from "./StructureGrantRequestButton";
+import StructureGrantButton from "./StructureGrantButton";
 import StructureProfileButton from "./StructureProfileButton";
 import StructuresProfileButton from "./StructuresProfileButton";
 import TagsHeader from "./TagsHeader";
@@ -58,14 +58,10 @@ export const StructureSummary = ({
   name,
   published_note,
   description,
-  type,
   userPermissions,
   updatedAt,
   deleted_at,
-  data_structure_type,
-  grant,
   linkedStructureTagsLoading,
-  structureGrant,
   isAdmin,
 }) => {
   const { formatMessage } = useIntl();
@@ -83,18 +79,7 @@ export const StructureSummary = ({
                   {_.isEmpty(published_note?.alias)
                     ? name
                     : published_note.alias}
-                  {grant ? (
-                    structureGrant ? (
-                      structureGrant(grant)
-                    ) : (
-                      <Label color="green">
-                        <Icon name="shield" />
-                        {formatMessage({ id: "structure.grant.has_grant" })}
-                      </Label>
-                    )
-                  ) : (
-                    <StructureGrantRequestButton />
-                  )}
+                  <StructureGrantButton />
                   {!_.isEmpty(published_note?.alias) && (
                     <Header.Subheader>{name}</Header.Subheader>
                   )}
@@ -135,15 +120,10 @@ StructureSummary.propTypes = {
   name: PropTypes.string,
   published_note: PropTypes.object,
   description: PropTypes.string,
-  type: PropTypes.string,
   userPermissions: PropTypes.object,
   updatedAt: PropTypes.string,
   deleted_at: PropTypes.string,
-  grant: PropTypes.object,
-  data_structure_type: PropTypes.object,
   linkedStructureTagsLoading: PropTypes.bool,
-  structureGrant: PropTypes.func,
-  structureTags: PropTypes.array,
   isAdmin: PropTypes.bool,
 };
 
@@ -151,8 +131,6 @@ const mapStateToProps = (state) => ({
   userPermissions: state.userPermissions,
   linkedStructureTagsLoading: state.linkedStructureTagsLoading,
   updatedAt: getStructureUpdatedAt(state),
-  structureTags: state.editableStructureTags,
-  structureGrant: state.structureGrant,
   ...state.structure,
   isAdmin: state.authentication.role === "admin",
 });

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { requestGrantRemoval } from "../../routines";
+import GrantRemoval from "../GrantRemoval";
+
+describe("<GrantRemoval />", () => {
+  const grant = {
+    id: 1,
+    detail: { foo: "bar" },
+    data_structure: { id: 2 },
+    data_structure_version: { id: 3 },
+  };
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <GrantRemoval grant={grant}>
+        <p>child</p>
+      </GrantRemoval>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("on click calls requestGrantRemoval routine", async () => {
+    const dispatch = jest.fn();
+    const { findByText } = render(
+      <GrantRemoval grant={grant}>
+        <p>child</p>
+      </GrantRemoval>,
+      { dispatch }
+    );
+
+    fireEvent.click(await findByText("child"));
+    expect(await findByText("Request grant removal")).toBeInTheDocument();
+
+    fireEvent.click(await findByText("Yes"));
+
+    expect(dispatch).toHaveBeenLastCalledWith({
+      ...requestGrantRemoval(),
+      payload: {
+        action: "request_removal",
+        data_structure_id: 2,
+        id: 1,
+        version: 3,
+      },
+    });
+  });
+});

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

@@ -0,0 +1,52 @@
+import _ from "lodash/fp";
+import React from "react";
+import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import StructureGrantButton from "../StructureGrantButton";
+
+describe("<StructureGrantButton />", () => {
+  const state = {
+    structure: {
+      grant: {
+        detail: { foo: "bar" },
+        pending_removal: false,
+      },
+    },
+    structureGrantPopup: [],
+  };
+
+  it("matches the latest snapshot", async () => {
+    const { findByText, container } = render(<StructureGrantButton />, {
+      state,
+    });
+    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,
+    });
+    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
+    );
+    const { findByText } = render(<StructureGrantButton />, {
+      state: customState,
+    });
+
+    fireEvent.mouseOver(
+      await findByText("You have granted access on this structure")
+    );
+    expect(await findByText("bar")).toBeInTheDocument();
+  });
+});

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

@@ -1,24 +1,14 @@
+import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
 import { render } from "@truedat/test/render";
-import { createStore } from "redux";
-import { Provider } from "react-redux";
-import { StructureSummary } from "../StructureSummary";
-import { defaultStructureProperties } from "../../selectors/getStructureProperties";
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+import StructureSummary from "../StructureSummary";
 
 describe("<StructureSummary />", () => {
-  const system = { name: "system" };
   const structure = {
     id: 1,
     name: "s1",
     description: "dd",
     group: "gp",
-    system: "sys",
     userPermissions: {
       update: true,
       confidential: true,
@@ -26,110 +16,47 @@ describe("<StructureSummary />", () => {
     },
     class: "table",
     type: "foo",
-    system,
+    system: { name: "system" },
+  };
+
+  const state = {
+    userPermissions: {
+      profile_permission: true,
+      confidential: true,
+    },
+    linkedStructureTagsLoading: false,
+    structureVersions: [{ updated_at: "2019-01-02T03:04:05Z" }],
+    structure,
+    authentication: { role: "admin" },
   };
-  const updatedAt = "2019-01-02T03:04:05Z";
-  const deleted_at = "2019-01-02T03:04:05Z";
-  const structureFields = [{ external_id: "external_id " }];
 
   it("matches the latest snapshot", () => {
-    const props = {
-      ...structure,
-      updatedAt,
-      deleted_at,
-      structureFields,
-      linkedStructureTagsLoading: false,
-    };
-    const wrapper = shallow(<StructureSummary {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<StructureSummary />, { state });
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot with alias", () => {
-    const props = {
-      ...structure,
-      published_note: { alias: "some alias" },
-      updatedAt,
-      deleted_at,
-      structureFields,
-      linkedStructureTagsLoading: false,
-    };
-    const wrapper = shallow(<StructureSummary {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const customState = _.set("structure.published_note", {
+      alias: "some alias",
+    })(state);
+
+    const { container } = render(<StructureSummary />, { state: customState });
+    expect(container).toMatchSnapshot();
   });
 
   it("renders loading when linkedStructureTagsLoading is true", () => {
-    const props = {
-      ...structure,
-      updatedAt,
-      deleted_at,
-      structureFields,
-      linkedStructureTagsLoading: true,
-    };
-    const wrapper = shallow(<StructureSummary {...props} />);
-    expect(wrapper.find("Loading")).toBeTruthy();
+    const customState = _.set("linkedStructureTagsLoading", true)(state);
+    const { findByText } = render(<StructureSummary />, { state: customState });
+    expect(findByText("Loading")).toBeTruthy();
   });
 
-  const messages = {
-    en: {
-      "structure.grant.has_grant": "Grant",
-      "structure.share.title": "Share",
-      "structure.type.foo.text": "Foo",
-      "structure.domain": "Domain",
-      "structure.group": "Group",
-    },
-  };
-
   it("renders label when grant provided", async () => {
-    const storeProps = {
-      structure,
-      properties: defaultStructureProperties,
-      userPermissions: { update: true, update_domain: true },
-    };
-    const store = createStore(() => ({ ...storeProps }));
-
-    const props = {
-      ...structure,
-      updatedAt,
-      deleted_at,
-      structureFields,
-      grant: { detail: { foo: "bar" }, end_date: "2022-01-02T03:04:05Z" },
-    };
-    const { container } = render(
-      <Provider store={store}>
-        <StructureSummary {...props} />
-      </Provider>,
-      {
-        messages,
-      }
+    const customState = _.set("structure.grant", { detail: { foo: "bar" } })(
+      state
     );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("renders custom grant label when grant provided", async () => {
-    const grant = (grant) => <p>{grant.detail.foo}</p>;
-    const storeProps = {
-      structure,
-      properties: defaultStructureProperties,
-      userPermissions: { update: true, update_domain: true },
-    };
-    const store = createStore(() => ({ ...storeProps }));
-
-    const props = {
-      ...structure,
-      updatedAt,
-      deleted_at,
-      structureFields,
-      grant: { detail: { foo: "bar" }, end_date: "2022-01-02T03:04:05Z" },
-      structureGrant: grant,
-    };
-    const { container } = render(
-      <Provider store={store}>
-        <StructureSummary {...props} />
-      </Provider>,
-      {
-        messages,
-      }
-    );
-    expect(container).toMatchSnapshot();
+    const { findByText } = render(<StructureSummary />, { state: customState });
+    expect(
+      findByText("You have granted access on this structure")
+    ).toBeTruthy();
   });
 });

package/src/components/__tests__/__snapshots__/GrantRemoval.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GrantRemoval /> matches the latest snapshot 1`] = `
+<div>
+  <p>
+    child
+  </p>
+</div>
+`;

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

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureGrantButton /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui green label"
+  >
+    <i
+      aria-hidden="true"
+      class="shield icon"
+    />
+    You have granted access on this structure
+    <i
+      aria-hidden="true"
+      class="delete icon"
+    />
+  </div>
+</div>
+`;
+
+exports[`<StructureGrantButton /> matches the latest snapshot pending_removal 1`] = `
+<div>
+  <div
+    class="ui orange label"
+  >
+    <i
+      aria-hidden="true"
+      class="shield icon"
+    />
+    You have granted access pending removal
+    <i
+      aria-hidden="true"
+      class="undo icon"
+    />
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/StructureSummary.spec.js.snap

@@ -1,123 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StructureSummary /> matches the latest snapshot 1`] = `
-<Fragment>
-  <Grid>
-    <GridRow>
-      <GridColumn
-        width={10}
-      >
-        <DimmerDimmable
-          dimmed={false}
-        >
-          <Header
-            as="h2"
-          >
-            <HeaderContent>
-              s1
-              <Connect(StructureGrantRequestButton) />
-            </HeaderContent>
-          </Header>
-          <Dimmer
-            active={false}
-            inverted={true}
-          >
-            <Loader />
-          </Dimmer>
-        </DimmerDimmable>
-      </GridColumn>
-      <GridColumn
-        textAlign="right"
-        width={6}
-      >
-        <Date
-          className="alert warning"
-          date="2019-01-02T03:04:05Z"
-          icon={
-            <Icon
-              as="i"
-              color="red"
-              name="warning circle"
-            />
-          }
-          label="deleted_at"
-        />
-        <Connect(ShareLinkPopup)
-          description="dd"
-          name="s1"
-          title="structure.share.title"
-          url="http://localhost/"
-        />
-        <injectIntl(Connect(StructureConfidentialButton)) />
-      </GridColumn>
-    </GridRow>
-  </Grid>
-  <Connect(TagsHeader) />
-  <Connect(StructureProperties) />
-</Fragment>
-`;
-
-exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
-<Fragment>
-  <Grid>
-    <GridRow>
-      <GridColumn
-        width={10}
-      >
-        <DimmerDimmable
-          dimmed={false}
-        >
-          <Header
-            as="h2"
-          >
-            <HeaderContent>
-              some alias
-              <Connect(StructureGrantRequestButton) />
-              <HeaderSubheader>
-                s1
-              </HeaderSubheader>
-            </HeaderContent>
-          </Header>
-          <Dimmer
-            active={false}
-            inverted={true}
-          >
-            <Loader />
-          </Dimmer>
-        </DimmerDimmable>
-      </GridColumn>
-      <GridColumn
-        textAlign="right"
-        width={6}
-      >
-        <Date
-          className="alert warning"
-          date="2019-01-02T03:04:05Z"
-          icon={
-            <Icon
-              as="i"
-              color="red"
-              name="warning circle"
-            />
-          }
-          label="deleted_at"
-        />
-        <Connect(ShareLinkPopup)
-          description="dd"
-          name="s1"
-          title="structure.share.title"
-          url="http://localhost/"
-        />
-        <injectIntl(Connect(StructureConfidentialButton)) />
-      </GridColumn>
-    </GridRow>
-  </Grid>
-  <Connect(TagsHeader) />
-  <Connect(StructureProperties) />
-</Fragment>
-`;
-
-exports[`<StructureSummary /> renders custom grant label when grant provided 1`] = `
 <div>
   <div
     class="ui grid"
@@ -138,9 +21,6 @@ exports[`<StructureSummary /> renders custom grant label when grant provided 1`]
               class="content"
             >
               s1
-              <p>
-                bar
-              </p>
             </div>
           </h2>
           <div
@@ -160,14 +40,14 @@ exports[`<StructureSummary /> renders custom grant label when grant provided 1`]
         class="right aligned six wide column"
       >
         <div
-          class="ui label alert warning"
-          title="structure.deleted_at 2019-01-02T03:04:05Z"
+          class="ui label basic"
+          title="Last changed 2019-01-02T03:04:05Z"
         >
           <i
             aria-hidden="true"
-            class="red warning circle icon"
+            class="sync alternate icon"
           />
-          structure.deleted_at
+          Last changed
           : 
           <time
             datetime="1546398245000"
@@ -183,6 +63,14 @@ exports[`<StructureSummary /> renders custom grant label when grant provided 1`]
             class="share alternate icon"
           />
         </button>
+        <button
+          class="ui icon button basic"
+        >
+          <i
+            aria-hidden="true"
+            class="red trash alternate icon"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -209,21 +97,12 @@ exports[`<StructureSummary /> renders custom grant label when grant provided 1`]
             <h5
               class="header"
             >
-              structure.domain
+              Domain
             </h5>
             <div
               class="description"
             >
               
-              <button
-                class="ui basic icon button"
-                style="box-shadow: none;"
-              >
-                <i
-                  aria-hidden="true"
-                  class="pencil alternate icon"
-                />
-              </button>
             </div>
           </div>
         </div>
@@ -240,7 +119,7 @@ exports[`<StructureSummary /> renders custom grant label when grant provided 1`]
             <h5
               class="header"
             >
-              structure.group
+              Group
             </h5>
             <div
               class="description"
@@ -262,7 +141,7 @@ exports[`<StructureSummary /> renders custom grant label when grant provided 1`]
             <h5
               class="header"
             >
-              structure.type
+              Type
             </h5>
             <div
               class="description"
@@ -277,7 +156,7 @@ exports[`<StructureSummary /> renders custom grant label when grant provided 1`]
 </div>
 `;
 
-exports[`<StructureSummary /> renders label when grant provided 1`] = `
+exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
 <div>
   <div
     class="ui grid"
@@ -297,15 +176,11 @@ exports[`<StructureSummary /> renders label when grant provided 1`] = `
             <div
               class="content"
             >
-              s1
+              some alias
               <div
-                class="ui green label"
+                class="sub header"
               >
-                <i
-                  aria-hidden="true"
-                  class="shield icon"
-                />
-                structure.grant.has_grant
+                s1
               </div>
             </div>
           </h2>
@@ -326,14 +201,14 @@ exports[`<StructureSummary /> renders label when grant provided 1`] = `
         class="right aligned six wide column"
       >
         <div
-          class="ui label alert warning"
-          title="structure.deleted_at 2019-01-02T03:04:05Z"
+          class="ui label basic"
+          title="Last changed 2019-01-02T03:04:05Z"
         >
           <i
             aria-hidden="true"
-            class="red warning circle icon"
+            class="sync alternate icon"
           />
-          structure.deleted_at
+          Last changed
           : 
           <time
             datetime="1546398245000"
@@ -349,6 +224,14 @@ exports[`<StructureSummary /> renders label when grant provided 1`] = `
             class="share alternate icon"
           />
         </button>
+        <button
+          class="ui icon button basic"
+        >
+          <i
+            aria-hidden="true"
+            class="red trash alternate icon"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -375,21 +258,12 @@ exports[`<StructureSummary /> renders label when grant provided 1`] = `
             <h5
               class="header"
             >
-              structure.domain
+              Domain
             </h5>
             <div
               class="description"
             >
               
-              <button
-                class="ui basic icon button"
-                style="box-shadow: none;"
-              >
-                <i
-                  aria-hidden="true"
-                  class="pencil alternate icon"
-                />
-              </button>
             </div>
           </div>
         </div>
@@ -406,7 +280,7 @@ exports[`<StructureSummary /> renders label when grant provided 1`] = `
             <h5
               class="header"
             >
-              structure.group
+              Group
             </h5>
             <div
               class="description"
@@ -428,7 +302,7 @@ exports[`<StructureSummary /> renders label when grant provided 1`] = `
             <h5
               class="header"
             >
-              structure.type
+              Type
             </h5>
             <div
               class="description"

package/src/messages/en.js

@@ -29,6 +29,9 @@ export default {
   "filters.system.name.raw": "System",
   "filters.tags.raw": "Tags",
   "filters.type.raw": "Type",
+  "filters.pending_removal.raw": "Pending Removal",
+  "filters.pending_removal.raw.true": "Pending removal",
+  "filters.pending_removal.raw.false": "Not pending removal",
   "filters.system_external_id": "System",
   "filters.user_name": "User",
   "filters.with_content.raw": "Extra Info",
@@ -36,8 +39,15 @@ export default {
   "filters.with_profiling.raw": "Profile",
   "filters.with_profiling.raw.false": "Without profile",
   "filters.with_profiling.raw.true": "With profile",
+  "grant.actions.cancel_removal.confirmation.content":
+    "Cancelling grant removal. Are you sure?",
+  "grant.actions.cancel_removal.confirmation.header": "Cancel grant removal",
+  "grant.actions.request_removal.confirmation.content":
+    "Requesting this grant to be revoked. Are you sure?",
+  "grant.actions.request_removal.confirmation.header": "Request grant removal",
   "grant.cell.direct_access": "Direct access",
   "grant.cell.end_date.null": "No expiration set",
+  "grant.cell.end_date.pending_removal": "Grant pending removal",
   "grant.cell.end_date.same_user": "It's you",
   "grant.header.user": "Account",
   "grant.header.data_structure_version": "Structure",
@@ -231,6 +241,8 @@ export default {
   "structure.fields.empty": "No field information available for this structure",
   "structure.filter.empty": "Empty",
   "structure.grant.has_grant": "You have granted access on this structure",
+  "structure.grant.has_grant_pending_removal":
+    "You have granted access pending removal",
   "structure.grant.request_grant": "Request grant",
   "structure.grant.requested_grant": "Pending request",
   "structure.grant.cart": "Requested grants",
@@ -542,7 +554,6 @@ export default {
     "A Structure Tag with this name already exists",
   "updateStructureType.success.header": "Structure type updated",
   "updateSystem.error.df_content.invalid content": "Invalid template content",
-  "structure.grant.has_grant": "You have granted access on this structure",
   "visualization.title.impact": "Impact Analysis",
   "visualization.title.lineage": "Lineage Analysis",
 };

package/src/messages/es.js

@@ -34,13 +34,25 @@ export default {
   "filters.type.raw": "Tipo",
   "filters.system_external_id": "Sistema",
   "filters.user_name": "Usuario",
+  "filters.pending_removal.raw": "Pendiente de eliminar",
+  "filters.pending_removal.raw.true": "Pendiente de eliminar",
+  "filters.pending_removal.raw.false": "No pendiente de eliminar",
   "filters.with_content.raw": "Extra Info",
   "filters.with_content.raw.false": "Sin información extra",
   "filters.with_profiling.raw": "Perfilado",
   "filters.with_profiling.raw.false": "Sin perfilado",
   "filters.with_profiling.raw.true": "Contiene perfilado",
+  "grant.actions.cancel_removal.confirmation.content":
+    "Cancelar solicitud de eliminar acceso. ¿Estás seguro?",
+  "grant.actions.cancel_removal.confirmation.header":
+    "Cancelar retirada de acceso",
+  "grant.actions.request_removal.confirmation.content":
+    "El acceso será eliminado. ¿Estás seguro?",
+  "grant.actions.request_removal.confirmation.header":
+    "Solicitar eliminación de acceso",
   "grant.cell.direct_access": "Acceso Directo",
   "grant.cell.end_date.null": "Sin fecha de expiración",
+  "grant.cell.end_date.pending_removal": "Solicitada expiración del acceso",
   "grant.cell.end_date.same_user": "Eres tú",
   "grant.header.data_structure_version": "Estructura",
   "grant.header.end_date": "Expira",
@@ -238,6 +250,8 @@ export default {
     "No se dispone de información sobre los campos de esta estructura",
   "structure.filter.empty": "Vacío",
   "structure.grant.has_grant": "Tienes acceso a la estructura",
+  "structure.grant.has_grant_pending_removal":
+    "Tienes acceso pendiente de eliminarse",
   "structure.grant.request_grant": "Solicitar acceso",
   "structure.grant.requested_grant": "Solicitud pendiente",
   "structure.grant.cart": "Accesos a solicitar",
@@ -558,7 +572,6 @@ export default {
   "updateStructureType.success.header": "Tipo actualizado correctamente",
   "updateSystem.error.df_content.invalid content":
     "Contenido de plantilla inválido",
-  "structure.grant.has_grant": "Tienes acceso a la estructura",
   "visualization.title.impact": "Análisis de Impacto",
   "visualization.title.lineage": "Análisis de Linaje",
 };

package/src/routines.js

@@ -57,7 +57,7 @@ export const downloadGrants = createRoutine("DOWNLOAD_GRANTS");
 export const downloadReferenceDataset = createRoutine("DOWNLOAD_REFERENCE_DATASET");
 export const downloadStructures = createRoutine("DOWNLOAD_STRUCTURES");
 export const excludeNode = createRoutine("EXCLUDE_NODE");
-export const fetchDomains = createRoutine("FETCH_DOMAINS"); // TODO: Is there a way to avoid repeating this routine here?
+export const fetchDomains = createRoutine("FETCH_DOMAINS");
 export const fetchGrant = createRoutine("FETCH_GRANT");
 export const fetchGrantFilters = createRoutine("FETCH_GRANT_FILTERS");
 export const fetchGrantRequest = createRoutine("FETCH_GRANT_REQUEST");
@@ -90,6 +90,7 @@ export const linkStructureTag = createRoutine("LINK_STRUCTURE_TAG");
 export const loadLineageEvents = createRoutine("LOAD_LINEAGE_EVENTS");
 export const openGrantFilter = createRoutine("OPEN_GRANT_FILTER");
 export const openStructureFilter = createRoutine("OPEN_STRUCTURE_FILTER");
+export const requestGrantRemoval = createRoutine("REQUEST_GRANT_REMOVAL");
 export const removeGrantFilter = createRoutine("REMOVE_GRANT_FILTER");
 export const removeGrantRequestFromCart = createRoutine("REMOVE_GRANT_REQUEST_FROM_CART");
 export const removeGrantRequestsQuery = createRoutine("REMOVE_GRANT_REQUESTS_QUERY");

package/src/sagas/index.js

@@ -42,6 +42,7 @@ import { fetchUnitDomainsRequestSaga } from "./fetchUnitDomains";
 import { fetchUserSearchFiltersRequestSaga } from "./fetchUserSearchFilters";
 import { linkStructureTagRequestSaga } from "./linkStructureTag";
 import { operateGrantRequestToCartRequestSaga } from "./operateGrantRequestCart";
+import { requestGrantRemovalRequestSaga } from "./requestGrantRemoval";
 import { saveUserSearchFiltersRequestSaga } from "./saveUserSearchFilters";
 import { updateReferenceDatasetRequestSaga } from "./updateReferenceDataset";
 import { updateStructureRequestSaga } from "./updateStructure";
@@ -96,6 +97,7 @@ export {
   fetchUserSearchFiltersRequestSaga,
   linkStructureTagRequestSaga,
   operateGrantRequestToCartRequestSaga,
+  requestGrantRemovalRequestSaga,
   saveUserSearchFiltersRequestSaga,
   updateReferenceDatasetRequestSaga,
   updateStructureRequestSaga,
@@ -151,6 +153,7 @@ export default [
   fetchUserSearchFiltersRequestSaga(),
   linkStructureTagRequestSaga(),
   operateGrantRequestToCartRequestSaga(),
+  requestGrantRemovalRequestSaga(),
   saveUserSearchFiltersRequestSaga(),
   updateReferenceDatasetRequestSaga(),
   updateStructureRequestSaga(),

package/src/sagas/requestGrantRemoval.js

@@ -0,0 +1,31 @@
+import { compile } from "path-to-regexp";
+import { call, put, takeLatest } from "redux-saga/effects";
+import { apiJsonPatch, JSON_OPTS } from "@truedat/core/services/api";
+import { requestGrantRemoval, fetchStructure } from "../routines";
+import { API_GRANT } from "../api";
+
+export function* requestGrantRemovalSaga({ payload }) {
+  try {
+    const { id, action, data_structure_id, version } = payload;
+    const url = compile(API_GRANT)({ id });
+    const requestData = { action };
+    yield put(requestGrantRemoval.request());
+    const { data } = yield call(apiJsonPatch, url, requestData, JSON_OPTS);
+    yield put(requestGrantRemoval.success(data));
+    yield put(fetchStructure.trigger({ id: data_structure_id, version }));
+  } catch (error) {
+    console.error("error", error);
+    if (error.response) {
+      const { status, data } = error.response;
+      yield put(requestGrantRemoval.failure({ status, data }));
+    } else {
+      yield put(requestGrantRemoval.failure(error.message));
+    }
+  } finally {
+    yield put(requestGrantRemoval.fulfill());
+  }
+}
+
+export function* requestGrantRemovalRequestSaga() {
+  yield takeLatest(requestGrantRemoval.TRIGGER, requestGrantRemovalSaga);
+}

package/src/selectors/getGrantsColumns.js

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { linkTo } from "@truedat/core/routes";
 import { useIntl } from "react-intl";
 import Moment from "react-moment";
+import moment from "moment";
 import PropTypes from "prop-types";
 
 export const GrantUserDecorator = ({ authentication, user }) => {
@@ -124,19 +125,25 @@ StartDateDecorator.propTypes = {
   start_date: PropTypes.string,
 };
 
-export const EndDateDecorator = ({ end_date }) => {
+export const EndDateDecorator = ({ end_date, pending_removal }) => {
   const { locale, formatMessage } = useIntl();
-  return end_date ? (
+  return pending_removal ? (
+    <Header>
+      <Header.Subheader>
+        {formatMessage({ id: "grant.cell.end_date.pending_removal" })}
+      </Header.Subheader>
+    </Header>
+  ) : end_date ? (
     <Popup
-      content={
-        <Moment locale={locale} date={end_date} format="YYYY-MM-DD HH:mm" />
-      }
+      content={<Moment locale={locale} date={end_date} format="YYYY-MM-DD" />}
       trigger={
         <Header>
           <Header.Subheader>
-            <Moment locale={locale} fromNow>
-              {end_date}
-            </Moment>
+            <Moment
+              locale={locale}
+              date={end_date}
+              from={moment().format("L")}
+            />
           </Header.Subheader>
         </Header>
       }
@@ -152,6 +159,7 @@ export const EndDateDecorator = ({ end_date }) => {
 
 EndDateDecorator.propTypes = {
   end_date: PropTypes.string,
+  pending_removal: PropTypes.bool,
 };
 
 export const defaultGrantsColumns = [
@@ -172,7 +180,7 @@ export const defaultGrantsColumns = [
   },
   {
     name: "end_date",
-    fieldSelector: _.pick(["end_date"]),
+    fieldSelector: _.pick(["end_date", "pending_removal"]),
     fieldDecorator: EndDateDecorator,
   },
 ];
@@ -214,7 +222,7 @@ export const defaultGrantsTableColumns = [
   {
     name: "end_date",
     sort: { name: "end_date" },
-    fieldSelector: _.pick(["end_date"]),
+    fieldSelector: _.pick(["end_date", "pending_removal"]),
     fieldDecorator: EndDateDecorator,
   },
   {