@truedat/dd 4.44.3 → 4.45.0

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/StructureConfidentialButton.js

@@ -34,7 +34,7 @@ export class StructureConfidentialButton extends React.Component {
       userPermissions,
     } = this.props;
 
-    if (!userPermissions.confidential || !userPermissions.update) return null;
+    if (!userPermissions?.confidential || !userPermissions?.update) return null;
 
     const buttonText = structure.confidential
       ? formatMessage({ id: "structure.mark_as_public" })

package/src/components/StructureFilters.js

@@ -1,13 +1,9 @@
-import React from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addStructureFilter, resetStructureFilters } from "../routines";
 import { getStructureAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: getStructureAvailableFilters(state),
   disabled: state.structureFiltersLoading,

package/src/components/StructureNotesEdit.js

@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import { Button, Form, Segment } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { HistoryBackButton } from "@truedat/core/components";
-import { selectTemplate, selectDomain } from "@truedat/df/routines";
+import { selectTemplate, selectDomains } from "@truedat/df/routines";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
 import { doStructureNoteAction } from "../routines";
 import { getLatestDfContent } from "../selectors/getSortedStructureNotes";
@@ -24,16 +24,16 @@ export const StructureNotesEdit = ({
   template,
   doStructureNoteAction,
   selectTemplate,
-  selectDomain,
+  selectDomains,
   structureNotes,
   latestDfContent,
 }) => {
   const [content, setContent] = useState(latestDfContent);
 
   useEffect(() => {
-    selectDomain({ id: structure.domain_id });
+    selectDomains(structure.domain_ids);
     if (template) selectTemplate(template);
-  }, [template, structure, selectTemplate, selectDomain]);
+  }, [template, structure, selectTemplate, selectDomains]);
 
   useEffect(() => {
     if (template && latestDfContent) {
@@ -90,7 +90,7 @@ StructureNotesEdit.propTypes = {
   template: PropTypes.object,
   doStructureNoteAction: PropTypes.func,
   selectTemplate: PropTypes.func,
-  selectDomain: PropTypes.func,
+  selectDomains: PropTypes.func,
   structureNotes: PropTypes.object,
   latestDfContent: PropTypes.object,
 };
@@ -118,6 +118,6 @@ const mapStateToProps = (state) => {
 
 export default connect(mapStateToProps, {
   selectTemplate,
-  selectDomain,
+  selectDomains,
   doStructureNoteAction,
 })(StructureNotesEdit);

package/src/components/StructureProperties.js

@@ -21,7 +21,10 @@ export const StructureProperties = ({ properties, structure }) => {
                 <Item>
                   <Item.Content>
                     <Item.Header as="h5">
-                      <FormattedMessage id={`structure.${property.name}`} />
+                      <FormattedMessage
+                        id={`structure.${property.name}`}
+                        defaultMessage={property.name}
+                      />
                     </Item.Header>
                     <Item.Description>
                       {columnDecorator(property)(structure)}

package/src/components/StructureTabPane.js

@@ -18,7 +18,6 @@ import StructureLineage from "./StructureLineage";
 import StructureNotes from "./StructureNotes";
 import StructureNotesEdit from "./StructureNotesEdit";
 import StructureParentRelations from "./StructureParentRelations";
-import StructureProfiling from "./StructureProfiling";
 import StructureVersions from "./StructureVersions";
 import StructureMetadata from "./StructureMetadata";
 import StructureNotesLoader from "./StructureNotesLoader";
@@ -26,6 +25,9 @@ import StructureNotesLoader from "./StructureNotesLoader";
 const StructureLinks = React.lazy(() =>
   import("@truedat/lm/components/StructureLinks")
 );
+
+const StructureProfile = React.lazy(() => import("@truedat/profile"));
+
 const StructureRelationForm = React.lazy(() =>
   import("@truedat/lm/components/StructureRelationForm")
 );
@@ -59,7 +61,7 @@ export const StructureTabPane = ({ activeTab, tabVisibility }) => (
         <Route render={() => <StructureLinks />} />
       </Switch>
     )}
-    {activeTab === "profile" && tabVisibility.profile && <StructureProfiling />}
+    {activeTab === "profile" && tabVisibility.profile && <StructureProfile />}
     {activeTab === "parents" && <StructureParentRelations />}
     {activeTab === "children" && <StructureChildrenRelations />}
     {activeTab === "versions" && <StructureVersions />}

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/StructureVersionListItem.js

@@ -6,7 +6,7 @@ import { List } from "semantic-ui-react";
 import Moment from "react-moment";
 import { linkTo } from "@truedat/core/routes";
 
-const dateDecorator = date => (
+const dateDecorator = (date) => (
   <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />
 );
 
@@ -30,7 +30,7 @@ export const StructureVersionListItem = ({ id, version, inserted_at }) => (
 StructureVersionListItem.propTypes = {
   id: PropTypes.number,
   version: PropTypes.number,
-  inserted_at: PropTypes.string
+  inserted_at: PropTypes.string,
 };
 
 export default StructureVersionListItem;

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

@@ -1,14 +1,14 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import { LineageRoutes } from "../LineageRoutes";
 
 jest.mock("@truedat/core/hooks", () => ({
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
 }));
 
 describe("<LineageRoutes />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<LineageRoutes />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<LineageRoutes />);
+    expect(container).toMatchSnapshot();
   });
 });

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