replace native dialog with vue modal

apps/studio/src/App.vue

@@ -24,6 +24,7 @@
       multiple
     />
     <data-manager />
+    <confirmation-modal />
   </div>
 </template>
 
@@ -40,13 +41,13 @@ import DataManager from './components/data/DataManager.vue'
 import querystring from 'query-string'
 import NotificationManager from './components/NotificationManager.vue'
 import UpgradeRequiredModal from './components/common/UpgradeRequiredModal.vue'
-
+import ConfirmationModal from '@/components/common/modals/ConfirmationModal.vue'
 
 export default Vue.extend({
   name: 'App',
   components: {
     CoreInterface, ConnectionInterface, Titlebar, AutoUpdater, NotificationManager,
-    StateManager, DataManager, UpgradeRequiredModal
+    StateManager, DataManager, UpgradeRequiredModal, ConfirmationModal
   },
   data() {
     return {

apps/studio/src/assets/styles/app/modals.scss

@@ -37,4 +37,21 @@
     }
   }
 
+  &.confirmation-modal {
+    .v--modal {
+      width: auto !important;
+      min-height: 0px;
+    }
+    .dialog-content {
+      padding: 1.5rem 1.5rem 2rem;
+    }
+    .dialog-c-title {
+      padding-bottom: 1.25rem;
+    }
+    .vue-dialog-buttons {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      padding-bottom: 1.5rem;
+    }
+  }
 }

apps/studio/src/components/common/modals/ConfirmationModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <portal to="modals">
+    <modal
+      class="vue-dialog beekeeper-modal confirmation-modal"
+      :name="name"
+      @before-open="beforeOpen"
+      @before-close="beforeClose"
+    >
+      <div class="dialog-content">
+        <div class="dialog-c-title">
+          {{ title }}
+        </div>
+        {{ message }}
+      </div>
+      <div class="vue-dialog-buttons">
+        <button
+          class="btn btn-flat"
+          type="button"
+          @click.prevent="cancel"
+        >
+          Cancel
+        </button>
+        <button
+          class="btn btn-primary"
+          type="button"
+          @click.prevent="confirm"
+          autofocus
+        >
+          Confirm
+        </button>
+      </div>
+    </modal>
+  </portal>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+const DEFAULT_TITLE = "Are you sure?";
+const DEFAULT_MESSAGE = "This action cannot be undone.";
+
+export default Vue.extend({
+  data() {
+    return {
+      name: Vue.prototype.$confirmModalId,
+      onConfirm: null,
+      onCancel: null,
+      title: "",
+      message: "",
+    };
+  },
+  methods: {
+    beforeOpen(event: any) {
+      this.onConfirm = event.params.onConfirm;
+      this.onCancel = event.params.onCancel;
+      this.title = event.params.title || DEFAULT_TITLE;
+      this.message = event.params.message || DEFAULT_MESSAGE;
+    },
+    confirm() {
+      this.$modal.hide(this.name, { confirmed: true });
+    },
+    cancel() {
+      this.$modal.hide(this.name, { confirmed: false });
+    },
+    beforeClose(event: any) {
+      if (event.params.confirmed) this.onConfirm?.();
+      else this.onCancel?.();
+    },
+  },
+});
+</script>

apps/studio/src/components/sidebar/core/FavoriteList.vue

@@ -196,7 +196,7 @@ import QueryRenameForm from '@/components/common/form/QueryRenameForm.vue'
         this.$root.$emit('favoriteClick', item)
       },
       async remove(favorite) {
-        if (window.confirm("Really delete?")) {
+        if (await this.$confirm("Really delete?")) {
           await this.$store.dispatch('data/queries/remove', favorite)
         }
       },

apps/studio/src/components/tableinfo/TableSchema.vue

@@ -327,7 +327,8 @@ export default Vue.extend({
     },
     async refreshColumns() {
       if(this.hasEdits) {
-        if (!window.confirm("Are you sure? You will lose unsaved changes")) {
+        const confirmed = await this.$confirm("Are you sure? You will lose unsaved changes")
+        if (!confirmed) {
           return
         }
       }

apps/studio/src/plugins/BeekeeperPlugin.ts

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import ContextMenu from '@/components/common/ContextMenu.vue'
 import { IConnection } from "@/common/interfaces/IConnection"
 import path from 'path'
+import { uuidv4 } from "@/lib/uuid"
 
 export interface ContextOption {
   name: string,
@@ -106,5 +107,18 @@ export default {
   install(Vue) {
     Vue.prototype.$app = BeekeeperPlugin
     Vue.prototype.$bks = BeekeeperPlugin
+
+    Vue.prototype.$confirmModalId = uuidv4()
+    Vue.prototype.$confirm = function(title: string, message?: string): Promise<boolean> {
+      return new Promise<boolean>((resolve) => {
+        this.$modal.show(Vue.prototype.$confirmModalId, {
+          title,
+          message,
+          onCancel: () => resolve(false),
+          onConfirm: () => resolve(true),
+        })
+      })
+    }
+
   }
 }

apps/studio/src/shims-plugins.d.ts

@@ -21,10 +21,12 @@ declare module 'vue/types/vue' {
       warning(text: string, opts?: any): Noty
       info(text: string, opts?: any): Noty
     }
+    $confirm: Promise<boolean>
+    $confirmModalId: string
 
     // TODO: figure out how to add these automatically from AppEvent.ts
     registerHandlers(bindings: RootBinding[]): void
     unregisterHandlers(bindings: RootBinding[]): void
     trigger<T>(event: AppEvent, options: T): void
   }
-}
+}

bin/check-for-native-dialog.sh

@@ -0,0 +1,14 @@
+#! /bin/bash
+
+git grep -a "window\.confirm" apps/studio/src
+STATUS=$?
+
+if [[ $STATUS -eq 0 ]]
+then
+  echo "Found native dialogs. Please avoid using the native dialogs."
+  exit 1;
+
+else
+  echo "OK. No native dialogs found."
+  exit 0
+fi