@truedat/qx 8.10.2 → 8.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "8.10.2",
+  "version": "8.10.4",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -59,7 +59,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.10.2",
+    "@truedat/test": "8.10.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -92,5 +92,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "40436c0d8d650f31421d9695035f2d54e5b1c28c"
+  "gitHead": "fe4fda03b2b73d26f644219d806dcc45767a3c7a"
 }

package/src/components/QxRoutes.js

@@ -11,7 +11,8 @@ import {
 } from "@truedat/core/routes";
 import DataViewEditor from "./dataViews/DataViewEditor";
 import DataViews from "./dataViews/DataViews";
-import Functions from "./functions/Functions";
+import FunctionEdit from "./functions/FunctionEdit";
+import FunctionsList from "./functions/FunctionsList";
 import QualityControlRoutes from "./qualityControls/QualityControlRoutes";
 import ScoreRoutes from "./scores/ScoreRoutes";
 import ScoreGroupsRoutes from "./scores/ScoreGroupsRoutes";
@@ -29,12 +30,12 @@ export default function QxRoutes() {
       </Route>
       <Route
         path={FUNCTIONS}
-        element={
-          <ProtectedRoute authorization="quality_control">
-            <Functions />
-          </ProtectedRoute>
-        }
-      />
+        element={<ProtectedRoute authorization="quality_control" />}
+      >
+        <Route index element={<FunctionsList />} />
+        <Route path="new" element={<FunctionEdit />} />
+        <Route path=":id" element={<FunctionEdit />} />
+      </Route>
       <Route
         path={`${QUALITY_CONTROLS}/*`}
         element={

package/src/components/__tests__/QxRoutes.spec.js

@@ -17,7 +17,8 @@ jest.mock("@truedat/core/hooks/useAuthorized", () => ({
 
 // Mock all child components
 jest.mock("../dataViews/DataViews", () => () => <div>DataViews</div>);
-jest.mock("../functions/Functions", () => () => <div>Functions</div>);
+jest.mock("../functions/FunctionsList", () => () => <div>FunctionsList</div>);
+jest.mock("../functions/FunctionEdit", () => () => <div>FunctionEdit</div>);
 jest.mock("../qualityControls/QualityControlRoutes", () => () => (
   <div>QualityControlRoutes</div>
 ));

package/src/components/__tests__/__fixtures__/helper.js

@@ -19,6 +19,13 @@ export const messages = {
     "expression.clause.action.addGroup": "Add group",
     "expression.condition.customExpression": "Custom expression",
     "expression.condition.selectFunction": "Select function",
+    "expression.condition.class.comparison": "Comparison",
+    "expression.condition.class.length_comparison": "Length comparison",
+    "expression.condition.class.date_comparisons": "Date comparisons",
+    "expression.condition.class.string": "String",
+    "expression.condition.class.format": "Format",
+    "expression.condition.class.logic": "Logic",
+    "expression.condition.class.validation": "Validation",
     "expressions.data_type.any": "any",
     "expressions.data_type.boolean": "boolean",
     "expressions.data_type.date": "date",
@@ -54,6 +61,12 @@ export const messages = {
     "functions.header": "Quality Functions",
     "functions.no_selection": "No function selected",
     "functions.subheader": "List and edit quality functions",
+    "functions.list.count": "{count} functions",
+    "functions.table.class": "Class",
+    "functions.table.description": "Description",
+    "functions.table.name": "Name",
+    "functions.table.params": "Parameters",
+    "functions.table.type": "Type",
     "group.props.name": "Name",
     "quality_control.actions.do_execution": "Execute quality control",
     "quality_control.actions.execution.confirmation.content":

package/src/components/__tests__/__snapshots__/QxRoutes.spec.js.snap

@@ -13,7 +13,7 @@ exports[`<QxRoutes /> renders correctly with default route 1`] = `<div />`;
 exports[`<QxRoutes /> renders correctly with functions route 1`] = `
 <div>
   <div>
-    Functions
+    FunctionsList
   </div>
 </div>
 `;

package/src/components/common/ClauseViewer.js

@@ -4,7 +4,10 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Divider, Label, Segment } from "semantic-ui-react";
 import { useFunctions } from "@truedat/qx/hooks/useFunctions";
-import { isConditionFunction } from "@truedat/qx/components/common/expressions/Condition";
+import {
+  argNames,
+  isConditionFunction,
+} from "@truedat/qx/components/common/expressions/Condition";
 import QxContext from "@truedat/qx/components/QxContext";
 import { getColorById } from "../dataViews/queryableFunctions";
 import "@truedat/qx/styles/Expression.less";
@@ -27,9 +30,8 @@ const isExpressionValid = (expression, functions = []) => {
       }
       const func = _.find({ name: value.name, type: value.type })(functions);
       if (func && isConditionFunction(func)) {
-        return (
-          isExpressionValid(value.args?.arg1, functions) &&
-          isExpressionValid(value.args?.arg2, functions)
+        return argNames(func).every((argName) =>
+          isExpressionValid(value.args?.[argName], functions),
         );
       }
 
@@ -145,6 +147,7 @@ function ExpressionFunctionViewer({ value, alias }) {
   return isConditionFunction(func) ? (
     <ConditionExpressionFunctionViewer
       value={value}
+      func={func}
       operator={func?.operator}
     />
   ) : (
@@ -203,7 +206,7 @@ function GenericExpressionFunctionViewer({ alias, value }) {
 GenericExpressionFunctionViewer.propTypes = {
   value: PropTypes.object,
 };
-function ConditionExpressionFunctionViewer({ value, operator }) {
+function ConditionExpressionFunctionViewer({ value, operator, func }) {
   const { formatMessage } = useIntl();
   if (!value || !value.args) {
     return (
@@ -213,17 +216,58 @@ function ConditionExpressionFunctionViewer({ value, operator }) {
     );
   }
 
+  const names = argNames(func);
+
+  // Same precedence the editor uses in Condition.js: only 6 of the ~100 functions
+  // carry an `operator`, but every one carries a `label`.
+  const label = operator || func?.label || func?.name;
+
+  // Unary conditions read as `f( x )`. The infix layout below would trail the
+  // name *after* its own operand, which misreads as belonging to the operand —
+  // badly so when the operand is itself a function block, e.g. `empty(to_string(x))`
+  // rendering as `to_string ( x ) Empty`.
+  if (names.length === 1) {
+    const arg = value.args[names[0]];
+
+    // A function operand renders as its own multi-line block. Wrap it the way
+    // GenericExpressionFunctionViewer does: inline parens inside a flex row would
+    // put the closing paren on the first line, above the operand.
+    if (arg?.shape === "function") {
+      return (
+        <div className="text-align-left">
+          <b>{label}</b>(
+          <div className="clause-viewer-function">
+            <ExpressionViewer expression={arg} />
+          </div>
+          )
+        </div>
+      );
+    }
+
+    return (
+      <div className="condition-function-viewer">
+        <b>{label}</b>
+        <span>(</span>
+        <ExpressionViewer expression={arg} />
+        <span>)</span>
+      </div>
+    );
+  }
+
   return (
     <div className="condition-function-viewer">
-      <ExpressionViewer expression={value.args.arg1} />
-      <b className="font-big">{operator}</b>
-      <ExpressionViewer expression={value.args.arg2} />
+      <ExpressionViewer expression={value.args[names[0]]} />
+      <b className={operator ? "font-big" : undefined}>{label}</b>
+      {names.slice(1).map((argName) => (
+        <ExpressionViewer key={argName} expression={value.args[argName]} />
+      ))}
     </div>
   );
 }
 ConditionExpressionFunctionViewer.propTypes = {
   value: PropTypes.object,
   operator: PropTypes.string,
+  func: PropTypes.object,
 };
 
 function ExpressionConstantViewer({ value }) {

package/src/components/common/DescriptionInput.js

@@ -1,7 +1,5 @@
-import _ from "lodash/fp";
-import { useState } from "react";
 import { useIntl } from "react-intl";
-import { Input, List } from "semantic-ui-react";
+import { Input } from "semantic-ui-react";
 
 export default function DescriptionInput({
   value,
@@ -10,37 +8,14 @@ export default function DescriptionInput({
   name = "description",
 }) {
   const { formatMessage } = useIntl();
-  const [editionMode, setEditMode] = useState();
   return (
-    <List link horizontal>
-      {!editionMode ? (
-        <List.Item
-          as="a"
-          tabIndex={0}
-          onClick={() => setEditMode(true)}
-          onFocus={() => setEditMode(true)}
-          style={{ fontStyle: "italic", fontSize: 13, padding: "9.5px 14px" }}
-        >
-          {_.isEmpty(value)
-            ? formatMessage({ id: "functions.form.add_description" })
-            : value}
-        </List.Item>
-      ) : null}
-      {editionMode ? (
-        <List.Item>
-          <Input
-            onBlur={() => {
-              onBlur && onBlur();
-              setEditMode(false);
-            }}
-            placeholder={formatMessage({ id: "functions.form.description" })}
-            name={name}
-            onChange={onChange}
-            value={value}
-            autoFocus
-          />
-        </List.Item>
-      ) : null}
-    </List>
+    <Input
+      fluid
+      placeholder={formatMessage({ id: "functions.form.description" })}
+      name={name}
+      onChange={onChange}
+      onBlur={onBlur}
+      value={value ?? ""}
+    />
   );
 }

package/src/components/common/TypeSelector.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
-import { Dropdown } from "semantic-ui-react";
+import { Dropdown, Icon, Form, Label } from "semantic-ui-react";
 import { typeToIcon, types } from "@truedat/qx/types";
-import { Form, Label } from "semantic-ui-react";
 
 export default function TypeSelector({
   value,
@@ -11,22 +10,33 @@ export default function TypeSelector({
   withoutTypeAny,
   error,
   name = "type",
+  iconOnly = false,
 }) {
   const { formatMessage } = useIntl();
   const options = _.flow(
-    _.reject((value) => withoutTypeAny && value == "any"),
-    _.map((value) => ({
-      key: value,
-      text: formatMessage({ id: `expressions.data_type.${value}` }),
-      value,
-      icon: typeToIcon(value),
+    _.reject((v) => withoutTypeAny && v == "any"),
+    _.map((v) => ({
+      key: v,
+      text: formatMessage({ id: `expressions.data_type.${v}` }),
+      value: v,
+      icon: typeToIcon(v),
     })),
   )(types);
+
   return (
     <Form.Field error={!!error?.message}>
       <Dropdown
-        button
-        fluid
+        button={!iconOnly}
+        fluid={!iconOnly}
+        icon={iconOnly ? null : undefined}
+        trigger={
+          iconOnly ? (
+            <div className="type-selector-trigger">
+              <Icon name={typeToIcon(value)} />
+            </div>
+          ) : undefined
+        }
+        pointing={iconOnly ? "top left" : undefined}
         onBlur={onBlur}
         name={name}
         options={options}

package/src/components/common/__tests__/ClauseViewer.spec.js

@@ -0,0 +1,150 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import ClauseViewer from "../ClauseViewer";
+
+jest.mock("@truedat/qx/hooks/useFunctions", () => {
+  const originalModule = jest.requireActual("@truedat/qx/hooks/useFunctions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useFunctions: jest.fn(() => ({
+      data: {
+        data: [
+          {
+            name: "eq",
+            type: "boolean",
+            class: "comparison",
+            label: "=",
+            operator: "=",
+            params: [
+              { name: "arg1", type: "any" },
+              { name: "arg2", type: "any" },
+            ],
+          },
+          {
+            // Only 6 of the ~100 shipped functions carry an `operator`; the rest
+            // rely on `label`, as `lte_first_day_of_current_year` does here.
+            name: "lte_first_day_of_current_year",
+            type: "boolean",
+            class: "lte_date",
+            label: "≤ First Day of Year",
+            params: [{ name: "value", type: "date" }],
+          },
+          {
+            name: "empty",
+            type: "boolean",
+            class: "validation",
+            label: "Empty",
+            params: [{ name: "value", type: "any" }],
+          },
+          {
+            // Not boolean, so it takes the generic `name ( args )` renderer.
+            name: "to_string",
+            type: "string",
+            class: "string",
+            label: "To String",
+            params: [{ name: "value", type: "any" }],
+          },
+        ],
+      },
+      loading: false,
+      error: null,
+      mutate: jest.fn(),
+    })),
+  };
+});
+
+const field = (name) => ({
+  shape: "field",
+  value: { id: 1, name, parent_id: 0, type: "string" },
+});
+
+const conditionClause = (name, args) => [
+  {
+    expressions: [
+      { shape: "function", value: { name, type: "boolean", args } },
+    ],
+  },
+];
+
+describe("<ClauseViewer />", () => {
+  it("renders the operator for functions that define one", async () => {
+    const rendered = render(
+      <ClauseViewer
+        clause={conditionClause("eq", {
+          arg1: field("product_id"),
+          arg2: field("product_name"),
+        })}
+        parentResource={{ id: 0, embedded: { name: "Products" } }}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("=")).toBeInTheDocument();
+  });
+
+  it("falls back to the function label, not its raw name", async () => {
+    const rendered = render(
+      <ClauseViewer
+        clause={conditionClause("lte_first_day_of_current_year", {
+          value: field("warehouse_id"),
+        })}
+        parentResource={{ id: 0, embedded: { name: "Products" } }}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("≤ First Day of Year")).toBeInTheDocument();
+    expect(
+      rendered.queryByText("lte_first_day_of_current_year"),
+    ).not.toBeInTheDocument();
+
+    // A leaf operand stays on one line rather than expanding into a block.
+    expect(rendered.container.textContent).toBe(
+      "≤ First Day of Year(Products.warehouse_id)",
+    );
+  });
+
+  it("renders unary conditions prefix-first so nesting stays unambiguous", async () => {
+    const rendered = render(
+      <ClauseViewer
+        clause={conditionClause("empty", {
+          value: {
+            shape: "function",
+            value: {
+              name: "to_string",
+              type: "string",
+              args: {
+                value: {
+                  shape: "constant",
+                  value: { type: "string", value: "Text" },
+                },
+              },
+            },
+          },
+        })}
+        parentResource={{ id: 0, embedded: { name: "actor" } }}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.container.textContent).toBe("Empty(to_string(Text))");
+  });
+
+  it("keeps binary conditions infix", async () => {
+    const rendered = render(
+      <ClauseViewer
+        clause={conditionClause("eq", {
+          arg1: field("product_id"),
+          arg2: field("product_name"),
+        })}
+        parentResource={{ id: 0, embedded: { name: "Products" } }}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.container.textContent).toBe(
+      "Products.product_id=Products.product_name",
+    );
+  });
+});

package/src/components/common/__tests__/DescriptionInput.spec.js

@@ -27,13 +27,10 @@ describe("<DescriptionInput />", () => {
     const rendered = render(<DescriptionInput {...props} />, renderOpts);
     await waitForLoad(rendered);
 
-    await user.click(rendered.getByRole("listitem"));
     await user.type(rendered.getByRole("textbox"), "description");
-    await user.click(rendered.getByRole("list"));
+    await user.tab();
 
-    const [_event, { value: lastValue }] = props.onChange.mock.lastCall;
-
-    expect(lastValue).toBe("description");
+    expect(props.onChange).toHaveBeenCalled();
     expect(props.onBlur).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -3,17 +3,14 @@
 exports[`<DescriptionInput /> matches the latest snapshot 1`] = `
 <div>
   <div
-    class="ui horizontal link list"
-    role="list"
+    class="ui fluid input"
   >
-    <a
-      class="item"
-      role="listitem"
-      style="font-style: italic; font-size: 13px; padding: 9.5px 14px;"
-      tabindex="0"
-    >
-      value
-    </a>
+    <input
+      name="description"
+      placeholder="description"
+      type="text"
+      value="value"
+    />
   </div>
 </div>
 `;

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import { useState, use } from "react";
+import { use } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { useFieldArray } from "react-hook-form";
@@ -56,21 +56,24 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
   });
 
   return (
-    <>
+    <div>
       <Segment>
-        <div className="clause-and-group">
-          {removeGroup ? (
-            <Button
-              size="tiny"
-              onClick={() => removeGroup(groupIndex)}
-              icon="trash alternate outline"
-              basic
-              color="red"
-              aria-label="delete"
-            />
-          ) : null}
-        </div>
-        <Divider hidden />
+        {lastGroup && removeGroup ? (
+          <>
+            <div className="clause-and-group">
+              <Button
+                size="tiny"
+                onClick={() => removeGroup(groupIndex)}
+                icon="trash alternate outline"
+                basic
+                color="red"
+                aria-label="delete"
+              />
+            </div>
+            <Divider hidden />
+          </>
+        ) : null}
+
         {fields.map((_clauseExpression, expressionIndex) => (
           <div key={`and-${groupIndex}-${expressionIndex}`}>
             <QxContext
@@ -82,7 +85,9 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
             >
               <Condition
                 onDelete={
-                  expressionIndex > 0 ? () => remove(expressionIndex) : null
+                  _.size(fields) >= 2 && expressionIndex === _.size(fields) - 1
+                    ? () => remove(expressionIndex)
+                    : null
                 }
               />
             </QxContext>
@@ -104,7 +109,7 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
         </Divider>
       </Segment>
       <Divider horizontal>{lastGroup ? null : "OR"}</Divider>
-    </>
+    </div>
   );
 };