@truedat/qx 7.13.9 → 7.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "7.13.9",
+  "version": "7.14.0",
   "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": "7.13.9",
+    "@truedat/test": "7.14.0",
     "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": "72faa643a2dab00d15490cd15abb85d89364e375"
+  "gitHead": "861787da648eec4a053e7982c59e1b140316d160"
 }

package/src/components/common/ClauseViewer.js

@@ -1,41 +1,96 @@
 import _ from "lodash/fp";
 import { Fragment, use } from "react";
 import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import { Divider, Label, Segment } from "semantic-ui-react";
 import { useFunctions } from "@truedat/qx/hooks/useFunctions";
-import QxContext from "@truedat/qx/components/QxContext";
 import { isConditionFunction } from "@truedat/qx/components/common/expressions/Condition";
+import { getColorById } from "../dataViews/queryableFunctions";
+import QxContext from "@truedat/qx/components/QxContext";
+import "@truedat/qx/styles/Expression.less";
+
+const isExpressionValid = (expression, functions = []) => {
+  if (_.isNil(expression?.shape)) {
+    return false;
+  }
+
+  const { shape, value } = expression;
+
+  if (_.isNil(value)) {
+    return true;
+  }
 
-export default function ClauseViewer({ clause }) {
+  switch (shape) {
+    case "function": {
+      if (!value.name || !value.type) {
+        return false;
+      }
+      const func = _.find({ name: value.name, type: value.type })(functions);
+      if (func && isConditionFunction(func)) {
+        return (
+          isExpressionValid(value.args?.arg1, functions) &&
+          isExpressionValid(value.args?.arg2, functions)
+        );
+      }
+
+      return true;
+    }
+    case "field":
+      return !_.isEmpty(value?.name);
+    case "constant":
+      return !_.isNil(value?.value) && !_.isEmpty(value?.value);
+    case "param":
+      return !_.isNil(value?.id);
+    default:
+      return false;
+  }
+};
+
+export default function ClauseViewer({ clause, parentResource }) {
   const { data, loading } = useFunctions();
   const functions = data?.data;
+  const context = use(QxContext);
 
   const _map = _.map.convert({ cap: false });
+
+  const validClauseGroups = _.flow(
+    _.map((group) => ({
+      ...group,
+      expressions: _.filter((expr) => isExpressionValid(expr, functions))(
+        group.expressions || []
+      ),
+    })),
+    _.filter((group) => _.size(group.expressions) > 0)
+  )(clause || []);
+
   return (
-    <Segment loading={loading} compact basic>
+    <Segment loading={loading} compact basic className="text-break-word">
       {loading
         ? null
         : _map(({ expressions }, idx) => (
-            <QxContext value={{ functions }} key={idx}>
-              <Segment textAlign="center" className="no-margin">
+            <QxContext
+              value={{ ...context, functions, parentResource }}
+              key={idx}
+            >
+              <Segment className="no-margin text-break-word">
                 {_map((expression, idx) => (
                   <Fragment key={idx}>
                     <ExpressionViewer expression={expression} />
                     {idx == _.size(expressions) - 1 ? null : (
                       <Divider horizontal className="divider-compact">
-                        OR
+                        AND
                       </Divider>
                     )}
                   </Fragment>
                 ))(expressions)}
               </Segment>
-              {idx == _.size(clause) - 1 ? null : (
+              {idx == _.size(validClauseGroups) - 1 ? null : (
                 <Divider horizontal className="divider-compact">
-                  AND
+                  OR
                 </Divider>
               )}
             </QxContext>
-          ))(clause)}
+          ))(validClauseGroups)}
     </Segment>
   );
 }
@@ -44,20 +99,46 @@ ClauseViewer.propTypes = {
   clause: PropTypes.array,
 };
 
-function ExpressionViewer({ expression }) {
+export function ExpressionViewer({ expression, alias }) {
+  const { formatMessage } = useIntl();
+
+  if (_.isNil(expression?.shape)) {
+    return null;
+  }
+
+  if (_.isNil(expression?.value)) {
+    return (
+      <Label basic color="grey">
+        {formatMessage({ id: "expression.viewer.undefined" })}
+      </Label>
+    );
+  }
+
   const componentForShape = {
-    function: (value) => <ExpressionFunctionViewer value={value} />,
+    function: (value) => (
+      <ExpressionFunctionViewer value={value} alias={alias} />
+    ),
     constant: (value) => <ExpressionConstantViewer value={value} />,
-    field: (value) => <ExpressionFieldViewer value={value} />,
+    field: (value) => <ExpressionFieldViewer value={value} alias={alias} />,
   };
-  return componentForShape[expression.shape](expression.value);
+
+  const handler = componentForShape[expression.shape];
+  if (!handler) {
+    return (
+      <Label basic color="orange">
+        {expression.shape}
+      </Label>
+    );
+  }
+
+  return handler(expression.value);
 }
 
 ExpressionViewer.propTypes = {
   expression: PropTypes.object,
 };
 
-function ExpressionFunctionViewer({ value }) {
+function ExpressionFunctionViewer({ value, alias }) {
   const { functions } = use(QxContext);
   const { name, type } = value;
   const func = _.find({ name, type })(functions);
@@ -67,19 +148,41 @@ function ExpressionFunctionViewer({ value }) {
       operator={func?.operator}
     />
   ) : (
-    <GenericExpressionFunctionViewer value={value} />
+    <GenericExpressionFunctionViewer value={value} alias={alias} />
   );
 }
 ExpressionFunctionViewer.propTypes = {
   value: PropTypes.object,
 };
 
-function GenericExpressionFunctionViewer({ value }) {
+function GenericExpressionFunctionViewer({ alias, value }) {
+  const { formatMessage } = useIntl();
+  if (!value || !value.name) {
+    return (
+      <Label basic color="grey">
+        {formatMessage({ id: "expression.viewer.function.undefined" })}
+      </Label>
+    );
+  }
+
   return (
     <div className="text-align-left">
-      <Label color="teal" horizontal size="tiny">
+      <Label
+        horizontal
+        size="tiny"
+        className="text-break-word"
+        title={value.name}
+      >
         {value.name}
       </Label>
+      {alias && (
+        <>
+          <b style={{ marginRight: 4, marginLeft: 4 }}>as</b>
+          <Label size="tiny" className="text-break-word">
+            {alias}
+          </Label>
+        </>
+      )}
       (
       <div className="clause-viewer-function">
         {_.flow(
@@ -101,6 +204,15 @@ GenericExpressionFunctionViewer.propTypes = {
   value: PropTypes.object,
 };
 function ConditionExpressionFunctionViewer({ value, operator }) {
+  const { formatMessage } = useIntl();
+  if (!value || !value.args) {
+    return (
+      <Label basic color="grey">
+        {formatMessage({ id: "expression.viewer.condition.undefined" })}
+      </Label>
+    );
+  }
+
   return (
     <div className="condition-function-viewer">
       <ExpressionViewer expression={value.args.arg1} />
@@ -115,15 +227,65 @@ ConditionExpressionFunctionViewer.propTypes = {
 };
 
 function ExpressionConstantViewer({ value }) {
-  return <Label color="purple">{value.value}</Label>;
+  const { formatMessage } = useIntl();
+  if (!value || _.isNil(value.value)) {
+    return (
+      <Label basic color="grey">
+        {formatMessage({ id: "expression.viewer.constant.undefined" })}
+      </Label>
+    );
+  }
+  return (
+    <Label basic className="text-break-word">
+      {value.value}
+    </Label>
+  );
 }
 ExpressionConstantViewer.propTypes = {
   value: PropTypes.object,
 };
 
-function ExpressionFieldViewer({ value }) {
-  return <Label color="blue">{value.name}</Label>;
+const getParent = (parent_id, parentResource, parentResourceMap) => {
+  if (parentResource) {
+    return { ...parentResource, label: parentResource?.embedded?.name };
+  }
+  if (parentResourceMap) {
+    return parentResourceMap[parent_id];
+  }
+  return null;
+};
+
+export function ExpressionFieldViewer({ value, alias }) {
+  const { formatMessage } = useIntl();
+  const { parentResourceMap, parentResource } = use(QxContext);
+
+  if (!value || !value.name) {
+    return (
+      <Label basic color="grey">
+        {formatMessage({ id: "expression.viewer.field.undefined" })}
+      </Label>
+    );
+  }
+
+  const parent = getParent(value.parent_id, parentResource, parentResourceMap);
+  const color = getColorById(parent?.id);
+  const labelContent = parent ? `${parent.label}.${value.name}` : value.name;
+  return (
+    <>
+      <Label color={color} className="text-break-word" title={labelContent}>
+        {labelContent}
+      </Label>
+      {alias && (
+        <>
+          <b style={{ marginRight: 4, marginLeft: 4 }}>as</b>
+          <Label color={color} className="text-break-word">
+            {alias}
+          </Label>
+        </>
+      )}
+    </>
+  );
 }
 ExpressionFieldViewer.propTypes = {
-  value: PropTypes.object,
+  field: PropTypes.object,
 };

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

@@ -106,8 +106,12 @@ export default function Condition({ onDelete }) {
                 rules={{
                   validate: (v) => {
                     const name = v ?? "";
-                    const isValid = Boolean(name) || expression?.value?.isCondition === false;
-                    return isValid || formatMessage({ id: "functions.form.required" });
+                    const isValid =
+                      Boolean(name) || expression?.value?.isCondition === false;
+                    return (
+                      isValid ||
+                      formatMessage({ id: "functions.form.required" })
+                    );
                   },
                 }}
                 render={({
@@ -122,7 +126,7 @@ export default function Condition({ onDelete }) {
                       fluid
                       onChange={(_e, { value }) => {
                         if (value == "customExpression") {
-                          setValue(`${field}.value`, { ...(expression?.value || {}), isCondition: false });
+                          setValue(`${field}.value`, { isCondition: false });
                         } else {
                           onChange(value);
                           setValue(`${field}.value.type`, "boolean");
@@ -133,10 +137,13 @@ export default function Condition({ onDelete }) {
                       pointing="top left"
                       icon={null}
                     />
-                    {error?.message && <Label prompt pointing>{error?.message}</Label>}
+                    {error?.message && (
+                      <Label prompt pointing>
+                        {error?.message}
+                      </Label>
+                    )}
                   </Form.Field>
-                )
-                }
+                )}
               />
             </div>
           </Grid.Column>

package/src/components/dataViews/DataViewEditor.js

@@ -109,7 +109,6 @@ export function DataViewDetailEditor({ dataView }) {
               disabled={viewMode === "advanced" || mode == "guided"}
               icon="compass"
               content={formatMessage({ id: "actions.mode.guided" })}
-              
             />
           }
           header={formatMessage({ id: "actions.mode.confirmation.header" })}
@@ -127,7 +126,6 @@ export function DataViewDetailEditor({ dataView }) {
               disabled={mode === "advanced"}
               icon="code"
               content={formatMessage({ id: "actions.mode.advanced" })}
-              
             />
           }
           header={formatMessage({ id: "actions.mode.confirmation.header" })}

package/src/components/dataViews/DataViewSummary.js

@@ -0,0 +1,73 @@
+import _ from "lodash/fp";
+import { Fragment } from "react";
+import PropTypes from "prop-types";
+import { Segment, List, Divider } from "semantic-ui-react";
+import From from "./summary/From";
+import Join from "./summary/Join";
+import Where from "./summary/Where";
+import GroupBy from "./summary/GroupBy";
+import Select from "./summary/Select";
+import {
+  buildParentResourceMap,
+  hasValidStructure,
+} from "./queryableSummaryHelpers";
+import QxContext from "@truedat/qx/components/QxContext";
+
+export default function DataViewSummary({ dataView }) {
+  if (!dataView) {
+    return null;
+  }
+
+  const queryables = dataView.queryables;
+  if (!hasValidStructure(queryables)) {
+    return null;
+  }
+
+  const parentResourceMap = buildParentResourceMap(queryables);
+
+  const clauseTypeForWhere = (index, queryables) => {
+    const previousQueryable = queryables[index - 1];
+    if (previousQueryable.type === "group_by") {
+      return "having";
+    }
+    return "where";
+  };
+
+  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>
+    </QxContext>
+  );
+}
+
+DataViewSummary.propTypes = {
+  dataView: PropTypes.object,
+};

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

@@ -157,7 +157,10 @@ describe("<AdvancedDataViewEditor />", () => {
     await user.type(rendered.getAllByRole("textbox")[0], "data_view_name");
 
     // Insert description
-    await user.type(rendered.getAllByRole("textbox")[1], "data_view_description");
+    await user.type(
+      rendered.getAllByRole("textbox")[1],
+      "data_view_description"
+    );
 
     // Insert From information
     await user.type(rendered.getByPlaceholderText(/alias/i), "from_alias");