@truedat/qx 5.14.0 → 5.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -84,7 +84,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "5.14.0",
+    "@truedat/core": "5.15.0",
     "prop-types": "^15.8.1",
     "react-hook-form": "^7.45.4",
     "react-intl": "^5.20.10",
@@ -97,5 +97,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "f1e5448ad078ffe2eece70dabf785f2dc295f0e9"
+  "gitHead": "93bcd66804df32821aa0d563b863774554a39047"
 }

package/src/api.js

@@ -1,5 +1,6 @@
-const API_DATA_SETS = "/api/data_sets";
+const API_DATA_VIEWS = "/api/data_views";
+const API_DATA_VIEW = "/api/data_views/:id";
 const API_FUNCTIONS = "/api/quality_functions";
 const API_FUNCTION = "/api/quality_functions/:id";
 
-export { API_DATA_SETS, API_FUNCTIONS, API_FUNCTION };
+export { API_DATA_VIEWS, API_DATA_VIEW, API_FUNCTIONS, API_FUNCTION };

package/src/components/QxRoutes.js

@@ -2,8 +2,8 @@ import React from "react";
 import { Route } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
-import { DATA_SETS, FUNCTIONS } from "@truedat/core/routes";
-import DataSets from "./DataSets";
+import { DATA_VIEWS, FUNCTIONS } from "@truedat/core/routes";
+import DataViews from "./dataViews/DataViews";
 import Functions from "./functions/Functions";
 
 export default function QxRoutes() {
@@ -12,8 +12,8 @@ export default function QxRoutes() {
   return (
     <>
       <Route
-        path={DATA_SETS}
-        render={() => (authorized ? <DataSets /> : <Unauthorized />)}
+        path={DATA_VIEWS}
+        render={() => (authorized ? <DataViews /> : <Unauthorized />)}
       />
       <Route
         path={FUNCTIONS}

package/src/components/common/ResourceSelector.js

@@ -0,0 +1,80 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form, Dropdown } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import {
+  DataViewSelector,
+  DataStructureSelector,
+  ReferenceDatasetSelector,
+} from "./resourceSelectors";
+
+export default function ResourceSelector({ required }) {
+  const { formatMessage } = useIntl();
+  const { field } = useContext(QxContext);
+  const { control, setValue, watch } = useFormContext();
+
+  const type = watch(`${field}.type`);
+  const resourceTypeOptions = _.map((v) => ({
+    key: v,
+    value: v,
+    text: formatMessage({ id: `queryables.resource.type.${v}` }),
+  }))(["data_structure", "reference_dataset", "data_view"]);
+
+  const resourceSelectorForType = {
+    data_view: DataViewSelector,
+    data_structure: DataStructureSelector,
+    reference_dataset: ReferenceDatasetSelector,
+  };
+
+  return (
+    <>
+      <Controller
+        name={`${field}.type`}
+        control={control}
+        render={({ field: { onBlur, onChange } }) => (
+          <Form.Field required={required}>
+            <label>{formatMessage({ id: "queryables.form.resource" })}</label>
+            <Dropdown
+              selection
+              placeholder={formatMessage({ id: "queryables.resource.type" })}
+              onBlur={onBlur}
+              options={resourceTypeOptions}
+              onChange={(_e, { value }) => {
+                onChange(value);
+                setValue(`${field}.id`, undefined);
+                setValue(`${field}.embedded`, undefined);
+              }}
+              value={type}
+            />
+          </Form.Field>
+        )}
+      />
+      {type ? (
+        <Controller
+          name={`${field}.id`}
+          control={control}
+          render={({ field: { onBlur, onChange, value } }) => {
+            const ResourceSelectorForType = resourceSelectorForType[type];
+            return (
+              <ResourceSelectorForType
+                onBlur={onBlur}
+                onChange={(value) => {
+                  onChange(value?.id);
+                  setValue(`${field}.embedded`, value);
+                }}
+                value={value}
+              />
+            );
+          }}
+        />
+      ) : null}
+    </>
+  );
+}
+
+ResourceSelector.propTypes = {
+  required: PropTypes.bool,
+};

package/src/components/common/TestFormWrapper.js

@@ -4,9 +4,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
 
 export default function TestFormWrapper({
-  type = "string",
-  field = "test",
-  functions = [],
+  context,
   children,
   watcher,
   defaultValues,
@@ -14,11 +12,16 @@ export default function TestFormWrapper({
   const form = useForm({ mode: "onChange", defaultValues });
   watcher && watcher(form.watch());
 
+  const qxContext = {
+    type: "string",
+    field: "test",
+    functions: [],
+    ...context,
+  };
+
   return (
     <FormProvider {...form}>
-      <QxContext.Provider value={{ functions, type, field }}>
-        {children}
-      </QxContext.Provider>
+      <QxContext.Provider value={qxContext}>{children}</QxContext.Provider>
     </FormProvider>
   );
 }

package/src/components/common/TypeSelector.js

@@ -1,5 +1,6 @@
 import _ from "lodash/fp";
 import React from "react";
+import { useIntl } from "react-intl";
 import { Dropdown } from "semantic-ui-react";
 import { typeToIcon, types } from "@truedat/qx/types";
 
@@ -10,11 +11,12 @@ export default function TypeSelector({
   withoutTypeAny,
   name = "type",
 }) {
+  const { formatMessage } = useIntl();
   const options = _.flow(
     _.reject((value) => withoutTypeAny && value == "any"),
     _.map((value) => ({
       key: value,
-      text: value,
+      text: formatMessage({ id: `expressions.data_type.${value}` }),
       value,
       icon: typeToIcon(value),
     }))

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

@@ -0,0 +1,48 @@
+import _ from "lodash/fp";
+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 DescriptionInput from "../DescriptionInput";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.form.add_description": "add_description",
+      "functions.form.description": "description",
+    },
+  },
+};
+
+describe("<DescriptionInput />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <DescriptionInput value="value" />,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+  it("handles user input", async () => {
+    const props = {
+      onBlur: jest.fn(),
+      onChange: jest.fn(),
+    };
+    const { getByRole } = render(<DescriptionInput {...props} />, renderOpts);
+
+    await act(async () => {
+      userEvent.click(getByRole("listitem"));
+    });
+
+    userEvent.type(getByRole("textbox"), "description");
+
+    await act(async () => {
+      userEvent.click(getByRole("list"));
+    });
+
+    const [_event, { value: lastValue }] = props.onChange.mock.lastCall;
+
+    expect(lastValue).toBe("description");
+    expect(props.onBlur).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,124 @@
+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 TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import ResourceSelector from "../ResourceSelector";
+
+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",
+      "structures.not_found.body": "body",
+      "structures.not_found.header": "header",
+      "structures.search.placeholder": "placeholder",
+    },
+  },
+};
+
+describe("<ResourceSelector />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <ResourceSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("select data_view", async () => {
+    const watcher = jest.fn();
+    const { container, getByRole } = render(
+      <TestFormWrapper
+        context={{
+          dataViews: [{ name: "UserDataView", id: 1 }],
+        }}
+        watcher={watcher}
+      >
+        <ResourceSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      userEvent.click(getByRole("option", { name: /data_view/i }));
+    });
+    await act(async () => {
+      userEvent.click(getByRole("option", { name: /UserDataView/i }));
+    });
+
+    expect(watcher).lastCalledWith({
+      test: {
+        embedded: {
+          fields: [],
+          id: 1,
+          name: "UserDataView",
+        },
+        id: 1,
+        type: "data_view",
+      },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("select data_structure", async () => {
+    const watcher = jest.fn();
+    const { container, getByRole } = render(
+      <TestFormWrapper>
+        <ResourceSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      userEvent.click(getByRole("option", { name: /data_structure/i }));
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("select reference_dataset", async () => {
+    const watcher = jest.fn();
+    const { container, getByRole } = render(
+      <TestFormWrapper
+        context={{
+          referenceDatasets: [{ name: "UserReferenceDataset", id: 1 }],
+        }}
+        watcher={watcher}
+      >
+        <ResourceSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await act(async () => {
+      userEvent.click(getByRole("option", { name: /reference_dataset/i }));
+    });
+    await act(async () => {
+      userEvent.click(getByRole("option", { name: /UserReferenceDataset/i }));
+    });
+
+    expect(watcher).lastCalledWith({
+      test: {
+        embedded: {
+          fields: [],
+          id: 1,
+          name: "UserReferenceDataset",
+        },
+        id: 1,
+        type: "reference_dataset",
+      },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import TypeSelector from "../TypeSelector";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "expressions.data_type.timestamp": "timestamp",
+      "expressions.data_type.date": "date",
+      "expressions.data_type.number": "number",
+      "expressions.data_type.string": "string",
+      "expressions.data_type.boolean": "boolean",
+      "expressions.data_type.any": "any",
+    },
+  },
+};
+
+describe("<TypeSelector />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<TypeSelector />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest snapshot withoutTypeAny", () => {
+    const { container } = render(<TypeSelector withoutTypeAny />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DescriptionInput /> matches the latest snapshot 1`] = `
+<div>
+  <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"
+    >
+      value
+    </a>
+  </div>
+</div>
+`;