DHFPROD-6698: Use the Reduce Toggle for Single Properties Form

Marklogic-retired · Feb 26, 2021 · 8ae3599 · 8ae3599
1 parent b6752d5
commit 8ae3599
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 22 deletions.
diff --git a/marklogic-data-hub-central/ui/e2e/cypress/integration/curation/curate/matching.spec.tsx b/marklogic-data-hub-central/ui/e2e/cypress/integration/curation/curate/matching.spec.tsx
@@ -158,10 +158,10 @@ describe("Matching", () => {
   it("Edit ruleset", () => {
     multiSlider.editOption("customerId");
     cy.contains("Edit Match Ruleset for Single Property");
-    rulesetSingleModal.selectMatchTypeDropdown("reduce");
+    rulesetSingleModal.selectMatchTypeDropdown("exact");
     rulesetSingleModal.saveButton().click();
     cy.waitForAsyncRequest();
-    cy.waitUntil(() => cy.findByLabelText("customerId-reduce").should("have.length.gt", 0));
+    cy.waitUntil(() => cy.findByLabelText("customerId-exact").should("have.length.gt", 0));
   });
   it("Delele ruleset", () => {
     multiSlider.deleteOption("customerId");

diff --git a/...central/ui/src/components/entities/matching/matching-step-detail/matching-step-detail.tsx b/...central/ui/src/components/entities/matching/matching-step-detail/matching-step-detail.tsx
@@ -91,8 +91,7 @@ const MatchingStepDetail: React.FC = () => {
   const matchRuleSetOptions = matchingStep.matchRulesets && matchingStep.matchRulesets.map((i) => {
     const firstMatchRule = i.matchRules[0];
     const firstMatchRuleType = firstMatchRule ? firstMatchRule.matchType : "";
-    // reduce is a special case that applies to an entire ruleset
-    const rulesetType = i.reduce ? "reduce" : firstMatchRuleType;
+    const rulesetType = firstMatchRuleType;
     const matchRuleOptionsObject = {
       props: [{
         prop: i.name.split(" -")[0],

diff --git a/...ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.module.scss b/...ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.module.scss
@@ -26,7 +26,7 @@
 
 .icon {
   position: absolute;
-  top: 0px;
+  top: 4px;
   right: -20px;
   font-size: 12px;
   color: #7F86B5;
@@ -50,3 +50,10 @@
   width: 400px;
 }
 
+.reduceWeightText {
+  font-weight: 900;
+}
+
+.reduceToggle {
+  margin-left: 12px !important;
+}
diff --git a/...al/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.test.tsx b/...al/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.test.tsx
@@ -21,7 +21,7 @@ describe("Matching Ruleset Single Modal component", () => {
     mockMatchingUpdate.mockResolvedValueOnce({status: 200, data: {}});
     const toggleModalMock = jest.fn();
 
-    const {queryByText, getByText, rerender} =  render(
+    const {queryByText, getByText, getByLabelText, rerender} =  render(
       <CurationContext.Provider value={customerMatchingStep}>
         <RulesetSingleModal
           isVisible={false}
@@ -44,6 +44,9 @@ describe("Matching Ruleset Single Modal component", () => {
     );
 
     expect(queryByText("Add Match Ruleset for Single Property")).toBeInTheDocument();
+    expect(getByText("Reduce Weight")).toBeInTheDocument();
+    expect(getByLabelText("reduceToggle")).toBeInTheDocument();
+
     userEvent.click(screen.getByText("Select property"));
     userEvent.click(screen.getByText("customerId"));
 
@@ -63,7 +66,7 @@ describe("Matching Ruleset Single Modal component", () => {
     mockMatchingUpdate.mockResolvedValueOnce({status: 200, data: {}});
     const toggleModalMock = jest.fn();
 
-    const {queryByText, getByText, rerender} =  render(
+    const {queryByText, getByText, getByLabelText, rerender} =  render(
       <CurationContext.Provider value={customerMatchingStep}>
         <RulesetSingleModal
           isVisible={false}
@@ -86,6 +89,9 @@ describe("Matching Ruleset Single Modal component", () => {
     );
 
     expect(queryByText("Add Match Ruleset for Single Property")).toBeInTheDocument();
+    expect(getByText("Reduce Weight")).toBeInTheDocument();
+    expect(getByLabelText("reduceToggle")).toBeInTheDocument();
+
     userEvent.click(screen.getByText("Select property"));
     userEvent.click(screen.getByText("nicknames"));
 
@@ -117,6 +123,9 @@ describe("Matching Ruleset Single Modal component", () => {
     );
 
     expect(queryByText("Add Match Ruleset for Single Property")).toBeInTheDocument();
+    expect(getByText("Reduce Weight")).toBeInTheDocument();
+    expect(getByLabelText("reduceToggle")).toBeInTheDocument();
+
     userEvent.click(screen.getByText("Select property"));
     userEvent.click(screen.getByText("nicknames"));
 
@@ -150,6 +159,9 @@ describe("Matching Ruleset Single Modal component", () => {
     );
 
     expect(queryByText("Add Match Ruleset for Single Property")).toBeInTheDocument();
+    expect(getByText("Reduce Weight")).toBeInTheDocument();
+    expect(getByLabelText("reduceToggle")).toBeInTheDocument();
+
     userEvent.click(screen.getByText("Select property"));
     userEvent.click(screen.getByText("orders"));
 
@@ -183,6 +195,9 @@ describe("Matching Ruleset Single Modal component", () => {
     );
 
     expect(queryByText("Add Match Ruleset for Single Property")).toBeInTheDocument();
+    expect(getByText("Reduce Weight")).toBeInTheDocument();
+    expect(getByLabelText("reduceToggle")).toBeInTheDocument();
+
     userEvent.click(screen.getByText("Select property"));
     userEvent.click(screen.getByText("nicknames"));
 
@@ -201,7 +216,7 @@ describe("Matching Ruleset Single Modal component", () => {
     });
   });
 
-  it("can select Reduce ruleset type and click save", async () => {
+  it("can toggle Reduce ruleset, select Exact ruleset type and click save", async () => {
     mockMatchingUpdate.mockResolvedValueOnce({status: 200, data: {}});
     const toggleModalMock = jest.fn();
 
@@ -216,17 +231,20 @@ describe("Matching Ruleset Single Modal component", () => {
     );
 
     expect(queryByText("Add Match Ruleset for Single Property")).toBeInTheDocument();
+    expect(getByText("Reduce Weight")).toBeInTheDocument();
+    userEvent.click(screen.getByLabelText("reduceToggle"));
+
     userEvent.click(screen.getByText("Select property"));
     userEvent.click(screen.getByText("nicknames"));
 
     userEvent.click(screen.getByText("Select match type"));
-    userEvent.click(screen.getByText("Reduce"));
+    userEvent.click(screen.getByText("Exact"));
 
     userEvent.click(getByText("Save"));
     await wait(() => {
       const expectedMatchStep = {...customerMatchingStep.curationOptions.activeStep.stepArtifact};
       expectedMatchStep.matchRulesets = [...expectedMatchStep.matchRulesets, {
-        name: "nicknames - Reduce",
+        name: "nicknames - Exact",
         reduce: true,
         weight: 0,
         matchRules: [

diff --git a/...central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.tsx b/...central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useContext} from "react";
-import {Modal, Form, Input, Icon} from "antd";
+import {Modal, Form, Input, Icon, Switch} from "antd";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faLayerGroup} from "@fortawesome/free-solid-svg-icons";
 import {MLButton, MLTooltip, MLSelect} from "@marklogic/design-system";
@@ -34,7 +34,6 @@ const MATCH_TYPE_OPTIONS = [
   {name: "Exact", value: "exact"},
   {name: "Synonym", value: "synonym"},
   {name: "Double Metaphone", value: "doubleMetaphone"},
-  {name: "Reduce", value: "reduce"},
   {name: "Zip", value: "zip"},
   {name: "Custom", value: "custom"},
 ];
@@ -82,6 +81,8 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
 
   const [discardChangesVisible, setDiscardChangesVisible] = useState(false);
 
+  const [reduceValue, setReduceValue] = useState(false);
+
   useEffect(() => {
     if (props.isVisible && curationOptions.entityDefinitionsArray.length > 0 && curationOptions.activeStep.entityName !== "") {
       let entityTypeDefinition: Definition = curationOptions.entityDefinitionsArray.find(entityDefinition => entityDefinition.name === curationOptions.activeStep.entityName) || DEFAULT_ENTITY_DEFINITION;
@@ -92,13 +93,10 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
       let editRuleset = props.editRuleset;
       setSelectedProperty(editRuleset.name.split(" ")[0]);
       let matchType = editRuleset["matchRules"][0]["matchType"];
-      // reduce is applied to an entire ruleset.
       if (editRuleset.reduce) {
-        setMatchType("reduce");
-      } else {
-        setMatchType(matchType);
+        setReduceValue(true);
       }
-
+      setMatchType(matchType);
       if (matchType === "custom") {
         setUriValue(editRuleset["matchRules"][0]["algorithmModulePath"]);
         setFunctionValue(editRuleset["matchRules"][0]["algorithmModuleFunction"]);
@@ -200,6 +198,7 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
   const resetModal = () => {
     setSelectedProperty(undefined);
     setMatchType(undefined);
+    setReduceValue(false);
     setPropertyTypeErrorMessage("");
     setMatchTypeErrorMessage("");
     setThesaurusValue("");
@@ -228,6 +227,7 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
     setIsUriTouched(false);
     setIsFunctionTouched(false);
     setIsNamespaceTouched(false);
+    setReduceValue(false);
   };
 
   const onSubmit = (event) => {
@@ -248,21 +248,18 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
 
     switch (matchType) {
     case "exact":
-    case "reduce":
     case "zip":
     {
-
       let matchRule: MatchRule = {
         entityPropertyPath: propertyName,
-        // the reduce logic is applied to the entire ruleset
-        matchType: matchType === "reduce" ? "exact" : matchType,
+        matchType: matchType,
         options: {}
       };
 
       let matchRuleset: MatchRuleset = {
         name: rulesetName,
         weight: Object.keys(props.editRuleset).length !== 0 ? props.editRuleset["weight"] : 0,
-        ...(matchType === "reduce" && {reduce: true}),
+        ...({reduce: reduceValue}),
         matchRules: [matchRule]
       };
 
@@ -295,6 +292,7 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
       let matchRuleset: MatchRuleset = {
         name: rulesetName,
         weight: Object.keys(props.editRuleset).length !== 0 ? props.editRuleset["weight"] : 0,
+        ...({reduce: reduceValue}),
         matchRules: [synonymMatchRule]
       };
 
@@ -334,6 +332,7 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
       let matchRuleset: MatchRuleset = {
         name: rulesetName,
         weight: Object.keys(props.editRuleset).length !== 0 ? props.editRuleset["weight"] : 0,
+        ...({reduce: reduceValue}),
         matchRules: [doubleMetaphoneMatchRule]
       };
 
@@ -373,6 +372,7 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
       let matchRuleset: MatchRuleset = {
         name: rulesetName,
         weight: Object.keys(props.editRuleset).length !== 0 ? props.editRuleset["weight"] : 0,
+        ...({reduce: reduceValue}),
         matchRules: [customMatchRule]
       };
 
@@ -711,6 +711,14 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
     </div>
   );
 
+  const onToggleReduce = (checked) => {
+    if (checked) {
+      setReduceValue(true);
+    } else {
+      setReduceValue(false);
+    }
+  };
+
   return (
     <Modal
       visible={props.isVisible}
@@ -727,6 +735,14 @@ const MatchRulesetModal: React.FC<Props> = (props) => {
         id="matching-single-ruleset"
         onSubmit={onSubmit}
       >
+        <Form.Item>
+          <span className={styles.reduceWeightText}>Reduce Weight</span>
+          <Switch className={styles.reduceToggle} onChange={onToggleReduce} defaultChecked={props.editRuleset.reduce} aria-label="reduceToggle"></Switch>
+          {/*tooltip content yet to be finalized*/}
+          <MLTooltip>
+            <Icon type="question-circle" className={styles.icon} theme="filled" />
+          </MLTooltip>
+        </Form.Item>
         <Form.Item
           className={styles.formItem}
           label={<span>