@truedat/cx 4.36.7 → 4.36.8

package/src/sources/components/SourceForm.js

@@ -31,10 +31,12 @@ export class SourceForm extends React.Component {
   static propTypes = {
     applyTemplate: PropTypes.func,
     intl: PropTypes.object,
+    source: PropTypes.object,
     template: PropTypes.object,
+    templates: PropTypes.array,
     templatesLoaded: PropTypes.bool,
     selectTemplate: PropTypes.func,
-    handleSubmit: PropTypes.func,
+    onSubmit: PropTypes.func,
   };
 
   state = initialState;
@@ -88,19 +90,10 @@ export class SourceForm extends React.Component {
 
   handleSubmit = (e) => {
     e.preventDefault();
-    const { applyTemplate, handleSubmit } = this.props;
-    const source = _.pick(["external_id", "type"])(this.state);
-
+    const { applyTemplate, onSubmit } = this.props;
+    const source = _.pick(["id", "external_id", "type"])(this.state);
     const config = _.flow(_.prop("content"), applyTemplate)(this.state);
-
-    // call routine submit (POST or PUT depending action)
-    // get it from props
-    handleSubmit({
-      source: {
-        ...source,
-        config: config,
-      },
-    });
+    onSubmit({ source: { ...source, config: config } });
   };
 
   render() {
@@ -124,7 +117,7 @@ export class SourceForm extends React.Component {
       <Form>
         <Form.Field required>
           <label>
-            {formatMessage({ id: "source.props.external_id" })}
+            <FormattedMessage id="source.external_id" />
             {_.isEmpty(external_id) ? (
               <Label pointing="left">
                 <FormattedMessage id="template.form.validation.empty_required" />
@@ -139,11 +132,11 @@ export class SourceForm extends React.Component {
           />
         </Form.Field>
         <Form.Field required>
-          <label>{formatMessage({ id: "type.selector.label" })}</label>
+          <label>
+            <FormattedMessage id="type.selector.label" />
+          </label>
           <Form.Dropdown
-            placeholder={formatMessage({
-              id: "type.selector.placeholder",
-            })}
+            placeholder={formatMessage({ id: "type.selector.placeholder" })}
             name="type"
             search
             selection
@@ -159,7 +152,7 @@ export class SourceForm extends React.Component {
         {type && templatesLoaded && (
           <Form.Field>
             <label className="label">
-              {formatMessage({ id: "source.config.label" })}
+              <FormattedMessage id="source.config.label" />
             </label>
 
             <DynamicSourceForm
@@ -177,11 +170,9 @@ export class SourceForm extends React.Component {
             primary
             disabled={this.isInvalid()}
             onClick={this.handleSubmit}
-            content={
-              <FormattedMessage
-                id={_.isEmpty(source) ? "actions.create" : "actions.save"}
-              />
-            }
+            content={formatMessage({
+              id: _.isEmpty(source) ? "actions.create" : "actions.save",
+            })}
           />
         </div>
       </Form>

package/src/sources/components/SourceRoutes.js

@@ -9,22 +9,21 @@ import { useAuthorized } from "@truedat/core/hooks";
 import {
   SOURCE,
   SOURCES,
-  SOURCE_CREATE,
+  SOURCES_NEW,
   SOURCE_EDIT,
-  SOURCE_JOBS,
-  SOURCE_JOBS_NEW
+  SOURCE_JOBS_NEW,
 } from "@truedat/core/routes";
 import NewSource from "./NewSource";
 import NewJob from "./NewJob";
 import EditSource from "./EditSource";
 import Sources from "./Sources";
-import SourcesLoader from "./SourcesLoader";
 import SourceLoader from "./SourceLoader";
 import Source from "./Source";
 
 const TemplateLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplateLoader")
 );
+
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
 );
@@ -49,7 +48,7 @@ export const SourceRoutes = ({ source, sourceLoading, templatesLoading }) => {
             />
             <Route
               exact
-              path={SOURCE_CREATE}
+              path={SOURCES_NEW}
               render={() => (
                 <>
                   <TemplatesLoader scope="cx" />
@@ -76,24 +75,15 @@ export const SourceRoutes = ({ source, sourceLoading, templatesLoading }) => {
               path={SOURCE}
               render={() => (
                 <>
+                  <SourceLoader />
                   <Segment>
-                    <SourceLoader />
                     <TemplatesLoader scope="cx" />
                     {!templatesLoading && <Source />}
                   </Segment>
                 </>
               )}
             />
-            <Route
-              exact
-              path={SOURCES}
-              render={() => (
-                <>
-                  <SourcesLoader />
-                  <Sources />
-                </>
-              )}
-            />
+            <Route exact path={SOURCES} render={() => <Sources />} />
           </Switch>
         ) : (
           <Unauthorized />
@@ -106,13 +96,13 @@ export const SourceRoutes = ({ source, sourceLoading, templatesLoading }) => {
 SourceRoutes.propTypes = {
   source: PropTypes.object,
   sourceLoading: PropTypes.bool,
-  templatesLoading: PropTypes.bool
+  templatesLoading: PropTypes.bool,
 };
 
 const mapStateToProps = ({ source, sourceLoading, templatesLoading }) => ({
   source,
   sourceLoading,
-  templatesLoading
+  templatesLoading,
 });
 
 export default connect(mapStateToProps)(SourceRoutes);

package/src/sources/components/Sources.js

@@ -1,45 +1,65 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { matchSorter } from "match-sorter";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
-import { Button, Grid, Header, Icon, Input, Segment } from "semantic-ui-react";
+import { Button, Header, Icon, Input, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { SOURCE_CREATE } from "@truedat/core/routes";
-import SourceCards from "./SourceCards";
+import { gql, useQuery } from "@apollo/client";
+import { SOURCES_NEW } from "@truedat/core/routes";
+import SourcesTable from "./SourcesTable";
 
-const toSearchable = _.flow(_.deburr, _.toLower, _.trim);
+export const SOURCES = gql`
+  query SOURCES {
+    sources {
+      id
+      externalId
+      active
+      type
+      events(limit: 1) {
+        id
+        type
+        message
+        insertedAt
+      }
+    }
+  }
+`;
 
-const matchesFilter = filter =>
-  _.flow(
-    _.at(["type", "external_id"]),
-    _.map(toSearchable),
-    _.some(_.includes(toSearchable(filter)))
-  );
+const lowerDeburrTrim = _.flow(_.toLower, _.deburr, _.trim);
 
-const filterData = (filter, data) => {
-  return _.filter(matchesFilter(filter))(data);
-};
+const sortByExternalId = _.sortBy(({ externalId }) =>
+  lowerDeburrTrim(externalId)
+);
 
-export const Sources = ({ sources, sourcesLoading }) => {
-  const [searchFilter, setSearchFilter] = useState("");
-  const filteredSources = filterData(searchFilter, sources);
+export const Sources = () => {
+  const [searchTerm, setSearchTerm] = useState("");
   const { formatMessage } = useIntl();
+  const { loading, error, data } = useQuery(SOURCES);
+  const items = loading || error ? [] : data?.sources;
+  const sources =
+    searchTerm === ""
+      ? sortByExternalId(items)
+      : matchSorter(items, searchTerm, {
+          keys: [
+            "externalId",
+            "type",
+            "events.0.message",
+            "events.0.type",
+            "events.0.insertedAt",
+          ],
+          threshold: matchSorter.rankings.CONTAINS,
+        });
 
-  const handleFilterSources = (_e, { value }) => {
-    setSearchFilter(value);
-  };
-
-  return sourcesLoading ? null : (
+  return (
     <Segment>
       <Header as="h2">
         <Button
           floated="right"
           primary
           as={Link}
-          to={SOURCE_CREATE}
-          content={<FormattedMessage id="sources.actions.create" />}
+          to={SOURCES_NEW}
+          content={formatMessage({ id: "sources.actions.create" })}
         />
         <Icon name="plug" circular />
         <Header.Content>
@@ -49,29 +69,15 @@ export const Sources = ({ sources, sourcesLoading }) => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Grid centered columns={1}>
-        <Grid.Column>
-          <Input
-            onChange={handleFilterSources}
-            value={searchFilter}
-            icon={{ name: "search", link: true }}
-            placeholder={formatMessage({ id: "sources.search.placeholder" })}
-          />
-        </Grid.Column>
-      </Grid>
-      <SourceCards sources={filteredSources} />
+      <Input
+        onChange={(_e, { value }) => setSearchTerm(value)}
+        value={searchTerm}
+        icon={{ name: "search", link: true }}
+        placeholder={formatMessage({ id: "sources.search.placeholder" })}
+      />
+      {loading || error ? null : <SourcesTable sources={sources} />}
     </Segment>
   );
 };
 
-Sources.propTypes = {
-  sources: PropTypes.array,
-  sourcesLoading: PropTypes.bool
-};
-
-const mapStateToProps = ({ sources, sourcesLoading }) => ({
-  sources,
-  sourcesLoading
-});
-
-export default connect(mapStateToProps)(Sources);
+export default Sources;

package/src/sources/components/SourcesTable.js

@@ -0,0 +1,88 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Table } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
+import { DateTime } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+
+export const HeaderRow = () => {
+  const { formatMessage } = useIntl();
+  const headers = [
+    "source.external_id",
+    "source.type",
+    "source.status",
+    "source.latestEvent.insertedAt",
+    "source.latestEvent.type",
+    "source.latestEvent.message",
+  ];
+  return (
+    <Table.Row>
+      {headers.map((id, key) => (
+        <Table.HeaderCell key={key} content={formatMessage({ id })} />
+      ))}
+    </Table.Row>
+  );
+};
+
+export const SourceRow = ({ active, externalId, type, events }) => {
+  const event = _.head(events);
+  const disabled = !active;
+  const positive = event?.type === "SUCCEEDED";
+  const negative = event?.type === "FAILED";
+  return (
+    <Table.Row>
+      <Table.Cell>
+        <Link to={linkTo.SOURCE({ external_id: externalId })}>
+          {externalId}
+        </Link>
+      </Table.Cell>
+      <Table.Cell disabled={disabled}>{type}</Table.Cell>
+      <Table.Cell disabled={disabled}>
+        {active ? null : <FormattedMessage id="source.disabled" />}
+      </Table.Cell>
+      <Table.Cell disabled={disabled} positive={positive} negative={negative}>
+        <DateTime value={event?.insertedAt} />
+      </Table.Cell>
+      <Table.Cell disabled={disabled} positive={positive} negative={negative}>
+        {event?.type}
+      </Table.Cell>
+      <Table.Cell disabled={disabled} positive={positive} negative={negative}>
+        {_.truncate({ length: 90 })(event?.message)}
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+SourceRow.propTypes = {
+  active: PropTypes.bool,
+  externalId: PropTypes.string,
+  type: PropTypes.string,
+  events: PropTypes.arrayOf(PropTypes.object),
+};
+
+export const SourcesTable = ({ sources }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Table>
+      <caption className="text-right">
+        {formatMessage({ id: "sources.count" }, { count: _.size(sources) })}
+      </caption>
+      <Table.Header>
+        <HeaderRow />
+      </Table.Header>
+      <Table.Body>
+        {sources.map((props, key) => (
+          <SourceRow key={key} {...props} />
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};
+
+SourcesTable.propTypes = { sources: PropTypes.array };
+
+export default SourcesTable;

package/src/sources/components/__tests__/SourceActions.spec.js

@@ -1,18 +1,39 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { SourceActions } from "../SourceActions";
 
+const renderOpts = {
+  messages: {
+    en: {
+      "source.actions.delete": "delete",
+      "source.actions.delete.confirmation.content": "confirm delete content",
+      "source.actions.delete.confirmation.header": "confirm delete header",
+      "source.actions.disable": "disable",
+      "source.actions.disable.confirmation.content": "confirm disable content",
+      "source.actions.disable.confirmation.header": "confirm disable header",
+      "source.actions.edit": "edit",
+      "source.actions.enable": "enable",
+      "source.actions.enable.confirmation.content": "confirm enable content",
+      "source.actions.enable.confirmation.header": "confirm enable header",
+    },
+  },
+};
+
 describe("<SourceActions />", () => {
   const source = {
     external_id: "Micro1",
     config: { a: 1 },
-    type: "micro"
+    type: "micro",
+  };
+  const props = {
+    source,
+    deleteSource: jest.fn(),
+    enableSource: jest.fn(),
+    disableSource: jest.fn(),
   };
-  const deleteSource = jest.fn();
 
-  const props = { source, deleteSource };
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SourceActions {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<SourceActions {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/sources/components/__tests__/Sources.spec.js

@@ -1,29 +1,79 @@
 import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
-import { Sources } from "../Sources";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { Sources, SOURCES } from "../Sources";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+const messages = {
+  en: {
+    "sources.actions.create": "create",
+    "sources.header": "header",
+    "sources.search.placeholder": "search",
+    "sources.count": "{count} sources found",
+    "sources.subheader": "subheader",
+    "source.latestEvent.insertedAt": "insertedAt",
+    "source.latestEvent.message": "message",
+    "source.latestEvent.type": "type",
+    "source.status": "status",
+    "source.type": "type",
+    "source.external_id": "external_id",
+  },
+};
 
 describe("<Sources />", () => {
-  const defaultProps = {
-    sourcesLoading: false,
-    sources: []
+  const props = {
+    loading: false,
+    sources: [],
   };
+  const event = {
+    id: 456,
+    type: "eventType",
+    message: "eventMessage",
+    insertedAt: "2020-01-01T12:34:56.000Z",
+  };
+  const source1 = {
+    id: 123,
+    externalId: "aaaa",
+    active: true,
+    type: "sourceType1",
+    events: [event],
+  };
+  const source2 = {
+    id: 456,
+    externalId: "bbbb",
+    active: true,
+    type: "sourceType2",
+    events: [event],
+  };
+  const sources = [source1, source2];
+  const sourcesMock = {
+    request: { query: SOURCES },
+    result: { data: { sources } },
+  };
+  const renderOpts = { mocks: [sourcesMock], messages };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Sources {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const { container, findByText } = render(
+      <Sources {...props} />,
+      renderOpts
+    );
+    await findByText("2 sources found");
+    expect(container).toMatchSnapshot();
   });
 
-  it("renders no results when sources search result is empty", () => {
-    const wrapper = shallow(<Sources {...defaultProps} />);
-    const inputSearch = wrapper.find("Input");
-    inputSearch.simulate("change", {}, { value: "bank" });
-    expect(wrapper.findWhere(n => n.prop("sources")).props().sources).toEqual(
-      []
+  it("renders count and filters rows matching search term", async () => {
+    const { findByText, getByRole, queryAllByRole } = render(
+      <Sources {...props} />,
+      renderOpts
     );
+    await findByText("2 sources found");
+    expect(queryAllByRole("row")).toHaveLength(3); // 2 rows + header
+
+    userEvent.type(getByRole("textbox"), source1.externalId);
+    await findByText("1 sources found");
+    expect(queryAllByRole("row")).toHaveLength(2); // 1 row + header
+
+    userEvent.type(getByRole("textbox"), "x");
+    await findByText("0 sources found");
+    expect(queryAllByRole("row")).toHaveLength(1); // header only
   });
 });

package/src/sources/components/__tests__/SourcesTable.spec.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { SourcesTable } from "../SourcesTable";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "source.disabled": "disabled",
+      "source.external_id": "external_id",
+      "source.latestEvent.insertedAt": "eventInsertedAt",
+      "source.latestEvent.message": "eventMessage",
+      "source.latestEvent.type": "eventType",
+      "source.status": "status",
+      "source.type": "type",
+      "sources.count": "{count} sources found",
+    },
+  },
+};
+
+describe("<SourcesTable />", () => {
+  const sources = [
+    {
+      id: 1,
+      externalId: "con_url",
+      type: "a",
+      config: {
+        a: "aaa",
+        lista: ["bbb", "ddd"],
+        url_cx: [{ url_name: "google", url_value: "https://google.es" }],
+      },
+    },
+    { id: 2, externalId: "id1", type: "app-admin", config: {} },
+    { id: 3, externalId: "id2", type: "app-admin", config: { a: 1 } },
+    { id: 4, externalId: "id3", type: "app-admin", config: { a: "yyyyb" } },
+    { id: 5, externalId: "id4", type: "a", config: { lista: ["codigo6"] } },
+  ];
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <SourcesTable sources={sources} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("contains a message when no sources are found", () => {
+    const { queryByText } = render(<SourcesTable sources={[]} />, renderOpts);
+    expect(queryByText(/0 sources found/)).toBeTruthy();
+  });
+
+  it("contains a caption, a header row and a row for each source", () => {
+    const { queryAllByRole, queryByText } = render(
+      <SourcesTable sources={sources} />,
+      renderOpts
+    );
+    expect(queryByText(/5 sources found/)).toBeTruthy();
+    expect(queryAllByRole("row")).toHaveLength(sources.length + 1);
+  });
+});

package/src/sources/components/__tests__/__snapshots__/EditSource.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`<EditSource /> matches the latest snapshot 1`] = `
 <Fragment>
   <SourceBreadcrumbs
-    text="sources.actions.edit"
+    text="source.actions.edit"
   />
   <Container
     as={[Function]}
@@ -18,12 +18,12 @@ exports[`<EditSource /> matches the latest snapshot 1`] = `
       />
       <HeaderContent>
         <MemoizedFormattedMessage
-          id="sources.actions.edit"
+          id="source.actions.edit"
         />
       </HeaderContent>
     </Header>
     <injectIntl(Connect(SourceForm))
-      handleSubmit={[MockFunction]}
+      onSubmit={[MockFunction]}
       source={
         Object {
           "config": Object {

package/src/sources/components/__tests__/__snapshots__/Source.spec.js.snap

@@ -16,7 +16,7 @@ exports[`<Source /> matches the latest snapshot 1`] = `
           <Icon
             as="i"
             circular={true}
-            name="clipboard check"
+            name="plug"
           />
           <HeaderContent>
             Micro1