@truedat/dd 4.58.6 → 4.59.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.58.7] 2022-12-27
+
+### Added
+
+- [TD-5348] Update grant from grant detail
+
 ## [4.58.5] 2022-12-23
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.58.6",
+  "version": "4.59.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.58.6",
+    "@truedat/test": "4.58.7",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -87,9 +87,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "4.58.6",
-    "@truedat/core": "4.58.6",
-    "@truedat/df": "4.58.6",
+    "@truedat/auth": "4.59.0",
+    "@truedat/core": "4.59.0",
+    "@truedat/df": "4.59.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "6d62fbef2dea9d23cb1f3908bdc48ba36f4fd55d"
+  "gitHead": "7d2cd52d47210cdd67cf3521697dab38c963a570"
 }

package/src/components/Grant.js

@@ -8,9 +8,10 @@ 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 } from "../hooks/useGrant";
+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")
 );
@@ -31,6 +32,13 @@ const GrantView = () => {
 };
 
 export const GrantHeader = ({ grant, title, actions, onStatusChange }) => {
+  const { data: structure, loading } = useStructure(grant?.data_structure.id);
+  const data_structure = loading
+    ? null
+    : {
+        ...structure.data,
+        ...structure.data.data_structure,
+      };
   const { formatMessage } = useIntl();
   return (
     <Grid>
@@ -44,6 +52,20 @@ export const GrantHeader = ({ grant, title, actions, onStatusChange }) => {
               })} ${title}`}
             </Header.Content>
           </Header>
+          {actions?.update && !loading ? (
+            <GrantChangeRequest
+              structure={data_structure}
+              grant={grant}
+              key="requestChange"
+            >
+              <Button
+                className="button icon group-actions"
+                content={formatMessage({
+                  id: "structure.grant.request_grant_change",
+                })}
+              />
+            </GrantChangeRequest>
+          ) : null}
         </Grid.Column>
         <Grid.Column width={4} textAlign="right">
           {actions?.request_removal ? (

package/src/components/StructureGrantCartUserSelector.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { Form, Checkbox } from "semantic-ui-react";
+import { Form, Checkbox, Header } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { lowerDeburrTrim } from "@truedat/core/services/sort";
@@ -21,12 +21,17 @@ export const StructureGrantCartUserSelector = ({
   const [thirdParty, setThirdParty] = useState(false);
   const [userId, setUserId] = useState(_.path("user.id")(grantRequestsCart));
 
+  const { modificationGrant } = grantRequestsCart;
+  const updateGrant = !_.isEmpty(modificationGrant);
+
   useEffect(() => {
     updateGrantRequestUser({
       id: userId,
       valid:
         !thirdParty || (thirdParty && !(_.isNil(userId) && _.isEmpty(userId))),
     });
+    if (updateGrant && modificationGrant.user_id)
+      setUserId(modificationGrant.user_id);
   }, [userId, thirdParty]);
 
   const onSearch = (_currentOptions, { searchQuery }) =>
@@ -38,7 +43,15 @@ export const StructureGrantCartUserSelector = ({
     if (userId === "") setThirdParty(false);
   };
 
-  return (
+  return updateGrant ? (
+    <Header as="h4">
+      <Header.Content>
+        {`${formatMessage({ id: "grantRequestCart.user.label" })} ${
+          modificationGrant.user?.full_name
+        }`}
+      </Header.Content>
+    </Header>
+  ) : (
     <>
       <UsersSearchLoader
         query={usersGroupsQuery}

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

@@ -4,6 +4,23 @@ import { render } from "@truedat/test/render";
 import { Grant } from "../Grant";
 import en from "../../messages/en";
 
+jest.mock("../../hooks/useGrant.js", () => {
+  const originalModule = jest.requireActual("../../hooks/useGrant.js");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useStructure: jest.fn(() => ({
+      data: {
+        data: {
+          data_structure: {},
+        },
+      },
+      loading: false,
+    })),
+  };
+});
+
 describe("<Grant />", () => {
   const grant = {
     data_structure: {
@@ -64,6 +81,17 @@ describe("<Grant />", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("matches the latest snapshot with update action", () => {
+    const props = {
+      ...defaultProps,
+      actions: {
+        update: {},
+      },
+    };
+    const { container } = render(<Grant {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
   it("on click removal onStatusChange is called", async () => {
     const { findByText } = render(<Grant {...defaultProps} />, renderOpts);
 

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import StructureGrantCartUserSelector from "../StructureGrantCartUserSelector";
+
+const defaultRenderOpts = {
+  state: {
+    grantRequestsCart: { user: { id: 5 } },
+    usersSearch: [{ full_name: "name", id: 1 }],
+  },
+  fallback: "lazy",
+};
+
+describe("<StructureGrantCartUserSelector />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <StructureGrantCartUserSelector query="abc" />,
+      defaultRenderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot on update grant", () => {
+    const renderOpts = {
+      ...defaultRenderOpts,
+      state: {
+        ...defaultRenderOpts.state,
+        grantRequestsCart: {
+          modificationGrant: {
+            user_id: 1,
+            user: {
+              full_name: "foo",
+            },
+          },
+        },
+      },
+    };
+
+    const { container } = render(
+      <StructureGrantCartUserSelector query="abc" />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -466,3 +466,261 @@ exports[`<Grant /> matches the latest snapshot with cancel_removal action 1`] =
   </div>
 </div>
 `;
+
+exports[`<Grant /> matches the latest snapshot with update action 1`] = `
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      href="/grants"
+    >
+      Grants
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <div
+      class="active section"
+    >
+       -&gt; foo
+    </div>
+  </div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="sixteen wide column"
+        >
+          <div
+            class="ui grid"
+          >
+            <div
+              class="row"
+            >
+              <div
+                class="twelve wide column"
+              >
+                <h2
+                  class="ui header"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="key circular icon"
+                  />
+                  <div
+                    class="content"
+                  >
+                    Grants  -&gt; foo
+                  </div>
+                </h2>
+                <button
+                  class="ui button button icon group-actions"
+                >
+                  Request grant change
+                </button>
+              </div>
+              <div
+                class="right aligned four wide column"
+              />
+            </div>
+          </div>
+          <div
+            class="ui big very relaxed list"
+            role="list"
+          >
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="content"
+              >
+                <div
+                  class="header"
+                >
+                  Structure
+                </div>
+                <div
+                  class="description"
+                >
+                  <a
+                    href="/structures/2/grants"
+                  >
+                    foo
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="header"
+              >
+                Account
+              </div>
+              <div
+                class="description"
+              >
+                <h4
+                  class="ui header"
+                >
+                  <div
+                    class="content"
+                  >
+                    foo user
+                    <div
+                      class="sub header"
+                    >
+                      foo@gmail.com
+                    </div>
+                  </div>
+                </h4>
+              </div>
+            </div>
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="header"
+              >
+                Grant created
+              </div>
+              <div
+                class="description"
+              >
+                <time
+                  datetime="1670849349789"
+                >
+                  2022-12-12 12:49
+                </time>
+              </div>
+            </div>
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="header"
+              >
+                Access granted
+              </div>
+              <div
+                class="description"
+              >
+                <time
+                  datetime="1543622400000"
+                >
+                  2018-12-01
+                </time>
+              </div>
+            </div>
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="header"
+              >
+                Expires
+              </div>
+              <div
+                class="description"
+              >
+                <time
+                  datetime="1577750400000"
+                >
+                  2019-12-31
+                </time>
+              </div>
+            </div>
+            <div
+              class="item"
+              role="listitem"
+            >
+              <div
+                class="header"
+              >
+                Details
+              </div>
+              <div
+                class="description"
+              >
+                <div
+                  class="ui list"
+                  role="list"
+                >
+                  <div
+                    class="item"
+                    role="listitem"
+                  >
+                    <div
+                      class="header dynamic-field-header"
+                    >
+                      foo
+                    </div>
+                    <div
+                      class="description"
+                    >
+                      <div
+                        class="ui label"
+                      >
+                        1
+                      </div>
+                      <div
+                        class="ui label"
+                      >
+                        2
+                      </div>
+                      <div
+                        class="ui label"
+                      >
+                        3
+                      </div>
+                      <div
+                        class="ui label"
+                      >
+                        4
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="item"
+                    role="listitem"
+                  >
+                    <div
+                      class="header dynamic-field-header"
+                    >
+                      bar
+                    </div>
+                    <div
+                      class="description"
+                    >
+                      <div
+                        class="default-value"
+                      >
+                        baz
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/{StructureGrantCartUserSelector.js.snap → StructureGrantCartUserSelector.spec.js.snap}

@@ -72,3 +72,17 @@ exports[`<StructureGrantCartUserSelector /> matches the latest snapshot 1`] = `
   lazy
 </div>
 `;
+
+exports[`<StructureGrantCartUserSelector /> matches the latest snapshot on update grant 1`] = `
+<div>
+  <h4
+    class="ui header"
+  >
+    <div
+      class="content"
+    >
+      Request for: foo
+    </div>
+  </h4>
+</div>
+`;

package/src/hooks/useGrant.js

@@ -2,7 +2,7 @@ import { compile } from "path-to-regexp";
 import useSWR from "swr";
 import useSWRMutations from "swr/mutation";
 import { apiJson, apiJsonPatch } from "@truedat/core/services/api";
-import { API_GRANT } from "../api";
+import { API_GRANT, API_DATA_STRUCTURE_VERSION } from "../api";
 
 const toApiPath = compile(API_GRANT);
 
@@ -16,3 +16,9 @@ export const useGrantRemoval = (id) => {
   const url = toApiPath({ id });
   return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
 };
+
+export const useStructure = (id) => {
+  const url = compile(API_DATA_STRUCTURE_VERSION)({ id, version: "latest" });
+  const { data, error } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data };
+};

package/src/reducers/__tests__/grantRequestsCart.spec.js

@@ -213,6 +213,29 @@ describe("reducers: structureVersion", () => {
     ).toEqual(expectedState);
   });
 
+  it("on setGrantChangeRequestCart.TRIGGER fill templateContent with grant.detail", () => {
+    const structure = { id: 1 };
+    const grantDetail = {
+      foo: "bar",
+    };
+    const grant = {
+      id: 2,
+      detail: grantDetail,
+    };
+    const expectedState = {
+      ...initialState,
+      modificationGrant: grant,
+      templateContent: grantDetail,
+      structures: [structure],
+    };
+    expect(
+      grantRequestsCart(initialState, {
+        type: setGrantChangeRequestCart.TRIGGER,
+        payload: { structure, grant },
+      })
+    ).toEqual(expectedState);
+  });
+
   it("on updateGrantRequestFilter.TRIGGER adds a empty filter to structure when no index is passed", () => {
     const stateWithPopulation = {
       ...initialState,

package/src/reducers/grantRequestsCart.js

@@ -76,6 +76,7 @@ const grantRequestsCart = (state = initialState, { type, payload }) => {
       const { structure, grant } = payload;
       return {
         ...initialState,
+        templateContent: { ...grant.detail },
         modificationGrant: grant,
         structures: [mapPayload(structure)],
       };

package/src/components/__tests__/StructureGrantCartUserSelector.js

@@ -1,21 +0,0 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import StructureGrantCartUserSelector from "../StructureGrantCartUserSelector";
-
-const renderOpts = {
-  state: {
-    grantRequestsCart: { user: { id: 5 } },
-    usersSearch: [{ full_name: "name", id: 1 }],
-  },
-  fallback: "lazy",
-};
-
-describe("<StructureGrantCartUserSelector />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <StructureGrantCartUserSelector query="abc" />,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
-  });
-});