From 8ae35997747ce3735da36bfc48b727e528d4e0d6 Mon Sep 17 00:00:00 2001 From: Akshay Bajaj Date: Tue, 23 Feb 2021 11:07:49 -0800 Subject: [PATCH] DHFPROD-6698: Use the Reduce Toggle for Single Properties Form --- .../curation/curate/matching.spec.tsx | 4 +- .../matching-step-detail.tsx | 3 +- .../ruleset-single-modal.module.scss | 9 ++++- .../ruleset-single-modal.test.tsx | 28 ++++++++++--- .../ruleset-single-modal.tsx | 40 +++++++++++++------ 5 files changed, 62 insertions(+), 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 index 6103c34969..3ff45f6dfa 100644 --- 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/marklogic-data-hub-central/ui/src/components/entities/matching/matching-step-detail/matching-step-detail.tsx b/marklogic-data-hub-central/ui/src/components/entities/matching/matching-step-detail/matching-step-detail.tsx index a7f4496441..593bfcfff8 100644 --- a/marklogic-data-hub-central/ui/src/components/entities/matching/matching-step-detail/matching-step-detail.tsx +++ b/marklogic-data-hub-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/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.module.scss b/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.module.scss index 1c6777c9e8..57ad301484 100644 --- a/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.module.scss +++ b/marklogic-data-hub-central/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/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.test.tsx b/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.test.tsx index 6394354b96..25070e2769 100644 --- a/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.test.tsx +++ b/marklogic-data-hub-central/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( { ); 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( { ); 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/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.tsx b/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.tsx index aafc47e3a6..fbebe1891c 100644 --- a/marklogic-data-hub-central/ui/src/components/entities/matching/ruleset-single-modal/ruleset-single-modal.tsx +++ b/marklogic-data-hub-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) => { 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) => { 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) => { const resetModal = () => { setSelectedProperty(undefined); setMatchType(undefined); + setReduceValue(false); setPropertyTypeErrorMessage(""); setMatchTypeErrorMessage(""); setThesaurusValue(""); @@ -228,6 +227,7 @@ const MatchRulesetModal: React.FC = (props) => { setIsUriTouched(false); setIsFunctionTouched(false); setIsNamespaceTouched(false); + setReduceValue(false); }; const onSubmit = (event) => { @@ -248,21 +248,18 @@ const MatchRulesetModal: React.FC = (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) => { 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) => { 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) => { 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) => { ); + const onToggleReduce = (checked) => { + if (checked) { + setReduceValue(true); + } else { + setReduceValue(false); + } + }; + return ( = (props) => { id="matching-single-ruleset" onSubmit={onSubmit} > + + Reduce Weight + + {/*tooltip content yet to be finalized*/} + + + +