@truedat/dd 4.59.10 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [5.0.0] 2023-01-24
+
+### Changed
+
+- [TD-5300] ReferenceDataset user management
+  - Users with `view_data_structure` permission on domain can view and download it's ReferenceDatasets
+  - Create, Edit and Delete actions are only available for admin users
+
 ## [4.59.9] 2023-01-16
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.59.10",
+  "version": "5.0.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.7",
+    "@truedat/test": "5.0.0",
     "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.59.10",
-    "@truedat/core": "4.59.10",
-    "@truedat/df": "4.59.10",
+    "@truedat/auth": "5.0.0",
+    "@truedat/core": "5.0.0",
+    "@truedat/df": "5.0.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": "c455cc494dc625e750a0e1dd1ac5aec144cbd593"
+  "gitHead": "688cd20866f3c91f8390588f65d8c75402ad06e4"
 }

package/src/api/queries.js

@@ -76,6 +76,11 @@ export const REFERENCE_DATASET_QUERY = gql`
       headers
       rows
       updatedAt
+      domain_ids
+      domains {
+        id
+        name
+      }
     }
   }
 `;

package/src/components/ReferenceDatasetActions.js

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { Button } from "semantic-ui-react";
+import { useAuthorized } from "@truedat/core/hooks";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
 import { deleteReferenceDataset, downloadReferenceDataset } from "../routines";
@@ -44,8 +45,9 @@ export const ReferenceDatasetActions = ({
   dataset,
 }) => {
   const { formatMessage } = useIntl();
+  const isAdmin = useAuthorized();
   const { id, name } = dataset || {};
-  const actions = [
+  const adminActions = [
     {
       key: "edit",
       icon: "edit",
@@ -54,14 +56,6 @@ export const ReferenceDatasetActions = ({
       as: Link,
       to: linkTo.REFERENCE_DATASET_EDIT({ id }),
     },
-    {
-      key: "download",
-      icon: "download",
-      text: formatMessage({ id: "actions.download" }),
-      value: "download",
-      as: "a",
-      onClick: () => downloadReferenceDataset({ id, name }),
-    },
     {
       key: "delete",
       icon: "trash",
@@ -73,6 +67,18 @@ export const ReferenceDatasetActions = ({
     },
   ];
 
+  const actions = [
+    {
+      key: "download",
+      icon: "download",
+      text: formatMessage({ id: "actions.download" }),
+      value: "download",
+      as: "a",
+      onClick: () => downloadReferenceDataset({ id, name }),
+    },
+    ...(isAdmin ? adminActions : []),
+  ];
+
   return <GroupActions availableActions={actions} />;
 };
 

package/src/components/ReferenceDatasetForm.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useForm, Controller } from "react-hook-form";
 import { connect } from "react-redux";
 import { Button, Form } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import { HistoryBackButton } from "@truedat/core/components";
+import { DomainSelector, HistoryBackButton } from "@truedat/core/components";
 
 const MAX_SIZE_MB = 2;
 const MAX_SIZE = MAX_SIZE_MB * 1024 * 1024; // 2MB
@@ -22,14 +22,35 @@ const datasetValidator = (formatMessage) => (value) =>
 
 export const ReferenceDatasetForm = ({ saving, dataset = {}, onSubmit }) => {
   const { formatMessage } = useIntl();
+  const [domainsLoading, setDomainsLoading] = useState(true);
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
-    defaultValues: { name: dataset?.name || "", file: null },
+    defaultValues: {
+      name: dataset?.name || "",
+      domain_ids: dataset?.domain_ids || [],
+      file: null,
+    },
   });
   const { isDirty, isValid } = formState;
   const disabled = saving || !isDirty || !isValid;
   return (
-    <Form onSubmit={handleSubmit(onSubmit)}>
+    <Form loading={domainsLoading} onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="domain_ids"
+        render={({ field: { onChange, value } }) => (
+          <DomainSelector
+            label={formatMessage({ id: "domain.selector.label" })}
+            labels
+            action="viewDataStructure"
+            value={value}
+            multiple
+            onChange={(_e, { value }) => onChange(value)}
+            onLoad={() => setDomainsLoading(false)}
+          />
+        )}
+      />
+
       <Controller
         control={control}
         name="name"

package/src/components/ReferenceDatasetHeader.js

@@ -2,26 +2,35 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { Header, Icon, Grid } from "semantic-ui-react";
+import { Header, Icon, Grid, Label } from "semantic-ui-react";
 import ReferenceDatasetActions from "./ReferenceDatasetActions";
 
 export const ReferenceDatasetHeader = ({ dataset }) =>
   _.isEmpty(dataset) ? null : (
     <Grid>
-      <Grid.Column width={8}>
-        <Header as="h2">
-          <Icon circular name="list ol" />
-          <Header.Content>
-            {dataset.name}
-            <Header.Subheader>
-              <FormattedMessage id="referenceDataset" />
-            </Header.Subheader>
-          </Header.Content>
-        </Header>
-      </Grid.Column>
-      <Grid.Column width={8} textAlign="right">
-        <ReferenceDatasetActions dataset={dataset} />
-      </Grid.Column>
+      <Grid.Row>
+        <Grid.Column width={8}>
+          <Header as="h2">
+            <Icon circular name="list ol" />
+            <Header.Content>
+              {dataset.name}
+              <Header.Subheader>
+                {dataset.domains && !_.isEmpty(dataset.domains) ? (
+                  <>
+                    <FormattedMessage id="referenceDataset.domains" />:
+                    {dataset.domains.map(({ name, id }) => (
+                      <Label key={id}>{name}</Label>
+                    ))}
+                  </>
+                ) : null}
+              </Header.Subheader>
+            </Header.Content>
+          </Header>
+        </Grid.Column>
+        <Grid.Column width={8} textAlign="right">
+          <ReferenceDatasetActions dataset={dataset} />
+        </Grid.Column>
+      </Grid.Row>
     </Grid>
   );
 

package/src/components/ReferenceDatasetRoutes.js

@@ -2,8 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import { Route, Switch, useParams } from "react-router-dom";
 import { useQuery } from "@apollo/client";
-import { Unauthorized, Loading } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { Loading } from "@truedat/core/components";
 import {
   REFERENCE_DATASETS,
   REFERENCE_DATASET_NEW,
@@ -25,7 +24,7 @@ export const DatasetLoader = () => {
   return _.isEmpty(dataset) ? null : <ReferenceDataset dataset={dataset} />;
 };
 
-export const AuthorizedReferenceDatasetRoutes = () => (
+export const ReferenceDatasetRoutes = () => (
   <Switch>
     <Route
       path={REFERENCE_DATASET_NEW}
@@ -41,16 +40,4 @@ export const AuthorizedReferenceDatasetRoutes = () => (
   </Switch>
 );
 
-export const ReferenceDatasetRoutes = () => {
-  const authorized = useAuthorized();
-  return (
-    <Route
-      path={REFERENCE_DATASETS}
-      render={() =>
-        authorized ? <AuthorizedReferenceDatasetRoutes /> : <Unauthorized />
-      }
-    />
-  );
-};
-
 export default ReferenceDatasetRoutes;

package/src/components/ReferenceDatasets.js

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { Button, Header, Icon, Input, Segment } from "semantic-ui-react";
 import { useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
 import { REFERENCE_DATASET_NEW } from "@truedat/core/routes";
 import { lowerDeburrTrim } from "@truedat/core/services/sort";
 import { REFERENCE_DATASETS_QUERY } from "../api/queries";
@@ -16,6 +17,7 @@ const sortByName = _.sortBy([({ name }) => lowerDeburrTrim(name), "name"]);
 export const ReferenceDatasets = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const { formatMessage } = useIntl();
+  const isAdmin = useAuthorized();
   const { loading, error, data } = useQuery(REFERENCE_DATASETS_QUERY);
   if (error) return null;
   if (loading) return <Loading />;
@@ -30,13 +32,15 @@ export const ReferenceDatasets = () => {
   return (
     <Segment>
       <Header as="h2">
-        <Button
-          floated="right"
-          primary
-          as={Link}
-          to={REFERENCE_DATASET_NEW}
-          content={formatMessage({ id: "referenceDatasets.actions.create" })}
-        />
+        {isAdmin ? (
+          <Button
+            floated="right"
+            primary
+            as={Link}
+            to={REFERENCE_DATASET_NEW}
+            content={formatMessage({ id: "referenceDatasets.actions.create" })}
+          />
+        ) : null}
         <Icon name="list ol" circular />
         <Header.Content>
           <FormattedMessage id="referenceDatasets.header" />

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

@@ -2,6 +2,7 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
+import { domainsMock } from "@truedat/test/mocks";
 import ReferenceDataset from "../ReferenceDataset";
 
 const dataset = {
@@ -12,8 +13,14 @@ const dataset = {
     ["foo1", "bar1", "baz1"],
     ["foo2", "bar2", "baz2"],
   ],
+  domain_ids: [1],
+  domains: [{ name: "fooDomain", id: 1 }],
 };
 
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
 describe("<ReferenceDataset /> show dataset view", () => {
   const renderOpts = { routes: ["/referenceDatasets/123"] };
   const props = { dataset };
@@ -33,28 +40,37 @@ describe("<ReferenceDataset /> show dataset view", () => {
 });
 
 describe("<ReferenceDataset /> edit dataset view", () => {
-  const renderOpts = { routes: ["/referenceDatasets/123/edit"] };
+  const renderOpts = {
+    mocks: [domainsMock({ action: "viewDataStructure" })],
+    routes: ["/referenceDatasets/123/edit"],
+  };
   const props = { dataset };
 
   it("matches the latest snapshot", async () => {
-    const { container, findByText } = render(
+    const { container, findByText, queryByText } = render(
       <ReferenceDataset {...props} />,
       renderOpts
     );
     await findByText("Save");
+
+    await waitFor(() => {
+      expect(queryByText(/barDomain/)).toBeTruthy();
+    });
     expect(container).toMatchSnapshot();
   });
 
   it("form is disabled until modified", async () => {
-    const { findByText, findByRole, getByRole, queryByRole } = render(
-      <ReferenceDataset {...props} />,
-      renderOpts
-    );
+    const { findByText, queryByText, findAllByRole, getByRole, queryByRole } =
+      render(<ReferenceDataset {...props} />, renderOpts);
     await findByText("Save");
 
+    await waitFor(() => {
+      expect(queryByText(/barDomain/)).toBeTruthy();
+    });
+
     // Form is disabled until modified
     expect(queryByRole("button", { name: /Save/ })).toBeDisabled();
-    userEvent.type(await findByRole("textbox"), "bar");
+    userEvent.type((await findAllByRole("textbox"))[1], "bar");
 
     // Form is now enabled
     await waitFor(() =>

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

@@ -7,6 +7,10 @@ const dataset = {
   name: "foo",
 };
 
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
 describe("<ReferenceDatasetActions />", () => {
   const props = { dataset };
 

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

@@ -1,12 +1,22 @@
 import React from "react";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { domainsMock } from "@truedat/test/mocks";
 import ReferenceDatasetCreate from "../ReferenceDatasetCreate";
 
+const renderOpts = { mocks: [domainsMock({ action: "viewDataStructure" })] };
+
 describe("<ReferenceDatasetCreate />", () => {
   const props = { createReferenceDataset: jest.fn() };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<ReferenceDatasetCreate {...props} />);
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <ReferenceDatasetCreate {...props} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(queryByText(/barDomain/)).toBeTruthy();
+    });
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,5 +1,7 @@
 import React from "react";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { domainsMock } from "@truedat/test/mocks";
 import ReferenceDatasetDetail from "../ReferenceDatasetDetail";
 
 const dataset = {
@@ -10,17 +12,25 @@ const dataset = {
     ["foo1", "bar1", "baz1"],
     ["foo2", "bar2", "baz2"],
   ],
+  domain_ids: [1],
+  domains: [{ name: "fooDomain", id: 1 }],
 };
 
 describe("<ReferenceDatasetDetail />", () => {
   const props = { dataset };
 
   it("matches the latest snapshot (edit route)", async () => {
-    const renderOpts = { routes: ["/referenceDatasets/123/edit"] };
-    const { container, findByRole } = render(
+    const renderOpts = {
+      routes: ["/referenceDatasets/123/edit"],
+      mocks: [domainsMock({ action: "viewDataStructure" })],
+    };
+    const { container, findByRole, queryByText } = render(
       <ReferenceDatasetDetail {...props} />,
       renderOpts
     );
+    await waitFor(() => {
+      expect(queryByText(/barDomain/)).toBeTruthy();
+    });
     await findByRole("button", { name: "Save" });
     expect(container).toMatchSnapshot();
   });

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

@@ -2,6 +2,7 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
+import { domainsMock } from "@truedat/test/mocks";
 import ReferenceDatasetForm from "../ReferenceDatasetForm";
 
 const dataset = {
@@ -12,29 +13,39 @@ const dataset = {
     ["foo1", "bar1", "baz1"],
     ["foo2", "bar2", "baz2"],
   ],
+  domain_ids: [1],
+  domains: [{ name: "fooDomain", id: 1 }],
 };
 
+const renderOpts = { mocks: [domainsMock({ action: "viewDataStructure" })] };
+
 describe("<ReferenceDatasetForm />", () => {
   const onSubmit = jest.fn();
   const props = { dataset, onSubmit };
 
   it("matches the latest snapshot", async () => {
-    const { container, findByText } = render(
-      <ReferenceDatasetForm {...props} />
+    const { container, findByText, queryByText } = render(
+      <ReferenceDatasetForm {...props} />,
+      renderOpts
     );
+    await waitFor(() => {
+      expect(queryByText(/barDomain/)).toBeTruthy();
+    });
     await findByText("Save");
     expect(container).toMatchSnapshot();
   });
 
   it("form is disabled until modified", async () => {
-    const { findByText, findByRole, getByRole, queryByRole } = render(
-      <ReferenceDatasetForm {...props} />
-    );
+    const { findByText, findAllByRole, getByRole, queryByRole, queryByText } =
+      render(<ReferenceDatasetForm {...props} />, renderOpts);
+    await waitFor(() => {
+      expect(queryByText(/barDomain/)).toBeTruthy();
+    });
     await findByText("Save");
 
     // Form is disabled until modified
     expect(queryByRole("button", { name: /Save/ })).toBeDisabled();
-    userEvent.type(await findByRole("textbox"), "bar");
+    userEvent.type((await findAllByRole("textbox"))[1], "bar");
 
     // Form is now enabled
     await waitFor(() =>

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

@@ -5,8 +5,14 @@ import ReferenceDatasetHeader from "../ReferenceDatasetHeader";
 const dataset = {
   id: "123",
   name: "foo",
+  domain_ids: [1],
+  domains: [{ name: "fooDomain", id: 1 }],
 };
 
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
 describe("<ReferenceDatasetHeader />", () => {
   const props = { dataset };
 

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

@@ -1,5 +1,7 @@
 import React from "react";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { domainsMock } from "@truedat/test/mocks";
 import ReferenceDatasetRoutes from "../ReferenceDatasetRoutes";
 import {
   REFERENCE_DATASET_QUERY,
@@ -24,6 +26,8 @@ const dataset = {
     ["foo2", "bar2", "baz2"],
   ],
   updatedAt: "2020-01-01T00:00:00.000Z",
+  domain_ids: [1],
+  domains: [{ name: "fooDomain", id: 1 }],
 };
 
 const datasetsMock = {
@@ -53,11 +57,17 @@ describe("<ReferenceDatasetRoutes />", () => {
   });
 
   it("matches the latest snapshot (create route)", async () => {
-    const renderOpts = { routes: ["/referenceDatasets/new"] };
-    const { container, findByRole } = render(
+    const renderOpts = {
+      routes: ["/referenceDatasets/new"],
+      mocks: [domainsMock({ action: "viewDataStructure" })],
+    };
+    const { container, findByRole, queryByText } = render(
       <ReferenceDatasetRoutes {...props} />,
       renderOpts
     );
+    await waitFor(() => {
+      expect(queryByText(/barDomain/)).toBeTruthy();
+    });
     await findByRole("button", { name: "Save" });
     expect(container).toMatchSnapshot();
   });

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

@@ -23,6 +23,10 @@ const datasetsMock = {
 
 const renderOpts = { mocks: [datasetsMock] };
 
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
 jest
   .spyOn(global.Date, "now")
   .mockImplementation(() => new Date("2022-01-01T11:01:58.135Z").valueOf());