@truedat/qx 5.14.0 → 5.15.0

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

@@ -0,0 +1,116 @@
+import _ from "lodash/fp";
+import React, { useState, useContext, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Button, Grid, Form, GridColumn } from "semantic-ui-react";
+import { Expression } from "@truedat/qx/components/common/expressions";
+import QxContext from "@truedat/qx/components/QxContext";
+
+export const newSelectField = (id) => ({
+  id,
+  alias: "",
+  expression: {},
+});
+
+export default function SelectField({ onDelete }) {
+  const context = useContext(QxContext);
+  const { field } = context;
+  const { formatMessage } = useIntl();
+  const { control, watch, setValue } = useFormContext();
+  const [isShownDelete, setIsShownDelete] = useState();
+
+  const { alias, expression, id } = watch(field) || {};
+  const fieldName = expression?.value?.name;
+
+  const parentField = field.match(/(.*)\.properties\.\w+\[\d+\]/)[1];
+  const queryable = watch(parentField);
+  const queryableFields =
+    queryable?.type == "select"
+      ? queryable.properties.fields
+      : _.concat(queryable?.properties.aggregate_fields)(
+          queryable?.properties.group_fields
+        );
+
+  const queryableFieldsAlias = _.flow(
+    _.remove((field) => field.id == id),
+    _.map("alias")
+  )(queryableFields);
+
+  useEffect(() => {
+    if (!alias && fieldName)
+      setValue(`${field}.alias`, fieldName, { shouldValidate: true });
+  }, [field, fieldName, alias]);
+
+  const validateField = (value) =>
+    _.includes(value)(queryableFieldsAlias)
+      ? formatMessage({
+          id: "dataViews.form.queryable.alias.duplicated",
+        })
+      : true;
+
+  return (
+    <div
+      onMouseEnter={() => setIsShownDelete(true)}
+      onMouseLeave={() => setIsShownDelete(false)}
+    >
+      <Grid>
+        <Grid.Row>
+          <Grid.Column></Grid.Column>
+          <GridColumn width={9}>
+            <QxContext.Provider
+              value={{
+                ...context,
+                type: "any",
+                field: `${field}.expression`,
+                defaultShape: "field",
+              }}
+            >
+              <Expression />
+            </QxContext.Provider>
+          </GridColumn>
+          <Grid.Column width={6}>
+            <Form.Group inline className="no-margin">
+              <Controller
+                control={control}
+                name={`${field}.alias`}
+                rules={{
+                  required: formatMessage({ id: "functions.form.required" }),
+                  validate: validateField,
+                }}
+                render={({
+                  field: { onBlur, onChange },
+                  fieldState: { error },
+                }) => (
+                  <Form.Input
+                    autoComplete="off"
+                    placeholder={formatMessage({
+                      id: "queryables.select.form.alias",
+                    })}
+                    error={error?.message}
+                    onBlur={onBlur}
+                    onChange={(_e, { value }) => onChange(value)}
+                    value={alias}
+                  />
+                )}
+              />
+              {isShownDelete ? (
+                <Button
+                  onClick={onDelete}
+                  icon="trash alternate outline"
+                  basic
+                  color="red"
+                  aria-label="delete"
+                />
+              ) : null}
+            </Form.Group>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </div>
+  );
+}
+
+SelectField.propTypes = {
+  onDelete: PropTypes.func,
+};

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

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

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

@@ -0,0 +1,30 @@
+import React from "react";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { render } from "@truedat/test/render";
+
+import From from "../From";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "queryables.form.resource": "resource",
+      "queryables.resource.type.data_structure": "data_structure",
+      "queryables.resource.type.data_view": "data_view",
+      "queryables.resource.type.reference_dataset": "reference_dataset",
+      "queryables.resource.type": "type",
+    },
+  },
+};
+
+describe("<From />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <From />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { render } from "@truedat/test/render";
+
+import GroupBy from "../GroupBy";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "dataViews.form.error.empty_select": "empty_select",
+      "queryables.group_by.form.add_aggregate_field": "add_aggregate_field",
+      "queryables.group_by.form.add_group_field": "add_group_field",
+      "queryables.group_by.form.aggregate_fields": "aggregate_fields",
+      "queryables.group_by.form.group_fields": "group_fields",
+      "queryables.select.form.alias": "alias",
+      "functions.form.required": "required",
+      "functions.form.expression.function.placeholder": "placeholder",
+      "functions.expression.shape.function": "function",
+      "functions.expression.shape.constant": "constant",
+      "functions.form.required": "required",
+    },
+  },
+};
+
+describe("<GroupBy />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, debug, getByRole, getAllByRole } = render(
+      <TestFormWrapper
+        context={{
+          field: "queryables[0].properties",
+          functions: [{ class: "aggregator", name: "func", type: "number" }],
+        }}
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              type: "group_by",
+              properties: {
+                group_fields: [{ name: "abc", id: 1 }],
+                aggregate_fields: [{ name: "def", id: 2 }],
+              },
+            },
+          ],
+        }}
+      >
+        <GroupBy />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /add_group_field/i }));
+    });
+
+    userEvent.hover(getAllByRole("textbox")[2]);
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /delete/i }));
+    });
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /add_aggregate_field/i }));
+    });
+
+    userEvent.hover(getAllByRole("textbox")[3]);
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /delete/i }));
+    });
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,38 @@
+import React from "react";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { render } from "@truedat/test/render";
+
+import Join from "../Join";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "dataViews.form.queryable.alias": "alias",
+      "joinType.full_outer": "full_outer",
+      "joinType.inner": "inner",
+      "joinType.left": "left",
+      "joinType.right": "right",
+      "queryables.form.join.type": "type",
+      "expression.clause.action.addGroup": "addGroup",
+      "expression.form.clause": "clause",
+      "queryables.resource.type": "type",
+      "queryables.form.resource": "resource",
+      "queryables.resource.type.data_view": "data_view",
+      "queryables.resource.type.reference_dataset": "reference_dataset",
+      "queryables.resource.type.data_structure": "data_structure",
+    },
+  },
+};
+
+describe("<Join />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Join />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+
+import JoinTypeIcon from "../JoinTypeIcon";
+
+const renderOpts = {
+  messages: {
+    en: {},
+  },
+};
+
+describe("<JoinTypeIcon />", () => {
+  it("matches the latest snapshot for inner join", () => {
+    const { container } = render(<JoinTypeIcon type="inner" />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot for left join", () => {
+    const { container } = render(<JoinTypeIcon type="left" />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot for right join", () => {
+    const { container } = render(<JoinTypeIcon type="right" />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot for full_outer join", () => {
+    const { container } = render(
+      <JoinTypeIcon type="full_outer" />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,144 @@
+import React from "react";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { render } from "@truedat/test/render";
+
+import Select from "../Select";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "dataViews.form.error.empty_select": "empty_select",
+      "queryables.select.form.add_select_field": "add_select_field",
+      "queryables.select.form.add_all_select_fields": "add_all_select_fields",
+      "queryables.select.form.alias": "alias",
+      "functions.expression.shape.field": "field",
+      "functions.expression.shape.function": "function",
+      "functions.expression.shape.constant": "constant",
+      "functions.form.required": "required",
+    },
+  },
+};
+
+describe("<Select />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Select />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot with content", async () => {
+    const { container, getByRole } = render(
+      <TestFormWrapper
+        context={{
+          fields: [{ name: "abc", id: 1 }],
+          field: "select.properties",
+        }}
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              properties: {
+                resource: {
+                  embedded: {
+                    fields: [
+                      {
+                        id: 8,
+                        name: "Column1",
+                        parent_name: "ParentTable",
+                        type: "string",
+                      },
+                    ],
+                    id: 123,
+                    name: "ParentTable",
+                  },
+                  id: 123,
+                  type: "data_structure",
+                },
+              },
+              type: "from",
+            },
+          ],
+          select: {
+            type: "select",
+            properties: {
+              fields: [{ name: "foo", id: 2 }],
+            },
+          },
+        }}
+      >
+        <Select />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /add_select_field/i }));
+    });
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+  it("handles add all fields", async () => {
+    const { container, getByRole, getAllByRole } = render(
+      <TestFormWrapper
+        context={{
+          fields: [{ name: "abc", id: 1 }],
+          field: "select.properties",
+        }}
+        defaultValues={{
+          queryables: [
+            {
+              id: 0,
+              properties: {
+                resource: {
+                  embedded: {
+                    fields: [
+                      {
+                        id: 8,
+                        name: "Column1",
+                        parent_name: "ParentTable",
+                        type: "string",
+                      },
+                    ],
+                    id: 123,
+                    name: "ParentTable",
+                  },
+                  id: 123,
+                  type: "data_structure",
+                },
+              },
+              type: "from",
+            },
+          ],
+          select: {
+            type: "select",
+          },
+        }}
+      >
+        <Select />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /add_all_select_fields/i }));
+    });
+
+    userEvent.hover(getAllByRole("textbox")[0]);
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /delete/i }));
+    });
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/src/components/dataViews/queryableProperties/__tests__/SelectField.spec.js

@@ -0,0 +1,107 @@
+import React from "react";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { render } from "@truedat/test/render";
+
+import SelectField from "../SelectField";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "dataViews.form.queryable.alias.duplicated": "duplicated",
+      "functions.form.required": "required",
+      "queryables.select.form.alias": "alias",
+      "functions.form.expression.function.placeholder": "placeholder",
+      "functions.expression.shape.function": "function",
+      "functions.expression.shape.constant": "constant",
+    },
+  },
+};
+
+describe("<SelectField />", () => {
+  it("matches the latest snapshot for select", () => {
+    const { container } = render(
+      <TestFormWrapper
+        context={{
+          field: "select.properties.fields[0]",
+        }}
+        defaultValues={{
+          select: {
+            type: "select",
+            properties: {
+              fields: [{ name: "foo", id: 1 }],
+            },
+          },
+        }}
+      >
+        <SelectField />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot for group_by", () => {
+    const { container } = render(
+      <TestFormWrapper
+        context={{
+          functions: [{ class: "aggregator", name: "func", type: "number" }],
+          field: "queryables[0].properties.fields[0]",
+        }}
+        defaultValues={{
+          queryables: [
+            {
+              type: "group_by",
+              properties: {
+                group_fields: [{ name: "foo", id: 1 }],
+                aggregate_fields: [{ name: "foo", id: 1 }],
+              },
+            },
+          ],
+        }}
+      >
+        <SelectField />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("handles delete", async () => {
+    const onDelete = jest.fn();
+    const { getByRole, getAllByRole } = render(
+      <TestFormWrapper
+        context={{
+          functions: [{ class: "aggregator", name: "func", type: "number" }],
+          field: "queryables[0].properties.fields[0]",
+        }}
+        defaultValues={{
+          queryables: [
+            {
+              type: "group_by",
+              properties: {
+                group_fields: [{ name: "foo", id: 1 }],
+                aggregate_fields: [{ name: "foo", id: 1 }],
+              },
+            },
+          ],
+        }}
+      >
+        <SelectField onDelete={onDelete} />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.hover(getAllByRole("textbox")[0]);
+    userEvent.unhover(getAllByRole("textbox")[0]);
+    userEvent.hover(getAllByRole("textbox")[0]);
+
+    await act(async () => {
+      userEvent.click(getByRole("button", { name: /delete/i }));
+    });
+
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/dataViews/queryableProperties/__tests__/Where.spec.js

@@ -0,0 +1,27 @@
+import React from "react";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { render } from "@truedat/test/render";
+
+import Where from "../Where";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "expression.clause.action.addGroup": "Add Group",
+      "expression.form.clause": "Clause",
+    },
+  },
+};
+
+describe("<Where />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Where />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/dataViews/queryableProperties/__tests__/__snapshots__/From.spec.js.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<From /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="required field"
+  >
+    <label>
+      resource
+    </label>
+    <div
+      aria-expanded="false"
+      class="ui selection dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider default text"
+        role="alert"
+      >
+        type
+      </div>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
+      <div
+        class="menu transition"
+      >
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <span
+            class="text"
+          >
+            data_structure
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <span
+            class="text"
+          >
+            reference_dataset
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <span
+            class="text"
+          >
+            data_view
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;