@truedat/qx 7.13.6 → 7.13.8

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

@@ -2,7 +2,14 @@ import _ from "lodash/fp";
 import { useState, use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
-import { Dropdown, Accordion, Icon, Label, Header } from "semantic-ui-react";
+import {
+  Dropdown,
+  Accordion,
+  Form,
+  Icon,
+  Label,
+  Header,
+} from "semantic-ui-react";
 import { typeToColor, typeToIcon } from "@truedat/qx/types";
 import QxContext from "@truedat/qx/components/QxContext";
 import FunctionArgs from "./FunctionArgs";
@@ -76,33 +83,41 @@ export default function FunctionSelector() {
           <Controller
             control={control}
             name={`${field}.value`}
-            rules={{ required: true }}
+            rules={{
+              required: {
+                value: true,
+                message: formatMessage({ id: "quality_control.form.required" }),
+              },
+            }}
             render={({
               field: { onBlur, onChange, value },
               fieldState: { error },
             }) => (
-              <Dropdown
-                deburr
-                onBlur={onBlur}
-                error={!!error}
-                options={funcOpts}
-                onChange={(_e, { value }) =>
-                  onChange(
-                    _.omit(["isCondition"])({
-                      ...currentFunction,
-                      ...keyToFn(value),
-                    })
-                  )
-                }
-                placeholder={formatMessage(
-                  { id: "functions.form.expression.function.placeholder" },
-                  { type }
+              <Form.Field width={16}>
+                <Dropdown
+                  deburr
+                  onBlur={onBlur}
+                  error={!!error?.message}
+                  options={funcOpts}
+                  onChange={(_e, { value }) => {
+                    onChange({ ...currentFunction, ...keyToFn(value) });
+                    onBlur && onBlur();
+                  }}
+                  placeholder={formatMessage(
+                    { id: "functions.form.expression.function.placeholder" },
+                    { type }
+                  )}
+                  search
+                  fluid
+                  selection
+                  value={fnToKey(value || {})}
+                />
+                {error?.message && (
+                  <Label prompt pointing>
+                    {error?.message}
+                  </Label>
                 )}
-                search
-                fluid
-                selection
-                value={fnToKey(value || {})}
-              />
+              </Form.Field>
             )}
           />
         </div>

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

@@ -20,6 +20,10 @@ export default function ShapeSelector() {
   const params = watch("params");
   const value = watch(`${field}.value`);
   const isCondition = _.prop("isCondition")(value);
+  const setTargetValue = (field, value) => {
+    const targetValue = value === "function" ? undefined : { isCondition };
+    setValue(field, targetValue);
+  }
 
   const emptyTypeParams = _.flow(
     _.filter((param) => type === "any" || param.type == type),
@@ -72,11 +76,8 @@ export default function ShapeSelector() {
           options={shapeDropdownOptions}
           onChange={(_e, { value }) => {
             onChange(value);
-            setValue(
-              `${field}.value`,
-              { isCondition },
-              { shouldValidate: true }
-            );
+            setTargetValue(`${field}.value`, value);
+
           }}
           trigger={
             <div className="shape-selector-trigger">{shapeToSymbol[shape]}</div>

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

@@ -95,7 +95,7 @@ describe("<ShapeSelector />", () => {
     );
 
     expect(watcher).toHaveBeenLastCalledWith({
-      test: { shape: "function", value: { isCondition: undefined } },
+      test: { shape: "function", value: undefined },
     });
 
     expect(rendered.container).toMatchSnapshot();

package/src/components/common/expressions/__tests__/__snapshots__/Clauses.spec.js.snap

@@ -11,11 +11,19 @@ exports[`<Clauses /> matches the latest snapshot 1`] = `
     <div
       class="ui horizontal divider"
     >
-      <button
-        class="ui mini button"
+      <div
+        class="ui medium basic buttons"
       >
-        Add Group
-      </button>
+        <button
+          class="ui button"
+        >
+          <i
+            aria-hidden="true"
+            class="plus icon"
+          />
+          Add Group
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -39,11 +47,19 @@ exports[`<Clauses /> matches the latest snapshot with content 1`] = `
         <div
           class="ui horizontal divider"
         >
-          <button
-            class="ui mini button"
+          <div
+            class="ui medium basic buttons"
           >
-            addExpression
-          </button>
+            <button
+              class="ui button"
+            >
+              <i
+                aria-hidden="true"
+                class="plus icon"
+              />
+              addExpression
+            </button>
+          </div>
         </div>
       </div>
       <div
@@ -53,11 +69,19 @@ exports[`<Clauses /> matches the latest snapshot with content 1`] = `
     <div
       class="ui horizontal divider"
     >
-      <button
-        class="ui mini button"
+      <div
+        class="ui medium basic buttons"
       >
-        Add Group
-      </button>
+        <button
+          class="ui button"
+        >
+          <i
+            aria-hidden="true"
+            class="plus icon"
+          />
+          Add Group
+        </button>
+      </div>
     </div>
   </div>
 </div>

package/src/components/common/expressions/__tests__/__snapshots__/Condition.spec.js.snap

@@ -92,38 +92,42 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
                       class="dropdown icon"
                     />
                     <div
-                      aria-expanded="false"
-                      class="ui fluid search selection dropdown"
-                      role="combobox"
+                      class="sixteen wide field"
                     >
-                      <input
-                        aria-autocomplete="list"
-                        autocomplete="off"
-                        class="search"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
                       <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        class="divider text"
-                        role="alert"
-                      >
-                        functions.form.expression.function.placeholder
-                      </div>
-                      <i
-                        aria-hidden="true"
-                        class="dropdown icon"
-                      />
-                      <div
-                        class="menu transition"
-                        role="listbox"
+                        aria-expanded="false"
+                        class="ui fluid search selection dropdown"
+                        role="combobox"
                       >
+                        <input
+                          aria-autocomplete="list"
+                          autocomplete="off"
+                          class="search"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          aria-atomic="true"
+                          aria-live="polite"
+                          class="divider text"
+                          role="alert"
+                        >
+                          functions.form.expression.function.placeholder
+                        </div>
+                        <i
+                          aria-hidden="true"
+                          class="dropdown icon"
+                        />
                         <div
-                          class="message"
+                          class="menu transition"
+                          role="listbox"
                         >
-                          No results found.
+                          <div
+                            class="message"
+                          >
+                            No results found.
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -144,34 +148,38 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
           class="flex-justify-center"
         >
           <div
-            aria-expanded="false"
-            class="ui top left pointing dropdown"
-            role="listbox"
-            tabindex="0"
+            class="field"
           >
             <div
-              class="condition-operator-trigger"
-            >
-              <span>
-                expression.condition.selectFunction
-              </span>
-            </div>
-            <div
-              class="menu transition"
+              aria-expanded="false"
+              class="ui fluid top left pointing dropdown"
+              role="listbox"
+              tabindex="0"
             >
               <div
-                aria-checked="false"
-                aria-selected="true"
-                class="selected item"
-                role="option"
-                style="pointer-events: all;"
+                class="condition-operator-trigger"
               >
-                <span
-                  class="text"
-                >
-                  expression.condition.customExpression
+                <span>
+                  expression.condition.selectFunction
                 </span>
               </div>
+              <div
+                class="menu transition"
+              >
+                <div
+                  aria-checked="false"
+                  aria-selected="true"
+                  class="selected item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    expression.condition.customExpression
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -262,38 +270,42 @@ exports[`<Condition /> matches the latest snapshot 1`] = `
                       class="dropdown icon"
                     />
                     <div
-                      aria-expanded="false"
-                      class="ui fluid search selection dropdown"
-                      role="combobox"
+                      class="sixteen wide field"
                     >
-                      <input
-                        aria-autocomplete="list"
-                        autocomplete="off"
-                        class="search"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
                       <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        class="divider text"
-                        role="alert"
-                      >
-                        functions.form.expression.function.placeholder
-                      </div>
-                      <i
-                        aria-hidden="true"
-                        class="dropdown icon"
-                      />
-                      <div
-                        class="menu transition"
-                        role="listbox"
+                        aria-expanded="false"
+                        class="ui fluid search selection dropdown"
+                        role="combobox"
                       >
+                        <input
+                          aria-autocomplete="list"
+                          autocomplete="off"
+                          class="search"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          aria-atomic="true"
+                          aria-live="polite"
+                          class="divider text"
+                          role="alert"
+                        >
+                          functions.form.expression.function.placeholder
+                        </div>
+                        <i
+                          aria-hidden="true"
+                          class="dropdown icon"
+                        />
                         <div
-                          class="message"
+                          class="menu transition"
+                          role="listbox"
                         >
-                          No results found.
+                          <div
+                            class="message"
+                          >
+                            No results found.
+                          </div>
                         </div>
                       </div>
                     </div>

package/src/components/common/expressions/__tests__/__snapshots__/ConstantSelector.spec.js.snap

@@ -3,14 +3,13 @@
 exports[`<ConstantSelector /> matches the latest snapshot 1`] = `
 <div>
   <div
-    class="required field"
+    class="field"
   >
     <div
       class="ui input"
     >
       <input
         autocomplete="off"
-        required=""
         type="text"
       />
     </div>
@@ -21,124 +20,127 @@ exports[`<ConstantSelector /> matches the latest snapshot 1`] = `
 exports[`<ConstantSelector /> user interaction 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui basic button dropdown"
-    name="type"
-    role="listbox"
+    class="field"
     style=""
-    tabindex="0"
   >
     <div
-      aria-atomic="true"
-      aria-live="polite"
-      class="divider text"
-      role="alert"
-    >
-      expressions.data_type.string
-    </div>
-    <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"
     >
       <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
-        role="option"
-        style="pointer-events: all;"
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider text"
+        role="alert"
       >
-        <i
-          aria-hidden="true"
-          class="adjust icon"
-        />
-        <span
-          class="text"
-        >
-          expressions.data_type.boolean
-        </span>
+        expressions.data_type.string
       </div>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
-        aria-checked="true"
-        aria-selected="true"
-        class="active selected item"
-        role="option"
-        style="pointer-events: all;"
+        class="menu transition"
       >
-        <i
-          aria-hidden="true"
-          class="font icon"
-        />
-        <span
-          class="text"
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.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="adjust icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.boolean
+          </span>
+        </div>
+        <div
+          aria-checked="true"
+          aria-selected="true"
+          class="active selected item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.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="font icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.string
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.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="hashtag icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.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"
+          >
+            expressions.data_type.date
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
         >
-          expressions.data_type.timestamp
-        </span>
+          <i
+            aria-hidden="true"
+            class="clock outline icon"
+          />
+          <span
+            class="text"
+          >
+            expressions.data_type.timestamp
+          </span>
+        </div>
       </div>
     </div>
   </div>
   <div
-    class="required field"
+    class="field"
   >
     <div
       class="ui input"
     >
       <input
         autocomplete="off"
-        required=""
         type="text"
         value=""
       />