@truedat/qx 7.13.8 → 7.14.0

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

@@ -556,7 +556,7 @@ exports[`<Queryable /> matches the latest snapshot with join queryable 1`] = `
                 </label>
                 <div
                   aria-expanded="false"
-                  class="ui selection dropdown select-field-dropdown"
+                  class="ui selection dropdown select-field-dropdown join-type-selector"
                   role="listbox"
                   tabindex="0"
                 >
@@ -787,21 +787,25 @@ exports[`<Queryable /> matches the latest snapshot with select queryable 1`] = `
               role="list"
             >
               <div
-                class="item"
-                role="listitem"
+                class="field"
               >
-                <button
-                  class="ui button"
-                >
-                  add_select_field
-                </button>
-                <button
-                  class="ui disabled button"
-                  disabled=""
-                  tabindex="-1"
+                <div
+                  class="item"
+                  role="listitem"
                 >
-                  add_all_select_fields
-                </button>
+                  <button
+                    class="ui button"
+                  >
+                    add_select_field
+                  </button>
+                  <button
+                    class="ui disabled button"
+                    disabled=""
+                    tabindex="-1"
+                  >
+                    add_all_select_fields
+                  </button>
+                </div>
               </div>
             </div>
           </div>

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

@@ -402,7 +402,7 @@ exports[`<Queryables /> matches the latest snapshot with join queryable 1`] = `
                     </label>
                     <div
                       aria-expanded="false"
-                      class="ui selection dropdown select-field-dropdown"
+                      class="ui selection dropdown select-field-dropdown join-type-selector"
                       role="listbox"
                       tabindex="0"
                     >
@@ -672,21 +672,25 @@ exports[`<Queryables /> matches the latest snapshot with select queryable 1`] =
                   role="list"
                 >
                   <div
-                    class="item"
-                    role="listitem"
+                    class="field"
                   >
-                    <button
-                      class="ui button"
-                    >
-                      queryables.select.form.add_select_field
-                    </button>
-                    <button
-                      class="ui disabled button"
-                      disabled=""
-                      tabindex="-1"
+                    <div
+                      class="item"
+                      role="listitem"
                     >
-                      queryables.select.form.add_all_select_fields
-                    </button>
+                      <button
+                        class="ui button"
+                      >
+                        queryables.select.form.add_select_field
+                      </button>
+                      <button
+                        class="ui disabled button"
+                        disabled=""
+                        tabindex="-1"
+                      >
+                        queryables.select.form.add_all_select_fields
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>

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

@@ -14,6 +14,7 @@ import { FormProvider, useForm, Controller } from "react-hook-form";
 import QxContext from "@truedat/qx/components/QxContext";
 import DataViewSelect from "./DataViewSelect";
 import Queryables from "./Queryables";
+import DataViewSummary from "../DataViewSummary";
 
 const SourceSelector = lazy(
   () => import("@truedat/cx/sources/components/SourceSelector")
@@ -37,18 +38,21 @@ export default function AdvancedDataViewEditor({
 
   const isEditForm = !_.isNil(selectedDataView?.id);
   const sourceId = watch("source_id");
+  const currentDataView = watch();
+
   if (!selectedDataView) return null;
 
   return (
     <Fragment>
-      <FormProvider {...form}>
-        <Form>
-          <Header as="h3" dividing>
-            {watch("name") || formatMessage({ id: "dataViews.action.new" })}
-          </Header>
-          <Grid>
-            <Grid.Column>
-              <Grid.Row className="vertical-space">
+      <Grid>
+        <Grid.Column width="11">
+          <FormProvider {...form}>
+            <Form>
+              <Header as="h3" dividing>
+                {watch("name") || formatMessage({ id: "dataViews.action.new" })}
+              </Header>
+
+              <Grid.Row>
                 <Controller
                   control={control}
                   name="name"
@@ -78,7 +82,7 @@ export default function AdvancedDataViewEditor({
                   )}
                 />
               </Grid.Row>
-              <Grid.Row className="vertical-space">
+              <Grid.Row>
                 <Controller
                   control={control}
                   name="description"
@@ -104,47 +108,54 @@ export default function AdvancedDataViewEditor({
                   )}
                 />
               </Grid.Row>
-            </Grid.Column>
-          </Grid>
-          <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)}
+              <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 value={{ ...context, sourceId }}>
+                  <Queryables />
+                  <DataViewSelect />
+                </QxContext>
+              ) : null}
+              <Divider hidden />
+              <Container textAlign="right">
+                <Button
+                  content={formatMessage({ id: "actions.cancel" })}
+                  disabled={isSubmitting}
+                  onClick={onCancel}
                 />
-              </Form.Field>
-            )}
-          />
-          {!_.isNil(sourceId) ? (
-            <QxContext value={{ ...context, sourceId }}>
-              <Queryables />
-              <DataViewSelect />
-            </QxContext>
-          ) : null}
-          <Divider hidden />
-          <Container textAlign="right">
-            <Button
-              content={formatMessage({ id: "actions.cancel" })}
-              disabled={isSubmitting}
-              onClick={onCancel}
-            />
 
-            <Button
-              onClick={handleSubmit((data) => onSubmit({ ...data, mode }))}
-              primary
-              loading={isSubmitting}
-              disabled={!isValid || !isDirty}
-              content={formatMessage({ id: "actions.save" })}
-            />
-          </Container>
-        </Form>
-      </FormProvider>
+                <Button
+                  onClick={handleSubmit((data) => onSubmit({ ...data, mode }))}
+                  primary
+                  loading={isSubmitting}
+                  disabled={!isValid || !isDirty}
+                  content={formatMessage({ id: "actions.save" })}
+                />
+              </Container>
+            </Form>
+          </FormProvider>
+        </Grid.Column>
+        {!_.isNil(sourceId) && (
+          <Grid.Column width="5">
+            <DataViewSummary dataView={currentDataView} />
+          </Grid.Column>
+        )}
+      </Grid>
     </Fragment>
   );
 }

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

@@ -7,6 +7,7 @@ import { Dropdown, Form } from "semantic-ui-react";
 import ResourceSelector from "@truedat/qx/components/common/ResourceSelector";
 import QxContext from "@truedat/qx/components/QxContext";
 import JoinTypeIcon from "./JoinTypeIcon";
+import "@truedat/qx/styles/Expression.less";
 
 export default function Join() {
   const { formatMessage } = useIntl();
@@ -38,7 +39,7 @@ export default function Join() {
                 {formatMessage({ id: "queryables.form.join.type" })}
               </label>
               <Dropdown
-                className="select-field-dropdown"
+                className="select-field-dropdown join-type-selector"
                 selection
                 value={value}
                 options={joinTypeOptions}

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

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import { use } from "react";
 import { useIntl } from "react-intl";
 import { useFieldArray, useFormState } from "react-hook-form";
-import { Button, List, Popup } from "semantic-ui-react";
+import { Button, Form, Label, List } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
 import SelectField, { newSelectField } from "./SelectField";
 
@@ -29,12 +29,6 @@ export default function Select() {
   )(ctxFields);
   const maxId = _.flow(_.map("id"), _.max)(fields) || 0;
 
-  const addFieldButton = (
-    <Button onClick={() => append(newSelectField(maxId + 1))}>
-      {formatMessage({ id: "queryables.select.form.add_select_field" })}
-    </Button>
-  );
-
   return (
     <List>
       {fields.map((selectField, index) => (
@@ -46,30 +40,28 @@ export default function Select() {
           </QxContext>
         </List.Item>
       ))}
-      <List.Item>
-        {requiredError ? (
-          <Popup
-            className="error-popup"
-            content={requiredError}
-            open
-            pinned
-            position="bottom center"
-            trigger={addFieldButton}
-          />
-        ) : (
-          addFieldButton
-        )}
-        {_.size(fields) == 0 ? (
-          <Button
-            onClick={() => append(allFields)}
-            disabled={_.isEmpty(allFields)}
-          >
-            {formatMessage({
-              id: "queryables.select.form.add_all_select_fields",
-            })}
+      <Form.Field error={!!requiredError}>
+        <List.Item>
+          <Button onClick={() => append(newSelectField(maxId + 1))}>
+            {formatMessage({ id: "queryables.select.form.add_select_field" })}
           </Button>
-        ) : null}
-      </List.Item>
+          {_.size(fields) == 0 ? (
+            <Button
+              onClick={() => append(allFields)}
+              disabled={_.isEmpty(allFields)}
+            >
+              {formatMessage({
+                id: "queryables.select.form.add_all_select_fields",
+              })}
+            </Button>
+          ) : null}
+        </List.Item>
+        {requiredError && (
+          <List.Item>
+            <Label content={requiredError} prompt pointing="above" />
+          </List.Item>
+        )}
+      </Form.Field>
     </List>
   );
 }

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

@@ -60,7 +60,7 @@ exports[`<Join /> matches the latest snapshot 1`] = `
       </label>
       <div
         aria-expanded="false"
-        class="ui selection dropdown select-field-dropdown"
+        class="ui selection dropdown select-field-dropdown join-type-selector"
         role="listbox"
         tabindex="0"
       >

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

@@ -191,14 +191,18 @@ exports[`<Select /> handles add all fields 1`] = `
       </div>
     </div>
     <div
-      class="item"
-      role="listitem"
+      class="field"
     >
-      <button
-        class="ui button"
+      <div
+        class="item"
+        role="listitem"
       >
-        queryables.select.form.add_select_field
-      </button>
+        <button
+          class="ui button"
+        >
+          queryables.select.form.add_select_field
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -211,21 +215,25 @@ exports[`<Select /> matches the latest snapshot 1`] = `
     role="list"
   >
     <div
-      class="item"
-      role="listitem"
+      class="field"
     >
-      <button
-        class="ui button"
-      >
-        queryables.select.form.add_select_field
-      </button>
-      <button
-        class="ui disabled button"
-        disabled=""
-        tabindex="-1"
+      <div
+        class="item"
+        role="listitem"
       >
-        queryables.select.form.add_all_select_fields
-      </button>
+        <button
+          class="ui button"
+        >
+          queryables.select.form.add_select_field
+        </button>
+        <button
+          class="ui disabled button"
+          disabled=""
+          tabindex="-1"
+        >
+          queryables.select.form.add_all_select_fields
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -583,14 +591,18 @@ exports[`<Select /> matches the latest snapshot with content 1`] = `
       </div>
     </div>
     <div
-      class="item"
-      role="listitem"
+      class="field"
     >
-      <button
-        class="ui button"
+      <div
+        class="item"
+        role="listitem"
       >
-        queryables.select.form.add_select_field
-      </button>
+        <button
+          class="ui button"
+        >
+          queryables.select.form.add_select_field
+        </button>
+      </div>
     </div>
   </div>
 </div>

package/src/components/dataViews/queryableSummaryHelpers.js

@@ -0,0 +1,101 @@
+import _ from "lodash/fp";
+
+const labelForQueryable = (queryable) => {
+  if (queryable.type === "from")
+    return queryable.alias || queryable.properties?.resource?.embedded?.name;
+  if (queryable.type === "join")
+    return queryable.alias || queryable.properties?.resource?.embedded?.name;
+  if (queryable.type === "group_by") return queryable.alias || "Group By";
+  return null;
+};
+
+export const validResource = (queryable) => {
+  return !_.isNil(queryable?.properties?.resource?.id);
+};
+
+/**
+ * Extracts resource information from a queryable
+ */
+export const getResourceInfo = (queryable) => {
+  if (!queryable?.properties?.resource?.id) return null;
+
+  const resource = queryable.properties.resource;
+  return {
+    id: resource.id,
+    type: resource.type,
+    name: resource.embedded?.name || resource.name,
+    alias: queryable.alias,
+  };
+};
+
+/**
+ * Extracts join information including join type
+ */
+export const getJoinInfo = (queryable) => {
+  if (!queryable?.properties?.resource?.id) return null;
+
+  const resource = queryable.properties.resource;
+  const joinType = queryable.properties.type || "inner";
+
+  return {
+    id: resource.id,
+    type: resource.type,
+    name: resource.embedded?.name || resource.name,
+    alias: queryable.alias,
+    joinType,
+    clauses: queryable.properties.clauses,
+  };
+};
+
+/**
+ * Extracts group by fields
+ */
+export const getGroupByFields = (queryable) => {
+  if (!queryable?.properties?.group_fields) return [];
+
+  return _.map((field) => ({
+    alias: field.alias,
+    expression: field.expression,
+  }))(queryable.properties.group_fields);
+};
+
+/**
+ * Extracts aggregate fields
+ */
+export const getAggregateFields = (queryable) => {
+  if (!queryable?.properties?.aggregate_fields) return [];
+
+  return _.map((field) => ({
+    alias: field.alias,
+    expression: field.expression,
+  }))(queryable.properties.aggregate_fields);
+};
+
+/**
+ * Extracts select fields
+ */
+export const getSelectFields = (queryable) => {
+  if (!queryable?.properties?.fields) return [];
+
+  return _.map((field) => ({
+    alias: field.alias,
+    expression: field.expression,
+  }))(queryable.properties.fields);
+};
+
+/**
+ * Checks if queryables array has valid structure
+ */
+export const hasValidStructure = (queryables = []) => {
+  return (
+    _.size(queryables) > 0 &&
+    _.some((q) => q.type === "from" && validResource(q))(queryables)
+  );
+};
+
+export const buildParentResourceMap = (queryables = []) =>
+  _.flow(
+    _.filter((q) => ["from", "join", "group_by"].includes(q.type)),
+    _.map((q) => [q.id, { ...q, label: labelForQueryable(q) }]),
+    _.fromPairs
+  )(queryables);

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

@@ -10,6 +10,7 @@ import DatasetForm from "./DatasetForm";
 import AggregationForm from "./AggregationForm";
 import SelectionForm from "./SelectionForm";
 import CancelButton from "../actions/CancelButton";
+import DataViewSummary from "../DataViewSummary";
 
 export default function SimpleDataViewEditor({
   selectedDataView,
@@ -34,6 +35,7 @@ export default function SimpleDataViewEditor({
 
   const isEditForm = !_.isNil(selectedDataView?.id);
   const sourceId = watch("source_id");
+  const currentDataView = watch();
 
   const doSubmit = async (data) => {
     const ok = await trigger();
@@ -49,9 +51,7 @@ export default function SimpleDataViewEditor({
   const updateStatusState = async (steps) => {
     const validations = await Promise.all(
       _.map.convert({ cap: false })(async (step) => {
-        const ok = await trigger(stepInformation[step]["fieldNames"], {
-          shouldFocus: true,
-        });
+        const ok = await trigger(stepInformation[step]["fieldNames"]);
         const content = ok ? { status: "valid" } : { status: "error" };
         return [step, content];
       })(steps)
@@ -102,7 +102,7 @@ export default function SimpleDataViewEditor({
   return (
     <Fragment>
       <Grid>
-        <Grid.Column width="12">
+        <Grid.Column width="11">
           <Grid.Row textAlign="center">
             <Step.Group>
               <Step active={activeStep == 0} {...stepProps(0)}>
@@ -250,6 +250,11 @@ export default function SimpleDataViewEditor({
             </FormProvider>
           </Grid.Row>
         </Grid.Column>
+        {!_.isNil(sourceId) && (
+          <Grid.Column width="5">
+            <DataViewSummary dataView={currentDataView} />
+          </Grid.Column>
+        )}
       </Grid>
     </Fragment>
   );

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

@@ -0,0 +1,45 @@
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+import { List, Icon, Label } from "semantic-ui-react";
+import { getResourceInfo } from "../queryableSummaryHelpers";
+import { getColorById } from "../queryableFunctions";
+import "@truedat/qx/styles/Expression.less";
+
+export default function From({ queryable }) {
+  const { formatMessage } = useIntl();
+  const fromResource = getResourceInfo(queryable);
+  const color = getColorById(queryable.id);
+
+  if (_.isNil(fromResource)) {
+    return null;
+  }
+
+  return (
+    <List.Item>
+      <List.Header style={{ marginBottom: 8 }}>
+        <Icon name="database" />
+        {formatMessage({ id: "dataViews.form.queryable.from" })}
+      </List.Header>
+      <List.Content>
+        <List.Description className="description-flex-wrap text-break-word">
+          <Label horizontal>
+            {formatMessage({
+              id: `queryables.resource.selector.${fromResource.type}`,
+            })}
+          </Label>
+          <Label color={color} className="text-break-word">
+            {fromResource.name}
+          </Label>
+          {fromResource.alias && (
+            <>
+              <b style={{ marginRight: 4, marginLeft: 4 }}>as</b>
+              <Label color={color} className="text-break-word">
+                {fromResource.alias}
+              </Label>
+            </>
+          )}
+        </List.Description>
+      </List.Content>
+    </List.Item>
+  );
+}