@truedat/qx 7.13.7 → 7.13.9

package/src/components/common/__tests__/__snapshots__/TypeSelector.spec.js.snap

@@ -3,120 +3,124 @@
 exports[`<TypeSelector /> matches the latest snapshot 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui basic button dropdown"
-    name="type"
-    role="listbox"
-    tabindex="0"
+    class="field"
   >
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
     <div
-      class="menu transition"
+      aria-expanded="false"
+      class="ui button fluid dropdown"
+      name="type"
+      role="listbox"
+      tabindex="0"
     >
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="false"
-        aria-selected="true"
-        class="selected item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
       >
-        <i
-          aria-hidden="true"
-          class="adjust icon"
-        />
-        <span
-          class="text"
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
         >
-          boolean
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="font icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="adjust icon"
+          />
+          <span
+            class="text"
+          >
+            boolean
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          string
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="hashtag icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="font icon"
+          />
+          <span
+            class="text"
+          >
+            string
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          number
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="calendar alternate outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="hashtag icon"
+          />
+          <span
+            class="text"
+          >
+            number
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          date
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="clock outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="calendar alternate outline icon"
+          />
+          <span
+            class="text"
+          >
+            date
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          timestamp
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="question circle outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="clock outline icon"
+          />
+          <span
+            class="text"
+          >
+            timestamp
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          any
-        </span>
+          <i
+            aria-hidden="true"
+            class="question circle outline icon"
+          />
+          <span
+            class="text"
+          >
+            any
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -126,103 +130,107 @@ exports[`<TypeSelector /> matches the latest snapshot 1`] = `
 exports[`<TypeSelector /> matches the latest snapshot withoutTypeAny 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui basic button dropdown"
-    name="type"
-    role="listbox"
-    tabindex="0"
+    class="field"
   >
-    <i
-      aria-hidden="true"
-      class="dropdown icon"
-    />
     <div
-      class="menu transition"
+      aria-expanded="false"
+      class="ui button fluid dropdown"
+      name="type"
+      role="listbox"
+      tabindex="0"
     >
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="false"
-        aria-selected="true"
-        class="selected item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
       >
-        <i
-          aria-hidden="true"
-          class="adjust icon"
-        />
-        <span
-          class="text"
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
         >
-          boolean
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="font icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="adjust icon"
+          />
+          <span
+            class="text"
+          >
+            boolean
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          string
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="hashtag icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="font icon"
+          />
+          <span
+            class="text"
+          >
+            string
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          number
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="calendar alternate outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="hashtag icon"
+          />
+          <span
+            class="text"
+          >
+            number
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          date
-        </span>
-      </div>
-      <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
-      >
-        <i
-          aria-hidden="true"
-          class="clock outline icon"
-        />
-        <span
-          class="text"
+          <i
+            aria-hidden="true"
+            class="calendar alternate outline icon"
+          />
+          <span
+            class="text"
+          >
+            date
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          timestamp
-        </span>
+          <i
+            aria-hidden="true"
+            class="clock outline icon"
+          />
+          <span
+            class="text"
+          >
+            timestamp
+          </span>
+        </div>
       </div>
     </div>
   </div>

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

@@ -29,12 +29,15 @@ export default function Clauses({ labelId }) {
         />
       ))}
       <Divider horizontal>
-        <Button
-          size="mini"
-          onClick={() => append({ expressions: [newExpression()] })}
-        >
-          {formatMessage({ id: "expression.clause.action.addGroup" })}
-        </Button>
+        <Button.Group basic size="medium">
+          <Button
+            icon="plus"
+            content={formatMessage({
+              id: "expression.clause.action.addGroup",
+            })}
+            onClick={() => append({ expressions: [newExpression()] })}
+          />
+        </Button.Group>
       </Divider>
     </Form.Field>
   );
@@ -93,17 +96,22 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
           </div>
         ))}
         <Divider horizontal>
-          <Button size="mini" onClick={() => append(newExpression())}>
-            {formatMessage({
-              id: "expression.clause.action.addExpression",
-            })}
-          </Button>
+          <Button.Group basic size="medium">
+            <Button
+              icon="plus"
+              content={formatMessage({
+                id: "expression.clause.action.addExpression",
+              })}
+              onClick={() => append(newExpression())}
+            />
+          </Button.Group>
         </Divider>
       </Segment>
       <Divider horizontal>{lastGroup ? null : "OR"}</Divider>
     </div>
   );
 };
+
 ClauseExpression.propTypes = {
   groupIndex: PropTypes.number,
   removeGroup: PropTypes.func,

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

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import { useIntl } from "react-intl";
 import { useState, use } from "react";
 import PropTypes from "prop-types";
-import { Dropdown, Button, Grid } from "semantic-ui-react";
+import { Dropdown, Button, Form, Grid, Label } from "semantic-ui-react";
 import { Controller, useFormContext } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
 import Expression from "./Expression";
@@ -27,7 +27,7 @@ export default function Condition({ onDelete }) {
   const { formatMessage } = useIntl();
   const [isShownDelete, setIsShownDelete] = useState();
   const context = use(QxContext);
-  const { control, watch } = useFormContext();
+  const { control, watch, setValue } = useFormContext();
   const { field, functions } = context;
 
   const expression = watch(field);
@@ -68,7 +68,6 @@ export default function Condition({ onDelete }) {
       </div>
     );
   };
-
   return (
     <div
       onMouseEnter={() => setIsShownDelete(true)}
@@ -103,39 +102,41 @@ export default function Condition({ onDelete }) {
             <div className="flex-justify-center">
               <Controller
                 control={control}
-                name={`${field}.value`}
+                name={`${field}.value.name`}
                 rules={{
-                  required: formatMessage({ id: "functions.form.required" }),
+                  validate: (v) => {
+                    const name = v ?? "";
+                    const isValid = Boolean(name) || expression?.value?.isCondition === false;
+                    return isValid || formatMessage({ id: "functions.form.required" });
+                  },
                 }}
                 render={({
-                  field: { onBlur, onChange },
+                  field: { onBlur, onChange, value },
                   fieldState: { error },
                 }) => (
-                  <Dropdown
-                    options={condFuncOptions}
-                    onBlur={onBlur}
-                    error={!!error}
-                    value={expression?.value?.name || ""}
-                    onChange={(_e, { value }) => {
-                      if (value == "customExpression") {
-                        onChange({
-                          ...(expression?.value || {}),
-                          isCondition: false,
-                        });
-                      } else {
-                        onChange({
-                          ...(expression?.value || {}),
-                          name: value,
-                          type: "boolean",
-                          isCondition: true,
-                        });
-                      }
-                    }}
-                    trigger={operatorTrigger(expression?.value?.name)}
-                    pointing="top left"
-                    icon={null}
-                  />
-                )}
+                  <Form.Field error={!!error?.message}>
+                    <Dropdown
+                      options={condFuncOptions}
+                      onBlur={onBlur}
+                      value={value || ""}
+                      fluid
+                      onChange={(_e, { value }) => {
+                        if (value == "customExpression") {
+                          setValue(`${field}.value`, { ...(expression?.value || {}), isCondition: false });
+                        } else {
+                          onChange(value);
+                          setValue(`${field}.value.type`, "boolean");
+                          setValue(`${field}.value.isCondition`, true);
+                        }
+                      }}
+                      trigger={operatorTrigger(value)}
+                      pointing="top left"
+                      icon={null}
+                    />
+                    {error?.message && <Label prompt pointing>{error?.message}</Label>}
+                  </Form.Field>
+                )
+                }
               />
             </div>
           </Grid.Column>

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

@@ -1,10 +1,11 @@
 import _ from "lodash/fp";
 import { use, useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { Dropdown, Label } from "semantic-ui-react";
+import { Dropdown, Form, Label } from "semantic-ui-react";
 
 import QxContext from "@truedat/qx/components/QxContext";
 import { getColorById } from "../../dataViews/queryableFunctions";
+import { useIntl } from "react-intl";
 
 const fieldToKey = ({ parent_id, id }) => `${parent_id}:${id}`;
 const keyToField = (key) => {
@@ -25,6 +26,7 @@ export const fieldsToOptions = _.map((field) => ({
 }));
 
 export default function FieldSelector() {
+  const { formatMessage } = useIntl();
   const { field, type, fields } = use(QxContext);
   const { control, watch, setValue } = useFormContext();
   const fieldOptions = _.flow(
@@ -44,22 +46,34 @@ export default function FieldSelector() {
     <Controller
       control={control}
       name={`${field}.value`}
-      rules={{ required: true }}
+      rules={{
+        required: {
+          value: true,
+          message: formatMessage({ id: "quality_control.form.required" }),
+        },
+      }}
       render={({ field: { onBlur, onChange }, fieldState: { error } }) => (
-        <Dropdown
-          className="select-field-dropdown"
-          selection
-          fluid
-          pointing
-          scrolling
-          onBlur={onBlur}
-          error={!!error}
-          value={selectedKey}
-          options={fieldOptions}
-          onChange={(_e, { value }) =>
-            onChange(_.find(keyToField(value))(fields))
-          }
-        />
+        <Form.Field width={16}>
+          <Dropdown
+            className="select-field-dropdown"
+            error={!!error?.message}
+            selection
+            fluid
+            pointing
+            scrolling
+            onBlur={onBlur}
+            value={selectedKey}
+            options={fieldOptions}
+            onChange={(_e, { value }) =>
+              onChange(_.find(keyToField(value))(fields))
+            }
+          />
+          {error?.message && (
+            <Label prompt pointing>
+              {error?.message}
+            </Label>
+          )}
+        </Form.Field>
       )}
     />
   );