@truedat/cx 4.41.2 → 4.41.5

package/src/jobs/selectors/{getJobColumns.js → jobColumnsSelector.js}

@@ -3,61 +3,45 @@ import React from "react";
 import { createSelector } from "reselect";
 import Moment from "react-moment";
 
-const dateDecorator = date =>
+const dateDecorator = (date) =>
   date && <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />;
 
-const defaultJobColumns = [
+export const defaultJobColumns = [
   {
     name: "source.external_id",
     sort: { name: "source.external_id.sort" },
     fieldSelector: _.path("source.external_id"),
-    width: 2
+    width: 2,
   },
   {
     name: "source.type",
     sort: { name: "source.type.sort" },
-    fieldSelector: _.path("source.type"),
-    width: 2
+    width: 2,
   },
   {
     name: "type",
     sort: { name: "type.sort" },
-    fieldSelector: _.path("type"),
-    width: 2
+    width: 2,
   },
   {
     name: "status",
     sort: { name: "status.sort" },
-    fieldSelector: _.path("status"),
-    width: 2
+    width: 2,
   },
   {
     name: "message",
-    fieldSelector: _.path("message"),
-    width: 2
+    width: 2,
   },
   {
     name: "end_date",
     sort: { name: "end_date" },
     fieldDecorator: dateDecorator,
     textAlign: "center",
-    width: 2
-  }
+    width: 2,
+  },
 ];
 
-const getJobs = state => state.jobs;
-const getColumns = state => state.jobsColumns;
-
-export const getJobColumns = createSelector(
-  getColumns,
+export const jobColumnsSelector = createSelector(
+  _.prop("jobsColumns"),
   _.defaultTo(defaultJobColumns)
 );
-
-const getJobColumnNames = createSelector(getJobColumns, _.map("name"));
-
-export const getJobsRows = createSelector(
-  getJobs,
-  getJobColumnNames,
-  (jobs, columnNames) =>
-    _.map(_.pick([...columnNames, "external_id", "id"]))(jobs)
-);

package/src/jobs/selectors/jobRowsSelector.js

@@ -0,0 +1,14 @@
+import _ from "lodash/fp";
+import { createSelector } from "reselect";
+import { jobColumnsSelector } from "./jobColumnsSelector";
+
+export const jobRowsSelector = createSelector(
+  _.prop("jobs"),
+  jobColumnsSelector,
+  (jobs, jobColumns) => {
+    const columnNames = _.map("name")(jobColumns);
+    return _.map(_.pick([...columnNames, "external_id", "id", "source_id"]))(
+      jobs
+    );
+  }
+);

package/src/jobs/selectors/sourceJobColumnsSelector.js

@@ -0,0 +1,35 @@
+import _ from "lodash/fp";
+import React from "react";
+import { createSelector } from "reselect";
+import Moment from "react-moment";
+
+const dateDecorator = (date) =>
+  date && <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />;
+
+export const defaultSourceJobColumns = [
+  {
+    name: "end_date",
+    sort: { name: "end_date" },
+    fieldDecorator: dateDecorator,
+    width: 3,
+  },
+  {
+    name: "type",
+    sort: { name: "type.sort" },
+    width: 2,
+  },
+  {
+    name: "status",
+    sort: { name: "status.sort" },
+    width: 2,
+  },
+  {
+    name: "message",
+    width: 9,
+  },
+];
+
+export const sourceJobColumnsSelector = createSelector(
+  _.prop("sourceJobsColumns"),
+  _.defaultTo(defaultSourceJobColumns)
+);

package/src/messages/en.js

@@ -1,8 +1,16 @@
 /* eslint-disable prettier/prettier */
 export default {
-  "alert.fetchSource.failed.header": "Error retrieving source",
   "alert.signConfiguration.failed.header": "Error signing configuration",
+  "alert.createSource.failed.header": "Error creating source",
+  "alert.createSource.success.header": "Source created",
+  "alert.deleteSource.failed.header": "Error deleting source",
+  "alert.deleteSource.success.header": "Source deleted",
+  "alert.disableSource.failed.header": "Error disabling source",
+  "alert.disableSource.success.header": "Source disabled",
+  "alert.enableSource.failed.header": "Error enabling source",
+  "alert.enableSource.success.header": "Source enabled",
   "alert.updateSource.failed.header": "Error editing source",
+  "alert.updateSource.success.header": "Source updated",
   "configuration.content.label": "Content",
   "configuration.props.external_id": "Id Externo",
   "configuration.search.no_results": "No configurations found",

package/src/messages/es.js

@@ -1,8 +1,16 @@
 /* eslint-disable prettier/prettier */
 export default {
-  "alert.fetchSource.failed.header": "Error al recuperar origen",
   "alert.signConfiguration.failed.header": "Error firmando configuración",
+  "alert.createSource.failed.header": "Error al crear origen",
+  "alert.createSource.success.header": "Origen creado",
+  "alert.deleteSource.failed.header": "Error al borrar origen",
+  "alert.deleteSource.success.header": "Origen borrado",
+  "alert.disableSource.failed.header": "Error al deshabilitar origen",
+  "alert.disableSource.success.header": "Origen deshabilitado",
+  "alert.enableSource.failed.header": "Error al habilitar origen",
+  "alert.enableSource.success.header": "Origen habilitado",
   "alert.updateSource.failed.header": "Error al editar origen",
+  "alert.updateSource.success.header": "Origen actualizado",
   "configuration.content.label": "Contenido",
   "configuration.props.external_id": "External Id",
   "configuration.search.no_results": "Ninguna configuración encontrada",

package/src/reducers/cxMessage.js

@@ -1,11 +1,25 @@
 import { dismissAlert } from "@truedat/core/routines";
+import {
+  createSource,
+  deleteSource,
+  disableSource,
+  enableSource,
+} from "../routines";
 
 const initialState = {};
 
-const cxMessage = (state = initialState, { type }) => {
+const cxMessage = (state = initialState, { type, meta }) => {
   switch (type) {
     case dismissAlert.TRIGGER:
       return initialState;
+    case createSource.SUCCESS:
+      return { color: "green", header: "alert.createSource.success.header" };
+    case deleteSource.SUCCESS:
+      return { color: "green", header: "alert.deleteSource.success.header" };
+    case disableSource.SUCCESS:
+      return { color: "green", header: "alert.disableSource.success.header" };
+    case enableSource.SUCCESS:
+      return { color: "green", header: "alert.enableSource.success.header" };
     default:
       return state;
   }

package/src/sources/api/fragments.js

@@ -0,0 +1,48 @@
+import { gql } from "@apollo/client";
+
+export const SOURCE_DETAIL = gql`
+  fragment SourceDetail on Source {
+    id
+    externalId
+    active
+    type
+  }
+`;
+
+export const JOB_LATEST_EVENT = gql`
+  fragment JobLatestEvent on Job {
+    events(limit: 1) {
+      id
+      type
+      message
+      insertedAt
+    }
+  }
+`;
+
+export const SOURCE_CONFIG = gql`
+  fragment SourceConfig on Source {
+    config
+    jobTypes
+  }
+`;
+
+export const SOURCE_LATEST_EVENT = gql`
+  fragment SourceLatestEvent on Source {
+    events(limit: 1) {
+      id
+      type
+      message
+      insertedAt
+    }
+  }
+`;
+
+export const SOURCE_TEMPLATE = gql`
+  fragment SourceTemplate on Source {
+    template {
+      id
+      content
+    }
+  }
+`;

package/src/sources/api/mutations.js

@@ -0,0 +1,51 @@
+import { gql } from "@apollo/client";
+import { SOURCE_CONFIG, SOURCE_DETAIL, SOURCE_TEMPLATE } from "./fragments";
+
+export const CREATE_SOURCE = gql`
+  mutation CreateSource($source: CreateSourceInput!) {
+    createSource(source: $source) {
+      ...SourceDetail
+    }
+  }
+  ${SOURCE_DETAIL}
+`;
+
+export const DELETE_SOURCE = gql`
+  mutation DeleteSource($id: ID!) {
+    deleteSource(id: $id) {
+      id
+      externalId
+    }
+  }
+`;
+
+export const DISABLE_SOURCE = gql`
+  mutation DisableSource($id: ID!) {
+    disableSource(id: $id) {
+      ...SourceDetail
+    }
+  }
+  ${SOURCE_DETAIL}
+`;
+
+export const ENABLE_SOURCE = gql`
+  mutation EnableSource($id: ID!) {
+    enableSource(id: $id) {
+      ...SourceDetail
+    }
+  }
+  ${SOURCE_DETAIL}
+`;
+
+export const UPDATE_SOURCE = gql`
+  mutation UpdateSource($source: UpdateSourceInput!) {
+    updateSource(source: $source) {
+      ...SourceDetail
+      ...SourceConfig
+      ...SourceTemplate
+    }
+  }
+  ${SOURCE_DETAIL}
+  ${SOURCE_CONFIG}
+  ${SOURCE_TEMPLATE}
+`;

package/src/sources/api/queries.js

@@ -0,0 +1,52 @@
+import { gql } from "@apollo/client";
+import {
+  SOURCE_CONFIG,
+  SOURCE_DETAIL,
+  SOURCE_LATEST_EVENT,
+  SOURCE_TEMPLATE,
+} from "./fragments";
+
+export const SOURCES_QUERY = gql`
+  query Sources {
+    sources {
+      ...SourceDetail
+      ...SourceLatestEvent
+    }
+  }
+  ${SOURCE_DETAIL}
+  ${SOURCE_LATEST_EVENT}
+`;
+
+export const SOURCE_OPTIONS_QUERY = gql`
+  query SourceOptions($jobTypes: String) {
+    sources(jobTypes: $jobTypes) {
+      id
+      externalId
+    }
+  }
+`;
+
+export const SOURCE_QUERY = gql`
+  query Source($sourceId: ID!) {
+    source(id: $sourceId) {
+      ...SourceDetail
+      ...SourceConfig
+      ...SourceTemplate
+    }
+  }
+  ${SOURCE_DETAIL}
+  ${SOURCE_CONFIG}
+  ${SOURCE_TEMPLATE}
+`;
+
+export const TEMPLATES_QUERY = gql`
+  query Templates($scope: String!) {
+    templates(scope: $scope) {
+      id
+      name
+      label
+      scope
+      content
+    }
+  }
+`;

package/src/sources/api.js

@@ -1,4 +1,3 @@
 const API_SOURCE = "/api/sources/:external_id";
-const API_SOURCES = "/api/sources";
 
-export { API_SOURCE, API_SOURCES };
+export { API_SOURCE };

package/src/sources/components/EditSource.js

@@ -1,40 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Container, Header, Icon, Segment } from "semantic-ui-react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { Loading } from "@truedat/core/components";
 import { updateSource } from "../routines";
-import SourceBreadcrumbs from "./SourceBreadcrumbs";
 import SourceForm from "./SourceForm";
 
-export const EditSource = ({ updateSource, source, sourceLoading }) => {
-  const { formatMessage } = useIntl();
-  return sourceLoading ? (
-    <Loading />
-  ) : (
-    <>
-      <SourceBreadcrumbs text={formatMessage({ id: "source.actions.edit" })} />
-      <Container as={Segment} text>
-        <Header as="h2">
-          <Icon name="plug" />
-          <Header.Content>
-            <FormattedMessage id="source.actions.edit" />
-          </Header.Content>
-        </Header>
-        <SourceForm source={source} onSubmit={updateSource} />
-      </Container>
-    </>
-  );
-};
+export const EditSource = ({ updateSource, source }) => (
+  <SourceForm source={source} onSubmit={updateSource} />
+);
 
 EditSource.propTypes = {
   updateSource: PropTypes.func.isRequired,
+  source: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = ({ source, sourceLoading }) => ({
-  source,
-  sourceLoading,
-});
-
-export default connect(mapStateToProps, { updateSource })(EditSource);
+export default connect(null, { updateSource })(EditSource);

package/src/sources/components/JobForm.js

@@ -9,7 +9,7 @@ export const JobForm = ({ options, onSubmit }) => {
   const { formatMessage } = useIntl();
   return (
     <Form>
-      <Form.Group inline>
+      <Form.Group>
         <Form.Dropdown
           name="type"
           label={formatMessage({ id: "jobType.label" })}
@@ -35,7 +35,7 @@ export const JobForm = ({ options, onSubmit }) => {
 
 JobForm.propTypes = {
   options: PropTypes.array,
-  onSubmit: PropTypes.func.isRequired
+  onSubmit: PropTypes.func.isRequired,
 };
 
 export default JobForm;

package/src/sources/components/NewJob.js

@@ -2,47 +2,34 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Container, Header, Segment } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { createJob } from "../routines";
-import SourceBreadcrumbs from "./SourceBreadcrumbs";
 import JobForm from "./JobForm";
 
 export const NewJob = ({ createJob, source }) => {
   const { formatMessage } = useIntl();
-  const id = source?.external_id;
+  const id = source?.externalId;
   const options = _.flow(
-    _.prop("job_types"),
+    _.path("config.job_types"),
     _.defaultTo([]),
-    _.map(t => ({
+    _.map((t) => ({
       key: t,
       text: formatMessage({ id: `jobType.${t}.label`, defaultMessage: t }),
-      value: t
+      value: t,
     })),
     _.sortBy("text")
   )(source);
   return id && options ? (
-    <>
-      <SourceBreadcrumbs text={source?.external_id} />
-      <Container as={Segment} text>
-        <Header
-          as="h2"
-          content={formatMessage({ id: "jobs.actions.create" })}
-        />
-        <JobForm
-          options={options}
-          onSubmit={({ type }) => createJob({ id, type })}
-        />
-      </Container>
-    </>
+    <JobForm
+      options={options}
+      onSubmit={({ type }) => createJob({ id, type })}
+    />
   ) : null;
 };
 
 NewJob.propTypes = {
   source: PropTypes.object,
-  createJob: PropTypes.func.isRequired
+  createJob: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = ({ source }) => ({ source });
-
-export default connect(mapStateToProps, { createJob })(NewJob);
+export default connect(null, { createJob })(NewJob);

package/src/sources/components/Source.js

@@ -1,85 +1,21 @@
-import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { Header, Icon, Grid, Segment } from "semantic-ui-react";
-import { connect } from "react-redux";
-import { updateSourceConfig } from "../routines";
-import SourceActions from "./SourceActions";
+import { Segment } from "semantic-ui-react";
 import SourceBreadcrumbs from "./SourceBreadcrumbs";
+import SourceHeader from "./SourceHeader";
+import SourceDetail from "./SourceDetail";
 
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
-);
-
-export const Source = ({
-  source,
-  template,
-  updateSourceConfig,
-  sourceUpdateStatus,
-}) => {
-  const [editingField, setEditingField] = useState();
-  const [sourceConfig, setSourceConfig] = useState();
-  useEffect(() => {
-    if (source) {
-      setSourceConfig(source?.config);
-    }
-  }, [source]);
-  const editFunctions = {
-    onChange: (e, { name, value }) => {
-      e && e.preventDefault();
-      setSourceConfig({ ...sourceConfig, [name]: value });
-    },
-    onCancel: () => setSourceConfig(source?.config),
-    onSubmit: (field) =>
-      updateSourceConfig({
-        source: { ...source, config: _.pick(field)(sourceConfig) },
-      }),
-    editingField,
-    setEditingField,
-    updateStatus: sourceUpdateStatus,
-  };
-
-  return _.isEmpty(source) ? null : (
+export const Source = ({ source }) =>
+  source ? (
     <>
-      <SourceBreadcrumbs text={source.external_id} />
+      <SourceBreadcrumbs text={source?.externalId} />
       <Segment>
-        <Grid>
-          <Grid.Column width={8}>
-            <Header as="h2">
-              <Icon circular name="plug" />
-              <Header.Content>
-                {source.external_id}
-                <Header.Subheader>{source.type}</Header.Subheader>
-              </Header.Content>
-            </Header>
-          </Grid.Column>
-          <Grid.Column width={8} textAlign="right">
-            <SourceActions />
-          </Grid.Column>
-          <Grid.Column width={8}>
-            <DynamicFormViewer
-              template={template}
-              content={sourceConfig}
-              editFunctions={editFunctions}
-            />
-          </Grid.Column>
-        </Grid>
+        <SourceHeader source={source} />
+        <SourceDetail source={source} />
       </Segment>
     </>
-  );
-};
-
-Source.propTypes = {
-  source: PropTypes.object.isRequired,
-  sourceUpdateStatus: PropTypes.string,
-  template: PropTypes.object,
-  updateSourceConfig: PropTypes.func.isRequired,
-};
+  ) : null;
 
-const mapStateToProps = ({ source, templates, sourceUpdateStatus }) => ({
-  source,
-  template: _.find(_.propEq("name", source.type))(templates),
-  sourceUpdateStatus,
-});
+Source.propTypes = { source: PropTypes.object };
 
-export default connect(mapStateToProps, { updateSourceConfig })(Source);
+export default Source;

package/src/sources/components/SourceActions.js

@@ -10,7 +10,7 @@ import { deleteSource, disableSource, enableSource } from "../routines";
 
 export const ConfirmToggleModal = ({ onConfirm, source }) => {
   const { formatMessage } = useIntl();
-  const { active, id, external_id } = source || {};
+  const { active, id, externalId } = source || {};
   const action = active ? "disable" : "enable";
   const icon = active ? "pause" : "play";
   return (
@@ -28,7 +28,7 @@ export const ConfirmToggleModal = ({ onConfirm, source }) => {
       size="small"
       content={formatMessage(
         { id: `source.actions.${action}.confirmation.content` },
-        { external_id: <i>{external_id}</i> }
+        { external_id: <i>{externalId}</i> }
       )}
       onConfirm={() => onConfirm({ id })}
     />
@@ -40,7 +40,7 @@ ConfirmToggleModal.propTypes = {
   onConfirm: PropTypes.func,
 };
 
-export const ConfirmDeleteModal = ({ deleteSource, external_id }) => {
+export const ConfirmDeleteModal = ({ deleteSource, externalId, id }) => {
   const { formatMessage } = useIntl();
   return (
     <ConfirmModal
@@ -57,16 +57,17 @@ export const ConfirmDeleteModal = ({ deleteSource, external_id }) => {
       size="small"
       content={formatMessage(
         { id: "source.actions.delete.confirmation.content" },
-        { external_id: <i>{external_id}</i> }
+        { external_id: <i>{externalId}</i> }
       )}
-      onConfirm={() => deleteSource({ external_id })}
+      onConfirm={() => deleteSource({ id })}
     />
   );
 };
 
 ConfirmDeleteModal.propTypes = {
   deleteSource: PropTypes.func,
-  external_id: PropTypes.string,
+  externalId: PropTypes.string,
+  id: PropTypes.number,
 };
 
 export const SourceActions = ({
@@ -76,22 +77,14 @@ export const SourceActions = ({
   source,
 }) => {
   const { formatMessage } = useIntl();
-  const { external_id, active } = source || {};
+  const { externalId, id, active } = source || {};
   const edit = {
     key: "edit",
     icon: "edit",
     text: formatMessage({ id: "source.actions.edit" }),
     value: "edit",
     as: Link,
-    to: linkTo.SOURCE_EDIT({ external_id }),
-  };
-  const run = {
-    key: "run",
-    icon: "sync",
-    text: "Run",
-    value: "run",
-    as: Link,
-    to: linkTo.SOURCE_JOBS_NEW({ external_id }),
+    to: linkTo.SOURCE_EDIT({ sourceId: id }),
   };
   const toggle = {
     key: "toggle",
@@ -106,9 +99,10 @@ export const SourceActions = ({
     value: "delete",
     as: ConfirmDeleteModal,
     deleteSource,
-    external_id,
+    externalId,
+    id,
   };
-  const actions = active ? [edit, run, toggle, remove] : [edit, toggle, remove];
+  const actions = [edit, toggle, remove];
 
   return <GroupActions availableActions={actions} />;
 };
@@ -120,9 +114,7 @@ SourceActions.propTypes = {
   source: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = ({ source }) => ({ source });
-
-export default connect(mapStateToProps, {
+export default connect(null, {
   deleteSource,
   disableSource,
   enableSource,

package/src/sources/components/SourceBreadcrumbs.js

@@ -16,7 +16,7 @@ export const SourceBreadcrumbs = ({ text }) => (
 );
 
 SourceBreadcrumbs.propTypes = {
-  text: PropTypes.string
+  text: PropTypes.string,
 };
 
 export default SourceBreadcrumbs;