@truedat/qx 5.14.1 → 5.15.0

package/src/components/common/resourceSelectors/DataStructureSelector.js

@@ -0,0 +1,63 @@
+import _ from "lodash/fp";
+import React, { useContext, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { useIntl } from "react-intl";
+import { Icon, Form } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import StructureSelector from "@truedat/dd/components/StructureSelector";
+
+export default function DataStructureSelector({ onChange }) {
+  const { formatMessage } = useIntl();
+  const { field } = useContext(QxContext);
+  const { watch } = useFormContext();
+  const selectedStructure = watch(`${field}.embedded`);
+
+  const [active, setActive] = useState(!selectedStructure);
+
+  const onClick = () => setActive(!active);
+
+  const handleSelect = (structure) => {
+    setActive(false);
+    onChange({
+      ...structure,
+      fields: _.map(({ id, name, metadata }) => ({
+        id,
+        name,
+        parent_name: structure.name,
+        type: metadata?.data_type_class || "string",
+      }))(structure.data_fields),
+    });
+  };
+
+  return (
+    <>
+      {active ? (
+        <div onClick={onClick}>
+          <Icon name="dropdown" />
+          {_.path("name")(selectedStructure) || ""}
+        </div>
+      ) : (
+        <Form.Input
+          icon
+          value={selectedStructure?.name || ""}
+          placeholder={formatMessage({
+            id: "queryables.resource.selector.data_structure",
+          })}
+          required
+          fluid
+          onClick={onClick}
+        >
+          <input className="action-pointer" />
+        </Form.Input>
+      )}
+      {active && (
+        <StructureSelector
+          withDataFields
+          defaultFilters={{ "class.raw": ["table"] }}
+          selectedStructure={selectedStructure}
+          onSelect={handleSelect}
+        />
+      )}
+    </>
+  );
+}

package/src/components/common/resourceSelectors/DataViewSelector.js

@@ -0,0 +1,65 @@
+import _ from "lodash/fp";
+import React, { useContext, useState } from "react";
+import { useIntl } from "react-intl";
+import { Dropdown } from "semantic-ui-react";
+import { matchSorter } from "match-sorter";
+import QxContext from "@truedat/qx/components/QxContext";
+
+export default function DataViewSelector({ onChange, onBlur, value }) {
+  const { formatMessage } = useIntl();
+  const [searchTerm, setSearchTerm] = useState("");
+  const { dataViews, currentDataViewId } = useContext(QxContext);
+
+  const matchSorterFp = (items) =>
+    matchSorter(items, searchTerm, {
+      keys: ["name", "description"],
+      threshold: matchSorter.rankings.CONTAINS,
+    });
+
+  const options = _.flow(
+    _.reject(({ id }) => currentDataViewId && currentDataViewId == id),
+    _.cond([
+      [() => _.isEmpty(searchTerm), _.identity],
+      [_.stubTrue, matchSorterFp],
+    ]),
+    _.map(({ id, name }) => ({
+      key: id,
+      value: id,
+      text: name,
+    }))
+  )(dataViews);
+
+  const buildEmbedded = (id) =>
+    _.flow(_.find({ id }), (dataView) => ({
+      ...dataView,
+      fields: _.flow(
+        _.prop("select.properties.fields"),
+        _.map.convert({ cap: false })((field, id) => ({
+          id,
+          name: field.alias,
+          type: _.prop("expression.value.type")(field),
+          parent_name: dataView.name,
+        }))
+      )(dataView),
+    }))(dataViews);
+
+  const handleSearchChange = (_e, { searchQuery }) =>
+    setSearchTerm(searchQuery);
+
+  return (
+    <Dropdown
+      selection
+      onSearchChange={handleSearchChange}
+      search
+      fluid
+      searchQuery={searchTerm}
+      placeholder={formatMessage({
+        id: "queryables.resource.selector.data_view",
+      })}
+      onBlur={onBlur}
+      options={options}
+      onChange={(_e, { value }) => onChange && onChange(buildEmbedded(value))}
+      value={value}
+    />
+  );
+}

package/src/components/common/resourceSelectors/ReferenceDatasetSelector.js

@@ -0,0 +1,61 @@
+import _ from "lodash/fp";
+import React, { useContext, useState } from "react";
+import { useIntl } from "react-intl";
+import { Dropdown } from "semantic-ui-react";
+import { matchSorter } from "match-sorter";
+import QxContext from "@truedat/qx/components/QxContext";
+
+export default function ReferenceDatasetSelector({ onChange, onBlur, value }) {
+  const { formatMessage } = useIntl();
+  const [searchTerm, setSearchTerm] = useState("");
+  const { referenceDatasets } = useContext(QxContext);
+
+  const matchSorterFp = (items) =>
+    matchSorter(items, searchTerm, {
+      keys: ["name", "headers"],
+      threshold: matchSorter.rankings.CONTAINS,
+    });
+
+  const options = _.flow(
+    _.cond([
+      [() => _.isEmpty(searchTerm), _.identity],
+      [_.stubTrue, matchSorterFp],
+    ]),
+    _.map(({ id, name }) => ({
+      key: id,
+      value: id,
+      text: name,
+    }))
+  )(referenceDatasets);
+
+  const handleSearchChange = (_e, { searchQuery }) =>
+    setSearchTerm(searchQuery);
+
+  const buildEmbedded = (id) =>
+    _.flow(_.find({ id }), (refDataset) => ({
+      ...refDataset,
+      fields: _.map.convert({ cap: false })((name, id) => ({
+        id,
+        name,
+        type: "string",
+        parent_name: refDataset.name,
+      }))(refDataset.headers),
+    }))(referenceDatasets);
+
+  return (
+    <Dropdown
+      selection
+      onSearchChange={handleSearchChange}
+      search
+      fluid
+      searchQuery={searchTerm}
+      placeholder={formatMessage({
+        id: "queryables.resource.selector.reference_dataset",
+      })}
+      onBlur={onBlur}
+      options={options}
+      onChange={(_e, { value }) => onChange(buildEmbedded(value))}
+      value={value}
+    />
+  );
+}

package/src/components/common/resourceSelectors/__tests__/DataStructureSelector.spec.js

@@ -0,0 +1,31 @@
+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 DataStructureSelector from "../DataStructureSelector";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "queryables.resource.selector.data_structure": "data_structure",
+      "structures.not_found.body": "body",
+      "structures.search.placeholder": "placeholder",
+      "structures.not_found.header": "header",
+    },
+  },
+};
+
+describe("<DataStructureSelector />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <DataStructureSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/src/components/common/resourceSelectors/__tests__/DataViewSelector.spec.js

@@ -0,0 +1,133 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import DataViewSelector from "../DataViewSelector";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "queryables.resource.selector.data_view": "data_view",
+    },
+  },
+};
+
+describe("<DataViewSelector />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <TestFormWrapper
+        context={{
+          dataViews: [{ name: "UserDataView", id: 1 }],
+        }}
+      >
+        <DataViewSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+  it("hides current data_view", async () => {
+    const { queryByText } = render(
+      <TestFormWrapper
+        context={{
+          dataViews: [
+            { name: "UserDataView", id: 1 },
+            { name: "SelectedDataView", id: 2 },
+          ],
+          currentDataViewId: 2,
+        }}
+      >
+        <DataViewSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await waitFor(() =>
+      expect(queryByText(/SelectedDataView/i)).not.toBeInTheDocument()
+    );
+  });
+  it("handles onChange", async () => {
+    const onChange = jest.fn();
+    const { getByRole } = render(
+      <TestFormWrapper
+        context={{
+          dataViews: [
+            { name: "UserDataView", id: 1 },
+            {
+              name: "SelectedDataView",
+              id: 2,
+              select: {
+                properties: {
+                  fields: [
+                    {
+                      alias: "field1",
+                      id: 3,
+                      expression: { value: { type: "string" } },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        }}
+      >
+        <DataViewSelector onChange={onChange} />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      userEvent.click(getByRole("option", { name: /SelectedDataView/i }));
+    });
+
+    expect(onChange).lastCalledWith({
+      fields: [
+        {
+          id: 0,
+          name: "field1",
+          parent_name: "SelectedDataView",
+          type: "string",
+        },
+      ],
+      id: 2,
+      name: "SelectedDataView",
+      select: {
+        properties: {
+          fields: [
+            {
+              alias: "field1",
+              id: 3,
+              expression: { value: { type: "string" } },
+            },
+          ],
+        },
+      },
+    });
+  });
+
+  it("handles search", async () => {
+    const { getByRole, queryByText } = render(
+      <TestFormWrapper
+        context={{
+          dataViews: [
+            { name: "UserDataView", id: 1 },
+            { name: "SelectedDataView", id: 2 },
+          ],
+        }}
+      >
+        <DataViewSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.type(getByRole("textbox"), "User");
+    await waitFor(() =>
+      expect(queryByText(/SelectedDataView/i)).not.toBeInTheDocument()
+    );
+  });
+});

package/src/components/common/resourceSelectors/__tests__/ReferenceDatasetSelector.spec.js

@@ -0,0 +1,97 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import ReferenceDatasetSelector from "../ReferenceDatasetSelector";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "queryables.resource.selector.reference_dataset": "reference_dataset",
+    },
+  },
+};
+
+describe("<ReferenceDatasetSelector />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <TestFormWrapper
+        context={{
+          referenceDatasets: [{ name: "UserReferenceDataset", id: 1 }],
+        }}
+      >
+        <ReferenceDatasetSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it("handles onChange", async () => {
+    const onChange = jest.fn();
+    const { getByRole } = render(
+      <TestFormWrapper
+        context={{
+          referenceDatasets: [
+            { name: "UserReferenceDataset", id: 1 },
+            {
+              name: "SelectedReferenceDataset",
+              id: 2,
+              headers: ["field1"],
+            },
+          ],
+        }}
+      >
+        <ReferenceDatasetSelector onChange={onChange} />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      userEvent.click(
+        getByRole("option", { name: /SelectedReferenceDataset/i })
+      );
+    });
+
+    expect(onChange).lastCalledWith({
+      fields: [
+        {
+          id: 0,
+          name: "field1",
+          parent_name: "SelectedReferenceDataset",
+          type: "string",
+        },
+      ],
+      id: 2,
+      name: "SelectedReferenceDataset",
+      headers: ["field1"],
+    });
+  });
+
+  it("handles search", async () => {
+    const { getByRole, queryByText } = render(
+      <TestFormWrapper
+        context={{
+          referenceDatasets: [
+            { name: "UserReferenceDataset", id: 1 },
+            { name: "SelectedReferenceDataset", id: 2 },
+          ],
+        }}
+      >
+        <ReferenceDatasetSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.type(getByRole("textbox"), "User");
+
+    await waitFor(() =>
+      expect(queryByText(/SelectedReferenceDataset/i)).not.toBeInTheDocument()
+    );
+  });
+});

package/src/components/common/resourceSelectors/__tests__/__snapshots__/DataStructureSelector.spec.js.snap

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DataStructureSelector /> matches the latest snapshot 1`] = `
+<div>
+  <div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    
+  </div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui action left icon input"
+    >
+      <i
+        aria-hidden="true"
+        class="search link icon"
+      />
+      <input
+        placeholder="placeholder"
+        type="text"
+        value=""
+      />
+      <button
+        class="ui icon button"
+      >
+        <i
+          aria-hidden="true"
+          class="calendar alternate outline icon"
+        />
+      </button>
+      <div
+        aria-expanded="false"
+        class="ui button floating labeled scrolling dropdown icon"
+        role="listbox"
+        tabindex="0"
+      >
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
+        >
+          Filters
+        </div>
+        <i
+          aria-hidden="true"
+          class="filter icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            class="item"
+            role="option"
+          >
+            <em>
+              (reset filters)
+            </em>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="selectedFilters"
+    />
+    <div
+      class="dimmable structure-table-overflow"
+    >
+      <div
+        class="ui inverted dimmer"
+      >
+        <div
+          class="content"
+        >
+          <div
+            class="ui large loader"
+          />
+        </div>
+      </div>
+      <div
+        class="ui icon info message"
+      >
+        <i
+          aria-hidden="true"
+          class="search icon"
+        />
+        <div
+          class="content"
+        >
+          <div
+            class="header"
+          >
+            header
+          </div>
+          body
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/common/resourceSelectors/__tests__/__snapshots__/DataViewSelector.spec.js.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DataViewSelector /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui fluid search selection dropdown"
+    role="combobox"
+  >
+    <input
+      aria-autocomplete="list"
+      autocomplete="off"
+      class="search"
+      tabindex="0"
+      type="text"
+      value=""
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider default text"
+      role="alert"
+    >
+      data_view
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      class="menu transition"
+      role="listbox"
+    >
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <span
+          class="text"
+        >
+          UserDataView
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/common/resourceSelectors/__tests__/__snapshots__/ReferenceDatasetSelector.spec.js.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ReferenceDatasetSelector /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui fluid search selection dropdown"
+    role="combobox"
+  >
+    <input
+      aria-autocomplete="list"
+      autocomplete="off"
+      class="search"
+      tabindex="0"
+      type="text"
+      value=""
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider default text"
+      role="alert"
+    >
+      reference_dataset
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      class="menu transition"
+      role="listbox"
+    >
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <span
+          class="text"
+        >
+          UserReferenceDataset
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/common/resourceSelectors/index.js

@@ -0,0 +1,5 @@
+import DataViewSelector from "./DataViewSelector";
+import DataStructureSelector from "./DataStructureSelector";
+import ReferenceDatasetSelector from "./ReferenceDatasetSelector";
+
+export { DataViewSelector, DataStructureSelector, ReferenceDatasetSelector };