@truedat/qx 5.12.2 → 5.12.7

package/src/components/functions/__tests__/__snapshots__/FunctionParams.spec.js.snap

@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
+<div>
+  <div
+    class="ui list"
+    role="list"
+  >
+    <div
+      class="item"
+      role="listitem"
+    >
+      <div>
+        <div
+          class="ui grid"
+        >
+          <div
+            class="row"
+          >
+            <div
+              class="column"
+            />
+            <div
+              class="fifteen wide column"
+            >
+              <div
+                class="row"
+              >
+                <div
+                  class="inline fields no-margin"
+                >
+                  <div
+                    class="field"
+                  >
+                    <div
+                      class="ui action input"
+                    >
+                      <input
+                        autocomplete="off"
+                        placeholder="name"
+                        type="text"
+                        value="param1"
+                      />
+                      <div
+                        aria-expanded="false"
+                        class="ui basic button dropdown"
+                        name="type"
+                        role="listbox"
+                        tabindex="0"
+                      >
+                        <div
+                          aria-atomic="true"
+                          aria-live="polite"
+                          class="divider text"
+                          role="alert"
+                        >
+                          boolean
+                        </div>
+                        <i
+                          aria-hidden="true"
+                          class="dropdown icon"
+                        />
+                        <div
+                          class="menu transition"
+                        >
+                          <div
+                            aria-checked="true"
+                            aria-selected="true"
+                            class="active selected item"
+                            role="option"
+                            style="pointer-events: all;"
+                          >
+                            <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;"
+                          >
+                            <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;"
+                          >
+                            <i
+                              aria-hidden="true"
+                              class="hashtag icon"
+                            />
+                            <span
+                              class="text"
+                            >
+                              numeric
+                            </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"
+                            >
+                              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"
+                            >
+                              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"
+                            >
+                              any
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="row"
+              >
+                <div
+                  class="ui horizontal link list"
+                  role="list"
+                >
+                  <a
+                    class="item"
+                    role="listitem"
+                    style="font-style: italic; font-size: 13px; padding: 9.5px 14px;"
+                    tabindex="0"
+                  >
+                    add_description
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="item"
+      role="listitem"
+    >
+      <button
+        class="ui button"
+      >
+        add_param
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FunctionParams /> matches the latest snapshot without param 1`] = `
+<div>
+  <div
+    class="ui list"
+    role="list"
+  >
+    <div
+      class="item"
+      role="listitem"
+    >
+      <button
+        class="ui button"
+      >
+        add_param
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/functions/__tests__/__snapshots__/Functions.spec.js.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Functions /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="archive circular icon"
+      />
+      <div
+        class="content"
+      >
+        functions.header
+        <div
+          class="sub header"
+        >
+          functions.subheader
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui grid"
+    >
+      <div
+        class="four wide column"
+      >
+        <button
+          class="ui fluid button"
+        >
+          functions.action.new
+        </button>
+        <div
+          class="ui divided selection list"
+          role="list"
+        >
+          <div
+            class="item"
+            role="listitem"
+          >
+            <div
+              class="content"
+            >
+              <div
+                class="header"
+              >
+                <div
+                  class="ui teal tiny circular label"
+                  width="100px"
+                >
+                  b
+                </div>
+                 
+                user_false
+                /
+                0
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="eleven wide column"
+      >
+        <h2
+          class="ui icon center aligned header"
+        >
+          <i
+            aria-hidden="true"
+            class="hand pointer outline icon"
+          />
+          <div
+            class="sub header"
+          >
+            functions.no_selection
+          </div>
+        </h2>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/functions/__tests__/useWatchParams.spec.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import useWatchParams from "../useWatchParams";
+
+describe("useWatchParams", () => {
+  it("matches the latest snapshot", () => {
+    const params = [{ name: "param", type: "boolean", id: 1 }];
+    const defaultValues = {
+      params,
+    };
+    const ParamHook = () => {
+      const watchedParams = useWatchParams();
+      expect(watchedParams).toEqual(params);
+      return null;
+    };
+    render(
+      <TestFormWrapper defaultValues={defaultValues}>
+        <ParamHook />
+      </TestFormWrapper>
+    );
+  });
+});

package/src/components/functions/expressions/ConstantSelector.js

@@ -0,0 +1,26 @@
+import React, { useContext, useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import QxContext from "@truedat/qx/components/QxContext";
+import {
+  AnySelector,
+  BooleanSelector,
+  DefaultSelector,
+} from "./constantInputs";
+
+export default function ConstantSelector() {
+  const { type, field } = useContext(QxContext);
+  const { setValue } = useFormContext();
+
+  useEffect(() => {
+    if (type && type != "any") setValue(`${field}.value.type`, type);
+  }, [type]);
+
+  switch (type) {
+    case "any":
+      return <AnySelector />;
+    case "boolean":
+      return <BooleanSelector />;
+    default:
+      return <DefaultSelector />;
+  }
+}

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

@@ -0,0 +1,40 @@
+import _ from "lodash/fp";
+import React, { useContext, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useFormContext } from "react-hook-form";
+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({ defaultShape = "function" }) {
+  const { field } = useContext(QxContext);
+  const { watch, setValue } = useFormContext();
+  const shape = watch(`${field}.shape`);
+
+  useEffect(() => {
+    if (!shape) {
+      setValue(`${field}.shape`, defaultShape, { shouldValidate: true });
+    }
+  }, [shape]);
+
+  const valueComponentForShape = {
+    function: <FunctionSelector />,
+    constant: <ConstantSelector />,
+    param: <ParamSelector />,
+    field: <FieldSelector />,
+  };
+
+  return (
+    <div className="expression-container">
+      <ShapeSelector />
+      {shape ? valueComponentForShape[shape] : null}
+    </div>
+  );
+}
+
+Expression.propTypes = {
+  defaultShape: PropTypes.string,
+};

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

@@ -0,0 +1,56 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { Dropdown, Label } from "semantic-ui-react";
+
+import QxContext from "@truedat/qx/components/QxContext";
+
+export const fieldsToOptions = (fields) =>
+  _.map((field) => ({
+    key: JSON.stringify(field),
+    value: field,
+    text: field.name,
+    content: (
+      <>
+        {field.dataset ? (
+          <Label
+            color={field.dataset?.color}
+            content={field.dataset?.alias || field.dataset?.name}
+          />
+        ) : null}
+        {field.name}
+      </>
+    ),
+    color: field.dataset?.color,
+  }))(fields);
+
+export default function FieldSelector() {
+  const { field, type, fields } = useContext(QxContext);
+  const { control } = useFormContext();
+  const fieldOptions = _.flow(
+    _.filter((field) => type === "any" || field.type == type),
+    fieldsToOptions
+  )(fields);
+
+  return _.isEmpty(fieldOptions) ? null : (
+    <Controller
+      control={control}
+      name={`${field}.value`}
+      rules={{ required: true }}
+      render={({
+        field: { onBlur, onChange, value },
+        fieldState: { error },
+      }) => (
+        <Dropdown
+          selection
+          fluid
+          onBlur={onBlur}
+          error={!!error}
+          options={fieldOptions}
+          value={value}
+          onChange={(_e, { value }) => onChange(value)}
+        />
+      )}
+    />
+  );
+}

package/src/components/functions/expressions/FunctionArgs.js

@@ -0,0 +1,49 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useFormContext } from "react-hook-form";
+import { Label, Icon } from "semantic-ui-react";
+import { typeToColor, typeToIcon } from "@truedat/qx/types";
+import QxContext from "@truedat/qx/components/QxContext";
+
+const Expression = React.lazy(() => import("./Expression"));
+
+export default function FunctionArgs() {
+  const context = useContext(QxContext);
+  const { functions, field } = context;
+  const { watch } = useFormContext();
+
+  const { type, name } = watch(`${field}.value`) || {};
+  const func = _.find({ name, type })(functions);
+
+  return func ? (
+    <ul className="function-tree">
+      {func.params.map(({ name, type, description }, i) => (
+        <li key={i}>
+          <div className="flex-column">
+            <div className="param-label-header">
+              <Label size="large" image>
+                <Icon
+                  fitted
+                  color={typeToColor(type)}
+                  name={typeToIcon(type)}
+                />
+                <Label.Detail>{name}</Label.Detail>
+              </Label>
+              <div className="param-label-description">{description}</div>
+            </div>
+
+            <QxContext.Provider
+              value={{
+                ...context,
+                type,
+                field: `${field}.value.args.${name}`,
+              }}
+            >
+              <Expression />
+            </QxContext.Provider>
+          </div>
+        </li>
+      ))}
+    </ul>
+  ) : null;
+}

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

@@ -0,0 +1,95 @@
+import _ from "lodash/fp";
+import React, { useState, useContext } 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 { typeToColor, typeToIcon } from "@truedat/qx/types";
+import QxContext from "@truedat/qx/components/QxContext";
+import FunctionArgs from "./FunctionArgs";
+
+export default function FunctionSelector() {
+  const { formatMessage } = useIntl();
+  const { functions, field, type } = useContext(QxContext);
+  const { control, watch } = useFormContext();
+
+  const [collapsed, setCollapsed] = useState(false);
+
+  const fnToKey = ({ name, type }) => `${name}:${type}`;
+  const keyToFn = (key) => {
+    const [name, type] = key.split(":");
+    return { name, type };
+  };
+  const functionName = watch("name");
+  const functionType = watch("type");
+
+  const funcs = type === "any" ? functions : _.filter({ type })(functions);
+
+  const funcOpts = _.flow(
+    _.reject({ name: functionName, type: functionType }),
+    _.map(({ name, type, description, params }) => ({
+      key: fnToKey({ name, type }),
+      value: fnToKey({ name, type }),
+      text: fnToKey({ name, type }),
+      content: (
+        <>
+          <Header>
+            <div className="flex-center">
+              <div>{name}</div>
+              <div className="function-params-label">
+                {params.map(({ type: paramType, name: paramName }, index) => (
+                  <Label key={index} color={typeToColor(paramType)}>
+                    <Icon name={typeToIcon(paramType)} />
+                    {paramName}
+                  </Label>
+                ))}
+              </div>
+            </div>
+          </Header>
+          <Header.Subheader>{description}</Header.Subheader>
+        </>
+      ),
+    }))
+  )(funcs);
+
+  return (
+    <Accordion fluid className="no-margin">
+      <Accordion.Title
+        className="no-padding"
+        active={!collapsed}
+        onClick={() => setCollapsed(!collapsed)}
+      >
+        <div className="flex-center">
+          <Icon name="dropdown" />
+          <Controller
+            control={control}
+            name={`${field}.value`}
+            rules={{ required: true }}
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
+              <Dropdown
+                deburr
+                onBlur={onBlur}
+                error={!!error}
+                options={funcOpts}
+                onChange={(_e, { value }) => onChange(keyToFn(value))}
+                placeholder={formatMessage(
+                  { id: "functions.form.expression.function.placeholder" },
+                  { type }
+                )}
+                search
+                fluid
+                selection
+                value={fnToKey(value || {})}
+              />
+            )}
+          />
+        </div>
+      </Accordion.Title>
+      <Accordion.Content className="no-padding" active={!collapsed}>
+        <FunctionArgs />
+      </Accordion.Content>
+    </Accordion>
+  );
+}

package/src/components/functions/expressions/ParamSelector.js

@@ -0,0 +1,51 @@
+import _ from "lodash/fp";
+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";
+
+export default function ParamSelector() {
+  const { field, type } = useContext(QxContext);
+  const { control, watch, setValue } = useFormContext();
+
+  const params = useWatchParams();
+  const value = watch(`${field}.value`);
+
+  const options = _.flow(
+    _.filter((field) => type === "any" || field.type == type),
+    _.map(({ name, id }) => ({
+      key: id,
+      value: id,
+      text: name,
+    }))
+  )(params);
+
+  useEffect(() => {
+    if (value && !_.find({ value })(options)) {
+      setValue(`${field}.value`, null, { shouldValidate: true });
+    }
+  }, [options]);
+
+  return (
+    <Controller
+      control={control}
+      name={`${field}.value`}
+      rules={{ required: true }}
+      render={({
+        field: { onBlur, onChange, value },
+        fieldState: { error },
+      }) => (
+        <Dropdown
+          selection
+          fluid
+          onBlur={onBlur}
+          error={!!error}
+          options={options}
+          value={value}
+          onChange={(_e, { value }) => onChange(value)}
+        />
+      )}
+    />
+  );
+}