@truedat/dq 4.49.5 → 4.49.8

package/src/components/ruleImplementationForm/RuleImplementationForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
@@ -13,6 +13,7 @@ import {
   Step,
   Segment,
 } from "semantic-ui-react";
+import { Loading } from "@truedat/core/components";
 import PopulationForm from "./PopulationForm";
 import DatasetForm from "./DatasetForm";
 import ValidationsForm from "./ValidationsForm";
@@ -20,8 +21,13 @@ import InformationForm from "./InformationForm";
 import SegmentsForm from "./SegmentsForm";
 import { areLimitsValid } from "./limitsValidation";
 
-const RuleImplementationStep = ({ activeStep, name, icon }) => (
-  <Step active={activeStep == name}>
+const RuleImplementationStep = ({
+  activeStep,
+  name,
+  icon,
+  disabled = false,
+}) => (
+  <Step active={activeStep == name} disabled={disabled}>
     <Icon {...icon} />
     <Step.Content>
       <Step.Title>
@@ -38,15 +44,12 @@ RuleImplementationStep.propTypes = {
 };
 
 export const RuleImplementationForm = ({
-  actions,
   addPopulation,
   addSegments,
-  authManageSegments,
   isSubmitting,
   onChange,
   onSubmit,
   operators,
-  rule,
   ruleImplementation,
   setImplementationKey,
   setPopulations,
@@ -56,63 +59,131 @@ export const RuleImplementationForm = ({
 }) => {
   const { formatMessage } = useIntl();
   const history = useHistory();
-  const steps = [
-    { name: "information", icon: "info", isValid: () => validInformation() },
-    { name: "dataset", icon: "database", isValid: () => validDataSet() },
-    { name: "populations", icon: "user", isValid: () => validPopulations() },
-    { name: "validations", icon: "setting", isValid: () => validValidations() },
-    ...(authManageSegments
-      ? [
-          {
-            name: "segments",
-            icon: "grid layout",
-            isValid: () => validSegments(),
-          },
-        ]
-      : []),
-  ];
 
+  const [steps, setSteps] = useState([]);
   const [activeStep, setActiveStep] = useState("information");
   const [selector, setSelector] = useState();
-  const [isContentValid, setContentIsValid] = useState();
-
-  const {
-    dataset: structures,
-    populations,
-    validations,
-    dfName,
-    segments,
-  } = ruleImplementation || {};
-
-  const validInformation = () =>
-    dfName &&
-    !_.isEmpty(dfName) &&
-    isContentValid &&
-    (!_.isEmpty(rule) || _.isNumber(_.prop("domain_id")(ruleImplementation))) &&
-    areLimitsValid(ruleImplementation);
-
-  const validPopulations = () =>
+  const [isContentValid, setContentIsValid] = useState(false);
+  const [domains, setDomains] = useState();
+  const [canPublishCurrentDomain, setCanPublishCurrentDomain] = useState(false);
+  const [canManageSegmentsCurrentDomain, setCanManageSegmentsCurrentDomain] =
+    useState(false);
+  const [canManageSegmentsAnyDomain, setCanManageSegmentsAnyDomain] =
+    useState(false);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingDomains, setIsLoadingDomains] = useState(true);
+  const [isLoadingActions, setIsLoadingActions] = useState(true);
+
+  useEffect(() => {
+    if (!isLoadingDomains) {
+      _.flow(
+        _.reduce((actions, domain) => _.concat(actions, domain.actions), []),
+        _.any((action) => action == "manageSegments"),
+        setCanManageSegmentsAnyDomain
+      )(domains);
+
+      const currentDomainActions = _.flow(
+        _.find((domain) => domain.id === String(ruleImplementation.domain_id)),
+        _.pathOr([], "actions")
+      )(domains);
+
+      _.flow(
+        _.any((action) => action == "manageSegments"),
+        setCanManageSegmentsCurrentDomain
+      )(currentDomainActions);
+
+      _.flow(
+        _.any((action) => action == "publishImplementation"),
+        setCanPublishCurrentDomain
+      )(currentDomainActions);
+
+      setIsLoadingActions(false);
+    }
+    return () => {
+      setCanPublishCurrentDomain(false);
+      setCanManageSegmentsCurrentDomain(false);
+      setCanManageSegmentsAnyDomain(false);
+    };
+  }, [domains, ruleImplementation.domain_id, isLoadingDomains]);
+
+  useEffect(() => {
+    const {
+      dataset: structures,
+      populations,
+      validations,
+      dfName,
+      segments,
+    } = ruleImplementation || {};
+
+    const validInformation = () =>
+      !_.isEmpty(dfName) &&
+      isContentValid &&
+      !!ruleImplementation?.domain_id &&
+      areLimitsValid(ruleImplementation);
+
+    const validValidations = () =>
+      _.every(_.negate(_.isEmpty))(validations) &&
+      validationsComplete(validations);
+
+    const validSegments = () => _.every(_.negate(_.isEmpty))(segments);
+
+    const validDataSet = () => areStructuresComplete();
+
+    const areStructuresComplete = () =>
+      !_.isEmpty(structures) &&
+      _.every(
+        (i) =>
+          itemComplete(_.nth(i)(structures), [
+            "structure.id",
+            "structure.name",
+          ]) &&
+          (i == 0 ||
+            _.flow(_.nth(i), _.prop("clauses"), areClausesComplete)(structures))
+      )(_.range(0, _.size(structures)));
+
+    if (!isLoadingActions) {
+      setSteps([
+        {
+          name: "information",
+          icon: "info",
+          isValid: () => validInformation(),
+        },
+        { name: "dataset", icon: "database", isValid: () => validDataSet() },
+        {
+          name: "populations",
+          icon: "user",
+          isValid: () => validPopulations(populations),
+        },
+        {
+          name: "validations",
+          icon: "setting",
+          isValid: () => validValidations(),
+        },
+        ...(canManageSegmentsAnyDomain
+          ? [
+              {
+                name: "segments",
+                icon: "grid layout",
+                isValid: () => validSegments(),
+                disabled: !canManageSegmentsCurrentDomain,
+              },
+            ]
+          : []),
+      ]);
+      setIsLoading(false);
+    }
+  }, [
+    canManageSegmentsAnyDomain,
+    canManageSegmentsCurrentDomain,
+    ruleImplementation,
+    isContentValid,
+    isLoadingActions,
+  ]);
+
+  const validPopulations = (populations) =>
     _.every((population) => populationComplete(population))(populations);
 
-  const validValidations = () =>
-    _.every(_.negate(_.isEmpty))(validations) && validationsComplete();
-
-  const validSegments = () => _.every(_.negate(_.isEmpty))(segments);
-
-  const validDataSet = () => areStructuresComplete();
-
-  const areStructuresComplete = () =>
-    !_.isEmpty(structures) &&
-    _.every(
-      (i) =>
-        itemComplete(_.nth(i)(structures), [
-          "structure.id",
-          "structure.name",
-        ]) &&
-        (i == 0 ||
-          _.flow(_.nth(i), _.prop("clauses"), areClausesComplete)(structures))
-    )(_.range(0, _.size(structures)));
-
   const areClausesComplete = (clauses) =>
     _.size(clauses) > 0 &&
     _.every((c) => itemComplete(c, ["left", "right"]))(clauses);
@@ -121,7 +192,7 @@ export const RuleImplementationForm = ({
     _.every(_.negate(_.isEmpty))(population) &&
     _.every((p) => itemComplete(p, attrsFromProfile(p)))(population);
 
-  const validationsComplete = () =>
+  const validationsComplete = (validations) =>
     _.every((v) => itemComplete(v, attrsFromProfile(v)))(validations);
 
   const attrsFromProfile = (p) => {
@@ -174,11 +245,16 @@ export const RuleImplementationForm = ({
     const currentStepIndex = _.findIndex((step) => step.name == stepName)(
       steps
     );
-    if (currentStepIndex + 1 >= steps.length) {
-      return null;
-    } else {
-      return _.prop("name")(_.nth(currentStepIndex + 1)(steps));
-    }
+    const nextStep =
+      currentStepIndex + 1 >= steps.length
+        ? null
+        : _.nth(currentStepIndex + 1)(steps);
+
+    return _.isEmpty(nextStep)
+      ? null
+      : nextStep?.disabled
+      ? getNextStep(nextStep.name)
+      : _.prop("name")(nextStep);
   };
 
   const setPreviousStep = (stepName) => {
@@ -190,17 +266,25 @@ export const RuleImplementationForm = ({
     const currentStepIndex = _.findIndex((step) => step.name == stepName)(
       steps
     );
-    if (currentStepIndex - 1 < 0) {
-      return null;
-    } else {
-      return _.prop("name")(_.nth(currentStepIndex - 1)(steps));
-    }
+
+    const prevStep =
+      currentStepIndex - 1 < 0 ? null : _.nth(currentStepIndex - 1)(steps);
+
+    return _.isEmpty(prevStep)
+      ? null
+      : prevStep?.disabled
+      ? getPreviousStep(prevStep.name)
+      : _.prop("name")(prevStep);
   };
 
   const isButtonDisabled = (currentStep) => !validStep(currentStep);
 
-  const validStep = (stepName) =>
-    _.prop("isValid")(_.find((step) => step.name == stepName)(steps))();
+  const validStep = (stepName) => {
+    return _.flow(
+      _.find((step) => step.name == stepName),
+      _.pathOr(() => false, "isValid")
+    )(steps)();
+  };
 
   const completeStep = (index, activeStep) => {
     if (index >= _.findIndex((s) => s.name == activeStep)(steps)) return false;
@@ -215,155 +299,171 @@ export const RuleImplementationForm = ({
 
   const doCancel = () => history.goBack();
 
+  const {
+    dataset: structures,
+    populations,
+    validations,
+    segments,
+  } = ruleImplementation || {};
   return (
-    <Grid.Column>
-      <Grid.Row stretched textAlign="center">
-        <Step.Group size="small">
-          {steps.map((step, index) => (
-            <RuleImplementationStep
-              key={index}
-              name={step.name}
-              icon={
-                completeStep(index, activeStep)
-                  ? { name: "check", color: "green" }
-                  : { name: step.icon }
-              }
-              activeStep={activeStep}
-            />
-          ))}
-        </Step.Group>
-        <Divider fitted hidden />
-      </Grid.Row>
-      <Grid.Row stretched className="rule-impl-form-row">
-        <Form>
-          {activeStep == "information" && (
-            <InformationForm
-              {...{
-                onChange,
-                ruleImplementation,
-                setImplementationKey,
-                setIsValid: setContentIsValid,
-              }}
-            />
-          )}
-          {activeStep == "dataset" && (
-            <DatasetForm
-              {...{
-                setImplementationKey,
-                structures,
-                selector,
-                setStructures,
-                setSelector,
-              }}
-            />
-          )}
-          {activeStep == "populations" ? (
-            <>
-              {populations.map((population, i) => (
-                <Segment key={i}>
-                  <PopulationForm
-                    population={population}
-                    setPopulation={(p) => setPopulations(p, i)}
+    <>
+      {isLoading ? <Loading /> : null}
+      <Grid.Column style={{ visibility: isLoading ? "hidden" : "visible" }}>
+        <Grid.Row stretched textAlign="center">
+          <Step.Group size="small">
+            {steps.map((step, index) => (
+              <RuleImplementationStep
+                key={index}
+                disabled={step.disabled}
+                name={step.name}
+                icon={
+                  completeStep(index, activeStep) && !step.disabled
+                    ? { name: "check", color: "green" }
+                    : {
+                        name: step.icon,
+                        color: step.disabled ? "grey" : "black",
+                      }
+                }
+                activeStep={activeStep}
+              />
+            ))}
+          </Step.Group>
+          <Divider fitted hidden />
+        </Grid.Row>
+        <Grid.Row stretched className="rule-impl-form-row">
+          <Form>
+            {activeStep == "information" && (
+              <InformationForm
+                {...{
+                  onChange,
+                  ruleImplementation,
+                  setImplementationKey,
+                  setIsValid: setContentIsValid,
+                  onDomainsLoad: (domains) => {
+                    setDomains(domains);
+                    setIsLoadingDomains(false);
+                  },
+                }}
+              />
+            )}
+            {activeStep == "dataset" && (
+              <DatasetForm
+                {...{
+                  setImplementationKey,
+                  structures,
+                  selector,
+                  setStructures,
+                  setSelector,
+                }}
+              />
+            )}
+            {activeStep == "populations" ? (
+              <>
+                {populations.map((population, i) => (
+                  <Segment key={i}>
+                    <PopulationForm
+                      population={population}
+                      setPopulation={(p) => setPopulations(p, i)}
+                      structures={structures}
+                      typeOperators={operators}
+                    />
+                  </Segment>
+                ))}
+                {_.flow(_.flatten, _.isEmpty)(populations) ? (
+                  <PopulationTypeForm createFilter={() => addPopulation()} />
+                ) : validPopulations(populations) ? (
+                  <Button
+                    secondary
+                    onClick={() => addPopulation()}
+                    content={formatMessage({
+                      id: "ruleImplementationForm.populations.add",
+                    })}
+                  />
+                ) : null}
+              </>
+            ) : null}
+            {activeStep == "validations" && (
+              <ValidationsForm
+                validations={validations}
+                setValidations={setValidations}
+                structures={structures}
+                typeOperators={operators}
+              />
+            )}
+            {activeStep == "segments" ? (
+              <>
+                {_.flow(_.flatten, _.isEmpty)(segments) ? (
+                  <SegmentsTypeForm createFilter={() => addSegments()} />
+                ) : (
+                  <SegmentsForm
+                    segments={segments}
+                    setSegments={setSegments}
                     structures={structures}
                     typeOperators={operators}
                   />
-                </Segment>
-              ))}
-              {_.flow(_.flatten, _.isEmpty)(populations) ? (
-                <PopulationTypeForm createFilter={() => addPopulation()} />
-              ) : validPopulations() ? (
+                )}
+              </>
+            ) : null}
+          </Form>
+        </Grid.Row>
+        <Divider hidden />
+        <Grid.Row stretched>
+          {getNextStep(activeStep) == null ? (
+            <>
+              {canPublishCurrentDomain ? (
                 <Button
-                  secondary
-                  onClick={() => addPopulation()}
-                  content={formatMessage({
-                    id: "ruleImplementationForm.populations.add",
-                  })}
+                  floated="right"
+                  disabled={isButtonDisabled(activeStep)}
+                  type="submit"
+                  primary
+                  loading={isSubmitting}
+                  onClick={() => doSubmit({ status: "published" })}
+                  content={formatMessage({ id: "actions.publish" })}
                 />
               ) : null}
-            </>
-          ) : null}
-          {activeStep == "validations" && (
-            <ValidationsForm
-              validations={validations}
-              setValidations={setValidations}
-              structures={structures}
-              typeOperators={operators}
-            />
-          )}
-          {activeStep == "segments" ? (
-            <>
-              {_.flow(_.flatten, _.isEmpty)(segments) ? (
-                <SegmentsTypeForm createFilter={() => addSegments()} />
-              ) : (
-                <SegmentsForm
-                  segments={segments}
-                  setSegments={setSegments}
-                  structures={structures}
-                  typeOperators={operators}
-                />
-              )}
-            </>
-          ) : null}
-        </Form>
-      </Grid.Row>
-      <Divider hidden />
-      <Grid.Row stretched>
-        {getNextStep(activeStep) == null ? (
-          <>
-            {!!actions?.publish ? (
               <Button
                 floated="right"
                 disabled={isButtonDisabled(activeStep)}
                 type="submit"
                 primary
                 loading={isSubmitting}
-                onClick={() => doSubmit({ status: "published" })}
-                content={formatMessage({ id: "actions.publish" })}
+                onClick={() => doSubmit({ status: "draft" })}
+                content={formatMessage({ id: "actions.save" })}
               />
-            ) : null}
+            </>
+          ) : (
             <Button
               floated="right"
               disabled={isButtonDisabled(activeStep)}
               type="submit"
               primary
               loading={isSubmitting}
-              onClick={() => doSubmit({})}
-              content={formatMessage({ id: "actions.save" })}
+              onClick={() => setNextStep(activeStep)}
+              content={formatMessage({ id: "actions.next" })}
             />
-          </>
-        ) : (
+          )}
           <Button
             floated="right"
-            disabled={isButtonDisabled(activeStep)}
-            type="submit"
-            primary
-            loading={isSubmitting}
-            onClick={() => setNextStep(activeStep)}
-            content={formatMessage({ id: "actions.next" })}
-          />
-        )}
-        <Button
-          floated="right"
-          secondary
-          onClick={
-            () =>
+            secondary
+            onClick={
+              () =>
+                getPreviousStep(activeStep)
+                  ? setPreviousStep(activeStep)
+                  : doCancel() //TODO: confirmModal
+            }
+            content={
               getPreviousStep(activeStep)
-                ? setPreviousStep(activeStep)
-                : doCancel() //TODO: confirmModal
-          }
-          content={
-            getPreviousStep(activeStep)
-              ? formatMessage({ id: "actions.prev" })
-              : formatMessage({ id: "actions.cancel" })
-          }
-        />
-      </Grid.Row>
-    </Grid.Column>
+                ? formatMessage({ id: "actions.prev" })
+                : formatMessage({ id: "actions.cancel" })
+            }
+          />
+        </Grid.Row>
+      </Grid.Column>
+    </>
   );
 };
 
 RuleImplementationForm.propTypes = {
-  actions: PropTypes.object,
   addPopulation: PropTypes.func,
   addSegments: PropTypes.func,
   authManageSegments: PropTypes.bool,
@@ -378,22 +478,13 @@ RuleImplementationForm.propTypes = {
   setSegments: PropTypes.func,
   setStructures: PropTypes.func,
   setValidations: PropTypes.func,
-  rule: PropTypes.object,
 };
 
-const mapStateToProps = ({
-  rule,
-  ruleImplementationCreating,
-  userRulePermissions,
-  implementationActions,
-}) => ({
-  actions: implementationActions,
-  authManageSegments:
-    !!userRulePermissions?.manage_segments ||
-    !!implementationActions?.manage_segments,
-  rule,
-  isSubmitting: ruleImplementationCreating,
-});
+const mapStateToProps = ({ ruleImplementationCreating }) => {
+  return {
+    isSubmitting: ruleImplementationCreating,
+  };
+};
 
 export default connect(mapStateToProps)(RuleImplementationForm);