@truedat/qx 7.0.7 → 7.1.0

package/src/components/qualityControls/QualityControlEditor.js

@@ -1,25 +1,21 @@
 import _ from "lodash/fp";
-import React, { Fragment } from "react";
+import React, { useState, Fragment } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { useQuery } from "@apollo/client";
-import { Button, Container, Divider, Form } from "semantic-ui-react";
+import { Button, Container, Dropdown, Divider, Form } from "semantic-ui-react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import {
   ConfirmModal,
   DomainSelector,
   FieldLabel,
 } from "@truedat/core/components";
-import { lowerDeburrTrim } from "@truedat/core/services/sort";
 import useActionDomains from "@truedat/core/hooks/useActionDomains";
-import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
-import QxContext from "@truedat/qx/components/QxContext";
-import { useDataViews } from "@truedat/qx/hooks/useDataViews";
-import { useFunctions } from "@truedat/qx/hooks/useFunctions";
-import ResourceSelector from "@truedat/qx/components/common/ResourceSelector";
-import { Clauses } from "@truedat/qx/components/common/expressions";
-import { fieldsFromResource } from "@truedat/qx/components/dataViews/queryableFunctions";
-import ResultType from "./ResultType";
+import ScoreCriteria, {
+  defaultForMode as defaultScoreCriteriaForMode,
+} from "./ScoreCriteria";
+import ControlProperties, {
+  defaultForMode as defaultControlPropertiesForMode,
+} from "./ControlProperties";
 
 const SelectableDynamicForm = React.lazy(() =>
   import("@truedat/df/components/SelectableDynamicForm")
@@ -28,7 +24,7 @@ const SourceSelector = React.lazy(() =>
   import("@truedat/cx/sources/components/SourceSelector")
 );
 
-export default function QualityControlEditor({
+export default function  QualityControlEditor({
   value,
   onPublish,
   onSave,
@@ -37,6 +33,7 @@ export default function QualityControlEditor({
   isSubmitting,
 }) {
   const { formatMessage } = useIntl();
+  const [validDfContent, setValidDfContent] = useState(false);
   const { data: publishDomainsData, loading: loadingDomains } =
     useActionDomains({
       action: "publishQualityControls",
@@ -46,80 +43,88 @@ export default function QualityControlEditor({
     mode: "onTouched",
     defaultValues: value,
   });
-  const {
-    control,
-    handleSubmit,
-    formState,
-    watch,
-    setValue,
-    setError,
-    clearErrors,
-  } = form;
+  const { control, handleSubmit, formState, watch, setValue } = form;
   const { isDirty, isValid } = formState;
 
-  const { data, loading: dataViewsLoading } = useDataViews();
-  const { data: functionsData, loading: functionsLoading } = useFunctions();
-  const { data: referenceDatasetsData, loading: referenceDatasetsLoading } =
-    useQuery(REFERENCE_DATASETS_HEADERS_QUERY);
-
-  const loading =
-    dataViewsLoading || functionsLoading || referenceDatasetsLoading;
-
   const submitLoading = isSubmitting || loadingDomains;
 
-  const dataViews = _.orderBy(["id"], ["asc"])(data?.data);
-  const functions = functionsData?.data;
-  const referenceDatasets = _.flow(
-    _.getOr([], "referenceDatasets"),
-    _.sortBy([({ name }) => lowerDeburrTrim(name), "name"]),
-    _.map((row) => ({ ...row, id: Number(row?.id) }))
-  )(referenceDatasetsData);
-
-  const context = {
-    dataViews,
-    referenceDatasets,
-    functions,
-  };
-
   if (!value) return null;
 
   const formData = watch();
 
-  const {
-    resource,
-    name,
-    source_id: sourceId,
-    df_content: dfContent,
-    domain_ids: domainIds,
-  } = formData;
+  const { dynamic_content: dfContent, domain_ids: domainIds } = formData;
 
-  const allowedToPublish = _.isEmpty(domainIds)
-    ? !_.isEmpty(publishDomains)
-    : _.every((domainId) => _.find({ id: `${domainId}` })(publishDomains))(
-        domainIds
-      );
+  const allowedToPublish = _.every((domainId) =>
+    _.find({ id: `${domainId}` })(publishDomains)
+  )(domainIds);
 
   const setDfContent = ({ content, valid }) => {
-    clearErrors("df_content");
-    if (!_.isEmpty(valid)) {
-      setError("df_content", { type: "invalidDfContent" });
-      setValue("df_content", content);
-    } else {
-      setValue("df_content", content, {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-    }
+    setValue("dynamic_content", content, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setValidDfContent(_.isEmpty(valid));
   };
-  const fields = fieldsFromResource(
-    _.prop("embedded.name")(resource),
-    0
-  )({ resource });
+
+  const controlModeOptions = _.map((v) => ({
+    key: v,
+    value: v,
+    text: formatMessage({ id: `quality_control.control_mode.${v}` }),
+  }))(["percentage", "deviation", "error_count"]);
 
   return (
     <Fragment>
       <FormProvider {...form}>
-        <Form loading={loading}>
+        <Form>
+          <Controller
+            control={control}
+            name="active"
+            render={({ field: { onChange, value } }) => (
+              <Form.Radio
+                checked={value}
+                disabled={isModification}
+                name="active"
+                label={formatMessage({
+                  id: "quality_control.form.active",
+                })}
+                onChange={(_e, { checked }) => onChange(checked)}
+                toggle
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name="domain_ids"
+            rules={{
+              required: formatMessage({
+                id: "form.validation.empty_required",
+              }),
+            }}
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
+              <FieldLabel
+                label={formatMessage({
+                  id: "quality_control.form.domain_ids",
+                })}
+                required
+                error={error?.message}
+              >
+                <DomainSelector
+                  action="createQualityControls"
+                  value={value}
+                  error={!!error}
+                  multiple
+                  onBlur={onBlur}
+                  disabled={isModification}
+                  onChange={(_e, { value }) => onChange(value)}
+                  labels
+                />
+              </FieldLabel>
+            )}
+          />
+
           <Controller
             control={control}
             name="name"
@@ -146,42 +151,6 @@ export default function QualityControlEditor({
               </FieldLabel>
             )}
           />
-
-          {isModification ? null : (
-            <Controller
-              control={control}
-              name="domain_ids"
-              rules={{
-                required: formatMessage({
-                  id: "form.validation.empty_required",
-                }),
-              }}
-              render={({
-                field: { onBlur, onChange, value },
-                fieldState: { error },
-              }) => (
-                <FieldLabel
-                  label={formatMessage({
-                    id: "quality_control.form.domain_ids",
-                  })}
-                  required
-                  error={error?.message}
-                >
-                  <DomainSelector
-                    action="createQualityControls"
-                    value={value}
-                    error={!!error}
-                    multiple
-                    onBlur={onBlur}
-                    onChange={(_e, { value }) => onChange(value)}
-                    labels
-                  />
-                </FieldLabel>
-              )}
-            />
-          )}
-          <ResultType />
-
           <Controller
             control={control}
             name="df_type"
@@ -216,32 +185,42 @@ export default function QualityControlEditor({
               </Form.Field>
             )}
           />
-          {!_.isNil(sourceId) ? (
-            <>
-              <QxContext.Provider
-                value={{ ...context, sourceId, field: "resource" }}
-              >
-                <ResourceSelector
-                  required
-                  labelId="quality_control.form.dataset"
+
+          <Controller
+            name={"control_mode"}
+            control={control}
+            rules={{ required: true }}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <Form.Field required>
+                <label>
+                  {formatMessage({ id: "quality_control.control_mode" })}
+                </label>
+                <Dropdown
+                  selection
+                  placeholder={formatMessage({
+                    id: "quality_control.control_mode",
+                  })}
+                  onBlur={onBlur}
+                  options={controlModeOptions}
+                  onChange={(_e, { value }) => {
+                    onChange(value);
+                    setValue(
+                      "control_properties",
+                      defaultControlPropertiesForMode(value)
+                    );
+                    setValue(
+                      "score_criteria",
+                      defaultScoreCriteriaForMode(value)
+                    );
+                  }}
+                  value={value}
                 />
-              </QxContext.Provider>
-              {resource?.id ? (
-                <div className="vertical-space">
-                  <QxContext.Provider
-                    value={{
-                      ...context,
-                      sourceId,
-                      fields,
-                      field: "validation",
-                    }}
-                  >
-                    <Clauses labelId="quality_control.form.validation" />
-                  </QxContext.Provider>
-                </div>
-              ) : null}
-            </>
-          ) : null}
+              </Form.Field>
+            )}
+          />
+
+          <ScoreCriteria />
+          <ControlProperties />
 
           <Divider hidden />
           <Container textAlign="right">
@@ -250,7 +229,7 @@ export default function QualityControlEditor({
                 onClick={handleSubmit((data) => onPublish(data))}
                 primary
                 loading={submitLoading}
-                disabled={!isValid || !isDirty}
+                disabled={!isValid || !isDirty || !validDfContent}
                 content={formatMessage({ id: "actions.publish" })}
               />
             ) : null}
@@ -259,7 +238,7 @@ export default function QualityControlEditor({
                 onClick={() => onSave(formData)}
                 primary
                 loading={submitLoading}
-                disabled={!name || !isDirty}
+                disabled={!isValid || !isDirty}
                 content={formatMessage({ id: "actions.save" })}
               />
             ) : null}
@@ -277,7 +256,7 @@ export default function QualityControlEditor({
                 content={formatMessage({
                   id: "actions.discard.confirmation.content",
                 })}
-                onConfirm={onCancel}
+                onConfirm={() => onCancel()}
                 onOpen={(e) => e.stopPropagation()}
                 onClose={(e) => e.stopPropagation()}
               />

package/src/components/qualityControls/QualityControlHeader.js

@@ -18,7 +18,11 @@ export default function QualityControlHeader({ children }) {
 
   const qualityControl = _.propOr({}, "data")(data);
   const actions = _.propOr([], "_actions")(data);
-  const context = { qualityControl, loading, id };
+  const context = { qualityControl, actions, mutate, loading, id };
+
+  const [subheaderIcon, subheaderColor] = qualityControl.active
+    ? ["play", "green"]
+    : ["pause", "orange"];
 
   return (
     <QxContext.Provider value={context}>
@@ -30,15 +34,33 @@ export default function QualityControlHeader({ children }) {
               <Grid.Column width={8}>
                 <Header as="h2">
                   <Icon circular name="archive" />
-                  <Header.Content>{qualityControl.name}</Header.Content>
+                  <Header.Content>
+                    {qualityControl.name}
+
+                    <Header.Subheader>
+                      <div className="control-subheader">
+                        <Label className="no-margin">
+                          <FormattedMessage
+                            id={`quality_control.control_mode.${qualityControl.control_mode}`}
+                          />
+                        </Label>
+                        <div className="flex-gapped">
+                          <Icon
+                            name={subheaderIcon}
+                            color={subheaderColor}
+                            fitted
+                          />
+                          <FormattedMessage
+                            id={`quality_control.props.active.${qualityControl.active}`}
+                          />
+                        </div>
+                      </div>
+                    </Header.Subheader>
+                  </Header.Content>
                 </Header>
               </Grid.Column>
               <Grid.Column width={8}>
-                <QualityControlActions
-                  actions={actions}
-                  qualityControl={qualityControl}
-                  mutate={mutate}
-                />
+                <QualityControlActions />
               </Grid.Column>
             </Grid>
             <Label

package/src/components/qualityControls/QualityControlHistory.js

@@ -1,10 +1,10 @@
 import _ from "lodash/fp";
 import React, { useContext } from "react";
 import { FormattedMessage } from "react-intl";
-import { Table, Header, Icon } from "semantic-ui-react";
+import { Table } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { columnDecorator } from "@truedat/core/services";
-
+import { Loading } from "@truedat/core/components";
 import QxContext from "../QxContext";
 
 const translateDecorator = (id) =>
@@ -32,7 +32,9 @@ export default function QualityControlsHistory() {
   const { formatMessage } = useIntl();
   return (
     <>
-      {!_.isEmpty(versions) && (
+      {loading ? (
+        <Loading />
+      ) : !_.isEmpty(versions) ? (
         <Table sortable>
           <Table.Header>
             <Table.Row>
@@ -67,15 +69,7 @@ export default function QualityControlsHistory() {
             ))}
           </Table.Body>
         </Table>
-      )}
-      {_.isEmpty(versions) && !loading && (
-        <Header as="h4">
-          <Icon name="search" />
-          <Header.Content>
-            {formatMessage({ id: "ruleImplementations.search.results.empty" })}
-          </Header.Content>
-        </Header>
-      )}
+      ) : null}
     </>
   );
 }

package/src/components/qualityControls/QualityControlQueryModal.js

@@ -8,7 +8,6 @@ import {
   TextArea,
   Button,
   Modal,
-  Divider,
 } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { useQualityControlQueries } from "../../hooks/useQualityControls";
@@ -27,7 +26,7 @@ const JsonBox = ({ title, content }) => {
           </span>
           <Button
             icon={copied ? "check" : "copy"}
-            color={copied && "green"}
+            color={copied ? "green" : undefined}
             onClick={(e) => {
               e.stopPropagation();
               setCopied(true);
@@ -40,8 +39,8 @@ const JsonBox = ({ title, content }) => {
       <AccordionContent active={expanded}>
         <TextArea
           className="json-box"
-          fluid
-          editable={false}
+          fluid="true"
+          editable="false"
           rows={10}
           size="small"
           value={contentString}
@@ -67,7 +66,7 @@ const ModalContent = ({ id }) => {
   );
 };
 export default function QualityControlQueryModal({ qualityControlId: id }) {
-  const [open, setOpen] = useState(open);
+  const [open, setOpen] = useState(false);
   return (
     <Modal
       open={open}
@@ -81,3 +80,7 @@ export default function QualityControlQueryModal({ qualityControlId: id }) {
     />
   );
 }
+
+QualityControlQueryModal.propTypes = {
+  qualityControlId: PropTypes.number,
+};

package/src/components/qualityControls/QualityControlRoutes.js

@@ -1,25 +1,17 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
 import {
   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,
+  QUALITY_CONTROL_SCORES,
 } from "@truedat/core/routes";
-
 import { SearchContextProvider } from "@truedat/core/search/SearchContext";
-import ExecutionGroupsTable from "../executions/ExecutionGroupsTable";
-import ExecutionGroupsHeader from "../executions/ExecutionGroupsHeader";
-import ExecutionGroupDetail from "../executions/executionGroupDetail";
-
 import {
   useQualityControlsSearch,
   useQualityControlsFilters,
@@ -28,13 +20,12 @@ import QualityControls from "./QualityControls";
 import QualityControl from "./QualityControl";
 import QualityControlHeader from "./QualityControlHeader";
 import QualityControlHistory from "./QualityControlHistory";
-
+import QualityControlScores from "./QualityControlScores";
 import NewQualityControl from "./NewQualityControl";
 import EditQualityControl from "./EditQualityControl";
 import NewDraftQualityControl from "./NewDraftQualityControl";
 
-export default function QxRoutes() {
-  const authorized = useAuthorized("quality_control");
+export default function QualityControlRoutes() {
   const searchProps = {
     initialSortColumn: "updated_at",
     initialSortDirection: "descending",
@@ -44,116 +35,80 @@ export default function QxRoutes() {
 
   return (
     <Switch>
-      <Route
-        exact
-        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 ? (
-            <SearchContextProvider
-              {...searchProps}
-              defaultFilters={{ status: "published" }}
-            >
-              <QualityControls />
-            </SearchContextProvider>
-          ) : (
-            <Unauthorized />
-          )
-        }
+        render={() => (
+          <SearchContextProvider
+            {...searchProps}
+            defaultFilters={{ status: "published" }}
+          >
+            <QualityControls />
+          </SearchContextProvider>
+        )}
       />
       <Route
         exact
         path={QUALITY_CONTROLS_DEPRECATED}
-        render={() =>
-          authorized ? (
-            <SearchContextProvider
-              {...searchProps}
-              defaultFilters={{ status: "deprecated" }}
-            >
-              <QualityControls />
-            </SearchContextProvider>
-          ) : (
-            <Unauthorized />
-          )
-        }
+        render={() => (
+          <SearchContextProvider
+            {...searchProps}
+            defaultFilters={{ status: "deprecated" }}
+          >
+            <QualityControls />
+          </SearchContextProvider>
+        )}
       />
       <Route
         exact
         path={QUALITY_CONTROLS_DRAFTS}
-        render={() =>
-          authorized ? (
-            <SearchContextProvider
-              {...searchProps}
-              defaultFilters={{ status: "draft" }}
-            >
-              <QualityControls />
-            </SearchContextProvider>
-          ) : (
-            <Unauthorized />
-          )
-        }
+        render={() => (
+          <SearchContextProvider
+            {...searchProps}
+            defaultFilters={{ status: "draft" }}
+          >
+            <QualityControls />
+          </SearchContextProvider>
+        )}
       />
       <Route
         exact
         path={QUALITY_CONTROL_NEW}
-        render={() => (authorized ? <NewQualityControl /> : <Unauthorized />)}
+        render={() => <NewQualityControl />}
       />
       <Route
         exact
         path={QUALITY_CONTROL_EDIT}
-        render={() => (authorized ? <EditQualityControl /> : <Unauthorized />)}
+        render={() => <EditQualityControl />}
       />
       <Route
         exact
         path={QUALITY_CONTROL_NEW_DRAFT}
-        render={() =>
-          authorized ? <NewDraftQualityControl /> : <Unauthorized />
-        }
+        render={() => <NewDraftQualityControl />}
       />
       <Route
-        exact
         path={QUALITY_CONTROL}
-        render={() =>
-          authorized ? (
-            <QualityControlHeader>
-              <QualityControl />
-            </QualityControlHeader>
-          ) : (
-            <Unauthorized />
-          )
-        }
-      />
-      <Route
-        exact
-        path={QUALITY_CONTROL_HISTORY}
-        render={() =>
-          authorized ? (
-            <QualityControlHeader>
-              <QualityControlHistory />
-            </QualityControlHeader>
-          ) : (
-            <Unauthorized />
-          )
-        }
+        render={() => (
+          <QualityControlHeader>
+            <Switch>
+              <Route
+                exact
+                path={QUALITY_CONTROL}
+                render={() => <QualityControl />}
+              />
+              <Route
+                exact
+                path={QUALITY_CONTROL_HISTORY}
+                render={() => <QualityControlHistory />}
+              />
+              <Route
+                exact
+                path={QUALITY_CONTROL_SCORES}
+                render={() => <QualityControlScores />}
+              />
+            </Switch>
+          </QualityControlHeader>
+        )}
       />
     </Switch>
   );