@truedat/dd 4.44.3 → 4.44.4

package/src/components/ReferenceDatasets.js

@@ -0,0 +1,61 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { matchSorter } from "match-sorter";
+import { useIntl, FormattedMessage } from "react-intl";
+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 { REFERENCE_DATASET_NEW } from "@truedat/core/routes";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import { REFERENCE_DATASETS_QUERY } from "../api/queries";
+import ReferenceDatasetsTable from "./ReferenceDatasetsTable";
+
+const sortByName = _.sortBy([({ name }) => lowerDeburrTrim(name), "name"]);
+
+export const ReferenceDatasets = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const { formatMessage } = useIntl();
+  const { loading, error, data } = useQuery(REFERENCE_DATASETS_QUERY);
+  if (error) return null;
+  if (loading) return <Loading />;
+  const items = data?.referenceDatasets;
+  const datasets =
+    searchTerm === ""
+      ? sortByName(items)
+      : matchSorter(items, searchTerm, {
+          keys: ["name", "headers", "rowCount", "updatedAt"],
+          threshold: matchSorter.rankings.CONTAINS,
+        });
+  return (
+    <Segment>
+      <Header as="h2">
+        <Button
+          floated="right"
+          primary
+          as={Link}
+          to={REFERENCE_DATASET_NEW}
+          content={formatMessage({ id: "referenceDatasets.actions.create" })}
+        />
+        <Icon name="list ol" circular />
+        <Header.Content>
+          <FormattedMessage id="referenceDatasets.header" />
+          <Header.Subheader>
+            <FormattedMessage id="referenceDatasets.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Input
+        onChange={(_e, { value }) => setSearchTerm(value)}
+        value={searchTerm}
+        icon={{ name: "search", link: true }}
+        placeholder={formatMessage({
+          id: "referenceDatasets.search.placeholder",
+        })}
+      />
+      <ReferenceDatasetsTable datasets={datasets} />
+    </Segment>
+  );
+};
+
+export default ReferenceDatasets;

package/src/components/ReferenceDatasetsTable.js

@@ -0,0 +1,105 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Icon, Table } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { useIntl } from "react-intl";
+import Moment from "react-moment";
+import { DateTime } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+
+export const HeaderRow = ({ onDateClick, relative }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Table.Row>
+      <Table.HeaderCell
+        content={formatMessage({ id: "referenceDataset.name" })}
+      />
+      <Table.HeaderCell
+        content={formatMessage({ id: "referenceDataset.headers" })}
+      />
+      <Table.HeaderCell
+        content={formatMessage({ id: "referenceDataset.rowCount" })}
+        textAlign="right"
+      />
+      <Table.HeaderCell textAlign="right">
+        {formatMessage({ id: "referenceDataset.updatedAt" })}{" "}
+        <a onClick={onDateClick}>
+          <Icon name={relative ? "calendar outline" : "clock outline"} />
+        </a>
+      </Table.HeaderCell>
+    </Table.Row>
+  );
+};
+
+HeaderRow.propTypes = {
+  relative: PropTypes.bool,
+  onDateClick: PropTypes.func,
+};
+
+export const DatasetRow = ({
+  name,
+  id,
+  relative,
+  rowCount,
+  headers,
+  updatedAt,
+}) => {
+  const { locale } = useIntl();
+  return (
+    <Table.Row>
+      <Table.Cell>
+        <Link to={linkTo.REFERENCE_DATASET({ id })}>{name}</Link>
+      </Table.Cell>
+      <Table.Cell content={_.truncate({ length: 90 })(_.join(", ")(headers))} />
+      <Table.Cell textAlign="right" width={1} content={rowCount} />
+      <Table.Cell textAlign="right" width={3}>
+        {relative ? (
+          <Moment locale={locale} fromNow date={updatedAt} />
+        ) : (
+          <DateTime value={updatedAt} locale={locale} />
+        )}
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+DatasetRow.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.string),
+  id: PropTypes.string,
+  name: PropTypes.string,
+  relative: PropTypes.bool,
+  rowCount: PropTypes.number,
+  updatedAt: PropTypes.string,
+};
+
+export const ReferenceDatasetsTable = ({ datasets }) => {
+  const { formatMessage } = useIntl();
+  const [relative, setRelative] = useState(true);
+
+  return (
+    <Table>
+      <caption className="text-right">
+        {formatMessage(
+          { id: "referenceDatasets.count" },
+          { count: _.size(datasets) }
+        )}
+      </caption>
+      <Table.Header>
+        <HeaderRow
+          relative={relative}
+          onDateClick={() => setRelative((value) => !value)}
+        />
+      </Table.Header>
+      <Table.Body>
+        {datasets.map((props, key) => (
+          <DatasetRow key={key} relative={relative} {...props} />
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};
+
+ReferenceDatasetsTable.propTypes = { datasets: PropTypes.array };
+
+export default ReferenceDatasetsTable;

package/src/components/StructureTagsRoutes.js

@@ -1,4 +1,3 @@
-import _ from "lodash/fp";
 import React from "react";
 import { Route, Switch, useParams } from "react-router-dom";
 import { useQuery } from "@apollo/client";

package/src/components/StructureTypesCrumbs.js

@@ -1,4 +1,3 @@
-import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";

package/src/components/StructureView.js

@@ -1,10 +1,8 @@
 import _ from "lodash/fp";
-import { linkTo } from "@truedat/core/routes";
-import { Link } from "react-router-dom";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Grid, Segment, Button } from "semantic-ui-react";
+import { Grid, Segment } from "semantic-ui-react";
 import FilteredNav from "./FilteredNav";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureGrantCart from "./StructureGrantCart";

package/src/components/SystemForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { connect } from "react-redux";

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import ReferenceDataset from "../ReferenceDataset";
+
+const dataset = {
+  id: "123",
+  name: "foo",
+  headers: ["foo", "bar", "baz"],
+  rows: [
+    ["foo1", "bar1", "baz1"],
+    ["foo2", "bar2", "baz2"],
+  ],
+};
+
+describe("<ReferenceDataset /> show dataset view", () => {
+  const renderOpts = { routes: ["/referenceDatasets/123"] };
+  const props = { dataset };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ReferenceDataset {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("contains the right number of rows", () => {
+    const { queryAllByRole } = render(
+      <ReferenceDataset {...props} />,
+      renderOpts
+    );
+    expect(queryAllByRole("row")).toHaveLength(3);
+  });
+});
+
+describe("<ReferenceDataset /> edit dataset view", () => {
+  const renderOpts = { routes: ["/referenceDatasets/123/edit"] };
+  const props = { dataset };
+
+  it("matches the latest snapshot", async () => {
+    const { container, findByText } = render(
+      <ReferenceDataset {...props} />,
+      renderOpts
+    );
+    await findByText("Save");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("form is disabled until modified", async () => {
+    const { findByText, findByRole, getByRole, queryByRole } = render(
+      <ReferenceDataset {...props} />,
+      renderOpts
+    );
+    await findByText("Save");
+
+    // Form is disabled until modified
+    expect(queryByRole("button", { name: /Save/ })).toBeDisabled();
+    userEvent.type(await findByRole("textbox"), "bar");
+
+    // Form is now enabled
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Save/ })).not.toBeDisabled()
+    );
+  });
+});

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetActions from "../ReferenceDatasetActions";
+
+const dataset = {
+  id: "123",
+  name: "foo",
+};
+
+describe("<ReferenceDatasetActions />", () => {
+  const props = { dataset };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ReferenceDatasetActions {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetBreadcrumbs from "../ReferenceDatasetBreadcrumbs";
+
+describe("<ReferenceDatasetBreadcrumbs />", () => {
+  const props = { text: "foo" };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ReferenceDatasetBreadcrumbs {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetCreate from "../ReferenceDatasetCreate";
+
+describe("<ReferenceDatasetCreate />", () => {
+  const props = { createReferenceDataset: jest.fn() };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ReferenceDatasetCreate {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetDetail from "../ReferenceDatasetDetail";
+
+const dataset = {
+  id: "123",
+  name: "foo",
+  headers: ["foo", "bar", "baz"],
+  rows: [
+    ["foo1", "bar1", "baz1"],
+    ["foo2", "bar2", "baz2"],
+  ],
+};
+
+describe("<ReferenceDatasetDetail />", () => {
+  const props = { dataset };
+
+  it("matches the latest snapshot (edit route)", async () => {
+    const renderOpts = { routes: ["/referenceDatasets/123/edit"] };
+    const { container, findByRole } = render(
+      <ReferenceDatasetDetail {...props} />,
+      renderOpts
+    );
+    await findByRole("button", { name: "Save" });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (view route)", async () => {
+    const renderOpts = { routes: ["/referenceDatasets/123"] };
+    const { container, findByText } = render(
+      <ReferenceDatasetDetail {...props} />,
+      renderOpts
+    );
+    await findByText("foo");
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetForm from "../ReferenceDatasetForm";
+
+const dataset = {
+  id: "123",
+  name: "foo",
+  headers: ["foo", "bar", "baz"],
+  rows: [
+    ["foo1", "bar1", "baz1"],
+    ["foo2", "bar2", "baz2"],
+  ],
+};
+
+describe("<ReferenceDatasetForm />", () => {
+  const onSubmit = jest.fn();
+  const props = { dataset, onSubmit };
+
+  it("matches the latest snapshot", async () => {
+    const { container, findByText } = render(
+      <ReferenceDatasetForm {...props} />
+    );
+    await findByText("Save");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("form is disabled until modified", async () => {
+    const { findByText, findByRole, getByRole, queryByRole } = render(
+      <ReferenceDatasetForm {...props} />
+    );
+    await findByText("Save");
+
+    // Form is disabled until modified
+    expect(queryByRole("button", { name: /Save/ })).toBeDisabled();
+    userEvent.type(await findByRole("textbox"), "bar");
+
+    // Form is now enabled
+    await waitFor(() =>
+      expect(getByRole("button", { name: /Save/ })).not.toBeDisabled()
+    );
+
+    // Submit
+    await waitFor(() => {
+      userEvent.click(getByRole("button", { name: /Save/ }));
+    });
+
+    expect(onSubmit).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetHeader from "../ReferenceDatasetHeader";
+
+const dataset = {
+  id: "123",
+  name: "foo",
+};
+
+describe("<ReferenceDatasetHeader />", () => {
+  const props = { dataset };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ReferenceDatasetHeader {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetRoutes from "../ReferenceDatasetRoutes";
+import {
+  REFERENCE_DATASET_QUERY,
+  REFERENCE_DATASETS_QUERY,
+} from "../../api/queries";
+
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+const dataset = {
+  __typename: "ReferenceDataset",
+  id: "123",
+  name: "foo",
+  headers: ["foo", "bar", "baz"],
+  rowCount: 2,
+  rows: [
+    ["foo1", "bar1", "baz1"],
+    ["foo2", "bar2", "baz2"],
+  ],
+  updatedAt: "2020-01-01T00:00:00.000Z",
+};
+
+const datasetsMock = {
+  request: { query: REFERENCE_DATASETS_QUERY },
+  result: { data: { referenceDatasets: [dataset] } },
+};
+
+const datasetMock = {
+  request: { query: REFERENCE_DATASET_QUERY, variables: { id: "123" } },
+  result: { data: { referenceDataset: dataset } },
+};
+
+describe("<ReferenceDatasetRoutes />", () => {
+  const props = { dataset };
+
+  it("matches the latest snapshot (list route)", async () => {
+    const renderOpts = {
+      routes: ["/referenceDatasets"],
+      mocks: [datasetsMock],
+    };
+    const { container, findByText } = render(
+      <ReferenceDatasetRoutes {...props} />,
+      renderOpts
+    );
+    await findByText("foo");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (create route)", async () => {
+    const renderOpts = { routes: ["/referenceDatasets/new"] };
+    const { container, findByRole } = render(
+      <ReferenceDatasetRoutes {...props} />,
+      renderOpts
+    );
+    await findByRole("button", { name: "Save" });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (view route)", async () => {
+    const renderOpts = {
+      routes: ["/referenceDatasets/123"],
+      mocks: [datasetMock],
+    };
+    const { container, findByText } = render(
+      <ReferenceDatasetRoutes {...props} />,
+      renderOpts
+    );
+    await findByText("baz2");
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetTable from "../ReferenceDatasetTable";
+
+const props = {
+  headers: ["foo", "bar", "baz"],
+  rows: [
+    ["foo1", "bar1", "baz1"],
+    ["foo2", "bar2", "baz2"],
+  ],
+};
+
+describe("<ReferenceDatasetTable />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ReferenceDatasetTable {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasets from "../ReferenceDatasets";
+import { REFERENCE_DATASETS_QUERY } from "../../api/queries";
+
+const dataset = {
+  __typename: "ReferenceDataset",
+  id: "123",
+  name: "foo",
+  headers: ["foo", "bar", "baz"],
+  rowCount: 2,
+  rows: [
+    ["foo1", "bar1", "baz1"],
+    ["foo2", "bar2", "baz2"],
+  ],
+  updatedAt: "2020-01-01T00:00:00.000Z",
+};
+
+const datasetsMock = {
+  request: { query: REFERENCE_DATASETS_QUERY },
+  result: { data: { referenceDatasets: [dataset] } },
+};
+
+const renderOpts = { mocks: [datasetsMock] };
+
+describe("<ReferenceDatasets />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, findByText } = render(<ReferenceDatasets />, renderOpts);
+    await findByText("One dataset found");
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ReferenceDatasetsTable from "../ReferenceDatasetsTable";
+
+const props = {
+  datasets: [
+    {
+      id: "123",
+      name: "foo",
+      headers: ["foo", "bar", "baz"],
+      rowCount: 2,
+      updatedAt: "2020-01-01T00:00:00.000Z",
+    },
+  ],
+};
+
+describe("<ReferenceDatasetsTable />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ReferenceDatasetsTable {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -29,6 +29,10 @@ exports[`<DictionaryRoutes /> matches the latest snapshot 1`] = `
     path="/structureNotes"
     render={[Function]}
   />
+  <Route
+    path="/referenceDatasets"
+    render={[Function]}
+  />
   <Route
     path="/profileGroups/:id"
     render={[Function]}