@truedat/qx 6.12.2 → 6.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "6.12.2",
+  "version": "6.12.4",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -84,7 +84,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "6.12.2",
+    "@truedat/core": "6.12.4",
     "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": "e0acd68539a1ed3786de65ab4fa4221455ea90a4"
+  "gitHead": "0d67a012c6b0337f9c82db464137cf76062cbd81"
 }

package/src/api.js

@@ -9,6 +9,7 @@ const API_QUALITY_CONTROL_PUBLISHED = "/api/quality_controls/:id/published";
 const API_QUALITY_CONTROL_DRAFT = "/api/quality_controls/:id/draft";
 const API_QUALITY_CONTROL_STATUS = "/api/quality_controls/:id/status";
 const API_QUALITY_CONTROL_DOMAINS = "/api/quality_controls/:id/domains";
+const API_QUALITY_CONTROL_QUERIES = "/api/quality_controls/:id/queries";
 const API_QUALITY_CONTROL_SEARCH = "/api/quality_controls/search";
 const API_QUALITY_CONTROL_FILTERS = "/api/quality_controls/filters";
 const API_QUALITY_CONTROL_EXECUTION_GROUPS =
@@ -28,6 +29,7 @@ export {
   API_QUALITY_CONTROL_DRAFT,
   API_QUALITY_CONTROL_STATUS,
   API_QUALITY_CONTROL_DOMAINS,
+  API_QUALITY_CONTROL_QUERIES,
   API_QUALITY_CONTROL_SEARCH,
   API_QUALITY_CONTROL_FILTERS,
   API_QUALITY_CONTROL_EXECUTION_GROUPS,

package/src/components/common/ResourceSelector.js

@@ -13,15 +13,25 @@ import {
 
 export default function ResourceSelector({ required, labelId }) {
   const { formatMessage } = useIntl();
-  const { field } = useContext(QxContext);
+  const { field, referenceDatasets, dataViews, sourceId } =
+    useContext(QxContext);
   const { control, setValue, watch } = useFormContext();
 
+  const sourceDataViews = _.filter({ source_id: parseInt(sourceId) })(
+    dataViews
+  );
+  const resourceTypes = [
+    "data_structure",
+    ...(!_.isEmpty(referenceDatasets) ? ["reference_dataset"] : []),
+    ...(!_.isEmpty(sourceDataViews) ? ["data_view"] : []),
+  ];
+
   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"]);
+  }))(resourceTypes);
 
   const resourceSelectorForType = {
     data_view: DataViewSelector,

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

@@ -53,7 +53,6 @@ const renderOpts = {
 };
 
 const searchProps = {
-  userFiltersType: "foo",
   useFilters: jest.fn(),
   useSearch: jest.fn(),
   loadingFilters: false,
@@ -80,7 +79,8 @@ describe("<ResourceSelector />", () => {
     const { container, getByRole } = render(
       <TestFormWrapper
         context={{
-          dataViews: [{ name: "UserDataView", id: 1 }],
+          dataViews: [{ name: "UserDataView", id: 1, source_id: 10 }],
+          sourceId: 10,
         }}
         watcher={watcher}
       >
@@ -105,6 +105,7 @@ describe("<ResourceSelector />", () => {
           fields: [],
           id: 1,
           name: "UserDataView",
+          source_id: 10,
         },
         id: 1,
         type: "data_view",

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

@@ -42,32 +42,6 @@ exports[`<ResourceSelector /> matches the latest snapshot 1`] = `
             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>
@@ -116,32 +90,6 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
             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>
@@ -292,19 +240,6 @@ exports[`<ResourceSelector /> select data_view 1`] = `
             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="true"
           aria-selected="true"
@@ -423,19 +358,6 @@ exports[`<ResourceSelector /> select reference_dataset 1`] = `
             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>

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

@@ -8,7 +8,7 @@ import StructureSelector from "@truedat/dd/components/StructureSelector";
 
 export default function DataStructureSelector({ onChange }) {
   const { formatMessage } = useIntl();
-  const { field } = useContext(QxContext);
+  const { field, sourceId } = useContext(QxContext);
   const { watch } = useFormContext();
   const selectedStructure = watch(`${field}.embedded`);
 
@@ -54,7 +54,7 @@ export default function DataStructureSelector({ onChange }) {
         <StructureSelector
           withDataFields
           pageSize={20}
-          defaultFilters={{ "class.raw": ["table"] }}
+          defaultFilters={{ "class.raw": ["table"], source_id: [sourceId] }}
           selectedStructure={selectedStructure}
           onSelect={handleSelect}
         />

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

@@ -8,7 +8,7 @@ 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 { dataViews, sourceId, currentDataViewId } = useContext(QxContext);
 
   const matchSorterFp = (items) =>
     matchSorter(items, searchTerm, {
@@ -16,6 +16,10 @@ export default function DataViewSelector({ onChange, onBlur, value }) {
       threshold: matchSorter.rankings.CONTAINS,
     });
 
+  const sourceDataViews = _.filter({ source_id: parseInt(sourceId) })(
+    dataViews
+  );
+
   const options = _.flow(
     _.reject(({ id }) => currentDataViewId && currentDataViewId == id),
     _.cond([
@@ -27,7 +31,7 @@ export default function DataViewSelector({ onChange, onBlur, value }) {
       value: id,
       text: name,
     }))
-  )(dataViews);
+  )(sourceDataViews);
 
   const buildEmbedded = (id) =>
     _.flow(_.find({ id }), (dataView) => ({
@@ -41,7 +45,7 @@ export default function DataViewSelector({ onChange, onBlur, value }) {
           parent_name: dataView.name,
         }))
       )(dataView),
-    }))(dataViews);
+    }))(sourceDataViews);
 
   const handleSearchChange = (_e, { searchQuery }) =>
     setSearchTerm(searchQuery);

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

@@ -19,7 +19,8 @@ describe("<DataViewSelector />", () => {
     const { container } = render(
       <TestFormWrapper
         context={{
-          dataViews: [{ name: "UserDataView", id: 1 }],
+          sourceId: 10,
+          dataViews: [{ name: "UserDataView", id: 1, source_id: 10 }],
         }}
       >
         <DataViewSelector />
@@ -35,9 +36,10 @@ describe("<DataViewSelector />", () => {
     const { queryByText } = render(
       <TestFormWrapper
         context={{
+          sourceId: 10,
           dataViews: [
-            { name: "UserDataView", id: 1 },
-            { name: "SelectedDataView", id: 2 },
+            { name: "UserDataView", id: 1, source_id: 10 },
+            { name: "SelectedDataView", id: 2, source_id: 10 },
           ],
           currentDataViewId: 2,
         }}
@@ -56,11 +58,13 @@ describe("<DataViewSelector />", () => {
     const { getByRole } = render(
       <TestFormWrapper
         context={{
+          sourceId: 10,
           dataViews: [
-            { name: "UserDataView", id: 1 },
+            { name: "UserDataView", id: 1, source_id: 10 },
             {
               name: "SelectedDataView",
               id: 2,
+              source_id: 10,
               select: {
                 properties: {
                   fields: [
@@ -95,6 +99,7 @@ describe("<DataViewSelector />", () => {
         },
       ],
       id: 2,
+      source_id: 10,
       name: "SelectedDataView",
       select: {
         properties: {
@@ -114,9 +119,10 @@ describe("<DataViewSelector />", () => {
     const { getByRole, queryByText } = render(
       <TestFormWrapper
         context={{
+          sourceId: 10,
           dataViews: [
-            { name: "UserDataView", id: 1 },
-            { name: "SelectedDataView", id: 2 },
+            { name: "UserDataView", id: 1, source_id: 10 },
+            { name: "SelectedDataView", id: 2, source_id: 10 },
           ],
         }}
       >

package/src/components/dataViews/DataViewEditor.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React, { Fragment, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
@@ -17,6 +18,10 @@ import QxContext from "@truedat/qx/components/QxContext";
 import DataViewSelect from "./DataViewSelect";
 import Queryables from "./Queryables";
 
+const SourceSelector = React.lazy(() =>
+  import("@truedat/cx/sources/components/SourceSelector")
+);
+
 export default function DataViewEditor({
   selectedDataView,
   context,
@@ -38,6 +43,8 @@ export default function DataViewEditor({
     setDirty(isDirty);
   }, [setDirty, isDirty]);
 
+  const isEditForm = !_.isNil(selectedDataView?.id);
+  const sourceId = watch("source_id");
   if (!selectedDataView) return null;
 
   return (
@@ -94,11 +101,28 @@ export default function DataViewEditor({
               </Grid.Row>
             </GridColumn>
           </Grid>
-          <QxContext.Provider value={context}>
-            <Queryables />
-            <DataViewSelect />
-          </QxContext.Provider>
+          <Controller
+            control={control}
+            name="source_id"
+            rules={{ required: true }}
+            render={({ field: { onChange, value } }) => (
+              <Form.Field required>
+                <label>{formatMessage({ id: "dataViews.form.source" })}</label>
 
+                <SourceSelector
+                  disabled={isEditForm}
+                  value={value + ""}
+                  onChange={(_e, { value }) => onChange(value)}
+                />
+              </Form.Field>
+            )}
+          />
+          {!_.isNil(sourceId) ? (
+            <QxContext.Provider value={{ ...context, sourceId }}>
+              <Queryables />
+              <DataViewSelect />
+            </QxContext.Provider>
+          ) : null}
           <Divider hidden />
           <Container textAlign="right">
             <Button

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
@@ -48,13 +48,15 @@ const renderOpts = {
       "queryables.select.form.add_all_select_fields": "add_all_select_fields",
       "queryables.select.form.add_select_field": "add_select_field",
       "queryables.select.form.alias": "alias",
+      "source.search.placeholder": "placeholder",
+      "dataViews.form.source": "source",
     },
   },
 };
 
 const defaultProps = {
   selectedDataView: null,
-  context: {},
+  context: { sourceId: 10 },
   onSubmit: jest.fn(),
   onCancel: jest.fn(),
   onDelete: jest.fn(),
@@ -78,6 +80,7 @@ describe("<DataViewEditor />", () => {
       ...defaultProps,
       selectedDataView: {
         id: 4,
+        source_id: 10,
         description: "Description",
         name: "StructureView",
         queryables: [
@@ -126,7 +129,12 @@ describe("<DataViewEditor />", () => {
         },
       },
     };
-    const { container } = render(<DataViewEditor {...props} />, renderOpts);
+    const { container } = render(
+      <Suspense fallback={<p>Loading selector</p>}>
+        <DataViewEditor {...props} />
+      </Suspense>,
+      renderOpts
+    );
 
     await act(async () => {
       expect(container).toMatchSnapshot();
@@ -140,6 +148,7 @@ describe("<DataViewEditor />", () => {
       onSubmit,
       selectedDataView: {
         name: "",
+        source_id: 10,
         description: "",
         queryables: [
           {
@@ -159,6 +168,7 @@ describe("<DataViewEditor />", () => {
         dataViews: [
           {
             id: 4,
+            source_id: 10,
             description: "Description",
             name: "AnotherDataView",
             select: {
@@ -185,16 +195,14 @@ describe("<DataViewEditor />", () => {
         ],
       },
     };
-    const { container, getAllByRole, getByRole } = render(
-      <DataViewEditor {...props} />,
-      renderOpts
-    );
+    const { container, getAllByRole, getByRole, getByPlaceholderText, debug } =
+      render(<DataViewEditor {...props} />, renderOpts);
 
     // Insert name
     userEvent.type(getAllByRole("textbox")[0], "data_view_name");
 
     // Insert From information
-    userEvent.type(getAllByRole("textbox")[1], "from_alias");
+    userEvent.type(getByPlaceholderText("alias"), "from_alias");
     userEvent.click(getByRole("option", { name: /data_view/i }));
     userEvent.click(getByRole("option", { name: /AnotherDataView/i }));
 
@@ -221,6 +229,7 @@ describe("<DataViewEditor />", () => {
 
     expect(onSubmit).toHaveBeenCalledWith({
       description: "",
+      source_id: 10,
       name: "data_view_name",
       queryables: [
         {
@@ -260,6 +269,7 @@ describe("<DataViewEditor />", () => {
                   },
                   type: "select",
                 },
+                source_id: 10,
               },
               id: 4,
               type: "data_view",

package/src/components/dataViews/__tests__/__snapshots__/DataViewEditor.spec.js.snap

@@ -60,6 +60,13 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="required field"
+    >
+      <label>
+        source
+      </label>
+    </div>
     <div
       class="ui list"
       role="list"
@@ -151,19 +158,6 @@ exports[`<DataViewEditor /> handles user interaction 1`] = `
                             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="true"
                           aria-selected="true"
@@ -518,6 +512,7 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
 <div>
   <form
     class="ui form"
+    style="display: none;"
   >
     <h3
       class="ui dividing header"
@@ -574,6 +569,13 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="required field"
+    >
+      <label>
+        source
+      </label>
+    </div>
     <div
       class="ui list"
       role="list"
@@ -665,32 +667,6 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
                             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>
@@ -996,5 +972,8 @@ exports[`<DataViewEditor /> matches the latest snapshot with content 1`] = `
       </button>
     </div>
   </form>
+  <p>
+    Loading selector
+  </p>
 </div>
 `;

package/src/components/dataViews/__tests__/__snapshots__/Queryable.spec.js.snap

@@ -85,32 +85,6 @@ exports[`<Queryable /> matches the latest snapshot with duplicated alias 1`] = `
                       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>
@@ -185,7 +159,7 @@ exports[`<Queryable /> matches the latest snapshot with duplicated resource 1`]
                   class="divider text"
                   role="alert"
                 >
-                  data_view
+                  type
                 </div>
                 <i
                   aria-hidden="true"
@@ -196,41 +170,15 @@ exports[`<Queryable /> matches the latest snapshot with duplicated resource 1`]
                 >
                   <div
                     aria-checked="false"
-                    aria-selected="false"
-                    class="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="true"
                     aria-selected="true"
-                    class="active selected item"
+                    class="selected item"
                     role="option"
                     style="pointer-events: all;"
                   >
                     <span
                       class="text"
                     >
-                      data_view
+                      data_structure
                     </span>
                   </div>
                 </div>
@@ -365,32 +313,6 @@ exports[`<Queryable /> matches the latest snapshot with from queryable 1`] = `
                       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>
@@ -584,32 +506,6 @@ exports[`<Queryable /> matches the latest snapshot with join queryable 1`] = `
                       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>

package/src/components/dataViews/__tests__/__snapshots__/Queryables.spec.js.snap

@@ -93,32 +93,6 @@ exports[`<Queryables /> matches the latest snapshot with from queryable 1`] = `
                           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>
@@ -390,32 +364,6 @@ exports[`<Queryables /> matches the latest snapshot with join queryable 1`] = `
                           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>
@@ -842,32 +790,6 @@ exports[`<Queryables /> test delete queryable 1`] = `
                           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>

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

@@ -42,32 +42,6 @@ exports[`<From /> matches the latest snapshot 1`] = `
             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>

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

@@ -42,32 +42,6 @@ exports[`<Join /> matches the latest snapshot 1`] = `
             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>

package/src/components/qualityControls/QualityControl.js

@@ -37,7 +37,7 @@ export default function QualityControl() {
           <DynamicFormViewer
             boxLayout
             template={qualityControl.df_type}
-            content={qualityControl.dynamic_content}
+            content={qualityControl.df_content}
           />
         </>
       ) : null}

package/src/components/qualityControls/QualityControlActions.js

@@ -5,7 +5,9 @@ import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { Button, Container } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
+import { useAuthorized } from "@truedat/core/hooks";
 import { useQualityControlUpdateStatus } from "../../hooks/useQualityControls";
+import QualityControlQueryModal from "./QualityControlQueryModal";
 
 export default function QualityControlActions({
   actions,
@@ -16,11 +18,15 @@ export default function QualityControlActions({
   const { trigger, isMutating } = useQualityControlUpdateStatus(
     qualityControl.id
   );
+  const authorized = useAuthorized();
 
   const updateStatus = (action) => trigger({ action }).then(() => mutate());
 
   return (
     <Container textAlign="right">
+      {authorized ? (
+        <QualityControlQueryModal qualityControlId={qualityControl.id} />
+      ) : null}
       {_.map((action) =>
         action === "create_draft" ? (
           <Button

package/src/components/qualityControls/QualityControlEditor.js

@@ -24,6 +24,9 @@ import ResultType from "./ResultType";
 const SelectableDynamicForm = React.lazy(() =>
   import("@truedat/df/components/SelectableDynamicForm")
 );
+const SourceSelector = React.lazy(() =>
+  import("@truedat/cx/sources/components/SourceSelector")
+);
 
 export default function QualityControlEditor({
   value,
@@ -82,10 +85,13 @@ export default function QualityControlEditor({
 
   const formData = watch();
 
+  console.log("formData", formData);
+
   const {
     resource,
     name,
-    dynamic_content: dfContent,
+    source_id: sourceId,
+    df_content: dfContent,
     domain_ids: domainIds,
   } = formData;
 
@@ -196,17 +202,47 @@ export default function QualityControlEditor({
             )}
           />
 
-          <QxContext.Provider value={{ ...context, field: "resource" }}>
-            <ResourceSelector required labelId="quality_control.form.dataset" />
-          </QxContext.Provider>
-          {resource?.id ? (
-            <div className="vertical-space">
+          <Controller
+            control={control}
+            name="source_id"
+            rules={{ required: true }}
+            render={({ field: { onChange, value } }) => (
+              <Form.Field required>
+                <label>{formatMessage({ id: "dataViews.form.source" })}</label>
+
+                <SourceSelector
+                  disabled={isModification}
+                  value={value + ""}
+                  onChange={(_e, { value }) => onChange(value)}
+                />
+              </Form.Field>
+            )}
+          />
+          {!_.isNil(sourceId) ? (
+            <>
               <QxContext.Provider
-                value={{ ...context, fields, field: "validation" }}
+                value={{ ...context, sourceId, field: "resource" }}
               >
-                <Clauses labelId="quality_control.form.validation" />
+                <ResourceSelector
+                  required
+                  labelId="quality_control.form.dataset"
+                />
               </QxContext.Provider>
-            </div>
+              {resource?.id ? (
+                <div className="vertical-space">
+                  <QxContext.Provider
+                    value={{
+                      ...context,
+                      sourceId,
+                      fields,
+                      field: "validation",
+                    }}
+                  >
+                    <Clauses labelId="quality_control.form.validation" />
+                  </QxContext.Provider>
+                </div>
+              ) : null}
+            </>
           ) : null}
 
           <Divider hidden />

package/src/components/qualityControls/QualityControlHeader.js

@@ -12,7 +12,7 @@ import QualityControlCrumbs from "./QualityControlCrumbs";
 import QualityControlActions from "./QualityControlActions";
 import QualityControlTabs from "./QualityControlTabs";
 
-export default function QualityControl({ children }) {
+export default function QualityControlHeader({ children }) {
   const { id } = useParams();
   const { data, loading, mutate } = useQualityControl(id);
 
@@ -59,6 +59,6 @@ export default function QualityControl({ children }) {
   );
 }
 
-QualityControl.propTypes = {
+QualityControlHeader.propTypes = {
   children: PropTypes.node,
 };

package/src/components/qualityControls/QualityControlQueryModal.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Accordion,
+  AccordionTitle,
+  AccordionContent,
+  Icon,
+  TextArea,
+  Button,
+  Modal,
+  Divider,
+} from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { useQualityControlQueries } from "../../hooks/useQualityControls";
+
+const JsonBox = ({ title, content }) => {
+  const [expanded, setExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const contentString = JSON.stringify(content, null, 2);
+  return (
+    <>
+      <AccordionTitle active={expanded} onClick={() => setExpanded(!expanded)}>
+        <div className="json-box-title">
+          <span>
+            <Icon name="dropdown" />
+            {title}
+          </span>
+          <Button
+            icon={copied ? "check" : "copy"}
+            color={copied && "green"}
+            onClick={(e) => {
+              e.stopPropagation();
+              setCopied(true);
+              setTimeout(() => setCopied(false), 2000);
+              navigator.clipboard.writeText(contentString);
+            }}
+          />
+        </div>
+      </AccordionTitle>
+      <AccordionContent active={expanded}>
+        <TextArea
+          className="json-box"
+          fluid
+          editable={false}
+          rows={10}
+          size="small"
+          value={contentString}
+        />
+      </AccordionContent>
+    </>
+  );
+};
+const ModalContent = ({ id }) => {
+  const { data, loading } = useQualityControlQueries(id);
+  return loading ? (
+    <FormattedMessage id={`quality_control.queries.loading`} />
+  ) : (
+    <Accordion styled>
+      {data?.data?.queries.map((json, id) => (
+        <JsonBox key={id} title={`Query ${id}`} content={json} />
+      ))}
+      <JsonBox
+        title="Resources Lookup"
+        content={data?.data?.resources_lookup}
+      />
+    </Accordion>
+  );
+};
+export default function QualityControlQueryModal({ qualityControlId: id }) {
+  const [open, setOpen] = useState(open);
+  return (
+    <Modal
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      trigger={<Button icon="file code outline" />}
+      closeIcon
+      size={"small"}
+      content={<ModalContent id={id} />}
+      role="dialog"
+    />
+  );
+}

package/src/components/qualityControls/QualityControlRoutes.js

@@ -40,7 +40,6 @@ export default function QxRoutes() {
     initialSortDirection: "descending",
     useSearch: useQualityControlsSearch,
     useFilters: useQualityControlsFilters,
-    userFiltersType: "qx",
   };
 
   return (

package/src/hooks/useQualityControls.js

@@ -17,6 +17,7 @@ import {
   API_QUALITY_CONTROL_DOMAINS,
   API_QUALITY_CONTROL_SEARCH,
   API_QUALITY_CONTROL_FILTERS,
+  API_QUALITY_CONTROL_QUERIES,
 } from "../api";
 
 export const useQualityControls = () => {
@@ -72,3 +73,8 @@ export const useQualityControlsFilters = () => {
     apiJsonPost(url, arg)
   );
 };
+export const useQualityControlQueries = (id) => {
+  const url = compile(API_QUALITY_CONTROL_QUERIES)({ id });
+  const { data, error, mutate } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};

package/src/styles/Expression.less

@@ -284,4 +284,16 @@ ul.function-tree {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.json-box {
+  font-family: monospace;
+  font-size: smaller;
+  width: 100%;
+}
+
+.json-box-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }