@truedat/cx 4.41.2 → 4.41.5

package/src/sources/components/SourceConfiguration.js

@@ -0,0 +1,60 @@
+import _ from "lodash/fp";
+import React, { 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")
+);
+
+export const SourceConfiguration = ({
+  source,
+  updateSource,
+  sourceUpdateStatus,
+}) => {
+  const [editingField, setEditingField] = useState();
+  const [sourceConfig, setSourceConfig] = useState();
+  useEffect(() => {
+    if (source) {
+      setSourceConfig(source?.config);
+    }
+  }, [source]);
+  const template = source?.template;
+  const editFunctions = {
+    onChange: (e, { name, value }) => {
+      e && e.preventDefault();
+      setSourceConfig({ ...sourceConfig, [name]: value });
+    },
+    onCancel: () => setSourceConfig(source?.config),
+    onSubmit: (field) =>
+      updateSource({
+        source: {
+          id: source?.id,
+          config: _.pick(field)(sourceConfig),
+          merge: true,
+        },
+      }),
+    editingField,
+    setEditingField,
+    updateStatus: sourceUpdateStatus,
+  };
+
+  return _.isEmpty(source) ? null : (
+    <DynamicFormViewer
+      template={template}
+      content={sourceConfig}
+      editFunctions={editFunctions}
+    />
+  );
+};
+
+SourceConfiguration.propTypes = {
+  source: PropTypes.object.isRequired,
+  sourceUpdateStatus: PropTypes.string,
+  updateSource: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = ({ sourceUpdateStatus }) => ({ sourceUpdateStatus });
+
+export default connect(mapStateToProps, { updateSource })(SourceConfiguration);

package/src/sources/components/SourceDetail.js

@@ -0,0 +1,90 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Switch, Route } from "react-router-dom";
+import { Segment } from "semantic-ui-react";
+import {
+  SOURCE_EDIT,
+  SOURCE_JOB,
+  SOURCE_JOBS_NEW,
+  SOURCE_JOBS,
+  SOURCE,
+} from "@truedat/core/routes";
+import Job from "../../jobs/components/Job";
+import JobLoader from "../../jobs/components/JobLoader";
+import SourceJobs from "../../jobs/components/SourceJobs";
+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>
+        </>
+      )}
+    />
+    <Route
+      path={SOURCE_JOBS}
+      exact
+      render={() => (
+        <>
+          <SourceTabs source={source} />
+          <Segment attached="bottom">
+            <SourceJobs source={source} />
+          </Segment>
+        </>
+      )}
+    />
+    <Route
+      path={SOURCE_EDIT}
+      exact
+      render={() => (
+        <>
+          <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>
+);
+
+SourceDetail.propTypes = {
+  source: PropTypes.object.isRequired,
+};
+
+export default SourceDetail;

package/src/sources/components/SourceForm.js

@@ -2,13 +2,16 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Button, Form, Label } from "semantic-ui-react";
-import { compose } from "redux";
-import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
-import { HistoryBackButton } from "@truedat/core/components";
-import { selectTemplate } from "@truedat/df/routines";
+import { useQuery } from "@apollo/client";
+import { HistoryBackButton, Loading } from "@truedat/core/components";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
-import DynamicSourceForm from "./DynamicSourceForm";
+import { TEMPLATES_QUERY } from "../api/queries";
+
+const DynamicForm = React.lazy(() =>
+  import("@truedat/df/components/DynamicForm")
+);
 
 const staticFields = ["external_id"];
 
@@ -29,13 +32,10 @@ const isValid = _.conforms({
 
 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,
+    templatesLoading: PropTypes.bool,
     onSubmit: PropTypes.func,
   };
 
@@ -47,7 +47,8 @@ export class SourceForm extends React.Component {
     if (!_.isEmpty(source)) {
       const template = _.find(_.propEq("name")(source.type))(templates);
       this.setState({
-        external_id: source.external_id,
+        id: source.id,
+        external_id: source.externalId,
         type: source.type,
         content: applyTemplate(template)(source.config),
         template: template,
@@ -55,22 +56,15 @@ export class SourceForm extends React.Component {
     }
   }
 
-  componentDidUpdate() {
-    const { applyTemplate, template } = this.props;
-    const { type, content } = this.state;
-
-    if (_.has("name")(template) && !_.propEq("name", type)(template))
-      this.setState({
-        type: _.prop("name")(template),
-        content: applyTemplate(content),
-        contentErrors: validateContent(template)(content),
-      });
-  }
-
   handleTemplateSelected = (e, data) => {
     const { value } = data;
-    const { selectTemplate } = this.props;
-    selectTemplate({ id: value });
+    const content = this.state.content;
+    const template = _.find(_.propEq("name", value))(this.props.templates);
+    this.setState({
+      type: value,
+      template: template,
+      content: applyTemplate(template)(content),
+    });
   };
 
   handleChange = (e, { name, value }) => {
@@ -82,7 +76,7 @@ export class SourceForm extends React.Component {
   };
 
   handleContentChange = (content) => {
-    const contentErrors = validateContent(this.props.template)(content);
+    const contentErrors = validateContent(this.state.template)(content);
     this.setState({ content, contentErrors });
   };
 
@@ -90,9 +84,13 @@ export class SourceForm extends React.Component {
 
   handleSubmit = (e) => {
     e.preventDefault();
-    const { applyTemplate, onSubmit } = this.props;
+    const { onSubmit } = this.props;
     const source = _.pick(["id", "external_id", "type"])(this.state);
-    const config = _.flow(_.prop("content"), applyTemplate)(this.state);
+    const template = this.state.template;
+    const config = _.flow(
+      _.prop("content"),
+      applyTemplate(template)
+    )(this.state);
     onSubmit({ source: { ...source, config: config } });
   };
 
@@ -100,18 +98,16 @@ export class SourceForm extends React.Component {
     const {
       intl: { formatMessage },
       source,
-      templatesLoaded,
+      templatesLoading,
       templates,
-      template,
     } = this.props;
 
-    const { external_id, content, type } = this.state;
+    const { external_id, content, template, type } = this.state;
 
-    const typeOptions = templates.map(({ name, id }, i) => ({
-      key: i,
-      value: id,
-      text: name,
-    }));
+    const typeOptions = _.flow(
+      _.map(({ id, label, name }) => ({ key: id, value: name, text: label })),
+      _.sortBy(accentInsensitivePathOrder("text"))
+    )(templates);
 
     return (
       <Form>
@@ -142,23 +138,22 @@ export class SourceForm extends React.Component {
             selection
             required
             options={typeOptions}
-            loading={!templatesLoaded}
+            loading={templatesLoading}
             onChange={this.handleTemplateSelected}
-            value={_.prop("id")(template)}
+            value={_.prop("name")(template)}
             disabled={!_.isEmpty(source)}
           />
         </Form.Field>
 
-        {type && templatesLoaded && (
+        {type && !templatesLoading && (
           <Form.Field>
             <label className="label">
               <FormattedMessage id="source.config.label" />
             </label>
-
-            <DynamicSourceForm
-              name="dynamicForm"
-              handleContentChange={this.handleContentChange}
-              dfContent={content}
+            <DynamicForm
+              onChange={this.handleContentChange}
+              content={content}
+              template={template}
             />
           </Form.Field>
         )}
@@ -180,14 +175,16 @@ export class SourceForm extends React.Component {
   }
 }
 
-const mapStateToProps = ({ templatesLoading, templates, template }) => ({
-  applyTemplate: applyTemplate(template),
-  templatesLoaded: !templatesLoading,
-  templates,
-  template,
-});
+export const SourceFormLoader = (props) => {
+  const { loading, error, data } = useQuery(TEMPLATES_QUERY, {
+    variables: { scope: "cx" },
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
+  const templates = data?.templates || [];
+  return (
+    <SourceForm templatesLoading={loading} templates={templates} {...props} />
+  );
+};
 
-export default compose(
-  injectIntl,
-  connect(mapStateToProps, { selectTemplate })
-)(SourceForm);
+export default injectIntl(SourceFormLoader);

package/src/sources/components/SourceHeader.js

@@ -0,0 +1,29 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Header, Icon, Grid } from "semantic-ui-react";
+import SourceActions from "./SourceActions";
+
+export const SourceHeader = ({ source }) =>
+  _.isEmpty(source) ? null : (
+    <Grid>
+      <Grid.Column width={8}>
+        <Header as="h2">
+          <Icon circular name="plug" />
+          <Header.Content>
+            {source.externalId}
+            <Header.Subheader>{source.type}</Header.Subheader>
+          </Header.Content>
+        </Header>
+      </Grid.Column>
+      <Grid.Column width={8} textAlign="right">
+        <SourceActions source={source} />
+      </Grid.Column>
+    </Grid>
+  );
+
+SourceHeader.propTypes = {
+  source: PropTypes.object.isRequired,
+};
+
+export default SourceHeader;

package/src/sources/components/SourceRoutes.js

@@ -1,108 +1,44 @@
 import _ from "lodash/fp";
 import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Segment } from "semantic-ui-react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
+import { Route, Switch, useParams } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import { Unauthorized, Loading } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
-import {
-  SOURCE,
-  SOURCES,
-  SOURCES_NEW,
-  SOURCE_EDIT,
-  SOURCE_JOBS_NEW,
-} from "@truedat/core/routes";
+import { SOURCE, SOURCES, SOURCES_NEW } from "@truedat/core/routes";
+import { SOURCE_QUERY } from "../api/queries";
 import NewSource from "./NewSource";
-import NewJob from "./NewJob";
-import EditSource from "./EditSource";
-import Sources from "./Sources";
-import SourceLoader from "./SourceLoader";
 import Source from "./Source";
+import Sources from "./Sources";
 
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
-);
+export const SourceLoader = () => {
+  const { sourceId } = useParams();
+  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} />;
+};
 
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
+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 = ({ source, sourceLoading, templatesLoading }) => {
+export const SourceRoutes = () => {
   const authorized = useAuthorized();
   return (
     <Route
       path={SOURCES}
       render={() =>
-        authorized ? (
-          <Switch>
-            <Route
-              exact
-              path={SOURCE_JOBS_NEW}
-              render={() => (
-                <>
-                  <SourceLoader />
-                  <NewJob />
-                </>
-              )}
-            />
-            <Route
-              exact
-              path={SOURCES_NEW}
-              render={() => (
-                <>
-                  <TemplatesLoader scope="cx" />
-                  <TemplateLoader />
-                  <NewSource />
-                </>
-              )}
-            />
-            <Route
-              exact
-              path={SOURCE_EDIT}
-              render={() => (
-                <>
-                  <TemplatesLoader scope="cx" />
-                  <SourceLoader />
-                  {!_.isEmpty(source) &&
-                    !sourceLoading &&
-                    !templatesLoading && <EditSource />}
-                </>
-              )}
-            />
-            <Route
-              exact
-              path={SOURCE}
-              render={() => (
-                <>
-                  <SourceLoader />
-                  <Segment>
-                    <TemplatesLoader scope="cx" />
-                    {!templatesLoading && <Source />}
-                  </Segment>
-                </>
-              )}
-            />
-            <Route exact path={SOURCES} render={() => <Sources />} />
-          </Switch>
-        ) : (
-          <Unauthorized />
-        )
+        authorized ? <AuthorizedSourcesRoutes /> : <Unauthorized />
       }
     />
   );
 };
 
-SourceRoutes.propTypes = {
-  source: PropTypes.object,
-  sourceLoading: PropTypes.bool,
-  templatesLoading: PropTypes.bool,
-};
-
-const mapStateToProps = ({ source, sourceLoading, templatesLoading }) => ({
-  source,
-  sourceLoading,
-  templatesLoading,
-});
-
-export default connect(mapStateToProps)(SourceRoutes);
+export default SourceRoutes;

package/src/sources/components/SourceSelector.js

@@ -1,62 +1,71 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { Form } from "semantic-ui-react";
-
-const SourcesLoader = React.lazy(() =>
-  import("@truedat/cx/sources/components/SourcesLoader")
-);
+import { useQuery } from "@apollo/client";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import { SOURCE_OPTIONS_QUERY } from "../api/queries";
 
 export const SourceSelector = ({
-  value,
-  onChange,
-  onBlur,
-  error,
   disabled,
-  sources,
+  error,
+  label,
+  onBlur,
+  onChange,
+  placeholder,
+  required,
+  value,
+  variables,
 }) => {
   const { formatMessage } = useIntl();
-  const options = _.flow(
-    _.orderBy([({ name }) => name.toLowerCase()], ["asc"]),
-    _.map(({ name: text, id: key }) => ({
-      key,
-      value: key,
-      text,
-    }))
-  )(sources);
+  const {
+    loading,
+    error: queryError,
+    data,
+  } = useQuery(SOURCE_OPTIONS_QUERY, { variables });
+  if (queryError) return null;
+  const options = loading
+    ? []
+    : _.flow(
+        _.prop("sources"),
+        _.sortBy(accentInsensitivePathOrder("externalId")),
+        _.map(({ id, externalId }) => ({
+          key: id,
+          value: id,
+          text: externalId,
+        }))
+      )(data);
   return (
-    <>
-      <SourcesLoader />
-      <Form.Dropdown
-        disabled={disabled}
-        error={error}
-        onBlur={onBlur}
-        placeholder={formatMessage({ id: "source.search.placeholder" })}
-        search
-        selection
-        options={options}
-        onChange={onChange}
-        value={value}
-      />
-    </>
+    <Form.Dropdown
+      disabled={disabled}
+      error={error}
+      label={label}
+      loading={loading}
+      onBlur={onBlur}
+      onChange={onChange}
+      options={options}
+      placeholder={
+        placeholder || formatMessage({ id: "source.search.placeholder" })
+      }
+      required={required}
+      search
+      selection
+      value={value}
+    />
   );
 };
 
 SourceSelector.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string,
-  onBlur: PropTypes.func,
-  error: PropTypes.bool,
   disabled: PropTypes.bool,
-  sources: PropTypes.array,
+  error: PropTypes.bool,
+  label: PropTypes.node,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  value: PropTypes.string,
+  variables: PropTypes.object,
 };
 
-const mapStateToProps = ({ sources }) => ({
-  sources: _.map((source) => ({ name: source.external_id, id: source.id }))(
-    sources
-  ),
-});
-
-export default connect(mapStateToProps)(SourceSelector);
+export default SourceSelector;

package/src/sources/components/SourceTabs.js

@@ -0,0 +1,54 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { Menu } from "semantic-ui-react";
+import { usePath } from "@truedat/core/hooks";
+import {
+  linkTo,
+  SOURCE_EDIT,
+  SOURCE_JOB,
+  SOURCE_JOBS_NEW,
+  SOURCE_JOBS,
+  SOURCE,
+} from "@truedat/core/routes";
+
+export const SourceTabs = ({ source }) => {
+  const path = usePath();
+  const { id } = source;
+  return (
+    <>
+      <Menu attached="top" secondary pointing tabular>
+        <Menu.Item
+          active={path === SOURCE || path === SOURCE_EDIT}
+          as={Link}
+          to={linkTo.SOURCE({ sourceId: id })}
+        >
+          <FormattedMessage id="source.config.label" />
+        </Menu.Item>
+        <Menu.Item
+          active={path === SOURCE_JOBS || path === SOURCE_JOB}
+          as={Link}
+          to={linkTo.SOURCE_JOBS({ sourceId: id })}
+        >
+          <FormattedMessage id="navigation.admin.jobs" />
+        </Menu.Item>
+        {source?.active ? (
+          <Menu.Item
+            active={path === SOURCE_JOBS_NEW}
+            as={Link}
+            to={linkTo.SOURCE_JOBS_NEW({ sourceId: id })}
+          >
+            <FormattedMessage id="jobs.actions.create" />
+          </Menu.Item>
+        ) : null}
+      </Menu>
+    </>
+  );
+};
+
+SourceTabs.propTypes = {
+  source: PropTypes.object.isRequired,
+};
+
+export default SourceTabs;