@truedat/dq 7.10.4 → 7.11.1

package/src/components/ImplementationsUploadJobs.js

@@ -0,0 +1,128 @@
+import _ from "lodash/fp";
+import moment from "moment";
+import {
+  Header,
+  Icon,
+  Segment,
+  Dimmer,
+  Loader,
+  Table,
+} from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router";
+import { useImplementationsUploadJobs } from "../hooks/useImplementations";
+import { linkTo } from "@truedat/core/routes";
+import { StatusPill, ResponseCell } from "./implementationsUploadJobParser";
+
+import ImplementationUploadJobBreadcrumbs from "./ImplementationUploadJobBreadcrumbs";
+
+export default function ImplementationsUploadJobs() {
+  const { formatMessage } = useIntl();
+  const { data, loading } = useImplementationsUploadJobs();
+  const jobs = data?.data;
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <ImplementationUploadJobBreadcrumbs />
+      <Segment>
+        <Header as="h2">
+          <Icon
+            circular
+            name={formatMessage({
+              id: "implementations.bulkUpload.jobs.header.icon",
+              defaultMessage: "cogs",
+            })}
+          />
+          <Header.Content>
+            <FormattedMessage id="implementations.bulkUpload.jobs.header" />
+            <Header.Subheader>
+              <FormattedMessage id="implementations.bulkUpload.jobs.subheader" />
+            </Header.Subheader>
+          </Header.Content>
+        </Header>
+        <Dimmer.Dimmable dimmed={loading}>
+          <Segment attached="bottom">
+            {jobs ? (
+              <Table selectable>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell>
+                      <FormattedMessage
+                        id="implementations.bulkUpload.job.table.filename"
+                        defaultMessage="Filename"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <FormattedMessage
+                        id="implementations.bulkUpload.job.table.status"
+                        defaultMessage="Status"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <FormattedMessage
+                        id="implementations.bulkUpload.job.table.response"
+                        defaultMessage="Response"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <FormattedMessage
+                        id="implementations.bulkUpload.job.table.latest_event_at"
+                        defaultMessage="Latest Event"
+                      />
+                    </Table.HeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {_.isArray(jobs) && !_.isEmpty(jobs) ? (
+                    jobs.map((job, idx) => (
+                      <Table.Row
+                        key={idx}
+                        style={{ cursor: "pointer" }}
+                        onClick={() =>
+                          navigate(
+                            linkTo.IMPLEMENTATIONS_UPLOAD_JOB({ id: job.id })
+                          )
+                        }
+                      >
+                        <Table.Cell>{job.filename}</Table.Cell>
+                        <Table.Cell>
+                          <StatusPill status={job.latest_status} />
+                        </Table.Cell>
+                        <Table.Cell>
+                          <ResponseCell
+                            response={job.latest_event_response}
+                            status={job.latest_status}
+                          />
+                        </Table.Cell>
+                        <Table.Cell>
+                          {job.latest_event_at
+                            ? moment(job.latest_event_at).fromNow()
+                            : ""}
+                        </Table.Cell>
+                      </Table.Row>
+                    ))
+                  ) : (
+                    <Table.Row>
+                      <Table.Cell colSpan={5}>
+                        <FormattedMessage
+                          id="implementations.bulkUpload.job.table.no_jobs"
+                          defaultMessage="No jobs found."
+                        />
+                      </Table.Cell>
+                    </Table.Row>
+                  )}
+                </Table.Body>
+              </Table>
+            ) : null}
+            {loading ? (
+              <Dimmer active inverted>
+                <Loader />
+              </Dimmer>
+            ) : null}
+          </Segment>
+        </Dimmer.Dimmable>
+      </Segment>
+    </>
+  );
+}

package/src/components/RuleFormImplementations.js

@@ -3,21 +3,40 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Container } from "semantic-ui-react";
 import { getLinkedImplementationsToRulesColumns } from "../selectors";
+import {
+  useRuleImplementationSearch,
+  useRuleImplementationFilters,
+} from "../hooks/useImplementations";
 import RuleImplementationsTable from "./RuleImplementationsTable";
 import RuleImplementationActions from "./RuleImplementationActions";
+import { SearchContextProvider } from "@truedat/core/search/SearchContext";
 
-export const RuleFormImplementations = ({ rule, columns }) =>
-  _.isEmpty(rule) ? null : (
-    <Container fluid>
-      <div className="inline">
-        <div className="implementation-actions">
-          <RuleImplementationActions />
+export const RuleFormImplementations = ({ rule, columns }) => {
+  const searchProps = {
+    initialSortColumn: "implementation_key.raw",
+    initialSortDirection: "ascending",
+    useSearch: useRuleImplementationSearch,
+    useFilters: useRuleImplementationFilters,
+    pageSize: 20,
+    defaultFilters: {
+      rule_id: rule?.id,
+      "mustnot.status": ["versioned"],
+    },
+  };
+
+  return _.isEmpty(rule) ? null : (
+    <SearchContextProvider {...searchProps}>
+      <Container fluid>
+        <div className="inline">
+          <div className="implementation-actions">
+            <RuleImplementationActions />
+          </div>
         </div>
-      </div>
-      <RuleImplementationsTable columns={columns} />
-    </Container>
+        <RuleImplementationsTable columns={columns} />
+      </Container>
+    </SearchContextProvider>
   );
-
+};
 const mapStateToProps = ({ rule, ...state }) => ({
   rule,
   columns: getLinkedImplementationsToRulesColumns(state),

package/src/components/RuleImplementationActions.js

@@ -1,18 +1,20 @@
-import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { connect } from "react-redux";
 import { Link } from "react-router";
 import { useParams } from "react-router";
 import { Button } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 
-const RuleImplementationActions = ({
-  canCreate,
-  canCreateRaw,
-  canCreateBasic,
-}) => {
+const RuleImplementationActions = () => {
   const { formatMessage } = useIntl();
   const params = useParams();
+  const { searchData } = useSearchContext();
+
+  const implementationActions = searchData?._actions;
+  const canCreate = !!implementationActions?.create;
+  const canCreateRaw = !!implementationActions?.createRaw;
+  const canCreateBasic = !!implementationActions?.createBasic;
+
   return (
     <>
       {canCreateBasic && (
@@ -46,16 +48,4 @@ const RuleImplementationActions = ({
   );
 };
 
-RuleImplementationActions.propTypes = {
-  canCreate: PropTypes.bool,
-  canCreateRaw: PropTypes.bool,
-  canCreateBasic: PropTypes.bool,
-};
-
-const mapStateToProps = ({ implementationActions }) => ({
-  canCreate: !!implementationActions?.create,
-  canCreateRaw: !!implementationActions?.createRaw,
-  canCreateBasic: !!implementationActions?.createBasic,
-});
-
-export default connect(mapStateToProps)(RuleImplementationActions);
+export default RuleImplementationActions;

package/src/components/RuleImplementationsActions.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { Button, Checkbox } from "semantic-ui-react";
 import { Link } from "react-router";
 import { useIntl } from "react-intl";
@@ -8,31 +7,32 @@ import {
   IMPLEMENTATION_NEW,
   IMPLEMENTATION_NEW_RAW,
 } from "@truedat/core/routes";
-import { getImplementationsExecution } from "../selectors";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import {
   addImplementationFilter,
   toggleImplementationFilterValue,
   removeImplementationFilter,
-  createExecutionGroup,
 } from "../routines";
 import ExecutionPopup from "./ExecutionPopup";
 import RuleImplementationsOptions from "./RuleImplementationsOptions";
 
 export const RuleImplementationsActions = ({
-  actions,
-  addImplementationFilter,
-  createExecutionGroup,
   executeImplementationsOn,
-  implementationQuery,
-  implementationsExecution,
-  removeImplementationFilter,
-  ruleImplementationCount,
-  ruleImplementationsLoading,
   selectedImplementations,
   setMode,
-  toggleImplementationFilterValue,
 }) => {
   const { formatMessage } = useIntl();
+  const {
+    searchData,
+    count: ruleImplementationCount,
+    loading: ruleImplementationsLoading,
+    filterParams: implementationQuery,
+  } = useSearchContext();
+
+  const actions = searchData?._actions;
+  const canUploadResults = !!actions?.uploadResults;
+  const canExecute = !!actions?.execute;
+
   const showExecutableInfo = () => {
     addImplementationFilter({ filter: "executable" });
     toggleImplementationFilterValue({
@@ -52,15 +52,14 @@ export const RuleImplementationsActions = ({
 
   const handleSubmit = (df_content) => {
     const query = _.isEmpty(selectedImplementations)
-      ? implementationQuery
+      ? _.omit(["sort", "page", "size"])(implementationQuery)
       : { filters: { id: selectedImplementations } };
     createExecutionGroup({ ...query, df_content });
   };
 
-  const canUploadResults = !!actions?.uploadResults;
   return (
     <div style={{ float: "right" }}>
-      {implementationsExecution && actions?.execute ? (
+      {canExecute ? (
         <>
           <Checkbox
             id="execute_checkbox"
@@ -108,30 +107,9 @@ export const RuleImplementationsActions = ({
 };
 
 RuleImplementationsActions.propTypes = {
-  actions: PropTypes.object,
-  addImplementationFilter: PropTypes.func,
-  createExecutionGroup: PropTypes.func,
   executeImplementationsOn: PropTypes.bool,
-  implementationQuery: PropTypes.object,
-  implementationsExecution: PropTypes.bool,
-  removeImplementationFilter: PropTypes.func,
-  ruleImplementationCount: PropTypes.number,
-  ruleImplementationsLoading: PropTypes.bool,
   selectedImplementations: PropTypes.array,
   setMode: PropTypes.func,
-  toggleImplementationFilterValue: PropTypes.func,
 };
 
-const mapStateToProps = (state) => ({
-  ruleImplementationCount: state.ruleImplementationCount,
-  implementationsExecution: getImplementationsExecution(state),
-  ruleImplementationsLoading: state.ruleImplementationsLoading,
-  actions: state.implementationsActions,
-});
-
-export default connect(mapStateToProps, {
-  addImplementationFilter,
-  toggleImplementationFilterValue,
-  removeImplementationFilter,
-  createExecutionGroup,
-})(RuleImplementationsActions);
+export default RuleImplementationsActions;

package/src/components/RuleImplementationsDownload.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Dropdown } from "semantic-ui-react";
 import { useIntl } from "react-intl";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { downloadImplementations } from "../routines";
 
 const staticHeaderLabels = [
@@ -35,12 +35,18 @@ const staticContentLabels = [
   "executable.false",
 ];
 
-export const RuleImplementationsDownload = ({
-  downloadImplementations,
-  ruleImplementationsDownloading,
-  ruleImplementations,
-}) => {
+export const RuleImplementationsDownload = () => {
+  const dispatch = useDispatch();
   const { formatMessage, locale } = useIntl();
+  const ruleImplementationsDownloading = useSelector(
+    (state) => state.ruleImplementationsDownloading
+  );
+
+  const {
+    loading: ruleImplementationsLoading,
+    filterParams: searchParams,
+    searchData,
+  } = useSearchContext();
 
   const headerLabels = _.flow(
     _.map((l) => [l, formatMessage({ id: `ruleImplementations.props.${l}` })]),
@@ -52,9 +58,9 @@ export const RuleImplementationsDownload = ({
     _.fromPairs
   )(staticContentLabels);
 
-  const isDisabled = _.isEmpty(ruleImplementations);
+  const isEmpty = _.isEmpty(searchData?.data);
 
-  return (
+  return !ruleImplementationsLoading && !isEmpty ? (
     <Dropdown.Item
       icon="download"
       content={
@@ -62,32 +68,21 @@ export const RuleImplementationsDownload = ({
           <span>
             {formatMessage({ id: "implementations.actions.download.tooltip" })}
           </span>
-          {isDisabled && (
-            <p className="menu-item-description">
-              {formatMessage({ id: "implementations.actions.download.empty" })}
-            </p>
-          )}
         </>
       }
       onClick={() =>
-        downloadImplementations({ contentLabels, headerLabels, lang: locale })
+        dispatch(
+          downloadImplementations({
+            contentLabels,
+            headerLabels,
+            searchParams,
+            lang: locale,
+          })
+        )
       }
-      disabled={isDisabled || ruleImplementationsDownloading}
+      disabled={ruleImplementationsDownloading}
     />
-  );
+  ) : null;
 };
 
-RuleImplementationsDownload.propTypes = {
-  downloadImplementations: PropTypes.func,
-  ruleImplementationsDownloading: PropTypes.bool,
-  ruleImplementations: PropTypes.array,
-};
-
-const mapStateToProps = _.pick([
-  "ruleImplementationsDownloading",
-  "ruleImplementations",
-]);
-
-export default connect(mapStateToProps, {
-  downloadImplementations,
-})(RuleImplementationsDownload);
+export default RuleImplementationsDownload;

package/src/components/RuleImplementationsDownloadXlsx.js

@@ -0,0 +1,47 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Dropdown } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { useImplementationsDownload } from "../hooks/useImplementations";
+
+export const RuleImplementationsDownloadXlsx = () => {
+  const { formatMessage, locale } = useIntl();
+
+  const {
+    loading: ruleImplementationsLoading,
+    filterParams: searchParams,
+    searchData,
+  } = useSearchContext();
+
+  const {
+    trigger: triggerDownload,
+    isMutating: ruleImplementationsDownloading,
+  } = useImplementationsDownload();
+
+  const isEmpty = _.isEmpty(searchData?.data);
+
+  return !ruleImplementationsLoading && !isEmpty ? (
+    <Dropdown.Item
+      icon="download"
+      content={
+        <>
+          <span>
+            {formatMessage({
+              id: "implementations.actions.downloadXlsx.tooltip",
+            })}
+          </span>
+        </>
+      }
+      onClick={() =>
+        triggerDownload({
+          ...searchParams,
+          lang: locale,
+        })
+      }
+      disabled={ruleImplementationsDownloading}
+    />
+  ) : null;
+};
+
+export default RuleImplementationsDownloadXlsx;

package/src/components/RuleImplementationsLabelResults.js

@@ -1,54 +1,45 @@
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import { Label } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 
 export const RuleImplementationsLabelResults = ({
   executeImplementationsOn,
   implementationsToExecute,
-  ruleImplementationCount,
-  ruleImplementationsLoading,
-}) => (
-  <>
-    <Label className="rules-label-results">
-      {ruleImplementationsLoading ? (
-        <FormattedMessage id="ruleImplementations.searching" />
-      ) : (
-        <FormattedMessage
-          id="ruleImplementations.retrieved.results"
-          values={{ count: ruleImplementationCount }}
-        />
-      )}
-    </Label>
-    {!ruleImplementationsLoading && executeImplementationsOn && (
+}) => {
+  const { loading, count } = useSearchContext();
+  return (
+    <>
       <Label className="rules-label-results">
-        <FormattedMessage
-          id="implementations.execute.filtered"
-          values={{
-            count:
-              implementationsToExecute == 0
-                ? ruleImplementationCount
-                : implementationsToExecute,
-          }}
-        />
+        {loading ? (
+          <FormattedMessage id="ruleImplementations.searching" />
+        ) : (
+          <FormattedMessage
+            id="ruleImplementations.retrieved.results"
+            values={{ count }}
+          />
+        )}
       </Label>
-    )}
-  </>
-);
+      {!loading && executeImplementationsOn && (
+        <Label className="rules-label-results">
+          <FormattedMessage
+            id="implementations.execute.filtered"
+            values={{
+              count:
+                implementationsToExecute == 0
+                  ? count
+                  : implementationsToExecute,
+            }}
+          />
+        </Label>
+      )}
+    </>
+  );
+};
 
 RuleImplementationsLabelResults.propTypes = {
   executeImplementationsOn: PropTypes.bool,
   implementationsToExecute: PropTypes.number,
-  ruleImplementationCount: PropTypes.number,
-  ruleImplementationsLoading: PropTypes.bool,
 };
 
-const mapStateToProps = ({
-  ruleImplementationCount,
-  ruleImplementationsLoading,
-}) => ({
-  ruleImplementationCount,
-  ruleImplementationsLoading,
-});
-
-export default connect(mapStateToProps)(RuleImplementationsLabelResults);
+export default RuleImplementationsLabelResults;

package/src/components/RuleImplementationsOptions.js

@@ -1,17 +1,19 @@
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { Dropdown } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { Link } from "react-router";
 import { IMPLEMENTATION_NEW_BASIC } from "@truedat/core/routes";
-import RuleImplementationsDownload from "./RuleImplementationsDownload";
+
+import RuleImplementationsDownloadXlsx from "./RuleImplementationsDownloadXlsx";
 import RuleResultsUpload from "./RuleResultsUpload";
 import ImplementationsUploadButton from "./ImplementationsUploadButton";
 
 export const RuleImplementationsOptions = ({
-  loading,
   canUploadResults,
   canCreateBasicImplementations,
 }) => {
+  const [loading, setDownloading] = useState(false);
   const { formatMessage } = useIntl();
   return (
     <Dropdown
@@ -34,7 +36,7 @@ export const RuleImplementationsOptions = ({
             onClick={(e) => e.stopPropagation()}
           />
         ) : null}
-        <RuleImplementationsDownload />
+        <RuleImplementationsDownloadXlsx setDownloading={setDownloading} />
         <ImplementationsUploadButton />
         {canUploadResults ? <RuleResultsUpload /> : null}
       </Dropdown.Menu>

package/src/components/RuleImplementationsTable.js

@@ -5,9 +5,9 @@ import { connect } from "react-redux";
 import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
 import { Checkbox, Table, Header, Icon } from "semantic-ui-react";
 import { useIntl } from "react-intl";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { sortImplementations } from "../routines";
 import RuleImplementationRow from "./RuleImplementationRow";
-
 export const RuleImplementationsTable = ({
   addAll,
   checkedAll,
@@ -16,18 +16,23 @@ export const RuleImplementationsTable = ({
   implementationsSort,
   sortImplementations,
   columns,
-  ruleImplementations,
   ruleImplementationsLoading,
   isRowChecked,
 }) => {
+  const { searchData } = useSearchContext();
+
   const { formatMessage } = useIntl();
+
   const [sortedColumn, setColumn] = useState(
     _.prop("column")(getSortInfo(implementationsSort))
   );
+
   const [direction, setDirection] = useState(
     _.prop("direction")(getSortInfo(implementationsSort))
   );
 
+  const ruleImplementations = searchData?.data;
+
   const validColumns = _.reject(
     ({ hideOn }) => _.isFunction(hideOn) && hideOn(ruleImplementations)
   )(columns);
@@ -126,7 +131,6 @@ RuleImplementationsTable.propTypes = {
   sortImplementations: PropTypes.func,
   ruleImplementations: PropTypes.array,
   columns: PropTypes.array,
-  implementationContext: PropTypes.string,
 };
 
 const mapStateToProps = (state, props) => ({

package/src/components/RuleRoutes.js

@@ -5,7 +5,7 @@ import { Routes, Route } from "react-router";
 import { useParams } from "react-router";
 import { connect } from "react-redux";
 import { Segment } from "semantic-ui-react";
-import { ProtectedRoute, Loader } from "@truedat/core/router";
+import { Loader } from "@truedat/core/router";
 import {
   RULE,
   RULE_EDIT,
@@ -24,7 +24,6 @@ import Rule from "./Rule";
 import RuleCrumbs from "./RuleCrumbs";
 import RuleEvents from "./RuleEvents";
 import RuleFormImplementations from "./RuleFormImplementations";
-import RuleImplementationsFromRuleLoader from "./RuleImplementationsFromRuleLoader";
 import RuleLoader from "./RuleLoader";
 import RuleProperties from "./RuleProperties";
 import RuleSubscriptionLoader from "./RuleSubscriptionLoader";
@@ -67,7 +66,6 @@ export const RuleRoutes = ({
                   <>
                     <RuleSubscriptionLoader />
                     <QualityTemplatesLoader />
-                    <RuleImplementationsFromRuleLoader />
                   </>
                 }
               />
@@ -108,7 +106,6 @@ export const RuleRoutes = ({
                   loaders={
                     <>
                       <RuleSubscriptionLoader />
-                      <RuleImplementationsFromRuleLoader />
                     </>
                   }
                 />