@truedat/qx 5.14.1 → 5.15.0

package/src/components/dataViews/__tests__/queryableFunctions.spec.js

@@ -0,0 +1,193 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+
+import {
+  calculateGroupByFieldId,
+  reduceQueryableFields,
+} from "../queryableFunctions";
+
+describe("calculateGroupByFieldId", () => {
+  it("calculate pair ids for group and odd for aggregate", () => {
+    expect(calculateGroupByFieldId(0, "group")).toBe(0);
+    expect(calculateGroupByFieldId(1, "group")).toBe(2);
+    expect(calculateGroupByFieldId(0, "aggregate")).toBe(1);
+    expect(calculateGroupByFieldId(1, "aggregate")).toBe(3);
+  });
+  it("different group returns the same id", () => {
+    expect(calculateGroupByFieldId(8, "invalid")).toBe(8);
+  });
+});
+
+describe("reduceQueryableFields", () => {
+  const formatMessage = ({ id }) => id;
+
+  it("returns the fields for From queryable", () => {
+    const parentId = 1;
+    const alias = "parentAlias";
+    const queryables = [
+      {
+        type: "from",
+        properties: {
+          resource: {
+            embedded: {
+              fields: [
+                { id: 2, name: "field2" },
+                { id: 3, name: "field3" },
+              ],
+            },
+          },
+        },
+        alias,
+        id: parentId,
+      },
+    ];
+    const expected = [
+      {
+        alias,
+        color: "orange",
+        id: 2,
+        name: "field2",
+        parent_id: parentId,
+      },
+      {
+        alias,
+        color: "orange",
+        id: 3,
+        name: "field3",
+        parent_id: parentId,
+      },
+    ];
+    expect(reduceQueryableFields(formatMessage)(queryables)).toStrictEqual(
+      expected
+    );
+  });
+
+  it("returns the fields for From and Join queryable", () => {
+    const queryables = [
+      {
+        type: "from",
+        properties: {
+          resource: {
+            embedded: {
+              fields: [{ id: 2, name: "field1" }],
+            },
+          },
+        },
+        alias: "qryFrom",
+        id: 5,
+      },
+      {
+        type: "join",
+        properties: {
+          resource: {
+            embedded: {
+              fields: [{ id: 3, name: "field2" }],
+            },
+          },
+        },
+        alias: "qryJoin",
+        id: 6,
+      },
+    ];
+    const expected = [
+      {
+        alias: "qryFrom",
+        color: "yellow",
+        id: 2,
+        name: "field1",
+        parent_id: 5,
+      },
+      {
+        alias: "qryJoin",
+        color: "violet",
+        id: 3,
+        name: "field2",
+        parent_id: 6,
+      },
+    ];
+    expect(reduceQueryableFields(formatMessage)(queryables)).toStrictEqual(
+      expected
+    );
+  });
+
+  it("select queryable prevents previous queryables to return fields", () => {
+    const queryables = [
+      {
+        type: "from",
+        properties: {
+          resource: {
+            embedded: {
+              fields: [{ id: 2, name: "field1" }],
+            },
+          },
+        },
+        alias: "qryFrom",
+        id: 5,
+      },
+      {
+        type: "select",
+        properties: {
+          fields: [{ id: 3, alias: "field2" }],
+        },
+        alias: "qrySelect",
+        id: 6,
+      },
+    ];
+    const expected = [
+      {
+        alias: "qrySelect",
+        color: "violet",
+        id: 3,
+        name: "field2",
+        parent_id: 6,
+      },
+    ];
+    expect(reduceQueryableFields(formatMessage)(queryables)).toStrictEqual(
+      expected
+    );
+  });
+
+  it("groupBy queryable prevents previous queryables to return fields", () => {
+    const queryables = [
+      {
+        type: "from",
+        properties: {
+          resource: {
+            embedded: {
+              fields: [{ id: 2, name: "field1" }],
+            },
+          },
+        },
+        alias: "qryFrom",
+        id: 5,
+      },
+      {
+        type: "group_by",
+        properties: {
+          group_fields: [{ id: 3, alias: "field2" }],
+          aggregate_fields: [{ id: 4, alias: "field4" }],
+        },
+        id: 6,
+      },
+    ];
+    const expected = [
+      {
+        alias: "dataViews.form.queryable.group_by",
+        color: "violet",
+        id: 3,
+        name: "field2",
+        parent_id: 6,
+      },
+      {
+        alias: "dataViews.form.queryable.group_by",
+        color: "violet",
+        id: 4,
+        name: "field4",
+        parent_id: 6,
+      },
+    ];
+    expect(reduceQueryableFields(formatMessage)(queryables)).toStrictEqual(
+      expected
+    );
+  });
+});

package/src/components/dataViews/queryableFunctions.js

@@ -0,0 +1,80 @@
+import _ from "lodash/fp";
+
+export const calculateGroupByFieldId = (id, type) => {
+  switch (type) {
+    case "group":
+      return id * 2;
+    case "aggregate":
+      return id * 2 + 1;
+    default:
+      return id;
+  }
+};
+
+const queryableToFields =
+  (formatMessage) =>
+  ({ type, properties, alias, id: parent_id }) => {
+    const selectFieldsMap = _.map.convert({ cap: false })((field) => ({
+      ...field,
+      alias: alias || formatMessage({ id: `dataViews.form.queryable.${type}` }),
+      name: field.alias,
+      parent_id,
+      color: getColorById(parent_id),
+    }));
+
+    switch (type) {
+      case "from":
+      case "join":
+        return _.flow(
+          _.propOr([], "resource.embedded.fields"),
+          _.map((field) => ({
+            ...field,
+            alias,
+            parent_id,
+            color: getColorById(parent_id),
+          }))
+        )(properties);
+      case "select":
+        return _.flow(_.propOr([], "fields"), selectFieldsMap)(properties);
+      case "group_by":
+        const groupFields = _.flow(
+          _.propOr([], "group_fields"),
+          selectFieldsMap
+        )(properties);
+        const aggregateFields = _.flow(
+          _.propOr([], "aggregate_fields"),
+          selectFieldsMap
+        )(properties);
+        return _.concat(groupFields, aggregateFields);
+    }
+  };
+
+export const reduceQueryableFields = (formatMessage) => (queryables) => {
+  const [_halt, fields] = _.flow(
+    _.reverse,
+    _.reduce(
+      ([halt, accFields], queryable) =>
+        halt
+          ? [halt, accFields]
+          : [
+              _.includes(queryable.type)(["select", "group_by"]),
+              _.concat(queryableToFields(formatMessage)(queryable), accFields),
+            ],
+      [false, []]
+    )
+  )(queryables);
+  return fields;
+};
+
+export const getColorById = (id) =>
+  [
+    "blue",
+    "orange",
+    "green",
+    "purple",
+    "teal",
+    "yellow",
+    "violet",
+    "olive",
+    "pink",
+  ][id];

package/src/components/dataViews/queryableProperties/From.js

@@ -0,0 +1,15 @@
+import React, { useContext } from "react";
+
+import ResourceSelector from "@truedat/qx/components/common/ResourceSelector";
+import QxContext from "@truedat/qx/components/QxContext";
+
+export default function From() {
+  const context = useContext(QxContext);
+  const { field } = context;
+
+  return (
+    <QxContext.Provider value={{ ...context, field: `${field}.resource` }}>
+      <ResourceSelector required />
+    </QxContext.Provider>
+  );
+}

package/src/components/dataViews/queryableProperties/GroupBy.js

@@ -0,0 +1,124 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { useFieldArray, useFormState } from "react-hook-form";
+import { Button, Form, List, Popup } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import { calculateGroupByFieldId } from "../queryableFunctions";
+import SelectField, { newSelectField } from "./SelectField";
+
+export default function GroupBy() {
+  const { formatMessage } = useIntl();
+  const context = useContext(QxContext);
+  const { field } = context;
+  const {
+    fields: groupFields,
+    append: appendGroupField,
+    remove: removeGroupField,
+  } = useFieldArray({
+    name: `${field}.group_fields`,
+    keyName: "key",
+    rules: {
+      required: formatMessage({ id: "dataViews.form.error.empty_select" }),
+    },
+  });
+
+  const {
+    fields: aggregateFields,
+    append: appendAggregateField,
+    remove: removeAggregateField,
+  } = useFieldArray({
+    name: `${field}.aggregate_fields`,
+    keyName: "key",
+  });
+  const { errors } = useFormState();
+  const requiredError = _.prop(`${field}.group_fields.root.message`)(errors);
+
+  const maxGroupId = (_.flow(_.map("id"), _.max)(groupFields) || 0) / 2;
+  const maxAggregateId =
+    ((_.flow(_.map("id"), _.max)(aggregateFields) || 1) - 1) / 2;
+
+  const nextGroupId = calculateGroupByFieldId(maxGroupId + 1, "group");
+  const nextAggregateId = calculateGroupByFieldId(
+    maxAggregateId + 1,
+    "aggregate"
+  );
+
+  const addGroupFieldButton = (
+    <Button onClick={() => appendGroupField(newSelectField(nextGroupId))}>
+      {formatMessage({ id: "queryables.group_by.form.add_group_field" })}
+    </Button>
+  );
+  return (
+    <>
+      <Form.Field required>
+        <label>
+          {formatMessage({ id: "queryables.group_by.form.group_fields" })}
+        </label>
+        <List>
+          {groupFields.map((selectField, index) => (
+            <List.Item key={selectField.id}>
+              <QxContext.Provider
+                value={{
+                  ...context,
+                  field: `${field}.group_fields[${index}]`,
+                  index,
+                }}
+              >
+                <SelectField onDelete={() => removeGroupField(index)} />
+              </QxContext.Provider>
+            </List.Item>
+          ))}
+          <List.Item>
+            {requiredError ? (
+              <Popup
+                content={requiredError}
+                open
+                pinned
+                position="bottom center"
+                trigger={addGroupFieldButton}
+              />
+            ) : (
+              addGroupFieldButton
+            )}
+          </List.Item>
+        </List>
+      </Form.Field>
+      <Form.Field>
+        <label>
+          {formatMessage({ id: "queryables.group_by.form.aggregate_fields" })}
+        </label>
+        <List>
+          {aggregateFields.map((selectField, index) => (
+            <List.Item key={selectField.id}>
+              <QxContext.Provider
+                value={{
+                  ...context,
+                  field: `${field}.aggregate_fields[${index}]`,
+                  index,
+                  aggregate: true,
+                }}
+              >
+                <SelectField onDelete={() => removeAggregateField(index)} />
+              </QxContext.Provider>
+            </List.Item>
+          ))}
+          <List.Item>
+            <Button
+              onClick={() =>
+                appendAggregateField({
+                  ...newSelectField(nextAggregateId),
+                  expression: { shape: "function" },
+                })
+              }
+            >
+              {formatMessage({
+                id: "queryables.group_by.form.add_aggregate_field",
+              })}
+            </Button>
+          </List.Item>
+        </List>
+      </Form.Field>
+    </>
+  );
+}

package/src/components/dataViews/queryableProperties/Join.js

@@ -0,0 +1,62 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Clauses } from "@truedat/qx/components/common/expressions";
+import { Controller, useFormContext } from "react-hook-form";
+import { Dropdown, Form } from "semantic-ui-react";
+import ResourceSelector from "@truedat/qx/components/common/ResourceSelector";
+import QxContext from "@truedat/qx/components/QxContext";
+import JoinTypeIcon from "./JoinTypeIcon";
+
+export default function Join() {
+  const { formatMessage } = useIntl();
+  const context = useContext(QxContext);
+  const { control } = useFormContext();
+  const { field } = context;
+
+  const joinTypes = ["inner", "left", "right", "full_outer"];
+
+  const joinTypeOptions = _.map((joinType) => ({
+    key: joinType,
+    value: joinType,
+    text: formatMessage({ id: `joinType.${joinType}` }),
+    image: <JoinTypeIcon type={joinType} />,
+  }))(joinTypes);
+
+  return (
+    <>
+      <QxContext.Provider value={{ ...context, field: `${field}.resource` }}>
+        <ResourceSelector required />
+      </QxContext.Provider>
+      <div className="vertical-space">
+        <Controller
+          control={control}
+          name={`${field}.type`}
+          render={({ field: { onBlur, onChange, value = "inner" } }) => (
+            <Form.Field>
+              <label>
+                {formatMessage({ id: "queryables.form.join.type" })}
+              </label>
+              <Dropdown
+                className="select-field-dropdown"
+                selection
+                value={value}
+                options={joinTypeOptions}
+                onChange={(_e, { value }) => onChange(value)}
+                onBlur={onBlur}
+                label={formatMessage({
+                  id: "dataViews.form.queryable.alias",
+                })}
+              />
+            </Form.Field>
+          )}
+        />
+      </div>
+      <div className="vertical-space">
+        <QxContext.Provider value={{ ...context, field: `${field}.clauses` }}>
+          <Clauses />
+        </QxContext.Provider>
+      </div>
+    </>
+  );
+}

package/src/components/dataViews/queryableProperties/JoinTypeIcon.js

@@ -0,0 +1,49 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const JoinTypeIcon = ({ type }) => {
+  switch (type) {
+    case "inner":
+      return (
+        <div className="join_type">
+          <div className="circle circle-left">
+            <div className="circle circle-center fill"></div>
+          </div>
+          <div className="circle circle-right"></div>
+        </div>
+      );
+    case "left":
+      return (
+        <div className="join_type">
+          <div className="circle circle-left fill">
+            <div className="circle circle-center fill"></div>
+          </div>
+          <div className="circle circle-right"></div>
+        </div>
+      );
+    case "right":
+      return (
+        <div className="join_type">
+          <div className="circle circle-left">
+            <div className="circle circle-center fill"></div>
+          </div>
+          <div className="circle circle-right fill"></div>
+        </div>
+      );
+    case "full_outer":
+      return (
+        <div className="join_type">
+          <div className="circle circle-left fill">
+            <div className="circle circle-center fill"></div>
+          </div>
+          <div className="circle circle-right fill"></div>
+        </div>
+      );
+  }
+};
+
+JoinTypeIcon.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default JoinTypeIcon;

package/src/components/dataViews/queryableProperties/Select.js

@@ -0,0 +1,76 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { useFieldArray, useFormState } from "react-hook-form";
+import { Button, List, Popup } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import SelectField, { newSelectField } from "./SelectField";
+
+export default function Select() {
+  const { formatMessage } = useIntl();
+  const context = useContext(QxContext);
+  const { field, fields: ctxFields } = context;
+  const { fields, append, remove } = useFieldArray({
+    name: `${field}.fields`,
+    keyName: "key",
+    rules: {
+      required: formatMessage({ id: "dataViews.form.error.empty_select" }),
+    },
+  });
+  const { errors } = useFormState();
+  const requiredError = _.prop("select.properties.fields.root.message")(errors);
+
+  const allFields = _.map.convert({ cap: false })(
+    ({ id, parent_id, name, type }, idx) => ({
+      id: idx,
+      alias: name,
+      expression: { shape: "field", value: { id, parent_id, name, type } },
+    })
+  )(ctxFields);
+  const maxId = _.flow(_.map("id"), _.max)(fields) || 0;
+
+  const addFieldButton = (
+    <Button onClick={() => append(newSelectField(maxId + 1))}>
+      {formatMessage({ id: "queryables.select.form.add_select_field" })}
+    </Button>
+  );
+
+  return (
+    <List>
+      {fields.map((selectField, index) => (
+        <List.Item key={selectField.key}>
+          <QxContext.Provider
+            value={{ ...context, field: `${field}.fields[${index}]`, index }}
+          >
+            <SelectField onDelete={() => remove(index)} />
+          </QxContext.Provider>
+        </List.Item>
+      ))}
+      <List.Item>
+        {requiredError ? (
+          <Popup
+            className="error-popup"
+            content={requiredError}
+            open
+            pinned
+            position="bottom center"
+            trigger={addFieldButton}
+          />
+        ) : (
+          addFieldButton
+        )}
+
+        {_.size(fields) == 0 ? (
+          <Button
+            onClick={() => append(allFields)}
+            disabled={_.isEmpty(allFields)}
+          >
+            {formatMessage({
+              id: "queryables.select.form.add_all_select_fields",
+            })}
+          </Button>
+        ) : null}
+      </List.Item>
+    </List>
+  );
+}