@truedat/qx 5.17.2 → 5.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "5.17.2",
+  "version": "5.17.3",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -84,7 +84,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "5.17.2",
+    "@truedat/core": "5.17.3",
     "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": "1120a6efa4dfec423696957c5e72d752c9db284f"
+  "gitHead": "ec07aeeabffbb6e46d2d22ade283de203dd94c88"
 }

package/src/api.js

@@ -2,5 +2,28 @@ const API_DATA_VIEWS = "/api/data_views";
 const API_DATA_VIEW = "/api/data_views/:id";
 const API_FUNCTIONS = "/api/quality_functions";
 const API_FUNCTION = "/api/quality_functions/:id";
+const API_QUALITY_CONTROLS = "/api/quality_controls";
+const API_QUALITY_CONTROL = "/api/quality_controls/:id";
+const API_QUALITY_CONTROL_VERSIONS = "/api/quality_controls/:id/versions";
+const API_QUALITY_CONTROL_PUBLISHED = "/api/quality_controls/:id/published";
+const API_QUALITY_CONTROL_DRAFT = "/api/quality_controls/:id/draft";
+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";
 
-export { API_DATA_VIEWS, API_DATA_VIEW, API_FUNCTIONS, API_FUNCTION };
+export {
+  API_DATA_VIEWS,
+  API_DATA_VIEW,
+  API_FUNCTIONS,
+  API_FUNCTION,
+  API_QUALITY_CONTROLS,
+  API_QUALITY_CONTROL,
+  API_QUALITY_CONTROL_VERSIONS,
+  API_QUALITY_CONTROL_PUBLISHED,
+  API_QUALITY_CONTROL_DRAFT,
+  API_QUALITY_CONTROL_STATUS,
+  API_QUALITY_CONTROL_DOMAINS,
+  API_QUALITY_CONTROL_SEARCH,
+  API_QUALITY_CONTROL_FILTERS,
+};

package/src/components/QxRoutes.js

@@ -1,16 +1,17 @@
 import React from "react";
-import { Route } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
-import { DATA_VIEWS, FUNCTIONS } from "@truedat/core/routes";
+import { DATA_VIEWS, FUNCTIONS, QUALITY_CONTROLS } from "@truedat/core/routes";
 import DataViews from "./dataViews/DataViews";
 import Functions from "./functions/Functions";
+import QualityControlRoutes from "./qualityControls/QualityControlRoutes";
 
 export default function QxRoutes() {
-  const authorized = useAuthorized();
+  const authorized = useAuthorized("quality_control");
 
   return (
-    <>
+    <Switch>
       <Route
         path={DATA_VIEWS}
         render={() => (authorized ? <DataViews /> : <Unauthorized />)}
@@ -19,6 +20,12 @@ export default function QxRoutes() {
         path={FUNCTIONS}
         render={() => (authorized ? <Functions /> : <Unauthorized />)}
       />
-    </>
+      <Route
+        path={QUALITY_CONTROLS}
+        render={() =>
+          authorized ? <QualityControlRoutes /> : <Unauthorized />
+        }
+      />
+    </Switch>
   );
 }

package/src/components/common/ClauseViewer.js

@@ -0,0 +1,129 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import { Divider, Label, Segment } from "semantic-ui-react";
+import { useFunctions } from "@truedat/qx/hooks/useFunctions";
+import QxContext from "@truedat/qx/components/QxContext";
+import { isConditionFunction } from "@truedat/qx/components/common/expressions/Condition";
+
+export default function ClauseViewer({ clause }) {
+  const { data, loading } = useFunctions();
+  const functions = data?.data;
+
+  const _map = _.map.convert({ cap: false });
+  return (
+    <Segment loading={loading} compact basic>
+      {loading
+        ? null
+        : _map(({ expressions }, idx) => (
+            <QxContext.Provider value={{ functions }} key={idx}>
+              <Segment textAlign="center" className="no-margin">
+                {_map((expression, idx) => (
+                  <React.Fragment key={idx}>
+                    <ExpressionViewer expression={expression} />
+                    {idx == _.size(expressions) - 1 ? null : (
+                      <Divider horizontal className="divider-compact">
+                        OR
+                      </Divider>
+                    )}
+                  </React.Fragment>
+                ))(expressions)}
+              </Segment>
+              {idx == _.size(clause) - 1 ? null : (
+                <Divider horizontal className="divider-compact">
+                  AND
+                </Divider>
+              )}
+            </QxContext.Provider>
+          ))(clause)}
+    </Segment>
+  );
+}
+
+ClauseViewer.propTypes = {
+  clause: PropTypes.array,
+};
+
+function ExpressionViewer({ expression }) {
+  const componentForShape = {
+    function: (value) => <ExpressionFunctionViewer value={value} />,
+    constant: (value) => <ExpressionConstantViewer value={value} />,
+    field: (value) => <ExpressionFieldViewer value={value} />,
+  };
+  return componentForShape[expression.shape](expression.value);
+}
+
+ExpressionViewer.propTypes = {
+  expression: PropTypes.object,
+};
+
+function ExpressionFunctionViewer({ value }) {
+  const { functions } = useContext(QxContext);
+  const { name, type } = value;
+  const func = _.find({ name, type })(functions);
+  return isConditionFunction(func) ? (
+    <ConditionExpressionFunctionViewer
+      value={value}
+      operator={func?.operator}
+    />
+  ) : (
+    <GenericExpressionFunctionViewer value={value} />
+  );
+}
+ExpressionFunctionViewer.propTypes = {
+  value: PropTypes.object,
+};
+
+function GenericExpressionFunctionViewer({ value }) {
+  return (
+    <div className="text-align-left">
+      <Label color="teal" horizontal size="tiny">
+        {value.name}
+      </Label>
+      (
+      <div className="clause-viewer-function">
+        {_.flow(
+          _.prop("args"),
+          _.toPairs,
+          _.map(([key, expression]) => (
+            <div key={key} className="display-flex">
+              <ExpressionViewer expression={expression} />
+            </div>
+          ))
+        )(value)}
+      </div>
+      )
+    </div>
+  );
+}
+
+GenericExpressionFunctionViewer.propTypes = {
+  value: PropTypes.object,
+};
+function ConditionExpressionFunctionViewer({ value, operator }) {
+  return (
+    <div className="condition-function-viewer">
+      <ExpressionViewer expression={value.args.arg1} />
+      <b className="font-big">{operator}</b>
+      <ExpressionViewer expression={value.args.arg2} />
+    </div>
+  );
+}
+ConditionExpressionFunctionViewer.propTypes = {
+  value: PropTypes.object,
+  operator: PropTypes.string,
+};
+
+function ExpressionConstantViewer({ value }) {
+  return <Label color="purple">{value.value}</Label>;
+}
+ExpressionConstantViewer.propTypes = {
+  value: PropTypes.object,
+};
+
+function ExpressionFieldViewer({ value }) {
+  return <Label color="blue">{value.name}</Label>;
+}
+ExpressionFieldViewer.propTypes = {
+  value: PropTypes.object,
+};

package/src/components/common/ResourceSelector.js

@@ -11,7 +11,7 @@ import {
   ReferenceDatasetSelector,
 } from "./resourceSelectors";
 
-export default function ResourceSelector({ required }) {
+export default function ResourceSelector({ required, labelId }) {
   const { formatMessage } = useIntl();
   const { field } = useContext(QxContext);
   const { control, setValue, watch } = useFormContext();
@@ -34,9 +34,12 @@ export default function ResourceSelector({ required }) {
       <Controller
         name={`${field}.type`}
         control={control}
+        rules={{ required }}
         render={({ field: { onBlur, onChange } }) => (
           <Form.Field required={required}>
-            <label>{formatMessage({ id: "queryables.form.resource" })}</label>
+            <label>
+              {formatMessage({ id: labelId || "queryables.form.resource" })}
+            </label>
             <Dropdown
               selection
               placeholder={formatMessage({ id: "queryables.resource.type" })}
@@ -56,6 +59,7 @@ export default function ResourceSelector({ required }) {
         <Controller
           name={`${field}.id`}
           control={control}
+          rules={{ required }}
           render={({ field: { onBlur, onChange, value } }) => {
             const ResourceSelectorForType = resourceSelectorForType[type];
             return (
@@ -77,4 +81,5 @@ export default function ResourceSelector({ required }) {
 
 ResourceSelector.propTypes = {
   required: PropTypes.bool,
+  labelId: PropTypes.string,
 };

package/src/components/common/expressions/Clauses.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
-import { useIntl } from "react-intl";
 import React, { useState, useContext } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import { useFieldArray } from "react-hook-form";
 import { Segment, Divider, Button, Form } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
@@ -8,7 +9,7 @@ import Condition from "./Condition";
 
 const newExpression = () => ({ shape: "function", value: null });
 
-export default function Clauses() {
+export default function Clauses({ labelId }) {
   const { formatMessage } = useIntl();
   const context = useContext(QxContext);
   const { field } = context;
@@ -16,7 +17,9 @@ export default function Clauses() {
 
   return (
     <Form.Field>
-      <label>{formatMessage({ id: "expression.form.clause" })}</label>
+      <label>
+        {formatMessage({ id: labelId || "expression.form.clause" })}
+      </label>
       {fields.map((_clauseGroup, groupIndex) => (
         <ClauseExpression
           key={`clauseGroup-${groupIndex}`}
@@ -38,6 +41,10 @@ export default function Clauses() {
   );
 }
 
+Clauses.propTypes = {
+  labelId: PropTypes.string,
+};
+
 const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
   const { formatMessage } = useIntl();
   const context = useContext(QxContext);
@@ -98,3 +105,8 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
     </div>
   );
 };
+ClauseExpression.propTypes = {
+  groupIndex: PropTypes.number,
+  removeGroup: PropTypes.func,
+  lastGroup: PropTypes.bool,
+};

package/src/components/common/expressions/Condition.js

@@ -1,16 +1,14 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
 import React, { useState, useContext } from "react";
+import PropTypes from "prop-types";
 import { Dropdown, Button, Grid } from "semantic-ui-react";
 import { Controller, useFormContext } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
 import Expression from "./Expression";
 
-const notEmptyExpression = _.conforms({
-  name: _.negate(_.isNil),
-  type: _.negate(_.isNil),
-});
-const isConditionFunction = _.conforms({
+const hasTypeKey = _.flow(_.keys, _.contains("type"));
+export const isConditionFunction = _.conforms({
   type: _.isEqual("boolean"),
   params: _.conforms([
     _.conforms({ name: _.isEqual("arg1"), type: _.isEqual("any") }),
@@ -22,7 +20,7 @@ const isConditionExpression = (expression, functions) => {
   const func = _.find({ name: value?.name, type: value?.type })(functions);
   return _.has("isCondition")(value)
     ? value?.isCondition
-    : isConditionFunction(func) || !notEmptyExpression(value);
+    : isConditionFunction(func) || _.isNil(value) || !hasTypeKey(value);
 };
 
 export default function Condition({ onDelete }) {
@@ -176,3 +174,7 @@ export default function Condition({ onDelete }) {
     </div>
   );
 }
+
+Condition.propTypes = {
+  onDelete: PropTypes.func,
+};

package/src/components/common/expressions/ShapeSelector.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect, useContext } from "react";
+import React, { useEffect, useContext, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Dropdown } from "semantic-ui-react";
@@ -23,6 +23,8 @@ export default function ShapeSelector() {
   const { control, watch, setValue } = useFormContext();
 
   const params = watch("params");
+  const value = watch(`${field}.value`);
+  const isCondition = _.prop("isCondition")(value);
 
   const emptyTypeParams = _.flow(
     _.filter((param) => type === "any" || param.type == type),
@@ -33,11 +35,15 @@ export default function ShapeSelector() {
     _.isEmpty
   )(fields);
 
-  const shapes = _.reject(
-    (shape) =>
-      (shape === "param" && emptyTypeParams) ||
-      (shape === "field" && emptyTypeFields)
-  )(["constant", "function", "param", "field"]);
+  const shapes = useMemo(
+    () =>
+      _.reject(
+        (shape) =>
+          (shape === "param" && emptyTypeParams) ||
+          (shape === "field" && emptyTypeFields)
+      )(["constant", "function", "param", "field"]),
+    [emptyTypeParams, emptyTypeFields]
+  );
 
   const shape = watch(`${field}.shape`);
 
@@ -48,7 +54,7 @@ export default function ShapeSelector() {
         : "function";
       setValue(`${field}.shape`, initialShape, { shouldValidate: true });
     }
-  }, [shape]);
+  }, [shape, defaultShape, field, shapes, setValue]);
 
   const shapeDropdownOptions = _.map((v) => ({
     key: v,
@@ -75,7 +81,11 @@ export default function ShapeSelector() {
           options={shapeDropdownOptions}
           onChange={(_e, { value }) => {
             onChange(value);
-            setValue(`${field}.value`, undefined);
+            setValue(
+              `${field}.value`,
+              { isCondition },
+              { shouldValidate: true }
+            );
           }}
           trigger={
             <div className="shape-selector-trigger">{shapeToSymbol[shape]}</div>

package/src/components/common/expressions/__tests__/ShapeSelector.spec.js

@@ -59,7 +59,7 @@ describe("<ShapeSelector />", () => {
           type: "boolean",
         },
       ],
-      test: { shape: "param" },
+      test: { shape: "param", value: { isCondition: undefined } },
     });
 
     expect(container).toMatchSnapshot();
@@ -79,7 +79,7 @@ describe("<ShapeSelector />", () => {
     userEvent.click(await getByRole("option", { name: /constant/i }));
 
     expect(watcher).lastCalledWith({
-      test: { shape: "constant" },
+      test: { shape: "constant", value: { isCondition: undefined } },
     });
 
     expect(container).toMatchSnapshot();

package/src/components/dataViews/DataViewEditor.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
   Button,
+  Container,
   Divider,
   Grid,
   GridColumn,
@@ -99,7 +100,7 @@ export default function DataViewEditor({
           </QxContext.Provider>
 
           <Divider hidden />
-          <div className="actions">
+          <Container textAlign="right">
             <Button
               onClick={handleSubmit((data) => onSubmit(data))}
               primary
@@ -152,7 +153,7 @@ export default function DataViewEditor({
                 onClose={(e) => e.stopPropagation()}
               />
             ) : null}
-          </div>
+          </Container>
         </Form>
       </FormProvider>
     </Fragment>
@@ -161,7 +162,7 @@ export default function DataViewEditor({
 
 DataViewEditor.propTypes = {
   selectedDataView: PropTypes.object,
-  dataViews: PropTypes.array,
+  context: PropTypes.object,
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
   onDelete: PropTypes.func,

package/src/components/dataViews/__tests__/__snapshots__/DataViewEditor.spec.js.snap

@@ -490,7 +490,7 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
       class="ui hidden divider"
     />
     <div
-      class="actions"
+      class="ui right aligned container"
     >
       <button
         class="ui primary button"
@@ -975,7 +975,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
       class="ui hidden divider"
     />
     <div
-      class="actions"
+      class="ui right aligned container"
     >
       <button
         class="ui primary disabled button"

package/src/components/dataViews/queryableFunctions.js

@@ -11,6 +11,17 @@ export const calculateGroupByFieldId = (id, type) => {
   }
 };
 
+export const fieldsFromResource = (alias, parent_id) =>
+  _.flow(
+    _.propOr([], "resource.embedded.fields"),
+    _.map((field) => ({
+      ...field,
+      alias,
+      parent_id,
+      color: getColorById(parent_id),
+    }))
+  );
+
 const queryableToFields =
   (formatMessage) =>
   ({ type, properties, alias, id: parent_id }) => {
@@ -25,15 +36,7 @@ const queryableToFields =
     switch (type) {
       case "from":
       case "join":
-        return _.flow(
-          _.propOr([], "resource.embedded.fields"),
-          _.map((field) => ({
-            ...field,
-            alias,
-            parent_id,
-            color: getColorById(parent_id),
-          }))
-        )(properties);
+        return fieldsFromResource(alias, parent_id)(properties);
       case "select":
         return _.flow(_.propOr([], "fields"), selectFieldsMap)(properties);
       case "group_by":
@@ -46,10 +49,13 @@ const queryableToFields =
           selectFieldsMap
         )(properties);
         return _.concat(groupFields, aggregateFields);
+      default:
+        return [];
     }
   };
 
 export const reduceQueryableFields = (formatMessage) => (queryables) => {
+  // eslint-disable-next-line no-unused-vars
   const [_halt, fields] = _.flow(
     _.reverse,
     _.reduce(

package/src/components/functions/FunctionEditor.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
   Button,
+  Container,
   Divider,
   Grid,
   GridColumn,
@@ -130,7 +131,7 @@ export default function FunctionEditor({
             <Expression />
           </QxContext.Provider>
           <Divider hidden />
-          <div className="actions">
+          <Container textAlign="right">
             <Button
               onClick={handleSubmit(onSubmit)}
               primary
@@ -183,7 +184,7 @@ export default function FunctionEditor({
                 onClose={(e) => e.stopPropagation()}
               />
             ) : null}
-          </div>
+          </Container>
         </Form>
       </FormProvider>
     </Fragment>

package/src/components/functions/__tests__/__snapshots__/FunctionEditor.spec.js.snap

@@ -385,7 +385,7 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
       class="ui hidden divider"
     />
     <div
-      class="actions"
+      class="ui right aligned container"
     >
       <button
         class="ui primary disabled button"
@@ -791,7 +791,7 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
       class="ui hidden divider"
     />
     <div
-      class="actions"
+      class="ui right aligned container"
     >
       <button
         class="ui primary disabled button"
@@ -1155,7 +1155,7 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
       class="ui hidden divider"
     />
     <div
-      class="actions"
+      class="ui right aligned container"
     >
       <button
         class="ui primary button"
@@ -1562,7 +1562,7 @@ exports[`<FunctionEditor /> test delete button 1`] = `
       class="ui hidden divider"
     />
     <div
-      class="actions"
+      class="ui right aligned container"
     >
       <button
         class="ui primary disabled button"

package/src/components/qualityControls/EditQualityControl.js

@@ -0,0 +1,73 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { useParams, useHistory } from "react-router-dom";
+import { Container, Header, Icon, Segment } from "semantic-ui-react";
+import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
+import {
+  useQualityControlUpdateDraft,
+  useQualityControl,
+} from "../../hooks/useQualityControls";
+import QualityControlEditor from "./QualityControlEditor";
+
+export default function EditQualityControl() {
+  const { id } = useParams();
+  const history = useHistory();
+
+  const { trigger, isMutating } = useQualityControlUpdateDraft(id);
+  const { data, loading } = useQualityControl(id);
+  const qualityControl = data?.data;
+
+  const handleSubmit = (qualityControl) => {
+    const resource = _.prop("resource")(qualityControl);
+    const validation = _.prop("validation")(qualityControl);
+    trigger({
+      quality_control: {
+        ...qualityControl,
+        status: "draft",
+        resource:
+          !resource || _.conforms({ type: _.isNil })(resource)
+            ? null
+            : resource,
+        validation:
+          !validation ||
+          _.isEqual([
+            {
+              expressions: [
+                { shape: "function", value: { isCondition: true } },
+              ],
+            },
+          ])(validation)
+            ? []
+            : validation,
+      },
+    }).then((data) => {
+      const id = _.prop("data.data.id")(data);
+      history.push(linkTo.QUALITY_CONTROL({ id }));
+    });
+  };
+  return (
+    <Segment floated="left" loading={isMutating || loading}>
+      <Container text>
+        <Header as="h2">
+          <Icon circular name="archive" />
+          <Header.Content>
+            <FormattedMessage id="quality_controls.new.header" />
+            <Header.Subheader>
+              <FormattedMessage id="quality_controls.new.subheader" />
+            </Header.Subheader>
+          </Header.Content>
+        </Header>
+        {qualityControl ? (
+          <QualityControlEditor
+            isModification
+            value={qualityControl}
+            onSave={handleSubmit}
+            onCancel={() => history.push(QUALITY_CONTROLS)}
+            isSubmitting={false}
+          />
+        ) : null}
+      </Container>
+    </Segment>
+  );
+}