@truedat/dd 4.44.1 → 4.44.4

package/src/components/ReferenceDatasetRoutes.js

@@ -0,0 +1,56 @@
+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 {
+  REFERENCE_DATASETS,
+  REFERENCE_DATASET_NEW,
+  REFERENCE_DATASET,
+} from "@truedat/core/routes";
+import { REFERENCE_DATASET_QUERY } from "../api/queries";
+import ReferenceDataset from "./ReferenceDataset";
+import ReferenceDatasets from "./ReferenceDatasets";
+import ReferenceDatasetCreate from "./ReferenceDatasetCreate";
+
+export const DatasetLoader = () => {
+  const { id } = useParams();
+  const { loading, error, data } = useQuery(REFERENCE_DATASET_QUERY, {
+    variables: { id },
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
+  const dataset = data?.referenceDataset;
+  return _.isEmpty(dataset) ? null : <ReferenceDataset dataset={dataset} />;
+};
+
+export const AuthorizedReferenceDatasetRoutes = () => (
+  <Switch>
+    <Route
+      path={REFERENCE_DATASET_NEW}
+      exact
+      render={() => <ReferenceDatasetCreate />}
+    />
+    <Route
+      path={REFERENCE_DATASETS}
+      exact
+      render={() => <ReferenceDatasets />}
+    />
+    <Route path={REFERENCE_DATASET} render={() => <DatasetLoader />} />
+  </Switch>
+);
+
+export const ReferenceDatasetRoutes = () => {
+  const authorized = useAuthorized();
+  return (
+    <Route
+      path={REFERENCE_DATASETS}
+      render={() =>
+        authorized ? <AuthorizedReferenceDatasetRoutes /> : <Unauthorized />
+      }
+    />
+  );
+};
+
+export default ReferenceDatasetRoutes;

package/src/components/ReferenceDatasetTable.js

@@ -0,0 +1,42 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Table } from "semantic-ui-react";
+
+const truncateOpts = { length: 100 };
+
+export const DataRow = ({ values }) => (
+  <Table.Row>
+    {values.map((value, key) => (
+      <Table.Cell key={key}>{_.truncate(truncateOpts)(value)}</Table.Cell>
+    ))}
+  </Table.Row>
+);
+
+DataRow.propTypes = {
+  values: PropTypes.arrayOf(PropTypes.string),
+};
+
+export const ReferenceDatasetTable = ({ headers = [], rows = [] }) => (
+  <Table compact basic="very">
+    <Table.Header>
+      <Table.Row>
+        {headers.map((text, key) => (
+          <Table.HeaderCell key={key} content={text} />
+        ))}
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {rows.map((values, key) => (
+        <DataRow key={key} values={values} />
+      ))}
+    </Table.Body>
+  </Table>
+);
+
+ReferenceDatasetTable.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.string).isRequired,
+  rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
+};
+
+export default ReferenceDatasetTable;

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__/ImplementationStructuresLoader.spec.js

@@ -1,63 +1,21 @@
 import React from "react";
-import { mount } from "enzyme";
+import { render } from "@truedat/test/render";
 import { ImplementationStructuresLoader } from "../ImplementationStructuresLoader";
 
-jest.mock("@fluentui/react-component-event-listener", () => ({
-  documentRef: null,
-  windowRef: null,
-}));
-
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => [1]),
-}));
-
-const getProps = () => ({
-  fetchStructure: jest.fn(),
-  structureIds: [1, 2],
-  clearStructure: jest.fn(),
-});
-
 describe("<ImplementationStructuresLoader/>", () => {
-  it("matches the latest snapshot", () => {
-    const props = getProps();
-    const wrapper = mount(<ImplementationStructuresLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("calls fetchStructure when component mounts but not when it unmounts", () => {
-    const props = getProps();
-    const wrapper = mount(<ImplementationStructuresLoader {...props} />);
-    expect(props.fetchStructure).toHaveBeenCalledTimes(1);
-    expect(props.fetchStructure).toHaveBeenCalledWith({ id: 2 });
-
-    wrapper.unmount();
-    expect(props.fetchStructure).toHaveBeenCalledTimes(1);
-  });
-
-  it("call fetchStructure when next id of structures when field id is already in structures fields", () => {
-    const props = { ...getProps(), structureIds: [1, 2] };
-    const wrapper = mount(<ImplementationStructuresLoader {...props} />);
-    expect(props.fetchStructure).toHaveBeenCalledTimes(1);
-    expect(props.fetchStructure).toHaveBeenCalledWith({ id: 2 });
-
-    wrapper.unmount();
+  it("calls fetchStructure on mount and clearStructure on unmount", () => {
+    const props = {
+      clearStructure: jest.fn(),
+      fetchStructure: jest.fn(),
+      structureIds: [42],
+    };
+    const { unmount } = render(<ImplementationStructuresLoader {...props} />);
+    expect(props.clearStructure).toHaveBeenCalledTimes(0);
     expect(props.fetchStructure).toHaveBeenCalledTimes(1);
-  });
+    expect(props.fetchStructure).toHaveBeenCalledWith({ id: 42 });
 
-  it("calls clearStructure when component unmounts but not when it mounts", () => {
-    const props = getProps();
-    const wrapper = mount(<ImplementationStructuresLoader {...props} />);
-    expect(props.clearStructure).toHaveBeenCalledTimes(0);
-    wrapper.unmount();
+    unmount();
     expect(props.clearStructure).toHaveBeenCalledTimes(1);
-  });
-
-  it("calls fetchStructures when structureIds is updated", () => {
-    const props = getProps();
-    const wrapper = mount(<ImplementationStructuresLoader {...props} />);
-    wrapper.setProps({ structureIds: [6, 5] });
-    expect(props.fetchStructure).toHaveBeenCalledTimes(2);
-    expect(props.fetchStructure).toHaveBeenCalledWith({ id: 5 });
+    expect(props.fetchStructure).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { render } from "@truedat/test/render";
 import { LineageEventsTable } from "../LineageEventsTable";
-import en from "../../messages/en";
 
 describe("<LineageEventsTable />", () => {
   const lineageEvents = [
@@ -19,9 +18,7 @@ describe("<LineageEventsTable />", () => {
 
   it("matches the latest snapshot", () => {
     const props = { fetchLineageEvents, lineageEvents, lineageEventsLoading };
-    const { container } = render(<LineageEventsTable {...props} />, {
-      messages: { en },
-    });
+    const { container } = render(<LineageEventsTable {...props} />);
     expect(container).toMatchSnapshot();
   });
 
@@ -31,9 +28,7 @@ describe("<LineageEventsTable />", () => {
       lineageEvents: [],
       lineageEventsLoading,
     };
-    const { container } = render(<LineageEventsTable {...props} />, {
-      messages: { en },
-    });
+    const { container } = render(<LineageEventsTable {...props} />);
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -3,21 +3,6 @@ import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import PendingStructureNoteRow from "../PendingStructureNoteRow";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "pendingStructureNotes.search.results.empty": "Empty",
-      "pendingStructureNotes.props.structure": "Structure",
-      "pendingStructureNotes.props.status": "Status",
-      "pendingStructureNotes.props.system": "System",
-      "pendingStructureNotes.props.domains": "Domains",
-      "structure.notes.status.deprecated": "Deprecated",
-      "structure.notes.status.draft": "Draft",
-      "structure.notes.status.rejected": "Rejected",
-    },
-  },
-};
-
 const props = {
   structureNote: {
     id: "7207",
@@ -40,8 +25,7 @@ describe("<PendingStructureNoteRow />", () => {
         <tbody>
           <PendingStructureNoteRow {...props} />
         </tbody>
-      </table>,
-      renderOpts
+      </table>
     );
     expect(container).toMatchSnapshot();
 

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

@@ -1,44 +1,17 @@
 import React, { Suspense } from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
-import {
-  PendingStructureNotes,
+import PendingStructureNotes, {
   STRUCTURE_NOTES,
 } from "../PendingStructureNotes";
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn((selector) =>
-    selector({
-      systems: [
-        { external_id: "some_external_id", id: 10, name: "some system" },
-      ],
-    })
-  ),
-}));
-
 const domains = [
   { id: 1, name: "Domain 1", level: 0 },
   { id: 2, name: "Domain 2", level: 0 },
 ];
-
-const messages = {
-  en: {
-    "structure.notes.status.pending_approval": "Empty",
-    "pendingStructureNotes.filters": "Filters",
-    "pendingStructureNotes.props.status": "Status",
-    "pendingStructureNotes.props.system": "System",
-    "pendingStructureNotes.props.domains": "Domains",
-    "structure.notes.status.draft": "Draft",
-    "structure.notes.status.rejected": "Rejected",
-    "pendingStructureNotes.header": "Header",
-    "pendingStructureNotes.subheader": "Sub header",
-    "pendingStructureNotes.search.results.empty": "Serch Empty",
-    "domain.selector.placeholder": "Place Holder",
-    "domain.selector.label": "label",
-    "template.form.validation.empty_required": "empty required",
-  },
-};
+const systems = [
+  { external_id: "some_external_id", id: 10, name: "some system" },
+];
 
 const structureNotes = {
   loading: false,
@@ -77,8 +50,7 @@ const structureNotesMock = {
 
 const renderOpts = {
   mocks: [structureNotesMock],
-  messages,
-  state: { domains },
+  state: { domains, systems },
 };
 
 describe("<PendingStructureNotes />", () => {

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();
+  });
+});