From 0de8d41f77e9838a3f40215c662cfb5cd281689c Mon Sep 17 00:00:00 2001
From: friebetill <friebetill@gmail.com>
Date: Sat, 4 Feb 2023 09:43:11 +0800
Subject: [PATCH] Add warning modal for irreversible merge options

In a later version this merge options could be make reversible
---
 src/components/differences_view.ts          |  5 ++-
 src/components/modals/risky_action_modal.ts | 38 +++++++++++++++++++++
 src/main.ts                                 | 30 ++++++++++++++--
 3 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/components/modals/risky_action_modal.ts

diff --git a/src/components/differences_view.ts b/src/components/differences_view.ts
index 5f607cf..e0f8941 100644
--- a/src/components/differences_view.ts
+++ b/src/components/differences_view.ts
@@ -116,7 +116,10 @@ export class DifferencesView extends ItemView {
 		container: HTMLDivElement,
 		difference: Difference
 	): void {
-		const triggerRebuild = (): Promise<void> => this.onOpen()
+		const triggerRebuild = async (): Promise<void> => {
+			await this.updateState()
+			this.build()
+		}
 
 		if (this.showMergeOption) {
 			new ActionLine({
diff --git a/src/components/modals/risky_action_modal.ts b/src/components/modals/risky_action_modal.ts
new file mode 100644
index 0000000..f44a818
--- /dev/null
+++ b/src/components/modals/risky_action_modal.ts
@@ -0,0 +1,38 @@
+import { Modal } from 'obsidian'
+
+export class RiskyActionModal extends Modal {
+	constructor(args: { onAccept: (error: Error | null) => void }) {
+		super(app)
+		this.onAccept = args.onAccept
+	}
+
+	private readonly onAccept: (error: Error | null) => void
+
+	onOpen(): void {
+		// Counteract gravity pull by moving box up for balanced composition
+		this.modalEl.addClass('mb-16')
+
+		this.contentEl.createEl('h2', { text: `Do you accept the risk?` })
+		this.contentEl.createEl('p', {
+			text:
+				`The merging options alter the files irreversibly. ` +
+				`Proceed with caution and only if you are aware and ` +
+				`accepting of the associated risks.`,
+		})
+
+		const buttonContainer = this.contentEl.createDiv('button-container')
+		const cancelButton = buttonContainer.createEl('button', {
+			text: 'Cancel',
+			cls: 'mr-8',
+		})
+		cancelButton.addEventListener('click', () => this.close())
+		const deleteButton = buttonContainer.createEl('button', {
+			text: 'Accept Risk',
+			cls: 'button-danger',
+		})
+		deleteButton.addEventListener('click', () => {
+			this.close()
+			this.onAccept(null)
+		})
+	}
+}
diff --git a/src/main.ts b/src/main.ts
index 5a87be5..ff24625 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,12 @@
 import { Plugin, TFile } from 'obsidian'
 
 import { DifferencesView } from './components/differences_view'
+import { RiskyActionModal } from './components/modals/risky_action_modal'
 import { SelectFileModal } from './components/modals/select_file_modal'
 
 export default class FileDiffPlugin extends Plugin {
+	fileDiffMergeWarningKey = 'file-diff-merge-warning'
+
 	onload(): void {
 		this.addCommand({
 			id: 'file-diff',
@@ -38,8 +41,13 @@ export default class FileDiffPlugin extends Plugin {
 			id: 'file-diff-merge',
 			name: 'Compare and merge',
 			editorCallback: async () => {
-				// TODO(tillf): Show warning when the user selects this option
-				//              for the first time
+				// Show warning when this option is selected for the first time
+				if (!localStorage.getItem(this.fileDiffMergeWarningKey)) {
+					this.showRiskyActionModal()
+					if (!localStorage.getItem(this.fileDiffMergeWarningKey)) {
+						return
+					}
+				}
 
 				// Get current active file
 				const activeFile = this.app.workspace.getActiveFile()
@@ -85,4 +93,22 @@ export default class FileDiffPlugin extends Plugin {
 			}).open()
 		})
 	}
+
+	showRiskyActionModal(): Promise<void> {
+		return new Promise((resolve, reject) => {
+			new RiskyActionModal({
+				onAccept: (e: Error | null) => {
+					if (e) {
+						reject(e)
+					} else {
+						localStorage.setItem(
+							this.fileDiffMergeWarningKey,
+							'true'
+						)
+						resolve()
+					}
+				},
+			}).open()
+		})
+	}
 }