@truedat/cx 4.41.3 → 4.41.4

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [4.41.4] 2022-04-04
+
+### Added
+
+- [TD-4126] Improved source views to include a tab with the source's jobs
+
+### Changed
+
+- [TD-4450] Use GraphQL API for querying and mutating sources, avoiding use of
+  global state
+
 ## [4.38.2]
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/cx",
-  "version": "4.41.3",
+  "version": "4.41.4",
   "description": "Truedat Web Connectors",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -31,7 +31,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.41.2",
+    "@truedat/test": "4.41.4",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -85,7 +85,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.41.3",
+    "@truedat/core": "4.41.4",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "path-to-regexp": "^1.7.0",
@@ -103,5 +103,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "946829496288ea4ff05b3029b37d8c8d16393127"
+  "gitHead": "c7038921dceb3cb9d6950fd9f57b23126ee0d8b0"
 }

package/src/jobs/components/Job.js

@@ -4,15 +4,15 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import Moment from "react-moment";
 import { connect } from "react-redux";
-import { Header, Message, Segment, Feed } from "semantic-ui-react";
+import { Header, Message, Feed } from "semantic-ui-react";
 
-const dateDecorator = date =>
+const dateDecorator = (date) =>
   date && <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm:ss.SSS" />;
 
 export const icons = {
   STARTED: { name: "play circle outline", color: "green" },
   SUCCEEDED: { name: "check circle outline", color: "green" },
-  FAILED: { name: "warning circle", color: "red" }
+  FAILED: { name: "warning circle", color: "red" },
 };
 
 export const Event = ({ inserted_at, message, type }) => (
@@ -29,7 +29,7 @@ export const Event = ({ inserted_at, message, type }) => (
 Event.propTypes = {
   inserted_at: PropTypes.string,
   message: PropTypes.string,
-  type: PropTypes.string
+  type: PropTypes.string,
 };
 
 export const EventFeed = ({ events }) =>
@@ -42,7 +42,7 @@ export const EventFeed = ({ events }) =>
   ) : null;
 
 EventFeed.propTypes = {
-  events: PropTypes.array
+  events: PropTypes.array,
 };
 
 export const JobPendingMessage = () => {
@@ -58,13 +58,13 @@ export const JobPendingMessage = () => {
 export const Job = ({ job }) => {
   const { formatMessage } = useIntl();
   return job ? (
-    <Segment>
+    <>
       <Header
-        as="h2"
-        content={job?._embedded?.source?.external_id}
+        as="h4"
+        content={job?.external_id}
         subheader={formatMessage({
           id: `jobType.${job?.type}.label`,
-          defaultMessage: job?.type
+          defaultMessage: job?.type,
         })}
       />
       {isEmpty(job?._embedded?.events) ? (
@@ -72,12 +72,12 @@ export const Job = ({ job }) => {
       ) : (
         <EventFeed events={job?._embedded?.events} />
       )}
-    </Segment>
+    </>
   ) : null;
 };
 
 Job.propTypes = {
-  job: PropTypes.object
+  job: PropTypes.object,
 };
 
 export const mapStateToProps = ({ job }) => ({ job });

package/src/jobs/components/JobRoutes.js

@@ -7,7 +7,7 @@ import Job from "./Job";
 import JobBreadcrumbs from "./JobBreadcrumbs";
 import JobFiltersLoader from "./JobFiltersLoader";
 import JobLoader from "./JobLoader";
-import Jobs from "./Jobs";
+import JobsView from "./JobsView";
 import JobsLoader from "./JobsLoader";
 
 export const JobRoutes = () => {
@@ -34,7 +34,7 @@ export const JobRoutes = () => {
                 <>
                   <JobsLoader />
                   <JobFiltersLoader />
-                  <Jobs />
+                  <JobsView />
                 </>
               ) : (
                 <Unauthorized />

package/src/jobs/components/JobRow.js

@@ -8,9 +8,13 @@ import { linkTo } from "@truedat/core/routes";
 
 export const JobRow = ({ job, columns }) => {
   const history = useHistory();
-  const id = _.prop("external_id")(job);
+  const id = job?.externalId || job?.external_id;
+  const sourceId = job?.source_id;
+  const url = sourceId
+    ? linkTo.SOURCE_JOB({ sourceId, id })
+    : linkTo.JOB({ id });
   return _.isEmpty(columns) || _.isEmpty(job) ? null : (
-    <Table.Row key={id} onClick={() => history.push(linkTo.JOB({ id }))}>
+    <Table.Row key={id} onClick={() => history.push(url)}>
       {columns.map((column, i) => (
         <Table.Cell
           key={i}
@@ -24,7 +28,7 @@ export const JobRow = ({ job, columns }) => {
 
 JobRow.propTypes = {
   job: PropTypes.object.isRequired,
-  columns: PropTypes.array.isRequired
+  columns: PropTypes.array.isRequired,
 };
 
 export default JobRow;

package/src/jobs/components/Jobs.js

@@ -1,43 +1,31 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
-
+import { Dimmer, Loader } from "semantic-ui-react";
 import JobsSearch from "./JobsSearch";
 import JobsTable from "./JobsTable";
 import JobsLabelResults from "./JobsLabelResults";
 import JobSelectedFilters from "./JobSelectedFilters";
 import JobsPagination from "./JobsPagination";
 
-export const Jobs = ({ jobsLoading }) => (
-  <Segment>
-    <Header as="h2">
-      <Icon circular name="cogs" />
-      <Header.Content>
-        <FormattedMessage id="jobs.header" />
-        <Header.Subheader>
-          <FormattedMessage id="jobs.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <Segment attached="bottom">
-      <JobsSearch />
-      <JobSelectedFilters />
-      <Dimmer.Dimmable dimmed={jobsLoading}>
-        <Dimmer active={jobsLoading} inverted>
-          <Loader />
-        </Dimmer>
-      </Dimmer.Dimmable>
-      <JobsLabelResults />
-      <JobsTable />
-      <JobsPagination />
-    </Segment>
-  </Segment>
+export const Jobs = ({ columns, jobsLoading }) => (
+  <>
+    <JobsSearch />
+    <JobSelectedFilters />
+    <Dimmer.Dimmable dimmed={jobsLoading}>
+      <Dimmer active={jobsLoading} inverted>
+        <Loader />
+      </Dimmer>
+    </Dimmer.Dimmable>
+    <JobsLabelResults />
+    <JobsTable columns={columns} />
+    <JobsPagination />
+  </>
 );
 
 Jobs.propTypes = {
-  jobsLoading: PropTypes.bool
+  jobsLoading: PropTypes.bool,
+  columns: PropTypes.array,
 };
 
 const mapStateToProps = ({ jobsLoading }) => ({ jobsLoading });

package/src/jobs/components/JobsTable.js

@@ -1,108 +1,96 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Table, Header, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
 import { sortJobs } from "../routines";
-import { getJobsRows, getJobColumns } from "../selectors";
+import { jobRowsSelector, jobColumnsSelector } from "../selectors";
 import JobRow from "./JobRow";
 
-export class JobsTable extends React.Component {
-  static propTypes = {
-    jobsLoading: PropTypes.bool,
-    jobs: PropTypes.array,
-    columns: PropTypes.array,
-    sortJobs: PropTypes.func,
-  };
+export const JobsTable = ({
+  columns,
+  jobs,
+  jobsLoading,
+  jobsSorting,
+  sortJobs,
+}) => {
+  const [sortBy, setSortBy] = React.useState(null);
+  const [direction, setDirection] = React.useState(null);
+  useEffect(() => {
+    const { column, direction } = getSortInfo(jobsSorting);
+    setSortBy(column);
+    setDirection(direction);
+  }, [jobsSorting]);
 
-  //initial state
-  state = {
-    sortedColumn: _.prop("column")(getSortInfo(this.props.jobsSorting)),
-    direction: _.prop("direction")(getSortInfo(this.props.jobsSorting)),
-  };
+  const sortable = _.some(_.path("sort.name"))(columns);
 
-  setDirection = (direction) => {
-    this.setState({ direction: direction });
-  };
+  return (
+    <>
+      {!_.isEmpty(jobs) && (
+        <Table sortable={sortable} selectable>
+          <Table.Header>
+            <Table.Row>
+              {columns &&
+                columns.map((column, key) => (
+                  <Table.HeaderCell
+                    key={key}
+                    width={column.width}
+                    content={
+                      <FormattedMessage
+                        id={`jobs.props.${column.header || column.name}`}
+                        defaultMessage={column.header || column.name}
+                      />
+                    }
+                    sorted={
+                      _.path("sort.name")(column) === sortBy ? direction : null
+                    }
+                    className={_.path("sort.name")(column) ? "" : "disabled"}
+                    onClick={() =>
+                      sortColumn(
+                        column,
+                        sortJobs,
+                        setDirection,
+                        setSortBy,
+                        direction,
+                        sortBy
+                      )
+                    }
+                  />
+                ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {jobs.map((c, i) => (
+              <JobRow key={i} job={c} columns={columns} />
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(jobs) && !jobsLoading && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="jobs.search.results.empty" />
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+};
 
-  setColumn = (column) => {
-    this.setState({ sortedColumn: column });
-  };
+JobsTable.propTypes = {
+  jobsLoading: PropTypes.bool,
+  jobsSorting: PropTypes.array,
+  jobs: PropTypes.array,
+  columns: PropTypes.array,
+  sortJobs: PropTypes.func,
+};
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.jobsSorting != this.props.jobsSorting) {
-      const { column: sortedColumn, direction: direction } = getSortInfo(
-        this.props.jobsSorting
-      );
-      this.setState({ sortedColumn, direction });
-    }
-  }
-
-  render() {
-    const { jobs, columns, jobsLoading, sortJobs } = this.props;
-    const { sortedColumn, direction } = this.state;
-
-    return (
-      <>
-        {!_.isEmpty(jobs) && (
-          <Table sortable selectable>
-            <Table.Header>
-              <Table.Row>
-                {columns &&
-                  columns.map((column, key) => (
-                    <Table.HeaderCell
-                      key={key}
-                      width={column.width}
-                      content={
-                        <FormattedMessage
-                          id={`jobs.props.${column.header || column.name}`}
-                        />
-                      }
-                      sorted={
-                        _.path("sort.name")(column) === sortedColumn
-                          ? direction
-                          : null
-                      }
-                      className={_.path("sort.name")(column) ? "" : "disabled"}
-                      onClick={() =>
-                        sortColumn(
-                          column,
-                          sortJobs,
-                          this.setDirection,
-                          this.setColumn,
-                          direction,
-                          sortedColumn
-                        )
-                      }
-                    />
-                  ))}
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {jobs.map((c, i) => (
-                <JobRow key={i} job={c} columns={columns} />
-              ))}
-            </Table.Body>
-          </Table>
-        )}
-        {_.isEmpty(jobs) && !jobsLoading && (
-          <Header as="h4">
-            <Icon name="search" />
-            <Header.Content>
-              <FormattedMessage id="jobs.search.results.empty" />
-            </Header.Content>
-          </Header>
-        )}
-      </>
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  columns: getJobColumns(state),
-  jobs: getJobsRows(state),
+const mapStateToProps = (state, { columns }) => ({
+  columns: columns || jobColumnsSelector(state),
+  jobs: jobRowsSelector(state),
   jobsLoading: state.jobsLoading,
   jobsSorting: _.path("jobQuery.sort")(state),
 });

package/src/jobs/components/JobsView.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Header, Icon, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import Jobs from "./Jobs";
+
+export const JobsView = () => (
+  <Segment>
+    <Header as="h2">
+      <Icon circular name="cogs" />
+      <Header.Content>
+        <FormattedMessage id="jobs.header" />
+        <Header.Subheader>
+          <FormattedMessage id="jobs.subheader" />
+        </Header.Subheader>
+      </Header.Content>
+    </Header>
+    <Segment attached="bottom">
+      <Jobs />
+    </Segment>
+  </Segment>
+);
+
+export default JobsView;

package/src/jobs/components/SourceJobs.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { sourceJobColumnsSelector } from "../selectors";
+import JobFiltersLoader from "./JobFiltersLoader";
+import JobsLoader from "./JobsLoader";
+import Jobs from "./Jobs";
+
+export const SourceJobs = ({ source, columns }) => {
+  const defaultFilters = { source_id: [source?.id] };
+  return (
+    <>
+      <JobsLoader defaultFilters={defaultFilters} />
+      <JobFiltersLoader defaultFilters={defaultFilters} />
+      <Jobs columns={columns} />
+    </>
+  );
+};
+
+SourceJobs.propTypes = {
+  source: PropTypes.object,
+  columns: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  columns: sourceJobColumnsSelector(state),
+});
+
+export default connect(mapStateToProps)(SourceJobs);

package/src/jobs/components/__tests__/JobRow.spec.js

@@ -1,37 +1,58 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { JobRow } from "../JobRow";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { jobColumnsSelector } from "../../selectors";
+import JobRow from "../JobRow";
+
+const columns = jobColumnsSelector({});
+const job = {
+  source: {
+    externalId: "source external_id_2",
+    type: "source_type_2",
+  },
+  source_id: 123,
+  status: "init",
+  message: "Job started",
+  end_date: "2020-01-21 16:31",
+  external_id: "foo",
+};
+const renderOpts = {};
 
 const mockHistory = {
-  push: jest.fn()
+  push: jest.fn(),
 };
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory
+  useHistory: () => mockHistory,
 }));
 
 describe("<JobRow />", () => {
   it("matches the latest snapshot", () => {
-    const columns = [
-      { name: "source.external_id" },
-      { name: "source.type" },
-      { name: "status" },
-      { name: "message" },
-      { name: "end_date" }
-    ];
-    const job = {
-      source: {
-        external_id: "source external_id_2",
-        type: "source_type_2"
-      },
-      status: "init",
-      message: "Job started",
-      end_date: "2020-01-21 16:31",
-      external_id: "foo"
-    };
     const props = { columns, job };
-    const wrapper = shallow(<JobRow {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <table>
+        <tbody>
+          <JobRow {...props} />
+        </tbody>
+      </table>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("navigates to the job route when row is clicked", () => {
+    const props = { columns, job };
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <JobRow {...props} />
+        </tbody>
+      </table>,
+      renderOpts
+    );
+    userEvent.click(getByText(/source_type_2/));
+    expect(mockHistory.push.mock.calls.length).toBe(1);
+    expect(mockHistory.push.mock.calls[0][0]).toBe("/sources/123/jobs/foo");
   });
 });

package/src/jobs/components/__tests__/Jobs.spec.js

@@ -1,13 +1,38 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Jobs } from "../Jobs";
+import React, { Suspense } from "react";
+import { render } from "@truedat/test/render";
+import en from "../../../messages/en";
+import Jobs from "../Jobs";
 
-describe("<Jobs />", () => {
-  const jobsLoading = false;
+const jobs = [
+  {
+    external_id: "external_id",
+    source: {
+      external_id: "source external_id",
+      type: "source_type",
+    },
+  },
+  {
+    external_id: "external_id_2",
+    source: {
+      external_id: "source external_id_2",
+      type: "source_type_2",
+    },
+  },
+];
+const state = { jobs, jobCount: 42 };
+const renderOpts = {
+  messages: { en },
+  state,
+};
 
+describe("<Jobs />", () => {
   it("matches the latest snapshot", () => {
-    const props = { jobsLoading };
-    const wrapper = shallow(<Jobs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <Suspense fallback={null}>
+        <Jobs />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
   });
 });