@truedat/cx 7.5.9 → 7.5.11

package/src/jobs/components/__tests__/__snapshots__/JobsTable.spec.js.snap

@@ -12,7 +12,7 @@ exports[`<JobsTable /> matches the latest snapshot (no jobs) 1`] = `
     <div
       class="content"
     >
-      No jobs found
+      jobs.search.results.empty
     </div>
   </h4>
 </div>
@@ -32,32 +32,32 @@ exports[`<JobsTable /> matches the latest snapshot 1`] = `
         <th
           class="two wide"
         >
-          Source
+          source.external_id
         </th>
         <th
           class="two wide"
         >
-          Source Type
+          source.type
         </th>
         <th
           class="two wide"
         >
-          Type
+          type
         </th>
         <th
           class="two wide"
         >
-          Status
+          status
         </th>
         <th
           class="two wide disabled"
         >
-          Message
+          message
         </th>
         <th
           class="two wide descending sorted"
         >
-          Updated At
+          end_date
         </th>
       </tr>
     </thead>

package/src/jobs/components/__tests__/__snapshots__/JobsView.spec.js.snap

@@ -15,11 +15,11 @@ exports[`<JobsView /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        Jobs
+        jobs.header
         <div
           class="sub header"
         >
-          Connectors execution by defined sources
+          jobs.subheader
         </div>
       </div>
     </h2>
@@ -30,7 +30,7 @@ exports[`<JobsView /> matches the latest snapshot 1`] = `
         class="ui action left icon input"
       >
         <input
-          placeholder="Search jobs..."
+          placeholder="jobs.search.placeholder"
           type="text"
           value=""
         />
@@ -64,7 +64,7 @@ exports[`<JobsView /> matches the latest snapshot 1`] = `
               role="option"
             >
               <em>
-                (reset all filters)
+                (reset filters)
               </em>
             </div>
           </div>
@@ -75,23 +75,11 @@ exports[`<JobsView /> matches the latest snapshot 1`] = `
       />
       <div
         class="dimmable"
-      >
-        <div
-          class="ui inverted dimmer"
-        >
-          <div
-            class="content"
-          >
-            <div
-              class="ui loader"
-            />
-          </div>
-        </div>
-      </div>
+      />
       <div
         class="ui label jobs-label-results"
       >
-         jobs found
+        jobs.retrieved.results
       </div>
       <table
         class="ui selectable sortable table"
@@ -105,32 +93,32 @@ exports[`<JobsView /> matches the latest snapshot 1`] = `
             <th
               class="two wide"
             >
-              Source
+              source.external_id
             </th>
             <th
               class="two wide"
             >
-              Source Type
+              source.type
             </th>
             <th
               class="two wide"
             >
-              Type
+              type
             </th>
             <th
               class="two wide"
             >
-              Status
+              status
             </th>
             <th
               class="two wide disabled"
             >
-              Message
+              message
             </th>
             <th
               class="two wide descending sorted"
             >
-              Updated At
+              end_date
             </th>
           </tr>
         </thead>

package/src/jobs/components/__tests__/__snapshots__/SourceJobs.spec.js.snap

@@ -6,9 +6,8 @@ exports[`<SourceJobs /> matches the latest snapshot 1`] = `
     class="ui action left icon input"
   >
     <input
-      placeholder="Search jobs..."
+      placeholder="jobs.search.placeholder"
       type="text"
-      value=""
     />
     <i
       aria-hidden="true"
@@ -40,7 +39,7 @@ exports[`<SourceJobs /> matches the latest snapshot 1`] = `
           role="option"
         >
           <em>
-            (reset all filters)
+            (reset filters)
           </em>
         </div>
       </div>
@@ -51,23 +50,11 @@ exports[`<SourceJobs /> matches the latest snapshot 1`] = `
   />
   <div
     class="dimmable"
-  >
-    <div
-      class="ui inverted dimmer"
-    >
-      <div
-        class="content"
-      >
-        <div
-          class="ui loader"
-        />
-      </div>
-    </div>
-  </div>
+  />
   <div
     class="ui label jobs-label-results"
   >
-    42 jobs found
+    jobs.retrieved.results
   </div>
   <table
     class="ui selectable sortable table"
@@ -81,22 +68,22 @@ exports[`<SourceJobs /> matches the latest snapshot 1`] = `
         <th
           class="three wide"
         >
-          Updated At
+          end_date
         </th>
         <th
           class="two wide"
         >
-          Type
+          type
         </th>
         <th
           class="two wide"
         >
-          Status
+          status
         </th>
         <th
           class="nine wide ascending sorted disabled"
         >
-          Message
+          message
         </th>
       </tr>
     </thead>

package/src/jobs/reducers/jobActiveFilters.js

@@ -4,7 +4,7 @@ import {
   closeJobFilter,
   removeJobFilter,
   resetJobFilters,
-  toggleJobFilterValue
+  toggleJobFilterValue,
 } from "../routines";
 
 export const initialState = {};

package/src/jobs/sagas/fetchJob.js

@@ -9,7 +9,7 @@ const toApiPath = compile(API_JOB);
 export function* fetchJobSaga({ payload }) {
   try {
     const { id } = payload;
-    const url = toApiPath({ id });
+    const url = toApiPath({ id: `${id}` });
     yield put(fetchJob.request({ id }));
     const { data } = yield call(apiJson, url, JSON_OPTS);
     yield put(fetchJob.success(data));

package/src/jobs/selectors/jobColumnsSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { createSelector } from "reselect";
 import Moment from "react-moment";
 

package/src/jobs/selectors/sourceJobColumnsSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { createSelector } from "reselect";
 import Moment from "react-moment";
 

package/src/sources/components/EditSource.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { updateSource } from "../routines";

package/src/sources/components/JobForm.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Button, Form } from "semantic-ui-react";
 import { useIntl } from "react-intl";

package/src/sources/components/NewJob.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";

package/src/sources/components/NewSource.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";

package/src/sources/components/Source.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Segment } from "semantic-ui-react";
 import SourceBreadcrumbs from "./SourceBreadcrumbs";

package/src/sources/components/SourceActions.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";

package/src/sources/components/SourceBreadcrumbs.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { SOURCES } from "@truedat/core/routes";
 

package/src/sources/components/SourceConfiguration.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { lazy, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { updateSource } from "../routines";
 
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+const DynamicFormViewer = lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
 
 export const SourceConfiguration = ({

package/src/sources/components/SourceDetail.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Switch, Route } from "react-router-dom";
+import { Route, Routes } from "react-router";
 import { Segment } from "semantic-ui-react";
 import {
   SOURCE_EDIT,
@@ -16,71 +16,67 @@ import EditSource from "./EditSource";
 import NewJob from "./NewJob";
 import SourceConfiguration from "./SourceConfiguration";
 import SourceTabs from "./SourceTabs";
-
 export const SourceDetail = ({ source }) => (
-  <Switch>
-    <Route
-      path={SOURCE_JOBS_NEW}
-      exact
-      render={() => (
-        <>
-          <SourceTabs source={source} />
-          <Segment attached="bottom">
-            <NewJob source={source} />
-          </Segment>
-        </>
-      )}
-    />
-    <Route
-      path={SOURCE_JOB}
-      exact
-      render={() => (
-        <>
-          <JobLoader />
-          <SourceTabs source={source} />
-          <Segment attached="bottom">
-            <Job />
-          </Segment>
-        </>
-      )}
-    />
+  <Routes>
     <Route
-      path={SOURCE_JOBS}
-      exact
-      render={() => (
+      index
+      element={
         <>
           <SourceTabs source={source} />
           <Segment attached="bottom">
-            <SourceJobs source={source} />
+            <SourceConfiguration source={source} />
           </Segment>
         </>
-      )}
+      }
     />
     <Route
-      path={SOURCE_EDIT}
-      exact
-      render={() => (
+      path="edit"
+      element={
         <>
           <SourceTabs source={source} />
           <Segment attached="bottom">
             <EditSource source={source} />
           </Segment>
         </>
-      )}
-    />
-    <Route
-      path={SOURCE}
-      exact
-      render={() => (
-        <>
-          <SourceTabs source={source} />
-          <Segment attached="bottom">
-            <SourceConfiguration source={source} />
-          </Segment>
-        </>
-      )}
+      }
     />
-  </Switch>
+    <Route path="jobs">
+      <Route
+        index
+        element={
+          <>
+            <SourceTabs source={source} />
+            <Segment attached="bottom">
+              <SourceJobs source={source} />
+            </Segment>
+          </>
+        }
+      />
+      <Route
+        path="new"
+        element={
+          <>
+            <SourceTabs source={source} />
+            <Segment attached="bottom">
+              <NewJob source={source} />
+            </Segment>
+          </>
+        }
+      />
+      <Route
+        path=":id"
+        element={
+          <>
+            <JobLoader />
+            <SourceTabs source={source} />
+            <Segment attached="bottom">
+              <Job />
+            </Segment>
+          </>
+        }
+      />
+    </Route>
+  </Routes>
 );
 
 SourceDetail.propTypes = {

package/src/sources/components/SourceForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import { lazy, Component } from "react";
 import PropTypes from "prop-types";
 import { Button, Form, Label } from "semantic-ui-react";
 import { injectIntl, FormattedMessage } from "react-intl";
@@ -9,9 +9,7 @@ import { HistoryBackButton, Loading } from "@truedat/core/components";
 import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
-);
+const DynamicForm = lazy(() => import("@truedat/df/components/DynamicForm"));
 
 const staticFields = ["external_id"];
 
@@ -30,7 +28,7 @@ const isValid = _.conforms({
   contentErrors: isEmptyArray,
 });
 
-export class SourceForm extends React.Component {
+export class SourceForm extends Component {
   static propTypes = {
     intl: PropTypes.object,
     source: PropTypes.object,
@@ -129,7 +127,7 @@ export class SourceForm extends React.Component {
           </label>
           <Form.Input
             name="external_id"
-            value={external_id}
+            value={external_id || ""}
             onChange={this.handleChange}
             disabled={!_.isEmpty(source)}
           />
@@ -151,7 +149,6 @@ export class SourceForm extends React.Component {
             disabled={!_.isEmpty(source)}
           />
         </Form.Field>
-
         {type && !templatesLoading && (
           <Form.Field>
             <label className="label">

package/src/sources/components/SourceHeader.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Header, Icon, Grid } from "semantic-ui-react";

package/src/sources/components/SourceRoutes.js

@@ -1,10 +1,13 @@
 import _ from "lodash/fp";
 import React from "react";
-import { Route, Switch, useParams } from "react-router-dom";
+import { Routes, Route } from "react-router";
+import { useParams } from "react-router";
 import { useQuery } from "@apollo/client";
-import { Unauthorized, Loading } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
-import { SOURCE, SOURCES, SOURCES_NEW } from "@truedat/core/routes";
+import { useIntl } from "react-intl";
+import { Loading } from "@truedat/core/components";
+import { SOURCES } from "@truedat/core/routes";
+import { ProtectedRoute } from "@truedat/core/router";
+import { Message } from "semantic-ui-react";
 import { SOURCE_QUERY } from "../api/queries";
 import NewSource from "./NewSource";
 import Source from "./Source";
@@ -12,33 +15,37 @@ import Sources from "./Sources";
 
 export const SourceLoader = () => {
   const { sourceId } = useParams();
+  const { formatMessage } = useIntl();
   const { loading, error, data } = useQuery(SOURCE_QUERY, {
     variables: { sourceId },
   });
   if (error) return null;
   if (loading) return <Loading />;
   const source = data?.source;
-  return _.isEmpty(source) ? null : <Source source={source} />;
-};
-
-export const AuthorizedSourcesRoutes = () => (
-  <Switch>
-    <Route exact path={SOURCES_NEW} render={() => <NewSource />} />
-    <Route exact path={SOURCES} render={() => <Sources />} />
-    <Route path={SOURCE} render={() => <SourceLoader />} />
-  </Switch>
-);
-
-export const SourceRoutes = () => {
-  const authorized = useAuthorized();
-  return (
-    <Route
-      path={SOURCES}
-      render={() =>
-        authorized ? <AuthorizedSourcesRoutes /> : <Unauthorized />
-      }
+  return _.isEmpty(source) ? (
+    <Message
+      error
+      icon="warning sign"
+      header={formatMessage({
+        id: "error.header",
+        defaultMessage: "Eek! Something went wrong...",
+      })}
+      list={["404 - Not found"]}
     />
+  ) : (
+    <Source source={source} />
   );
 };
 
+export const SourceRoutes = () => (
+  <Routes>
+    <Route path={SOURCES} element={<ProtectedRoute />}>
+      <Route index element={<Sources />} />
+      <Route path="new" element={<NewSource />} />
+      <Route path=":sourceId/*" element={<SourceLoader />} />
+    </Route>
+    <Route path="*" element={null} />
+  </Routes>
+);
+
 export default SourceRoutes;

package/src/sources/components/SourceSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Form } from "semantic-ui-react";

package/src/sources/components/SourceTabs.js

@@ -1,9 +1,8 @@
-import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { Menu } from "semantic-ui-react";
-import { usePath } from "@truedat/core/hooks";
+import { useActiveRoute } from "@truedat/core/hooks";
 import {
   linkTo,
   SOURCE_EDIT,
@@ -14,20 +13,28 @@ import {
 } from "@truedat/core/routes";
 
 export const SourceTabs = ({ source }) => {
-  const path = usePath();
+  const sourceActive = useActiveRoute(SOURCE);
+  const sourceEditActive = useActiveRoute(SOURCE_EDIT);
+  const jobsActive = useActiveRoute(SOURCE_JOBS);
+  const jobActive = useActiveRoute(SOURCE_JOB);
+  const newJobActive = useActiveRoute(SOURCE_JOBS_NEW);
+
+  const isSourceActive = sourceActive || sourceEditActive;
+  const isJobsActive = (jobsActive || jobActive) && !newJobActive;
+
   const { id } = source;
   return (
     <>
       <Menu attached="top" secondary pointing tabular>
         <Menu.Item
-          active={path === SOURCE || path === SOURCE_EDIT}
+          active={isSourceActive}
           as={Link}
           to={linkTo.SOURCE({ sourceId: id })}
         >
           <FormattedMessage id="source.config.label" />
         </Menu.Item>
         <Menu.Item
-          active={path === SOURCE_JOBS || path === SOURCE_JOB}
+          active={isJobsActive}
           as={Link}
           to={linkTo.SOURCE_JOBS({ sourceId: id })}
         >
@@ -35,7 +42,7 @@ export const SourceTabs = ({ source }) => {
         </Menu.Item>
         {source?.active ? (
           <Menu.Item
-            active={path === SOURCE_JOBS_NEW}
+            active={newJobActive}
             as={Link}
             to={linkTo.SOURCE_JOBS_NEW({ sourceId: id })}
           >

package/src/sources/components/Sources.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { matchSorter } from "match-sorter";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button, Header, Icon, Input, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useQuery } from "@apollo/client";

package/src/sources/components/SourcesTable.js

@@ -1,8 +1,7 @@
 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 { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { useIntl } from "react-intl";
 import { DateTime } from "@truedat/core/components";