Add cancel button to unsaved changes dialog (#11644)

* Add cancel button to unsaved changes dialog

* Add changelog item

changelog/unreleased/enhancement-add-cancel-button-to-unsaved-changes-dialog

@@ -0,0 +1,6 @@
+Enhancement: Add cancel button to unsaved changes dialog
+
+We've added a cancel button to the unsaved changes dialog to allow users to cancel the action.
+
+https://github.com/owncloud/web/pull/11644
+https://github.com/owncloud/web/issues/11636

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -90,6 +90,7 @@ import { DavPermission } from '@ownclouders/web-client/webdav'
 import { HttpError } from '@ownclouders/web-client'
 import { dirname } from 'path'
 import { useFileActionsOpenWithApp } from '../../composables/actions/files/useFileActionsOpenWithApp'
+import { UnsavedChangesModal } from '../Modals'
 
 export default defineComponent({
   name: 'AppWrapper',
@@ -544,15 +545,17 @@ export default defineComponent({
     onBeforeRouteLeave((_to, _from, next) => {
       if (unref(isDirty)) {
         dispatchModal({
-          variation: 'danger',
-          icon: 'warning',
+          icon: 'error-warning',
           title: $gettext('Unsaved changes'),
-          message: $gettext('Your changes were not saved. Do you want to save them?'),
-          cancelText: $gettext("Don't Save"),
-          confirmText: $gettext('Save'),
+          customComponent: UnsavedChangesModal,
           focusTrapInitial: '.oc-modal-body-actions-confirm',
-          onCancel() {
-            next()
+          hideActions: true,
+          customComponentAttrs: () => {
+            return {
+              closeCallback: async () => {
+                next()
+              }
+            }
           },
           async onConfirm() {
             await save()

packages/web-pkg/src/components/Modals/UnsavedChangesModal.vue

@@ -0,0 +1,57 @@
+<template>
+  <span
+    class="oc-display-inline-block oc-mb-m"
+    v-text="$gettext('Your changes were not saved. Do you want to save them?')"
+  />
+  <div class="oc-my-m"></div>
+  <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
+    <div class="oc-modal-body-actions-grid">
+      <oc-button
+        class="oc-modal-body-actions-cancel oc-ml-s"
+        appearance="outline"
+        variation="passive"
+        @click="$emit('cancel')"
+        >{{ $gettext('Cancel') }}
+      </oc-button>
+      <oc-button
+        class="oc-modal-body-actions-secondary oc-ml-s"
+        appearance="outline"
+        variation="passive"
+        @click="onClose"
+      >
+        {{ $gettext("Don't Save") }}
+      </oc-button>
+      <oc-button
+        class="oc-modal-body-actions-confirm oc-ml-s"
+        appearance="filled"
+        variation="primary"
+        @click="$emit('confirm')"
+        >{{ $gettext('Save') }}
+      </oc-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { Modal, useModals } from '../../composables'
+
+export default defineComponent({
+  name: 'UnsavedChangesModal',
+  props: {
+    modal: { type: Object as PropType<Modal>, required: true },
+    closeCallback: { type: Function as PropType<() => void>, required: true }
+  },
+  setup(props) {
+    const { removeModal } = useModals()
+    const onClose = () => {
+      removeModal(props.modal.id)
+      props.closeCallback()
+    }
+
+    return {
+      onClose
+    }
+  }
+})
+</script>

packages/web-pkg/src/components/Modals/index.ts

@@ -3,3 +3,4 @@ export { default as SpaceMoveInfoModal } from './SpaceMoveInfoModal.vue'
 export { default as EmojiPickerModal } from './EmojiPickerModal.vue'
 export { default as FilePickerModal } from './FilePickerModal.vue'
 export { default as SaveAsModal } from './SaveAsModal.vue'
+export { default as UnsavedChangesModal } from './UnsavedChangesModal.vue'

packages/web-runtime/src/components/Topbar/TopBar.vue

@@ -10,12 +10,7 @@
         :menu-items="appMenuExtensions"
       />
       <router-link v-if="!hideLogo" :to="homeLink" class="oc-width-1-1 oc-logo-href">
-        <oc-img
-          v-oc-tooltip="$gettext('Back to home')"
-          :src="currentTheme.logo.topbar"
-          :alt="sidebarLogoAlt"
-          class="oc-logo-image"
-        />
+        <oc-img :src="currentTheme.logo.topbar" :alt="sidebarLogoAlt" class="oc-logo-image" />
       </router-link>
     </div>
     <div v-if="!contentOnLeftPortal" class="oc-topbar-center">