@truedat/qx 5.14.0 → 5.15.0

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

@@ -0,0 +1,100 @@
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+import React, { useState, useContext } from "react";
+import { useFieldArray } from "react-hook-form";
+import { Segment, Divider, Button, Form } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import Condition from "./Condition";
+
+const newExpression = () => ({ shape: "function", value: null });
+
+export default function Clauses() {
+  const { formatMessage } = useIntl();
+  const context = useContext(QxContext);
+  const { field } = context;
+  const { fields, append, remove } = useFieldArray({ name: field });
+
+  return (
+    <Form.Field>
+      <label>{formatMessage({ id: "expression.form.clause" })}</label>
+      {fields.map((_clauseGroup, groupIndex) => (
+        <ClauseExpression
+          key={`clauseGroup-${groupIndex}`}
+          groupIndex={groupIndex}
+          removeGroup={_.size(fields) >= 2 ? remove : null}
+          lastGroup={groupIndex === _.size(fields) - 1}
+        />
+      ))}
+
+      <Divider horizontal>
+        <Button
+          size="mini"
+          onClick={() => append({ expressions: [newExpression()] })}
+        >
+          {formatMessage({ id: "expression.clause.action.addGroup" })}
+        </Button>
+      </Divider>
+    </Form.Field>
+  );
+}
+
+const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
+  const { formatMessage } = useIntl();
+  const context = useContext(QxContext);
+  const { field } = context;
+  const [isShownDelete, setIsShownDelete] = useState();
+  const { fields, append, remove } = useFieldArray({
+    name: `${field}[${groupIndex}].expressions`,
+  });
+
+  return (
+    <div
+      onMouseEnter={() => setIsShownDelete(true)}
+      onMouseLeave={() => setIsShownDelete(false)}
+    >
+      <Segment>
+        <div className="clause-and-group">
+          {isShownDelete && removeGroup ? (
+            <Button
+              size="mini"
+              onClick={() => removeGroup(groupIndex)}
+              icon="trash alternate outline"
+              basic
+              color="red"
+              aria-label="delete"
+            />
+          ) : null}
+        </div>
+
+        {fields.map((_clauseExpression, expressionIndex) => (
+          <div key={`and-${groupIndex}-${expressionIndex}`}>
+            <QxContext.Provider
+              value={{
+                ...context,
+                field: `${field}[${groupIndex}].expressions[${expressionIndex}]`,
+                type: "boolean",
+              }}
+            >
+              <Condition
+                onDelete={
+                  _.size(fields) < 2 ? null : () => remove(expressionIndex)
+                }
+              />
+            </QxContext.Provider>
+            <Divider horizontal>
+              {expressionIndex === _.size(fields) - 1 ? null : "AND"}
+            </Divider>
+          </div>
+        ))}
+        <Divider horizontal>
+          <Button size="mini" onClick={() => append(newExpression())}>
+            {formatMessage({
+              id: "expression.clause.action.addExpression",
+            })}
+          </Button>
+        </Divider>
+      </Segment>
+      <Divider horizontal>{lastGroup ? null : "OR"}</Divider>
+    </div>
+  );
+};

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

@@ -0,0 +1,178 @@
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+import React, { useState, useContext } from "react";
+import { Dropdown, Button, Grid } from "semantic-ui-react";
+import { Controller, useFormContext } from "react-hook-form";
+import QxContext from "@truedat/qx/components/QxContext";
+import Expression from "./Expression";
+
+const notEmptyExpression = _.conforms({
+  name: _.negate(_.isNil),
+  type: _.negate(_.isNil),
+});
+const isConditionFunction = _.conforms({
+  type: _.isEqual("boolean"),
+  params: _.conforms([
+    _.conforms({ name: _.isEqual("arg1"), type: _.isEqual("any") }),
+    _.conforms({ name: _.isEqual("arg2"), type: _.isEqual("any") }),
+  ]),
+});
+const isConditionExpression = (expression, functions) => {
+  const value = _.propOr({}, "value")(expression);
+  const func = _.find({ name: value?.name, type: value?.type })(functions);
+  return _.has("isCondition")(value)
+    ? value?.isCondition
+    : isConditionFunction(func) || !notEmptyExpression(value);
+};
+
+export default function Condition({ onDelete }) {
+  const { formatMessage } = useIntl();
+  const [isShownDelete, setIsShownDelete] = useState();
+  const context = useContext(QxContext);
+  const { control, watch } = useFormContext();
+  const { field, functions } = 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 operatorTrigger = (name) => {
+    const currentCondFunction = _.find({ name })(conditionFunctions);
+    return (
+      <div className="condition-operator-trigger">
+        {currentCondFunction ? (
+          <b>
+            <code>
+              {currentCondFunction.operator || currentCondFunction.name}
+            </code>
+          </b>
+        ) : (
+          <span>
+            {formatMessage({
+              id: "expression.condition.selectFunction",
+            })}
+          </span>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      onMouseEnter={() => setIsShownDelete(true)}
+      onMouseLeave={() => setIsShownDelete(false)}
+    >
+      {!isCondition ? (
+        <QxContext.Provider
+          value={{
+            ...context,
+            field,
+            omitLogicOperators: true,
+          }}
+        >
+          <Expression onDelete={isShownDelete ? onDelete : null} deletable />
+        </QxContext.Provider>
+      ) : (
+        <Grid className="condition-row">
+          <Grid.Column width={6}>
+            <QxContext.Provider
+              value={{
+                ...context,
+                type: "any",
+                field: `${field}.value.args.arg1`,
+                omitLogicOperators: true,
+                defaultShape: "field",
+              }}
+            >
+              <Expression />
+            </QxContext.Provider>
+          </Grid.Column>
+
+          <Grid.Column width={3}>
+            <div className="flex-justify-center">
+              <Controller
+                control={control}
+                name={`${field}.value`}
+                rules={{
+                  required: formatMessage({ id: "functions.form.required" }),
+                }}
+                render={({
+                  field: { onBlur, onChange },
+                  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}
+                  />
+                )}
+              />
+            </div>
+          </Grid.Column>
+
+          <Grid.Column width={6}>
+            <QxContext.Provider
+              value={{
+                ...context,
+                type: "any",
+                field: `${field}.value.args.arg2`,
+                omitLogicOperators: true,
+                defaultShape: "field",
+              }}
+            >
+              <Expression />
+            </QxContext.Provider>
+          </Grid.Column>
+
+          <Grid.Column width={1} verticalAlign="middle">
+            {onDelete && isShownDelete ? (
+              <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>
+  );
+}

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

@@ -0,0 +1,54 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import { useFormContext } from "react-hook-form";
+import { Button, Grid, Icon } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import ShapeSelector from "./ShapeSelector";
+import FunctionSelector from "./FunctionSelector";
+import ParamSelector from "./ParamSelector";
+import FieldSelector from "./FieldSelector";
+import ConstantSelector from "./ConstantSelector";
+
+export default function Expression({ onDelete, deletable }) {
+  const { field, aggregate } = useContext(QxContext);
+  const { watch } = useFormContext();
+  const shape = watch(`${field}.shape`);
+
+  const valueComponentForShape = {
+    function: <FunctionSelector />,
+    constant: <ConstantSelector />,
+    param: <ParamSelector />,
+    field: <FieldSelector />,
+  };
+
+  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>
+  );
+}
+
+Expression.propTypes = {
+  onDelete: PropTypes.func,
+  deletable: PropTypes.bool,
+};

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

@@ -0,0 +1,66 @@
+import _ from "lodash/fp";
+import React, { useContext, useEffect } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { Dropdown, Label } from "semantic-ui-react";
+
+import QxContext from "@truedat/qx/components/QxContext";
+import { getColorById } from "../../dataViews/queryableFunctions";
+
+const fieldToKey = ({ parent_id, id }) => `${parent_id}:${id}`;
+const keyToField = (key) => {
+  if (!key) return {};
+  const [parent_id, id] = key.split(":");
+  return { parent_id: parseInt(parent_id), id: parseInt(id) };
+};
+export const fieldsToOptions = _.map((field) => ({
+  key: fieldToKey(field),
+  value: fieldToKey(field),
+  text: field.name,
+  image: (
+    <Label
+      color={getColorById(field.parent_id)}
+      content={field?.alias || field?.parent_name}
+    />
+  ),
+}));
+
+export default function FieldSelector() {
+  const { field, type, fields } = useContext(QxContext);
+  const { control, watch, setValue } = useFormContext();
+  const fieldOptions = _.flow(
+    _.filter((field) => type === "any" || field.type == type),
+    fieldsToOptions
+  )(fields);
+
+  const selectedField = watch(`${field}.value`);
+  const selectedKey = selectedField ? fieldToKey(selectedField) : null;
+  const selectedOption = _.find({ key: selectedKey })(fieldOptions);
+
+  useEffect(() => {
+    if (selectedKey && !selectedOption) setValue(`${field}.value`, null);
+  }, [selectedOption, selectedKey]);
+
+  return _.isEmpty(fieldOptions) ? null : (
+    <Controller
+      control={control}
+      name={`${field}.value`}
+      rules={{ required: true }}
+      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))
+          }
+        />
+      )}
+    />
+  );
+}

package/src/components/{functions → common}/expressions/FunctionArgs.js

@@ -37,6 +37,7 @@ export default function FunctionArgs() {
                 ...context,
                 type,
                 field: `${field}.value.args.${name}`,
+                aggregate: false,
               }}
             >
               <Expression />

package/src/components/{functions → common}/expressions/FunctionSelector.js

@@ -9,7 +9,8 @@ import FunctionArgs from "./FunctionArgs";
 
 export default function FunctionSelector() {
   const { formatMessage } = useIntl();
-  const { functions, field, type } = useContext(QxContext);
+  const { functions, field, type, omitLogicOperators, aggregate } =
+    useContext(QxContext);
   const { control, watch } = useFormContext();
 
   const [collapsed, setCollapsed] = useState(false);
@@ -21,8 +22,20 @@ export default function FunctionSelector() {
   };
   const functionName = watch("name");
   const functionType = watch("type");
+  const currentFunction = watch(`${field}.value`);
 
-  const funcs = type === "any" ? functions : _.filter({ type })(functions);
+  const validFunctionType = (func) => type === "any" || func.type === type;
+  const validLogicOperator = (func) =>
+    !omitLogicOperators ||
+    !(_.includes(func.name)(["and", "or"]) && func.type === "boolean");
+  const validAggregate = (func) => !(aggregate ^ (func.class === "aggregator"));
+
+  const funcs = _.filter(
+    (func) =>
+      validFunctionType(func) &&
+      validLogicOperator(func) &&
+      validAggregate(func)
+  )(functions);
 
   const funcOpts = _.flow(
     _.reject({ name: functionName, type: functionType }),
@@ -36,7 +49,7 @@ export default function FunctionSelector() {
             <div className="flex-center">
               <div>{name}</div>
               <div className="function-params-label">
-                {params.map(({ type: paramType, name: paramName }, index) => (
+                {params?.map(({ type: paramType, name: paramName }, index) => (
                   <Label key={index} color={typeToColor(paramType)}>
                     <Icon name={typeToIcon(paramType)} />
                     {paramName}
@@ -73,7 +86,14 @@ export default function FunctionSelector() {
                 onBlur={onBlur}
                 error={!!error}
                 options={funcOpts}
-                onChange={(_e, { value }) => onChange(keyToFn(value))}
+                onChange={(_e, { value }) =>
+                  onChange(
+                    _.omit(["isCondition"])({
+                      ...currentFunction,
+                      ...keyToFn(value),
+                    })
+                  )
+                }
                 placeholder={formatMessage(
                   { id: "functions.form.expression.function.placeholder" },
                   { type }

package/src/components/{functions → common}/expressions/ParamSelector.js

@@ -3,14 +3,14 @@ import React, { useContext, useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { Dropdown } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
-import useWatchParams from "../useWatchParams";
+import useWatchParams from "./useWatchParams";
 
 export default function ParamSelector() {
   const { field, type } = useContext(QxContext);
   const { control, watch, setValue } = useFormContext();
 
   const params = useWatchParams();
-  const value = watch(`${field}.value`);
+  const value = watch(`${field}.value.id`);
 
   const options = _.flow(
     _.filter((field) => type === "any" || field.type == type),
@@ -30,7 +30,7 @@ export default function ParamSelector() {
   return (
     <Controller
       control={control}
-      name={`${field}.value`}
+      name={`${field}.value.id`}
       rules={{ required: true }}
       render={({
         field: { onBlur, onChange, value },

package/src/components/{functions → common}/expressions/ShapeSelector.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import React, { useEffect, useContext } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Dropdown } from "semantic-ui-react";
@@ -14,7 +14,12 @@ const shapeToSymbol = {
 
 export default function ShapeSelector() {
   const { formatMessage } = useIntl();
-  const { fields, field, type } = useContext(QxContext);
+  const {
+    fields,
+    field,
+    type,
+    defaultShape = "function",
+  } = useContext(QxContext);
   const { control, watch, setValue } = useFormContext();
 
   const params = watch("params");
@@ -34,11 +39,22 @@ export default function ShapeSelector() {
       (shape === "field" && emptyTypeFields)
   )(["constant", "function", "param", "field"]);
 
+  const shape = watch(`${field}.shape`);
+
+  useEffect(() => {
+    if (!shape) {
+      const initialShape = _.contains(defaultShape)(shapes)
+        ? defaultShape
+        : "function";
+      setValue(`${field}.shape`, initialShape, { shouldValidate: true });
+    }
+  }, [shape]);
+
   const shapeDropdownOptions = _.map((v) => ({
     key: v,
     value: v,
     content: (
-      <div style={{ display: "flex", alignItems: "center" }}>
+      <div className="flex-center">
         <small style={{ marginRight: "5px" }}>
           <b>
             <code>{shapeToSymbol[v]}</code>
@@ -53,7 +69,7 @@ export default function ShapeSelector() {
     <Controller
       name={`${field}.shape`}
       control={control}
-      render={({ field: { onBlur, onChange, value } }) => (
+      render={({ field: { onBlur, onChange } }) => (
         <Dropdown
           onBlur={onBlur}
           options={shapeDropdownOptions}
@@ -62,9 +78,9 @@ export default function ShapeSelector() {
             setValue(`${field}.value`, undefined);
           }}
           trigger={
-            <div className="shape-selector-trigger">{shapeToSymbol[value]}</div>
+            <div className="shape-selector-trigger">{shapeToSymbol[shape]}</div>
           }
-          value={value}
+          value={shape}
           pointing="top left"
           icon={null}
         />

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import Clauses from "../Clauses";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "expression.clause.action.addGroup": "Add Group",
+      "expression.form.clause": "Clause",
+      "expression.clause.action.addExpression": "addExpression",
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<Clauses />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Clauses />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot with content", () => {
+    const { container } = render(
+      <TestFormWrapper
+        context={{
+          field: "test",
+        }}
+        defaultValues={{
+          test: [
+            [
+              {
+                shape: "function",
+                value: {
+                  name: "eq",
+                  type: "boolean",
+                },
+              },
+            ],
+          ],
+        }}
+      >
+        <Clauses />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { render } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import Condition from "../Condition";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.form.required": "Required",
+      "expression.condition.selectFunction": "Select Function",
+      "expression.condition.customExpression": "Custom Expression",
+      "functions.form.expression.function.placeholder": "function placeholder",
+      "functions.expression.shape.function": "Function",
+      "functions.expression.shape.constant": "Constant",
+    },
+  },
+};
+
+describe("<Condition />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Condition />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/src/components/{functions → common}/expressions/__tests__/ConstantSelector.spec.js

@@ -10,6 +10,11 @@ const renderOpts = {
       "functions.expression.constant.false": "false",
       "functions.expression.constant.true": "true",
       "functions.form.required": "required",
+      "expressions.data_type.timestamp": "timestamp",
+      "expressions.data_type.date": "date",
+      "expressions.data_type.number": "number",
+      "expressions.data_type.string": "string",
+      "expressions.data_type.boolean": "boolean",
     },
   },
   fallback: "lazy",
@@ -30,7 +35,7 @@ describe("<ConstantSelector />", () => {
     const watcher = jest.fn();
 
     const { container, findByText } = render(
-      <TestFormWrapper watcher={watcher} type="any">
+      <TestFormWrapper watcher={watcher} context={{ type: "any" }}>
         <ConstantSelector />
       </TestFormWrapper>,
       renderOpts