@truedat/qx 8.5.1 → 8.5.2

package/src/components/dataViews/queryableProperties/__tests__/GroupBy.spec.js

@@ -1,49 +1,155 @@
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import GroupBy from "../GroupBy";
 
+jest.mock("../SelectField", () => {
+  const React = require("react");
+  const { use } = React;
+  const QxContextMock = require("@truedat/qx/components/QxContext").default;
+
+  const MockSelectField = ({ onDelete }) => {
+    const { field } = use(QxContextMock);
+    const isAggregate = field.includes("aggregate_fields");
+
+    return (
+      <button type="button" onClick={onDelete}>
+        {isAggregate ? "delete-aggregate" : "delete-group"}
+      </button>
+    );
+  };
+
+  return {
+    __esModule: true,
+    default: MockSelectField,
+    newSelectField: (id) => ({
+      id,
+      alias: "",
+      expression: {},
+    }),
+  };
+});
+
+const renderGroupBy = (defaultValues) =>
+  render(
+    <TestFormWrapper
+      context={{
+        field: "queryables[0].properties",
+        functions: [{ class: "aggregator", name: "func", type: "number" }],
+      }}
+      defaultValues={defaultValues}
+    >
+      <GroupBy />
+    </TestFormWrapper>
+  );
+
 describe("<GroupBy />", () => {
-  it("matches the latest snapshot", async () => {
+  it("renders existing group and aggregate fields", async () => {
+    const rendered = renderGroupBy({
+      queryables: [
+        {
+          id: 0,
+          type: "group_by",
+          properties: {
+            group_fields: [{ alias: "group_alias", expression: {}, id: 1 }],
+            aggregate_fields: [
+              { alias: "aggregate_alias", expression: {}, id: 2 },
+            ],
+          },
+        },
+      ],
+    });
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getAllByRole("button", { name: /delete-group/i })
+    ).toHaveLength(1);
+    expect(
+      rendered.getAllByRole("button", { name: /delete-aggregate/i })
+    ).toHaveLength(1);
+  });
+
+  it("adds group and aggregate fields", async () => {
     const user = userEvent.setup({ delay: null });
-    const rendered = render(
-      <TestFormWrapper
-        context={{
-          field: "queryables[0].properties",
-          functions: [{ class: "aggregator", name: "func", type: "number" }],
-        }}
-        defaultValues={{
-          queryables: [
-            {
-              id: 0,
-              type: "group_by",
-              properties: {
-                group_fields: [{ name: "abc", id: 1 }],
-                aggregate_fields: [{ name: "def", id: 2 }],
-              },
-            },
-          ],
-        }}
-      >
-        <GroupBy />
-      </TestFormWrapper>
-    );
+    const rendered = renderGroupBy({
+      queryables: [
+        {
+          id: 0,
+          type: "group_by",
+          properties: {
+            group_fields: [{ alias: "abc", expression: {}, id: 1 }],
+            aggregate_fields: [{ alias: "def", expression: {}, id: 2 }],
+          },
+        },
+      ],
+    });
     await waitForLoad(rendered);
 
     await user.click(
       rendered.getByRole("button", { name: /add_group_field/i })
     );
+    expect(
+      rendered.getAllByRole("button", { name: /delete-group/i })
+    ).toHaveLength(2);
+
+    await user.click(
+      rendered.getByRole("button", { name: /add_aggregate_field/i })
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getAllByRole("button", { name: /delete-aggregate/i })
+      ).toHaveLength(2)
+    );
+  });
 
-    await user.hover(rendered.getAllByRole("textbox")[2]);
-    await user.click(rendered.getByRole("button", { name: /delete/i }));
+  it("deletes group and aggregate fields", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = renderGroupBy({
+      queryables: [
+        {
+          id: 0,
+          type: "group_by",
+          properties: {
+            group_fields: [{ alias: "abc", expression: {}, id: 1 }],
+            aggregate_fields: [{ alias: "def", expression: {}, id: 2 }],
+          },
+        },
+      ],
+    });
+    await waitForLoad(rendered);
 
+    await user.click(
+      rendered.getByRole("button", { name: /add_group_field/i })
+    );
     await user.click(
       rendered.getByRole("button", { name: /add_aggregate_field/i })
     );
+    await waitFor(() =>
+      expect(
+        rendered.getAllByRole("button", { name: /delete-group/i })
+      ).toHaveLength(2)
+    );
+    expect(
+      rendered.getAllByRole("button", { name: /delete-aggregate/i })
+    ).toHaveLength(2);
 
-    await user.hover(rendered.getAllByRole("textbox")[3]);
-    await user.click(rendered.getByRole("button", { name: /delete/i }));
+    await user.click(
+      rendered.getAllByRole("button", { name: /delete-group/i })[1]
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getAllByRole("button", { name: /delete-group/i })
+      ).toHaveLength(1)
+    );
 
-    expect(rendered.container).toMatchSnapshot();
+    await user.click(
+      rendered.getAllByRole("button", { name: /delete-aggregate/i })[1]
+    );
+    await waitFor(() =>
+      expect(
+        rendered.getAllByRole("button", { name: /delete-aggregate/i })
+      ).toHaveLength(1)
+    );
   });
 });

package/src/components/qualityControls/ControlProperties.js

@@ -2,14 +2,26 @@ import { use, lazy } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { Form, Segment } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
-import Count from "./controlProperties/Count";
-import Ratio from "./controlProperties/Ratio";
+import ResourceWithValidation from "./controlProperties/ResourceWithValidation";
 import { useIntl } from "react-intl";
 
 const SourceSelector = lazy(
-  () => import("@truedat/cx/sources/components/SourceSelector")
+  () => import("@truedat/cx/sources/components/SourceSelector"),
 );
 
+const countControlProps = {
+  resourceKey: "errors_resource",
+  resourceLabelId:
+    "quality_control.form.control_properties.count.errors_resource",
+  validationLabelId: "quality_control.form.control_properties.count.validation",
+};
+
+const ratioControlProps = {
+  resourceKey: "resource",
+  resourceLabelId: "quality_control.form.control_properties.ratio.resource",
+  validationLabelId: "quality_control.form.control_properties.ratio.validation",
+};
+
 export default function ControlProperties({ isModification }) {
   const { control, watch } = useFormContext();
   const { formatMessage } = useIntl();
@@ -18,10 +30,9 @@ export default function ControlProperties({ isModification }) {
   const { control_mode: controlMode } = watch();
 
   const componentForMode = {
-    count: <Count />,
-    deviation: <Ratio />,
-    error_count: <Ratio />,
-    percentage: <Ratio />,
+    deviation: <ResourceWithValidation {...ratioControlProps} />,
+    error_count: <ResourceWithValidation {...countControlProps} />,
+    percentage: <ResourceWithValidation {...ratioControlProps} />,
   };
 
   return controlMode ? (
@@ -33,9 +44,12 @@ export default function ControlProperties({ isModification }) {
           required: {
             value: true,
             message: formatMessage({ id: "quality_control.form.required" }),
-          }
+          },
         }}
-        render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
+        render={({
+          field: { onChange, onBlur, value },
+          fieldState: { error },
+        }) => (
           <Form.Field required>
             <label>{formatMessage({ id: "dataViews.form.source" })}</label>
             <SourceSelector
@@ -55,18 +69,20 @@ export default function ControlProperties({ isModification }) {
   ) : null;
 }
 
+const defaultValidation = [
+  {
+    expressions: [{ shape: "function", value: { isCondition: true } }],
+  },
+];
+
 export const defaultForMode = (controlMode) => {
   switch (controlMode) {
-    case "count":
-      return { errors_resource: null };
+    case "error_count":
+      return { errors_resource: null, validation: defaultValidation };
     default:
       return {
         resource: null,
-        validation: [
-          {
-            expressions: [{ shape: "function", value: { isCondition: true } }],
-          },
-        ],
+        validation: defaultValidation,
       };
   }
 };

package/src/components/qualityControls/ControlPropertiesForm.js

@@ -10,15 +10,15 @@ const ControlPropertiesForm = ({
   stepInformation,
 }) => {
   const { watch } = useFormContext();
+  const { control_mode: controlMode } = watch();
+
   const fieldNames = [
     "source_id",
-    "control_properties.errors_resource",
     "control_properties.resource",
+    "control_properties.errors_resource",
     "control_properties.validation",
   ];
 
-  const { control_mode: controlMode } = watch();
-
   useEffect(() => {
     if (!_.isEqual(stepInformation?.fieldNames, fieldNames))
       setStepInformation(1, { ...stepInformation, fieldNames });

package/src/components/qualityControls/ControlPropertiesSummary.js

@@ -6,126 +6,149 @@ import ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
 import { getColorById } from "../dataViews/queryableFunctions";
 
 export default function ControlPropertiesSummary({ qualityControl }) {
-    const { control_properties, control_mode } = qualityControl;
+  const { control_properties, control_mode } = qualityControl;
 
-    if (!control_properties?.resource?.id && !control_properties?.errors_resource?.id) return null;
+  if (
+    !control_properties?.resource?.id &&
+    !control_properties?.errors_resource?.id
+  )
+    return null;
 
-    const controlPropertiesForMode = {
-        percentage: (
-            <ControlPropertiesRatioSummary controlProperties={control_properties} />
-        ),
-        deviation: (
-            <ControlPropertiesRatioSummary controlProperties={control_properties} />
-        ),
-        count: (
-            <ControlPropertiesCountSummary controlProperties={control_properties} />
-        ),
-        error_count: (
-            <ControlPropertiesRatioSummary controlProperties={control_properties} />
-        ),
-    };
+  const controlPropertiesForMode = {
+    percentage: (
+      <ControlPropertiesRatioSummary controlProperties={control_properties} />
+    ),
+    deviation: (
+      <ControlPropertiesRatioSummary controlProperties={control_properties} />
+    ),
+    error_count: (
+      <ControlPropertiesCountSummary controlProperties={control_properties} />
+    ),
+  };
 
-    return (
-        <>
-            <Header as="h5">
-                <Icon name="puzzle piece" size="small" />
-                <Header.Content>
-                    <FormattedMessage id="quality_control.form.control_properties" />
-                </Header.Content>
-            </Header>
-            <Segment>
-                {controlPropertiesForMode[control_mode] || (
-                    <FormattedMessage id="quality_control.control_properties.empty" />
-                )}
-            </Segment>
-        </>
-    );
+  return (
+    <>
+      <Header as="h5">
+        <Icon name="puzzle piece" size="small" />
+        <Header.Content>
+          <FormattedMessage id="quality_control.form.control_properties" />
+        </Header.Content>
+      </Header>
+      <Segment>
+        {controlPropertiesForMode[control_mode] || (
+          <FormattedMessage id="quality_control.control_properties.empty" />
+        )}
+      </Segment>
+    </>
+  );
 }
 
 const ControlPropertiesRatioSummary = ({ controlProperties }) => {
-    const parentResource = { id: 0, embedded: controlProperties.resource?.embedded };
-    return (
-        <List>
-            <List.Item>
-                <List.Header>
-                    <FormattedMessage id="quality_control.ratio.resource" />
-                </List.Header>
-                <List.Content>
-                    {controlProperties.resource ? (
-                        <List.Description>
-                            <Label horizontal>
-                                <FormattedMessage
-                                    id={`queryables.resource.selector.${controlProperties.resource?.type}`}
-                                />
-                            </Label>
-                            <Label color={getColorById(parentResource?.id)}>
-                                {_.prop("resource.embedded.name")(controlProperties)}
-                            </Label>
-                        </List.Description>
-                    ) : (
-                        <FormattedMessage id="quality_control.ratio.resource.empty" />
-                    )}
-                </List.Content>
-            </List.Item>
-            <List.Item>
-                <List.Header>
-                    <FormattedMessage id="quality_control.ratio.validation" />
-                </List.Header>
-                <List.Content>
-                    {controlProperties.validation ? (
-                        <List.Description>
-                            <ClauseViewer
-                                clause={controlProperties.validation}
-                                parentResource={parentResource}
-                            />
-                        </List.Description>
-                    ) : (
-                        <FormattedMessage id="quality_control.ratio.validation.empty" />
-                    )}
-                </List.Content>
-            </List.Item>
-        </List>
-    );
+  const parentResource = {
+    id: 0,
+    embedded: controlProperties.resource?.embedded,
+  };
+  return (
+    <List>
+      <List.Item>
+        <List.Header>
+          <FormattedMessage id="quality_control.ratio.resource" />
+        </List.Header>
+        <List.Content>
+          {controlProperties.resource ? (
+            <List.Description>
+              <Label horizontal>
+                <FormattedMessage
+                  id={`queryables.resource.selector.${controlProperties.resource?.type}`}
+                />
+              </Label>
+              <Label color={getColorById(parentResource?.id)}>
+                {_.prop("resource.embedded.name")(controlProperties)}
+              </Label>
+            </List.Description>
+          ) : (
+            <FormattedMessage id="quality_control.ratio.resource.empty" />
+          )}
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <List.Header>
+          <FormattedMessage id="quality_control.ratio.validation" />
+        </List.Header>
+        <List.Content>
+          {controlProperties.validation ? (
+            <List.Description>
+              <ClauseViewer
+                clause={controlProperties.validation}
+                parentResource={parentResource}
+              />
+            </List.Description>
+          ) : (
+            <FormattedMessage id="quality_control.ratio.validation.empty" />
+          )}
+        </List.Content>
+      </List.Item>
+    </List>
+  );
 };
 
 const ControlPropertiesCountSummary = ({ controlProperties }) => {
-    return (
-        <List>
-            <List.Item>
-                <List.Header>
-                    <FormattedMessage id="quality_control.count.errors_resource" />
-                </List.Header>
-                <List.Content>
-                    {controlProperties.errors_resource ? (
-                        <List.Description>
-                            <Label horizontal>
-                                <FormattedMessage
-                                    id={`queryables.resource.selector.${controlProperties.errors_resource?.type}`}
-                                />
-                            </Label>
-                            <Label
-                                color={getColorById(0)}
-                            >
-                                {_.prop("errors_resource.embedded.name")(controlProperties)}
-                            </Label>
-                        </List.Description>
-                    ) : (
-                        <FormattedMessage id="quality_control.count.errors_resource.empty" />
-                    )}
-                </List.Content>
-            </List.Item>
-        </List>
-    );
+  const parentResource = {
+    id: 0,
+    embedded: controlProperties.errors_resource?.embedded,
+  };
+  return (
+    <List>
+      <List.Item>
+        <List.Header>
+          <FormattedMessage id="quality_control.count.errors_resource" />
+        </List.Header>
+        <List.Content>
+          {controlProperties.errors_resource ? (
+            <List.Description>
+              <Label horizontal>
+                <FormattedMessage
+                  id={`queryables.resource.selector.${controlProperties.errors_resource?.type}`}
+                />
+              </Label>
+              <Label color={getColorById(0)}>
+                {_.prop("errors_resource.embedded.name")(controlProperties)}
+              </Label>
+            </List.Description>
+          ) : (
+            <FormattedMessage id="quality_control.count.errors_resource.empty" />
+          )}
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <List.Header>
+          <FormattedMessage id="quality_control.ratio.validation" />
+        </List.Header>
+        <List.Content>
+          {controlProperties.validation ? (
+            <List.Description>
+              <ClauseViewer
+                clause={controlProperties.validation}
+                parentResource={parentResource}
+              />
+            </List.Description>
+          ) : (
+            <FormattedMessage id="quality_control.ratio.validation.empty" />
+          )}
+        </List.Content>
+      </List.Item>
+    </List>
+  );
 };
 
 ControlPropertiesSummary.propTypes = {
-    qualityControl: PropTypes.object,
+  qualityControl: PropTypes.object,
 };
 
 ControlPropertiesRatioSummary.propTypes = {
-    controlProperties: PropTypes.object,
+  controlProperties: PropTypes.object,
 };
 
 ControlPropertiesCountSummary.propTypes = {
-    controlProperties: PropTypes.object,
+  controlProperties: PropTypes.object,
 };