@truedat/qx 7.0.7 → 7.1.0

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

@@ -30,14 +30,14 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
             class="required field"
           >
             <label>
-              name
+              Name
             </label>
             <div
               class="ui action input"
             >
               <input
                 autocomplete="off"
-                placeholder="name"
+                placeholder="Name"
                 required=""
                 type="text"
                 value=""
@@ -184,7 +184,7 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
               style="font-style: italic; font-size: 13px; padding: 9.5px 14px;"
               tabindex="0"
             >
-              add_description
+              Add description
             </a>
           </div>
         </div>
@@ -193,7 +193,7 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
     <h5
       class="ui dividing header"
     >
-      params
+      Parameters
     </h5>
     <div
       class="ui list"
@@ -206,14 +206,14 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
         <button
           class="ui button"
         >
-          add_param
+          Add parameter
         </button>
       </div>
     </div>
     <h5
       class="ui dividing header"
     >
-      output
+      Expression
     </h5>
     <div
       class="ui grid"
@@ -257,7 +257,7 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
                       </code>
                     </b>
                   </small>
-                  constant
+                  Constant
                 </div>
               </div>
               <div
@@ -279,7 +279,7 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
                       </code>
                     </b>
                   </small>
-                  function
+                  Function
                 </div>
               </div>
             </div>
@@ -316,7 +316,7 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
                     class="divider text"
                     role="alert"
                   >
-                    function.placeholder
+                    Select a function of type boolean
                   </div>
                   <i
                     aria-hidden="true"
@@ -392,12 +392,12 @@ exports[`<FunctionEditor /> matches snapshot without onDelete 1`] = `
         disabled=""
         tabindex="-1"
       >
-        save
+        Save
       </button>
       <button
         class="ui button"
       >
-        cancel
+        Cancel
       </button>
     </div>
   </form>
@@ -436,14 +436,14 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
             class="required field"
           >
             <label>
-              name
+              Name
             </label>
             <div
               class="ui action input"
             >
               <input
                 autocomplete="off"
-                placeholder="name"
+                placeholder="Name"
                 required=""
                 type="text"
                 value=""
@@ -590,7 +590,7 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
               style="font-style: italic; font-size: 13px; padding: 9.5px 14px;"
               tabindex="0"
             >
-              add_description
+              Add description
             </a>
           </div>
         </div>
@@ -599,7 +599,7 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
     <h5
       class="ui dividing header"
     >
-      params
+      Parameters
     </h5>
     <div
       class="ui list"
@@ -612,14 +612,14 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
         <button
           class="ui button"
         >
-          add_param
+          Add parameter
         </button>
       </div>
     </div>
     <h5
       class="ui dividing header"
     >
-      output
+      Expression
     </h5>
     <div
       class="ui grid"
@@ -663,7 +663,7 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
                       </code>
                     </b>
                   </small>
-                  constant
+                  Constant
                 </div>
               </div>
               <div
@@ -685,7 +685,7 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
                       </code>
                     </b>
                   </small>
-                  function
+                  Function
                 </div>
               </div>
             </div>
@@ -722,7 +722,7 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
                     class="divider text"
                     role="alert"
                   >
-                    function.placeholder
+                    Select a function of type boolean
                   </div>
                   <i
                     aria-hidden="true"
@@ -798,17 +798,17 @@ exports[`<FunctionEditor /> matches the latest snapshot 1`] = `
         disabled=""
         tabindex="-1"
       >
-        save
+        Save
       </button>
       <button
         class="ui button"
       >
-        cancel
+        Cancel
       </button>
       <button
         class="ui red button"
       >
-        delete
+        Delete
       </button>
     </div>
   </form>
@@ -845,14 +845,14 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
             class="required field"
           >
             <label>
-              name
+              Name
             </label>
             <div
               class="ui action input"
             >
               <input
                 autocomplete="off"
-                placeholder="name"
+                placeholder="Name"
                 required=""
                 type="text"
                 value="name"
@@ -1008,7 +1008,7 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
     <h5
       class="ui dividing header"
     >
-      params
+      Parameters
     </h5>
     <div
       class="ui list"
@@ -1021,14 +1021,14 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
         <button
           class="ui button"
         >
-          add_param
+          Add parameter
         </button>
       </div>
     </div>
     <h5
       class="ui dividing header"
     >
-      output
+      Expression
     </h5>
     <div
       class="ui grid"
@@ -1072,7 +1072,7 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
                       </code>
                     </b>
                   </small>
-                  constant
+                  Constant
                 </div>
               </div>
               <div
@@ -1094,7 +1094,7 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
                       </code>
                     </b>
                   </small>
-                  function
+                  Function
                 </div>
               </div>
             </div>
@@ -1111,7 +1111,7 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
               class="divider text"
               role="alert"
             >
-              true
+              True
             </div>
             <i
               aria-hidden="true"
@@ -1130,7 +1130,7 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
                 <span
                   class="text"
                 >
-                  true
+                  True
                 </span>
               </div>
               <div
@@ -1143,7 +1143,7 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
                 <span
                   class="text"
                 >
-                  false
+                  False
                 </span>
               </div>
             </div>
@@ -1160,17 +1160,17 @@ exports[`<FunctionEditor /> test cancel button with confirm 1`] = `
       <button
         class="ui primary button"
       >
-        save
+        Save
       </button>
       <button
         class="ui button"
       >
-        cancel
+        Cancel
       </button>
       <button
         class="ui red button"
       >
-        delete
+        Delete
       </button>
     </div>
   </form>
@@ -1207,14 +1207,14 @@ exports[`<FunctionEditor /> test delete button 1`] = `
             class="required field"
           >
             <label>
-              name
+              Name
             </label>
             <div
               class="ui action input"
             >
               <input
                 autocomplete="off"
-                placeholder="name"
+                placeholder="Name"
                 required=""
                 type="text"
                 value=""
@@ -1361,7 +1361,7 @@ exports[`<FunctionEditor /> test delete button 1`] = `
               style="font-style: italic; font-size: 13px; padding: 9.5px 14px;"
               tabindex="0"
             >
-              add_description
+              Add description
             </a>
           </div>
         </div>
@@ -1370,7 +1370,7 @@ exports[`<FunctionEditor /> test delete button 1`] = `
     <h5
       class="ui dividing header"
     >
-      params
+      Parameters
     </h5>
     <div
       class="ui list"
@@ -1383,14 +1383,14 @@ exports[`<FunctionEditor /> test delete button 1`] = `
         <button
           class="ui button"
         >
-          add_param
+          Add parameter
         </button>
       </div>
     </div>
     <h5
       class="ui dividing header"
     >
-      output
+      Expression
     </h5>
     <div
       class="ui grid"
@@ -1434,7 +1434,7 @@ exports[`<FunctionEditor /> test delete button 1`] = `
                       </code>
                     </b>
                   </small>
-                  constant
+                  Constant
                 </div>
               </div>
               <div
@@ -1456,7 +1456,7 @@ exports[`<FunctionEditor /> test delete button 1`] = `
                       </code>
                     </b>
                   </small>
-                  function
+                  Function
                 </div>
               </div>
             </div>
@@ -1493,7 +1493,7 @@ exports[`<FunctionEditor /> test delete button 1`] = `
                     class="divider text"
                     role="alert"
                   >
-                    function.placeholder
+                    Select a function of type boolean
                   </div>
                   <i
                     aria-hidden="true"
@@ -1569,17 +1569,17 @@ exports[`<FunctionEditor /> test delete button 1`] = `
         disabled=""
         tabindex="-1"
       >
-        save
+        Save
       </button>
       <button
         class="ui button"
       >
-        cancel
+        Cancel
       </button>
       <button
         class="ui red button"
       >
-        delete
+        Delete
       </button>
     </div>
   </form>

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

@@ -37,7 +37,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                     >
                       <input
                         autocomplete="off"
-                        placeholder="name"
+                        placeholder="Name"
                         type="text"
                         value="param1"
                       />
@@ -184,7 +184,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                     style="font-style: italic; font-size: 13px; padding: 9.5px 14px;"
                     tabindex="0"
                   >
-                    add_description
+                    Add description
                   </a>
                 </div>
               </div>
@@ -200,7 +200,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
       <button
         class="ui button"
       >
-        add_param
+        Add parameter
       </button>
     </div>
   </div>
@@ -220,7 +220,7 @@ exports[`<FunctionParams /> matches the latest snapshot without param 1`] = `
       <button
         class="ui button"
       >
-        add_param
+        Add parameter
       </button>
     </div>
   </div>

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

@@ -15,11 +15,11 @@ exports[`<Functions /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        functions.header
+        Quality Functions
         <div
           class="sub header"
         >
-          functions.subheader
+          List and edit quality functions
         </div>
       </div>
     </h2>
@@ -32,7 +32,7 @@ exports[`<Functions /> matches the latest snapshot 1`] = `
         <button
           class="ui fluid button"
         >
-          functions.action.new
+          New function
         </button>
         <div
           class="ui divided selection list"
@@ -76,7 +76,7 @@ exports[`<Functions /> matches the latest snapshot 1`] = `
           <div
             class="sub header"
           >
-            functions.no_selection
+            No function selected
           </div>
         </h2>
       </div>

package/src/components/qualityControls/ControlProperties.js

@@ -0,0 +1,43 @@
+import React, { useContext } from "react";
+import { useFormContext } from "react-hook-form";
+import { Segment } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import ErrorCount from "./controlProperties/ErrorCount";
+import Ratio from "./controlProperties/Ratio";
+
+export default function ControlProperties() {
+  const { watch } = useFormContext();
+  const context = useContext(QxContext);
+
+  const { control_mode: controlMode, source_id: sourceId } = watch();
+
+  const componentForMode = {
+    error_count: <ErrorCount />,
+    deviation: <Ratio />,
+    percentage: <Ratio />,
+  };
+
+  return controlMode && sourceId ? (
+    <Segment>
+      <QxContext.Provider value={{ ...context, field: "control_properties" }}>
+        {componentForMode[controlMode]}
+      </QxContext.Provider>
+    </Segment>
+  ) : null;
+}
+
+export const defaultForMode = (controlMode) => {
+  switch (controlMode) {
+    case "error_count":
+      return { errors_resource: null };
+    default:
+      return {
+        resource: null,
+        validation: [
+          {
+            expressions: [{ shape: "function", value: { isCondition: true } }],
+          },
+        ],
+      };
+  }
+};

package/src/components/qualityControls/ControlPropertiesView.js

@@ -0,0 +1,109 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, Segment, List, Label } from "semantic-ui-react";
+import ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
+
+export default function ControlPropertiesView({ qualityControl }) {
+  const { control_properties, control_mode } = qualityControl;
+  const controlPropertiesForMode = {
+    percentage: (
+      <ControlPropertiesRatio controlProperties={control_properties} />
+    ),
+    deviation: (
+      <ControlPropertiesRatio controlProperties={control_properties} />
+    ),
+    error_count: (
+      <ControlPropertiesErrorCount controlProperties={control_properties} />
+    ),
+  };
+
+  return (
+    <>
+      <Header as="h3">
+        <Icon name="puzzle piece" size="small" />
+        <Header.Content>
+          <FormattedMessage id="quality_control.form.control_properties" />
+        </Header.Content>
+      </Header>
+      <Segment>
+        {control_properties ? (
+          controlPropertiesForMode[control_mode]
+        ) : (
+          <FormattedMessage id="quality_control.control_properties.empty" />
+        )}
+      </Segment>
+    </>
+  );
+}
+
+const ControlPropertiesRatio = ({ controlProperties }) => (
+  <List>
+    <List.Item>
+      <List.Header>
+        <FormattedMessage id="quality_control.ratio.resource" />
+      </List.Header>
+      <List.Content>
+        {controlProperties.resource ? (
+          <List.Description>
+            <Label horizontal>
+              <FormattedMessage
+                id={`queryables.resource.selector.${controlProperties.resource?.type}`}
+              />
+            </Label>
+            <Label color="blue">
+              {_.prop("resource.embedded.name")(controlProperties)}
+            </Label>
+          </List.Description>
+        ) : (
+          <FormattedMessage id="quality_control.ratio.resource.empty" />
+        )}
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <List.Header>
+        <FormattedMessage id="quality_control.ratio.validation" />
+      </List.Header>
+      <List.Content>
+        {controlProperties.validation ? (
+          <List.Description>
+            <ClauseViewer clause={controlProperties.validation} />
+          </List.Description>
+        ) : (
+          <FormattedMessage id="quality_control.ratio.validation.empty" />
+        )}
+      </List.Content>
+    </List.Item>
+  </List>
+);
+
+const ControlPropertiesErrorCount = ({ controlProperties }) => (
+  <List>
+    <List.Item>
+      <List.Header>
+        <FormattedMessage id="quality_control.error_count.errors_resource" />
+      </List.Header>
+      <List.Content>
+        {controlProperties.errors_resource ? (
+          <List.Description>
+            <Label horizontal>
+              <FormattedMessage
+                id={`queryables.resource.selector.${controlProperties.errors_resource?.type}`}
+              />
+            </Label>
+            <Label color="blue">
+              {_.prop("errors_resource.embedded.name")(controlProperties)}
+            </Label>
+          </List.Description>
+        ) : (
+          <FormattedMessage id="quality_control.error_count.errors_resource.empty" />
+        )}
+      </List.Content>
+    </List.Item>
+  </List>
+);
+
+ControlPropertiesView.propTypes = {
+  qualityControl: PropTypes.object,
+};

package/src/components/qualityControls/EditQualityControl.js

@@ -15,31 +15,15 @@ export default function EditQualityControl() {
   const history = useHistory();
 
   const { trigger, isMutating } = useQualityControlUpdateDraft(id);
-  const { data, loading } = useQualityControl(id);
+  const { data, loading: qualityControlLoading } = useQualityControl(id);
   const qualityControl = data?.data;
+  const loading = qualityControlLoading || isMutating;
 
   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);
@@ -47,14 +31,14 @@ export default function EditQualityControl() {
     });
   };
   return (
-    <Segment floated="left" loading={isMutating || loading}>
+    <Segment floated="left" loading={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" />
+              <FormattedMessage id="quality_controls.edit.subheader" />
             </Header.Subheader>
           </Header.Content>
         </Header>
@@ -64,7 +48,7 @@ export default function EditQualityControl() {
             value={qualityControl}
             onSave={handleSubmit}
             onCancel={() => history.push(QUALITY_CONTROLS)}
-            isSubmitting={false}
+            isSubmitting={loading}
           />
         ) : null}
       </Container>