Skip to content

Commit a1339b5

Browse files
AkshayBajajMLMarkLogic Builder
AkshayBajajML
authored and
MarkLogic Builder
committed
DHFPROD-8160: Discard change modal not work consistently in Merging Tile.
1 parent 984f39b commit a1339b5

File tree

14 files changed

+127
-51
lines changed

14 files changed

+127
-51
lines changed

‎marklogic-data-hub-central/ui/e2e/cypress/integration/curation/curate/merging.spec.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,29 @@ describe("Merging", () => {
117117
cy.waitForAsyncRequest();
118118
cy.waitUntil(() => cy.findAllByText("myFavouriteEdited").should("have.length.gt", 0));
119119
cy.findByText("myFavouriteEdited").should("exist");
120+
121+
// To test discard changes works consistently in merge strategy dialog
122+
cy.findByText("myFavouriteEdited").click();
123+
mergeStrategyModal.setStrategyName("myFavouriteEditedAgain");
124+
mergeStrategyModal.cancelButton().click();
125+
cy.waitUntil(() => confirmYesNo.getDiscardText().should("be.visible"));
126+
cy.findByLabelText("DiscardChangesNoButton").click();
127+
128+
mergeStrategyModal.maxValueOtherRadio().click();
129+
mergeStrategyModal.cancelButton().click();
130+
cy.waitUntil(() => confirmYesNo.getDiscardText().should("be.visible"));
131+
cy.findByLabelText("DiscardChangesNoButton").click();
132+
133+
mergeStrategyModal.maxSourcesOtherRadio().click();
134+
cy.findByLabelText("maxSourcesOtherRadio").click();
135+
mergeStrategyModal.cancelButton().click();
136+
cy.waitUntil(() => confirmYesNo.getDiscardText().should("be.visible"));
137+
cy.findByLabelText("DiscardChangesNoButton").click();
138+
139+
mergeStrategyModal.defaultStrategyYes().click();
140+
mergeStrategyModal.cancelButton().click();
141+
confirmYesNo.getDiscardText().should("be.visible");
142+
cy.findByLabelText("DiscardChangesYesButton").click();
120143
});
121144
it("Cancel the strategy deletion ", () => {
122145
mergingStepDetail.getDeleteMergeStrategyButton("myFavouriteEdited").click();
@@ -252,6 +275,18 @@ describe("Merging", () => {
252275
//cy.waitForAsyncRequest();
253276
cy.waitUntil(() => cy.findAllByText("shipRegion").should("have.length.gt", 0));
254277
cy.findByText("shipRegion").should("exist");
278+
279+
// To test discard changes works consistently in merge rule dialog
280+
cy.findByText("shipRegion").click();
281+
mergeRuleModal.maxValueOtherRadio().click();
282+
mergeRuleModal.cancelButton().click();
283+
cy.waitUntil(() => confirmYesNo.getDiscardText().should("be.visible"));
284+
cy.findByLabelText("DiscardChangesNoButton").click();
285+
286+
mergeRuleModal.maxSourcesOtherRadio().click();
287+
mergeRuleModal.cancelButton().click();
288+
cy.waitUntil(() => confirmYesNo.getDiscardText().should("be.visible"));
289+
cy.findByLabelText("DiscardChangesYesButton").click();
255290
});
256291
it("Cancel deletion of merge rule of type property-specific ", () => {
257292
mergingStepDetail.getDeleteMergeRuleButton("shipRegion").click();

‎marklogic-data-hub-central/ui/e2e/cypress/support/components/merging/merge-rule-modal.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,14 @@ class MergeRuleModal {
6969
cy.get("#maxValuesRuleInput").clear().type(value).type("{enter}");
7070
}
7171

72+
maxValueOtherRadio() {
73+
return cy.findByLabelText("maxValuesOtherRadio");
74+
}
75+
76+
maxSourcesOtherRadio() {
77+
return cy.findByLabelText("maxSourcesOtherRadio");
78+
}
79+
7280
ruleMaxScoreInput(value: string) {
7381
cy.get("#maxSourcesRuleInput").clear().type(value).type("{enter}");
7482
}

‎marklogic-data-hub-central/ui/e2e/cypress/support/components/merging/merge-strategy-modal.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,18 @@ class MergeStrategyModal {
2323
strategyMaxScoreInput(value: string) {
2424
cy.get("#maxSourcesStrategyInput").clear().type(value).type("{enter}");
2525
}
26+
27+
maxValueOtherRadio() {
28+
return cy.findByLabelText("maxValuesOtherRadio");
29+
}
30+
31+
maxSourcesOtherRadio() {
32+
return cy.findByLabelText("maxSourcesOtherRadio");
33+
}
34+
35+
defaultStrategyYes() {
36+
return cy.findByLabelText("defaultStrategyYes");
37+
}
2638
}
2739

2840
const mergeStrategyModal = new MergeStrategyModal();

‎marklogic-data-hub-central/ui/src/components/common/confirm-yes-no/confirm-yes-no.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ const ConfirmYesNo: React.FC<Props> = (props) => {
2929
<div>
3030
<div className={styles.buttonNo}>
3131
<MLButton aria-label={props.labelNo ? props.labelNo : "No"} onClick={props.onNo}>
32-
{props.labelNo ? props.labelNo : "No"}
32+
{props.labelNo ? (props.labelNo === "DiscardChangesNoButton" ? "No" : props.labelNo) : "No"}
3333
</MLButton>
3434
</div>
3535
<div className={styles.buttonYes}>
3636
<MLButton aria-label={props.labelYes ? props.labelYes : "Yes"} type="primary" htmlType="submit" onClick={props.onYes}>
37-
{props.labelYes ? props.labelYes : "Yes"}
37+
{props.labelYes ? (props.labelYes === "DiscardChangesYesButton" ? "Yes" : props.labelYes) : "Yes"}
3838
</MLButton>
3939
</div>
4040
</div>

‎marklogic-data-hub-central/ui/src/components/entities/matching/matching-step-detail/matching-step-detail.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -641,19 +641,19 @@ const MatchingStepDetail: React.FC = () => {
641641
};
642642

643643
const renderRulesetTimeline = () => {
644-
return <div data-testid={"active-ruleset-timeline"}><TimelineVis items={rulesetItems} options={rulesetOptions} clickHandler={onRuleSetTimelineItemClicked} /></div>;
644+
return <div data-testid={"active-ruleset-timeline"}><TimelineVis items={rulesetItems} options={rulesetOptions} clickHandler={onRuleSetTimelineItemClicked} borderMargin="0px"/></div>;
645645
};
646646

647647
const renderDefaultRulesetTimeline = () => {
648-
return <div data-testid={"default-ruleset-timeline"}><TimelineVisDefault items={rulesetItems} options={rulesetOptions} /></div>;
648+
return <div data-testid={"default-ruleset-timeline"}><TimelineVisDefault items={rulesetItems} options={rulesetOptions} borderMargin="0px"/></div>;
649649
};
650650

651651
const renderDefaultThresholdTimeline = () => {
652-
return <div data-testid={"default-threshold-timeline"}><TimelineVisDefault items={thresholdItems} options={thresholdOptions} /></div>;
652+
return <div data-testid={"default-threshold-timeline"}><TimelineVisDefault items={thresholdItems} options={thresholdOptions} borderMargin="0px"/></div>;
653653
};
654654

655655
const renderThresholdTimeline = () => {
656-
return <div data-testid={"active-threshold-timeline"}><TimelineVis items={thresholdItems} options={thresholdOptions} clickHandler={onThresholdTimelineItemClicked} /></div>;
656+
return <div data-testid={"active-threshold-timeline"}><TimelineVis items={thresholdItems} options={thresholdOptions} clickHandler={onThresholdTimelineItemClicked} borderMargin="0px"/></div>;
657657
};
658658

659659
const updateThresholdItems = async (id, newvalue) => {

‎marklogic-data-hub-central/ui/src/components/entities/matching/matching-step-detail/timeline-vis-default/timeline-vis-default.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from "react";
22
import Timeline from "react-visjs-timeline";
33
import "../../matching-step-detail/timeline-vis/timeline-vis.scss";
4-
import styles from "../../matching-step-detail/timeline-vis/timeline-vis.module.scss";
54

65
interface Props {
76
items: any;
87
options: any;
8+
borderMargin: string;
99
}
1010
const TimelineVisDefault: React.FC<Props> = (props) => {
1111

1212
return (
13-
<div className={styles.timelineContainer}>
13+
<div style={{paddingTop: "10px", paddingLeft: props.borderMargin, paddingRight: props.borderMargin}}>
1414
<Timeline items={props.items} options={props.options}></Timeline>
1515
</div>
1616
);

‎marklogic-data-hub-central/ui/src/components/entities/matching/matching-step-detail/timeline-vis/timeline-vis.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React from "react";
22
import Timeline from "react-visjs-timeline";
33
import "./timeline-vis.scss";
4-
import styles from "./timeline-vis.module.scss";
54

65
interface Props {
76
items: any;
87
options: any;
98
clickHandler: (event: any) => void;
9+
borderMargin: string;
1010
}
1111
const TimelineVis: React.FC<Props> = (props) => {
1212

1313
return (
14-
<div className={styles.timelineContainer}>
14+
<div style={{paddingTop: "10px", paddingLeft: props.borderMargin, paddingRight: props.borderMargin}}>
1515
<Timeline items={props.items} options={props.options} clickHandler={props.clickHandler}></Timeline>
1616
</div>
1717
);

‎marklogic-data-hub-central/ui/src/components/entities/merging/add-merge-rule/merge-rule-dialog.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {CurationContext} from "../../../../util/curation-context";
66
import {customerMergingStep} from "../../../../assets/mock-data/curation/curation-context-mock";
77
import {updateMergingArtifact} from "../../../../api/merging";
88
import userEvent from "@testing-library/user-event";
9-
import {MergeRuleTooltips, multiSliderTooltips} from "../../../../config/tooltips.config";
9+
import {MergeRuleTooltips} from "../../../../config/tooltips.config";
1010

1111

1212
jest.mock("../../../../api/merging");
@@ -115,7 +115,7 @@ describe("Merge Rule Dialog component", () => {
115115

116116
//Verify priority Order slider tooltip
117117
userEvent.hover(getAllByLabelText("icon: question-circle")[3]);
118-
expect((await(waitForElement(() => getByText(multiSliderTooltips.priorityOrder))))).toBeInTheDocument();
118+
expect((await(waitForElement(() => getByLabelText("priorityOrderTooltip"))))).toBeInTheDocument();
119119

120120
//Default Timeline is visible by default
121121
expect(queryByTestId("default-priorityOrder-timeline")).toBeInTheDocument();

‎marklogic-data-hub-central/ui/src/components/entities/merging/add-merge-rule/merge-rule-dialog.tsx‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
7474
const [priorityOptions, setPriorityOptions] = useState<any>();
7575
const [deletePriorityName, setDeletePriorityName] = useState("");
7676
const [deleteModalVisibility, toggleDeleteModalVisibility] = useState(false);
77+
const [priorityOrderTouched, setPriorityOrderTouched] = useState(false);
7778

7879
const titleLegend = <div className={styles.titleLegend}>
7980
<div data-testid="multipleIconLegend" className={styles.legendText}><img className={styles.arrayImage} src={arrayIcon} alt={""}/> Multiple</div>
@@ -166,12 +167,7 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
166167

167168
const updateMergeRuleItems = async(id, newValue, priorityOrderOptions:any[]) => {
168169
if (id.split(":")[0] !== "Timestamp") {
169-
let editPriorityName;
170-
if (id.split(":")[1] === "Length") {
171-
editPriorityName = "Length";
172-
} else {
173-
editPriorityName = id.split(":")[0];
174-
}
170+
let editPriorityName = id.split(":")[1];
175171
for (let priorityOption of priorityOrderOptions) {
176172
let value = priorityOption.value;
177173
let priorityName;
@@ -189,11 +185,11 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
189185
};
190186

191187
const renderPriorityOrderTimeline = () => {
192-
return <div data-testid={"active-priorityOrder-timeline"}><TimelineVis items={priorityOrderOptions} options={strategyOptions} clickHandler={onPriorityOrderTimelineItemClicked} /></div>;
188+
return <div data-testid={"active-priorityOrder-timeline"}><TimelineVis items={priorityOrderOptions} options={strategyOptions} clickHandler={onPriorityOrderTimelineItemClicked} borderMargin="14px"/></div>;
193189
};
194190

195191
const renderDefaultPriorityOrderTimeline = () => {
196-
return <div data-testid={"default-priorityOrder-timeline"}><TimelineVisDefault items={priorityOrderOptions} options={strategyOptions} /></div>;
192+
return <div data-testid={"default-priorityOrder-timeline"}><TimelineVisDefault items={priorityOrderOptions} options={strategyOptions} borderMargin="14px"/></div>;
197193
};
198194

199195
const timelineOrder = (a, b) => {
@@ -234,6 +230,7 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
234230
onMove: function(item, callback) {
235231
if (item.value.split(":")[0] !== "Timestamp") {
236232
if (item.start >= 0 && item.start <= 100) {
233+
setPriorityOrderTouched(true);
237234
item.value= getStrategyName(item);
238235
callback(item);
239236
updateMergeRuleItems(item.id, item.start.getMilliseconds().toString(), priorityOrderOptions);
@@ -305,6 +302,7 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
305302
};
306303

307304
const confirmAction = () => {
305+
setPriorityOrderTouched(true);
308306
setPriorityOrderOptions(handleDeleteSliderOptions(priorityOptions, priorityOrderOptions));
309307
toggleDeleteModalVisibility(false);
310308
};
@@ -350,6 +348,7 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
350348
setNamespaceTouched(false);
351349
setMaxValueRuleInputTouched(false);
352350
setMaxSourcesRuleInputTouched(false);
351+
setPriorityOrderTouched(false);
353352
};
354353

355354
const onCancel = () => {
@@ -380,7 +379,7 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
380379
}
381380
} else if (mergeType === "Property-specific") {
382381
let checkPropertySpecificValues = hasPropertySpecificFormValuesChanged();
383-
if (!propertyTouched && !mergeTypeTouched && !checkPropertySpecificValues) {
382+
if (!propertyTouched && !mergeTypeTouched && !checkPropertySpecificValues && !priorityOrderTouched) {
384383
return false;
385384
} else {
386385
return true;
@@ -415,8 +414,8 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
415414

416415
const hasPropertySpecificFormValuesChanged = () => {
417416
if (!dropdownOptionTouched
418-
&& (!maxSourcesRuleInputTouched || maxSourcesRuleInput.length === 0)
419-
&& !maxValueRuleInputTouched || maxValueRuleInput.length === 0
417+
&& !maxSourcesRuleInputTouched
418+
&& !maxValueRuleInputTouched
420419
) {
421420
return false;
422421
} else {
@@ -501,14 +500,12 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
501500
if (event.target.value === " ") {
502501
setStrategyValueTouched(false);
503502
} else {
504-
setStrategyValueTouched(true);
505503
setStrategyValue(event.target.value);
506504
}
507505
} else if (event.target.id === "maxValuesRuleInput") {
508506
if (event.target.value === " ") {
509507
setMaxValueRuleInputTouched(false);
510508
} else {
511-
setMaxValueRuleInputTouched(true);
512509
setMaxValueRuleInput(event.target.value);
513510
setRadioValuesOptionClicked(2);
514511
}
@@ -521,11 +518,13 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
521518
setRadioSourcesOptionClicked(2);
522519
}
523520
} else if (event.target.name === "maxValues") {
521+
setMaxValueRuleInputTouched(true);
524522
setRadioValuesOptionClicked(event.target.value);
525523
if (event.target.value === 1) {
526524
setMaxValueRuleInput("");
527525
}
528526
} else if (event.target.name === "maxSources") {
527+
setMaxSourcesRuleInputTouched(true);
529528
setRadioSourcesOptionClicked(event.target.value);
530529
if (event.target.value === 1) {
531530
setMaxSourcesRuleInput("");
@@ -602,6 +601,11 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
602601
};
603602

604603
const onAddOptions = () => {
604+
priorityOrderOptions.map((option) => {
605+
if (option.id.split(":")[0] === "Length" && dropdownOption === "Length") {
606+
setPriorityOrderTouched(false);
607+
} else setPriorityOrderTouched(true);
608+
});
605609
setPriorityOrderOptions(addSliderOptions(priorityOrderOptions, dropdownOption));
606610
};
607611

@@ -645,13 +649,15 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
645649
type="discardChanges"
646650
onYes={discardOk}
647651
onNo={discardCancel}
652+
labelNo="DiscardChangesNoButton"
653+
labelYes="DiscardChangesYesButton"
648654
/>;
649655

650656
return (
651657
<Modal
652658
visible={props.createEditMergeRuleDialog}
653659
title={props.isEditRule ? "Edit Merge Rule" : "Add Merge Rule"}
654-
width={700}
660+
width={1000}
655661
onCancel={() => onCancel()}
656662
onOk={() => onOk()}
657663
okText="Save"
@@ -809,8 +815,8 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
809815
labelAlign="left"
810816
>
811817
<Radio.Group value={radioValuesOptionClicked} onChange={handleChange} name="maxValues">
812-
<Radio value={1} > All</Radio>
813-
<Radio value={2} ><Input id="maxValuesRuleInput" value={maxValueRuleInput} placeholder={"Enter max values"} onChange={handleChange} onClick={handleChange} className={styles.maxInput} ></Input></Radio>
818+
<Radio value={1} aria-label="maxValuesAllRadio" > All</Radio>
819+
<Radio value={2} aria-label="maxValuesOtherRadio"><Input id="maxValuesRuleInput" value={maxValueRuleInput} placeholder={"Enter max values"} onChange={handleChange} onClick={handleChange} className={styles.maxInput} ></Input></Radio>
814820
</Radio.Group>
815821
<MLTooltip title={MergeRuleTooltips.maxValues}>
816822
<Icon type="question-circle" className={styles.questionCircle} theme="filled" />
@@ -822,8 +828,8 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
822828
labelAlign="left"
823829
>
824830
<Radio.Group value={radioSourcesOptionClicked} onChange={handleChange} name="maxSources">
825-
<Radio value={1} > All</Radio>
826-
<Radio value={2} ><Input id="maxSourcesRuleInput" value={maxSourcesRuleInput} onChange={handleChange} placeholder={"Enter max sources"} onClick={handleChange} className={styles.maxInput}></Input></Radio>
831+
<Radio value={1} aria-label="maxSourcesAllRadio"> All</Radio>
832+
<Radio value={2} aria-label="maxSourcesOtherRadio"><Input id="maxSourcesRuleInput" value={maxSourcesRuleInput} onChange={handleChange} placeholder={"Enter max sources"} onClick={handleChange} className={styles.maxInput}></Input></Radio>
827833
</Radio.Group>
828834
<MLTooltip title={MergeRuleTooltips.maxSources}>
829835
<Icon type="question-circle" className={styles.questionCircle} theme="filled" />

‎marklogic-data-hub-central/ui/src/components/entities/merging/merge-strategy-dialog/merge-strategy-dialog.test.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {customerMergingStep} from "../../../../assets/mock-data/curation/curatio
66
import MergeStrategyDialog from "./merge-strategy-dialog";
77
import {updateMergingArtifact} from "../../../../api/merging";
88
import userEvent from "@testing-library/user-event";
9-
import {multiSliderTooltips} from "../../../../config/tooltips.config";
109

1110
jest.mock("../../../../api/merging");
1211
const mockMergingUpdate = updateMergingArtifact as jest.Mock;
@@ -44,7 +43,7 @@ describe("Merge Strategy Dialog component", () => {
4443

4544
//Verify priority option slider tooltip
4645
userEvent.hover(getAllByLabelText("icon: question-circle")[2]);
47-
expect((await(waitForElement(() => getByText(multiSliderTooltips.priorityOrder))))).toBeInTheDocument();
46+
expect((await(waitForElement(() => getByLabelText("priorityOrderTooltip"))))).toBeInTheDocument();
4847

4948
//Default Timeline is visible by default
5049
expect(queryByTestId("default-priorityOrder-timeline")).toBeInTheDocument();

0 commit comments

Comments
 (0)