@truedat/dd 4.58.0 → 4.58.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.58.1] 2022-12-19
+
+### Added
+
+- [TD-5367] Grant details view
+
 ## [4.56.8] 2022-12-12
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.58.0",
+  "version": "4.58.1",
   "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.0",
+    "@truedat/test": "4.58.1",
     "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.0",
-    "@truedat/core": "4.58.0",
-    "@truedat/df": "4.58.0",
+    "@truedat/auth": "4.58.1",
+    "@truedat/core": "4.58.1",
+    "@truedat/df": "4.58.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -105,6 +105,7 @@
     "reselect": "^4.1.7",
     "semantic-ui-react": "^2.1.4",
     "svg-pan-zoom": "^3.6.1",
+    "swr": "^2.0.0",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
@@ -113,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "3987557a127b4e999021e0d7179ad7a6375bfe01"
+  "gitHead": "f1d6fab3f573f3f3ee9e0e6060d2761d452ca804"
 }

package/src/components/Grant.js

@@ -0,0 +1,225 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+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 } from "../hooks/useGrant";
+import GrantCrumbs from "./GrantCrumbs";
+import GrantRemoval from "./GrantRemoval";
+const DynamicFieldValue = React.lazy(() =>
+  import("@truedat/df/components/DynamicFieldValue")
+);
+
+const GrantView = () => {
+  const { id } = useParams();
+  const { data, loading } = useGrant(id);
+  const { trigger } = useGrantRemoval(id);
+
+  return (
+    <Grant
+      grant={data?.data}
+      actions={data?._actions}
+      loading={loading}
+      onStatusChange={trigger}
+    />
+  );
+};
+
+export const GrantHeader = ({ grant, title, actions, onStatusChange }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Grid>
+      <Grid.Row>
+        <Grid.Column width={12}>
+          <Header as="h2">
+            <Icon circular name="key" />
+            <Header.Content>
+              {`${formatMessage({
+                id: "grant.header",
+              })} ${title}`}
+            </Header.Content>
+          </Header>
+        </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}
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+};
+
+GrantHeader.propTypes = {
+  title: PropTypes.string,
+  actions: PropTypes.object,
+  grant: PropTypes.object,
+  onStatusChange: PropTypes.func,
+};
+
+export const Grant = ({ grant, actions, loading, onStatusChange }) => {
+  const { formatMessage } = useIntl();
+
+  const data_structure_version = _.pathOr(
+    undefined,
+    "data_structure_version"
+  )(grant);
+  const data_structure = _.pathOr(undefined, "data_structure")(grant);
+
+  const getTitle = ({ user, data_structure_version } = grant) => {
+    return `${user?.user_name ? `(${user?.user_name})` : ""} -> ${
+      data_structure_version?.name
+    }`;
+  };
+  const path = _.flow(
+    _.map("name"),
+    (names) => [...names, data_structure_version?.name],
+    _.join(" › ")
+  )(data_structure_version?.path);
+
+  return (
+    <>
+      {loading ? null : <GrantCrumbs title={getTitle(grant)} />}
+      <Segment loading={loading}>
+        {loading ? null : (
+          <Grid>
+            <Grid.Row>
+              <Grid.Column width={16}>
+                <GrantHeader
+                  title={getTitle(grant)}
+                  actions={actions}
+                  grant={grant}
+                  onStatusChange={onStatusChange}
+                />
+                <List size="big" relaxed="very">
+                  {data_structure_version && (
+                    <List.Item>
+                      <List.Content>
+                        <List.Header>
+                          {formatMessage({
+                            id: "grant.header.data_structure",
+                          })}
+                        </List.Header>
+                        <List.Description>
+                          <Link to={linkTo.STRUCTURE_GRANTS(data_structure)}>
+                            {path}
+                          </Link>
+                        </List.Description>
+                      </List.Content>
+                    </List.Item>
+                  )}
+                  {grant?.user && (
+                    <List.Item>
+                      <List.Header>
+                        {formatMessage({ id: "grant.header.user" })}
+                      </List.Header>
+                      <List.Description>
+                        <Header as="h4">
+                          <Header.Content>
+                            {grant?.user?.full_name}
+                            <Header.Subheader>
+                              {grant?.user?.email}
+                            </Header.Subheader>
+                          </Header.Content>
+                        </Header>
+                      </List.Description>
+                    </List.Item>
+                  )}
+                  <List.Item>
+                    <List.Header>
+                      {formatMessage({ id: "grant.header.created_at" })}
+                    </List.Header>
+                    <List.Description>
+                      <Moment
+                        locale="es"
+                        date={grant?.inserted_at}
+                        format="YYYY-MM-DD HH:mm"
+                      />
+                    </List.Description>
+                  </List.Item>
+                  <List.Item>
+                    <List.Header>
+                      {formatMessage({ id: "grant.header.start_date" })}
+                    </List.Header>
+                    <List.Description>
+                      <Moment
+                        locale="es"
+                        date={grant?.start_date}
+                        format="YYYY-MM-DD"
+                      />
+                    </List.Description>
+                  </List.Item>
+                  <List.Item>
+                    <List.Header>
+                      {formatMessage({ id: "grant.header.end_date" })}
+                    </List.Header>
+                    <List.Description>
+                      <Moment
+                        locale="es"
+                        date={grant?.end_date}
+                        format="YYYY-MM-DD"
+                      />
+                    </List.Description>
+                  </List.Item>
+                  {_.isEmpty(grant?.detail) ? null : (
+                    <List.Item>
+                      <List.Header>
+                        {formatMessage({ id: "grant.header.details" })}
+                      </List.Header>
+                      <List.Description>
+                        <List>
+                          {Object.entries(grant?.detail).map(
+                            ([field, value], i) => (
+                              <DynamicFieldValue
+                                key={i}
+                                label={field}
+                                value={value}
+                              />
+                            )
+                          )}
+                        </List>
+                      </List.Description>
+                    </List.Item>
+                  )}
+                </List>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        )}
+      </Segment>
+    </>
+  );
+};
+
+Grant.propTypes = {
+  grant: PropTypes.object.isRequired,
+  actions: PropTypes.object,
+  loading: PropTypes.bool,
+  onStatusChange: PropTypes.func,
+};
+
+export default GrantView;

package/src/components/GrantApprovalRuleConditions.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { Button, Form, Icon, Grid } from "semantic-ui-react";
 import { useIntl } from "react-intl";

package/src/components/GrantCrumbs.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { GRANTS } from "@truedat/core/routes";
+
+export const GrantCrumbs = ({ title }) => (
+  <Breadcrumb>
+    <Breadcrumb.Section as={Link} to={GRANTS} active={false}>
+      <FormattedMessage id="grants.header" />
+    </Breadcrumb.Section>
+    <Breadcrumb.Divider icon="right angle" />
+    <Breadcrumb.Section active>
+      <FormattedMessage id={title} defaultMessage={title} />
+    </Breadcrumb.Section>
+  </Breadcrumb>
+);
+
+GrantCrumbs.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default GrantCrumbs;

package/src/components/GrantRemoval.js

@@ -3,9 +3,15 @@ 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";
 
-export const GrantRemoval = ({ grant, requestGrantRemoval, children }) => {
+export const GrantRemoval = ({
+  grant,
+  requestGrantRemoval,
+  children,
+  onConfirm,
+}) => {
   const { formatMessage } = useIntl();
 
   if (!grant) return;
@@ -21,14 +27,16 @@ export const GrantRemoval = ({ grant, requestGrantRemoval, children }) => {
       content={formatMessage({
         id: `grant.actions.${action}.confirmation.content`,
       })}
-      onConfirm={() =>
-        requestGrantRemoval({
+      onConfirm={() => {
+        const onConfirmPayload = {
           id: grant.id,
           action,
           data_structure_id: grant.data_structure.id,
           version: grant.data_structure_version.id,
-        })
-      }
+        };
+        if (_.isFunction(onConfirm)) onConfirm(onConfirmPayload);
+        else requestGrantRemoval(onConfirmPayload);
+      }}
       onOpen={(e) => e.stopPropagation()}
       onClose={(e) => e.stopPropagation()}
     />
@@ -39,6 +47,7 @@ GrantRemoval.propTypes = {
   grant: PropTypes.object,
   requestGrantRemoval: PropTypes.func,
   children: PropTypes.node,
+  onConfirm: PropTypes.func,
 };
 
 export default connect(null, { requestGrantRemoval })(GrantRemoval);

package/src/components/GrantRoutes.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { Route, Switch } from "react-router-dom";
 import { connect } from "react-redux";
+import { Route, Switch } from "react-router-dom";
+import PropTypes from "prop-types";
+import React from "react";
 import {
   GRANT_APPROVAL_RULE,
   GRANT_APPROVAL_RULE_EDIT,
@@ -12,125 +12,133 @@ import {
   GRANT_REQUESTS,
   GRANTS_REQUESTS_CHECKOUT,
   GRANTS,
+  GRANT,
   GRANT_APPROVAL_RULES,
   MY_GRANT_REQUESTS,
   MY_GRANTS,
 } from "@truedat/core/routes";
-import GrantApprovalRuleNew from "./GrantApprovalRuleNew";
+import GrantView from "./Grant";
+import GrantApprovalRule from "./GrantApprovalRule";
 import GrantApprovalRuleEdit from "./GrantApprovalRuleEdit";
-import GrantRequestApprovals from "./GrantRequestApprovals";
-import StructureGrantCartCheckout from "./StructureGrantCartCheckout";
+import GrantApprovalRuleNew from "./GrantApprovalRuleNew";
+import GrantApprovalRules from "./GrantApprovalRules";
 import GrantFiltersLoader from "./GrantFiltersLoader";
-import GrantRequestsLoader from "./GrantRequestsLoader";
+import GrantRequest from "./GrantRequest";
+import GrantRequestApprovals from "./GrantRequestApprovals";
 import GrantRequestLoader from "./GrantRequestLoader";
-import GrantsLoader from "./GrantsLoader";
+import GrantRequestsLoader from "./GrantRequestsLoader";
 import Grants from "./Grants";
-import GrantApprovalRule from "./GrantApprovalRule";
-import GrantApprovalRules from "./GrantApprovalRules";
+import GrantsLoader from "./GrantsLoader";
 import MyGrantRequests from "./MyGrantRequests";
-import GrantRequest from "./GrantRequest";
+import StructureGrantCartCheckout from "./StructureGrantCartCheckout";
 
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
 );
 
-export const GrantRoutes = ({ grantRequestLoaded }) => (
-  <>
-    <Route
-      path={GRANTS_REQUESTS_CHECKOUT}
-      render={() => <StructureGrantCartCheckout />}
-    />
-    <Route
-      path={GRANTS}
-      render={() => (
-        <>
-          <GrantsLoader />
-          <GrantFiltersLoader />
-          <Grants />
-        </>
-      )}
-    />
-    <Route
-      path={MY_GRANTS}
-      render={() => (
-        <>
-          <GrantsLoader onlyMyGrants />
-          <GrantFiltersLoader onlyMyGrants />
-          <Grants onlyMyGrants />
-        </>
-      )}
-    />
-    <Route
-      path={GRANT_REQUEST_APPROVALS}
-      render={() => (
-        <>
-          <GrantRequestsLoader
-            defaultPayload={{
-              action: "approve",
-              status: "pending",
-            }}
-          />
-          <GrantRequestApprovals />
-        </>
-      )}
-    />
-    <Route
-      path={MY_GRANT_REQUESTS}
-      render={() => (
-        <>
-          <GrantRequestsLoader
-            defaultPayload={{
-              user: "me",
-              status: "pending,approved,rejected,processing",
-            }}
-          />
-          <MyGrantRequests />
-        </>
-      )}
-    />
-    <Switch>
+export const GrantRoutes = ({ grantRequestLoaded }) => {
+  return (
+    <>
       <Route
-        exact
-        path={GRANT_APPROVAL_RULE_NEW}
-        render={() => <GrantApprovalRuleNew />}
+        path={GRANTS_REQUESTS_CHECKOUT}
+        render={() => <StructureGrantCartCheckout />}
       />
+      <Switch>
+        <Route exact path={GRANT} render={() => <GrantView />} />
+        <Route
+          exact
+          path={GRANTS}
+          render={() => (
+            <>
+              <GrantsLoader />
+              <GrantFiltersLoader />
+              <Grants />
+            </>
+          )}
+        />
+      </Switch>
       <Route
-        exact
-        path={GRANT_APPROVAL_RULE_EDIT}
-        render={() => <GrantApprovalRuleEdit />}
+        path={MY_GRANTS}
+        render={() => (
+          <>
+            <GrantsLoader onlyMyGrants />
+            <GrantFiltersLoader onlyMyGrants />
+            <Grants onlyMyGrants />
+          </>
+        )}
       />
       <Route
-        exact
-        path={GRANT_APPROVAL_RULE}
-        render={() => <GrantApprovalRule />}
+        path={GRANT_REQUEST_APPROVALS}
+        render={() => (
+          <>
+            <GrantRequestsLoader
+              defaultPayload={{
+                action: "approve",
+                status: "pending",
+              }}
+            />
+            <GrantRequestApprovals />
+          </>
+        )}
       />
       <Route
-        exact
-        path={GRANT_APPROVAL_RULES}
-        render={() => <GrantApprovalRules />}
-      />
-    </Switch>
-    <Route
-      path={GRANT_REQUESTS}
-      render={() => (
-        <>
-          <Switch>
-            <Route
-              path={GRANT_REQUEST}
-              render={() => (
-                <>
-                  <GrantRequestLoader />
-                  <TemplatesLoader scope="gr" />
-                  {grantRequestLoaded && <GrantRequest />}
-                </>
-              )}
+        path={MY_GRANT_REQUESTS}
+        render={() => (
+          <>
+            <GrantRequestsLoader
+              defaultPayload={{
+                user: "me",
+                status: "pending,approved,rejected,processing",
+              }}
             />
-          </Switch>
-        </>
-      )}
-    />
-  </>
-);
+            <MyGrantRequests />
+          </>
+        )}
+      />
+      <Switch>
+        <Route
+          exact
+          path={GRANT_APPROVAL_RULE_NEW}
+          render={() => <GrantApprovalRuleNew />}
+        />
+        <Route
+          exact
+          path={GRANT_APPROVAL_RULE_EDIT}
+          render={() => <GrantApprovalRuleEdit />}
+        />
+        <Route
+          exact
+          path={GRANT_APPROVAL_RULE}
+          render={() => <GrantApprovalRule />}
+        />
+        <Route
+          exact
+          path={GRANT_APPROVAL_RULES}
+          render={() => <GrantApprovalRules />}
+        />
+      </Switch>
+      <Route
+        path={GRANT_REQUESTS}
+        render={() => (
+          <>
+            <Switch>
+              <Route
+                path={GRANT_REQUEST}
+                render={() => (
+                  <>
+                    <GrantRequestLoader />
+                    <TemplatesLoader scope="gr" />
+                    {grantRequestLoaded && <GrantRequest />}
+                  </>
+                )}
+              />
+            </Switch>
+          </>
+        )}
+      />
+    </>
+  );
+};
 
 const mapStateToProps = (state) => ({
   grantRequestLoaded: !_.isEmpty(state.grantRequest),

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

@@ -0,0 +1,81 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { Grant } from "../Grant";
+import en from "../../messages/en";
+
+describe("<Grant />", () => {
+  const grant = {
+    data_structure: {
+      id: 2,
+    },
+    id: 1,
+    data_structure_version: {
+      name: "foo",
+    },
+    detail: {
+      foo: [1, 2, 3, 4],
+      bar: "baz",
+    },
+    start_date: "2018-12-01",
+    end_date: "2019-12-31",
+    inserted_at: "2022-12-12T12:49:09.789722Z",
+    pending_removal: false,
+    user: {
+      email: "foo@gmail.com",
+      full_name: "foo user",
+    },
+  };
+  const actions = {
+    request_removal: {},
+  };
+
+  const defaultProps = {
+    grant,
+    actions,
+    loading: false,
+    onStatusChange: jest.fn(),
+  };
+
+  const renderOpts = {
+    messages: {
+      en: {
+        ...en,
+        "confirmation.yes": "yes",
+        "confirmation.no": "no",
+      },
+    },
+    fallback: "lazy",
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<Grant {...defaultProps} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with cancel_removal action", () => {
+    const props = {
+      ...defaultProps,
+      actions: {
+        cancel_removal: {},
+      },
+    };
+    const { container } = render(<Grant {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("on click removal onStatusChange is called", async () => {
+    const { findByText } = render(<Grant {...defaultProps} />, renderOpts);
+
+    userEvent.click(await findByText("Remove"));
+    expect(await findByText("Request grant removal")).toBeInTheDocument();
+
+    userEvent.click(await findByText("yes"));
+
+    expect(defaultProps.onStatusChange).toHaveBeenLastCalledWith({
+      action: "request_removal",
+      data_structure_id: 2,
+      id: 1,
+    });
+  });
+});

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

@@ -89,7 +89,6 @@ describe("<GrantApprovalRuleConditions />", () => {
     userEvent.click(within(getByRole("combobox")).getByText("Add"));
 
     await waitFor(() => {
-      console.log(onChange.mock.calls.length);
       expect(onChange.mock.calls.length).toBe(4);
     });
     expect(onChange.mock.calls).toMatchObject([