From c5437d8e0f967fbb4c2caa25033dc136b9464605 Mon Sep 17 00:00:00 2001
From: Glenn Slotte <glennsl@outrunlabs.com>
Date: Tue, 21 Jan 2020 03:42:24 +0100
Subject: [PATCH] Warn when closing window with unsaved changes (#1230)

* add MessageBox component

* use element instead of string as message, since lacking rich text

* refactor: replace Buffers.ofBufferOpt with Option.map

* add actions

* trigger modal from canQuit callback

* model

* behaviour

* view
---
 src/Components/MessageBox.re         | 71 ++++++++++++++++++++
 src/Model/Actions.re                 |  4 ++
 src/Model/Buffers.re                 | 15 ++---
 src/Model/Modal.re                   |  2 +
 src/Model/State.re                   |  2 +
 src/Store/LifecycleStoreConnector.re | 52 +++++++++++----
 src/Store/StoreThread.re             | 13 ++++
 src/UI/Modals.re                     | 98 ++++++++++++++++++++++++++++
 src/UI/Root.re                       | 56 +++++++++-------
 src/bin_editor/Oni2_editor.re        |  2 +-
 10 files changed, 267 insertions(+), 48 deletions(-)
 create mode 100644 src/Components/MessageBox.re
 create mode 100644 src/Model/Modal.re
 create mode 100644 src/UI/Modals.re

diff --git a/src/Components/MessageBox.re b/src/Components/MessageBox.re
new file mode 100644
index 0000000000..a0e6d6d2c9
--- /dev/null
+++ b/src/Components/MessageBox.re
@@ -0,0 +1,71 @@
+open Oni_Core;
+
+open Revery.UI;
+open Revery.UI.Components;
+
+type action('msg) = {
+  label: string,
+  msg: 'msg,
+};
+
+module Styles = {
+  open Style;
+
+  let container = (~theme: Theme.t) => [backgroundColor(theme.background)];
+
+  let message = [
+    padding(20),
+    paddingBottom(30) // I don't know why this is needed, but it is
+  ];
+
+  let actions = [flexDirection(`Row)];
+
+  let buttonOuter = (~isHovered, ~theme: Theme.t) => [
+    isHovered
+      ? backgroundColor(theme.menuSelectionBackground)
+      : backgroundColor(theme.editorBackground),
+    flexGrow(1),
+  ];
+
+  let buttonInner = [padding(10)];
+
+  let buttonText = (~isHovered, ~theme: Theme.t, ~font: UiFont.t) => [
+    fontFamily(font.fontFile),
+    color(theme.foreground),
+    isHovered
+      ? backgroundColor(theme.menuSelectionBackground)
+      : backgroundColor(theme.editorBackground),
+    fontSize(14),
+    alignSelf(`Center),
+  ];
+};
+
+let%component button = (~text, ~onClick, ~theme, ~font, ()) => {
+  let%hook (isHovered, setHovered) = Hooks.state(false);
+
+  <Clickable onClick style={Styles.buttonOuter(~theme, ~isHovered)}>
+    <View
+      onMouseOver={_ => setHovered(_ => true)}
+      onMouseOut={_ => setHovered(_ => false)}
+      style=Styles.buttonInner>
+      <Text style={Styles.buttonText(~isHovered, ~theme, ~font)} text />
+    </View>
+  </Clickable>;
+};
+
+let make = (~children as message, ~theme, ~font, ~actions, ~onAction, ()) =>
+  <View style={Styles.container(~theme)}>
+    <View style=Styles.message> message </View>
+    <View style=Styles.actions>
+      {actions
+       |> List.map(action =>
+            <button
+              text={action.label}
+              onClick={() => onAction(action.msg)}
+              theme
+              font
+            />
+          )
+       |> React.listToElement}
+    </View>
+  </View>;
diff --git a/src/Model/Actions.re b/src/Model/Actions.re
index 58c4c1a874..12abe53cdd 100644
--- a/src/Model/Actions.re
+++ b/src/Model/Actions.re
@@ -126,6 +126,10 @@ type t =
   | Sneak(Sneak.action)
   | PaneTabClicked(Pane.paneType)
   | VimDirectoryChanged(string)
+  | WindowCloseBlocked
+  | WindowCloseDiscardConfirmed
+  | WindowCloseSaveAllConfirmed
+  | WindowCloseCanceled
   // "Internal" effect action, see TitleStoreConnector
   | SetTitle(string)
   | Noop
diff --git a/src/Model/Buffers.re b/src/Model/Buffers.re
index 0675dcbe2b..493fb5a872 100644
--- a/src/Model/Buffers.re
+++ b/src/Model/Buffers.re
@@ -44,24 +44,17 @@ let isModifiedByPath = (buffers: t, filePath: string) => {
   );
 };
 
-let ofBufferOpt = (f, buffer) => {
-  switch (buffer) {
-  | None => None
-  | Some(b) => Some(f(b))
-  };
-};
-
 let applyBufferUpdate = bufferUpdate =>
-  ofBufferOpt(buffer => Buffer.update(buffer, bufferUpdate));
+  Option.map(buffer => Buffer.update(buffer, bufferUpdate));
 
 let setIndentation = indent =>
-  ofBufferOpt(buffer => Buffer.setIndentation(indent, buffer));
+  Option.map(buffer => Buffer.setIndentation(indent, buffer));
 
 let disableSyntaxHighlighting =
-  ofBufferOpt(buffer => Buffer.disableSyntaxHighlighting(buffer));
+  Option.map(buffer => Buffer.disableSyntaxHighlighting(buffer));
 
 let setModified = modified =>
-  ofBufferOpt(buffer => Buffer.setModified(modified, buffer));
+  Option.map(buffer => Buffer.setModified(modified, buffer));
 
 let reduce = (state: t, action: Actions.t) => {
   switch (action) {
diff --git a/src/Model/Modal.re b/src/Model/Modal.re
new file mode 100644
index 0000000000..e24066344f
--- /dev/null
+++ b/src/Model/Modal.re
@@ -0,0 +1,2 @@
+type t =
+  | UnsavedBuffersWarning;
diff --git a/src/Model/State.re b/src/Model/State.re
index 607f027270..3f1e1870ce 100644
--- a/src/Model/State.re
+++ b/src/Model/State.re
@@ -54,6 +54,7 @@ type t = {
   pane: Pane.t,
   searchPane: Feature_Search.model,
   focus: Focus.stack,
+  modal: option(Modal.t),
 };
 
 let create: unit => t =
@@ -102,4 +103,5 @@ let create: unit => t =
     pane: Pane.initial,
     searchPane: Feature_Search.initial,
     focus: Focus.initial,
+    modal: None,
   };
diff --git a/src/Store/LifecycleStoreConnector.re b/src/Store/LifecycleStoreConnector.re
index 13216c9ba2..684d4c54b8 100644
--- a/src/Store/LifecycleStoreConnector.re
+++ b/src/Store/LifecycleStoreConnector.re
@@ -5,19 +5,28 @@
  * - Handling quit cleanup
  */
 
-module Core = Oni_Core;
-module Model = Oni_Model;
+open Oni_Model;
 
 let start = quit => {
   let (stream, dispatch) = Isolinear.Stream.create();
 
-  let quitAllEffect = (state: Model.State.t, force) => {
+  let saveAllAndQuitEffect =
+    Isolinear.Effect.create(~name="lifecycle.saveAllAndQuit", () => {
+      Vim.input("<ESC>") |> (ignore: list(Vim.Cursor.t) => unit);
+      Vim.input("<ESC>") |> (ignore: list(Vim.Cursor.t) => unit);
+      Vim.input(":") |> (ignore: list(Vim.Cursor.t) => unit);
+      Vim.input("x") |> (ignore: list(Vim.Cursor.t) => unit);
+      Vim.input("a") |> (ignore: list(Vim.Cursor.t) => unit);
+      Vim.input("<CR>") |> (ignore: list(Vim.Cursor.t) => unit);
+    });
+
+  let quitAllEffect = (state: State.t, force) => {
     let handlers = state.lifecycle.onQuitFunctions;
 
-    let anyModified = Model.Buffers.anyModified(state.buffers);
+    let anyModified = Buffers.anyModified(state.buffers);
     let canClose = force || !anyModified;
 
-    Isolinear.Effect.create(~name="lifecycle.quit", () =>
+    Isolinear.Effect.create(~name="lifecycle.quitAll", () =>
       if (canClose) {
         List.iter(h => h(), handlers);
         quit(0);
@@ -25,29 +34,48 @@ let start = quit => {
     );
   };
 
-  let quitBufferEffect = (state: Model.State.t, buffer: Vim.Buffer.t, force) => {
+  let quitBufferEffect = (state: State.t, buffer: Vim.Buffer.t, force) => {
     Isolinear.Effect.create(~name="lifecycle.quitBuffer", () => {
-      let editorGroup = Model.Selectors.getActiveEditorGroup(state);
-      switch (Model.Selectors.getActiveEditor(editorGroup)) {
+      let editorGroup = Selectors.getActiveEditorGroup(state);
+      switch (Selectors.getActiveEditor(editorGroup)) {
       | None => ()
       | Some(editor) =>
         let bufferMeta = Vim.BufferMetadata.ofBuffer(buffer);
         if (editor.bufferId == bufferMeta.id) {
           if (force || !bufferMeta.modified) {
-            dispatch(Model.Actions.ViewCloseEditor(editor.editorId));
+            dispatch(Actions.ViewCloseEditor(editor.editorId));
           };
         };
       };
     });
   };
 
-  let updater = (state: Model.State.t, action) => {
+  let updater = (state: State.t, action) => {
     switch (action) {
-    | Model.Actions.QuitBuffer(buffer, force) => (
+    | Actions.QuitBuffer(buffer, force) => (
         state,
         quitBufferEffect(state, buffer, force),
       )
-    | Model.Actions.Quit(force) => (state, quitAllEffect(state, force))
+
+    | Actions.Quit(force) => (state, quitAllEffect(state, force))
+
+    | WindowCloseBlocked => (
+        {...state, modal: Some(UnsavedBuffersWarning)},
+        Isolinear.Effect.none,
+      )
+
+    | WindowCloseDiscardConfirmed => (
+        {...state, modal: None},
+        quitAllEffect(state, true),
+      )
+
+    | WindowCloseSaveAllConfirmed => (
+        {...state, modal: None},
+        saveAllAndQuitEffect,
+      )
+
+    | WindowCloseCanceled => ({...state, modal: None}, Isolinear.Effect.none)
+
     | _ => (state, Isolinear.Effect.none)
     };
   };
diff --git a/src/Store/StoreThread.re b/src/Store/StoreThread.re
index 3438ac015a..cb68a6e6c2 100644
--- a/src/Store/StoreThread.re
+++ b/src/Store/StoreThread.re
@@ -226,6 +226,19 @@ let start =
 
   latestRunEffects := Some(runEffects);
 
+  Option.iter(
+    window =>
+      Revery.Window.setCanQuitCallback(window, () =>
+        if (Model.Buffers.anyModified(latestState^.buffers)) {
+          dispatch(Model.Actions.WindowCloseBlocked);
+          false;
+        } else {
+          true;
+        }
+      ),
+    window,
+  );
+
   let editorEventStream =
     Isolinear.Stream.map(storeStream, ((state, action)) =>
       switch (action) {
diff --git a/src/UI/Modals.re b/src/UI/Modals.re
new file mode 100644
index 0000000000..45ae6ea554
--- /dev/null
+++ b/src/UI/Modals.re
@@ -0,0 +1,98 @@
+open Revery;
+open Revery.UI;
+
+open Oni_Core;
+open Utility;
+open Oni_Model;
+open Oni_Components;
+open Actions;
+
+module Styles = {
+  open Style;
+
+  let overlay = [
+    backgroundColor(Color.hex("#0004")),
+    position(`Absolute),
+    top(0),
+    left(0),
+    right(0),
+    bottom(0),
+    alignItems(`Center),
+    justifyContent(`Center),
+    overflow(`Hidden),
+    flexDirection(`Column),
+    pointerEvents(`Allow),
+  ];
+
+  let text = (~theme: Theme.t, ~font: UiFont.t) => [
+    fontFamily(font.fontFile),
+    color(theme.editorForeground),
+    backgroundColor(theme.editorBackground),
+    fontSize(14),
+  ];
+
+  let files = [padding(10)];
+
+  let file = (~theme: Theme.t, ~font: UiFont.t) => [
+    fontFamily(font.fontFile),
+    color(theme.foreground),
+    backgroundColor(theme.editorBackground),
+    fontSize(14),
+  ];
+};
+
+let unsavedBufferWarning =
+    (~workingDirectory, ~buffers, ~theme, ~uiFont as font, ()) => {
+  let modifiedFiles =
+    buffers
+    |> IntMap.to_seq
+    |> Seq.map(snd)
+    |> Seq.filter(Buffer.isModified)
+    |> Seq.map(Buffer.getFilePath)
+    |> List.of_seq
+    |> OptionEx.values
+    |> List.map(
+         Path.toRelative(~base=Option.value(workingDirectory, ~default="")),
+       );
+
+  <MessageBox
+    actions=MessageBox.[
+      {label: "Discard Changes", msg: WindowCloseDiscardConfirmed},
+      {label: "Cancel", msg: WindowCloseCanceled},
+      {label: "Save All", msg: WindowCloseSaveAllConfirmed},
+    ]
+    onAction={GlobalContext.current().dispatch}
+    theme
+    font>
+    <Text
+      style={Styles.text(~theme, ~font)}
+      text="You have unsaved changes in the following files:"
+    />
+    <View style=Styles.files>
+      {modifiedFiles
+       |> List.map(text => <Text style={Styles.file(~theme, ~font)} text />)
+       |> React.listToElement}
+    </View>
+    <Text
+      style={Styles.text(~theme, ~font)}
+      text="Would you like to to save them before closing?"
+    />
+  </MessageBox>;
+};
+
+let make = (~state: State.t, ()) => {
+  let State.{theme, uiFont, buffers, workspace, _} = state;
+  let workingDirectory =
+    Option.map(ws => ws.Workspace.workingDirectory, workspace);
+
+  switch (state.modal) {
+  | None => React.empty
+  | Some(modal) =>
+    <View style=Styles.overlay>
+      {switch (modal) {
+       | UnsavedBuffersWarning =>
+         <unsavedBufferWarning workingDirectory buffers theme uiFont />
+       }}
+    </View>
+  };
+};
diff --git a/src/UI/Root.re b/src/UI/Root.re
index 5e1c118380..e0627471d3 100644
--- a/src/UI/Root.re
+++ b/src/UI/Root.re
@@ -9,34 +9,42 @@ open Revery.UI;
 open Oni_Model;
 
 module Styles = {
-  let root = (background, foreground) =>
-    Style.[
-      backgroundColor(background),
-      color(foreground),
-      position(`Absolute),
-      top(0),
-      left(0),
-      right(0),
-      bottom(0),
-      justifyContent(`Center),
-      alignItems(`Stretch),
-    ];
-
-  let surface = Style.[flexGrow(1), flexDirection(`Row)];
+  open Style;
+
+  let root = (background, foreground) => [
+    backgroundColor(background),
+    color(foreground),
+    position(`Absolute),
+    top(0),
+    left(0),
+    right(0),
+    bottom(0),
+    justifyContent(`Center),
+    alignItems(`Stretch),
+  ];
+
+  let surface = [flexGrow(1), flexDirection(`Row)];
 
   let workspace = Style.[flexGrow(1), flexDirection(`Column)];
 
-  let statusBar = statusBarHeight =>
-    Style.[
-      backgroundColor(Color.hex("#21252b")),
-      height(statusBarHeight),
-      justifyContent(`Center),
-      alignItems(`Center),
-    ];
+  let statusBar = statusBarHeight => [
+    backgroundColor(Color.hex("#21252b")),
+    height(statusBarHeight),
+    justifyContent(`Center),
+    alignItems(`Center),
+  ];
 };
 
 let make = (~state: State.t, ()) => {
-  let State.{theme, configuration, uiFont, editorFont, sideBar, zenMode, _} = state;
+  let State.{
+        theme,
+        configuration,
+        uiFont as font,
+        editorFont,
+        sideBar,
+        zenMode,
+        _,
+      } = state;
 
   let statusBarVisible =
     Selectors.getActiveConfigurationValue(state, c =>
@@ -98,13 +106,13 @@ let make = (~state: State.t, ()) => {
          switch (quickmenu.variant) {
          | Wildmenu(_) => <WildmenuView theme configuration state=quickmenu />
 
-         | _ =>
-           <QuickmenuView theme configuration state=quickmenu font=uiFont />
+         | _ => <QuickmenuView theme configuration state=quickmenu font />
          }
        }}
       <KeyDisplayerView state />
     </Overlay>
     statusBar
+    <Modals state />
     <Overlay> <SneakView state /> </Overlay>
   </View>;
 };
diff --git a/src/bin_editor/Oni2_editor.re b/src/bin_editor/Oni2_editor.re
index 9c3caa065d..125175966a 100644
--- a/src/bin_editor/Oni2_editor.re
+++ b/src/bin_editor/Oni2_editor.re
@@ -161,7 +161,7 @@ if (cliOptions.syntaxHighlightService) {
     let setVsync = vsync => Window.setVsync(w, vsync);
 
     let quit = code => {
-      App.quit(~code, app);
+      App.quit(~askNicely=false, ~code, app);
     };
 
     Log.debug("Startup: Starting StoreThread");