[full-ci] Reposition OcNotifications in web-runtime

changelog/unreleased/enhancement-reposition-notifications

@@ -0,0 +1,7 @@
+Enhancement: Reposition notifications
+
+We've repositioned the notifications to no longer block the searchbar - they are now in the bottom right corner, above the (possibly visible) upload information.
+It has also been redesigned to better fit the overall design.
+
+https://github.com/owncloud/web/pull/7139
+https://github.com/owncloud/web/issues/7082

changelog/unreleased/enhancement-update-ods

@@ -0,0 +1,13 @@
+Enhancement: Update ODS to v14.0.0-alpha.2
+
+We updated the ownCloud Design System to version 14.0.0-alpha.2. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+
+- Change - Remove OcAlert component: https://github.com/owncloud/owncloud-design-system/pull/2210
+- Change - Remove transition animations: https://github.com/owncloud/owncloud-design-system/pull/2210
+- Change - Revamp animations: https://github.com/owncloud/owncloud-design-system/pull/2210
+- Enhancement - Progress bar indeterminate state: https://github.com/owncloud/owncloud-design-system/pull/2200
+- Enhancement - Redesign notifications: https://github.com/owncloud/owncloud-design-system/pull/2210
+- Bugfix - Remove click event on OcIcon: https://github.com/owncloud/owncloud-design-system/pull/2216
+
+https://github.com/owncloud/web/pull/7139
+https://github.com/owncloud/owncloud-design-system/releases/tag/14.0.0-alpha.2

dev/docker/oc10.web.config.json

@@ -14,6 +14,7 @@
     "search"
   ],
   "options": {
+    "topCenterNotifications": true,
     "disablePreviews": true,
     "displayResourcesLazy": false,
     "sidebar": {

dev/docker/ocis.web.config.json

@@ -9,6 +9,7 @@
     "scope": "openid profile email"
   },
   "options": {
+    "topCenterNotifications": true,
     "disablePreviews": true,
     "displayResourcesLazy": false,
     "sidebar": {

packages/web-app-draw-io/src/App.vue

@@ -1,13 +1,5 @@
 <template>
   <main>
-    <oc-notifications>
-      <oc-notification-message
-        v-if="notificationMessage"
-        :message="notificationMessage"
-        :status="notificationStatus"
-        @close="clearNotificationMessage"
-      />
-    </oc-notifications>
     <div v-if="loading" class="oc-position-center">
       <oc-spinner size="xlarge" />
       <p v-translate class="oc-invisible">Loading media</p>
@@ -43,9 +35,7 @@ export default {
     filePath: '',
     fileExtension: '',
     isReadOnly: null,
-    currentETag: null,
-    notificationMessage: null,
-    notificationStatus: null
+    currentETag: null
   }),
   computed: {
     ...mapGetters(['getToken']),
@@ -97,23 +87,19 @@ export default {
   },
   methods: {
     ...mapActions(['showMessage']),
-    error(error) {
+    errorPopup(error) {
       this.showMessage({
-        title: this.$gettext('The diagram could not be loaded…'),
+        title: this.$gettext('An error occurred'),
         desc: error,
         status: 'danger'
       })
     },
-    errorPopup(error) {
-      this.notificationStatus = 'danger'
-      this.notificationMessage = error
-    },
     successPopup(msg) {
-      this.notificationStatus = 'success'
-      this.notificationMessage = msg
-    },
-    clearNotificationMessage() {
-      this.notificationMessage = null
+      this.showMessage({
+        title: this.$gettext('The diagram was successfully saved'),
+        desc: msg,
+        status: 'success'
+      })
     },
     errorNotification(error) {
       this.$refs.drawIoEditor.contentWindow.postMessage(
@@ -133,7 +119,7 @@ export default {
           this.loading = false
         })
         .catch((error) => {
-          this.error(error)
+          this.errorPopup(error)
         })
     },
     load() {
@@ -150,7 +136,7 @@ export default {
           )
         })
         .catch((error) => {
-          this.error(error)
+          this.errorPopup(error)
         })
     },
     importVisio() {
@@ -191,7 +177,7 @@ export default {
           reader.readAsDataURL(blob)
         })
         .catch((error) => {
-          this.error(error)
+          this.errorPopup(error)
         })
     },
     save(payload, auto = false) {

packages/web-app-text-editor/src/App.vue

@@ -8,14 +8,6 @@
       @closeApp="closeApp"
       @save="save"
     />
-    <oc-notifications>
-      <oc-notification-message
-        v-if="lastError"
-        :message="lastError"
-        status="danger"
-        @close="clearLastError"
-      />
-    </oc-notifications>
     <div class="oc-flex editor-wrapper-height">
       <div :class="showPreview ? 'oc-width-1-2' : 'oc-width-1-1'" class="oc-height-1-1">
         <oc-textarea
@@ -37,14 +29,14 @@
   </main>
 </template>
 <script>
-import AppBar from './AppBar.vue'
-import { useAppDefaults } from 'web-pkg/src/composables'
 import { marked } from 'marked'
 import sanitizeHtml from 'sanitize-html'
 import { useTask } from 'vue-concurrency'
 import { computed, onMounted, onBeforeUnmount, ref, unref } from '@vue/composition-api'
 import { mapActions } from 'vuex'
 import { DavPermission, DavProperty } from 'web-pkg/src/constants'
+import { useAppDefaults } from 'web-pkg/src/composables'
+import AppBar from './AppBar.vue'
 
 export default {
   name: 'TextEditor',
@@ -121,27 +113,25 @@ export default {
           (error) => {
             switch (error.statusCode) {
               case 412:
-                lastError.value =
-                  'This file was updated outside this window. Please refresh the page (all changes will be lost).'
+                this.errorPopup(
+                  this.$gettext(
+                    'This file was updated outside this window. Please refresh the page (all changes will be lost).'
+                  )
+                )
                 break
               case 500:
-                lastError.value = 'Error when contacting the server'
+                this.errorPopup(this.$gettext('Error when contacting the server'))
                 break
               case 401:
-                lastError.value = "You're not authorized to save this file"
+                this.errorPopup(this.$gettext("You're not authorized to save this file"))
                 break
               default:
-                lastError.value = error.message || error
+                this.errorPopup(error.message || error)
             }
           }
         )
     }).restartable()
 
-    const lastError = ref()
-    const clearLastError = () => {
-      lastError.value = null
-    }
-
     const renderedMarkdown = computed(() => {
       return unref(currentContent) && showPreview
         ? sanitizeHtml(marked(unref(currentContent)))
@@ -214,19 +204,25 @@ export default {
       isDirty,
       isReadOnly,
       currentContent,
-      lastError,
       renderedMarkdown,
       config,
 
       // methods
-      clearLastError,
       save,
       handleSKey,
       handleUnload
     }
   },
   methods: {
-    ...mapActions(['createModal', 'hideModal'])
+    ...mapActions(['createModal', 'hideModal', 'showMessage']),
+
+    errorPopup(error) {
+      this.showMessage({
+        title: this.$gettext('An error occurred'),
+        desc: error,
+        status: 'danger'
+      })
+    }
   }
 }
 </script>

packages/web-runtime/package.json

@@ -16,15 +16,15 @@
     "axios": "^0.26.1",
     "cross-fetch": "^3.0.6",
     "easygettext": "https://github.com/owncloud/easygettext/archive/refs/tags/v2.18.1-oc.tar.gz",
-    "filesize": "^8.0.7",
+    "filesize": "^9.0.11",
     "focus-trap": "^6.4.0",
     "focus-trap-vue": "^1.1.1",
     "fuse.js": "^6.5.3",
     "lodash-es": "^4.17.21",
     "luxon": "^2.4.0",
     "marked": "^4.0.12",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^13.2.0-rc.1",
+    "owncloud-design-system": "^14.0.0-alpha.2",
     "owncloud-sdk": "~3.0.0-alpha.14",
     "p-queue": "^6.6.2",
     "popper-max-size-modifier": "^0.2.0",

packages/web-runtime/src/components/MessageBar.vue

@@ -1,18 +1,19 @@
 <template>
-  <oc-notifications>
+  <oc-notifications :position="notificationPosition">
     <oc-notification-message
       v-for="item in $_ocMessages_limited"
       :key="item.id"
       :title="item.title"
       :message="item.desc"
       :status="item.status"
-      class="oc-width-large"
       @close="deleteMessage(item)"
     />
   </oc-notifications>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   props: {
     activeMessages: {
@@ -22,6 +23,13 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['configuration']),
+    notificationPosition() {
+      if (this.configuration.options.topCenterNotifications) {
+        return 'top-center'
+      }
+      return 'default'
+    },
     $_ocMessages_limited() {
       return this.activeMessages ? this.activeMessages.slice(0, 5) : []
     }

packages/web-runtime/src/components/UploadInfo.vue

@@ -548,16 +548,11 @@ export default {
 
 <style lang="scss">
 #upload-info {
-  position: absolute;
-  right: 20px;
   background-color: var(--oc-color-background-secondary);
-  bottom: 20px;
   width: 400px;
   z-index: 4;
 
   @media (max-width: 640px) {
-    left: 0;
-    right: 0;
     margin: 0 auto;
     width: 100%;
     max-width: 500px;

packages/web-runtime/src/layouts/Application.vue

@@ -7,7 +7,6 @@
       <top-bar :applications-list="applicationsList" :active-notifications="activeNotifications" />
     </div>
     <div id="web-content-main" class="oc-px-s oc-pb-s">
-      <message-bar :active-messages="activeMessages" @deleteMessage="deleteMessage" />
       <div class="app-container oc-flex">
         <sidebar-nav v-if="isSidebarVisible" class="app-navigation" :nav-items="sidebarNavItems" />
         <router-view
@@ -18,7 +17,10 @@
         />
       </div>
     </div>
-    <upload-info />
+    <div class="snackbars">
+      <message-bar :active-messages="activeMessages" @deleteMessage="deleteMessage" />
+      <upload-info />
+    </div>
   </div>
 </template>
 
@@ -194,5 +196,19 @@ export default defineComponent({
       }
     }
   }
+
+  .snackbars {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+
+    @media (max-width: 640px) {
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      width: 100%;
+      max-width: 500px;
+    }
+  }
 }
 </style>

packages/web-runtime/src/store/app.js

@@ -9,9 +9,6 @@ const state = {
 }
 
 const actions = {
-  toggleSidebar(context, visible) {
-    context.commit('TOGGLE_SIDEBAR', visible)
-  },
   showMessage({ commit }, message) {
     commit('ENQUEUE_MESSAGE', message)
   },

packages/web-runtime/src/store/config.js

@@ -40,6 +40,9 @@ const state = {
   options: {
     contextHelpers: true,
     defaultExtension: 'files',
+    // ugly hack to still have notifications but don't have
+    // them blocking UI elements in acceptance/E2E tests
+    topCenterNotifications: false,
     disablePreviews: false,
     displayResourcesLazy: true,
     homeFolder: '',

packages/web-runtime/tests/unit/components/MessageBar.spec.js

@@ -1,10 +1,12 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
 import DesignSystem from 'owncloud-design-system'
 import GetText from 'vue-gettext'
 
 import MessageBar from 'web-runtime/src/components/MessageBar.vue'
 
 const localVue = createLocalVue()
+localVue.use(Vuex)
 localVue.use(DesignSystem)
 localVue.use(GetText, {
   translations: 'does-not-matter.json',
@@ -99,6 +101,15 @@ function getShallowWrapper(activeMessages = []) {
     propsData: {
       activeMessages
     },
+    store: new Vuex.Store({
+      getters: {
+        configuration: () => ({
+          options: {
+            topCenterNotifications: false
+          }
+        })
+      }
+    }),
     stubs: {
       'oc-icon': true,
       'oc-notifications': true,