@truedat/qx 5.20.3 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "5.20.3",
+  "version": "6.0.0",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.12.2",
+    "@truedat/test": "6.0.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,7 +84,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "5.20.3",
+    "@truedat/core": "6.0.0",
     "prop-types": "^15.8.1",
     "react-hook-form": "^7.45.4",
     "react-intl": "^5.20.10",
@@ -97,5 +97,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "11ee6981b87a3c8f2b99c7101b42cafc29dc4896"
+  "gitHead": "3627c716252d2920a5b70ee1f8e84c7afd3a991a"
 }

package/src/api.js

@@ -11,6 +11,12 @@ const API_QUALITY_CONTROL_STATUS = "/api/quality_controls/:id/status";
 const API_QUALITY_CONTROL_DOMAINS = "/api/quality_controls/:id/domains";
 const API_QUALITY_CONTROL_SEARCH = "/api/quality_controls/search";
 const API_QUALITY_CONTROL_FILTERS = "/api/quality_controls/filters";
+const API_QUALITY_CONTROL_EXECUTION_GROUPS_CREATE =
+  "/api/quality_controls/execution_groups/create";
+const API_QUALITY_CONTROL_EXECUTION_GROUPS_INDEX =
+  "/api/quality_controls/execution_groups";
+const API_QUALITY_CONTROL_EXECUTION_GROUP =
+  "/api/quality_controls/execution_groups/:id";
 
 export {
   API_DATA_VIEWS,
@@ -26,4 +32,7 @@ export {
   API_QUALITY_CONTROL_DOMAINS,
   API_QUALITY_CONTROL_SEARCH,
   API_QUALITY_CONTROL_FILTERS,
+  API_QUALITY_CONTROL_EXECUTION_GROUPS_CREATE,
+  API_QUALITY_CONTROL_EXECUTION_GROUPS_INDEX,
+  API_QUALITY_CONTROL_EXECUTION_GROUP,
 };

package/src/components/executions/ExecutionGroupBreadcrumbs.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { DateTime } from "@truedat/core/components";
+import { QUALITY_CONTROLS_EXECUTION_GROUPS } from "@truedat/core/routes";
+
+export const ExecutionGroupBreadcrumbs = ({ timestamp }) => (
+  <Breadcrumb>
+    <Breadcrumb.Section as={Link} to={QUALITY_CONTROLS_EXECUTION_GROUPS}>
+      <FormattedMessage id="sidemenu.executions" />
+    </Breadcrumb.Section>
+    <Breadcrumb.Divider icon="right angle" />
+    <Breadcrumb.Section active>
+      <DateTime value={timestamp} />
+    </Breadcrumb.Section>
+  </Breadcrumb>
+);
+
+ExecutionGroupBreadcrumbs.propTypes = {
+  timestamp: PropTypes.string,
+};
+
+export default ExecutionGroupBreadcrumbs;

package/src/components/executions/ExecutionGroupContent.js

@@ -0,0 +1,42 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+
+const DynamicFormViewer = React.lazy(() =>
+  import("@truedat/df/components/DynamicFormViewer")
+);
+
+const templateFieldNames = _.flow(
+  _.prop("content"),
+  _.flatMap("fields"),
+  _.map("name")
+);
+
+export const ExecutionGroupContent = ({ content }) => {
+  const { data } = useQuery(TEMPLATES_QUERY, {
+    variables: { scope: "qe" },
+  });
+  // NOTE: We don't have the template name, so select one with fields matching content
+  const contentFieldNames = _.keys(content);
+  const matchingFieldCount = _.flow(
+    templateFieldNames,
+    _.intersection(contentFieldNames),
+    _.size
+  );
+  const template = _.flow(
+    _.propOr([], "templates"),
+    _.maxBy(matchingFieldCount)
+  )(data);
+
+  return template ? (
+    <DynamicFormViewer template={template} content={content} />
+  ) : null;
+};
+
+ExecutionGroupContent.propTypes = {
+  content: PropTypes.object,
+};
+
+export default ExecutionGroupContent;

package/src/components/executions/ExecutionGroupLink.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { DateTime } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+
+export const ExecutionGroupLink = ({ id, created }) => (
+  <Link to={linkTo.QUALITY_CONTROLS_EXECUTION_GROUP({ id })}>
+    <DateTime value={created} />
+  </Link>
+);
+
+ExecutionGroupLink.propTypes = {
+  id: PropTypes.string,
+  created: PropTypes.string,
+};
+
+export default ExecutionGroupLink;

package/src/components/executions/ExecutionGroupMessage.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Message } from "semantic-ui-react";
+
+export const ExecutionGroupMessage = ({ count, pending }) => {
+  const { formatMessage } = useIntl();
+  return pending ? (
+    <Message
+      header={formatMessage({ id: "executions.pending.header" })}
+      content={formatMessage({ id: "executions.pending.content" }, { pending })}
+    />
+  ) : (
+    <Message
+      success
+      header={formatMessage({ id: "executions.completed.header" })}
+      content={formatMessage({ id: "executions.completed.content" }, { count })}
+    />
+  );
+};
+
+ExecutionGroupMessage.propTypes = {
+  count: PropTypes.number,
+  pending: PropTypes.number,
+};
+
+export default ExecutionGroupMessage;

package/src/components/executions/ExecutionGroupsHeader.js

@@ -0,0 +1,22 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, Grid, Segment } from "semantic-ui-react";
+
+export default function ExecutionGroupsHeader({ children }) {
+  return (
+    <Segment>
+      <Grid>
+        <Grid.Column width={8}>
+          <Header as="h2">
+            <Icon circular name="tasks" />
+            <Header.Content>
+              <FormattedMessage id="sidemenu.quality_controls_execution_groups" />
+            </Header.Content>
+          </Header>
+        </Grid.Column>
+      </Grid>
+      {children}
+    </Segment>
+  );
+}

package/src/components/executions/ExecutionGroupsTable.js

@@ -0,0 +1,104 @@
+import _ from "lodash/fp";
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Table, Header, Icon } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+import { useSearchContext } from "../search/SearchContext";
+import ExecutionGroupLink from "./ExecutionGroupLink";
+
+export const HeaderRow = ({ columns }) => (
+  <Table.Row>
+    {columns.map(({ name: id, textAlign }, i) => (
+      <Table.HeaderCell key={i} textAlign={textAlign}>
+        <FormattedMessage id={id} defaultMessage={id} />
+      </Table.HeaderCell>
+    ))}
+  </Table.Row>
+);
+
+HeaderRow.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object),
+};
+
+export const ExecutionGroupRow = ({ columns, ...props }) => (
+  <Table.Row>
+    {columns.map((col, i) => (
+      <Table.Cell
+        key={i}
+        textAlign={col.textAlign}
+        content={columnDecorator(col)(props)}
+      />
+    ))}
+  </Table.Row>
+);
+
+ExecutionGroupRow.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default function ExecutionGroupsTable() {
+  const columns = [
+    {
+      name: "quality_controls.table.header.created",
+      width: 2,
+      fieldSelector: _.identity,
+      fieldDecorator: ExecutionGroupLink,
+    },
+    {
+      name: "quality_controls.table.header.pending",
+      fieldSelector: "pending_count",
+      textAlign: "right",
+      width: 1,
+    },
+    {
+      name: "quality_controls.table.header.started",
+      fieldSelector: "started_count",
+      textAlign: "right",
+      width: 1,
+    },
+    {
+      name: "quality_controls.table.header.succeded",
+      fieldSelector: "succeeded_count",
+      textAlign: "right",
+      width: 1,
+    },
+    {
+      name: "quality_controls.table.header.failed",
+      fieldSelector: "failed_count",
+      textAlign: "right",
+      width: 1,
+    },
+  ];
+
+  const { listExecutionGroups, executionGroups } = useSearchContext();
+
+  useEffect(() => {
+    listExecutionGroups();
+  }, []);
+
+  return (
+    <>
+      {!_.isEmpty(executionGroups) && (
+        <Table>
+          <Table.Header>
+            <HeaderRow columns={columns} />
+          </Table.Header>
+          <Table.Body>
+            {executionGroups?.map((props, key) => (
+              <ExecutionGroupRow key={key} columns={columns} {...props} />
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(executionGroups) && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="quality_control_execution_group.search.results.empty" />
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+}

package/src/components/executions/ExecutionStatusDecorator.js

@@ -0,0 +1,31 @@
+import _ from "lodash/fp";
+import { FormattedMessage } from "react-intl";
+import React from "react";
+import PropTypes from "prop-types";
+import { Icon } from "semantic-ui-react";
+
+const PENDING = { name: "info circle", color: "grey" };
+
+export const icons = {
+  PENDING,
+  STARTED: { name: "play circle outline", color: "green" },
+  SUCCEEDED: { name: "check circle outline", color: "green" },
+  FAILED: { name: "warning circle", color: "red" },
+};
+
+export const ExecutionStatusDecorator = (status) => {
+  const icon = _.propOr(PENDING, _.toUpper(status))(icons);
+  const messageId = "quality_control_execution_group.status." + status;
+  return (
+    <>
+      <Icon size="large" {...icon} />
+      <FormattedMessage id={messageId} />
+    </>
+  );
+};
+
+ExecutionStatusDecorator.propTypes = {
+  status: PropTypes.string,
+};
+
+export default ExecutionStatusDecorator;

package/src/components/executions/executionGroupDetail.js

@@ -0,0 +1,97 @@
+import _ from "lodash/fp";
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { useParams } from "react-router-dom";
+import { Table } from "semantic-ui-react";
+import { DateTime } from "@truedat/core/components";
+import { columnDecorator } from "@truedat/core/services";
+import { useExecutionGroupsShow } from "../../hooks/useExecutionGroups";
+import ExecutionGroupMessage from "./ExecutionGroupMessage";
+// import RuleResultDecorator from "./RuleResultDecorator";
+// import RuleImplementationResultsLink from "./RuleImplementationResultsLink";
+import ExecutionStatusDecorator from "./ExecutionStatusDecorator";
+import ExecutionGroupContent from "./ExecutionGroupContent";
+import ExecutionGroupBreadcrumbs from "./ExecutionGroupBreadcrumbs";
+
+const COLUMNS = [
+  {
+    name: "ruleImplementations.props.status",
+    fieldDecorator: ExecutionStatusDecorator,
+    fieldSelector: "status",
+  },
+  {
+    name: "ruleImplementations.props.implementation_key",
+    fieldSelector: "quality_control_name",
+    // fieldDecorator: RuleImplementationResultsLink,
+  },
+];
+
+export const ExecutionRow = ({ execution }) => (
+  <Table.Row>
+    {COLUMNS.map(({ textAlign, ...column }, i) => (
+      <Table.Cell
+        key={i}
+        content={columnDecorator(column)(execution)}
+        textAlign={textAlign}
+      />
+    ))}
+  </Table.Row>
+);
+
+ExecutionRow.propTypes = {
+  execution: PropTypes.object,
+};
+
+const isCompleted = _.flow(_.prop("_embedded.status"), (s) =>
+  _.includes(s)(["SUCCEEDED", "FAILED"])
+);
+
+export const ExecutionGroup = () => {
+  const { formatMessage } = useIntl();
+  const { id } = useParams();
+
+  const executionGroup = useExecutionGroupsShow(id);
+  const executions = executionGroup.data?.data?.executions;
+  const count = _.size(executions);
+  const pendingCount = executionGroup.data?.data?.pending_count;
+  const content = executionGroup?.data?.data?.df_content;
+
+  console.log("execution_group => ", executionGroup);
+  console.log("executions => ", executions);
+
+  return _.isEmpty(executionGroup.data) === null ? null : (
+    <>
+      <ExecutionGroupBreadcrumbs timestamp={executionGroup?.inserted_at} />
+      {_.isEmpty(content) ? null : <ExecutionGroupContent content={content} />}
+      <ExecutionGroupMessage count={count} pending={pendingCount} />
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            {COLUMNS.map(({ name: id, textAlign }, i) => (
+              <Table.HeaderCell
+                key={i}
+                content={formatMessage({ id })}
+                textAlign={textAlign}
+              />
+            ))}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {executions?.map((execution, i) => (
+            <ExecutionRow key={i} execution={execution} />
+          ))}
+        </Table.Body>
+      </Table>
+    </>
+  );
+};
+
+ExecutionGroup.propTypes = {
+  executionGroup: PropTypes.object,
+};
+
+export const mapStateToProps = ({ executionGroup }) => ({ executionGroup });
+
+export default connect(mapStateToProps)(ExecutionGroup);

package/src/components/qualityControls/ExecutionForm.js

@@ -0,0 +1,106 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { Button, Form, Header } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { TemplateSelector } from "@truedat/core/components";
+import { validateContent } from "@truedat/df/utils";
+
+const DynamicForm = React.lazy(() =>
+  import("@truedat/df/components/DynamicForm")
+);
+
+export const ExecutionForm = ({ count, onSubmit, onCancel }) => {
+  const { formatMessage } = useIntl();
+  const [content, setContent] = useState({});
+  const [template, setTemplate] = useState();
+  const [templatesLoading, setTemplatesLoading] = useState(true);
+
+  const handleContentChange = (content) => setContent(content);
+
+  const handleTemplatesLoaded = ({ templates }) => {
+    setTemplatesLoading(false);
+    if (templates?.length === 1) {
+      setTemplate(templates[0]);
+    }
+  };
+
+  const handleTemplateSelected = (e, { template }) => setTemplate(template);
+
+  const isInvalid = () =>
+    template && !_.isEmpty(validateContent(template)(content));
+
+  return (
+    <>
+      <Header
+        as="h2"
+        content={formatMessage({
+          id: "implementations.actions.execution.confirmation.header",
+        })}
+      />
+      <Form loading={templatesLoading}>
+        <TemplateSelector
+          scope="qe"
+          selectedValue={template?.id}
+          onChange={handleTemplateSelected}
+          onLoad={handleTemplatesLoaded}
+          clearable
+        />
+        {template?.id ? (
+          <>
+            <Header
+              as="h3"
+              content={formatMessage({
+                id: "implementations.actions.execution.confirmation.legend",
+              })}
+            />
+            <div
+              style={{
+                maxHeight: "calc(100vh - 20rem)",
+                overflowY: "auto",
+              }}
+            >
+              <DynamicForm
+                onChange={handleContentChange}
+                content={content}
+                template={template}
+              />
+            </div>
+          </>
+        ) : null}
+        <p>
+          {formatMessage(
+            {
+              id:
+                count === 1
+                  ? "implementation.actions.execution.confirmation.content"
+                  : "implementations.actions.execution.confirmation.content",
+            },
+            { implementations_count: count }
+          )}
+        </p>
+        <div className="actions">
+          <Button
+            secondary
+            onClick={onCancel}
+            content={formatMessage({ id: "actions.cancel" })}
+          />
+          <Button
+            primary
+            disabled={isInvalid()}
+            onClick={() => onSubmit(content)}
+            content={formatMessage({ id: "actions.create" })}
+          />
+        </div>
+      </Form>
+    </>
+  );
+};
+
+ExecutionForm.propTypes = {
+  count: PropTypes.number,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+export default ExecutionForm;

package/src/components/qualityControls/ExecutionPopup.js

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Button, Popup } from "semantic-ui-react";
+import ExecutionForm from "./ExecutionForm";
+
+export const ExecutionPopup = ({
+  disabled,
+  executionGroupLoading,
+  count,
+  onSubmit,
+  executionGroupType = "implementation",
+}) => {
+  const { formatMessage } = useIntl();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popup
+      on="click"
+      basic
+      flowing
+      onOpen={() => setOpen(true)}
+      onClose={() => false}
+      open={open}
+      position="bottom center"
+      size="small"
+      trigger={
+        <Button
+          secondary
+          disabled={disabled}
+          loading={executionGroupLoading}
+          content={formatMessage({
+            id:
+              count === 1
+                ? executionGroupType + ".actions.do_execution"
+                : executionGroupType + "s.actions.do_execution",
+          })}
+        />
+      }
+    >
+      <ExecutionForm
+        count={count}
+        onSubmit={onSubmit}
+        onCancel={() => setOpen(false)}
+      />
+    </Popup>
+  );
+};
+
+ExecutionPopup.propTypes = {
+  count: PropTypes.number,
+  disabled: PropTypes.bool,
+  executionGroupLoading: PropTypes.bool,
+  onSubmit: PropTypes.func,
+  executionGroupType: PropTypes.string,
+};
+
+const mapStateToProps = ({ executionGroupLoading }) => ({
+  executionGroupLoading,
+});
+
+export default connect(mapStateToProps)(ExecutionPopup);

package/src/components/qualityControls/QualityControlRoutes.js

@@ -3,18 +3,28 @@ import { Route, Switch } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
 import {
-  QUALITY_CONTROLS,
+  QUALITY_CONTROLS_DEPRECATED,
+  QUALITY_CONTROLS_DRAFTS,
+  QUALITY_CONTROLS_PUBLISHED,
+  QUALITY_CONTROLS_EXECUTION_GROUPS,
+  QUALITY_CONTROLS_EXECUTION_GROUP,
   QUALITY_CONTROL_NEW,
   QUALITY_CONTROL_EDIT,
   QUALITY_CONTROL_NEW_DRAFT,
   QUALITY_CONTROL,
+  QUALITY_CONTROL_HISTORY,
 } from "@truedat/core/routes";
-import { QUALITY_CONTROL_HISTORY } from "../../../../core/src/routes";
+
 import { SearchContextProvider } from "../search/SearchContext";
+import ExecutionGroupsTable from "../executions/ExecutionGroupsTable";
+import ExecutionGroupsHeader from "../executions/ExecutionGroupsHeader";
+import ExecutionGroupDetail from "../executions/executionGroupDetail";
+
 import QualityControls from "./QualityControls";
 import QualityControl from "./QualityControl";
 import QualityControlHeader from "./QualityControlHeader";
 import QualityControlHistory from "./QualityControlHistory";
+
 import NewQualityControl from "./NewQualityControl";
 import EditQualityControl from "./EditQualityControl";
 import NewDraftQualityControl from "./NewDraftQualityControl";
@@ -30,8 +40,52 @@ export default function QxRoutes() {
       <Switch>
         <Route
           exact
-          path={QUALITY_CONTROLS}
-          render={() => (authorized ? <QualityControls /> : <Unauthorized />)}
+          path={QUALITY_CONTROLS_EXECUTION_GROUPS}
+          render={() =>
+            authorized ? (
+              <ExecutionGroupsHeader>
+                <ExecutionGroupsTable />
+              </ExecutionGroupsHeader>
+            ) : (
+              <Unauthorized />
+            )
+          }
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROLS_EXECUTION_GROUP}
+          render={() =>
+            authorized ? <ExecutionGroupDetail /> : <Unauthorized />
+          }
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROLS_PUBLISHED}
+          render={() =>
+            authorized ? (
+              <QualityControls status="published" />
+            ) : (
+              <Unauthorized />
+            )
+          }
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROLS_DEPRECATED}
+          render={() =>
+            authorized ? (
+              <QualityControls status="deprecated" />
+            ) : (
+              <Unauthorized />
+            )
+          }
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROLS_DRAFTS}
+          render={() =>
+            authorized ? <QualityControls status="draft" /> : <Unauthorized />
+          }
         />
         <Route
           exact

package/src/components/qualityControls/QualityControls.js

@@ -1,28 +1,62 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import {
   Button,
+  Checkbox,
   Container,
   Header,
   Icon,
   Segment,
   Grid,
 } from "semantic-ui-react";
-import { QUALITY_CONTROL_NEW } from "@truedat/core/routes";
+import { linkTo, QUALITY_CONTROL_NEW } from "@truedat/core/routes";
 import useAuthorizedAction from "@truedat/core/hooks/useAuthorizedAction";
 import Loading from "@truedat/core/src/components/Loading";
+import { useSearchContext } from "../search/SearchContext";
 import QualityControlsSearch from "../search/QualityControlsSearch";
+import { useExecutionGroupsCreate } from "../../hooks/useExecutionGroups";
+import ExecutionPopup from "./ExecutionPopup";
 import QualityControlsTable from "./QualityControlsTable";
 
-export default function QualityControls() {
+export const QualityControls = ({ status }) => {
   const { formatMessage } = useIntl();
+  const history = useHistory();
 
-  const { data, loading } = useAuthorizedAction({
+  const { data } = useAuthorizedAction({
     action: "createQualityControls",
   });
   const canCreate = _.prop("has_any_domain")(data);
+
+  const {
+    query,
+    searchMust,
+    loadingFilters: loading,
+    canExecuteQualityControl,
+    setCanExecuteQualityControl,
+    qualityControlsActions,
+    setQualityControlsStatus,
+    qualityControls,
+  } = useSearchContext();
+
+  const { trigger: triggerCreateExecutionGroup } = useExecutionGroupsCreate();
+
+  const handleSubmit = (df_content) => {
+    triggerCreateExecutionGroup({
+      query,
+      must: searchMust,
+      df_content,
+    }).then(({ data }) => {
+      const id = _.prop("data.id")(data);
+      history.push(linkTo.QUALITY_CONTROLS_EXECUTION_GROUP({ id }));
+    });
+  };
+
+  useEffect(() => {
+    setQualityControlsStatus(status);
+  }, [status, setQualityControlsStatus]);
+
   return (
     <Segment loading={false}>
       <Header as="h2">
@@ -45,6 +79,27 @@ export default function QualityControls() {
               <Loading />
             ) : (
               <>
+                {status === "published" &&
+                _.size(qualityControls) > 0 &&
+                qualityControlsActions?.execute ? (
+                  <>
+                    <Checkbox
+                      id="execute_checkbox"
+                      className="bgOrange"
+                      toggle
+                      onChange={() =>
+                        setCanExecuteQualityControl(!canExecuteQualityControl)
+                      }
+                      checked={canExecuteQualityControl}
+                      style={{ top: "6px", marginRight: "7.5px" }}
+                    />
+                    <ExecutionPopup
+                      disabled={!canExecuteQualityControl}
+                      onSubmit={handleSubmit}
+                      executionGroupType={"quality_control"}
+                    />
+                  </>
+                ) : null}
                 {canCreate ? (
                   <Button
                     primary
@@ -60,7 +115,9 @@ export default function QualityControls() {
           </Container>
         </Grid.Column>
       </Grid>
-      <QualityControlsTable />
+      <QualityControlsTable status={status} />
     </Segment>
   );
-}
+};
+
+export default QualityControls;

package/src/components/qualityControls/QualityControlsTable.js

@@ -130,7 +130,7 @@ export default function QualityControlsTable() {
         <Header as="h4">
           <Icon name="search" />
           <Header.Content>
-            {formatMessage({ id: "ruleImplementations.search.results.empty" })}
+            {formatMessage({ id: "quality_controls.search.results.empty" })}
           </Header.Content>
         </Header>
       )}

package/src/components/search/SearchContext.js

@@ -7,6 +7,7 @@ import React, {
   useMemo,
 } from "react";
 import { useIntl } from "react-intl";
+
 import {
   toFilterValues,
   formatFilterValues,
@@ -18,6 +19,8 @@ import {
   useQualityControlsFilters,
 } from "../../hooks/useQualityControls";
 
+import { useExecutionGroupsIndex } from "../../hooks/useExecutionGroups";
+
 const SearchContext = createContext();
 
 export const SearchContextProvider = (props) => {
@@ -26,6 +29,13 @@ export const SearchContextProvider = (props) => {
   const initialSortDirection = _.prop("initialSortDirection")(props);
   const { formatMessage } = useIntl();
 
+  const [qualityControlsActions, setQualityControlsActions] = useState({});
+  const [executionGroups, setExecutionGroups] = useState([]);
+  const [qualityControlsStatus, setQualityControlsStatus] = useState();
+
+  const [canExecuteQualityControl, setCanExecuteQualityControl] =
+    useState(false);
+
   const [loadingSearch, setLoadingSearch] = useState(true);
   const [qualityControls, setQualityControls] = useState([]);
 
@@ -99,10 +109,13 @@ export const SearchContextProvider = (props) => {
     _.propOr([], activeFilterName),
     toFilterValues
   )(allActiveFilters);
-
   const searchMust = useMemo(
-    () => _.pickBy(_.negate(_.isEmpty))(allActiveFilters),
-    [allActiveFilters]
+    () => ({
+      ..._.pickBy(_.negate(_.isEmpty))(allActiveFilters),
+      status: [qualityControlsStatus],
+      ...(canExecuteQualityControl && { executable: ["true"] }),
+    }),
+    [allActiveFilters, canExecuteQualityControl, qualityControlsStatus]
   );
   const filterMust = useMemo(
     () =>
@@ -135,11 +148,21 @@ export const SearchContextProvider = (props) => {
   const { trigger: triggerSearch } = useQualityControlsSearch();
   useEffect(() => {
     setLoadingSearch(true);
-    triggerSearch({ query, must: searchMust, sort }).then(({ data }) => {
-      setQualityControls(data?.data);
-      setLoadingSearch(false);
+
+    !_.isEmpty(qualityControlsStatus) &&
+      triggerSearch({ query, must: searchMust, sort }).then(({ data }) => {
+        setQualityControlsActions(data?.actions);
+        setQualityControls(data?.data);
+        setLoadingSearch(false);
+      });
+  }, [query, searchMust, sort, triggerSearch, qualityControlsStatus]);
+
+  const { trigger: triggerListExecutionGroups } = useExecutionGroupsIndex();
+  const listExecutionGroups = () => {
+    triggerListExecutionGroups().then(({ data }) => {
+      setExecutionGroups(data?.data);
     });
-  }, [query, searchMust, sort, triggerSearch]);
+  };
 
   const context = {
     disabled: false,
@@ -160,15 +183,22 @@ export const SearchContextProvider = (props) => {
     closeFilter,
     removeFilter,
     toggleFilterValue,
+    searchMust,
     setQuery,
 
+    canExecuteQualityControl,
+    setCanExecuteQualityControl,
     qualityControls,
+    qualityControlsActions,
     loadingSearch,
+    listExecutionGroups,
+    executionGroups,
 
     sortColumn,
     sortDirection,
     setSortColumn,
     setSortDirection,
+    setQualityControlsStatus,
   };
 
   return (

package/src/hooks/useExecutionGroups.js

@@ -0,0 +1,34 @@
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import {
+  apiJson,
+  apiJsonPost,
+  apiJsonPatch,
+  apiJsonDelete,
+} from "@truedat/core/services/api";
+import {
+  API_QUALITY_CONTROL_EXECUTION_GROUPS_CREATE,
+  API_QUALITY_CONTROL_EXECUTION_GROUPS_INDEX,
+  API_QUALITY_CONTROL_EXECUTION_GROUP,
+} from "../api";
+
+export const useExecutionGroupsCreate = () => {
+  return useSWRMutations(
+    API_QUALITY_CONTROL_EXECUTION_GROUPS_CREATE,
+    (url, { arg }) => apiJsonPost(url, arg)
+  );
+};
+
+export const useExecutionGroupsIndex = () => {
+  return useSWRMutations(
+    API_QUALITY_CONTROL_EXECUTION_GROUPS_INDEX,
+    (url, { arg }) => apiJson(url, arg)
+  );
+};
+
+export const useExecutionGroupsShow = (id) => {
+  const url = compile(API_QUALITY_CONTROL_EXECUTION_GROUP)({ id });
+  const { data, error, mutate } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};