@truedat/qx 8.10.2 → 8.10.4

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

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
-import { use } from "react";
+import { use, useState } from "react";
 import PropTypes from "prop-types";
-import { Dropdown, Button, Form, Grid, Label } from "semantic-ui-react";
+import { Dropdown, Button, Form, Input, Label } from "semantic-ui-react";
 import { Controller, useFormContext } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
 import Expression from "./Expression";
@@ -10,11 +10,8 @@ import Expression from "./Expression";
 const hasTypeKey = _.flow(_.keys, _.contains("type"));
 export const isConditionFunction = _.conforms({
   type: _.isEqual("boolean"),
-  params: _.conforms([
-    _.conforms({ name: _.isEqual("arg1"), type: _.isEqual("any") }),
-    _.conforms({ name: _.isEqual("arg2"), type: _.isEqual("any") }),
-  ]),
 });
+export const argNames = (func) => _.map(_.prop("name"))(func?.params ?? []);
 const isConditionExpression = (expression, functions) => {
   const value = _.propOr({}, "value")(expression);
   const func = _.find({ name: value?.name, type: value?.type })(functions);
@@ -23,29 +20,77 @@ const isConditionExpression = (expression, functions) => {
     : isConditionFunction(func) || _.isNil(value) || !hasTypeKey(value);
 };
 
+const CLASS_ORDER = [
+  "comparison",
+  "length_comparison",
+  "eq_date",
+  "neq_date",
+  "gt_date",
+  "gte_date",
+  "lt_date",
+  "lte_date",
+  "string",
+  "format",
+  "logic",
+  "validation",
+];
+
+const CLASS_ICONS = {
+  comparison: "balance scale",
+  length_comparison: "arrows alternate horizontal",
+  eq_date: "calendar alternate outline",
+  neq_date: "calendar alternate outline",
+  gt_date: "calendar alternate outline",
+  gte_date: "calendar alternate outline",
+  lt_date: "calendar alternate outline",
+  lte_date: "calendar alternate outline",
+  string: "font",
+  format: "magic",
+  logic: "code branch",
+  validation: "check circle outline",
+};
+
 export default function Condition({ onDelete }) {
   const { formatMessage } = useIntl();
+  const [searchQuery, setSearchQuery] = useState("");
   const context = use(QxContext);
   const { control, watch, setValue } = useFormContext();
-  const { field, functions } = context;
+  const { field, functions, conditionClasses } = context;
 
   const expression = watch(field);
   const isCondition = isConditionExpression(expression, functions);
 
-  const conditionFunctions = _.filter(isConditionFunction)(functions);
-  const condFuncOptions = [
-    ..._.map(({ name, operator, description }) => ({
-      key: name,
-      text: operator || name,
-      content: <span title={description}>{operator || name}</span>,
-      value: name,
-    }))(conditionFunctions),
-    {
-      key: "customExpression",
-      text: formatMessage({ id: "expression.condition.customExpression" }),
-      value: "customExpression",
-    },
-  ];
+  const conditionFunctions = _.filter(
+    (fn) =>
+      isConditionFunction(fn) && fn.params?.length > 0 && fn.class !== "logic",
+  )(functions);
+
+  const grouped = _.groupBy((fn) => fn.class)(conditionFunctions);
+  const allowedClasses = conditionClasses ?? CLASS_ORDER;
+  const orderedGroups = allowedClasses.filter(
+    (group) => grouped[group]?.length,
+  );
+
+  const selectedFunc = _.find({ name: expression?.value?.name })(
+    conditionFunctions,
+  );
+  const params = selectedFunc?.params ?? [];
+  const arity = params.length || 2;
+  const argName = (i) => params[i]?.name ?? `arg${i + 1}`;
+
+  const argContext = (argField) => ({
+    ...context,
+    type: "any",
+    field: `${field}.value.args.${argField}`,
+    omitLogicOperators: true,
+    defaultShape: "field",
+  });
+
+  const matchesSearch = ({ name, label, operator }) => {
+    if (!searchQuery) return true;
+    const q = searchQuery.toLowerCase();
+    return (operator || label || name).toLowerCase().includes(q);
+  };
 
   const operatorTrigger = (name) => {
     const currentCondFunction = _.find({ name })(conditionFunctions);
@@ -54,7 +99,9 @@ export default function Condition({ onDelete }) {
         {currentCondFunction ? (
           <b>
             <code>
-              {currentCondFunction.operator || currentCondFunction.name}
+              {currentCondFunction.operator ||
+                currentCondFunction.label ||
+                currentCondFunction.name}
             </code>
           </b>
         ) : (
@@ -68,7 +115,7 @@ export default function Condition({ onDelete }) {
     );
   };
   return (
-    <>
+    <div>
       {!isCondition ? (
         <QxContext
           value={{
@@ -80,22 +127,15 @@ export default function Condition({ onDelete }) {
           <Expression onDelete={onDelete} deletable />
         </QxContext>
       ) : (
-        <Grid className="condition-row">
-          <Grid.Column width={6}>
-            <QxContext
-              value={{
-                ...context,
-                type: "any",
-                field: `${field}.value.args.arg1`,
-                omitLogicOperators: true,
-                defaultShape: "field",
-              }}
-            >
-              <Expression />
-            </QxContext>
-          </Grid.Column>
-          <Grid.Column width={3}>
-            <div className="flex-justify-center">
+        <div className="condition-row">
+          <div className="condition-fields">
+            <div className="condition-arg-field">
+              <QxContext value={argContext(argName(0))}>
+                <Expression />
+              </QxContext>
+            </div>
+
+            <div className="condition-operator-field">
               <Controller
                 control={control}
                 name={`${field}.value.name`}
@@ -111,73 +151,132 @@ export default function Condition({ onDelete }) {
                   },
                 }}
                 render={({
-                  field: { onBlur, onChange },
+                  field: { onBlur, onChange, value },
                   fieldState: { error },
-                }) => {
-                  const displayValue = expression?.value?.name ?? "";
-                  return (
-                    <Form.Field error={!!error?.message}>
-                      <Dropdown
-                        options={condFuncOptions}
-                        onBlur={onBlur}
-                        value={displayValue || ""}
-                        fluid
-                        onChange={(_e, { value }) => {
-                          if (value == "customExpression") {
-                            setValue(`${field}.value`, { isCondition: false });
-                          } else {
-                            onChange(value);
-                            setValue(`${field}.value.type`, "boolean");
-                            setValue(`${field}.value.isCondition`, true);
-                          }
-                        }}
-                        trigger={operatorTrigger(displayValue)}
-                        pointing="top left"
-                        icon={null}
-                      />
-                      {error?.message && (
-                        <Label prompt pointing>
-                          {error?.message}
-                        </Label>
-                      )}
-                    </Form.Field>
-                  );
-                }}
+                }) => (
+                  <Form.Field error={!!error?.message}>
+                    <Dropdown
+                      fluid
+                      onClose={() => setSearchQuery("")}
+                      onBlur={onBlur}
+                      trigger={operatorTrigger(value)}
+                      pointing="top left"
+                      icon={null}
+                      scrolling
+                    >
+                      <Dropdown.Menu>
+                        <Input
+                          icon="search"
+                          iconPosition="left"
+                          className="search"
+                          value={searchQuery}
+                          onChange={(_, { value: q }) => setSearchQuery(q)}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === " ") e.stopPropagation();
+                          }}
+                          fluid
+                        />
+                        <Dropdown.Divider />
+                        {orderedGroups
+                          .map((group) => ({
+                            group,
+                            fns: grouped[group].filter(matchesSearch),
+                          }))
+                          .filter(({ fns }) => fns.length > 0)
+                          .flatMap(({ group, fns }, renderedIndex) => [
+                            ...(renderedIndex > 0
+                              ? [<Dropdown.Divider key={`divider-${group}`} />]
+                              : []),
+                            <Dropdown.Header
+                              key={`header-${group}`}
+                              icon={CLASS_ICONS[group]}
+                              content={formatMessage({
+                                id: `expression.condition.class.${group}`,
+                              })}
+                            />,
+                            ...fns.map(
+                              ({ name, label, operator, description }) => (
+                                <Dropdown.Item
+                                  key={name}
+                                  text={operator || label || name}
+                                  value={name}
+                                  active={value === name}
+                                  selected={value === name}
+                                  title={description}
+                                  onClick={() => {
+                                    const fn = _.find({ name })(
+                                      conditionFunctions,
+                                    );
+                                    const newParams = fn?.params ?? [];
+                                    const oldArgs =
+                                      expression?.value?.args ?? {};
+                                    const nextArgs = newParams.reduce(
+                                      (acc, param, i) => ({
+                                        ...acc,
+                                        [param.name]: oldArgs[argName(i)],
+                                      }),
+                                      {},
+                                    );
+                                    onChange(name);
+                                    setValue(`${field}.value.type`, "boolean");
+                                    setValue(
+                                      `${field}.value.isCondition`,
+                                      true,
+                                    );
+                                    setValue(`${field}.value.args`, nextArgs);
+                                  }}
+                                />
+                              ),
+                            ),
+                          ])}
+                      </Dropdown.Menu>
+                    </Dropdown>
+                    {error?.message && (
+                      <Label prompt pointing>
+                        {error?.message}
+                      </Label>
+                    )}
+                  </Form.Field>
+                )}
               />
             </div>
-          </Grid.Column>
-
-          <Grid.Column width={6}>
-            <QxContext
-              value={{
-                ...context,
-                type: "any",
-                field: `${field}.value.args.arg2`,
-                omitLogicOperators: true,
-                defaultShape: "field",
-              }}
-            >
-              <Expression />
-            </QxContext>
-          </Grid.Column>
-
-          <Grid.Column width={1} verticalAlign="top">
-            {onDelete ? (
-              <div className="delete-expression-column">
-                <Button
-                  size="mini"
-                  onClick={onDelete}
-                  icon="trash alternate outline"
-                  basic
-                  color="red"
-                  aria-label="delete"
-                />
-              </div>
-            ) : null}
-          </Grid.Column>
-        </Grid>
+
+            <div className="condition-arg-field">
+              {arity >= 2 && (
+                <QxContext value={argContext(argName(1))}>
+                  <Expression />
+                </QxContext>
+              )}
+            </div>
+
+            <div className="condition-arg-field">
+              {arity >= 3 && (
+                <QxContext value={argContext(argName(2))}>
+                  <Expression />
+                </QxContext>
+              )}
+            </div>
+          </div>
+
+          <div className="delete-expression-column">
+            {onDelete && (
+              <Button
+                size="mini"
+                onClick={onDelete}
+                icon="trash alternate outline"
+                basic
+                color="red"
+                aria-label="delete"
+              />
+            )}
+          </div>
+        </div>
       )}
-    </>
+    </div>
   );
 }
 

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

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import { use } from "react";
 import PropTypes from "prop-types";
 import { useFormContext } from "react-hook-form";
-import { Button, Grid } from "semantic-ui-react";
+import { Button } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
 import ShapeSelector from "./ShapeSelector";
 import FunctionSelector from "./FunctionSelector";
@@ -23,28 +23,22 @@ export default function Expression({ onDelete, deletable }) {
   };
 
   return (
-    <Grid>
-      <Grid.Column width={deletable ? 15 : 16}>
-        <div className="expression-container">
-          {!aggregate ? <ShapeSelector /> : null}
-          {shape ? valueComponentForShape[shape] : null}
-        </div>
-      </Grid.Column>
-      {deletable ? (
-        <Grid.Column width={1} verticalAlign="middle">
-          {onDelete ? (
-            <Button
-              size="mini"
-              onClick={onDelete}
-              icon="trash alternate outline"
-              basic
-              color="red"
-              aria-label="delete"
-            />
-          ) : null}
-        </Grid.Column>
-      ) : null}
-    </Grid>
+    <div className="expression-container">
+      <div className="expression-content">
+        {!aggregate ? <ShapeSelector /> : null}
+        {shape ? valueComponentForShape[shape] : null}
+      </div>
+      {deletable && onDelete && (
+        <Button
+          size="mini"
+          onClick={onDelete}
+          icon="trash alternate outline"
+          basic
+          color="red"
+          aria-label="delete"
+        />
+      )}
+    </div>
   );
 }
 

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

@@ -46,15 +46,15 @@ export default function FunctionSelector() {
 
   const funcOpts = _.flow(
     _.reject({ name: functionName, type: functionType }),
-    _.map(({ name, type, description, params }) => ({
+    _.map(({ name, type, label, operator, description, params }) => ({
       key: fnToKey({ name, type }),
       value: fnToKey({ name, type }),
-      text: fnToKey({ name, type }),
+      text: operator || label || name,
       content: (
         <>
           <Header>
             <div className="flex-center">
-              <div>{name}</div>
+              <div>{operator || label || name}</div>
               <div className="function-params-label">
                 {params?.map(({ type: paramType, name: paramName }, index) => (
                   <Label key={index} color={typeToColor(paramType)}>

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

@@ -38,7 +38,7 @@ export default function ShapeSelector() {
     (shape) =>
       (shape === "param" && emptyTypeParams) ||
       (shape === "field" && emptyTypeFields),
-  )(["constant", "function", "param", "field"]);
+  )(["field", "function", "constant", "param"]);
 
   const shape = watch(`${field}.shape`);
 

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

@@ -96,7 +96,7 @@ describe("<Clauses />", () => {
       ),
     );
     await waitFor(() =>
-      expect(rendered.getAllByLabelText(/delete/i)).toHaveLength(2),
+      expect(rendered.getAllByLabelText(/delete/i)).toHaveLength(1),
     );
 
     await act(async () => {

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

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
 import PropTypes from "prop-types";
@@ -6,6 +7,27 @@ import { useFormContext } from "react-hook-form";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import Condition, { isConditionFunction } from "../Condition";
 
+const eq = {
+  name: "eq",
+  type: "boolean",
+  class: "comparison",
+  params: [
+    { name: "arg1", type: "any" },
+    { name: "arg2", type: "any" },
+  ],
+};
+
+const lengthGt = {
+  name: "length_gt",
+  type: "boolean",
+  class: "length_comparison",
+  label: "LengthGreater",
+  params: [
+    { name: "value", type: "string" },
+    { name: "length", type: "number" },
+  ],
+};
+
 function ValidationTrigger({ name }) {
   const { trigger } = useFormContext();
   return (
@@ -63,6 +85,7 @@ describe("<Condition />", () => {
             {
               name: "eq",
               type: "boolean",
+              class: "comparison",
               params: [
                 { name: "arg1", type: "any" },
                 { name: "arg2", type: "any" },
@@ -100,6 +123,7 @@ describe("<Condition />", () => {
             {
               name: "eq",
               type: "boolean",
+              class: "comparison",
               params: [
                 { name: "arg1", type: "any" },
                 { name: "arg2", type: "any" },
@@ -133,7 +157,7 @@ describe("<Condition />", () => {
     );
   });
 
-  it("switches from condition to custom expression option", async () => {
+  it("marks selected operator as condition function", async () => {
     const user = userEvent.setup({ delay: null });
     const formValuesRef = { current: {} };
     const rendered = render(
@@ -144,6 +168,7 @@ describe("<Condition />", () => {
             {
               name: "eq",
               type: "boolean",
+              class: "comparison",
               params: [
                 { name: "arg1", type: "any" },
                 { name: "arg2", type: "any" },
@@ -155,7 +180,7 @@ describe("<Condition />", () => {
           test: {
             shape: "function",
             value: {
-              name: "eq",
+              name: "",
               type: "boolean",
               isCondition: true,
               args: { arg1: { shape: "field" }, arg2: { shape: "field" } },
@@ -171,42 +196,77 @@ describe("<Condition />", () => {
     );
     await waitForLoad(rendered);
 
-    await user.click(rendered.getAllByRole("listbox")[1]);
     await user.click(
-      rendered.getByText(/expression.condition.customexpression/i),
+      rendered.getByText(/expression.condition.selectfunction/i),
     );
+    await user.click(rendered.getByText(/eq/i));
 
     await waitFor(() =>
-      expect(formValuesRef.current.test.value).toEqual({ isCondition: false }),
+      expect(formValuesRef.current.test.value).toEqual(
+        expect.objectContaining({
+          name: "eq",
+          type: "boolean",
+          isCondition: true,
+        }),
+      ),
     );
   });
 
-  it("marks selected operator as condition function", async () => {
-    const user = userEvent.setup({ delay: null });
+  it("names args after the function params, not their position", async () => {
     const formValuesRef = { current: {} };
     const rendered = render(
       <TestFormWrapper
         context={{
           field: "test",
-          functions: [
-            {
-              name: "eq",
+          functions: [lengthGt],
+        }}
+        defaultValues={{
+          test: {
+            shape: "function",
+            value: {
+              name: "length_gt",
               type: "boolean",
-              params: [
-                { name: "arg1", type: "any" },
-                { name: "arg2", type: "any" },
-              ],
+              isCondition: true,
             },
-          ],
+          },
+        }}
+        watcher={(values) => {
+          formValuesRef.current = values;
+        }}
+      >
+        <Condition />
+      </TestFormWrapper>,
+    );
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(_.keys(formValuesRef.current.test.value.args)).toEqual([
+        "value",
+        "length",
+      ]),
+    );
+  });
+
+  it("remaps operands onto the new param names when the operator changes", async () => {
+    const user = userEvent.setup({ delay: null });
+    const formValuesRef = { current: {} };
+    const rendered = render(
+      <TestFormWrapper
+        context={{
+          field: "test",
+          functions: [eq, lengthGt],
         }}
         defaultValues={{
           test: {
             shape: "function",
             value: {
-              name: "",
+              name: "eq",
               type: "boolean",
               isCondition: true,
-              args: { arg1: { shape: "field" }, arg2: { shape: "field" } },
+              args: {
+                arg1: { shape: "constant", value: { value: "left" } },
+                arg2: { shape: "constant", value: { value: "right" } },
+              },
             },
           },
         }}
@@ -220,18 +280,15 @@ describe("<Condition />", () => {
     await waitForLoad(rendered);
 
     await user.click(
-      rendered.getByText(/expression.condition.selectfunction/i),
+      rendered.container.querySelector(".condition-operator-trigger"),
     );
-    await user.click(rendered.getByText(/eq/i));
+    await user.click(rendered.getByText("LengthGreater"));
 
     await waitFor(() =>
-      expect(formValuesRef.current.test.value).toEqual(
-        expect.objectContaining({
-          name: "eq",
-          type: "boolean",
-          isCondition: true,
-        }),
-      ),
+      expect(formValuesRef.current.test.value.args).toEqual({
+        value: { shape: "constant", value: { value: "left" } },
+        length: { shape: "constant", value: { value: "right" } },
+      }),
     );
   });
 });

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

@@ -84,7 +84,7 @@ describe("<ParamSelector />", () => {
       test: { value: { id: 1 } },
     });
 
-    await user.hover(rendered.getByRole("textbox"));
+    await user.hover(rendered.getByPlaceholderText("functions.form.name"));
     await user.click(rendered.getAllByRole("button")[0]);
 
     expect(watcher).toHaveBeenLastCalledWith({