@truedat/qx 8.0.4 → 8.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "8.0.4",
+  "version": "8.1.1",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -53,7 +53,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.0.4",
+    "@truedat/test": "8.1.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "e68d85fa6cb7c44974235cfb0e0301ed5a3dba98"
+  "gitHead": "26ff4767ae2a60605d4958208ca73d91cfe7f81a"
 }

package/src/components/common/ClauseViewer.js

@@ -57,14 +57,14 @@ export default function ClauseViewer({ clause, parentResource }) {
     _.map((group) => ({
       ...group,
       expressions: _.filter((expr) => isExpressionValid(expr, functions))(
-        group.expressions || []
+        group.expressions || [],
       ),
     })),
-    _.filter((group) => _.size(group.expressions) > 0)
+    _.filter((group) => _.size(group.expressions) > 0),
   )(clause || []);
 
   return (
-    <Segment loading={loading} compact basic className="text-break-word">
+    <Segment loading={loading} basic className="text-break-word">
       {loading
         ? null
         : _map(({ expressions }, idx) => (
@@ -192,7 +192,7 @@ function GenericExpressionFunctionViewer({ alias, value }) {
             <div key={key} className="display-flex">
               <ExpressionViewer expression={expression} />
             </div>
-          ))
+          )),
         )(value)}
       </div>
       )

package/src/components/common/ResourceSelector.js

@@ -57,6 +57,7 @@ export default function ResourceSelector({ required, labelId }) {
             <Form.Dropdown
               selection
               error={error?.message}
+              disabled={!sourceId}
               placeholder={formatMessage({ id: "queryables.resource.type" })}
               onBlur={onBlur}
               options={resourceTypeOptions}

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

@@ -9,13 +9,14 @@ exports[`<ResourceSelector /> matches the latest snapshot 1`] = `
       queryables.form.resource
     </label>
     <div
-      class="field"
+      class="disabled field"
     >
       <div
+        aria-disabled="true"
         aria-expanded="false"
-        class="ui selection dropdown"
+        class="ui disabled selection dropdown"
         role="listbox"
-        tabindex="0"
+        tabindex="-1"
       >
         <div
           aria-atomic="true"
@@ -61,13 +62,14 @@ exports[`<ResourceSelector /> select data_structure 1`] = `
       queryables.form.resource
     </label>
     <div
-      class="field"
+      class="disabled field"
     >
       <div
+        aria-disabled="true"
         aria-expanded="false"
-        class="ui selection dropdown"
+        class="ui disabled selection dropdown"
         role="listbox"
-        tabindex="0"
+        tabindex="-1"
       >
         <div
           aria-atomic="true"
@@ -220,6 +222,7 @@ exports[`<ResourceSelector /> select data_view 1`] = `
       class="field"
     >
       <div
+        aria-disabled="false"
         aria-expanded="false"
         class="ui selection dropdown"
         role="listbox"
@@ -330,13 +333,14 @@ exports[`<ResourceSelector /> select reference_dataset 1`] = `
       queryables.form.resource
     </label>
     <div
-      class="field"
+      class="disabled field"
     >
       <div
+        aria-disabled="true"
         aria-expanded="false"
-        class="ui selection dropdown"
+        class="ui disabled selection dropdown"
         role="listbox"
-        tabindex="0"
+        tabindex="-1"
       >
         <div
           aria-atomic="true"

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

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import { use } from "react";
 import PropTypes from "prop-types";
 import { useFormContext } from "react-hook-form";
-import { Button, Grid, Icon } from "semantic-ui-react";
+import { Button, Grid } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
 import ShapeSelector from "./ShapeSelector";
 import FunctionSelector from "./FunctionSelector";

package/src/components/dataViews/DataViewSummary.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import { Fragment } from "react";
 import PropTypes from "prop-types";
-import { Segment, List, Divider } from "semantic-ui-react";
+import { Segment } from "semantic-ui-react";
 import From from "./summary/From";
 import Join from "./summary/Join";
 import Where from "./summary/Where";
@@ -35,34 +35,24 @@ export default function DataViewSummary({ dataView }) {
 
   return (
     <QxContext value={{ parentResourceMap }}>
-      <Segment>
-        <List>
-          {queryables.map((queryable, index) => (
-            <Fragment key={index}>
-              {queryable.type === "from" && <From queryable={queryable} />}
-              {queryable.type === "join" && <Join queryable={queryable} />}
-              {queryable.type === "where" && (
-                <Where
-                  queryable={queryable}
-                  clauseType={clauseTypeForWhere(index, queryables)}
-                />
-              )}
-              {queryable.type === "group_by" && (
-                <GroupBy queryable={queryable} />
-              )}
-              {queryable.type === "select" && <Select queryable={queryable} />}
-              {index < queryables.length - 1 && (
-                <Divider key={`divider-${index}`} />
-              )}
-            </Fragment>
-          ))}
-          {!_.isEmpty(dataView.select?.properties?.fields) && (
-            <>
-              <Divider />
-              <Select queryable={dataView.select} />
-            </>
-          )}
-        </List>
+      <Segment compact basic>
+        {queryables.map((queryable, index) => (
+          <Fragment key={index}>
+            {queryable.type === "from" && <From queryable={queryable} />}
+            {queryable.type === "join" && <Join queryable={queryable} />}
+            {queryable.type === "where" && (
+              <Where
+                queryable={queryable}
+                clauseType={clauseTypeForWhere(index, queryables)}
+              />
+            )}
+            {queryable.type === "group_by" && <GroupBy queryable={queryable} />}
+            {queryable.type === "select" && <Select queryable={queryable} />}
+          </Fragment>
+        ))}
+        {!_.isEmpty(dataView.select?.properties?.fields) && (
+          <Select queryable={dataView.select} />
+        )}
       </Segment>
     </QxContext>
   );

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

@@ -184,6 +184,7 @@ exports[`<AdvancedDataViewEditor /> handles user interaction 1`] = `
                           class="field"
                         >
                           <div
+                            aria-disabled="false"
                             aria-expanded="false"
                             class="ui selection dropdown"
                             role="listbox"
@@ -575,97 +576,113 @@ exports[`<AdvancedDataViewEditor /> handles user interaction 1`] = `
       class="five wide column"
     >
       <div
-        class="ui segment"
+        class="ui basic compact segment"
       >
+        <h5
+          class="ui header"
+        >
+          <i
+            aria-hidden="true"
+            class="database small icon"
+          />
+          <div
+            class="content"
+          >
+            dataViews.form.queryable.from
+          </div>
+        </h5>
         <div
-          class="ui list"
-          role="list"
+          class="ui segment"
         >
           <div
-            class="item"
-            role="listitem"
+            class="ui list"
+            role="list"
           >
             <div
-              class="header"
-              style="margin-bottom: 8px;"
-            >
-              <i
-                aria-hidden="true"
-                class="database icon"
-              />
-              dataViews.form.queryable.from
-            </div>
-            <div
-              class="content"
+              class="item"
+              role="listitem"
             >
               <div
-                class="description-flex-wrap text-break-word description"
+                class="content"
               >
                 <div
-                  class="ui horizontal label"
+                  class="description-flex-wrap text-break-word description"
                 >
-                  queryables.resource.selector.data_view
-                </div>
-                <div
-                  class="ui blue label text-break-word"
-                >
-                  AnotherDataView
-                </div>
-                <b
-                  style="margin-right: 4px; margin-left: 4px;"
-                >
-                  as
-                </b>
-                <div
-                  class="ui blue label text-break-word"
-                >
-                  from_alias
+                  <div
+                    class="ui horizontal label"
+                  >
+                    queryables.resource.selector.data_view
+                  </div>
+                  <div
+                    class="ui blue label text-break-word"
+                  >
+                    AnotherDataView
+                  </div>
+                  <b
+                    style="margin-right: 4px; margin-left: 4px;"
+                  >
+                    as
+                  </b>
+                  <div
+                    class="ui blue label text-break-word"
+                  >
+                    from_alias
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          <div
-            class="ui divider"
+        </div>
+        <h5
+          class="ui header"
+        >
+          <i
+            aria-hidden="true"
+            class="columns small icon"
           />
           <div
-            class="item"
-            role="listitem"
+            class="content"
+          >
+            dataViews.form.queryable.select
+          </div>
+        </h5>
+        <div
+          class="ui segment"
+        >
+          <div
+            class="ui list"
+            role="list"
           >
             <div
-              class="header"
-              style="margin-bottom: 8px;"
-            >
-              <i
-                aria-hidden="true"
-                class="columns icon"
-              />
-              dataViews.form.queryable.select
-            </div>
-            <div
-              class="content"
+              class="item"
+              role="listitem"
             >
               <div
-                class="list"
+                class="content"
               >
                 <div
-                  class="item"
-                  role="listitem"
+                  class="list"
                 >
                   <div
-                    class="ui blue label text-break-word"
-                    title="from_alias.Column1"
-                  >
-                    from_alias.Column1
-                  </div>
-                  <b
-                    style="margin-right: 4px; margin-left: 4px;"
-                  >
-                    as
-                  </b>
-                  <div
-                    class="ui blue label text-break-word"
+                    class="item"
+                    role="listitem"
                   >
-                    Column1
+                    <div
+                      class="ui blue label text-break-word"
+                      title="from_alias.Column1"
+                    >
+                      from_alias.Column1
+                    </div>
+                    <b
+                      style="margin-right: 4px; margin-left: 4px;"
+                    >
+                      as
+                    </b>
+                    <div
+                      class="ui blue label text-break-word"
+                    >
+                      Column1
+                    </div>
                   </div>
                 </div>
               </div>
@@ -863,6 +880,7 @@ exports[`<AdvancedDataViewEditor /> matches the latest snapshot with content 1`]
                           class="field"
                         >
                           <div
+                            aria-disabled="false"
                             aria-expanded="false"
                             class="ui selection dropdown"
                             role="listbox"
@@ -1214,87 +1232,103 @@ exports[`<AdvancedDataViewEditor /> matches the latest snapshot with content 1`]
       class="five wide column"
     >
       <div
-        class="ui segment"
+        class="ui basic compact segment"
       >
+        <h5
+          class="ui header"
+        >
+          <i
+            aria-hidden="true"
+            class="database small icon"
+          />
+          <div
+            class="content"
+          >
+            dataViews.form.queryable.from
+          </div>
+        </h5>
         <div
-          class="ui list"
-          role="list"
+          class="ui segment"
         >
           <div
-            class="item"
-            role="listitem"
+            class="ui list"
+            role="list"
           >
             <div
-              class="header"
-              style="margin-bottom: 8px;"
-            >
-              <i
-                aria-hidden="true"
-                class="database icon"
-              />
-              dataViews.form.queryable.from
-            </div>
-            <div
-              class="content"
+              class="item"
+              role="listitem"
             >
               <div
-                class="description-flex-wrap text-break-word description"
+                class="content"
               >
                 <div
-                  class="ui horizontal label"
-                >
-                  queryables.resource.selector.data_structure
-                </div>
-                <div
-                  class="ui blue label text-break-word"
+                  class="description-flex-wrap text-break-word description"
                 >
-                  ParentTable
+                  <div
+                    class="ui horizontal label"
+                  >
+                    queryables.resource.selector.data_structure
+                  </div>
+                  <div
+                    class="ui blue label text-break-word"
+                  >
+                    ParentTable
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          <div
-            class="ui divider"
+        </div>
+        <h5
+          class="ui header"
+        >
+          <i
+            aria-hidden="true"
+            class="columns small icon"
           />
           <div
-            class="item"
-            role="listitem"
+            class="content"
+          >
+            dataViews.form.queryable.select
+          </div>
+        </h5>
+        <div
+          class="ui segment"
+        >
+          <div
+            class="ui list"
+            role="list"
           >
             <div
-              class="header"
-              style="margin-bottom: 8px;"
-            >
-              <i
-                aria-hidden="true"
-                class="columns icon"
-              />
-              dataViews.form.queryable.select
-            </div>
-            <div
-              class="content"
+              class="item"
+              role="listitem"
             >
               <div
-                class="list"
+                class="content"
               >
                 <div
-                  class="item"
-                  role="listitem"
+                  class="list"
                 >
                   <div
-                    class="ui blue label text-break-word"
-                    title="ParentTable.Column1"
-                  >
-                    ParentTable.Column1
-                  </div>
-                  <b
-                    style="margin-right: 4px; margin-left: 4px;"
-                  >
-                    as
-                  </b>
-                  <div
-                    class="ui blue label text-break-word"
+                    class="item"
+                    role="listitem"
                   >
-                    Column1
+                    <div
+                      class="ui blue label text-break-word"
+                      title="ParentTable.Column1"
+                    >
+                      ParentTable.Column1
+                    </div>
+                    <b
+                      style="margin-right: 4px; margin-left: 4px;"
+                    >
+                      as
+                    </b>
+                    <div
+                      class="ui blue label text-break-word"
+                    >
+                      Column1
+                    </div>
                   </div>
                 </div>
               </div>