@truedat/qx 8.7.0 → 8.7.1

package/src/components/qualityControls/QualityControlSummary.js

@@ -6,23 +6,25 @@ import SegmentationSummary from "./SegmentationSummary";
 import ContentSummary from "./ContentSummary";
 
 export default function QualityControlSummary({ qualityControl }) {
-    if (!qualityControl) return null;
+  if (!qualityControl) return null;
 
-    return (
-        <Container>
-            <ContentSummary qualityControl={qualityControl} />
-            {qualityControl.control_mode && <ScoreCriteriaView qualityControl={qualityControl} />}
-            <ControlPropertiesSummary qualityControl={qualityControl} />
-            {qualityControl.control_properties?.segmentation && (
-                <SegmentationSummary
-                    segmentation={qualityControl.control_properties.segmentation}
-                    controlProperties={qualityControl.control_properties}
-                />
-            )}
-        </Container>
-    );
+  return (
+    <Container>
+      <ContentSummary qualityControl={qualityControl} />
+      {qualityControl.control_mode && (
+        <ScoreCriteriaView qualityControl={qualityControl} />
+      )}
+      <ControlPropertiesSummary qualityControl={qualityControl} />
+      {qualityControl.control_properties?.segmentation && (
+        <SegmentationSummary
+          segmentation={qualityControl.control_properties.segmentation}
+          controlProperties={qualityControl.control_properties}
+        />
+      )}
+    </Container>
+  );
 }
 
 QualityControlSummary.propTypes = {
-    qualityControl: PropTypes.object,
+  qualityControl: PropTypes.object,
 };

package/src/components/qualityControls/QualityControls.js

@@ -44,7 +44,7 @@ export const QualityControls = () => {
 
   const [selectedQualityControls, setSelectedQualityControls] = useState([]);
   const [executeQualityControlOn, setExecuteMode] = useState(
-    _.matches({ active: [true] })(hiddenFilters)
+    _.matches({ active: [true] })(hiddenFilters),
   );
 
   const qualityControls = searchData?.data;
@@ -64,33 +64,33 @@ export const QualityControls = () => {
     const ids = _.map(_.prop("id"))(qualityControls);
     checkedAll
       ? setSelectedQualityControls(
-          _.flow(_.concat(ids), _.uniq)(selectedQualityControls)
+          _.flow(_.concat(ids), _.uniq)(selectedQualityControls),
         )
       : setSelectedQualityControls(
-          _.flow(_.difference(selectedQualityControls), _.uniq)(ids)
+          _.flow(_.difference(selectedQualityControls), _.uniq)(ids),
         );
   };
   const isRowChecked = (qualityControl) => {
     const id = _.prop("id")(qualityControl);
     return _.some((selectedId) => _.eq(id, selectedId))(
-      selectedQualityControls
+      selectedQualityControls,
     );
   };
 
   const checkRow = (qualityControl) => {
     const id = _.prop("id")(qualityControl);
     const exists = _.some((selectedId) => _.eq(id, selectedId))(
-      selectedQualityControls
+      selectedQualityControls,
     );
     exists
       ? setSelectedQualityControls(
           _.flow(
             _.remove((selectedId) => _.eq(id, selectedId)),
-            _.uniq
-          )(selectedQualityControls)
+            _.uniq,
+          )(selectedQualityControls),
         )
       : setSelectedQualityControls(
-          _.flow(_.concat(id), _.uniq)(selectedQualityControls)
+          _.flow(_.concat(id), _.uniq)(selectedQualityControls),
         );
   };
 
@@ -159,9 +159,7 @@ export const QualityControls = () => {
                   id="execute_checkbox"
                   className="bgOrange"
                   toggle
-                  onChange={() =>
-                    handleExecuteChange(!executeQualityControlOn)
-                  }
+                  onChange={() => handleExecuteChange(!executeQualityControlOn)}
                   checked={executeQualityControlOn}
                   style={{ top: "6px", marginRight: "7.5px" }}
                 />

package/src/components/qualityControls/QualityControlsTable.js

@@ -105,7 +105,7 @@ export default function QualityControlsTable({
     _.has("quality_control_id")(selectedQualityControl) && placeToTop
       ? _.any(
           (qc) =>
-            qc.quality_control_id === selectedQualityControl.quality_control_id
+            qc.quality_control_id === selectedQualityControl.quality_control_id,
         )(qualityControls)
         ? qualityControls
         : [selectedQualityControl, ...qualityControls]

package/src/components/qualityControls/SegmentationForm.js

@@ -7,113 +7,112 @@ import QxContext from "@truedat/qx/components/QxContext";
 import GroupBy from "../dataViews/queryableProperties/GroupBy";
 
 const SegmentationForm = ({ setStepInformation, stepInformation }) => {
-    const { formatMessage } = useIntl();
-    const { control, watch, setValue } = useFormContext();
-    const context = use(QxContext);
-    const fieldNames = ["control_properties.segmentation"];
+  const { formatMessage } = useIntl();
+  const { control, watch, setValue } = useFormContext();
+  const context = use(QxContext);
+  const fieldNames = ["control_properties.segmentation"];
 
-    const controlProperties = watch("control_properties");
-    const segmentation = _.prop("segmentation")(controlProperties);
+  const controlProperties = watch("control_properties");
+  const segmentation = _.prop("segmentation")(controlProperties);
 
-    useEffect(() => {
-        if (!_.isEqual(stepInformation?.fieldNames, fieldNames))
-            setStepInformation(2, { ...stepInformation, fieldNames });
-    }, [stepInformation, fieldNames]);
+  useEffect(() => {
+    if (!_.isEqual(stepInformation?.fieldNames, fieldNames))
+      setStepInformation(2, { ...stepInformation, fieldNames });
+  }, [stepInformation, fieldNames]);
 
-    const handleAddSegmentation = () => {
-        const nextId = 1;
-        setValue(
-            "control_properties.segmentation",
-            {
-                id: nextId,
-                type: "group_by",
-                alias: "",
-                properties: {
-                    group_fields: [],
-                    aggregate_fields: [],
-                },
-            },
-            { shouldValidate: false, shouldDirty: true }
-        );
-    };
+  const handleAddSegmentation = () => {
+    const nextId = 1;
+    setValue(
+      "control_properties.segmentation",
+      {
+        id: nextId,
+        type: "group_by",
+        alias: "",
+        properties: {
+          group_fields: [],
+          aggregate_fields: [],
+        },
+      },
+      { shouldValidate: false, shouldDirty: true },
+    );
+  };
 
-    const handleDeleteSegmentation = () => {
-        setValue(
-            "control_properties.segmentation",
-            null,
-            { shouldValidate: false, shouldDirty: true }
-        );
-    };
+  const handleDeleteSegmentation = () => {
+    setValue("control_properties.segmentation", null, {
+      shouldValidate: false,
+      shouldDirty: true,
+    });
+  };
 
-    const { source_id: sourceId } = watch();
+  const { source_id: sourceId } = watch();
 
-    if (!sourceId) return null;
+  if (!sourceId) return null;
 
-    return (
-        <>
-            <Segment>
-                {!segmentation ? (
-                    <Button
-                        onClick={handleAddSegmentation}
-                        basic
-                        className="td-icon-text-control"
-                        icon="plus"
-                        content={formatMessage({
-                            id: "quality_control.form.segmentation.add",
-                            defaultMessage: "Add segmentation",
-                        })}
-                    />
-                ) : (
-                    <>
-                        <Button
-                            onClick={handleDeleteSegmentation}
-                            icon="trash alternate outline"
-                            basic
-                            color="red"
-                            aria-label="delete"
-                            floated="right"
-                        />
-                        <Controller
-                            control={control}
-                            name="control_properties.segmentation.alias"
-                            render={({
-                                field: { onBlur, onChange, value },
-                                fieldState: { error },
-                            }) => (
-                                <Form.Field>
-                                    <label>
-                                        {formatMessage({
-                                            id: "dataViews.form.queryable.alias",
-                                        })}
-                                    </label>
-                                    <Form.Input
-                                        autoComplete="off"
-                                        placeholder={formatMessage({
-                                            id: "dataViews.form.queryable.alias",
-                                        })}
-                                        error={!!error}
-                                        onBlur={onBlur}
-                                        onChange={(_e, { value }) => onChange(value)}
-                                        value={value || ""}
-                                    />
-                                </Form.Field>
-                            )}
-                        />
-                        <QxContext
-                            value={{
-                                ...context,
-                                sourceId,
-                                field: "control_properties.segmentation.properties",
-                            }}
-                        >
-                            <GroupBy />
-                        </QxContext>
-                    </>
-                )}
-            </Segment>
-            <Divider hidden />
-        </>
-    );
+  return (
+    <>
+      <Segment>
+        {!segmentation ? (
+          <Button
+            onClick={handleAddSegmentation}
+            basic
+            className="td-icon-text-control"
+            icon="plus"
+            content={formatMessage({
+              id: "quality_control.form.segmentation.add",
+              defaultMessage: "Add segmentation",
+            })}
+          />
+        ) : (
+          <>
+            <Button
+              onClick={handleDeleteSegmentation}
+              icon="trash alternate outline"
+              basic
+              color="red"
+              aria-label="delete"
+              floated="right"
+            />
+            <Controller
+              control={control}
+              name="control_properties.segmentation.alias"
+              render={({
+                field: { onBlur, onChange, value },
+                fieldState: { error },
+              }) => (
+                <Form.Field>
+                  <label>
+                    {formatMessage({
+                      id: "dataViews.form.queryable.alias",
+                    })}
+                  </label>
+                  <Form.Input
+                    autoComplete="off"
+                    placeholder={formatMessage({
+                      id: "dataViews.form.queryable.alias",
+                    })}
+                    error={!!error}
+                    onBlur={onBlur}
+                    onChange={(_e, { value }) => onChange(value)}
+                    value={value || ""}
+                  />
+                </Form.Field>
+              )}
+            />
+            <QxContext
+              value={{
+                ...context,
+                sourceId,
+                field: "control_properties.segmentation.properties",
+              }}
+            >
+              <GroupBy />
+            </QxContext>
+          </>
+        )}
+      </Segment>
+      <Divider hidden />
+    </>
+  );
 };
 
 export default SegmentationForm;

package/src/components/qualityControls/SegmentationSummary.js

@@ -2,121 +2,130 @@ import _ from "lodash/fp";
 import { useIntl } from "react-intl";
 import PropTypes from "prop-types";
 import { Header, Icon, Segment, List, Label } from "semantic-ui-react";
+import { ExpressionViewer } from "@truedat/qx/components/common/ClauseViewer";
+import QxContext from "@truedat/qx/components/QxContext";
 import {
-    getAggregateFields,
-    getGroupByFields,
-    buildParentResourceMap,
+  getAggregateFields,
+  getGroupByFields,
+  buildParentResourceMap,
 } from "../dataViews/queryableSummaryHelpers";
 import { getColorById } from "../dataViews/queryableFunctions";
-import { ExpressionViewer } from "@truedat/qx/components/common/ClauseViewer";
-import QxContext from "@truedat/qx/components/QxContext";
 
-export default function SegmentationSummary({ segmentation, controlProperties }) {
-    const { formatMessage } = useIntl();
+export default function SegmentationSummary({
+  segmentation,
+  controlProperties,
+}) {
+  const { formatMessage } = useIntl();
 
-    if (!segmentation || segmentation.type !== "group_by") return null;
+  if (!segmentation || segmentation.type !== "group_by") return null;
 
-    const resource = controlProperties?.resource || controlProperties?.errors_resource;
+  const resource =
+    controlProperties?.resource || controlProperties?.errors_resource;
 
-    const fromQueryable = resource
-        ? {
-            id: 0,
-            type: "from",
-            alias: null,
-            properties: {
-                resource: resource,
-            },
-        }
-        : null;
+  const fromQueryable = resource
+    ? {
+        id: 0,
+        type: "from",
+        alias: null,
+        properties: {
+          resource: resource,
+        },
+      }
+    : null;
 
-    const queryables = fromQueryable ? [fromQueryable, segmentation] : [segmentation];
-    const parentResourceMap = buildParentResourceMap(queryables);
-    const groupByFields = getGroupByFields(segmentation);
-    const aggregateFields = getAggregateFields(segmentation);
-    const color = getColorById(segmentation.id);
-    const hasGroupByFields = _.size(groupByFields) > 0;
-    const hasAggregateFields = _.size(aggregateFields) > 0;
+  const queryables = fromQueryable
+    ? [fromQueryable, segmentation]
+    : [segmentation];
+  const parentResourceMap = buildParentResourceMap(queryables);
+  const groupByFields = getGroupByFields(segmentation);
+  const aggregateFields = getAggregateFields(segmentation);
+  const color = getColorById(segmentation.id);
+  const hasGroupByFields = _.size(groupByFields) > 0;
+  const hasAggregateFields = _.size(aggregateFields) > 0;
 
-    return (
-        <>
-            <Header as="h5">
-                <Icon name="chart bar" size="small" />
-                <Header.Content>
-                    {formatMessage({ id: "quality_control.form.segmentation.title", defaultMessage: "Segmentation" })}
-                </Header.Content>
-            </Header>
-            <QxContext value={{ parentResourceMap }}>
-                <Segment>
-                    <List>
-                        <List.Item>
-                            <List.Header style={{ marginBottom: 4 }}>
-                                <Icon name="calculator" />
-                                {formatMessage({ id: "dataViews.form.queryable.group_by" })}
-                            </List.Header>
-                            <List.Content>
-                                {segmentation.alias && (
-                                    <div style={{ marginBottom: 4 }}>
-                                        <b style={{ marginRight: 4 }}>as</b>
-                                        <Label color={color}>{segmentation.alias}</Label>
-                                    </div>
-                                )}
-                                {hasGroupByFields && (
-                                    <Segment>
-                                        <List.Description>
-                                            <div style={{ marginBottom: 8 }}>
-                                                <Header as="h5">
-                                                    <Icon name="group" size="small" />
-                                                    {formatMessage({
-                                                        id: "queryables.group_by.form.group_fields",
-                                                    })}
-                                                </Header>
-                                            </div>
-                                            <div>
-                                                {groupByFields.map((field, idx) => (
-                                                    <ExpressionViewer
-                                                        key={idx}
-                                                        expression={field.expression}
-                                                        alias={field.alias}
-                                                    />
-                                                ))}
-                                            </div>
-                                        </List.Description>
-                                    </Segment>
-                                )}
+  return (
+    <>
+      <Header as="h5">
+        <Icon name="chart bar" size="small" />
+        <Header.Content>
+          {formatMessage({
+            id: "quality_control.form.segmentation.title",
+            defaultMessage: "Segmentation",
+          })}
+        </Header.Content>
+      </Header>
+      <QxContext value={{ parentResourceMap }}>
+        <Segment>
+          <List>
+            <List.Item>
+              <List.Header style={{ marginBottom: 4 }}>
+                <Icon name="calculator" />
+                {formatMessage({ id: "dataViews.form.queryable.group_by" })}
+              </List.Header>
+              <List.Content>
+                {segmentation.alias && (
+                  <div style={{ marginBottom: 4 }}>
+                    <b style={{ marginRight: 4 }}>as</b>
+                    <Label color={color}>{segmentation.alias}</Label>
+                  </div>
+                )}
+                {hasGroupByFields && (
+                  <Segment>
+                    <List.Description>
+                      <div style={{ marginBottom: 8 }}>
+                        <Header as="h5">
+                          <Icon name="group" size="small" />
+                          {formatMessage({
+                            id: "queryables.group_by.form.group_fields",
+                          })}
+                        </Header>
+                      </div>
+                      <div>
+                        {groupByFields.map((field, idx) => (
+                          <ExpressionViewer
+                            key={idx}
+                            expression={field.expression}
+                            alias={field.alias}
+                          />
+                        ))}
+                      </div>
+                    </List.Description>
+                  </Segment>
+                )}
 
-                                {hasAggregateFields && (
-                                    <Segment>
-                                        <List.Description>
-                                            <div style={{ marginBottom: 8 }}>
-                                                <Header as="h5">
-                                                    <Icon name="chart bar" size="small" />
-                                                    {formatMessage({
-                                                        id: "queryables.group_by.form.aggregate_fields",
-                                                    })}
-                                                </Header>
-                                            </div>
-                                            <div>
-                                                {aggregateFields.map((field, idx) => (
-                                                    <ExpressionViewer
-                                                        key={idx}
-                                                        expression={field.expression}
-                                                        alias={field.alias}
-                                                    />
-                                                ))}
-                                            </div>
-                                        </List.Description>
-                                    </Segment>
-                                )}
-                            </List.Content>
-                        </List.Item>
-                    </List>
-                </Segment>
-            </QxContext>
-        </>
-    );
+                {hasAggregateFields && (
+                  <Segment>
+                    <List.Description>
+                      <div style={{ marginBottom: 8 }}>
+                        <Header as="h5">
+                          <Icon name="chart bar" size="small" />
+                          {formatMessage({
+                            id: "queryables.group_by.form.aggregate_fields",
+                          })}
+                        </Header>
+                      </div>
+                      <div>
+                        {aggregateFields.map((field, idx) => (
+                          <ExpressionViewer
+                            key={idx}
+                            expression={field.expression}
+                            alias={field.alias}
+                          />
+                        ))}
+                      </div>
+                    </List.Description>
+                  </Segment>
+                )}
+              </List.Content>
+            </List.Item>
+          </List>
+        </Segment>
+      </QxContext>
+    </>
+  );
 }
 
 SegmentationSummary.propTypes = {
-    segmentation: PropTypes.object,
-    controlProperties: PropTypes.object,
+  segmentation: PropTypes.object,
+  controlProperties: PropTypes.object,
 };

package/src/components/qualityControls/StructureLinkNew.js

@@ -1,12 +1,12 @@
 import { lazy, use } from "react";
 import { Header } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import QxContext from "../QxContext";
 import { makeTagOptionsSelector } from "@truedat/core/selectors";
 import { linkTo } from "@truedat/core/routes";
+import QxContext from "../QxContext";
 
 const StructureLinkForm = lazy(
-  () => import("@truedat/lm/components/StructureLinkForm")
+  () => import("@truedat/lm/components/StructureLinkForm"),
 );
 
 const selectTagOptions = makeTagOptionsSelector("quality_control");

package/src/components/qualityControls/StructureLinks.js

@@ -2,7 +2,7 @@ import { lazy, use } from "react";
 import QxContext from "../QxContext";
 
 const QualityControlStructures = lazy(
-  () => import("@truedat/lm/components/QualityControlStructures")
+  () => import("@truedat/lm/components/QualityControlStructures"),
 );
 
 const StructureLinks = () => {

package/src/components/qualityControls/__tests__/ConceptLinkNew.spec.js

@@ -17,13 +17,13 @@ jest.mock("@truedat/core/routes", () => ({
   linkTo: {
     QUALITY_CONTROL_CONCEPTS: jest.fn(
       ({ id, version }) =>
-        `/qualityControls/${id}/version/${version}/links/concepts`
+        `/qualityControls/${id}/version/${version}/links/concepts`,
     ),
   },
 }));
 
 jest.mock("@truedat/lm/components/ConceptLinkForm", () =>
-  jest.fn(() => <div>ConceptLinkForm</div>)
+  jest.fn(() => <div>ConceptLinkForm</div>),
 );
 
 const qualityControl = {
@@ -41,7 +41,7 @@ describe("<ConceptLinkNew />", () => {
     const rendered = render(
       <QxContext value={context}>
         <ConceptLinkNew />
-      </QxContext>
+      </QxContext>,
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
@@ -51,12 +51,12 @@ describe("<ConceptLinkNew />", () => {
     const rendered = render(
       <QxContext value={context}>
         <ConceptLinkNew />
-      </QxContext>
+      </QxContext>,
     );
     await waitForLoad(rendered);
 
     expect(
-      rendered.getByText("quality_controls.relation.new.concept.header")
+      rendered.getByText("quality_controls.relation.new.concept.header"),
     ).toBeInTheDocument();
     expect(rendered.getByText("ConceptLinkForm")).toBeInTheDocument();
   });