@truedat/cx 4.41.3 → 4.41.4

package/src/sources/components/Sources.js

@@ -5,27 +5,12 @@ import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { Button, Header, Icon, Input, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { gql, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
+import { Loading } from "@truedat/core/components";
 import { SOURCES_NEW } from "@truedat/core/routes";
+import { SOURCES_QUERY } from "../api/queries";
 import SourcesTable from "./SourcesTable";
 
-export const SOURCES = gql`
-  query SOURCES {
-    sources {
-      id
-      externalId
-      active
-      type
-      events(limit: 1) {
-        id
-        type
-        message
-        insertedAt
-      }
-    }
-  }
-`;
-
 const lowerDeburrTrim = _.flow(_.toLower, _.deburr, _.trim);
 
 const sortByExternalId = _.sortBy(({ externalId }) =>
@@ -35,8 +20,10 @@ const sortByExternalId = _.sortBy(({ externalId }) =>
 export const Sources = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const { formatMessage } = useIntl();
-  const { loading, error, data } = useQuery(SOURCES);
-  const items = loading || error ? [] : data?.sources;
+  const { loading, error, data } = useQuery(SOURCES_QUERY);
+  if (error) return null;
+  if (loading) return <Loading />;
+  const items = data?.sources;
   const sources =
     searchTerm === ""
       ? sortByExternalId(items)

package/src/sources/components/SourcesTable.js

@@ -27,7 +27,7 @@ export const HeaderRow = () => {
   );
 };
 
-export const SourceRow = ({ active, externalId, type, events }) => {
+export const SourceRow = ({ active, externalId, id, type, events }) => {
   const event = _.head(events);
   const disabled = !active;
   const positive = event?.type === "SUCCEEDED";
@@ -35,9 +35,7 @@ export const SourceRow = ({ active, externalId, type, events }) => {
   return (
     <Table.Row>
       <Table.Cell>
-        <Link to={linkTo.SOURCE({ external_id: externalId })}>
-          {externalId}
-        </Link>
+        <Link to={linkTo.SOURCE({ sourceId: id })}>{externalId}</Link>
       </Table.Cell>
       <Table.Cell disabled={disabled}>{type}</Table.Cell>
       <Table.Cell disabled={disabled}>
@@ -59,6 +57,7 @@ export const SourceRow = ({ active, externalId, type, events }) => {
 SourceRow.propTypes = {
   active: PropTypes.bool,
   externalId: PropTypes.string,
+  id: PropTypes.number,
   type: PropTypes.string,
   events: PropTypes.arrayOf(PropTypes.object),
 };

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

@@ -15,8 +15,7 @@ describe("<EditSource />", () => {
     type: "micro",
   };
   const formatMessage = jest.fn();
-  const sourceLoading = false;
-  const props = { source, sourceLoading, updateSource, formatMessage };
+  const props = { source, updateSource, formatMessage };
 
   it("matches the latest snapshot", () => {
     const wrapper = shallow(<EditSource {...props} />);

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

@@ -4,7 +4,7 @@ import { Source } from "../Source";
 
 describe("<Source />", () => {
   const props = {
-    updateSourceConfig: jest.fn(),
+    updateSource: jest.fn(),
     source: {
       external_id: "Micro1",
       config: { a: 1 },

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

@@ -21,7 +21,9 @@ const renderOpts = {
 
 describe("<SourceActions />", () => {
   const source = {
-    external_id: "Micro1",
+    __typename: "Source",
+    id: 123,
+    externalId: "Micro1",
     config: { a: 1 },
     type: "micro",
   };

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

@@ -0,0 +1,45 @@
+import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import en from "../../../messages/en";
+import SourceDetail from "../SourceDetail";
+
+const jobs = [
+  {
+    external_id: "job1",
+    source_id: 123,
+    end_date: "2022-02-02T00:00:00.000Z",
+    type: "catalog",
+    status: "SUCCESS",
+  },
+  {
+    external_id: "job2",
+    source_id: 123,
+    end_date: "2020-02-01T00:00:00.000Z",
+    type: "catalog",
+    status: "FAILED",
+    message: "Something went wrong",
+  },
+];
+
+const source = {
+  externalId: "foo",
+  id: 123,
+};
+const renderOpts = {
+  messages: { en },
+  routes: ["/sources/123/jobs"],
+  state: { jobs, jobCount: 42 },
+};
+
+describe("<SourceDetail />", () => {
+  it("matches the latest snapshot (jobs tab)", async () => {
+    const { container } = render(
+      <Suspense fallback={null}>
+        <SourceDetail source={source} />
+      </Suspense>,
+      renderOpts
+    );
+    await waitFor(() => expect(container).toMatchSnapshot());
+  });
+});

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

@@ -3,13 +3,13 @@ import { shallowWithIntl } from "@truedat/test/intl-stub";
 import { SourceForm } from "../SourceForm";
 
 describe("<SourceForm />", () => {
-  const applyTemplate = x => x;
+  const applyTemplate = (x) => x;
   const selectTemplate = jest.fn();
   const templatesLoaded = true;
   const source = {
     external_id: "Micro1",
     config: { a: 1 },
-    type: "micro"
+    type: "micro",
   };
   const template = {
     content: [
@@ -20,13 +20,13 @@ describe("<SourceForm />", () => {
         label: "a",
         name: "a",
         type: "string",
-        widget: "string"
-      }
+        widget: "string",
+      },
     ],
     id: 36,
     label: "app-admin",
     name: "micro",
-    scope: "cx"
+    scope: "cx",
   };
 
   const templates = [
@@ -39,13 +39,13 @@ describe("<SourceForm />", () => {
           label: "a",
           name: "a",
           type: "string",
-          widget: "string"
-        }
+          widget: "string",
+        },
       ],
       id: 36,
       label: "app-admin",
       name: "micro",
-      scope: "cx"
+      scope: "cx",
     },
     {
       content: [
@@ -56,7 +56,7 @@ describe("<SourceForm />", () => {
           label: "url",
           name: "url_cx",
           type: "url",
-          widget: "pair_list"
+          widget: "pair_list",
         },
         {
           cardinality: "?",
@@ -65,7 +65,7 @@ describe("<SourceForm />", () => {
           label: "a",
           name: "a",
           type: "string",
-          widget: "string"
+          widget: "string",
         },
         {
           cardinality: "+",
@@ -74,47 +74,32 @@ describe("<SourceForm />", () => {
           label: "lista",
           name: "lista",
           type: "string",
-          widget: "string"
-        }
+          widget: "string",
+        },
       ],
       id: 35,
       label: "a",
       name: "a",
-      scope: "cx"
-    }
+      scope: "cx",
+    },
   ];
 
   const props = {
     applyTemplate,
-    selectTemplate,
     templatesLoaded,
     source,
     template,
-    templates
+    templates,
   };
 
   describe("with multiple templates", () => {
     const wrapper = shallowWithIntl(
-      <SourceForm
-        templates={templates}
-        selectTemplate={selectTemplate}
-        {...props}
-      />
+      <SourceForm templates={templates} {...props} />
     );
 
     it("matches the latest snapshot", () => {
       expect(wrapper).toMatchSnapshot();
     });
-
-    it("dispatches selectTemplate when template is selected", () => {
-      const value = 35;
-      expect(selectTemplate.mock.calls.length).toBe(0);
-      wrapper
-        .find("FormDropdown")
-        .last()
-        .simulate("change", {}, { value });
-      expect(selectTemplate.mock.calls.length).toBe(1);
-    });
   });
 
   describe("content changes", () => {

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import en from "../../../messages/en";
+import SourceHeader from "../SourceHeader";
+
+const source = { externalId: "foo", id: 123 };
+const renderOpts = {
+  messages: { en },
+};
+
+describe("<SourceHeader />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<SourceHeader source={source} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { SOURCE_OPTIONS_QUERY } from "../../api/queries";
+import { SourceSelector } from "../SourceSelector";
+
+const messages = {
+  en: { "source.search.placeholder": "Search source..." },
+};
+
+describe("<Sources />", () => {
+  const props = {
+    loading: false,
+    sources: [],
+  };
+  const config = { databases: ["db1", "db2"] };
+  const source1 = {
+    id: 123,
+    externalId: "aaaa",
+    config,
+  };
+  const source2 = {
+    id: 456,
+    externalId: "bbbb",
+    config: null,
+  };
+  const sources = [source1, source2];
+  const sourcesMock = {
+    request: { query: SOURCE_OPTIONS_QUERY },
+    result: { data: { sources } },
+  };
+  const renderOpts = { mocks: [sourcesMock], messages };
+
+  it("matches the latest snapshot", async () => {
+    const { container, getByRole } = render(
+      <SourceSelector {...props} />,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(getByRole("option", { name: /aaaa/i })).toBeTruthy();
+    });
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import en from "../../../messages/en";
+import SourceTabs from "../SourceTabs";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useRouteMatch: () => ({ path: "/sources/123" }),
+}));
+
+const source = { externalId: "foo", id: 123 };
+const renderOpts = {
+  messages: { en },
+};
+
+describe("<SourceTabs />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<SourceTabs source={source} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -1,7 +1,8 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { Sources, SOURCES } from "../Sources";
+import { SOURCES_QUERY } from "../../api/queries";
+import { Sources } from "../Sources";
 
 const messages = {
   en: {
@@ -31,6 +32,7 @@ describe("<Sources />", () => {
     insertedAt: "2020-01-01T12:34:56.000Z",
   };
   const source1 = {
+    __typename: "Source",
     id: 123,
     externalId: "aaaa",
     active: true,
@@ -38,6 +40,7 @@ describe("<Sources />", () => {
     events: [event],
   };
   const source2 = {
+    __typename: "Source",
     id: 456,
     externalId: "bbbb",
     active: true,
@@ -46,7 +49,7 @@ describe("<Sources />", () => {
   };
   const sources = [source1, source2];
   const sourcesMock = {
-    request: { query: SOURCES },
+    request: { query: SOURCES_QUERY },
     result: { data: { sources } },
   };
   const renderOpts = { mocks: [sourcesMock], messages };

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

@@ -1,39 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<EditSource /> matches the latest snapshot 1`] = `
-<Fragment>
-  <SourceBreadcrumbs
-    text="source.actions.edit"
-  />
-  <Container
-    as={[Function]}
-    text={true}
-  >
-    <Header
-      as="h2"
-    >
-      <Icon
-        as="i"
-        name="plug"
-      />
-      <HeaderContent>
-        <MemoizedFormattedMessage
-          id="source.actions.edit"
-        />
-      </HeaderContent>
-    </Header>
-    <injectIntl(Connect(SourceForm))
-      onSubmit={[MockFunction]}
-      source={
-        Object {
-          "config": Object {
-            "a": 1,
-          },
-          "external_id": "Micro1",
-          "type": "micro",
-        }
-      }
-    />
-  </Container>
-</Fragment>
+<injectIntl(SourceFormLoader)
+  onSubmit={[MockFunction]}
+  source={
+    Object {
+      "config": Object {
+        "a": 1,
+      },
+      "external_id": "Micro1",
+      "type": "micro",
+    }
+  }
+/>
 `;

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

@@ -22,7 +22,7 @@ exports[`<NewSource /> matches the latest snapshot 1`] = `
         />
       </HeaderContent>
     </Header>
-    <injectIntl(Connect(SourceForm))
+    <injectIntl(SourceFormLoader)
       onSubmit={[MockFunction]}
     />
   </Container>

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

@@ -2,72 +2,30 @@
 
 exports[`<Source /> matches the latest snapshot 1`] = `
 <Fragment>
-  <SourceBreadcrumbs
-    text="Micro1"
-  />
+  <SourceBreadcrumbs />
   <Segment>
-    <Grid>
-      <GridColumn
-        width={8}
-      >
-        <Header
-          as="h2"
-        >
-          <Icon
-            as="i"
-            circular={true}
-            name="plug"
-          />
-          <HeaderContent>
-            Micro1
-            <HeaderSubheader>
-              micro
-            </HeaderSubheader>
-          </HeaderContent>
-        </Header>
-      </GridColumn>
-      <GridColumn
-        textAlign="right"
-        width={8}
-      >
-        <Connect(SourceActions) />
-      </GridColumn>
-      <GridColumn
-        width={8}
-      >
-        <lazy
-          editFunctions={
-            Object {
-              "editingField": undefined,
-              "onCancel": [Function],
-              "onChange": [Function],
-              "onSubmit": [Function],
-              "setEditingField": [Function],
-              "updateStatus": undefined,
-            }
-          }
-          template={
-            Object {
-              "content": Array [
-                Object {
-                  "cardinality": "1",
-                  "disabled": true,
-                  "group": "New Group 1",
-                  "label": "a",
-                  "name": "a",
-                  "type": "string",
-                  "widget": "string",
-                },
-              ],
-              "id": 36,
-              "label": "app-admin",
-              "name": "micro",
-              "scope": "cx",
-            }
-          }
-        />
-      </GridColumn>
-    </Grid>
+    <SourceHeader
+      source={
+        Object {
+          "config": Object {
+            "a": 1,
+          },
+          "external_id": "Micro1",
+          "type": "micro",
+        }
+      }
+    />
+    <SourceDetail
+      source={
+        Object {
+          "config": Object {
+            "a": 1,
+          },
+          "external_id": "Micro1",
+          "type": "micro",
+        }
+      }
+    />
   </Segment>
 </Fragment>
 `;

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

@@ -19,7 +19,7 @@ exports[`<SourceActions /> matches the latest snapshot 1`] = `
         aria-checked="false"
         aria-selected="true"
         class="selected item"
-        href="/sources/Micro1/edit"
+        href="/sources/123/edit"
         role="option"
         style="pointer-events: all;"
       >