@truedat/qx 7.5.9 → 7.5.11

package/src/components/common/__tests__/ResourceSelector.spec.js

@@ -1,10 +1,7 @@
-import React from "react";
-import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
-import { waitFor } from "@testing-library/react";
-import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { render, waitForLoad } from "@truedat/test/render";
 import SearchContext from "@truedat/core/search/SearchContext";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import ResourceSelector from "../ResourceSelector";
 
 jest.mock("@truedat/dd/hooks/useStructures", () => {
@@ -33,26 +30,6 @@ jest.mock("@truedat/dd/hooks/useStructures", () => {
   };
 });
 
-const renderOpts = {
-  messages: {
-    en: {
-      "queryables.form.resource": "resource",
-      "queryables.resource.type": "type",
-      "queryables.resource.type.data_structure": "data_structure",
-      "queryables.resource.type.reference_dataset": "reference_dataset",
-      "queryables.resource.type.data_view": "data_view",
-      "queryables.resource.selector.data_view": "data_view",
-      "queryables.resource.selector.reference_dataset": "reference_dataset",
-      "search.placeholder": "placeholder",
-      "structures.not_found.body": "body",
-      "structures.not_found.header": "header",
-      "structures.search.placeholder": "placeholder",
-      "structures.loading.header": "loading",
-    },
-  },
-  fallback: "loading",
-};
-
 const searchProps = {
   useFilters: jest.fn(),
   useSearch: jest.fn(),
@@ -63,24 +40,20 @@ const searchProps = {
 
 describe("<ResourceSelector />", () => {
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper>
-        <SearchContext.Provider value={searchProps}>
+        <SearchContext value={searchProps}>
           <ResourceSelector />
-        </SearchContext.Provider>
-      </TestFormWrapper>,
-      renderOpts
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+        </SearchContext>
+      </TestFormWrapper>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("select data_view", async () => {
     const watcher = jest.fn();
-
-    const { container, getByRole } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           dataViews: [{ name: "UserDataView", id: 1, source_id: 10 }],
@@ -88,21 +61,17 @@ describe("<ResourceSelector />", () => {
         }}
         watcher={watcher}
       >
-        <SearchContext.Provider value={searchProps}>
+        <SearchContext value={searchProps}>
           <ResourceSelector />
-        </SearchContext.Provider>
-      </TestFormWrapper>,
-      renderOpts
+        </SearchContext>
+      </TestFormWrapper>
     );
-    const loader = container.querySelector(".loader");
-    await waitFor(() => expect(loader).not.toBeInTheDocument());
-    await act(async () => {
-      userEvent.click(getByRole("option", { name: /data_view/i }));
-    });
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(getByRole("option", { name: /UserDataView/i }));
-    });
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByRole("option", { name: /data_view/i }));
+    await user.click(rendered.getByRole("option", { name: /userdataview/i }));
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -117,64 +86,50 @@ describe("<ResourceSelector />", () => {
       },
     });
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("select data_structure", async () => {
     const watcher = jest.fn();
-    const { container, getByRole, findByText } = render(
+    const rendered = render(
       <TestFormWrapper watcher={watcher}>
-        <SearchContext.Provider value={searchProps}>
+        <SearchContext value={searchProps}>
           <ResourceSelector />
-        </SearchContext.Provider>
-      </TestFormWrapper>,
-      renderOpts
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
+        </SearchContext>
+      </TestFormWrapper>
     );
-    await act(async () => {
-      userEvent.click(await getByRole("option", { name: /data_structure/i }));
-    });
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    await waitFor(() =>
-      expect(container.querySelector(".loading")).not.toBeInTheDocument()
-    );
-    await findByText(/header/);
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("option", { name: /data_structure/i }));
+
+    await rendered.findByText(/header/);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("select reference_dataset", async () => {
     const watcher = jest.fn();
-    const { container, getByRole } = render(
+    const rendered = render(
       <TestFormWrapper
         context={{
           referenceDatasets: [{ name: "UserReferenceDataset", id: 1 }],
         }}
         watcher={watcher}
       >
-        <SearchContext.Provider value={searchProps}>
+        <SearchContext value={searchProps}>
           <ResourceSelector />
-        </SearchContext.Provider>
-      </TestFormWrapper>,
-      renderOpts
+        </SearchContext>
+      </TestFormWrapper>
     );
-    const loader = container.querySelector(".loader");
-    await waitFor(() => expect(loader).not.toBeInTheDocument());
+    await waitForLoad(rendered);
 
-    await act(async () => {
-      userEvent.click(
-        await getByRole("option", { name: /reference_dataset/i })
-      );
-    });
-
-    await act(async () => {
-      userEvent.click(
-        await getByRole("option", { name: /UserReferenceDataset/i })
-      );
-    });
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      rendered.getByRole("option", { name: /reference_dataset/i })
+    );
+    await user.click(
+      rendered.getByRole("option", { name: /userreferenceDataset/i })
+    );
 
     expect(watcher).toHaveBeenLastCalledWith({
       test: {
@@ -187,6 +142,6 @@ describe("<ResourceSelector />", () => {
         type: "reference_dataset",
       },
     });
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/common/__tests__/TypeSelector.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import TypeSelector from "../TypeSelector";
 

package/src/components/common/__tests__/__snapshots__/ResourceSelector.spec.js.snap

@@ -6,7 +6,7 @@ exports[`<ResourceSelector /> matches the latest snapshot 1`] = `
     class="field"
   >
     <label>
-      resource
+      queryables.form.resource
     </label>
     <div
       aria-expanded="false"
@@ -20,7 +20,7 @@ exports[`<ResourceSelector /> matches the latest snapshot 1`] = `
         class="divider default text"
         role="alert"
       >
-        type
+        queryables.resource.type
       </div>
       <i
         aria-hidden="true"
@@ -39,7 +39,7 @@ exports[`<ResourceSelector /> matches the latest snapshot 1`] = `
           <span
             class="text"
           >
-            data_structure
+            queryables.resource.type.data_structure
           </span>
         </div>
       </div>
@@ -54,7 +54,7 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
     class="field"
   >
     <label>
-      resource
+      queryables.form.resource
     </label>
     <div
       aria-expanded="false"
@@ -68,7 +68,7 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
         class="divider text"
         role="alert"
       >
-        data_structure
+        queryables.resource.type.data_structure
       </div>
       <i
         aria-hidden="true"
@@ -87,7 +87,7 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
           <span
             class="text"
           >
-            data_structure
+            queryables.resource.type.data_structure
           </span>
         </div>
       </div>
@@ -98,20 +98,19 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
       aria-hidden="true"
       class="dropdown icon"
     />
-    
   </div>
   <div
     class="ui segment"
   >
     <div
-      class="ui action left icon input"
+      class="ui loading action left icon input"
     >
       <i
         aria-hidden="true"
         class="search link icon"
       />
       <input
-        placeholder="placeholder"
+        placeholder="search.placeholder"
         type="text"
         value=""
       />
@@ -124,10 +123,10 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
         />
       </button>
       <div
-        aria-busy="false"
+        aria-busy="true"
         aria-disabled="false"
         aria-expanded="false"
-        class="ui button floating labeled scrolling dropdown icon"
+        class="ui loading button floating labeled scrolling dropdown icon"
         role="listbox"
         tabindex="0"
       >
@@ -161,8 +160,20 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
       class="selectedFilters"
     />
     <div
-      class="dimmable structure-table-overflow"
+      class="dimmed dimmable structure-table-overflow"
     >
+      <div
+        class="ui active transition visible inverted dimmer"
+        style="display: flex;"
+      >
+        <div
+          class="content"
+        >
+          <div
+            class="ui large loader"
+          />
+        </div>
+      </div>
       <div
         class="ui icon info message"
       >
@@ -176,9 +187,8 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
           <div
             class="header"
           >
-            header
+            structures.loading.header
           </div>
-          body
         </div>
       </div>
     </div>
@@ -192,7 +202,7 @@ exports[`<ResourceSelector /> select data_view 1`] = `
     class="field"
   >
     <label>
-      resource
+      queryables.form.resource
     </label>
     <div
       aria-expanded="false"
@@ -206,7 +216,7 @@ exports[`<ResourceSelector /> select data_view 1`] = `
         class="divider text"
         role="alert"
       >
-        data_view
+        queryables.resource.type.data_view
       </div>
       <i
         aria-hidden="true"
@@ -225,7 +235,7 @@ exports[`<ResourceSelector /> select data_view 1`] = `
           <span
             class="text"
           >
-            data_structure
+            queryables.resource.type.data_structure
           </span>
         </div>
         <div
@@ -238,7 +248,7 @@ exports[`<ResourceSelector /> select data_view 1`] = `
           <span
             class="text"
           >
-            data_view
+            queryables.resource.type.data_view
           </span>
         </div>
       </div>
@@ -297,7 +307,7 @@ exports[`<ResourceSelector /> select reference_dataset 1`] = `
     class="field"
   >
     <label>
-      resource
+      queryables.form.resource
     </label>
     <div
       aria-expanded="false"
@@ -311,7 +321,7 @@ exports[`<ResourceSelector /> select reference_dataset 1`] = `
         class="divider text"
         role="alert"
       >
-        reference_dataset
+        queryables.resource.type.reference_dataset
       </div>
       <i
         aria-hidden="true"
@@ -330,7 +340,7 @@ exports[`<ResourceSelector /> select reference_dataset 1`] = `
           <span
             class="text"
           >
-            data_structure
+            queryables.resource.type.data_structure
           </span>
         </div>
         <div
@@ -343,7 +353,7 @@ exports[`<ResourceSelector /> select reference_dataset 1`] = `
           <span
             class="text"
           >
-            reference_dataset
+            queryables.resource.type.reference_dataset
           </span>
         </div>
       </div>

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useContext } from "react";
+import { useState, use } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { useFieldArray } from "react-hook-form";
@@ -11,7 +11,7 @@ const newExpression = () => ({ shape: "function", value: null });
 
 export default function Clauses({ labelId }) {
   const { formatMessage } = useIntl();
-  const context = useContext(QxContext);
+  const context = use(QxContext);
   const { field } = context;
   const { fields, append, remove } = useFieldArray({ name: field });
 
@@ -28,7 +28,6 @@ export default function Clauses({ labelId }) {
           lastGroup={groupIndex === _.size(fields) - 1}
         />
       ))}
-
       <Divider horizontal>
         <Button
           size="mini"
@@ -47,7 +46,7 @@ Clauses.propTypes = {
 
 const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
   const { formatMessage } = useIntl();
-  const context = useContext(QxContext);
+  const context = use(QxContext);
   const { field } = context;
   const [isShownDelete, setIsShownDelete] = useState();
   const { fields, append, remove } = useFieldArray({
@@ -75,7 +74,7 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
 
         {fields.map((_clauseExpression, expressionIndex) => (
           <div key={`and-${groupIndex}-${expressionIndex}`}>
-            <QxContext.Provider
+            <QxContext
               value={{
                 ...context,
                 field: `${field}[${groupIndex}].expressions[${expressionIndex}]`,
@@ -87,7 +86,7 @@ const ClauseExpression = ({ groupIndex, removeGroup, lastGroup }) => {
                   _.size(fields) < 2 ? null : () => remove(expressionIndex)
                 }
               />
-            </QxContext.Provider>
+            </QxContext>
             <Divider horizontal>
               {expressionIndex === _.size(fields) - 1 ? null : "AND"}
             </Divider>

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

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
-import React, { useState, useContext } from "react";
+import { useState, use } from "react";
 import PropTypes from "prop-types";
 import { Dropdown, Button, Grid } from "semantic-ui-react";
 import { Controller, useFormContext } from "react-hook-form";
@@ -26,7 +26,7 @@ const isConditionExpression = (expression, functions) => {
 export default function Condition({ onDelete }) {
   const { formatMessage } = useIntl();
   const [isShownDelete, setIsShownDelete] = useState();
-  const context = useContext(QxContext);
+  const context = use(QxContext);
   const { control, watch } = useFormContext();
   const { field, functions } = context;
 
@@ -75,7 +75,7 @@ export default function Condition({ onDelete }) {
       onMouseLeave={() => setIsShownDelete(false)}
     >
       {!isCondition ? (
-        <QxContext.Provider
+        <QxContext
           value={{
             ...context,
             field,
@@ -83,11 +83,11 @@ export default function Condition({ onDelete }) {
           }}
         >
           <Expression onDelete={isShownDelete ? onDelete : null} deletable />
-        </QxContext.Provider>
+        </QxContext>
       ) : (
         <Grid className="condition-row">
           <Grid.Column width={6}>
-            <QxContext.Provider
+            <QxContext
               value={{
                 ...context,
                 type: "any",
@@ -97,9 +97,8 @@ export default function Condition({ onDelete }) {
               }}
             >
               <Expression />
-            </QxContext.Provider>
+            </QxContext>
           </Grid.Column>
-
           <Grid.Column width={3}>
             <div className="flex-justify-center">
               <Controller
@@ -142,7 +141,7 @@ export default function Condition({ onDelete }) {
           </Grid.Column>
 
           <Grid.Column width={6}>
-            <QxContext.Provider
+            <QxContext
               value={{
                 ...context,
                 type: "any",
@@ -152,7 +151,7 @@ export default function Condition({ onDelete }) {
               }}
             >
               <Expression />
-            </QxContext.Provider>
+            </QxContext>
           </Grid.Column>
 
           <Grid.Column width={1} verticalAlign="top">

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import { use, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
 import {
@@ -8,7 +8,7 @@ import {
 } from "./constantInputs";
 
 export default function ConstantSelector() {
-  const { type, field } = useContext(QxContext);
+  const { type, field } = use(QxContext);
   const { setValue } = useFormContext();
 
   useEffect(() => {

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { use } from "react";
 import PropTypes from "prop-types";
 import { useFormContext } from "react-hook-form";
 import { Button, Grid, Icon } from "semantic-ui-react";
@@ -11,7 +11,7 @@ import FieldSelector from "./FieldSelector";
 import ConstantSelector from "./ConstantSelector";
 
 export default function Expression({ onDelete, deletable }) {
-  const { field, aggregate } = useContext(QxContext);
+  const { field, aggregate } = use(QxContext);
   const { watch } = useFormContext();
   const shape = watch(`${field}.shape`);
 

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext, useEffect } from "react";
+import { use, useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { Dropdown, Label } from "semantic-ui-react";
 
@@ -25,7 +25,7 @@ export const fieldsToOptions = _.map((field) => ({
 }));
 
 export default function FieldSelector() {
-  const { field, type, fields } = useContext(QxContext);
+  const { field, type, fields } = use(QxContext);
   const { control, watch, setValue } = useFormContext();
   const fieldOptions = _.flow(
     _.filter((field) => type === "any" || field.type == type),

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

@@ -1,14 +1,14 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { lazy, use } 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"));
+const Expression = lazy(() => import("./Expression"));
 
 export default function FunctionArgs() {
-  const context = useContext(QxContext);
+  const context = use(QxContext);
   const { functions, field } = context;
   const { watch } = useFormContext();
 
@@ -31,8 +31,7 @@ export default function FunctionArgs() {
               </Label>
               <div className="param-label-description">{description}</div>
             </div>
-
-            <QxContext.Provider
+            <QxContext
               value={{
                 ...context,
                 type,
@@ -41,7 +40,7 @@ export default function FunctionArgs() {
               }}
             >
               <Expression />
-            </QxContext.Provider>
+            </QxContext>
           </div>
         </li>
       ))}

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useContext } from "react";
+import { useState, use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Dropdown, Accordion, Icon, Label, Header } from "semantic-ui-react";
@@ -10,7 +10,7 @@ import FunctionArgs from "./FunctionArgs";
 export default function FunctionSelector() {
   const { formatMessage } = useIntl();
   const { functions, field, type, omitLogicOperators, aggregate } =
-    useContext(QxContext);
+    use(QxContext);
   const { control, watch } = useFormContext();
 
   const [collapsed, setCollapsed] = useState(false);

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

@@ -1,12 +1,12 @@
 import _ from "lodash/fp";
-import React, { useContext, useEffect } from "react";
+import { use, 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 { field, type } = use(QxContext);
   const { control, watch, setValue } = useFormContext();
 
   const params = useWatchParams();

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

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect, useContext, useMemo } from "react";
+import { useEffect, use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Dropdown } from "semantic-ui-react";
@@ -14,12 +14,7 @@ const shapeToSymbol = {
 
 export default function ShapeSelector() {
   const { formatMessage } = useIntl();
-  const {
-    fields,
-    field,
-    type,
-    defaultShape = "function",
-  } = useContext(QxContext);
+  const { fields, field, type, defaultShape = "function" } = use(QxContext);
   const { control, watch, setValue } = useFormContext();
 
   const params = watch("params");
@@ -35,15 +30,11 @@ export default function ShapeSelector() {
     _.isEmpty
   )(fields);
 
-  const shapes = useMemo(
-    () =>
-      _.reject(
-        (shape) =>
-          (shape === "param" && emptyTypeParams) ||
-          (shape === "field" && emptyTypeFields)
-      )(["constant", "function", "param", "field"]),
-    [emptyTypeParams, emptyTypeFields]
-  );
+  const shapes = _.reject(
+    (shape) =>
+      (shape === "param" && emptyTypeParams) ||
+      (shape === "field" && emptyTypeFields)
+  )(["constant", "function", "param", "field"]);
 
   const shape = watch(`${field}.shape`);