@truedat/qx 5.17.2 → 5.17.3

package/src/components/qualityControls/NewDraftQualityControl.js

@@ -0,0 +1,77 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { useParams, useHistory } from "react-router-dom";
+import { Container, Header, Icon, Segment } from "semantic-ui-react";
+import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
+import {
+  useQualityControlCreateDraft,
+  useQualityControl,
+} from "../../hooks/useQualityControls";
+import QualityControlEditor from "./QualityControlEditor";
+
+export default function NewDraftQualityControl() {
+  const { id } = useParams();
+  const history = useHistory();
+  const { trigger, isMutating } = useQualityControlCreateDraft(id);
+
+  const { data, loading } = useQualityControl(id);
+  const qualityControl = data?.data;
+
+  const handlePublish = (qualityControl) =>
+    trigger({
+      quality_control: {
+        ...qualityControl,
+        status: "published",
+      },
+    }).then((data) => {
+      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);
+      history.push(linkTo.QUALITY_CONTROL({ id }));
+    });
+  };
+  return (
+    <Segment floated="left" loading={isMutating || loading}>
+      <Container text>
+        <Header as="h2">
+          <Icon circular name="archive" />
+          <Header.Content>
+            <FormattedMessage id="quality_controls.new.header" />
+            <Header.Subheader>
+              <FormattedMessage id="quality_controls.new.subheader" />
+            </Header.Subheader>
+          </Header.Content>
+        </Header>
+        {qualityControl ? (
+          <QualityControlEditor
+            isModification
+            value={qualityControl}
+            onPublish={handlePublish}
+            onSave={handleSave}
+            onCancel={() => history.push(QUALITY_CONTROLS)}
+            isSubmitting={false}
+          />
+        ) : null}
+      </Container>
+    </Segment>
+  );
+}

package/src/components/qualityControls/NewQualityControl.js

@@ -0,0 +1,81 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { useHistory } from "react-router-dom";
+import { Container, Header, Icon, Segment } from "semantic-ui-react";
+import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
+import { useQualityControlCreate } from "../../hooks/useQualityControls";
+import QualityControlEditor from "./QualityControlEditor";
+
+export default function NewQualityControl() {
+  const history = useHistory();
+  const { trigger, isMutating } = useQualityControlCreate();
+
+  const handlePublish = (qualityControl) =>
+    trigger({
+      quality_control: {
+        ...qualityControl,
+        status: "published",
+      },
+    }).then((data) => {
+      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);
+      history.push(linkTo.QUALITY_CONTROL({ id }));
+    });
+  };
+
+  return (
+    <Segment floated="left" loading={isMutating}>
+      <Container text>
+        <Header as="h2">
+          <Icon circular name="archive" />
+          <Header.Content>
+            <FormattedMessage id="quality_controls.new.header" />
+            <Header.Subheader>
+              <FormattedMessage id="quality_controls.new.subheader" />
+            </Header.Subheader>
+          </Header.Content>
+        </Header>
+        <QualityControlEditor
+          value={{
+            name: "",
+            domain_ids: [],
+            // df_content: {},
+            df_type: null,
+            validation: [
+              {
+                expressions: [
+                  { shape: "function", value: { isCondition: true } },
+                ],
+              },
+            ],
+          }}
+          isModification={false}
+          onPublish={handlePublish}
+          onSave={handleSave}
+          onCancel={() => history.push(QUALITY_CONTROLS)}
+          isSubmitting={false}
+        />
+      </Container>
+    </Segment>
+  );
+}

package/src/components/qualityControls/QualityControl.js

@@ -0,0 +1,93 @@
+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 ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
+import QxContext from "../QxContext";
+import ResultCriteria from "./ResultCriteria";
+
+const DynamicFormViewer = React.lazy(() =>
+  import("@truedat/df/components/DynamicFormViewer")
+);
+
+export default function QualityControl() {
+  const { qualityControl } = useContext(QxContext);
+  return (
+    <>
+      <List size="big" relaxed>
+        <List.Item>
+          <List.Header>
+            <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} />
+      {qualityControl.df_type ? (
+        <>
+          <Header as="h3">
+            <Icon name="info" size="small" />
+            <Header.Content>
+              <FormattedMessage id="quality_control.form.information" />
+            </Header.Content>
+          </Header>
+          <DynamicFormViewer
+            boxLayout
+            template={qualityControl.df_type}
+            content={qualityControl.df_content}
+          />
+        </>
+      ) : 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>
+      </>
+    </>
+  );
+}

package/src/components/qualityControls/QualityControlActions.js

@@ -0,0 +1,67 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Link } from "react-router-dom";
+import { Button, Container } from "semantic-ui-react";
+import { linkTo } from "@truedat/core/routes";
+import { useQualityControlUpdateStatus } from "../../hooks/useQualityControls";
+
+export default function QualityControlActions({
+  actions,
+  qualityControl,
+  mutate,
+}) {
+  const { formatMessage } = useIntl();
+  const { trigger, isMutating } = useQualityControlUpdateStatus(
+    qualityControl.id
+  );
+
+  const updateStatus = (action) => trigger({ action }).then(() => mutate());
+
+  return (
+    <Container textAlign="right">
+      {_.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)}
+    </Container>
+  );
+}
+
+QualityControlActions.propTypes = {
+  actions: PropTypes.arrayOf(PropTypes.string),
+  qualityControl: PropTypes.object,
+  mutate: PropTypes.func,
+};

package/src/components/qualityControls/QualityControlCrumbs.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { QUALITY_CONTROLS } from "@truedat/core/routes";
+
+export default function QualityControlCrumbs({ qualityControl }) {
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Section as={Link} to={QUALITY_CONTROLS} active={false}>
+        <FormattedMessage id="quality_controls.header" />
+      </Breadcrumb.Section>
+
+      <Breadcrumb.Divider icon="right angle" />
+      <Breadcrumb.Section active>{qualityControl.name}</Breadcrumb.Section>
+    </Breadcrumb>
+  );
+}
+
+QualityControlCrumbs.propTypes = {
+  qualityControl: PropTypes.object,
+};

package/src/components/qualityControls/QualityControlEditor.js

@@ -0,0 +1,271 @@
+import _ from "lodash/fp";
+import React, { Fragment } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { useQuery } from "@apollo/client";
+import { Button, Container, Divider, Form } from "semantic-ui-react";
+import { FormProvider, useForm, Controller } from "react-hook-form";
+import {
+  ConfirmModal,
+  DomainSelector,
+  FieldLabel,
+} from "@truedat/core/components";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import useActionDomains from "@truedat/core/hooks/useActionDomains";
+import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
+import QxContext from "@truedat/qx/components/QxContext";
+import { useDataViews } from "@truedat/qx/hooks/useDataViews";
+import { useFunctions } from "@truedat/qx/hooks/useFunctions";
+import ResourceSelector from "@truedat/qx/components/common/ResourceSelector";
+import { Clauses } from "@truedat/qx/components/common/expressions";
+import { fieldsFromResource } from "@truedat/qx/components/dataViews/queryableFunctions";
+import ResultType from "./ResultType";
+
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
+);
+
+export default function QualityControlEditor({
+  value,
+  onPublish,
+  onSave,
+  onCancel,
+  isModification,
+  isSubmitting,
+}) {
+  const { formatMessage } = useIntl();
+  const { data: publishDomainsData, loading: loadingDomains } =
+    useActionDomains({
+      action: "publishQualityControls",
+    });
+  const publishDomains = _.propOr([], "domains")(publishDomainsData);
+  const form = useForm({
+    mode: "onTouched",
+    defaultValues: value,
+  });
+  const {
+    control,
+    handleSubmit,
+    formState,
+    watch,
+    setValue,
+    setError,
+    clearErrors,
+  } = form;
+  const { isDirty, isValid } = formState;
+
+  const { data, loading: dataViewsLoading } = useDataViews();
+  const { data: functionsData, loading: functionsLoading } = useFunctions();
+  const { data: referenceDatasetsData, loading: referenceDatasetsLoading } =
+    useQuery(REFERENCE_DATASETS_HEADERS_QUERY);
+
+  const loading =
+    dataViewsLoading || functionsLoading || referenceDatasetsLoading;
+
+  const submitLoading = isSubmitting || loadingDomains;
+
+  const dataViews = _.orderBy(["id"], ["asc"])(data?.data);
+  const functions = functionsData?.data;
+  const referenceDatasets = _.flow(
+    _.getOr([], "referenceDatasets"),
+    _.sortBy([({ name }) => lowerDeburrTrim(name), "name"]),
+    _.map((row) => ({ ...row, id: Number(row?.id) }))
+  )(referenceDatasetsData);
+
+  const context = {
+    dataViews,
+    referenceDatasets,
+    functions,
+  };
+
+  if (!value) return null;
+
+  const formData = watch();
+
+  const {
+    resource,
+    name,
+    df_content: dfContent,
+    domain_ids: domainIds,
+  } = formData;
+
+  const allowedToPublish = _.isEmpty(domainIds)
+    ? !_.isEmpty(publishDomains)
+    : _.every((domainId) => _.find({ id: `${domainId}` })(publishDomains))(
+        domainIds
+      );
+
+  const setDfContent = ({ content, valid }) => {
+    clearErrors("df_content");
+    if (!_.isEmpty(valid)) {
+      setError("df_content", { type: "invalidDfContent" });
+      setValue("df_content", content);
+    } else {
+      setValue("df_content", content, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    }
+  };
+  const fields = fieldsFromResource(
+    _.prop("embedded.name")(resource),
+    0
+  )({ resource });
+
+  return (
+    <Fragment>
+      <FormProvider {...form}>
+        <Form loading={loading}>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: formatMessage({ id: "form.validation.empty_required" }),
+            }}
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
+              <FieldLabel
+                label={formatMessage({ id: "quality_control.form.name" })}
+                required
+                error={error?.message}
+              >
+                <Form.Input
+                  autoComplete="off"
+                  placeholder={formatMessage({ id: "dataViews.form.name" })}
+                  error={!!error}
+                  onBlur={onBlur}
+                  onChange={(_e, { value }) => onChange(value)}
+                  value={value}
+                />
+              </FieldLabel>
+            )}
+          />
+
+          {isModification ? null : (
+            <Controller
+              control={control}
+              name="domain_ids"
+              rules={{
+                required: formatMessage({
+                  id: "form.validation.empty_required",
+                }),
+              }}
+              render={({
+                field: { onBlur, onChange, value },
+                fieldState: { error },
+              }) => (
+                <FieldLabel
+                  label={formatMessage({
+                    id: "quality_control.form.domain_ids",
+                  })}
+                  required
+                  error={error?.message}
+                >
+                  <DomainSelector
+                    action="createQualityControls"
+                    value={value}
+                    error={!!error}
+                    multiple
+                    onBlur={onBlur}
+                    onChange={(_e, { value }) => onChange(value)}
+                    labels
+                  />
+                </FieldLabel>
+              )}
+            />
+          )}
+          <ResultType />
+
+          <Controller
+            control={control}
+            name="df_type"
+            rules={{ required: true }}
+            render={({ field: { onChange, value } }) => (
+              <SelectableDynamicForm
+                scope="quality_control"
+                content={dfContent}
+                domainIds={domainIds}
+                isModification={isModification}
+                name={value}
+                onChange={setDfContent}
+                onNameChange={onChange}
+                required
+              />
+            )}
+          />
+
+          <QxContext.Provider value={{ ...context, field: "resource" }}>
+            <ResourceSelector required labelId="quality_control.form.dataset" />
+          </QxContext.Provider>
+          {resource?.id ? (
+            <div className="vertical-space">
+              <QxContext.Provider
+                value={{ ...context, fields, field: "validation" }}
+              >
+                <Clauses labelId="quality_control.form.validation" />
+              </QxContext.Provider>
+            </div>
+          ) : null}
+
+          <Divider hidden />
+          <Container textAlign="right">
+            {onPublish && allowedToPublish ? (
+              <Button
+                onClick={handleSubmit((data) => onPublish(data))}
+                primary
+                loading={submitLoading}
+                disabled={!isValid || !isDirty}
+                content={formatMessage({ id: "actions.publish" })}
+              />
+            ) : null}
+            {onSave ? (
+              <Button
+                onClick={() => onSave(formData)}
+                primary
+                loading={submitLoading}
+                disabled={!name || !isDirty}
+                content={formatMessage({ id: "actions.save" })}
+              />
+            ) : null}
+            {isDirty ? (
+              <ConfirmModal
+                trigger={
+                  <Button
+                    content={formatMessage({ id: "actions.cancel" })}
+                    disabled={isSubmitting}
+                  />
+                }
+                header={formatMessage({
+                  id: "actions.discard.confirmation.header",
+                })}
+                content={formatMessage({
+                  id: "actions.discard.confirmation.content",
+                })}
+                onConfirm={onCancel}
+                onOpen={(e) => e.stopPropagation()}
+                onClose={(e) => e.stopPropagation()}
+              />
+            ) : (
+              <Button
+                content={formatMessage({ id: "actions.cancel" })}
+                disabled={isSubmitting}
+                onClick={onCancel}
+              />
+            )}
+          </Container>
+        </Form>
+      </FormProvider>
+    </Fragment>
+  );
+}
+
+QualityControlEditor.propTypes = {
+  value: PropTypes.object,
+  onPublish: PropTypes.func,
+  onSave: PropTypes.func,
+  onCancel: PropTypes.func,
+  isSubmitting: PropTypes.bool,
+  isModification: PropTypes.bool,
+};

package/src/components/qualityControls/QualityControlHeader.js

@@ -0,0 +1,64 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { useParams } from "react-router-dom";
+import { Header, Icon, Segment, Grid, Label } from "semantic-ui-react";
+import { colorForStatus } from "@truedat/core/services/statusColor";
+
+import { useQualityControl } from "../../hooks/useQualityControls";
+import QxContext from "../QxContext";
+import QualityControlCrumbs from "./QualityControlCrumbs";
+import QualityControlActions from "./QualityControlActions";
+import QualityControlTabs from "./QualityControlTabs";
+
+export default function QualityControl({ children }) {
+  const { id } = useParams();
+  const { data, loading, mutate } = useQualityControl(id);
+
+  const qualityControl = _.propOr({}, "data")(data);
+  const actions = _.propOr([], "_actions")(data);
+  const context = { qualityControl, loading, id };
+
+  return (
+    <QxContext.Provider value={context}>
+      <QualityControlCrumbs qualityControl={qualityControl} />
+      <Segment loading={loading}>
+        {!_.isEmpty(qualityControl) ? (
+          <>
+            <Grid>
+              <Grid.Column width={8}>
+                <Header as="h2">
+                  <Icon circular name="archive" />
+                  <Header.Content>{qualityControl.name}</Header.Content>
+                </Header>
+              </Grid.Column>
+              <Grid.Column width={8}>
+                <QualityControlActions
+                  actions={actions}
+                  qualityControl={qualityControl}
+                  mutate={mutate}
+                />
+              </Grid.Column>
+            </Grid>
+            <Label
+              className="float-right"
+              tag
+              color={colorForStatus(qualityControl.status)}
+            >
+              <FormattedMessage
+                id={`quality_control.status.${qualityControl.status}`}
+              />
+            </Label>
+            <QualityControlTabs />
+            {children}
+          </>
+        ) : null}
+      </Segment>
+    </QxContext.Provider>
+  );
+}
+
+QualityControl.propTypes = {
+  children: PropTypes.node,
+};