@truedat/qx 8.10.2 → 8.10.4

package/src/components/dataViews/advancedForm/Queryable.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
-import { useState, use } from "react";
+import { use } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
-import { Button, Grid, Form, Label, Segment } from "semantic-ui-react";
+import { Button, Form, Label } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
 import { From, GroupBy, Join, Select, Where } from "../queryableProperties";
 import { getColorById, reduceQueryableFields } from "../queryableFunctions";
@@ -20,7 +20,6 @@ export default function Queryable({ index, onDelete }) {
   const { formatMessage } = useIntl();
   const { control, watch } = useFormContext();
   const context = use(QxContext);
-  const [isShownDelete, setIsShownDelete] = useState();
   const { type } = watch(`queryables[${index}]`);
 
   const queryables = watch("queryables");
@@ -66,68 +65,61 @@ export default function Queryable({ index, onDelete }) {
     : null;
 
   return (
-    <div
-      onMouseEnter={() => setIsShownDelete(true)}
-      onMouseLeave={() => setIsShownDelete(false)}
-    >
-      <Grid>
-        <Grid.Column>
-          <Segment>
-            <div className="queryable-label">
-              <Label ribbon color={getColorById(queryable.id)}>
-                {formatMessage({ id: `dataViews.form.queryable.${type}` })}
-              </Label>
-              {isShownDelete && index != 0 ? (
-                <Button
-                  onClick={onDelete}
-                  icon="trash alternate outline"
-                  basic
-                  color="red"
-                  aria-label="delete"
-                />
-              ) : null}
-            </div>
-            <Grid.Row className="vertical-space">
-              <Controller
-                control={control}
-                name={`queryables[${index}].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}
-                  />
-                )}
+    <div>
+      <div>
+        <div className="queryable-label">
+          <Label ribbon color={getColorById(queryable.id)}>
+            {formatMessage({ id: `dataViews.form.queryable.${type}` })}
+          </Label>
+          {index != 0 ? (
+            <Button
+              onClick={onDelete}
+              icon="trash alternate outline"
+              basic
+              color="red"
+              aria-label="delete"
+            />
+          ) : null}
+        </div>
+        <div className="vertical-space">
+          <Controller
+            control={control}
+            name={`queryables[${index}].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: `queryables[${index}].properties`,
-                  fields,
-                }}
-              >
-                {queryableComponents[type]}
-              </QxContext>
-            </Grid.Row>
-          </Segment>
-        </Grid.Column>
-      </Grid>
+            )}
+          />
+        </div>
+        <div className="vertical-space">
+          <QxContext
+            value={{
+              ...context,
+              field: `queryables[${index}].properties`,
+              fields,
+            }}
+          >
+            {queryableComponents[type]}
+          </QxContext>
+        </div>
+      </div>
     </div>
   );
 }

package/src/components/dataViews/advancedForm/Queryables.js

@@ -1,15 +1,20 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
-import { useFieldArray } from "react-hook-form";
+import { useFieldArray, useFormContext } from "react-hook-form";
 import { Button, Divider, List } from "semantic-ui-react";
 import Queryable from "./Queryable";
 
 export default function Queryables() {
   const { formatMessage } = useIntl();
+  const { watch } = useFormContext();
   const { fields, append, remove } = useFieldArray({
     name: "queryables",
     keyName: "key",
   });
+  const queryables = watch("queryables");
+  const hasUnresourcedJoin = _.some(
+    (q) => q.type === "join" && !q.properties?.resource?.id,
+  )(queryables);
 
   const newClause = () => [
     { expressions: [{ shape: "function", value: { isCondition: true } }] },
@@ -41,7 +46,11 @@ export default function Queryables() {
       <List.Item>
         <Divider horizontal>
           {queryableTypes.map((type, idx) => (
-            <Button key={idx} onClick={() => append(newQueryable(type))}>
+            <Button
+              key={idx}
+              onClick={() => append(newQueryable(type))}
+              disabled={type === "join" && hasUnresourcedJoin}
+            >
               {formatMessage({ id: `dataViews.form.queryable.${type}` })}
             </Button>
           ))}

package/src/components/dataViews/queryableProperties/Join.js

@@ -12,8 +12,10 @@ import "@truedat/qx/styles/Expression.less";
 export default function Join() {
   const { formatMessage } = useIntl();
   const context = use(QxContext);
-  const { control } = useFormContext();
+  const { control, watch } = useFormContext();
   const { field } = context;
+  const resource = watch(`${field}.resource`);
+  const hasResource = !!resource?.id;
 
   const joinTypes = ["inner", "left", "right", "full_outer"];
 
@@ -50,11 +52,19 @@ export default function Join() {
           )}
         />
       </div>
-      <div className="vertical-space">
-        <QxContext value={{ ...context, field: `${field}.clauses` }}>
-          <Clauses />
-        </QxContext>
-      </div>
+      {hasResource && (
+        <div className="vertical-space">
+          <QxContext
+            value={{
+              ...context,
+              field: `${field}.clauses`,
+              conditionClasses: ["comparison"],
+            }}
+          >
+            <Clauses />
+          </QxContext>
+        </div>
+      )}
     </>
   );
 }

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

@@ -206,33 +206,5 @@ exports[`<Join /> matches the latest snapshot 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="vertical-space"
-  >
-    <div
-      class="field"
-    >
-      <label>
-        expression.form.clause
-      </label>
-      <div
-        class="ui horizontal divider"
-      >
-        <div
-          class="ui medium basic buttons"
-        >
-          <button
-            class="ui button"
-          >
-            <i
-              aria-hidden="true"
-              class="plus icon"
-            />
-            expression.clause.action.addGroup
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
 </div>
 `;