@truedat/dd 4.44.2 → 4.44.5

package/src/components/ReferenceDatasetForm.js

@@ -0,0 +1,109 @@
+import _ from "lodash/fp";
+import React 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";
+
+const MAX_SIZE_MB = 2;
+const MAX_SIZE = MAX_SIZE_MB * 1024 * 1024; // 2MB
+
+const datasetValidator = (formatMessage) => (value) =>
+  _.isNull(value)
+    ? true
+    : value.size > MAX_SIZE
+    ? formatMessage(
+        { id: "widget.image.error.too_big" },
+        { size_mb: MAX_SIZE_MB }
+      )
+    : true;
+
+export const ReferenceDatasetForm = ({ saving, dataset = {}, onSubmit }) => {
+  const { formatMessage } = useIntl();
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues: { name: dataset?.name || "", file: null },
+  });
+  const { isDirty, isValid } = formState;
+  const disabled = saving || !isDirty || !isValid;
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            { prop: formatMessage({ id: "referenceDataset.name" }) }
+          ),
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            error={!!error}
+            label={formatMessage({ id: "referenceDataset.name" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            value={value || ""}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="file"
+        rules={{
+          validate: datasetValidator(formatMessage),
+          required: dataset?.id
+            ? false
+            : formatMessage(
+                { id: "form.validation.required" },
+                { prop: formatMessage({ id: "referenceDataset.file" }) }
+              ),
+        }}
+        render={({ field: { onBlur, onChange }, fieldState: { error } }) => (
+          <Form.Input
+            type="file"
+            error={error?.message}
+            label={formatMessage({ id: "referenceDataset.file" })}
+            onBlur={onBlur}
+            onChange={(e) => onChange(e.target.files[0])}
+            required={!dataset?.id}
+            input={{ accept: "text/*,.csv,.txt" }}
+          />
+        )}
+      />
+      <div className="actions">
+        <Button
+          floated="right"
+          type="submit"
+          primary
+          loading={saving}
+          disabled={disabled}
+          content={formatMessage({ id: "actions.save" })}
+        />
+        <HistoryBackButton
+          content={formatMessage({ id: "actions.cancel" })}
+          disabled={saving}
+        />
+      </div>
+    </Form>
+  );
+};
+
+ReferenceDatasetForm.propTypes = {
+  onSubmit: PropTypes.func,
+  saving: PropTypes.bool,
+  dataset: PropTypes.object,
+};
+
+export const mapStateToProps = ({ referenceDatasetSaving }) => ({
+  saving: !!referenceDatasetSaving,
+});
+
+export default connect(mapStateToProps)(ReferenceDatasetForm);

package/src/components/ReferenceDatasetHeader.js

@@ -0,0 +1,32 @@
+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 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>
+  );
+
+ReferenceDatasetHeader.propTypes = {
+  dataset: PropTypes.object.isRequired,
+};
+
+export default ReferenceDatasetHeader;

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