@truedat/cx 4.36.6 → 4.37.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.36.9] 2022-01-24
+
+### Changed
+
+- [TD-4125] Improvements to sources views
+
 ## [4.32.0] 2021-11-08
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/cx",
-  "version": "4.36.6",
+  "version": "4.37.0",
   "description": "Truedat Web Connectors",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -16,8 +16,8 @@
   "scripts": {
     "clean": "rimraf yarn-error.log",
     "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
-    "test": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test": "TZ=UTC jest --coverage",
+    "test:watch": "TZ=UTC jest --watch",
     "eslint": "eslint src/**",
     "eslint:fix": "eslint --fix src/**"
   },
@@ -44,7 +44,7 @@
     "jest-localstorage-mock": "^2.4.14",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "redux-saga-test-plan": "^4.0.1",
+    "redux-saga-test-plan": "^4.0.4",
     "rimraf": "^3.0.2",
     "semantic-ui-react": "^2.0.3"
   },
@@ -83,8 +83,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.36.6",
+    "@truedat/core": "4.37.0",
     "lodash": "^4.17.21",
+    "match-sorter": "^6.3.1",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
     "react-intl": "^5.20.10",
@@ -100,5 +101,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "24162cf652f85f30de8669736abc28391fd5f6a8"
+  "gitHead": "a2584d116d738be9a237f26c617e1400d4a24803"
 }

package/src/configurations/components/ConfigurationActions.js

@@ -28,7 +28,7 @@ const ModalDelete = ({ deleteConfiguration, external_id }) => (
         values={{ external_id: <i>{external_id}</i> }}
       />
     }
-    handleSubmit={() => deleteConfiguration({ external_id })}
+    onConfirm={() => deleteConfiguration({ external_id })}
   />
 );
 

package/src/configurations/components/ConfigurationCards.js

@@ -59,7 +59,7 @@ export const ConfigurationCards = ({
                     }}
                   />
                 }
-                handleSubmit={() =>
+                onConfirm={() =>
                   deleteConfiguration({
                     external_id: _.prop("external_id")(configuration),
                   })

package/src/configurations/components/__tests__/__snapshots__/ConfigurationCards.spec.js.snap

@@ -54,13 +54,13 @@ exports[`<ConfigurationCards /> matches the latest snapshot 1`] = `
               }
             />
           }
-          handleSubmit={[Function]}
           header={
             <Memo(MemoizedFormattedMessage)
               id="configurations.actions.delete.confirmation.header"
             />
           }
           icon="trash"
+          onConfirm={[Function]}
           trigger={
             <Button
               as="button"
@@ -125,13 +125,13 @@ exports[`<ConfigurationCards /> matches the latest snapshot 1`] = `
               }
             />
           }
-          handleSubmit={[Function]}
           header={
             <Memo(MemoizedFormattedMessage)
               id="configurations.actions.delete.confirmation.header"
             />
           }
           icon="trash"
+          onConfirm={[Function]}
           trigger={
             <Button
               as="button"
@@ -196,13 +196,13 @@ exports[`<ConfigurationCards /> matches the latest snapshot 1`] = `
               }
             />
           }
-          handleSubmit={[Function]}
           header={
             <Memo(MemoizedFormattedMessage)
               id="configurations.actions.delete.confirmation.header"
             />
           }
           icon="trash"
+          onConfirm={[Function]}
           trigger={
             <Button
               as="button"
@@ -267,13 +267,13 @@ exports[`<ConfigurationCards /> matches the latest snapshot 1`] = `
               }
             />
           }
-          handleSubmit={[Function]}
           header={
             <Memo(MemoizedFormattedMessage)
               id="configurations.actions.delete.confirmation.header"
             />
           }
           icon="trash"
+          onConfirm={[Function]}
           trigger={
             <Button
               as="button"
@@ -338,13 +338,13 @@ exports[`<ConfigurationCards /> matches the latest snapshot 1`] = `
               }
             />
           }
-          handleSubmit={[Function]}
           header={
             <Memo(MemoizedFormattedMessage)
               id="configurations.actions.delete.confirmation.header"
             />
           }
           icon="trash"
+          onConfirm={[Function]}
           trigger={
             <Button
               as="button"

package/src/messages/en.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 export default {
   "alert.fetchSource.failed.header": "Error retrieving source",
   "alert.signConfiguration.failed.header": "Error signing configuration",
@@ -5,21 +6,26 @@ export default {
   "configuration.props.external_id": "Id Externo",
   "configuration.search.no_results": "No configurations found",
   "configurations.actions.create": "Create",
-  "configurations.actions.delete.confirmation.content":
-    "Configuration {external_id} will be deleted. Are you sure?",
+  "configurations.actions.delete.confirmation.content": "Configuration {external_id} will be deleted. Are you sure?",
   "configurations.actions.delete.confirmation.header": "Delete Configuration",
   "configurations.actions.edit": "Edit Configuration",
-  "configurations.actions.update": "Update Configuration",
   "configurations.actions.remove": "Delete Configuration",
+  "configurations.actions.update": "Update Configuration",
   "configurations.header": "Configurations",
   "configurations.search.placeholder": "Search configurations",
   "configurations.subheader": "List of system configurations",
   "filters.source_external_id": "Source",
   "filters.source_type": "Source Type",
   "filters.type": "Type",
+  "job.pending.content": "This job has not started yet, please check again later.",
   "job.pending.header": "Job Pending",
-  "job.pending.content":
-    "This job has not started yet, please check again later.",
+  "jobType.DQ.label": "Data Quality",
+  "jobType.Metadata.label": "Catalog",
+  "jobType.Profile.label": "Profiling",
+  "jobType.catalog.label": "Catalog",
+  "jobType.label": "Type",
+  "jobType.profile.label": "Profile",
+  "jobType.quality.label": "Quality",
   "jobs.actions.create": "New Job",
   "jobs.header": "Jobs",
   "jobs.props.end_date": "Updated At",
@@ -33,33 +39,34 @@ export default {
   "jobs.search.results.empty": "No jobs found",
   "jobs.searching": "Searching...",
   "jobs.subheader": "Connectors execution by defined sources",
-  "jobType.label": "Type",
-  "jobType.catalog.label": "Catalog",
-  "jobType.quality.label": "Quality",
-  "jobType.profile.label": "Profile",
-  "jobType.Metadata.label": "Catalog",
-  "jobType.DQ.label": "Data Quality",
-  "jobType.Profile.label": "Profiling",
   "navigation.admin.configurations": "Configurations",
   "navigation.admin.jobs": "Jobs",
   "navigation.admin.sources": "Sources",
+  "source.actions.delete": "Delete source",
+  "source.actions.delete.confirmation.content": "Source {external_id} will be deleted. Are you sure?",
+  "source.actions.delete.confirmation.header": "Delete source",
+  "source.actions.disable": "Disable",
+  "source.actions.disable.confirmation.content": "Source {external_id} will be disabled. Are you sure?",
+  "source.actions.disable.confirmation.header": "Disable source",
+  "source.actions.edit": "Edit source",
+  "source.actions.enable": "Enable",
+  "source.actions.enable.confirmation.content": "Source {external_id} will be enabled. Are you sure?",
+  "source.actions.enable.confirmation.header": "Enable source",
   "source.config.label": "Configuration",
-  "source.props.external_id": "External id",
-  "source.search.no_results": "No sources found",
-  "source.search.placeholder": "Select Source",
-  "sources.actions.activate.tooltip": "Activate",
-  "sources.actions.deactivate.tooltip": "Deactivate",
+  "source.disabled": "Disabled",
+  "source.external_id": "External Id",
+  "source.latestEvent.insertedAt": "Latest event",
+  "source.latestEvent.message": "Message",
+  "source.latestEvent.type": "Event type",
+  "source.search.placeholder": "Select source",
+  "source.status": "Status",
+  "source.type": "Type",
   "sources.actions.create": "New Source",
-  "sources.actions.delete.confirmation.content":
-    "Source {external_id} will be deleted. Are you sure?",
-  "sources.actions.delete.confirmation.header": "Delete source",
-  "sources.actions.edit": "Edit source",
-  "sources.actions.remove": "Delete source",
+  "sources.count": "{count, plural, =0 {No sources found} =1 {One source found} other {# sources found}}",
   "sources.header": "Metadata Sources",
-  "sources.search.placeholder": "Search source",
+  "sources.search.placeholder": "Search sources",
   "sources.subheader": "Management of Metadata Sources",
   "type.selector.label": "Type",
   "type.selector.placeholder": "Source type (template)",
-  vault_error: "Vault error: {text}",
-  "source.deactivated": "Deactivated",
+  source: "Source",
 };

package/src/messages/es.js

@@ -1,25 +1,31 @@
+/* eslint-disable prettier/prettier */
 export default {
   "alert.fetchSource.failed.header": "Error al recuperar origen",
   "alert.signConfiguration.failed.header": "Error firmando configuración",
   "configuration.content.label": "Contenido",
   "configuration.props.external_id": "External Id",
   "configuration.search.no_results": "Ninguna configuración encontrada",
-  "configurations.actions.delete.confirmation.content":
-    "La configuración {external_id} va a ser eliminada. ¿Desea proceder?",
-  "configurations.actions.delete.confirmation.header": "Borrar Configuración",
   "configurations.actions.create": "Nueva Configuración",
+  "configurations.actions.delete.confirmation.content": "La configuración {external_id} va a ser eliminada. ¿Desea proceder?",
+  "configurations.actions.delete.confirmation.header": "Borrar Configuración",
   "configurations.actions.edit": "Editar Configuración",
-  "configurations.actions.update": "Actualizar Configuración",
   "configurations.actions.remove": "Eliminar Configuración",
+  "configurations.actions.update": "Actualizar Configuración",
   "configurations.header": "Configuraciones",
   "configurations.search.placeholder": "Buscar configuraciones",
   "configurations.subheader": "Listado de configuraciones del sistema",
   "filters.source_external_id": "Origen",
   "filters.source_type": "Tipo de Origen",
   "filters.type": "Tipo",
+  "job.pending.content": "Este job no se ha iniciado aún, por favor comprueba de nuevo más tarde",
   "job.pending.header": "Job Pendiente",
-  "job.pending.content":
-    "Este job no se ha iniciado aún, por favor comprueba de nuevo más tarde",
+  "jobType.DQ.label": "Calidad",
+  "jobType.Metadata.label": "Catálogo",
+  "jobType.Profile.label": "Perfilado",
+  "jobType.catalog.label": "Catálogo",
+  "jobType.label": "Tipo",
+  "jobType.profile.label": "Perfilado",
+  "jobType.quality.label": "Calidad",
   "jobs.actions.create": "Nuevo Job",
   "jobs.header": "Jobs",
   "jobs.props.end_date": "Última actualización",
@@ -33,33 +39,34 @@ export default {
   "jobs.search.results.empty": "Ningún job encontrado",
   "jobs.searching": "Buscando...",
   "jobs.subheader": "Ejecución de conectores según orígenes conocidos",
-  "jobType.label": "Tipo",
-  "jobType.catalog.label": "Catálogo",
-  "jobType.quality.label": "Calidad",
-  "jobType.profile.label": "Perfilado",
-  "jobType.Metadata.label": "Catálogo",
-  "jobType.DQ.label": "Calidad",
-  "jobType.Profile.label": "Perfilado",
   "navigation.admin.configurations": "Configuraciones",
   "navigation.admin.jobs": "Jobs",
   "navigation.admin.sources": "Orígenes",
+  "source.actions.delete": "Eliminar origen",
+  "source.actions.delete.confirmation.content": "El origen {external_id} va a ser eliminado. ¿Desea proceder?",
+  "source.actions.delete.confirmation.header": "Eliminar origen",
+  "source.actions.disable": "Desactivar",
+  "source.actions.disable.confirmation.content": "El origen {external_id} va a ser desactivado. ¿Desea proceder?",
+  "source.actions.disable.confirmation.header": "Desactivar origen",
+  "source.actions.edit": "Editar origen",
+  "source.actions.enable": "Activar",
+  "source.actions.enable.confirmation.content": "El origen {external_id} va a ser activado. ¿Desea proceder?",
+  "source.actions.enable.confirmation.header": "Activar origen",
   "source.config.label": "Configuración",
-  "source.props.external_id": "External id",
-  "source.search.no_results": "No se han encontrado orígenes",
+  "source.disabled": "Deshabilitado",
+  "source.external_id": "External Id",
+  "source.latestEvent.insertedAt": "Evento más reciente",
+  "source.latestEvent.message": "Detalle",
+  "source.latestEvent.type": "Tipo de evento",
   "source.search.placeholder": "Seleccionar origen",
-  "sources.actions.activate.tooltip": "Activar",
-  "sources.actions.deactivate.tooltip": "Desactivar",
+  "source.status": "Estado",
+  "source.type": "Tipo",
   "sources.actions.create": "Nuevo origen",
-  "sources.actions.delete.confirmation.content":
-    "El origen {external_id} va a ser eliminado. ¿Desea proceder?",
-  "sources.actions.delete.confirmation.header": "Eliminar origen",
-  "sources.actions.edit": "Editar origen",
-  "sources.actions.remove": "Eliminar origen",
+  "sources.count": "{count, plural, =0 {Ningún origen encontrado} =1 {un origen encontrado} other {# origenes encontrados}}",
   "sources.header": "Orígenes de metadatos",
-  "sources.search.placeholder": "Buscar origen",
+  "sources.search.placeholder": "Buscar origenes",
   "sources.subheader": "Gestión de los distintos orígenes de metadatos",
   "type.selector.label": "Tipo",
   "type.selector.placeholder": "Tipo de origen (plantilla)",
-  vault_error: "Error en Vault: {text}",
-  "source.deactivated": "Desactivado",
+  source: "Origen",
 };

package/src/sources/components/EditSource.js

@@ -14,15 +14,15 @@ export const EditSource = ({ updateSource, source, sourceLoading }) => {
     <Loading />
   ) : (
     <>
-      <SourceBreadcrumbs text={formatMessage({ id: "sources.actions.edit" })} />
+      <SourceBreadcrumbs text={formatMessage({ id: "source.actions.edit" })} />
       <Container as={Segment} text>
         <Header as="h2">
           <Icon name="plug" />
           <Header.Content>
-            <FormattedMessage id="sources.actions.edit" />
+            <FormattedMessage id="source.actions.edit" />
           </Header.Content>
         </Header>
-        <SourceForm source={source} handleSubmit={updateSource} />
+        <SourceForm source={source} onSubmit={updateSource} />
       </Container>
     </>
   );

package/src/sources/components/NewSource.js

@@ -21,7 +21,7 @@ export const NewSource = ({ createSource }) => {
             <FormattedMessage id="sources.actions.create" />
           </Header.Content>
         </Header>
-        <SourceForm handleSubmit={createSource} />
+        <SourceForm onSubmit={createSource} />
       </Container>
     </>
   );

package/src/sources/components/Source.js

@@ -18,7 +18,7 @@ export const Source = ({ source, template }) => {
         <Grid>
           <Grid.Column width={8}>
             <Header as="h2">
-              <Icon circular name="clipboard check" />
+              <Icon circular name="plug" />
               <Header.Content>
                 {source.external_id}
                 <Header.Subheader>{source.type}</Header.Subheader>
@@ -39,12 +39,12 @@ export const Source = ({ source, template }) => {
 
 Source.propTypes = {
   source: PropTypes.object.isRequired,
-  template: PropTypes.object
+  template: PropTypes.object,
 };
 
 const mapStateToProps = ({ source, templates }) => ({
   source,
-  template: _.find(_.propEq("name", source.type))(templates)
+  template: _.find(_.propEq("name", source.type))(templates),
 });
 
 export default connect(mapStateToProps)(Source);

package/src/sources/components/SourceActions.js

@@ -1,101 +1,129 @@
-import _ from "lodash/fp";
 import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import { Button } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
-import { deleteSource } from "../routines";
+import { deleteSource, disableSource, enableSource } from "../routines";
 
-const ModalDelete = ({ deleteSource, external_id }) => (
-  <ConfirmModal
-    icon="trash"
-    trigger={
-      <Button
-        icon="trash"
-        content={<FormattedMessage id="sources.actions.remove" />}
-      />
-    }
-    header={
-      <FormattedMessage id="sources.actions.delete.confirmation.header" />
-    }
-    size="small"
-    content={
-      <FormattedMessage
-        id="sources.actions.delete.confirmation.content"
-        values={{ external_id: <i>{external_id}</i> }}
-      />
-    }
-    handleSubmit={() => deleteSource({ external_id })}
-  />
-);
+export const ConfirmToggleModal = ({ onConfirm, source }) => {
+  const { formatMessage } = useIntl();
+  const { active, id, external_id } = source || {};
+  const action = active ? "disable" : "enable";
+  const icon = active ? "pause" : "play";
+  return (
+    <ConfirmModal
+      icon={icon}
+      trigger={
+        <Button
+          icon={icon}
+          content={formatMessage({ id: `source.actions.${action}` })}
+        />
+      }
+      header={formatMessage({
+        id: `source.actions.${action}.confirmation.header`,
+      })}
+      size="small"
+      content={formatMessage(
+        { id: `source.actions.${action}.confirmation.content` },
+        { external_id: <i>{external_id}</i> }
+      )}
+      onConfirm={() => onConfirm({ id })}
+    />
+  );
+};
 
-export const SourceActions = ({ deleteSource, source: { external_id } }) => {
-  const generateAvailableActions = () => {
-    const actions = {
-      edit: true,
-      delete: true,
-      run: true,
-    };
-    const contentActions = {
-      run: {
-        key: "run",
-        icon: "play",
-        text: "Run",
-        value: "run",
-        as: Link,
-        to: linkTo.SOURCE_JOBS_NEW({ external_id }),
-        selected: false,
-        active: false,
-      },
-      edit: {
-        key: "edit",
-        icon: "edit",
-        text: (
-          <FormattedMessage id="sources.actions.edit" defaultMessage="edit" />
-        ),
-        value: "edit",
-        as: Link,
-        to: linkTo.SOURCE_EDIT({ external_id }),
-        selected: false,
-        active: false,
-      },
-      delete: {
-        key: "delete",
-        icon: "trash",
-        value: "delete",
-        as: ModalDelete,
-        deleteSource,
-        external_id,
-        name,
-        selected: false,
-        active: false,
-      },
-    };
-    const availableActions = _.flow(
-      _.omitBy(_.isUndefined),
-      _.keys,
-      _.map((action) => contentActions[action])
-    )(actions);
-    return availableActions;
-  };
+ConfirmToggleModal.propTypes = {
+  source: PropTypes.object,
+  onConfirm: PropTypes.func,
+};
 
+export const ConfirmDeleteModal = ({ deleteSource, external_id }) => {
+  const { formatMessage } = useIntl();
   return (
-    <>
-      {!_.isEmpty(generateAvailableActions()) && (
-        <GroupActions availableActions={generateAvailableActions()} />
+    <ConfirmModal
+      icon="trash"
+      trigger={
+        <Button
+          icon="trash"
+          content={formatMessage({ id: "source.actions.delete" })}
+        />
+      }
+      header={formatMessage({
+        id: "source.actions.delete.confirmation.header",
+      })}
+      size="small"
+      content={formatMessage(
+        { id: "source.actions.delete.confirmation.content" },
+        { external_id: <i>{external_id}</i> }
       )}
-    </>
+      onConfirm={() => deleteSource({ external_id })}
+    />
   );
 };
 
+ConfirmDeleteModal.propTypes = {
+  deleteSource: PropTypes.func,
+  external_id: PropTypes.string,
+};
+
+export const SourceActions = ({
+  deleteSource,
+  disableSource,
+  enableSource,
+  source,
+}) => {
+  const { formatMessage } = useIntl();
+  const { external_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 }),
+  };
+  const toggle = {
+    key: "toggle",
+    value: "toggle",
+    as: ConfirmToggleModal,
+    onConfirm: active ? disableSource : enableSource,
+    source,
+  };
+  const remove = {
+    key: "delete",
+    icon: "trash",
+    value: "delete",
+    as: ConfirmDeleteModal,
+    deleteSource,
+    external_id,
+  };
+  const actions = active ? [edit, run, toggle, remove] : [edit, toggle, remove];
+
+  return <GroupActions availableActions={actions} />;
+};
+
 SourceActions.propTypes = {
   deleteSource: PropTypes.func,
+  disableSource: PropTypes.func,
+  enableSource: PropTypes.func,
   source: PropTypes.object.isRequired,
 };
 
 const mapStateToProps = ({ source }) => ({ source });
 
-export default connect(mapStateToProps, { deleteSource })(SourceActions);
+export default connect(mapStateToProps, {
+  deleteSource,
+  disableSource,
+  enableSource,
+})(SourceActions);