@truedat/qx 7.0.7 → 7.1.0

package/src/components/qualityControls/IconPopup.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { Icon, Popup, Header, List, ListItem } from "semantic-ui-react";
+
+export default function IconPopup({ color, label1, value1, label2, value2 }) {
+  return (
+    <Popup
+      trigger={<Icon name="circle" color={color} />}
+      content={
+        <List>
+          <ListItem>
+            <Header as="h5">
+              <FormattedMessage id={"quality_control.score_criteria"} />
+            </Header>
+          </ListItem>
+          <ListItem>
+            <FormattedMessage id={label1} />
+            {`: ${value1}`}
+          </ListItem>
+          <ListItem>
+            <FormattedMessage id={label2} />
+            {`: ${value2}`}
+          </ListItem>
+        </List>
+      }
+    />
+  );
+}

package/src/components/qualityControls/NewDraftQualityControl.js

@@ -15,8 +15,9 @@ export default function NewDraftQualityControl() {
   const history = useHistory();
   const { trigger, isMutating } = useQualityControlCreateDraft(id);
 
-  const { data, loading } = useQualityControl(id);
+  const { data, loading: qualityControlLoading } = useQualityControl(id);
   const qualityControl = data?.data;
+  const loading = qualityControlLoading || isMutating;
 
   const handlePublish = (qualityControl) =>
     trigger({
@@ -29,20 +30,10 @@ export default function NewDraftQualityControl() {
       history.push(linkTo.QUALITY_CONTROL({ id }));
     });
   const handleSave = (qualityControl) => {
-    const resource = _.prop("resource")(qualityControl);
-    const validation = _.prop("validation")(qualityControl);
     trigger({
       quality_control: {
         ...qualityControl,
         status: "draft",
-        resource: _.conforms({ type: _.isNil })(resource) ? null : resource,
-        validation: _.isEqual([
-          {
-            expressions: [{ shape: "function", value: { isCondition: true } }],
-          },
-        ])(validation)
-          ? []
-          : validation,
       },
     }).then((data) => {
       const id = _.prop("data.data.id")(data);
@@ -50,7 +41,7 @@ export default function NewDraftQualityControl() {
     });
   };
   return (
-    <Segment floated="left" loading={isMutating || loading}>
+    <Segment floated="left" loading={loading}>
       <Container text>
         <Header as="h2">
           <Icon circular name="archive" />
@@ -68,7 +59,7 @@ export default function NewDraftQualityControl() {
             onPublish={handlePublish}
             onSave={handleSave}
             onCancel={() => history.push(QUALITY_CONTROLS)}
-            isSubmitting={false}
+            isSubmitting={loading}
           />
         ) : null}
       </Container>

package/src/components/qualityControls/NewQualityControl.js

@@ -7,11 +7,17 @@ import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
 import { useQualityControlCreate } from "../../hooks/useQualityControls";
 import QualityControlEditor from "./QualityControlEditor";
 
+export const defaultQualityControl = {
+  name: "",
+  active: true,
+  domain_ids: [],
+  df_type: null,
+};
 export default function NewQualityControl() {
   const history = useHistory();
   const { trigger, isMutating } = useQualityControlCreate();
 
-  const handlePublish = (qualityControl) =>
+  const handlePublish = (qualityControl) => {
     trigger({
       quality_control: {
         ...qualityControl,
@@ -21,21 +27,12 @@ export default function NewQualityControl() {
       const id = _.prop("data.data.id")(data);
       history.push(linkTo.QUALITY_CONTROL({ id }));
     });
+  };
   const handleSave = (qualityControl) => {
-    const resource = _.prop("resource")(qualityControl);
-    const validation = _.prop("validation")(qualityControl);
     trigger({
       quality_control: {
         ...qualityControl,
         status: "draft",
-        resource: _.conforms({ type: _.isNil })(resource) ? null : resource,
-        validation: _.isEqual([
-          {
-            expressions: [{ shape: "function", value: { isCondition: true } }],
-          },
-        ])(validation)
-          ? []
-          : validation,
       },
     }).then((data) => {
       const id = _.prop("data.data.id")(data);
@@ -56,24 +53,12 @@ export default function NewQualityControl() {
           </Header.Content>
         </Header>
         <QualityControlEditor
-          value={{
-            name: "",
-            domain_ids: [],
-            // df_content: {},
-            df_type: null,
-            validation: [
-              {
-                expressions: [
-                  { shape: "function", value: { isCondition: true } },
-                ],
-              },
-            ],
-          }}
+          value={defaultQualityControl}
           isModification={false}
           onPublish={handlePublish}
           onSave={handleSave}
           onCancel={() => history.push(QUALITY_CONTROLS)}
-          isSubmitting={false}
+          isSubmitting={isMutating}
         />
       </Container>
     </Segment>

package/src/components/qualityControls/QualityBadge.js

@@ -0,0 +1,33 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { Icon } from "semantic-ui-react";
+import IconPopup from "./IconPopup";
+import qualityByControlMode from "./qualityByControlMode";
+
+export default function QualityBadge({ score }) {
+  const quality = qualityByControlMode(score);
+
+  return quality.isFailed ? (
+    <>
+      <Icon color="red" name="warning circle" />
+      <FormattedMessage id={"score.status.failed"} />
+    </>
+  ) : quality.isEmpty ? (
+    <>
+      <Icon inverted color="grey" name="warning circle" />
+      <FormattedMessage id={"score.no_results"} />
+    </>
+  ) : (
+    <>
+      <IconPopup
+        color={quality.color}
+        label1={quality.label1}
+        value1={quality.value1}
+        label2={quality.label2}
+        value2={quality.value2}
+      />
+      {quality.text}
+    </>
+  );
+}

package/src/components/qualityControls/QualityControl.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
 import React, { useContext } from "react";
 import { FormattedMessage } from "react-intl";
-import { Header, Icon, Segment, List, Label } from "semantic-ui-react";
+import { Header, Icon, List, Label } from "semantic-ui-react";
 
-import ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
 import QxContext from "../QxContext";
-import ResultCriteria from "./ResultCriteria";
+import ScoreCriteriaView from "./ScoreCriteriaView";
+import ControlPropertiesView from "./ControlPropertiesView";
 
 const DynamicFormViewer = React.lazy(() =>
   import("@truedat/df/components/DynamicFormViewer")
@@ -18,14 +18,16 @@ export default function QualityControl() {
       <List size="big" relaxed>
         <List.Item>
           <List.Header>
-            <FormattedMessage id="quality_control.form.domain_ids" />{" "}
+            <FormattedMessage id="quality_control.form.domain_ids" />
             {_.map((domain) => <Label key={domain.id}>{domain.name}</Label>)(
               qualityControl.domains
             )}
           </List.Header>
         </List.Item>
       </List>
-      <ResultCriteria qualityControl={qualityControl} />
+
+      <ScoreCriteriaView qualityControl={qualityControl} />
+
       {qualityControl.df_type ? (
         <>
           <Header as="h3">
@@ -37,57 +39,13 @@ export default function QualityControl() {
           <DynamicFormViewer
             boxLayout
             template={qualityControl.df_type}
-            content={qualityControl.df_content}
+            content={qualityControl.dynamic_content}
+            domainIds={qualityControl.domain_ids}
           />
         </>
       ) : null}
-      <>
-        <Header as="h3">
-          <Icon name="puzzle piece" size="small" />
-          <Header.Content>
-            <FormattedMessage id="quality_control.form.implementation" />
-          </Header.Content>
-        </Header>
-        <Segment>
-          <List>
-            <List.Item>
-              <List.Header>
-                <FormattedMessage id="quality_control.form.dataset" />
-              </List.Header>
-              <List.Content>
-                {qualityControl.resource ? (
-                  <List.Description>
-                    <Label horizontal>
-                      <FormattedMessage
-                        id={`queryables.resource.selector.${qualityControl.resource?.type}`}
-                      />
-                    </Label>
-                    <Label color="blue">
-                      {_.prop("resource.embedded.name")(qualityControl)}
-                    </Label>
-                  </List.Description>
-                ) : (
-                  <FormattedMessage id="quality_control.form.dataset.empty" />
-                )}
-              </List.Content>
-            </List.Item>
-            <List.Item>
-              <List.Header>
-                <FormattedMessage id="quality_control.form.validation" />
-              </List.Header>
-              <List.Content>
-                {qualityControl.validation ? (
-                  <List.Description>
-                    <ClauseViewer clause={qualityControl.validation} />
-                  </List.Description>
-                ) : (
-                  <FormattedMessage id="quality_control.form.validation.empty" />
-                )}
-              </List.Content>
-            </List.Item>
-          </List>
-        </Segment>
-      </>
+
+      <ControlPropertiesView qualityControl={qualityControl} />
     </>
   );
 }

package/src/components/qualityControls/QualityControlActions.js

@@ -1,67 +1,154 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { Button, Container } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 import { useAuthorized } from "@truedat/core/hooks";
-import { useQualityControlUpdateStatus } from "../../hooks/useQualityControls";
+import { ConfirmModal, GroupActions } from "@truedat/core/components";
+import { useScoreGroupCreate } from "../../hooks/useScoreGroups";
+import QxContext from "../QxContext";
+import { ScoreGroupPopup } from "../scores";
+import {
+  useQualityControlUpdateStatus,
+  useQualityControlUpdateMain,
+} from "../../hooks/useQualityControls";
 import QualityControlQueryModal from "./QualityControlQueryModal";
 
-export default function QualityControlActions({
-  actions,
-  qualityControl,
-  mutate,
-}) {
+export const ConfirmToggleActiveModal = ({ onConfirm, qualityControl }) => {
   const { formatMessage } = useIntl();
-  const { trigger, isMutating } = useQualityControlUpdateStatus(
-    qualityControl.id
+  const { active, name } = qualityControl || {};
+  const action = active ? "disable" : "enable";
+  const icon = active ? "pause" : "play";
+  return (
+    <ConfirmModal
+      icon={icon}
+      trigger={
+        <Button
+          icon={icon}
+          content={formatMessage({ id: `quality_controls.actions.${action}` })}
+        />
+      }
+      header={formatMessage({
+        id: `quality_controls.actions.${action}.confirmation.header`,
+      })}
+      size="small"
+      content={formatMessage(
+        { id: `quality_controls.actions.${action}.confirmation.content` },
+        { name: <i>{name}</i> }
+      )}
+      onConfirm={() => onConfirm()}
+    />
   );
+};
+
+ConfirmToggleActiveModal.propTypes = {
+  action: PropTypes.object,
+  onConfirm: PropTypes.func,
+};
+
+export default function QualityControlActions() {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
   const authorized = useAuthorized();
+  const { qualityControl, actions, mutate } = useContext(QxContext);
+  const { trigger: updateQualityControlStatus, isMutating } =
+    useQualityControlUpdateStatus(qualityControl.id);
+
+  const { trigger: updateMainQualityControl, isMutating: isMutatingMain } =
+    useQualityControlUpdateMain(qualityControl.id);
 
-  const updateStatus = (action) => trigger({ action }).then(() => mutate());
+  const { trigger: triggerCreateScoreGroup, loading: groupCreating } =
+    useScoreGroupCreate();
+
+  const updateStatus = (action) =>
+    updateQualityControlStatus({ action }).then(() => mutate());
+
+  const toggleActive = () =>
+    updateMainQualityControl({
+      quality_control: { active: !qualityControl.active },
+    }).then(() => mutate());
+
+  const availableActions = _.flow(
+    _.reject(_.includes(["delete_score"])),
+    _.map((action) => {
+      const actionIcon = {
+        create_draft: "edit",
+        deprecate: "folder open outline",
+        edit: "edit",
+        publish: "bullhorn",
+        reject: "window close outline",
+        restore: "undo",
+        send_to_approval: "send",
+        send_to_draft: "clipboard outline",
+      };
+      const base = {
+        key: action,
+        disabled: isMutating || isMutatingMain,
+        icon: _.prop(action)(actionIcon),
+      };
+      switch (action) {
+        case "create_draft":
+          return {
+            ...base,
+            as: Link,
+            to: linkTo.QUALITY_CONTROL_NEW_DRAFT(qualityControl),
+            text: formatMessage({ id: `quality_controls.actions.${action}` }),
+          };
+        case "edit":
+          return {
+            ...base,
+            as: Link,
+            to: linkTo.QUALITY_CONTROL_EDIT(qualityControl),
+            text: formatMessage({ id: `quality_controls.actions.${action}` }),
+          };
+        case "toggle_active":
+          return {
+            ...base,
+            as: ConfirmToggleActiveModal,
+            onConfirm: toggleActive,
+            qualityControl: qualityControl,
+          };
+        default:
+          return {
+            ...base,
+            text: formatMessage({ id: `quality_controls.actions.${action}` }),
+            onClick: () => updateStatus(action),
+          };
+      }
+    })
+  )(actions);
+
+  const onCreateScoreGroup = ({ content, df_type }) => {
+    const score_group = {
+      dynamic_content: content,
+      df_type,
+    };
+
+    triggerCreateScoreGroup({
+      score_group,
+      ids: [qualityControl.version_id],
+    }).then(({ data }) => {
+      const id = _.prop("data.id")(data);
+      history.push(linkTo.SCORE_GROUP({ id }));
+    });
+  };
 
   return (
     <Container textAlign="right">
       {authorized ? (
         <QualityControlQueryModal qualityControlId={qualityControl.id} />
       ) : null}
-      {_.map((action) =>
-        action === "create_draft" ? (
-          <Button
-            key={action}
-            primary
-            as={Link}
-            disabled={isMutating}
-            to={linkTo.QUALITY_CONTROL_NEW_DRAFT(qualityControl)}
-            content={formatMessage({
-              id: `quality_controls.actions.${action}`,
-            })}
-          />
-        ) : action === "edit" ? (
-          <Button
-            key={action}
-            primary
-            as={Link}
-            disabled={isMutating}
-            to={linkTo.QUALITY_CONTROL_EDIT(qualityControl)}
-            content={formatMessage({
-              id: `quality_controls.actions.${action}`,
-            })}
-          />
-        ) : (
-          <Button
-            key={action}
-            primary
-            disabled={isMutating}
-            onClick={() => updateStatus(action)}
-            content={formatMessage({
-              id: `quality_controls.actions.${action}`,
-            })}
-          />
-        )
-      )(actions)}
+
+      {qualityControl.active &&
+      !_.includes(qualityControl.status)(["deprecated", "versioned"]) ? (
+        <ScoreGroupPopup
+          loading={groupCreating}
+          onSubmit={onCreateScoreGroup}
+        />
+      ) : null}
+      <GroupActions availableActions={availableActions} />
     </Container>
   );
 }