@truedat/qx 8.10.2 → 8.10.4

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

@@ -16,133 +16,129 @@ exports[`<SelectField /> matches the latest snapshot for group_by 1`] = `
           class="nine wide column"
         >
           <div
-            class="ui grid"
+            class="expression-container"
           >
             <div
-              class="sixteen wide column"
+              class="expression-content"
             >
               <div
-                class="expression-container"
+                aria-expanded="false"
+                class="ui top left pointing dropdown"
+                role="listbox"
+                tabindex="0"
               >
                 <div
-                  aria-expanded="false"
-                  class="ui top left pointing dropdown"
-                  role="listbox"
-                  tabindex="0"
+                  class="shape-selector-trigger"
+                >
+                  f(x)
+                </div>
+                <div
+                  class="menu transition"
                 >
                   <div
-                    class="shape-selector-trigger"
-                  >
-                    f(x)
-                  </div>
-                  <div
-                    class="menu transition"
+                    aria-checked="true"
+                    aria-selected="true"
+                    class="active selected item"
+                    role="option"
+                    style="pointer-events: all;"
                   >
                     <div
-                      aria-checked="false"
-                      aria-selected="false"
-                      class="item"
-                      role="option"
-                      style="pointer-events: all;"
+                      class="text flex-center"
                     >
-                      <div
-                        class="text flex-center"
+                      <small
+                        style="margin-right: 5px;"
                       >
-                        <small
-                          style="margin-right: 5px;"
-                        >
-                          <b>
-                            <code>
-                              [π]
-                            </code>
-                          </b>
-                        </small>
-                        functions.expression.shape.constant
-                      </div>
+                        <b>
+                          <code>
+                            f(x)
+                          </code>
+                        </b>
+                      </small>
+                      functions.expression.shape.function
                     </div>
+                  </div>
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
                     <div
-                      aria-checked="true"
-                      aria-selected="true"
-                      class="active selected item"
-                      role="option"
-                      style="pointer-events: all;"
+                      class="text flex-center"
                     >
-                      <div
-                        class="text flex-center"
+                      <small
+                        style="margin-right: 5px;"
                       >
-                        <small
-                          style="margin-right: 5px;"
-                        >
-                          <b>
-                            <code>
-                              f(x)
-                            </code>
-                          </b>
-                        </small>
-                        functions.expression.shape.function
-                      </div>
+                        <b>
+                          <code>
+                            [π]
+                          </code>
+                        </b>
+                      </small>
+                      functions.expression.shape.constant
                     </div>
                   </div>
                 </div>
+              </div>
+              <div
+                class="accordion ui fluid no-margin"
+              >
                 <div
-                  class="accordion ui fluid no-margin"
+                  class="active title no-padding"
                 >
                   <div
-                    class="active title no-padding"
+                    class="flex-center"
                   >
+                    <i
+                      aria-hidden="true"
+                      class="dropdown icon"
+                    />
                     <div
-                      class="flex-center"
+                      class="sixteen wide field"
                     >
-                      <i
-                        aria-hidden="true"
-                        class="dropdown icon"
-                      />
                       <div
-                        class="sixteen wide field"
+                        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-expanded="false"
-                          class="ui fluid search selection dropdown"
-                          role="combobox"
+                          aria-atomic="true"
+                          aria-live="polite"
+                          class="divider text"
+                          role="alert"
+                        >
+                          functions.form.expression.function.placeholder
+                        </div>
+                        <i
+                          aria-hidden="true"
+                          class="dropdown icon"
+                        />
+                        <div
+                          class="menu transition"
+                          role="listbox"
                         >
-                          <input
-                            aria-autocomplete="list"
-                            autocomplete="off"
-                            class="search"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            aria-atomic="true"
-                            aria-live="polite"
-                            class="divider text"
-                            role="alert"
-                          >
-                            functions.form.expression.function.placeholder
-                          </div>
-                          <i
-                            aria-hidden="true"
-                            class="dropdown icon"
-                          />
                           <div
-                            class="menu transition"
-                            role="listbox"
+                            class="message"
                           >
-                            <div
-                              class="message"
-                            >
-                              No results found.
-                            </div>
+                            No results found.
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="content active no-padding"
-                  />
                 </div>
+                <div
+                  class="content active no-padding"
+                />
               </div>
             </div>
           </div>
@@ -190,133 +186,129 @@ exports[`<SelectField /> matches the latest snapshot for select 1`] = `
           class="nine wide column"
         >
           <div
-            class="ui grid"
+            class="expression-container"
           >
             <div
-              class="sixteen wide column"
+              class="expression-content"
             >
               <div
-                class="expression-container"
+                aria-expanded="false"
+                class="ui top left pointing dropdown"
+                role="listbox"
+                tabindex="0"
               >
                 <div
-                  aria-expanded="false"
-                  class="ui top left pointing dropdown"
-                  role="listbox"
-                  tabindex="0"
+                  class="shape-selector-trigger"
+                >
+                  f(x)
+                </div>
+                <div
+                  class="menu transition"
                 >
                   <div
-                    class="shape-selector-trigger"
-                  >
-                    f(x)
-                  </div>
-                  <div
-                    class="menu transition"
+                    aria-checked="true"
+                    aria-selected="true"
+                    class="active selected item"
+                    role="option"
+                    style="pointer-events: all;"
                   >
                     <div
-                      aria-checked="false"
-                      aria-selected="false"
-                      class="item"
-                      role="option"
-                      style="pointer-events: all;"
+                      class="text flex-center"
                     >
-                      <div
-                        class="text flex-center"
+                      <small
+                        style="margin-right: 5px;"
                       >
-                        <small
-                          style="margin-right: 5px;"
-                        >
-                          <b>
-                            <code>
-                              [π]
-                            </code>
-                          </b>
-                        </small>
-                        functions.expression.shape.constant
-                      </div>
+                        <b>
+                          <code>
+                            f(x)
+                          </code>
+                        </b>
+                      </small>
+                      functions.expression.shape.function
                     </div>
+                  </div>
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
                     <div
-                      aria-checked="true"
-                      aria-selected="true"
-                      class="active selected item"
-                      role="option"
-                      style="pointer-events: all;"
+                      class="text flex-center"
                     >
-                      <div
-                        class="text flex-center"
+                      <small
+                        style="margin-right: 5px;"
                       >
-                        <small
-                          style="margin-right: 5px;"
-                        >
-                          <b>
-                            <code>
-                              f(x)
-                            </code>
-                          </b>
-                        </small>
-                        functions.expression.shape.function
-                      </div>
+                        <b>
+                          <code>
+                            [π]
+                          </code>
+                        </b>
+                      </small>
+                      functions.expression.shape.constant
                     </div>
                   </div>
                 </div>
+              </div>
+              <div
+                class="accordion ui fluid no-margin"
+              >
                 <div
-                  class="accordion ui fluid no-margin"
+                  class="active title no-padding"
                 >
                   <div
-                    class="active title no-padding"
+                    class="flex-center"
                   >
+                    <i
+                      aria-hidden="true"
+                      class="dropdown icon"
+                    />
                     <div
-                      class="flex-center"
+                      class="sixteen wide field"
                     >
-                      <i
-                        aria-hidden="true"
-                        class="dropdown icon"
-                      />
                       <div
-                        class="sixteen wide field"
+                        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-expanded="false"
-                          class="ui fluid search selection dropdown"
-                          role="combobox"
+                          aria-atomic="true"
+                          aria-live="polite"
+                          class="divider text"
+                          role="alert"
+                        >
+                          functions.form.expression.function.placeholder
+                        </div>
+                        <i
+                          aria-hidden="true"
+                          class="dropdown icon"
+                        />
+                        <div
+                          class="menu transition"
+                          role="listbox"
                         >
-                          <input
-                            aria-autocomplete="list"
-                            autocomplete="off"
-                            class="search"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            aria-atomic="true"
-                            aria-live="polite"
-                            class="divider text"
-                            role="alert"
-                          >
-                            functions.form.expression.function.placeholder
-                          </div>
-                          <i
-                            aria-hidden="true"
-                            class="dropdown icon"
-                          />
                           <div
-                            class="menu transition"
-                            role="listbox"
+                            class="message"
                           >
-                            <div
-                              class="message"
-                            >
-                              No results found.
-                            </div>
+                            No results found.
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                  <div
-                    class="content active no-padding"
-                  />
                 </div>
+                <div
+                  class="content active no-padding"
+                />
               </div>
             </div>
           </div>

package/src/components/dataViews/simpleForm/DatasetForm.js

@@ -32,6 +32,9 @@ const DatasetForm = ({
   const joinIndex = _.findIndex((f) => f?.type == "join")(dataset);
   const whereIndex = _.findIndex((f) => f?.type == "where")(dataset);
   const joins = _.filter((f) => f?.type == "join")(dataset);
+  const hasUnresourcedJoin = _.some(
+    (q) => q.type === "join" && !q.properties?.resource?.id,
+  )(queryables);
   const wheres = _.filter((f) => f?.type == "where")(dataset);
   const joinRange =
     joinIndex === -1 ? [] : _.range(joinIndex, joinIndex + _.size(joins));
@@ -139,6 +142,7 @@ const DatasetForm = ({
                 content={formatMessage({
                   id: "queryables.form.action.add_join",
                 })}
+                disabled={hasUnresourcedJoin}
                 onClick={() => {
                   onQueryableAdd("join");
                 }}

package/src/components/dataViews/simpleForm/FormQueryable.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import { use } from "react";
 import { useIntl } from "react-intl";
-import { Button, Grid, Form, Segment } from "semantic-ui-react";
+import { Button, Form } from "semantic-ui-react";
 import { useFormContext, Controller } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
 import { From, GroupBy, Join, Where } from "../queryableProperties";
@@ -55,59 +55,55 @@ const FormQueryable = ({ index = 0, prefix, type = "from", onDelete }) => {
     : null;
 
   return (
-    <Grid>
-      <Grid.Column>
-        <Segment>
-          {type !== "from" && onDelete ? (
-            <Button
-              onClick={onDelete}
-              icon="trash alternate outline"
-              basic
-              color="red"
-              aria-label="delete"
-              floated="right"
+    <div>
+      {type !== "from" && onDelete ? (
+        <Button
+          onClick={onDelete}
+          icon="trash alternate outline"
+          basic
+          color="red"
+          aria-label="delete"
+          floated="right"
+        />
+      ) : null}
+      <div className="vertical-space">
+        <Controller
+          control={control}
+          name={`${prefix}.alias`}
+          rules={{
+            validate: () => validateAlias || validateResource,
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Input
+              label={formatMessage({
+                id: "dataViews.form.queryable.alias",
+              })}
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "dataViews.form.queryable.alias",
+              })}
+              error={error?.message}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
             />
-          ) : null}
-          <Grid.Row className="vertical-space">
-            <Controller
-              control={control}
-              name={`${prefix}.alias`}
-              rules={{
-                validate: () => validateAlias || validateResource,
-              }}
-              render={({
-                field: { onBlur, onChange, value },
-                fieldState: { error },
-              }) => (
-                <Form.Input
-                  label={formatMessage({
-                    id: "dataViews.form.queryable.alias",
-                  })}
-                  autoComplete="off"
-                  placeholder={formatMessage({
-                    id: "dataViews.form.queryable.alias",
-                  })}
-                  error={error?.message}
-                  onBlur={onBlur}
-                  onChange={(_e, { value }) => onChange(value)}
-                  value={value}
-                />
-              )}
-            />
-          </Grid.Row>
-          <Grid.Row className="vertical-space">
-            <QxContext
-              value={{ ...context, field: `${prefix}.properties`, fields }}
-            >
-              {type === "from" && <From />}
-              {type === "join" && <Join />}
-              {type === "group_by" && <GroupBy />}
-              {type === "where" && <Where />}
-            </QxContext>
-          </Grid.Row>
-        </Segment>
-      </Grid.Column>
-    </Grid>
+          )}
+        />
+      </div>
+      <div className="vertical-space">
+        <QxContext
+          value={{ ...context, field: `${prefix}.properties`, fields }}
+        >
+          {type === "from" && <From />}
+          {type === "join" && <Join />}
+          {type === "group_by" && <GroupBy />}
+          {type === "where" && <Where />}
+        </QxContext>
+      </div>
+    </div>
   );
 };
 

package/src/components/dataViews/summary/Where.js

@@ -17,8 +17,9 @@ const hasValidClauses = (clauses) => {
       _.some(
         (expr) =>
           !_.isNil(expr?.value?.name) &&
-          (!_.isNil(expr?.value?.args?.arg1?.value) ||
-            !_.isNil(expr?.value?.args?.arg2?.value)),
+          _.some((arg) => !_.isNil(arg?.value))(
+            _.values(expr?.value?.args ?? {}),
+          ),
       )(expressions)
     );
   })(clauses);