Reduce code duplication in bug reporting, team response and tester response views

[jamesyeap]

As suggested by @gycgabriel, we can reduce the duplication in the code that checks if a user has made any changes to the issue or response while in edit mode.

Context

This feature was introduced in the following PRs:

• Update cancel edit warning behaviour #985
• Add warning dialog box when cancelling edits for team response and tester response #984

This was done to ensure that the when the user leaves edit mode, the cancel edit warning dialog box (that warns the user that some changes made will be discarded) is only shown if he/she has actually made any changes to the issue or response.

Where the code duplication is

The method to detect changes openCancelDialogIfModified is currently declared in 4 separate components (shown below):

CATcher/src/app/shared/issue/title/title.component.ts

Lines 83 to 92 in 660e017

	openCancelDialogIfModified(): void {
	const issueTitleInitialValue = this.issue.title || '';
	if (this.issueTitleForm.get('title').value !== issueTitleInitialValue) {
	// if the title has been edited, request user to confirm the cancellation
	this.openCancelDialog();
	} else {
	// if no changes have been made, simply cancel edit mode without getting confirmation
	this.cancelEditMode();
	}
	}

CATcher/src/app/shared/issue/description/description.component.ts

Lines 121 to 130 in 660e017

	openCancelDialogIfModified(): void {
	const issueDescriptionInitialValue = this.issue.description || '';
	if (this.issueDescriptionForm.get('description').value !== issueDescriptionInitialValue) {
	// if the description has been edited, request user to confirm the cancellation
	this.openCancelDialog();
	} else {
	// if no changes have been made, simply cancel edit mode without getting confirmation
	this.cancelEditMode();
	}
	}

CATcher/src/app/shared/view-issue/team-response/team-response.component.ts

Lines 151 to 161 in 660e017

	openCancelDialogIfModified(): void {
	const issueTeamResponseInitialValue = this.issue.teamResponse || '';
	if (this.responseForm.get('description').value !== issueTeamResponseInitialValue) {
	// if the response has been edited, request user to confirm the cancellation
	this.openCancelDialog();
	} else {
	// if no changes have been made, simply cancel edit mode without getting confirmation
	this.cancelEditMode();
	}
	}

CATcher/src/app/shared/view-issue/tester-response/tester-response.component.ts

Lines 142 to 172 in 660e017

	openCancelDialogIfModified(): void {
	const reasonForDisagreementIsModified = this.issue.testerResponses
	.filter((t: TesterResponse, index: number) => this.isResponseDisagreed(index))
	.map((t: TesterResponse, index: number) => {
	const currentValue = this.getTesterResponseText(index);
	const initialValue = t.reasonForDisagreement || '';
	return currentValue !== initialValue;
	})
	.reduce((a, b) => a || b, false);
	const disagreementIsModified = this.issue.testerResponses
	.map((t: TesterResponse, index: number) => {
	const currentValue = this.isResponseDisagreed(index);
	const initialValue = t.isDisagree();
	return currentValue !== initialValue;
	})
	.reduce((a, b) => a || b, false);
	const isModified = reasonForDisagreementIsModified || disagreementIsModified;
	if (isModified) {
	// if the disagreement decision and/or reason for disagreement of any response has been edited,
	// request user to confirm the cancellation
	this.openCancelDialog();
	} else {
	// if no changes have been made, simply cancel edit mode without getting confirmation
	this.cancelEditMode();
	}
	}

What can be done

There is an opportunity to reduce code duplication, possibly by moving this function into a service.

[RyanCheungJF]

Hi! Could I possibly work on this?

[gycgabriel]

Hello! Yes please go ahead

[cheehongw]

Sorry for all spam above 😓, just realized @RyanCheungJF may still be working on this.

[vigneshsankariyer1234567890]

@cheehongw are you working on this?

[cheehongw]

@vigneshsankariyer1234567890 nope

[vigneshsankariyer1234567890]

Can we close this issue? I see that there is already a PR that has been merged