From e419320209ff3bb55c8b9a928fcf5393dbfc9d8e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 6 Aug 2021 15:46:45 +0200
Subject: [PATCH 01/58] Add details sidebar for multiple selection

---
 ...enhancement-add-multiple-selection-sidebar |   7 ++
 .../SideBar/Details/FileDetailsMultiple.vue   | 115 ++++++++++++++++++
 packages/web-app-files/src/index.js           |  77 +++++++++---
 .../Details/FileDetailsMultiple.spec.js       |  93 ++++++++++++++
 4 files changed, 274 insertions(+), 18 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-multiple-selection-sidebar
 create mode 100644 packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
 create mode 100644 packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js

diff --git a/changelog/unreleased/enhancement-add-multiple-selection-sidebar b/changelog/unreleased/enhancement-add-multiple-selection-sidebar
new file mode 100644
index 00000000000..49b7f609108
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-multiple-selection-sidebar
@@ -0,0 +1,7 @@
+Enhancement: Add multiple selection Sidebar
+
+We've changed the sidebar so if a user selects multiple files or folders
+he sees a detailed view of his selection in the sidebar.
+
+https://github.com/owncloud/web/issues/5164
+https://github.com/owncloud/web/pull/5630
\ No newline at end of file
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
new file mode 100644
index 00000000000..9eb28f344a6
--- /dev/null
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="oc-file-details-sidebar">
+    <div class="files-preview">
+      <div class="files-preview__body">
+        <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
+        <span class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
+      </div>
+    </div>
+    <div>
+      <table class="details-table" aria-label="detailsTableLabel">
+        <tr data-testid="filesCount">
+          <th scope="col" class="oc-pr-s" v-text="filesText" />
+          <td v-text="filesCount" />
+        </tr>
+        <tr data-testid="foldersCount">
+          <th scope="col" class="oc-pr-s" v-text="foldersText" />
+          <td v-text="foldersCount" />
+        </tr>
+        <tr data-testid="size">
+          <th scope="col" class="oc-pr-s" v-text="sizeText" />
+          <td v-text="selectedFilesSize" />
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import Mixins from '../../../mixins'
+import MixinResources from '../../../mixins/resources'
+import MixinRoutes from '../../../mixins/routes'
+import { mapGetters } from 'vuex'
+
+export default {
+  mixins: [Mixins, MixinResources, MixinRoutes],
+  title: $gettext => {
+    return $gettext('Details')
+  },
+  computed: {
+    ...mapGetters('Files', ['selectedFiles']),
+    selectedFilesCount() {
+      return this.selectedFiles.length
+    },
+    selectedFilesString() {
+      return this.$gettextInterpolate(
+        this.$ngettext(
+          '%{ itemCount } item selected',
+          '%{ itemCount } items selected',
+          this.selectedFilesCount
+        ),
+        {
+          itemCount: this.selectedFilesCount
+        }
+      )
+    },
+    selectedFilesSize() {
+      let size = 0
+      this.selectedFiles.forEach(i => (size += parseInt(i.size)))
+      return this.getResourceSize(size)
+    },
+    sizeText() {
+      return this.$gettext('Size')
+    },
+    filesCount() {
+      return this.selectedFiles.filter(i => i.type === 'file').length
+    },
+    filesText() {
+      return this.$gettext('Files')
+    },
+    foldersCount() {
+      return this.selectedFiles.filter(i => i.type === 'folder').length
+    },
+    foldersText() {
+      return this.$gettext('Folders')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.files-preview {
+  position: relative;
+  background-color: var(--oc-color-background-muted);
+  border: 10px solid var(--oc-color-background-muted);
+  height: 230px;
+  text-align: center;
+  color: var(--oc-color-swatch-passive-muted);
+
+  &__body {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    .preview-icon {
+      display: inline-block;
+    }
+    .preview-text {
+      display: block;
+    }
+  }
+}
+.details-table {
+  padding-top: 20px;
+  text-align: left;
+
+  tr {
+    height: 1.5rem;
+  }
+
+  th {
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index ce609fa99f7..0e24ec32aee 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -11,6 +11,7 @@ import FilesDrop from './views/FilesDrop.vue'
 import LocationPicker from './views/LocationPicker.vue'
 import PublicFiles from './views/PublicFiles.vue'
 import FileDetails from './components/SideBar/Details/FileDetails.vue'
+import FileDetailsMultiple from './components/SideBar/Details/FileDetailsMultiple.vue'
 import FileActions from './components/SideBar/Actions/FileActions.vue'
 import FileVersions from './components/SideBar/Versions/FileVersions.vue'
 import FileShares from './components/SideBar/Shares/FileShares.vue'
@@ -19,6 +20,10 @@ import FileLinks from './components/SideBar/Links/FileLinks.vue'
 import translationsJson from '../l10n/translations.json'
 import quickActionsImport from './quickActions'
 import store from './store'
+import { isTrashbinRoute } from './helpers/route'
+import { FilterSearch, SDKSearch } from './search'
+import { bus } from 'web-pkg/src/instance'
+import { Registry } from './services'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -32,52 +37,79 @@ const appInfo = {
   isFileEditor: false,
   extensions: [],
   fileSideBars: [
-    {
+    // We don't have file details in the trashbin, yet.
+    // Only allow `actions` panel on trashbin route for now.
+    ({ route, multipleSelection }) => ({
       app: 'details-item',
       icon: 'info_outline',
       component: FileDetails,
-      enabled() {
-        return true
+      default: !isTrashbinRoute(route),
+      get enabled() {
+        return !isTrashbinRoute(route) && !multipleSelection
       }
-    },
-    {
+    }),
+    ({ route, multipleSelection }) => ({
+      app: 'details-item',
+      icon: 'info_outline',
+      component: FileDetailsMultiple,
+      default: !isTrashbinRoute(route),
+      get enabled() {
+        return !isTrashbinRoute(route) && multipleSelection
+      }
+    }),
+    ({ route, multipleSelection }) => ({
       app: 'actions-item',
       component: FileActions,
       icon: 'slideshow',
-      enabled() {
-        return true
+      default: isTrashbinRoute(route),
+      get enabled() {
+        return !multipleSelection
       }
-    },
-    {
+    }),
+    ({ capabilities, route, multipleSelection }) => ({
       app: 'sharing-item',
       icon: 'group',
       component: FileShares,
-      enabled(capabilities) {
+      get enabled() {
+        if (multipleSelection) return false
+        if (isTrashbinRoute(route)) {
+          return false
+        }
+
         if (capabilities.files_sharing) {
           return capabilities.files_sharing.api_enabled
         }
         return false
       }
-    },
-    {
+    }),
+    ({ capabilities, route, multipleSelection }) => ({
       app: 'links-item',
       icon: 'link',
       component: FileLinks,
-      enabled(capabilities) {
+      get enabled() {
+        if (multipleSelection) return false
+        if (isTrashbinRoute(route)) {
+          return false
+        }
+
         if (capabilities.files_sharing) {
           return capabilities.files_sharing.public.enabled
         }
         return false
       }
-    },
-    {
+    }),
+    ({ capabilities, highlightedFile, route, multipleSelection }) => ({
       app: 'versions-item',
       icon: 'file_version',
       component: FileVersions,
-      enabled(capabilities, highlightedFile) {
+      get enabled() {
+        if (multipleSelection) return false
+        if (isTrashbinRoute(route)) {
+          return false
+        }
         return !!capabilities.core && highlightedFile && highlightedFile.type !== 'folder'
       }
-    }
+    })
   ]
 }
 const navItems = [
@@ -286,5 +318,14 @@ export default {
   routes,
   navItems,
   quickActions,
-  translations
+  translations,
+  mounted({ router: runtimeRouter, store: runtimeStore }) {
+    Registry.filterSearch = new FilterSearch(runtimeStore, runtimeRouter)
+    Registry.sdkSearch = new SDKSearch(runtimeStore, runtimeRouter)
+
+    // when discussing the boot process of applications we need to implement a
+    // registry that does not rely on call order, aka first register "on" and only after emit.
+    bus.emit('app.search.register.provider', Registry.filterSearch)
+    bus.emit('app.search.register.provider', Registry.sdkSearch)
+  }
 }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js
new file mode 100644
index 00000000000..e284d18c8ee
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js
@@ -0,0 +1,93 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import FileDetailsMultiple from 'packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue'
+import stubs from '../../../../../../../tests/unit/stubs'
+import GetTextPlugin from 'vue-gettext'
+import AsyncComputed from 'vue-async-computed'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(AsyncComputed)
+localVue.use(GetTextPlugin, {
+  translations: 'does-not-matter.json',
+  silent: true
+})
+
+const selectors = {
+  selectedFilesText: '[data-testid="selectedFilesText"]',
+  filesCount: '[data-testid="filesCount"]',
+  foldersCount: '[data-testid="foldersCount"]',
+  size: '[data-testid="size"]'
+}
+
+const folderA = {
+  type: 'folder',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const folderB = {
+  type: 'folder',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const fileA = {
+  type: 'file',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const fileB = {
+  type: 'file',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+
+describe('Details Multiple Selection SideBar Item', () => {
+  it('should display information for two selected folders', () => {
+    const wrapper = createWrapper([folderA, folderB])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 0')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 2')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+  it('should display information for two selected files', () => {
+    const wrapper = createWrapper([fileA, fileB])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 2')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 0')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+  it('should display information for one selected file, one selected folder', () => {
+    const wrapper = createWrapper([fileA, folderA])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 1')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 1')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+})
+
+function createWrapper(testResource) {
+  return shallowMount(FileDetailsMultiple, {
+    store: new Vuex.Store({
+      modules: {
+        Files: {
+          namespaced: true,
+          getters: {
+            selectedFiles: function() {
+              return testResource
+            }
+          }
+        }
+      }
+    }),
+    localVue,
+    stubs: stubs
+  })
+}

From d938d953e259314cc98cb8b333546f46f8a0d6c2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 6 Aug 2021 16:32:39 +0200
Subject: [PATCH 02/58] fixed merge issues

---
 .../src/components/SideBar/SideBar.vue              | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 345ed543b8e..e4c7e530ed2 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="highlightedFile"
+    v-if="showSidebar"
     v-click-outside="onClickOutside"
     :class="{
       'has-active': !!appSidebarActivePanel
@@ -91,7 +91,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('Files', ['highlightedFile']),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles']),
     ...mapGetters(['fileSideBars', 'capabilities']),
     ...mapState('Files', ['appSidebarActivePanel']),
     activePanel() {
@@ -103,7 +103,8 @@ export default {
           const panel = panelGenerator({
             capabilities: this.capabilities,
             highlightedFile: this.highlightedFile,
-            route: this.$route
+            route: this.$route,
+            multipleSelection: this.areMultipleSelected
           })
 
           if (panel.enabled) {
@@ -142,6 +143,12 @@ export default {
       }
 
       return null
+    },
+    areMultipleSelected() {
+      return this.selectedFiles.length > 1
+    },
+    showSidebar() {
+      return this.selectedFiles.length > 0
     }
   },
   watch: {

From c4bfb7443820cd7f575237eb7e47ad653d47a60c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 11:09:23 +0200
Subject: [PATCH 03/58] fixed highlightedFile issue for now, udpated package
 version to RC

---
 packages/web-app-files/src/App.vue                        | 1 -
 packages/web-app-files/src/components/SideBar/SideBar.vue | 7 +++++++
 packages/web-app-files/src/store/getters.js               | 4 ++--
 packages/web-runtime/package.json                         | 2 +-
 yarn.lock                                                 | 8 ++++----
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index e810c7194e7..cc1e6632deb 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -12,7 +12,6 @@
       <router-view id="files-view" />
     </div>
     <side-bar
-      v-if="_sidebarOpen"
       id="files-sidebar"
       ref="filesSidebar"
       tabindex="-1"
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index e4c7e530ed2..aaf421f2c66 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -148,6 +148,7 @@ export default {
       return this.selectedFiles.length > 1
     },
     showSidebar() {
+      console.log(this.selectedFiles.length)
       return this.selectedFiles.length > 0
     }
   },
@@ -159,6 +160,12 @@ export default {
         })
       },
       immediate: true
+    },
+    selectedFiles: {
+      handler: function(old, now) {
+        console.log("selectedFiles")
+      },
+      immediate: true
     }
   },
   beforeDestroy() {
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index a70d3d08080..f5546592e2c 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -80,8 +80,8 @@ export default {
     return state.quota
   },
   highlightedFile: (state, getters) => {
-    if (state.highlightedResourceId) {
-      return getters.filesAll.find(r => r.id === state.highlightedResourceId)
+    if (state.selected.length > 0) {
+      return state.selected[0]
     }
     return null
   },
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index f421fd5a388..d260e4df789 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^8.3.1",
+    "owncloud-design-system": "^9.0.0-rc4",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",
diff --git a/yarn.lock b/yarn.lock
index d4b43abdc50..4a743f5f2a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^8.3.1:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-8.3.1.tgz#995f36291ec7efd07ef2413a4c43580486b91b98"
-  integrity sha512-kOCqBbeaTEzVfROltuRCFvAzTonkQE6uMkeL8CActzIVvsEGqCfHz8tcbM5MOVlxMWh78m/Dn/v0wrdlk3uWEA==
+owncloud-design-system@^9.0.0-rc4:
+  version "9.0.0-rc4"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0-rc4.tgz#cb83442bcc27caa7da6b2f2d3034681461dc071f"
+  integrity sha512-lQObmTTtFSBlzenDkhtbDS1J8ufZSxvGHRdbBo1uxNFbJgHwRLeNteX60I5fBbBUvsDbcE37JLsH/Nzhi0IgfQ==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"

From 488072b5498c598e44ec5e57d3debe379d782440 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 11:13:49 +0200
Subject: [PATCH 04/58] hide size if no size is to display

---
 .../src/components/SideBar/Details/FileDetailsMultiple.vue   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 9eb28f344a6..9a3ffd84b1c 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -16,7 +16,7 @@
           <th scope="col" class="oc-pr-s" v-text="foldersText" />
           <td v-text="foldersCount" />
         </tr>
-        <tr data-testid="size">
+        <tr v-if="showSize" data-testid="size">
           <th scope="col" class="oc-pr-s" v-text="sizeText" />
           <td v-text="selectedFilesSize" />
         </tr>
@@ -57,6 +57,9 @@ export default {
       this.selectedFiles.forEach(i => (size += parseInt(i.size)))
       return this.getResourceSize(size)
     },
+    showSize() {
+      return this.getResourceSize(this.selectedFiles[0].size) !== '?'
+    },
     sizeText() {
       return this.$gettext('Size')
     },

From 6b64efc400a7d00799c7d44ef4bbefe8c63be70c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 11:19:44 +0200
Subject: [PATCH 05/58] fixed linting

---
 packages/web-app-files/src/components/SideBar/SideBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index aaf421f2c66..85d6ceb4e80 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -163,7 +163,7 @@ export default {
     },
     selectedFiles: {
       handler: function(old, now) {
-        console.log("selectedFiles")
+        console.log('selectedFiles')
       },
       immediate: true
     }

From 9de2462b035527814ba7f712366173221419face Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 12:39:02 +0200
Subject: [PATCH 06/58] addressed merge request issues

---
 packages/web-app-files/src/App.vue                        | 5 -----
 packages/web-app-files/src/components/SideBar/SideBar.vue | 7 -------
 packages/web-app-files/src/mixins.js                      | 4 ----
 packages/web-app-files/src/store/getters.js               | 6 +-----
 packages/web-app-files/src/views/Favorites.vue            | 1 -
 packages/web-app-files/src/views/Personal.vue             | 1 -
 packages/web-app-files/src/views/PublicFiles.vue          | 1 -
 packages/web-app-files/src/views/SharedViaLink.vue        | 1 -
 packages/web-app-files/src/views/SharedWithMe.vue         | 1 -
 packages/web-app-files/src/views/SharedWithOthers.vue     | 1 -
 packages/web-app-files/src/views/Trashbin.vue             | 1 -
 packages/web-runtime/package.json                         | 2 +-
 yarn.lock                                                 | 8 ++++----
 13 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index cc1e6632deb..1623e01c941 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -4,7 +4,6 @@
       ref="filesListWrapper"
       tabindex="-1"
       class="files-list-wrapper uk-width-expand"
-      :class="{ 'uk-visible@m': _sidebarOpen }"
       @dragover="$_ocApp_dragOver"
     >
       <app-bar id="files-app-bar" />
@@ -53,10 +52,6 @@ export default {
   computed: {
     ...mapGetters('Files', ['dropzone', 'highlightedFile', 'inProgress']),
 
-    _sidebarOpen() {
-      return this.highlightedFile !== null
-    },
-
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
     }
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 85d6ceb4e80..e4c7e530ed2 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -148,7 +148,6 @@ export default {
       return this.selectedFiles.length > 1
     },
     showSidebar() {
-      console.log(this.selectedFiles.length)
       return this.selectedFiles.length > 0
     }
   },
@@ -160,12 +159,6 @@ export default {
         })
       },
       immediate: true
-    },
-    selectedFiles: {
-      handler: function(old, now) {
-        console.log('selectedFiles')
-      },
-      immediate: true
     }
   },
   beforeDestroy() {
diff --git a/packages/web-app-files/src/mixins.js b/packages/web-app-files/src/mixins.js
index 5fa6801b44a..5529d4706e7 100644
--- a/packages/web-app-files/src/mixins.js
+++ b/packages/web-app-files/src/mixins.js
@@ -22,10 +22,6 @@ export default {
   computed: {
     ...mapGetters('Files', ['files', 'highlightedFile', 'publicLinkPassword', 'currentFolder']),
     ...mapGetters(['getToken', 'capabilities', 'configuration']),
-
-    _sidebarOpen() {
-      return this.highlightedFile !== null
-    }
   },
   methods: {
     ...mapActions('Files', [
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index f5546592e2c..0a7ddc3d9a0 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -5,11 +5,7 @@ export default {
     return state.inProgress
   },
   selectedFiles: state => {
-    if (state.selected.length === 0) {
-      return []
-    } else {
-      return state.selected
-    }
+    return state.selected
   },
   files: state => {
     return state.files
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index d12fd688d09..b4c048ab4ff 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -17,7 +17,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index be4d7340e04..2d2ee0ec50b 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -25,7 +25,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 9f1a6c4b9ac..0a9d812b8df 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -25,7 +25,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index cc945942db0..e797b90fdbe 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -21,7 +21,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index 15f3a1f2b02..e2801843730 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -23,7 +23,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index 8a737c1de0a..25d23bef8e5 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -23,7 +23,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index d969500ef99..5cad8610e33 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -21,7 +21,6 @@
         :are-paths-displayed="true"
         :are-thumbnails-displayed="false"
         :resources="activeFiles"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :are-resources-clickable="false"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index d260e4df789..b7d297c3975 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^9.0.0-rc4",
+    "owncloud-design-system": "^9.0.0-rc5",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",
diff --git a/yarn.lock b/yarn.lock
index 4a743f5f2a9..b512025602c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^9.0.0-rc4:
-  version "9.0.0-rc4"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0-rc4.tgz#cb83442bcc27caa7da6b2f2d3034681461dc071f"
-  integrity sha512-lQObmTTtFSBlzenDkhtbDS1J8ufZSxvGHRdbBo1uxNFbJgHwRLeNteX60I5fBbBUvsDbcE37JLsH/Nzhi0IgfQ==
+owncloud-design-system@^9.0.0-rc5:
+  version "9.0.0-rc5"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0-rc5.tgz#79635f6014f1b6386be330c399d9b4bb8bdef4ef"
+  integrity sha512-egvn37+l0ADz5UBtq27B+8UIlYtEExoLNuK/xv0lhuCLVmjV2BWKWa6d+tp+CcEbIktHKl0QTnF3wrK8t3cNNg==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"

From b1a545ad230adbb787f0c7027d3b2f12e04a6fda Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 13:20:18 +0200
Subject: [PATCH 07/58] fixed linting

---
 packages/web-app-files/src/mixins.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/mixins.js b/packages/web-app-files/src/mixins.js
index 5529d4706e7..7fe9a56ce0f 100644
--- a/packages/web-app-files/src/mixins.js
+++ b/packages/web-app-files/src/mixins.js
@@ -21,7 +21,7 @@ export default {
   }),
   computed: {
     ...mapGetters('Files', ['files', 'highlightedFile', 'publicLinkPassword', 'currentFolder']),
-    ...mapGetters(['getToken', 'capabilities', 'configuration']),
+    ...mapGetters(['getToken', 'capabilities', 'configuration'])
   },
   methods: {
     ...mapActions('Files', [

From 35d6ff634738aa76e025c90cfa3c6397d1573877 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 13:34:08 +0200
Subject: [PATCH 08/58] removed old test

---
 packages/web-app-files/tests/unit/views/Favorites.spec.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index e9723bc23f6..51480ca5d6f 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -125,11 +125,6 @@ describe('Favorites component', () => {
           'files-table-squashed'
         )
       })
-      it('sets the "highlighted" attribute with the correct file id', () => {
-        expect(wrapper.find(selectors.favoritesTable).attributes('highlighted')).toEqual(
-          'file-id-234'
-        )
-      })
     })
     describe('previews', () => {
       it('displays previews when the "disablePreviews" config is disabled', () => {

From a824f19001b672c3eab7f265be648068ecd3330f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 16:34:08 +0200
Subject: [PATCH 09/58] make sidebar closable

---
 packages/web-app-files/src/App.vue                    | 10 +---------
 .../web-app-files/src/components/SideBar/SideBar.vue  | 11 ++++++++---
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 1623e01c941..047ed4ee755 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -15,7 +15,6 @@
       ref="filesSidebar"
       tabindex="-1"
       class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl"
-      @reset="$_destroySideBar_hideDetails"
       @beforeDestroy="focusSideBar"
       @mounted="focusSideBar"
       @fileChanged="focusSideBar"
@@ -50,7 +49,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('Files', ['dropzone', 'highlightedFile', 'inProgress']),
+    ...mapGetters('Files', ['dropzone', 'inProgress']),
 
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
@@ -58,14 +57,7 @@ export default {
   },
   watch: {
     $route() {
-      this.$_destroySideBar_hideDetails()
       this.resetFileSelection()
-    },
-    highlightedFile(file) {
-      if (file !== null) {
-        return
-      }
-      this.$_destroySideBar_hideDetails()
     }
   },
   created() {
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index e4c7e530ed2..41363cbf248 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -87,7 +87,8 @@ export default {
   data() {
     return {
       focused: undefined,
-      oldPanel: null
+      oldPanel: null,
+      sidebarClosed: false
     }
   },
   computed: {
@@ -148,7 +149,11 @@ export default {
       return this.selectedFiles.length > 1
     },
     showSidebar() {
-      return this.selectedFiles.length > 0
+      const show = this.selectedFiles.length > 0 && !this.sidebarClosed;
+      if(this.sidebarClosed) {
+        this.sidebarClosed = false;
+      }
+      return show;
     }
   },
   watch: {
@@ -203,7 +208,7 @@ export default {
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
     close() {
-      this.$emit('reset')
+      this.sidebarClosed = true;
     },
     onClickOutside(event) {
       /*

From ba3c3d49f8fe241aac73934f0bc90b2fc4cd8d66 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 17:00:54 +0200
Subject: [PATCH 10/58] fixed showSidebar

---
 .../src/components/SideBar/SideBar.vue           | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 41363cbf248..e923cdc78a3 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -149,11 +149,7 @@ export default {
       return this.selectedFiles.length > 1
     },
     showSidebar() {
-      const show = this.selectedFiles.length > 0 && !this.sidebarClosed;
-      if(this.sidebarClosed) {
-        this.sidebarClosed = false;
-      }
-      return show;
+      return this.selectedFiles.length > 0 && !this.sidebarClosed
     }
   },
   watch: {
@@ -164,6 +160,14 @@ export default {
         })
       },
       immediate: true
+    },
+    selectedFiles: {
+      handler: function(old, selected) {
+        if (selected.length !== old.length) {
+          this.sidebarClosed = false
+        }
+      },
+      immediate: true
     }
   },
   beforeDestroy() {
@@ -208,7 +212,7 @@ export default {
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
     close() {
-      this.sidebarClosed = true;
+      this.sidebarClosed = true
     },
     onClickOutside(event) {
       /*

From 810628d45ecb0118e8b72b08b0bdfd1254c4bd84 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 10 Aug 2021 11:38:19 +0200
Subject: [PATCH 11/58] removed file-info for multiple select

---
 .../src/components/SideBar/SideBar.vue              | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index e923cdc78a3..c9342a41151 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -16,7 +16,8 @@
       :class="{
         'is-active':
           appSidebarActivePanel === panelMeta.app || (!appSidebarActivePanel && panelMeta.default),
-        'sidebar-panel--default': panelMeta.default
+        'sidebar-panel--default': panelMeta.default,
+        'sidebar-panel--multiple-selected': areMultipleSelected
       }"
     >
       <div class="sidebar-panel__header header">
@@ -44,7 +45,11 @@
           <oc-icon name="close" />
         </oc-button>
       </div>
-      <file-info class="sidebar-panel__file_info" :is-content-displayed="isContentDisplayed" />
+      <file-info
+        v-if="!areMultipleSelected"
+        class="sidebar-panel__file_info"
+        :is-content-displayed="isContentDisplayed"
+      />
       <div class="sidebar-panel__body">
         <template v-if="isContentDisplayed">
           <component
@@ -276,6 +281,10 @@ export default {
     transition-duration: 0.001ms !important;
   }
 
+  &--multiple-selected {
+    grid-template-rows: 50px 1fr;
+  }
+
   &--default {
     #files-sidebar.has-active & {
       transform: translateX(-30%);

From f32627c58a53dfa40328ee3e33ddeb17286c4099 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 10 Aug 2021 16:31:13 +0200
Subject: [PATCH 12/58] fixed visibility observer, moved sidebar toggle logic
 to parent component

---
 packages/web-app-files/src/App.vue            | 43 ++++++++--
 .../SideBar/Details/FileDetailsMultiple.vue   |  7 +-
 .../src/components/SideBar/SideBar.vue        | 85 ++++++++-----------
 .../src/mixins/sidebar/destroySideBar.js      | 15 ----
 packages/web-runtime/package.json             |  2 +-
 5 files changed, 80 insertions(+), 72 deletions(-)
 delete mode 100644 packages/web-app-files/src/mixins/sidebar/destroySideBar.js

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 047ed4ee755..84f9de1db93 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -11,6 +11,7 @@
       <router-view id="files-view" />
     </div>
     <side-bar
+      v-if="showSidebar"
       id="files-sidebar"
       ref="filesSidebar"
       tabindex="-1"
@@ -24,7 +25,6 @@
 <script>
 import Mixins from './mixins'
 import MixinRoutes from './mixins/routes'
-import MixinDestroySideBar from './mixins/sidebar/destroySideBar'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import AppBar from './components/AppBar/AppBar.vue'
 import ProgressBar from './components/Upload/ProgressBar.vue'
@@ -36,7 +36,7 @@ export default {
     ProgressBar,
     SideBar
   },
-  mixins: [Mixins, MixinRoutes, MixinDestroySideBar],
+  mixins: [Mixins, MixinRoutes],
   data() {
     return {
       createFolder: false,
@@ -45,25 +45,51 @@ export default {
       upload: false,
       fileName: '',
       selected: [],
-      breadcrumbs: []
+      breadcrumbs: [],
+      sidebarClosed: false
     }
   },
   computed: {
-    ...mapGetters('Files', ['dropzone', 'inProgress']),
+    ...mapGetters('Files', ['dropzone', 'inProgress', 'selectedFiles']),
 
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
+    },
+    areMultipleSelected() {
+      return this.selectedFiles && this.selectedFiles.length > 1
+    },
+    showSidebar() {
+      return this.selectedFiles && this.selectedFiles.length > 0 && !this.sidebarClosed
     }
   },
   watch: {
     $route() {
       this.resetFileSelection()
+    },
+    showSidebar: {
+      handler: function(value) {
+        if (value) return
+        this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
+      },
+      immediate: false
+    },
+    selectedFiles: {
+      handler: function(old, selected) {
+        if (!selected) return
+        if (selected.length !== old.length) {
+          this.sidebarClosed = false
+        }
+      },
+      immediate: true
     }
   },
   created() {
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
+    this.$root.$on('toggle-sidebar', () => {
+      this.close()
+    })
   },
 
   beforeDestroy() {
@@ -73,12 +99,19 @@ export default {
   methods: {
     ...mapActions('Files', ['dragOver', 'resetFileSelection']),
     ...mapActions(['showMessage']),
-    ...mapMutations(['SET_SIDEBAR_FOOTER_CONTENT_COMPONENT']),
+    ...mapMutations('Files', [
+      'SET_SIDEBAR_FOOTER_CONTENT_COMPONENT',
+      'SET_APP_SIDEBAR_ACTIVE_PANEL'
+    ]),
 
     trace() {
       console.info('trace', arguments)
     },
 
+    close() {
+      this.sidebarClosed = true
+    },
+
     focusSideBar(component, event) {
       this.focus({
         from: document.activeElement,
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 9a3ffd84b1c..451fa594b88 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-file-details-sidebar">
+  <div id="oc-file-details-multiple-sidebar">
     <div class="files-preview">
       <div class="files-preview__body">
         <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
@@ -7,7 +7,7 @@
       </div>
     </div>
     <div>
-      <table class="details-table" aria-label="detailsTableLabel">
+      <table class="details-table" :aria-label="detailsTableLabel">
         <tr data-testid="filesCount">
           <th scope="col" class="oc-pr-s" v-text="filesText" />
           <td v-text="filesCount" />
@@ -74,6 +74,9 @@ export default {
     },
     foldersText() {
       return this.$gettext('Folders')
+    },
+    detailsTableLabel() {
+      return this.$gettext('Overview of the information about the selected files')
     }
   }
 }
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index c9342a41151..3f03835acc7 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="showSidebar"
     v-click-outside="onClickOutside"
     :class="{
       'has-active': !!appSidebarActivePanel
@@ -92,8 +91,7 @@ export default {
   data() {
     return {
       focused: undefined,
-      oldPanel: null,
-      sidebarClosed: false
+      oldPanel: null
     }
   },
   computed: {
@@ -151,10 +149,7 @@ export default {
       return null
     },
     areMultipleSelected() {
-      return this.selectedFiles.length > 1
-    },
-    showSidebar() {
-      return this.selectedFiles.length > 0 && !this.sidebarClosed
+      return this.selectedFiles && this.selectedFiles.length > 1
     }
   },
   watch: {
@@ -165,14 +160,6 @@ export default {
         })
       },
       immediate: true
-    },
-    selectedFiles: {
-      handler: function(old, selected) {
-        if (selected.length !== old.length) {
-          this.sidebarClosed = false
-        }
-      },
-      immediate: true
     }
   },
   beforeDestroy() {
@@ -180,44 +167,44 @@ export default {
     hiddenObserver.disconnect()
   },
   mounted() {
-    visibilityObserver = new VisibilityObserver({
-      root: document.querySelector('#files-sidebar'),
-      threshold: 0.9
-    })
-    hiddenObserver = new VisibilityObserver({
-      root: document.querySelector('#files-sidebar'),
-      threshold: 0.05
-    })
-
-    const doFocus = () => {
-      const selector = document.querySelector(this.focused)
-
-      if (!selector) {
-        return
-      }
-
-      selector.focus()
-    }
-
-    const clearOldPanel = () => {
-      this.oldPanel = null
-    }
-
-    this.$refs.panels.forEach(panel => {
-      visibilityObserver.observe(panel, {
-        onEnter: doFocus,
-        onExit: doFocus
-      })
-      hiddenObserver.observe(panel, {
-        onExit: clearOldPanel
-      })
-    })
+    this.initVisibilityObserver()
   },
-
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
+
     close() {
-      this.sidebarClosed = true
+      this.$root.$emit('toggle-sidebar')
+    },
+    initVisibilityObserver() {
+      visibilityObserver = new VisibilityObserver({
+        root: document.querySelector('#files-sidebar'),
+        threshold: 0.9
+      })
+      hiddenObserver = new VisibilityObserver({
+        root: document.querySelector('#files-sidebar'),
+        threshold: 0.05
+      })
+      const doFocus = () => {
+        const selector = document.querySelector(this.focused)
+        if (!selector) {
+          return
+        }
+        selector.focus()
+      }
+
+      const clearOldPanel = () => {
+        this.oldPanel = null
+      }
+
+      this.$refs.panels.forEach(panel => {
+        visibilityObserver.observe(panel, {
+          onEnter: doFocus,
+          onExit: doFocus
+        })
+        hiddenObserver.observe(panel, {
+          onExit: clearOldPanel
+        })
+      })
     },
     onClickOutside(event) {
       /*
diff --git a/packages/web-app-files/src/mixins/sidebar/destroySideBar.js b/packages/web-app-files/src/mixins/sidebar/destroySideBar.js
deleted file mode 100644
index 9eddf4b17aa..00000000000
--- a/packages/web-app-files/src/mixins/sidebar/destroySideBar.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mapActions, mapGetters, mapMutations } from 'vuex'
-
-export default {
-  computed: mapGetters('Files', ['highlightedFile']),
-  methods: {
-    ...mapActions('Files', ['setHighlightedFile']),
-    ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    $_destroySideBar_hideDetails() {
-      if (this.highlightedFile !== null) {
-        this.setHighlightedFile(null)
-      }
-      this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
-    }
-  }
-}
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index b7d297c3975..ca875ca5ed7 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^9.0.0-rc5",
+    "owncloud-design-system": "^9.0.0",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",

From 28a2cb6385f13632fbc741dd7c966a5e5aa4b58b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 11 Aug 2021 09:39:30 +0200
Subject: [PATCH 13/58] update yarn.lock

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b512025602c..7d59146530f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^9.0.0-rc5:
-  version "9.0.0-rc5"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0-rc5.tgz#79635f6014f1b6386be330c399d9b4bb8bdef4ef"
-  integrity sha512-egvn37+l0ADz5UBtq27B+8UIlYtEExoLNuK/xv0lhuCLVmjV2BWKWa6d+tp+CcEbIktHKl0QTnF3wrK8t3cNNg==
+owncloud-design-system@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0.tgz#da445da6b9f8f01d8adceb197249e3150f09bf0f"
+  integrity sha512-7dg16L7Ind6kES+9LlXlAWI5hl7zsTTpcqpbjBEe0Zi5B3NwGwjr6fiqRoH7oHZGj3sGaL/G9PuYVxfflBjTtw==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"

From fcce1e21abd1e6aa3bed11c80f11a49ace496845 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 15:17:22 +0200
Subject: [PATCH 14/58] Fix sidebar in trashbin for multi selection

---
 packages/web-app-files/src/App.vue            | 28 ++++++-------------
 .../SideBar/Details/FileDetails.vue           |  4 +--
 .../SideBar/Details/FileDetailsMultiple.vue   | 11 ++++----
 packages/web-app-files/src/index.js           |  6 ++--
 4 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 84f9de1db93..795a2e29b80 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -55,9 +55,6 @@ export default {
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
     },
-    areMultipleSelected() {
-      return this.selectedFiles && this.selectedFiles.length > 1
-    },
     showSidebar() {
       return this.selectedFiles && this.selectedFiles.length > 0 && !this.sidebarClosed
     }
@@ -66,21 +63,14 @@ export default {
     $route() {
       this.resetFileSelection()
     },
-    showSidebar: {
-      handler: function(value) {
-        if (value) return
-        this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
-      },
-      immediate: false
+    showSidebar(visible) {
+      if (visible) return
+      this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     },
-    selectedFiles: {
-      handler: function(old, selected) {
-        if (!selected) return
-        if (selected.length !== old.length) {
-          this.sidebarClosed = false
-        }
-      },
-      immediate: true
+    selectedFiles(selected, oldSelected) {
+      if (selected.length !== oldSelected.length) {
+        this.sidebarClosed = false
+      }
     }
   },
   created() {
@@ -88,7 +78,7 @@ export default {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
     this.$root.$on('toggle-sidebar', () => {
-      this.close()
+      this.closeSidebar()
     })
   },
 
@@ -108,7 +98,7 @@ export default {
       console.info('trace', arguments)
     },
 
-    close() {
+    closeSidebar() {
       this.sidebarClosed = true
     },
 
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 901318f4e74..db5855d0f44 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -6,7 +6,7 @@
         :style="{
           'background-image': $asyncComputed.preview.updating ? 'none' : `url(${preview})`
         }"
-        class="details-preview uk-flex uk-flex-middle uk-flex-center oc-mb-m"
+        class="details-preview uk-flex uk-flex-middle uk-flex-center oc-mb"
         data-testid="preview"
       >
         <oc-spinner v-if="$asyncComputed.preview.updating" />
@@ -34,7 +34,7 @@
         </oc-button>
         <p class="oc-my-rm oc-mx-s" v-text="detailSharingInformation" />
       </div>
-      <table class="details-table" aria-label="detailsTableLabel">
+      <table class="details-table" :aria-label="detailsTableLabel">
         <tr v-if="hasTimestamp" data-testid="timestamp">
           <th scope="col" class="oc-pr-s" v-text="timestampTitle" />
           <td>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 451fa594b88..b0f29cf47cd 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="oc-file-details-multiple-sidebar">
-    <div class="files-preview">
-      <div class="files-preview__body">
+    <div class="files-preview oc-mb">
+      <div class="files-preview-body">
         <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
         <span class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
       </div>
@@ -18,7 +18,7 @@
         </tr>
         <tr v-if="showSize" data-testid="size">
           <th scope="col" class="oc-pr-s" v-text="sizeText" />
-          <td v-text="selectedFilesSize" />
+          <td v-text="sizeValue" />
         </tr>
       </table>
     </div>
@@ -52,7 +52,7 @@ export default {
         }
       )
     },
-    selectedFilesSize() {
+    sizeValue() {
       let size = 0
       this.selectedFiles.forEach(i => (size += parseInt(i.size)))
       return this.getResourceSize(size)
@@ -90,7 +90,7 @@ export default {
   text-align: center;
   color: var(--oc-color-swatch-passive-muted);
 
-  &__body {
+  &-body {
     margin: 0;
     position: absolute;
     top: 50%;
@@ -107,7 +107,6 @@ export default {
   }
 }
 .details-table {
-  padding-top: 20px;
   text-align: left;
 
   tr {
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index 0e24ec32aee..6b21c150586 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -48,13 +48,13 @@ const appInfo = {
         return !isTrashbinRoute(route) && !multipleSelection
       }
     }),
-    ({ route, multipleSelection }) => ({
+    ({ multipleSelection }) => ({
       app: 'details-item',
       icon: 'info_outline',
       component: FileDetailsMultiple,
-      default: !isTrashbinRoute(route),
+      default: () => true,
       get enabled() {
-        return !isTrashbinRoute(route) && multipleSelection
+        return multipleSelection
       }
     }),
     ({ route, multipleSelection }) => ({

From 96a03f135c3160997ca1f314455ee64ecc7d56e7 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 15:49:05 +0200
Subject: [PATCH 15/58] Modify selection model on quick action click

---
 .../web-app-files/src/components/FilesList/QuickActions.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/QuickActions.vue b/packages/web-app-files/src/components/FilesList/QuickActions.vue
index a4ef6e33871..93f57eef6b3 100644
--- a/packages/web-app-files/src/components/FilesList/QuickActions.vue
+++ b/packages/web-app-files/src/components/FilesList/QuickActions.vue
@@ -8,7 +8,7 @@
       appearance="raw"
       class="oc-mr-xs"
       :class="`files-quick-action-${action.id}`"
-      @click.stop="action.handler({ item, client: $client, store: $store })"
+      @click="action.handler({ item, client: $client, store: $store })"
     >
       <oc-icon :name="action.icon" class="uk-flex" />
     </oc-button>

From 3cf03bb77e30bad40525a9868cc624531a04bcd2 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 16:59:29 +0200
Subject: [PATCH 16/58] Remove setHighlightedFile from the store

---
 packages/web-app-files/src/App.vue            | 12 ++---
 .../src/components/AppBar/AppBar.vue          |  6 +--
 .../AppBar/SelectedResources/BatchActions.vue |  3 +-
 .../SideBar/Details/FileDetails.vue           |  2 +-
 .../src/components/SideBar/SideBar.vue        |  3 +-
 .../src/helpers/statusIndicators.js           |  3 +-
 .../src/mixins/actions/restore.js             |  9 +---
 .../src/mixins/actions/showActions.js         |  6 +--
 .../src/mixins/actions/showDetails.js         |  6 +--
 .../src/mixins/deleteResources.js             | 18 ++------
 .../src/mixins/sidebar/mountSideBar.js        |  8 ++--
 packages/web-app-files/src/quickActions.js    | 44 +++++++++----------
 packages/web-app-files/src/store/actions.js   |  6 +--
 packages/web-app-files/src/store/getters.js   |  4 +-
 packages/web-app-files/src/store/mutations.js | 30 +++++--------
 packages/web-app-files/src/store/state.js     |  1 -
 .../web-app-files/src/views/Favorites.vue     |  2 +-
 packages/web-app-files/src/views/Personal.vue |  5 ++-
 .../web-app-files/src/views/PublicFiles.vue   |  2 +-
 .../web-app-files/src/views/SharedViaLink.vue |  2 +-
 .../web-app-files/src/views/SharedWithMe.vue  |  2 +-
 .../src/views/SharedWithOthers.vue            |  2 +-
 packages/web-app-files/src/views/Trashbin.vue |  2 +-
 23 files changed, 74 insertions(+), 104 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 795a2e29b80..f056a9cdec4 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -29,6 +29,7 @@ import { mapActions, mapGetters, mapMutations } from 'vuex'
 import AppBar from './components/AppBar/AppBar.vue'
 import ProgressBar from './components/Upload/ProgressBar.vue'
 import SideBar from './components/SideBar/SideBar.vue'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   components: {
@@ -77,8 +78,11 @@ export default {
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
-    this.$root.$on('toggle-sidebar', () => {
-      this.closeSidebar()
+    bus.on('app.files.sidebar.close', () => {
+      this.sidebarClosed = true
+    })
+    bus.on('app.files.sidebar.show', () => {
+      this.sidebarClosed = false
     })
   },
 
@@ -98,10 +102,6 @@ export default {
       console.info('trace', arguments)
     },
 
-    closeSidebar() {
-      this.sidebarClosed = true
-    },
-
     focusSideBar(component, event) {
       this.focus({
         from: document.activeElement,
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index eed17714793..9902d89a10e 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -288,7 +288,7 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['updateFileProgress', 'removeFilesFromTrashbin', 'loadIndicators']),
+    ...mapActions('Files', ['updateFileProgress', 'removeFilesFromTrashbin', 'loadIndicators', 'setFileSelection']),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_HIDDEN_FILES_VISIBILITY']),
     ...mapMutations(['SET_QUOTA']),
@@ -362,7 +362,7 @@ export default {
         }
 
         setTimeout(() => {
-          this.setHighlightedFile(resource)
+          this.setFileSelection([resource])
           this.scrollToResource(resource)
         })
       } catch (error) {
@@ -451,7 +451,7 @@ export default {
         }
 
         setTimeout(() => {
-          this.setHighlightedFile(resource)
+          this.setFileSelection([resource])
           this.scrollToResource(resource)
         })
       } catch (error) {
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
index 4b72cd60d2e..6b39352ef8a 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
@@ -181,7 +181,7 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['removeFilesFromTrashbin', 'resetFileSelection', 'setHighlightedFile']),
+    ...mapActions('Files', ['removeFilesFromTrashbin', 'resetFileSelection']),
     ...mapActions(['showMessage']),
     ...mapMutations('Files', ['UPDATE_RESOURCE']),
 
@@ -206,7 +206,6 @@ export default {
           })
       }
       this.resetFileSelection()
-      this.setHighlightedFile(null)
     },
 
     emptyTrashbin() {
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index db5855d0f44..845a08d4bb4 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -233,7 +233,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', ['setHighlightedFile', 'loadPreview', 'loadVersions']),
+    ...mapActions('Files', ['loadPreview', 'loadVersions']),
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
     expandPeoplesAccordion() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL('sharing-item')
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 3f03835acc7..b3eafe0b1de 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -81,6 +81,7 @@ import { mapGetters, mapMutations, mapState } from 'vuex'
 import FileInfo from './FileInfo.vue'
 import MixinRoutes from '../../mixins/routes'
 import { VisibilityObserver } from 'web-pkg/src/observer'
+import { bus } from 'web-pkg/src/instance'
 
 let visibilityObserver
 let hiddenObserver
@@ -173,7 +174,7 @@ export default {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
 
     close() {
-      this.$root.$emit('toggle-sidebar')
+      bus.emit('app.files.sidebar.close')
     },
     initVisibilityObserver() {
       visibilityObserver = new VisibilityObserver({
diff --git a/packages/web-app-files/src/helpers/statusIndicators.js b/packages/web-app-files/src/helpers/statusIndicators.js
index f385268455a..3c37ff5584e 100644
--- a/packages/web-app-files/src/helpers/statusIndicators.js
+++ b/packages/web-app-files/src/helpers/statusIndicators.js
@@ -2,6 +2,7 @@ import intersection from 'lodash-es/intersection'
 import { shareTypes, userShareTypes } from './shareTypes'
 import { getParentPaths } from './path'
 import { $gettext } from '../gettext'
+import { bus } from 'web-pkg/src/instance'
 
 const $shareTypes = resource => {
   if (typeof resource.shareTypes !== 'undefined') {
@@ -111,6 +112,6 @@ export const getIndicators = (resource, sharesTree) => {
 }
 
 const indicatorHandler = (resource, accordion) => {
-  window.Vue.$store.dispatch('Files/setHighlightedFile', resource)
+  bus.emit('app.files.sidebar.show')
   window.Vue.$store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', accordion)
 }
diff --git a/packages/web-app-files/src/mixins/actions/restore.js b/packages/web-app-files/src/mixins/actions/restore.js
index 84aed091aa7..ed88106b8aa 100644
--- a/packages/web-app-files/src/mixins/actions/restore.js
+++ b/packages/web-app-files/src/mixins/actions/restore.js
@@ -1,5 +1,4 @@
 import { mapActions } from 'vuex'
-
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,12 +17,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', [
-      'resetFileSelection',
-      'addFileSelection',
-      'setHighlightedFile',
-      'removeFilesFromTrashbin'
-    ]),
+    ...mapActions('Files', ['resetFileSelection', 'addFileSelection', 'removeFilesFromTrashbin']),
 
     $_restore_trigger(resource) {
       this.resetFileSelection()
@@ -53,7 +47,6 @@ export default {
         })
 
       this.resetFileSelection()
-      this.setHighlightedFile(null)
     }
   }
 }
diff --git a/packages/web-app-files/src/mixins/actions/showActions.js b/packages/web-app-files/src/mixins/actions/showActions.js
index 298bdbcbb8c..1143ee23bde 100644
--- a/packages/web-app-files/src/mixins/actions/showActions.js
+++ b/packages/web-app-files/src/mixins/actions/showActions.js
@@ -1,4 +1,4 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,10 +18,8 @@ export default {
   },
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    ...mapActions('Files', ['setHighlightedFile']),
 
-    $_showActions_trigger(resource) {
-      this.setHighlightedFile(resource)
+    $_showActions_trigger() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(isTrashbinRoute(this.$route) ? null : 'actions-item')
     }
   }
diff --git a/packages/web-app-files/src/mixins/actions/showDetails.js b/packages/web-app-files/src/mixins/actions/showDetails.js
index 65ef72a68bb..095e078af64 100644
--- a/packages/web-app-files/src/mixins/actions/showDetails.js
+++ b/packages/web-app-files/src/mixins/actions/showDetails.js
@@ -1,4 +1,4 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,10 +18,8 @@ export default {
   },
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    ...mapActions('Files', ['setHighlightedFile']),
 
-    $_showDetails_trigger(resource) {
-      this.setHighlightedFile(resource)
+    $_showDetails_trigger() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     }
   }
diff --git a/packages/web-app-files/src/mixins/deleteResources.js b/packages/web-app-files/src/mixins/deleteResources.js
index 7c741251990..3e9bbef48ab 100644
--- a/packages/web-app-files/src/mixins/deleteResources.js
+++ b/packages/web-app-files/src/mixins/deleteResources.js
@@ -89,20 +89,10 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', [
-      'pushResourcesToDeleteList',
-      'removeFilesFromTrashbin',
-      'setHighlightedFile',
-      'deleteFiles'
-    ]),
+    ...mapActions('Files', ['pushResourcesToDeleteList', 'removeFilesFromTrashbin', 'deleteFiles']),
     ...mapActions(['showMessage', 'toggleModalConfirmButton', 'hideModal', 'createModal']),
     ...mapMutations(['SET_QUOTA']),
 
-    $_deleteResources_hideDialog() {
-      this.setHighlightedFile(null)
-      this.hideModal()
-    },
-
     $_deleteResources_trashbin_deleteOp(resource) {
       return this.$client.fileTrash
         .clearTrashBin(resource.id)
@@ -149,7 +139,7 @@ export default {
       }
 
       Promise.all(this.deleteResources_deleteOps).then(() => {
-        this.$_deleteResources_hideDialog()
+        this.hideModal()
         this.toggleModalConfirmButton()
       })
     },
@@ -162,7 +152,7 @@ export default {
         $gettext: this.$gettext,
         $gettextInterpolate: this.$gettextInterpolate
       }).then(async () => {
-        this.$_deleteResources_hideDialog()
+        this.hideModal()
         this.toggleModalConfirmButton()
 
         // Load quota
@@ -195,7 +185,7 @@ export default {
         message: this.$_deleteResources_dialogMessage,
         cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Delete'),
-        onCancel: this.$_deleteResources_hideDialog,
+        onCancel: this.hideModal,
         onConfirm: this.$_deleteResources_delete
       }
 
diff --git a/packages/web-app-files/src/mixins/sidebar/mountSideBar.js b/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
index f6231a2ef04..5c38b16fa5b 100644
--- a/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
+++ b/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
@@ -1,11 +1,11 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   methods: {
-    ...mapActions('Files', ['setHighlightedFile']),
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    $_mountSideBar_showDetails(resource) {
-      this.setHighlightedFile(resource)
+    $_mountSideBar_showDefaultPanel() {
+      bus.emit('app.files.sidebar.show')
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     }
   }
diff --git a/packages/web-app-files/src/quickActions.js b/packages/web-app-files/src/quickActions.js
index e276a77e601..cb4f062047e 100644
--- a/packages/web-app-files/src/quickActions.js
+++ b/packages/web-app-files/src/quickActions.js
@@ -1,5 +1,6 @@
 import { DateTime } from 'luxon'
 import copyToClipboard from 'copy-to-clipboard'
+import { bus } from 'web-pkg/src/instance'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -20,33 +21,32 @@ export function createPublicLink(ctx) {
   }
 
   return new Promise((resolve, reject) => {
-    ctx.store.dispatch('Files/setHighlightedFile', ctx.item).then(() => {
-      ctx.store
-        .dispatch('Files/addLink', { path: ctx.item.path, client: ctx.client, params })
-        .then(link => {
-          ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'links-item')
-          copyToClipboard(link.url)
-          ctx.store.dispatch('showMessage', {
-            title: $gettext('Public link created'),
-            desc: $gettext(
-              'Public link has been successfully created and copied into your clipboard.'
-            ),
-            status: 'success',
-            autoClose: {
-              enabled: true
-            }
-          })
-          resolve()
+    ctx.store
+      .dispatch('Files/addLink', { path: ctx.item.path, client: ctx.client, params })
+      .then(link => {
+        bus.emit('app.files.sidebar.show')
+        ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'links-item')
+        copyToClipboard(link.url)
+        ctx.store.dispatch('showMessage', {
+          title: $gettext('Public link created'),
+          desc: $gettext(
+            'Public link has been successfully created and copied into your clipboard.'
+          ),
+          status: 'success',
+          autoClose: {
+            enabled: true
+          }
         })
-        .catch(e => {
-          reject(e)
-        })
-    })
+        resolve()
+      })
+      .catch(e => {
+        reject(e)
+      })
   })
 }
 
 export function openNewCollaboratorsPanel(ctx) {
-  ctx.store.dispatch('Files/setHighlightedFile', ctx.item)
+  bus.emit('app.files.sidebar.show')
   ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'sharing-item')
 }
 
diff --git a/packages/web-app-files/src/store/actions.js b/packages/web-app-files/src/store/actions.js
index 6415ceabc80..7ccd8d2cec4 100644
--- a/packages/web-app-files/src/store/actions.js
+++ b/packages/web-app-files/src/store/actions.js
@@ -27,6 +27,9 @@ export default {
     files = files.map(buildResource)
     context.commit('LOAD_FILES', { currentFolder, files })
   },
+  setFileSelection(context, files) {
+    context.commit('SET_FILE_SELECTION', files)
+  },
   addFileSelection(context, file) {
     context.commit('ADD_FILE_SELECTION', file)
   },
@@ -404,9 +407,6 @@ export default {
   dragOver(context, value) {
     context.commit('DRAG_OVER', value)
   },
-  setHighlightedFile(context, file) {
-    context.commit('SET_HIGHLIGHTED_FILE', file)
-  },
   setPublicLinkPassword(context, password) {
     context.commit('SET_PUBLIC_LINK_PASSWORD', password)
   },
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index 0a7ddc3d9a0..710055c8c47 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -65,12 +65,12 @@ export default {
   },
   sharesTree: state => state.sharesTree,
   sharesTreeLoading: state => state.sharesTreeLoading,
-  loadingFolder: state => {
+  loadingFolder: (state, getter) => {
     // when loading the shares tree, it is only related to the full folder
     // whenever no file is selected / no sidebar is open.
     // else it means we're loading the shares only for the sidebar contents and shouldn't
     // be showing a progress bar for the whole folder
-    return state.loadingFolder || (state.highlightedResourceId === null && state.sharesTreeLoading)
+    return state.loadingFolder || (getter.highlightedFile === null && state.sharesTreeLoading)
   },
   quota: state => {
     return state.quota
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index 4be0359dd25..f14b0f068c1 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -72,9 +72,19 @@ export default {
   LOAD_FILES_SEARCHED(state, files) {
     state.filesSearched = files
   },
+  REMOVE_FILE_FROM_SEARCHED(state, file) {
+    if (!state.filesSearched) {
+      return
+    }
+
+    state.filesSearched = state.filesSearched.filter(i => file.id !== i.id)
+  },
   CLEAR_FILES_SEARCHED(state) {
     state.filesSearched = null
   },
+  SET_FILE_SELECTION(state, files) {
+    state.selected = files
+  },
   ADD_FILE_SELECTION(state, file) {
     const selected = [...state.selected]
     const fileIndex = selected.findIndex(f => {
@@ -93,13 +103,6 @@ export default {
     }
     state.selected = []
   },
-  REMOVE_FILE_FROM_SEARCHED(state, file) {
-    if (!state.filesSearched) {
-      return
-    }
-
-    state.filesSearched = state.filesSearched.filter(i => file.id !== i.id)
-  },
   RESET_SELECTION(state) {
     state.selected = []
   },
@@ -212,18 +215,6 @@ export default {
   UPDATE_FOLDER_LOADING(state, value) {
     state.loadingFolder = value
   },
-  SET_HIGHLIGHTED_FILE(state, file) {
-    if (typeof file === 'string') {
-      const fileIndex = state.files.findIndex(f => {
-        return f.name === file
-      })
-      if (fileIndex === -1) {
-        return
-      }
-      file = state.files[fileIndex]
-    }
-    state.highlightedResourceId = file ? file.id : file
-  },
   SET_PUBLIC_LINK_PASSWORD(state, password) {
     // cache into state for reactivity
     state.publicLinkPassword = password
@@ -249,7 +240,6 @@ export default {
   CLEAR_CURRENT_FILES_LIST(state) {
     state.currentFolder = null
     state.selected = []
-    state.highlightedResourceId = null
     // release blob urls
     state.files.forEach(item => {
       if (item.previewUrl && item.previewUrl.startsWith('blob:')) {
diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
index 3270fafe262..2e9ddc88e2e 100644
--- a/packages/web-app-files/src/store/state.js
+++ b/packages/web-app-files/src/store/state.js
@@ -45,7 +45,6 @@ export default {
   sharesTreeLoading: false,
 
   loadingFolder: false,
-  highlightedResourceId: null,
   publicLinkPassword: null,
   uploaded: [],
   actionsInProgress: [],
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index b4c048ab4ff..1b25f4328ec 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -18,7 +18,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 2d2ee0ec50b..9197398d63b 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -26,7 +26,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
@@ -270,7 +270,8 @@ export default {
           const resource = this.activeFiles.find(r => r.name === resourceName)
 
           if (resource) {
-            this.$_mountSideBar_showDetails(resource)
+            this.selected = [resource]
+            this.$_mountSideBar_showDefaultPanel(resource)
             this.scrollToResource(resource)
           }
         })
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 0a9d812b8df..36129590acb 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -26,7 +26,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index e797b90fdbe..7aa88295fbf 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -22,7 +22,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index e2801843730..a783a5347b1 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -24,7 +24,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index 25d23bef8e5..5f5b4f99a8e 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -24,7 +24,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 5cad8610e33..ac83f39b49f 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -23,7 +23,7 @@
         :resources="activeFiles"
         :are-resources-clickable="false"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
       >
         <template #contextMenu="{ resource }">
           <context-actions :item="resource" />

From 64ffabf837e19abfe70aef1ea3006971f9fa1ae0 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 17:21:46 +0200
Subject: [PATCH 17/58] Bump ODS to v9.0.1

---
 packages/web-runtime/package.json | 2 +-
 yarn.lock                         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index ca875ca5ed7..7f045e24a86 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^9.0.0",
+    "owncloud-design-system": "^9.0.1",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",
diff --git a/yarn.lock b/yarn.lock
index 7d59146530f..50d1947324d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0.tgz#da445da6b9f8f01d8adceb197249e3150f09bf0f"
-  integrity sha512-7dg16L7Ind6kES+9LlXlAWI5hl7zsTTpcqpbjBEe0Zi5B3NwGwjr6fiqRoH7oHZGj3sGaL/G9PuYVxfflBjTtw==
+owncloud-design-system@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.1.tgz#fcfd1ebcb3604a02a72a891f3bdaae7970a1e4b7"
+  integrity sha512-NG6TcK8Hrj4hgXf1Kbhp4UGWvxlUDmX/FTJCxBvioHSOhcI4Gcsb0l+GPX5dcZsV2OctroU935B9BUHb7KXSKQ==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"

From 42869bd8df0a68440779393b37ee47fb532d7c52 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 17:22:57 +0200
Subject: [PATCH 18/58] Make linter happy

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 9902d89a10e..2470c804b05 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -288,7 +288,12 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['updateFileProgress', 'removeFilesFromTrashbin', 'loadIndicators', 'setFileSelection']),
+    ...mapActions('Files', [
+      'updateFileProgress',
+      'removeFilesFromTrashbin',
+      'loadIndicators',
+      'setFileSelection'
+    ]),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_HIDDEN_FILES_VISIBILITY']),
     ...mapMutations(['SET_QUOTA']),

From f020783d3f1f1e9eacf0dae75ffee179439ff782 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 07:06:34 +0200
Subject: [PATCH 19/58] Fix opening sidebar in tests after click behaviour
 changed

---
 .../pageObjects/FilesPageElement/filesList.js  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index ce793564d57..0ff6f837c7d 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -225,14 +225,12 @@ module.exports = {
      */
     clickRow: async function(item) {
       await this.waitForFileVisible(item)
-      await this.initAjaxCounters()
-        .useXpath()
-        // click in empty space in the tr using coordinates to avoid
-        // clicking on other elements that might be in the front
-        .clickElementAt(this.getFileRowSelectorByFileName(item), 1, 1)
-        .waitForOutstandingAjaxCalls()
-        .useCss()
-
+      const selectorXPath =
+        this.getFileRowSelectorByFileName(item) + this.elements.detailsBtnInFileRow.selector
+      await this.click({
+        selector: selectorXPath,
+        locateStrategy: 'xpath'
+      }).waitForAjaxCallsToStartAndFinish()
       return this
     },
 
@@ -703,6 +701,10 @@ module.exports = {
         '//span[contains(@class, "oc-resource-name") and (@data-test-resource-name=%s or @data-test-resource-path=%s) and @data-test-resource-type=%s]/parent::*',
       locateStrategy: 'xpath'
     },
+    detailsBtnInFileRow: {
+      selector: '//button[contains(@class, "oc-table-files-btn-show-details")]',
+      locateStrategy: 'xpath'
+    },
     /**
      * This element is concatenated as child of @see fileRowByResourcePath
      */

From 307393b426463e3630197f4357bc0a87933a1371 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 09:08:41 +0200
Subject: [PATCH 20/58] Fix tests creating new files or folders by clearing
 selection first

---
 .../AppBar/SelectedResources/SizeInfo.vue     |  1 +
 .../src/views/LocationPicker.vue              |  6 +++-
 .../pageObjects/FilesPageElement/filesList.js |  9 ++++--
 tests/acceptance/pageObjects/personalPage.js  | 31 ++++++++++++-------
 .../stepDefinitions/filesContext.js           |  2 +-
 5 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
index 3f2dd82b3d8..40a9e3a8df6 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
@@ -19,6 +19,7 @@
       >%{ amount } selected item
     </translate>
     <oc-button
+      id="files-clear-selection"
       v-oc-tooltip="clearSelectionLabel"
       :aria-label="clearSelectionLabel"
       class="oc-ml oc-mr-xs"
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 7d79d510777..205e27facf9 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -8,7 +8,11 @@
         <oc-breadcrumb :items="breadcrumbs" class="oc-mb-s" />
         <oc-grid gutter="small" flex class="uk-flex-middle">
           <div>
-            <oc-button size="small" @click="leaveLocationPicker(originalLocation)">
+            <oc-button
+              id="location-picker-btn-cancel"
+              size="small"
+              @click="leaveLocationPicker(originalLocation)"
+            >
               <translate>Cancel</translate>
             </oc-button>
           </div>
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index 0ff6f837c7d..e8e7f2846b4 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -599,8 +599,8 @@ module.exports = {
     cancelResourceMoveOrCopyProgress: async function() {
       // cancel copy or move
       await this.useXpath()
-        .waitForElementVisible(client.page.personalPage().elements.cancelMoveCopyBtn.selector)
-        .click(this.page.personalPage().elements.cancelMoveCopyBtn.selector)
+        .waitForElementVisible(this.elements.cancelMoveCopyBtn.selector)
+        .click(this.elements.cancelMoveCopyBtn.selector)
         .useCss()
       await this.waitForLoadingFinished()
 
@@ -765,6 +765,9 @@ module.exports = {
     previewImage: {
       selector: '//img[contains(@class, "oc-resource-thumbnail")]',
       locateStrategy: 'xpath'
-    }
+    },
+    cancelMoveCopyBtn: {
+      selector: '#location-picker-btn-cancel'
+    },
   }
 }
diff --git a/tests/acceptance/pageObjects/personalPage.js b/tests/acceptance/pageObjects/personalPage.js
index 52db610bca0..99b1a5d83a7 100644
--- a/tests/acceptance/pageObjects/personalPage.js
+++ b/tests/acceptance/pageObjects/personalPage.js
@@ -85,8 +85,9 @@ module.exports = {
      * @param {boolean} expectToSucceed
      */
     createFolder: async function(name, expectToSucceed = true) {
+      await this.clearFileSelectionIfAny()
       await this.waitForElementVisible('@newFileMenuButtonAnyState')
-        .waitForElementEnabled(this.elements.newFileMenuButtonAnyState.selector)
+        .waitForElementEnabled('@newFileMenuButtonAnyState')
         .click('@newFileMenuButton')
         .click('@newFolderButton')
         .waitForElementVisible('@dialog')
@@ -116,6 +117,7 @@ module.exports = {
      * @param {boolean} expectToSucceed
      */
     createFile: async function(name, expectToSucceed = true) {
+      await this.clearFileSelectionIfAny()
       await this.waitForElementVisible('@newFileMenuButton')
         .click('@newFileMenuButton')
         .waitForElementVisible('@newFileButton')
@@ -331,11 +333,21 @@ module.exports = {
       })
       return searchBar.length > 0
     },
-    clearSelection: async function() {
-      await this.useXpath()
-        .waitForElementVisible('@clearSelectionBtn')
-        .click('@clearSelectionBtn')
-        .waitForElementNotPresent('@clearSelectionBtn')
+    clearFileSelectionIfAny: async function() {
+      let activeFileSelection = false
+      await this.isVisible(
+        {
+          selector: '@clearSelectionBtn',
+          timeout: client.globals.waitForNegativeConditionTimeout
+        },
+        result => {
+          activeFileSelection = result.value === true
+        }
+      )
+      if (activeFileSelection) {
+        await this.click('@clearSelectionBtn').waitForElementNotPresent('@clearSelectionBtn')
+      }
+      return this
     }
   },
   elements: {
@@ -440,12 +452,7 @@ module.exports = {
       selector: '#markdown-editor-app-bar .uk-text-right .oc-button'
     },
     clearSelectionBtn: {
-      selector: '//button[contains(@aria-label, "Clear selection")]',
-      locateStrategy: 'xpath'
-    },
-    cancelMoveCopyBtn: {
-      selector: '//button[.="Cancel"]',
-      locateStrategy: 'xpath'
+      selector: '#files-clear-selection'
     },
     dialogBoxInputTextInRed: {
       selector: '.oc-text-input-danger'
diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 01859f7b68f..8eba5ca57cd 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -587,7 +587,7 @@ Then('these files should not be selected on the webUI', async function(fileOrFol
 })
 
 When('the user/public clears the selection of files', function() {
-  return client.page.personalPage().clearSelection()
+  return client.page.personalPage().clearSelectionIfAny()
 })
 
 When('the user clears the trashbin', function() {

From 39ef79d6b41810cd026ff40ecf860bd9a0cfc0fc Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 09:50:10 +0200
Subject: [PATCH 21/58] Make linter happy

---
 tests/acceptance/pageObjects/FilesPageElement/filesList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index e8e7f2846b4..d0d489378eb 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -768,6 +768,6 @@ module.exports = {
     },
     cancelMoveCopyBtn: {
       selector: '#location-picker-btn-cancel'
-    },
+    }
   }
 }

From dc784dd240565f49ddc152eaf3e9162e68e1a9c0 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 10:25:34 +0200
Subject: [PATCH 22/58] Fix helper call to clearing file selection

---
 tests/acceptance/stepDefinitions/filesContext.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 8eba5ca57cd..eef72457b79 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -587,7 +587,7 @@ Then('these files should not be selected on the webUI', async function(fileOrFol
 })
 
 When('the user/public clears the selection of files', function() {
-  return client.page.personalPage().clearSelectionIfAny()
+  return client.page.personalPage().clearFileSelectionIfAny()
 })
 
 When('the user clears the trashbin', function() {

From 6a4f0a96ffd1223e73d075d2c2a59be32ed0f3c6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Aug 2021 11:18:13 +0200
Subject: [PATCH 23/58] fixed share indicators

---
 packages/web-app-files/src/store/mutations.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index f14b0f068c1..4b7ad2d6d1d 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -119,11 +119,12 @@ export default {
   },
   UPDATE_CURRENT_FILE_SHARE_TYPES(state) {
     const files = [...state.files]
-    if (!state.highlightedResourceId) {
+    const highlighted = state.selected[0]
+    if (!highlighted) {
       return
     }
     const fileIndex = files.findIndex(f => {
-      return f.id === state.highlightedResourceId
+      return f.id === highlighted.id
     })
     files[fileIndex].shareTypes = computeShareTypes(state.currentFileOutgoingShares)
     state.files = files

From d33908544ec118983ed26de1421647c76624e80f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Aug 2021 11:28:56 +0200
Subject: [PATCH 24/58] fixed cancel button when testing move files

---
 tests/acceptance/pageObjects/FilesPageElement/filesList.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index d0d489378eb..a053f96ae3c 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -598,10 +598,9 @@ module.exports = {
 
     cancelResourceMoveOrCopyProgress: async function() {
       // cancel copy or move
-      await this.useXpath()
+      await this
         .waitForElementVisible(this.elements.cancelMoveCopyBtn.selector)
         .click(this.elements.cancelMoveCopyBtn.selector)
-        .useCss()
       await this.waitForLoadingFinished()
 
       return this

From 74a2168c2b35a91570edc7b4025fa5362f8ecc51 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Aug 2021 11:45:39 +0200
Subject: [PATCH 25/58] fixed linting

---
 tests/acceptance/pageObjects/FilesPageElement/filesList.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index a053f96ae3c..828951a4933 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -598,9 +598,9 @@ module.exports = {
 
     cancelResourceMoveOrCopyProgress: async function() {
       // cancel copy or move
-      await this
-        .waitForElementVisible(this.elements.cancelMoveCopyBtn.selector)
-        .click(this.elements.cancelMoveCopyBtn.selector)
+      await this.waitForElementVisible(this.elements.cancelMoveCopyBtn.selector).click(
+        this.elements.cancelMoveCopyBtn.selector
+      )
       await this.waitForLoadingFinished()
 
       return this

From 9f60fdc5378f27ebc06b1ad3d10eecb6751b8449 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 6 Aug 2021 15:46:45 +0200
Subject: [PATCH 26/58] Add details sidebar for multiple selection

---
 ...enhancement-add-multiple-selection-sidebar |   7 ++
 .../SideBar/Details/FileDetailsMultiple.vue   | 115 ++++++++++++++++++
 packages/web-app-files/src/index.js           |  29 +++--
 .../Details/FileDetailsMultiple.spec.js       |  93 ++++++++++++++
 4 files changed, 237 insertions(+), 7 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-multiple-selection-sidebar
 create mode 100644 packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
 create mode 100644 packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js

diff --git a/changelog/unreleased/enhancement-add-multiple-selection-sidebar b/changelog/unreleased/enhancement-add-multiple-selection-sidebar
new file mode 100644
index 00000000000..49b7f609108
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-multiple-selection-sidebar
@@ -0,0 +1,7 @@
+Enhancement: Add multiple selection Sidebar
+
+We've changed the sidebar so if a user selects multiple files or folders
+he sees a detailed view of his selection in the sidebar.
+
+https://github.com/owncloud/web/issues/5164
+https://github.com/owncloud/web/pull/5630
\ No newline at end of file
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
new file mode 100644
index 00000000000..9eb28f344a6
--- /dev/null
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="oc-file-details-sidebar">
+    <div class="files-preview">
+      <div class="files-preview__body">
+        <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
+        <span class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
+      </div>
+    </div>
+    <div>
+      <table class="details-table" aria-label="detailsTableLabel">
+        <tr data-testid="filesCount">
+          <th scope="col" class="oc-pr-s" v-text="filesText" />
+          <td v-text="filesCount" />
+        </tr>
+        <tr data-testid="foldersCount">
+          <th scope="col" class="oc-pr-s" v-text="foldersText" />
+          <td v-text="foldersCount" />
+        </tr>
+        <tr data-testid="size">
+          <th scope="col" class="oc-pr-s" v-text="sizeText" />
+          <td v-text="selectedFilesSize" />
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import Mixins from '../../../mixins'
+import MixinResources from '../../../mixins/resources'
+import MixinRoutes from '../../../mixins/routes'
+import { mapGetters } from 'vuex'
+
+export default {
+  mixins: [Mixins, MixinResources, MixinRoutes],
+  title: $gettext => {
+    return $gettext('Details')
+  },
+  computed: {
+    ...mapGetters('Files', ['selectedFiles']),
+    selectedFilesCount() {
+      return this.selectedFiles.length
+    },
+    selectedFilesString() {
+      return this.$gettextInterpolate(
+        this.$ngettext(
+          '%{ itemCount } item selected',
+          '%{ itemCount } items selected',
+          this.selectedFilesCount
+        ),
+        {
+          itemCount: this.selectedFilesCount
+        }
+      )
+    },
+    selectedFilesSize() {
+      let size = 0
+      this.selectedFiles.forEach(i => (size += parseInt(i.size)))
+      return this.getResourceSize(size)
+    },
+    sizeText() {
+      return this.$gettext('Size')
+    },
+    filesCount() {
+      return this.selectedFiles.filter(i => i.type === 'file').length
+    },
+    filesText() {
+      return this.$gettext('Files')
+    },
+    foldersCount() {
+      return this.selectedFiles.filter(i => i.type === 'folder').length
+    },
+    foldersText() {
+      return this.$gettext('Folders')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.files-preview {
+  position: relative;
+  background-color: var(--oc-color-background-muted);
+  border: 10px solid var(--oc-color-background-muted);
+  height: 230px;
+  text-align: center;
+  color: var(--oc-color-swatch-passive-muted);
+
+  &__body {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    .preview-icon {
+      display: inline-block;
+    }
+    .preview-text {
+      display: block;
+    }
+  }
+}
+.details-table {
+  padding-top: 20px;
+  text-align: left;
+
+  tr {
+    height: 1.5rem;
+  }
+
+  th {
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index 5daa5bf580c..0e24ec32aee 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -11,6 +11,7 @@ import FilesDrop from './views/FilesDrop.vue'
 import LocationPicker from './views/LocationPicker.vue'
 import PublicFiles from './views/PublicFiles.vue'
 import FileDetails from './components/SideBar/Details/FileDetails.vue'
+import FileDetailsMultiple from './components/SideBar/Details/FileDetailsMultiple.vue'
 import FileActions from './components/SideBar/Actions/FileActions.vue'
 import FileVersions from './components/SideBar/Versions/FileVersions.vue'
 import FileShares from './components/SideBar/Shares/FileShares.vue'
@@ -38,27 +39,39 @@ const appInfo = {
   fileSideBars: [
     // We don't have file details in the trashbin, yet.
     // Only allow `actions` panel on trashbin route for now.
-    ({ route }) => ({
+    ({ route, multipleSelection }) => ({
       app: 'details-item',
       icon: 'info_outline',
       component: FileDetails,
       default: !isTrashbinRoute(route),
       get enabled() {
-        return !isTrashbinRoute(route)
+        return !isTrashbinRoute(route) && !multipleSelection
       }
     }),
-    ({ route }) => ({
+    ({ route, multipleSelection }) => ({
+      app: 'details-item',
+      icon: 'info_outline',
+      component: FileDetailsMultiple,
+      default: !isTrashbinRoute(route),
+      get enabled() {
+        return !isTrashbinRoute(route) && multipleSelection
+      }
+    }),
+    ({ route, multipleSelection }) => ({
       app: 'actions-item',
       component: FileActions,
       icon: 'slideshow',
       default: isTrashbinRoute(route),
-      enabled: true
+      get enabled() {
+        return !multipleSelection
+      }
     }),
-    ({ capabilities, route }) => ({
+    ({ capabilities, route, multipleSelection }) => ({
       app: 'sharing-item',
       icon: 'group',
       component: FileShares,
       get enabled() {
+        if (multipleSelection) return false
         if (isTrashbinRoute(route)) {
           return false
         }
@@ -69,11 +82,12 @@ const appInfo = {
         return false
       }
     }),
-    ({ capabilities, route }) => ({
+    ({ capabilities, route, multipleSelection }) => ({
       app: 'links-item',
       icon: 'link',
       component: FileLinks,
       get enabled() {
+        if (multipleSelection) return false
         if (isTrashbinRoute(route)) {
           return false
         }
@@ -84,11 +98,12 @@ const appInfo = {
         return false
       }
     }),
-    ({ capabilities, highlightedFile, route }) => ({
+    ({ capabilities, highlightedFile, route, multipleSelection }) => ({
       app: 'versions-item',
       icon: 'file_version',
       component: FileVersions,
       get enabled() {
+        if (multipleSelection) return false
         if (isTrashbinRoute(route)) {
           return false
         }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js
new file mode 100644
index 00000000000..e284d18c8ee
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js
@@ -0,0 +1,93 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import FileDetailsMultiple from 'packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue'
+import stubs from '../../../../../../../tests/unit/stubs'
+import GetTextPlugin from 'vue-gettext'
+import AsyncComputed from 'vue-async-computed'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(AsyncComputed)
+localVue.use(GetTextPlugin, {
+  translations: 'does-not-matter.json',
+  silent: true
+})
+
+const selectors = {
+  selectedFilesText: '[data-testid="selectedFilesText"]',
+  filesCount: '[data-testid="filesCount"]',
+  foldersCount: '[data-testid="foldersCount"]',
+  size: '[data-testid="size"]'
+}
+
+const folderA = {
+  type: 'folder',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const folderB = {
+  type: 'folder',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const fileA = {
+  type: 'file',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const fileB = {
+  type: 'file',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+
+describe('Details Multiple Selection SideBar Item', () => {
+  it('should display information for two selected folders', () => {
+    const wrapper = createWrapper([folderA, folderB])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 0')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 2')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+  it('should display information for two selected files', () => {
+    const wrapper = createWrapper([fileA, fileB])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 2')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 0')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+  it('should display information for one selected file, one selected folder', () => {
+    const wrapper = createWrapper([fileA, folderA])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 1')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 1')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+})
+
+function createWrapper(testResource) {
+  return shallowMount(FileDetailsMultiple, {
+    store: new Vuex.Store({
+      modules: {
+        Files: {
+          namespaced: true,
+          getters: {
+            selectedFiles: function() {
+              return testResource
+            }
+          }
+        }
+      }
+    }),
+    localVue,
+    stubs: stubs
+  })
+}

From cfb12e34cad828ede7a94bc7d4867045e1ea0e7e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 6 Aug 2021 16:32:39 +0200
Subject: [PATCH 27/58] fixed merge issues

---
 .../src/components/SideBar/SideBar.vue              | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 345ed543b8e..e4c7e530ed2 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="highlightedFile"
+    v-if="showSidebar"
     v-click-outside="onClickOutside"
     :class="{
       'has-active': !!appSidebarActivePanel
@@ -91,7 +91,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('Files', ['highlightedFile']),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles']),
     ...mapGetters(['fileSideBars', 'capabilities']),
     ...mapState('Files', ['appSidebarActivePanel']),
     activePanel() {
@@ -103,7 +103,8 @@ export default {
           const panel = panelGenerator({
             capabilities: this.capabilities,
             highlightedFile: this.highlightedFile,
-            route: this.$route
+            route: this.$route,
+            multipleSelection: this.areMultipleSelected
           })
 
           if (panel.enabled) {
@@ -142,6 +143,12 @@ export default {
       }
 
       return null
+    },
+    areMultipleSelected() {
+      return this.selectedFiles.length > 1
+    },
+    showSidebar() {
+      return this.selectedFiles.length > 0
     }
   },
   watch: {

From 8a44731980afc33a26fb7908911c6a4720b1ee08 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 11:09:23 +0200
Subject: [PATCH 28/58] fixed highlightedFile issue for now, udpated package
 version to RC

---
 packages/web-app-files/src/App.vue                        | 1 -
 packages/web-app-files/src/components/SideBar/SideBar.vue | 7 +++++++
 packages/web-app-files/src/store/getters.js               | 4 ++--
 packages/web-runtime/package.json                         | 2 +-
 yarn.lock                                                 | 8 ++++----
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index e810c7194e7..cc1e6632deb 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -12,7 +12,6 @@
       <router-view id="files-view" />
     </div>
     <side-bar
-      v-if="_sidebarOpen"
       id="files-sidebar"
       ref="filesSidebar"
       tabindex="-1"
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index e4c7e530ed2..aaf421f2c66 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -148,6 +148,7 @@ export default {
       return this.selectedFiles.length > 1
     },
     showSidebar() {
+      console.log(this.selectedFiles.length)
       return this.selectedFiles.length > 0
     }
   },
@@ -159,6 +160,12 @@ export default {
         })
       },
       immediate: true
+    },
+    selectedFiles: {
+      handler: function(old, now) {
+        console.log("selectedFiles")
+      },
+      immediate: true
     }
   },
   beforeDestroy() {
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index fdab3cc1403..47da1472853 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -77,8 +77,8 @@ export default {
     return state.quota
   },
   highlightedFile: (state, getters) => {
-    if (state.highlightedResourceId) {
-      return getters.filesAll.find(r => r.id === state.highlightedResourceId)
+    if (state.selected.length > 0) {
+      return state.selected[0]
     }
     return null
   },
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index f421fd5a388..d260e4df789 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^8.3.1",
+    "owncloud-design-system": "^9.0.0-rc4",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",
diff --git a/yarn.lock b/yarn.lock
index d4b43abdc50..4a743f5f2a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^8.3.1:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-8.3.1.tgz#995f36291ec7efd07ef2413a4c43580486b91b98"
-  integrity sha512-kOCqBbeaTEzVfROltuRCFvAzTonkQE6uMkeL8CActzIVvsEGqCfHz8tcbM5MOVlxMWh78m/Dn/v0wrdlk3uWEA==
+owncloud-design-system@^9.0.0-rc4:
+  version "9.0.0-rc4"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0-rc4.tgz#cb83442bcc27caa7da6b2f2d3034681461dc071f"
+  integrity sha512-lQObmTTtFSBlzenDkhtbDS1J8ufZSxvGHRdbBo1uxNFbJgHwRLeNteX60I5fBbBUvsDbcE37JLsH/Nzhi0IgfQ==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"

From e20328dc7189a9d54f9aa6b2f418e1136c13a4fb Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 11:13:49 +0200
Subject: [PATCH 29/58] hide size if no size is to display

---
 .../src/components/SideBar/Details/FileDetailsMultiple.vue   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 9eb28f344a6..9a3ffd84b1c 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -16,7 +16,7 @@
           <th scope="col" class="oc-pr-s" v-text="foldersText" />
           <td v-text="foldersCount" />
         </tr>
-        <tr data-testid="size">
+        <tr v-if="showSize" data-testid="size">
           <th scope="col" class="oc-pr-s" v-text="sizeText" />
           <td v-text="selectedFilesSize" />
         </tr>
@@ -57,6 +57,9 @@ export default {
       this.selectedFiles.forEach(i => (size += parseInt(i.size)))
       return this.getResourceSize(size)
     },
+    showSize() {
+      return this.getResourceSize(this.selectedFiles[0].size) !== '?'
+    },
     sizeText() {
       return this.$gettext('Size')
     },

From f9bc7e514fd5609ad0ac41a3d6e1debdf60dfe37 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 11:19:44 +0200
Subject: [PATCH 30/58] fixed linting

---
 packages/web-app-files/src/components/SideBar/SideBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index aaf421f2c66..85d6ceb4e80 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -163,7 +163,7 @@ export default {
     },
     selectedFiles: {
       handler: function(old, now) {
-        console.log("selectedFiles")
+        console.log('selectedFiles')
       },
       immediate: true
     }

From 70bf3aa95e4b374bb501c2faeedf6a22ab588e80 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 12:39:02 +0200
Subject: [PATCH 31/58] addressed merge request issues

---
 packages/web-app-files/src/App.vue                        | 5 -----
 packages/web-app-files/src/components/SideBar/SideBar.vue | 7 -------
 packages/web-app-files/src/mixins.js                      | 4 ----
 packages/web-app-files/src/store/getters.js               | 6 +-----
 packages/web-app-files/src/views/Favorites.vue            | 1 -
 packages/web-app-files/src/views/Personal.vue             | 1 -
 packages/web-app-files/src/views/PublicFiles.vue          | 1 -
 packages/web-app-files/src/views/SharedViaLink.vue        | 1 -
 packages/web-app-files/src/views/SharedWithMe.vue         | 1 -
 packages/web-app-files/src/views/SharedWithOthers.vue     | 1 -
 packages/web-app-files/src/views/Trashbin.vue             | 1 -
 packages/web-runtime/package.json                         | 2 +-
 yarn.lock                                                 | 8 ++++----
 13 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index cc1e6632deb..1623e01c941 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -4,7 +4,6 @@
       ref="filesListWrapper"
       tabindex="-1"
       class="files-list-wrapper uk-width-expand"
-      :class="{ 'uk-visible@m': _sidebarOpen }"
       @dragover="$_ocApp_dragOver"
     >
       <app-bar id="files-app-bar" />
@@ -53,10 +52,6 @@ export default {
   computed: {
     ...mapGetters('Files', ['dropzone', 'highlightedFile', 'inProgress']),
 
-    _sidebarOpen() {
-      return this.highlightedFile !== null
-    },
-
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
     }
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 85d6ceb4e80..e4c7e530ed2 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -148,7 +148,6 @@ export default {
       return this.selectedFiles.length > 1
     },
     showSidebar() {
-      console.log(this.selectedFiles.length)
       return this.selectedFiles.length > 0
     }
   },
@@ -160,12 +159,6 @@ export default {
         })
       },
       immediate: true
-    },
-    selectedFiles: {
-      handler: function(old, now) {
-        console.log('selectedFiles')
-      },
-      immediate: true
     }
   },
   beforeDestroy() {
diff --git a/packages/web-app-files/src/mixins.js b/packages/web-app-files/src/mixins.js
index 5fa6801b44a..5529d4706e7 100644
--- a/packages/web-app-files/src/mixins.js
+++ b/packages/web-app-files/src/mixins.js
@@ -22,10 +22,6 @@ export default {
   computed: {
     ...mapGetters('Files', ['files', 'highlightedFile', 'publicLinkPassword', 'currentFolder']),
     ...mapGetters(['getToken', 'capabilities', 'configuration']),
-
-    _sidebarOpen() {
-      return this.highlightedFile !== null
-    }
   },
   methods: {
     ...mapActions('Files', [
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index 47da1472853..abdbbc83751 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -5,11 +5,7 @@ export default {
     return state.inProgress
   },
   selectedFiles: state => {
-    if (state.selected.length === 0) {
-      return []
-    } else {
-      return state.selected
-    }
+    return state.selected
   },
   files: state => {
     return state.files
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 7510f2bcaf7..57e4806bef8 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -17,7 +17,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index dd0662eea9e..3d914de9e5b 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -25,7 +25,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 6ecc0fce021..a9c5240816e 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -25,7 +25,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index d0a3fa46ec8..4029dd131ec 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -21,7 +21,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index e8f85483f6c..de2a3fb7f58 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -23,7 +23,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index fb307e3d37e..e5fead26ecf 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -23,7 +23,6 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
         @fileClick="$_fileActions_triggerDefaultAction"
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 4d96b632e21..bafcc1b7973 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -21,7 +21,6 @@
         :are-paths-displayed="true"
         :are-thumbnails-displayed="false"
         :resources="activeFiles"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :are-resources-clickable="false"
         :header-position="headerPosition"
         @showDetails="$_mountSideBar_showDetails"
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index d260e4df789..b7d297c3975 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^9.0.0-rc4",
+    "owncloud-design-system": "^9.0.0-rc5",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",
diff --git a/yarn.lock b/yarn.lock
index 4a743f5f2a9..b512025602c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^9.0.0-rc4:
-  version "9.0.0-rc4"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0-rc4.tgz#cb83442bcc27caa7da6b2f2d3034681461dc071f"
-  integrity sha512-lQObmTTtFSBlzenDkhtbDS1J8ufZSxvGHRdbBo1uxNFbJgHwRLeNteX60I5fBbBUvsDbcE37JLsH/Nzhi0IgfQ==
+owncloud-design-system@^9.0.0-rc5:
+  version "9.0.0-rc5"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0-rc5.tgz#79635f6014f1b6386be330c399d9b4bb8bdef4ef"
+  integrity sha512-egvn37+l0ADz5UBtq27B+8UIlYtEExoLNuK/xv0lhuCLVmjV2BWKWa6d+tp+CcEbIktHKl0QTnF3wrK8t3cNNg==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"

From d93577dbd070e8cda15420613200f71363af3f1e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 13:20:18 +0200
Subject: [PATCH 32/58] fixed linting

---
 packages/web-app-files/src/mixins.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/mixins.js b/packages/web-app-files/src/mixins.js
index 5529d4706e7..7fe9a56ce0f 100644
--- a/packages/web-app-files/src/mixins.js
+++ b/packages/web-app-files/src/mixins.js
@@ -21,7 +21,7 @@ export default {
   }),
   computed: {
     ...mapGetters('Files', ['files', 'highlightedFile', 'publicLinkPassword', 'currentFolder']),
-    ...mapGetters(['getToken', 'capabilities', 'configuration']),
+    ...mapGetters(['getToken', 'capabilities', 'configuration'])
   },
   methods: {
     ...mapActions('Files', [

From 8969d3d19dbecaacbce69d67ebcf9d43d8ba807a Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 13:34:08 +0200
Subject: [PATCH 33/58] removed old test

---
 packages/web-app-files/tests/unit/views/Favorites.spec.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index e9723bc23f6..51480ca5d6f 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -125,11 +125,6 @@ describe('Favorites component', () => {
           'files-table-squashed'
         )
       })
-      it('sets the "highlighted" attribute with the correct file id', () => {
-        expect(wrapper.find(selectors.favoritesTable).attributes('highlighted')).toEqual(
-          'file-id-234'
-        )
-      })
     })
     describe('previews', () => {
       it('displays previews when the "disablePreviews" config is disabled', () => {

From 6ac4fdbd4d70f38f408e046ee30faa1a414136c5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 16:34:08 +0200
Subject: [PATCH 34/58] make sidebar closable

---
 packages/web-app-files/src/App.vue                    | 10 +---------
 .../web-app-files/src/components/SideBar/SideBar.vue  | 11 ++++++++---
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 1623e01c941..047ed4ee755 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -15,7 +15,6 @@
       ref="filesSidebar"
       tabindex="-1"
       class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl"
-      @reset="$_destroySideBar_hideDetails"
       @beforeDestroy="focusSideBar"
       @mounted="focusSideBar"
       @fileChanged="focusSideBar"
@@ -50,7 +49,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('Files', ['dropzone', 'highlightedFile', 'inProgress']),
+    ...mapGetters('Files', ['dropzone', 'inProgress']),
 
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
@@ -58,14 +57,7 @@ export default {
   },
   watch: {
     $route() {
-      this.$_destroySideBar_hideDetails()
       this.resetFileSelection()
-    },
-    highlightedFile(file) {
-      if (file !== null) {
-        return
-      }
-      this.$_destroySideBar_hideDetails()
     }
   },
   created() {
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index e4c7e530ed2..41363cbf248 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -87,7 +87,8 @@ export default {
   data() {
     return {
       focused: undefined,
-      oldPanel: null
+      oldPanel: null,
+      sidebarClosed: false
     }
   },
   computed: {
@@ -148,7 +149,11 @@ export default {
       return this.selectedFiles.length > 1
     },
     showSidebar() {
-      return this.selectedFiles.length > 0
+      const show = this.selectedFiles.length > 0 && !this.sidebarClosed;
+      if(this.sidebarClosed) {
+        this.sidebarClosed = false;
+      }
+      return show;
     }
   },
   watch: {
@@ -203,7 +208,7 @@ export default {
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
     close() {
-      this.$emit('reset')
+      this.sidebarClosed = true;
     },
     onClickOutside(event) {
       /*

From d0cafed75afca9d2bb1628c90a113b7928488ab3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 9 Aug 2021 17:00:54 +0200
Subject: [PATCH 35/58] fixed showSidebar

---
 .../src/components/SideBar/SideBar.vue           | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 41363cbf248..e923cdc78a3 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -149,11 +149,7 @@ export default {
       return this.selectedFiles.length > 1
     },
     showSidebar() {
-      const show = this.selectedFiles.length > 0 && !this.sidebarClosed;
-      if(this.sidebarClosed) {
-        this.sidebarClosed = false;
-      }
-      return show;
+      return this.selectedFiles.length > 0 && !this.sidebarClosed
     }
   },
   watch: {
@@ -164,6 +160,14 @@ export default {
         })
       },
       immediate: true
+    },
+    selectedFiles: {
+      handler: function(old, selected) {
+        if (selected.length !== old.length) {
+          this.sidebarClosed = false
+        }
+      },
+      immediate: true
     }
   },
   beforeDestroy() {
@@ -208,7 +212,7 @@ export default {
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
     close() {
-      this.sidebarClosed = true;
+      this.sidebarClosed = true
     },
     onClickOutside(event) {
       /*

From 1eeccb66902e5bfc45b3face01ba85419ae5dc31 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 10 Aug 2021 11:38:19 +0200
Subject: [PATCH 36/58] removed file-info for multiple select

---
 .../src/components/SideBar/SideBar.vue              | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index e923cdc78a3..c9342a41151 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -16,7 +16,8 @@
       :class="{
         'is-active':
           appSidebarActivePanel === panelMeta.app || (!appSidebarActivePanel && panelMeta.default),
-        'sidebar-panel--default': panelMeta.default
+        'sidebar-panel--default': panelMeta.default,
+        'sidebar-panel--multiple-selected': areMultipleSelected
       }"
     >
       <div class="sidebar-panel__header header">
@@ -44,7 +45,11 @@
           <oc-icon name="close" />
         </oc-button>
       </div>
-      <file-info class="sidebar-panel__file_info" :is-content-displayed="isContentDisplayed" />
+      <file-info
+        v-if="!areMultipleSelected"
+        class="sidebar-panel__file_info"
+        :is-content-displayed="isContentDisplayed"
+      />
       <div class="sidebar-panel__body">
         <template v-if="isContentDisplayed">
           <component
@@ -276,6 +281,10 @@ export default {
     transition-duration: 0.001ms !important;
   }
 
+  &--multiple-selected {
+    grid-template-rows: 50px 1fr;
+  }
+
   &--default {
     #files-sidebar.has-active & {
       transform: translateX(-30%);

From ca1d29efff6c1125f4ac5aa51322ae16b60746e5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 10 Aug 2021 16:31:13 +0200
Subject: [PATCH 37/58] fixed visibility observer, moved sidebar toggle logic
 to parent component

---
 packages/web-app-files/src/App.vue            | 43 ++++++++--
 .../SideBar/Details/FileDetailsMultiple.vue   |  7 +-
 .../src/components/SideBar/SideBar.vue        | 85 ++++++++-----------
 .../src/mixins/sidebar/destroySideBar.js      | 15 ----
 packages/web-runtime/package.json             |  2 +-
 5 files changed, 80 insertions(+), 72 deletions(-)
 delete mode 100644 packages/web-app-files/src/mixins/sidebar/destroySideBar.js

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 047ed4ee755..84f9de1db93 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -11,6 +11,7 @@
       <router-view id="files-view" />
     </div>
     <side-bar
+      v-if="showSidebar"
       id="files-sidebar"
       ref="filesSidebar"
       tabindex="-1"
@@ -24,7 +25,6 @@
 <script>
 import Mixins from './mixins'
 import MixinRoutes from './mixins/routes'
-import MixinDestroySideBar from './mixins/sidebar/destroySideBar'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import AppBar from './components/AppBar/AppBar.vue'
 import ProgressBar from './components/Upload/ProgressBar.vue'
@@ -36,7 +36,7 @@ export default {
     ProgressBar,
     SideBar
   },
-  mixins: [Mixins, MixinRoutes, MixinDestroySideBar],
+  mixins: [Mixins, MixinRoutes],
   data() {
     return {
       createFolder: false,
@@ -45,25 +45,51 @@ export default {
       upload: false,
       fileName: '',
       selected: [],
-      breadcrumbs: []
+      breadcrumbs: [],
+      sidebarClosed: false
     }
   },
   computed: {
-    ...mapGetters('Files', ['dropzone', 'inProgress']),
+    ...mapGetters('Files', ['dropzone', 'inProgress', 'selectedFiles']),
 
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
+    },
+    areMultipleSelected() {
+      return this.selectedFiles && this.selectedFiles.length > 1
+    },
+    showSidebar() {
+      return this.selectedFiles && this.selectedFiles.length > 0 && !this.sidebarClosed
     }
   },
   watch: {
     $route() {
       this.resetFileSelection()
+    },
+    showSidebar: {
+      handler: function(value) {
+        if (value) return
+        this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
+      },
+      immediate: false
+    },
+    selectedFiles: {
+      handler: function(old, selected) {
+        if (!selected) return
+        if (selected.length !== old.length) {
+          this.sidebarClosed = false
+        }
+      },
+      immediate: true
     }
   },
   created() {
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
+    this.$root.$on('toggle-sidebar', () => {
+      this.close()
+    })
   },
 
   beforeDestroy() {
@@ -73,12 +99,19 @@ export default {
   methods: {
     ...mapActions('Files', ['dragOver', 'resetFileSelection']),
     ...mapActions(['showMessage']),
-    ...mapMutations(['SET_SIDEBAR_FOOTER_CONTENT_COMPONENT']),
+    ...mapMutations('Files', [
+      'SET_SIDEBAR_FOOTER_CONTENT_COMPONENT',
+      'SET_APP_SIDEBAR_ACTIVE_PANEL'
+    ]),
 
     trace() {
       console.info('trace', arguments)
     },
 
+    close() {
+      this.sidebarClosed = true
+    },
+
     focusSideBar(component, event) {
       this.focus({
         from: document.activeElement,
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 9a3ffd84b1c..451fa594b88 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-file-details-sidebar">
+  <div id="oc-file-details-multiple-sidebar">
     <div class="files-preview">
       <div class="files-preview__body">
         <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
@@ -7,7 +7,7 @@
       </div>
     </div>
     <div>
-      <table class="details-table" aria-label="detailsTableLabel">
+      <table class="details-table" :aria-label="detailsTableLabel">
         <tr data-testid="filesCount">
           <th scope="col" class="oc-pr-s" v-text="filesText" />
           <td v-text="filesCount" />
@@ -74,6 +74,9 @@ export default {
     },
     foldersText() {
       return this.$gettext('Folders')
+    },
+    detailsTableLabel() {
+      return this.$gettext('Overview of the information about the selected files')
     }
   }
 }
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index c9342a41151..3f03835acc7 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="showSidebar"
     v-click-outside="onClickOutside"
     :class="{
       'has-active': !!appSidebarActivePanel
@@ -92,8 +91,7 @@ export default {
   data() {
     return {
       focused: undefined,
-      oldPanel: null,
-      sidebarClosed: false
+      oldPanel: null
     }
   },
   computed: {
@@ -151,10 +149,7 @@ export default {
       return null
     },
     areMultipleSelected() {
-      return this.selectedFiles.length > 1
-    },
-    showSidebar() {
-      return this.selectedFiles.length > 0 && !this.sidebarClosed
+      return this.selectedFiles && this.selectedFiles.length > 1
     }
   },
   watch: {
@@ -165,14 +160,6 @@ export default {
         })
       },
       immediate: true
-    },
-    selectedFiles: {
-      handler: function(old, selected) {
-        if (selected.length !== old.length) {
-          this.sidebarClosed = false
-        }
-      },
-      immediate: true
     }
   },
   beforeDestroy() {
@@ -180,44 +167,44 @@ export default {
     hiddenObserver.disconnect()
   },
   mounted() {
-    visibilityObserver = new VisibilityObserver({
-      root: document.querySelector('#files-sidebar'),
-      threshold: 0.9
-    })
-    hiddenObserver = new VisibilityObserver({
-      root: document.querySelector('#files-sidebar'),
-      threshold: 0.05
-    })
-
-    const doFocus = () => {
-      const selector = document.querySelector(this.focused)
-
-      if (!selector) {
-        return
-      }
-
-      selector.focus()
-    }
-
-    const clearOldPanel = () => {
-      this.oldPanel = null
-    }
-
-    this.$refs.panels.forEach(panel => {
-      visibilityObserver.observe(panel, {
-        onEnter: doFocus,
-        onExit: doFocus
-      })
-      hiddenObserver.observe(panel, {
-        onExit: clearOldPanel
-      })
-    })
+    this.initVisibilityObserver()
   },
-
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
+
     close() {
-      this.sidebarClosed = true
+      this.$root.$emit('toggle-sidebar')
+    },
+    initVisibilityObserver() {
+      visibilityObserver = new VisibilityObserver({
+        root: document.querySelector('#files-sidebar'),
+        threshold: 0.9
+      })
+      hiddenObserver = new VisibilityObserver({
+        root: document.querySelector('#files-sidebar'),
+        threshold: 0.05
+      })
+      const doFocus = () => {
+        const selector = document.querySelector(this.focused)
+        if (!selector) {
+          return
+        }
+        selector.focus()
+      }
+
+      const clearOldPanel = () => {
+        this.oldPanel = null
+      }
+
+      this.$refs.panels.forEach(panel => {
+        visibilityObserver.observe(panel, {
+          onEnter: doFocus,
+          onExit: doFocus
+        })
+        hiddenObserver.observe(panel, {
+          onExit: clearOldPanel
+        })
+      })
     },
     onClickOutside(event) {
       /*
diff --git a/packages/web-app-files/src/mixins/sidebar/destroySideBar.js b/packages/web-app-files/src/mixins/sidebar/destroySideBar.js
deleted file mode 100644
index 9eddf4b17aa..00000000000
--- a/packages/web-app-files/src/mixins/sidebar/destroySideBar.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mapActions, mapGetters, mapMutations } from 'vuex'
-
-export default {
-  computed: mapGetters('Files', ['highlightedFile']),
-  methods: {
-    ...mapActions('Files', ['setHighlightedFile']),
-    ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    $_destroySideBar_hideDetails() {
-      if (this.highlightedFile !== null) {
-        this.setHighlightedFile(null)
-      }
-      this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
-    }
-  }
-}
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index b7d297c3975..ca875ca5ed7 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^9.0.0-rc5",
+    "owncloud-design-system": "^9.0.0",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",

From 99633571e4b022d88b4dd00b19d758f56a7b9cb7 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 11 Aug 2021 09:39:30 +0200
Subject: [PATCH 38/58] update yarn.lock

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b512025602c..7d59146530f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^9.0.0-rc5:
-  version "9.0.0-rc5"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0-rc5.tgz#79635f6014f1b6386be330c399d9b4bb8bdef4ef"
-  integrity sha512-egvn37+l0ADz5UBtq27B+8UIlYtEExoLNuK/xv0lhuCLVmjV2BWKWa6d+tp+CcEbIktHKl0QTnF3wrK8t3cNNg==
+owncloud-design-system@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0.tgz#da445da6b9f8f01d8adceb197249e3150f09bf0f"
+  integrity sha512-7dg16L7Ind6kES+9LlXlAWI5hl7zsTTpcqpbjBEe0Zi5B3NwGwjr6fiqRoH7oHZGj3sGaL/G9PuYVxfflBjTtw==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"

From bfce8284fb9e5bab4b09a1dee9fa2fbebe09e4e0 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 15:17:22 +0200
Subject: [PATCH 39/58] Fix sidebar in trashbin for multi selection

---
 packages/web-app-files/src/App.vue            | 28 ++++++-------------
 .../SideBar/Details/FileDetails.vue           |  4 +--
 .../SideBar/Details/FileDetailsMultiple.vue   | 11 ++++----
 packages/web-app-files/src/index.js           |  6 ++--
 4 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 84f9de1db93..795a2e29b80 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -55,9 +55,6 @@ export default {
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
     },
-    areMultipleSelected() {
-      return this.selectedFiles && this.selectedFiles.length > 1
-    },
     showSidebar() {
       return this.selectedFiles && this.selectedFiles.length > 0 && !this.sidebarClosed
     }
@@ -66,21 +63,14 @@ export default {
     $route() {
       this.resetFileSelection()
     },
-    showSidebar: {
-      handler: function(value) {
-        if (value) return
-        this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
-      },
-      immediate: false
+    showSidebar(visible) {
+      if (visible) return
+      this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     },
-    selectedFiles: {
-      handler: function(old, selected) {
-        if (!selected) return
-        if (selected.length !== old.length) {
-          this.sidebarClosed = false
-        }
-      },
-      immediate: true
+    selectedFiles(selected, oldSelected) {
+      if (selected.length !== oldSelected.length) {
+        this.sidebarClosed = false
+      }
     }
   },
   created() {
@@ -88,7 +78,7 @@ export default {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
     this.$root.$on('toggle-sidebar', () => {
-      this.close()
+      this.closeSidebar()
     })
   },
 
@@ -108,7 +98,7 @@ export default {
       console.info('trace', arguments)
     },
 
-    close() {
+    closeSidebar() {
       this.sidebarClosed = true
     },
 
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 901318f4e74..db5855d0f44 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -6,7 +6,7 @@
         :style="{
           'background-image': $asyncComputed.preview.updating ? 'none' : `url(${preview})`
         }"
-        class="details-preview uk-flex uk-flex-middle uk-flex-center oc-mb-m"
+        class="details-preview uk-flex uk-flex-middle uk-flex-center oc-mb"
         data-testid="preview"
       >
         <oc-spinner v-if="$asyncComputed.preview.updating" />
@@ -34,7 +34,7 @@
         </oc-button>
         <p class="oc-my-rm oc-mx-s" v-text="detailSharingInformation" />
       </div>
-      <table class="details-table" aria-label="detailsTableLabel">
+      <table class="details-table" :aria-label="detailsTableLabel">
         <tr v-if="hasTimestamp" data-testid="timestamp">
           <th scope="col" class="oc-pr-s" v-text="timestampTitle" />
           <td>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 451fa594b88..b0f29cf47cd 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="oc-file-details-multiple-sidebar">
-    <div class="files-preview">
-      <div class="files-preview__body">
+    <div class="files-preview oc-mb">
+      <div class="files-preview-body">
         <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
         <span class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
       </div>
@@ -18,7 +18,7 @@
         </tr>
         <tr v-if="showSize" data-testid="size">
           <th scope="col" class="oc-pr-s" v-text="sizeText" />
-          <td v-text="selectedFilesSize" />
+          <td v-text="sizeValue" />
         </tr>
       </table>
     </div>
@@ -52,7 +52,7 @@ export default {
         }
       )
     },
-    selectedFilesSize() {
+    sizeValue() {
       let size = 0
       this.selectedFiles.forEach(i => (size += parseInt(i.size)))
       return this.getResourceSize(size)
@@ -90,7 +90,7 @@ export default {
   text-align: center;
   color: var(--oc-color-swatch-passive-muted);
 
-  &__body {
+  &-body {
     margin: 0;
     position: absolute;
     top: 50%;
@@ -107,7 +107,6 @@ export default {
   }
 }
 .details-table {
-  padding-top: 20px;
   text-align: left;
 
   tr {
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index 0e24ec32aee..6b21c150586 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -48,13 +48,13 @@ const appInfo = {
         return !isTrashbinRoute(route) && !multipleSelection
       }
     }),
-    ({ route, multipleSelection }) => ({
+    ({ multipleSelection }) => ({
       app: 'details-item',
       icon: 'info_outline',
       component: FileDetailsMultiple,
-      default: !isTrashbinRoute(route),
+      default: () => true,
       get enabled() {
-        return !isTrashbinRoute(route) && multipleSelection
+        return multipleSelection
       }
     }),
     ({ route, multipleSelection }) => ({

From 6e9f4227f1d63b9558b430b86a5424699bbc3ab8 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 15:49:05 +0200
Subject: [PATCH 40/58] Modify selection model on quick action click

---
 .../web-app-files/src/components/FilesList/QuickActions.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/QuickActions.vue b/packages/web-app-files/src/components/FilesList/QuickActions.vue
index a4ef6e33871..93f57eef6b3 100644
--- a/packages/web-app-files/src/components/FilesList/QuickActions.vue
+++ b/packages/web-app-files/src/components/FilesList/QuickActions.vue
@@ -8,7 +8,7 @@
       appearance="raw"
       class="oc-mr-xs"
       :class="`files-quick-action-${action.id}`"
-      @click.stop="action.handler({ item, client: $client, store: $store })"
+      @click="action.handler({ item, client: $client, store: $store })"
     >
       <oc-icon :name="action.icon" class="uk-flex" />
     </oc-button>

From 6b1528185d6e100acebc759d58bcfd1168e0ac45 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 16:59:29 +0200
Subject: [PATCH 41/58] Remove setHighlightedFile from the store

---
 packages/web-app-files/src/App.vue            | 12 ++---
 .../src/components/AppBar/AppBar.vue          |  6 +--
 .../AppBar/SelectedResources/BatchActions.vue |  3 +-
 .../SideBar/Details/FileDetails.vue           |  2 +-
 .../src/components/SideBar/SideBar.vue        |  3 +-
 .../src/helpers/statusIndicators.js           |  3 +-
 .../src/mixins/actions/restore.js             |  9 +---
 .../src/mixins/actions/showActions.js         |  6 +--
 .../src/mixins/actions/showDetails.js         |  6 +--
 .../src/mixins/deleteResources.js             | 18 ++------
 .../src/mixins/sidebar/mountSideBar.js        |  8 ++--
 packages/web-app-files/src/quickActions.js    | 44 +++++++++----------
 packages/web-app-files/src/store/actions.js   |  6 +--
 packages/web-app-files/src/store/getters.js   |  4 +-
 packages/web-app-files/src/store/mutations.js | 30 +++++--------
 packages/web-app-files/src/store/state.js     |  1 -
 .../web-app-files/src/views/Favorites.vue     |  2 +-
 packages/web-app-files/src/views/Personal.vue |  5 ++-
 .../web-app-files/src/views/PublicFiles.vue   |  2 +-
 .../web-app-files/src/views/SharedViaLink.vue |  2 +-
 .../web-app-files/src/views/SharedWithMe.vue  |  2 +-
 .../src/views/SharedWithOthers.vue            |  2 +-
 packages/web-app-files/src/views/Trashbin.vue |  2 +-
 23 files changed, 74 insertions(+), 104 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 795a2e29b80..f056a9cdec4 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -29,6 +29,7 @@ import { mapActions, mapGetters, mapMutations } from 'vuex'
 import AppBar from './components/AppBar/AppBar.vue'
 import ProgressBar from './components/Upload/ProgressBar.vue'
 import SideBar from './components/SideBar/SideBar.vue'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   components: {
@@ -77,8 +78,11 @@ export default {
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
-    this.$root.$on('toggle-sidebar', () => {
-      this.closeSidebar()
+    bus.on('app.files.sidebar.close', () => {
+      this.sidebarClosed = true
+    })
+    bus.on('app.files.sidebar.show', () => {
+      this.sidebarClosed = false
     })
   },
 
@@ -98,10 +102,6 @@ export default {
       console.info('trace', arguments)
     },
 
-    closeSidebar() {
-      this.sidebarClosed = true
-    },
-
     focusSideBar(component, event) {
       this.focus({
         from: document.activeElement,
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 901178cd3f1..76c791a7276 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -288,7 +288,7 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['updateFileProgress', 'removeFilesFromTrashbin', 'loadIndicators']),
+    ...mapActions('Files', ['updateFileProgress', 'removeFilesFromTrashbin', 'loadIndicators', 'setFileSelection']),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_HIDDEN_FILES_VISIBILITY']),
     ...mapMutations(['SET_QUOTA']),
@@ -362,7 +362,7 @@ export default {
         }
 
         setTimeout(() => {
-          this.setHighlightedFile(resource)
+          this.setFileSelection([resource])
           this.scrollToResource(resource)
         })
       } catch (error) {
@@ -451,7 +451,7 @@ export default {
         }
 
         setTimeout(() => {
-          this.setHighlightedFile(resource)
+          this.setFileSelection([resource])
           this.scrollToResource(resource)
         })
       } catch (error) {
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
index 4b72cd60d2e..6b39352ef8a 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
@@ -181,7 +181,7 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['removeFilesFromTrashbin', 'resetFileSelection', 'setHighlightedFile']),
+    ...mapActions('Files', ['removeFilesFromTrashbin', 'resetFileSelection']),
     ...mapActions(['showMessage']),
     ...mapMutations('Files', ['UPDATE_RESOURCE']),
 
@@ -206,7 +206,6 @@ export default {
           })
       }
       this.resetFileSelection()
-      this.setHighlightedFile(null)
     },
 
     emptyTrashbin() {
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index db5855d0f44..845a08d4bb4 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -233,7 +233,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', ['setHighlightedFile', 'loadPreview', 'loadVersions']),
+    ...mapActions('Files', ['loadPreview', 'loadVersions']),
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
     expandPeoplesAccordion() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL('sharing-item')
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 3f03835acc7..b3eafe0b1de 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -81,6 +81,7 @@ import { mapGetters, mapMutations, mapState } from 'vuex'
 import FileInfo from './FileInfo.vue'
 import MixinRoutes from '../../mixins/routes'
 import { VisibilityObserver } from 'web-pkg/src/observer'
+import { bus } from 'web-pkg/src/instance'
 
 let visibilityObserver
 let hiddenObserver
@@ -173,7 +174,7 @@ export default {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
 
     close() {
-      this.$root.$emit('toggle-sidebar')
+      bus.emit('app.files.sidebar.close')
     },
     initVisibilityObserver() {
       visibilityObserver = new VisibilityObserver({
diff --git a/packages/web-app-files/src/helpers/statusIndicators.js b/packages/web-app-files/src/helpers/statusIndicators.js
index f385268455a..3c37ff5584e 100644
--- a/packages/web-app-files/src/helpers/statusIndicators.js
+++ b/packages/web-app-files/src/helpers/statusIndicators.js
@@ -2,6 +2,7 @@ import intersection from 'lodash-es/intersection'
 import { shareTypes, userShareTypes } from './shareTypes'
 import { getParentPaths } from './path'
 import { $gettext } from '../gettext'
+import { bus } from 'web-pkg/src/instance'
 
 const $shareTypes = resource => {
   if (typeof resource.shareTypes !== 'undefined') {
@@ -111,6 +112,6 @@ export const getIndicators = (resource, sharesTree) => {
 }
 
 const indicatorHandler = (resource, accordion) => {
-  window.Vue.$store.dispatch('Files/setHighlightedFile', resource)
+  bus.emit('app.files.sidebar.show')
   window.Vue.$store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', accordion)
 }
diff --git a/packages/web-app-files/src/mixins/actions/restore.js b/packages/web-app-files/src/mixins/actions/restore.js
index 84aed091aa7..ed88106b8aa 100644
--- a/packages/web-app-files/src/mixins/actions/restore.js
+++ b/packages/web-app-files/src/mixins/actions/restore.js
@@ -1,5 +1,4 @@
 import { mapActions } from 'vuex'
-
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,12 +17,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', [
-      'resetFileSelection',
-      'addFileSelection',
-      'setHighlightedFile',
-      'removeFilesFromTrashbin'
-    ]),
+    ...mapActions('Files', ['resetFileSelection', 'addFileSelection', 'removeFilesFromTrashbin']),
 
     $_restore_trigger(resource) {
       this.resetFileSelection()
@@ -53,7 +47,6 @@ export default {
         })
 
       this.resetFileSelection()
-      this.setHighlightedFile(null)
     }
   }
 }
diff --git a/packages/web-app-files/src/mixins/actions/showActions.js b/packages/web-app-files/src/mixins/actions/showActions.js
index 298bdbcbb8c..1143ee23bde 100644
--- a/packages/web-app-files/src/mixins/actions/showActions.js
+++ b/packages/web-app-files/src/mixins/actions/showActions.js
@@ -1,4 +1,4 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,10 +18,8 @@ export default {
   },
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    ...mapActions('Files', ['setHighlightedFile']),
 
-    $_showActions_trigger(resource) {
-      this.setHighlightedFile(resource)
+    $_showActions_trigger() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(isTrashbinRoute(this.$route) ? null : 'actions-item')
     }
   }
diff --git a/packages/web-app-files/src/mixins/actions/showDetails.js b/packages/web-app-files/src/mixins/actions/showDetails.js
index 65ef72a68bb..095e078af64 100644
--- a/packages/web-app-files/src/mixins/actions/showDetails.js
+++ b/packages/web-app-files/src/mixins/actions/showDetails.js
@@ -1,4 +1,4 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,10 +18,8 @@ export default {
   },
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    ...mapActions('Files', ['setHighlightedFile']),
 
-    $_showDetails_trigger(resource) {
-      this.setHighlightedFile(resource)
+    $_showDetails_trigger() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     }
   }
diff --git a/packages/web-app-files/src/mixins/deleteResources.js b/packages/web-app-files/src/mixins/deleteResources.js
index 7c741251990..3e9bbef48ab 100644
--- a/packages/web-app-files/src/mixins/deleteResources.js
+++ b/packages/web-app-files/src/mixins/deleteResources.js
@@ -89,20 +89,10 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', [
-      'pushResourcesToDeleteList',
-      'removeFilesFromTrashbin',
-      'setHighlightedFile',
-      'deleteFiles'
-    ]),
+    ...mapActions('Files', ['pushResourcesToDeleteList', 'removeFilesFromTrashbin', 'deleteFiles']),
     ...mapActions(['showMessage', 'toggleModalConfirmButton', 'hideModal', 'createModal']),
     ...mapMutations(['SET_QUOTA']),
 
-    $_deleteResources_hideDialog() {
-      this.setHighlightedFile(null)
-      this.hideModal()
-    },
-
     $_deleteResources_trashbin_deleteOp(resource) {
       return this.$client.fileTrash
         .clearTrashBin(resource.id)
@@ -149,7 +139,7 @@ export default {
       }
 
       Promise.all(this.deleteResources_deleteOps).then(() => {
-        this.$_deleteResources_hideDialog()
+        this.hideModal()
         this.toggleModalConfirmButton()
       })
     },
@@ -162,7 +152,7 @@ export default {
         $gettext: this.$gettext,
         $gettextInterpolate: this.$gettextInterpolate
       }).then(async () => {
-        this.$_deleteResources_hideDialog()
+        this.hideModal()
         this.toggleModalConfirmButton()
 
         // Load quota
@@ -195,7 +185,7 @@ export default {
         message: this.$_deleteResources_dialogMessage,
         cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Delete'),
-        onCancel: this.$_deleteResources_hideDialog,
+        onCancel: this.hideModal,
         onConfirm: this.$_deleteResources_delete
       }
 
diff --git a/packages/web-app-files/src/mixins/sidebar/mountSideBar.js b/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
index f6231a2ef04..5c38b16fa5b 100644
--- a/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
+++ b/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
@@ -1,11 +1,11 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   methods: {
-    ...mapActions('Files', ['setHighlightedFile']),
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    $_mountSideBar_showDetails(resource) {
-      this.setHighlightedFile(resource)
+    $_mountSideBar_showDefaultPanel() {
+      bus.emit('app.files.sidebar.show')
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     }
   }
diff --git a/packages/web-app-files/src/quickActions.js b/packages/web-app-files/src/quickActions.js
index e276a77e601..cb4f062047e 100644
--- a/packages/web-app-files/src/quickActions.js
+++ b/packages/web-app-files/src/quickActions.js
@@ -1,5 +1,6 @@
 import { DateTime } from 'luxon'
 import copyToClipboard from 'copy-to-clipboard'
+import { bus } from 'web-pkg/src/instance'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -20,33 +21,32 @@ export function createPublicLink(ctx) {
   }
 
   return new Promise((resolve, reject) => {
-    ctx.store.dispatch('Files/setHighlightedFile', ctx.item).then(() => {
-      ctx.store
-        .dispatch('Files/addLink', { path: ctx.item.path, client: ctx.client, params })
-        .then(link => {
-          ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'links-item')
-          copyToClipboard(link.url)
-          ctx.store.dispatch('showMessage', {
-            title: $gettext('Public link created'),
-            desc: $gettext(
-              'Public link has been successfully created and copied into your clipboard.'
-            ),
-            status: 'success',
-            autoClose: {
-              enabled: true
-            }
-          })
-          resolve()
+    ctx.store
+      .dispatch('Files/addLink', { path: ctx.item.path, client: ctx.client, params })
+      .then(link => {
+        bus.emit('app.files.sidebar.show')
+        ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'links-item')
+        copyToClipboard(link.url)
+        ctx.store.dispatch('showMessage', {
+          title: $gettext('Public link created'),
+          desc: $gettext(
+            'Public link has been successfully created and copied into your clipboard.'
+          ),
+          status: 'success',
+          autoClose: {
+            enabled: true
+          }
         })
-        .catch(e => {
-          reject(e)
-        })
-    })
+        resolve()
+      })
+      .catch(e => {
+        reject(e)
+      })
   })
 }
 
 export function openNewCollaboratorsPanel(ctx) {
-  ctx.store.dispatch('Files/setHighlightedFile', ctx.item)
+  bus.emit('app.files.sidebar.show')
   ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'sharing-item')
 }
 
diff --git a/packages/web-app-files/src/store/actions.js b/packages/web-app-files/src/store/actions.js
index 6415ceabc80..7ccd8d2cec4 100644
--- a/packages/web-app-files/src/store/actions.js
+++ b/packages/web-app-files/src/store/actions.js
@@ -27,6 +27,9 @@ export default {
     files = files.map(buildResource)
     context.commit('LOAD_FILES', { currentFolder, files })
   },
+  setFileSelection(context, files) {
+    context.commit('SET_FILE_SELECTION', files)
+  },
   addFileSelection(context, file) {
     context.commit('ADD_FILE_SELECTION', file)
   },
@@ -404,9 +407,6 @@ export default {
   dragOver(context, value) {
     context.commit('DRAG_OVER', value)
   },
-  setHighlightedFile(context, file) {
-    context.commit('SET_HIGHLIGHTED_FILE', file)
-  },
   setPublicLinkPassword(context, password) {
     context.commit('SET_PUBLIC_LINK_PASSWORD', password)
   },
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index abdbbc83751..329feb78daa 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -62,12 +62,12 @@ export default {
   },
   sharesTree: state => state.sharesTree,
   sharesTreeLoading: state => state.sharesTreeLoading,
-  loadingFolder: state => {
+  loadingFolder: (state, getter) => {
     // when loading the shares tree, it is only related to the full folder
     // whenever no file is selected / no sidebar is open.
     // else it means we're loading the shares only for the sidebar contents and shouldn't
     // be showing a progress bar for the whole folder
-    return state.loadingFolder || (state.highlightedResourceId === null && state.sharesTreeLoading)
+    return state.loadingFolder || (getter.highlightedFile === null && state.sharesTreeLoading)
   },
   quota: state => {
     return state.quota
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index 4be0359dd25..f14b0f068c1 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -72,9 +72,19 @@ export default {
   LOAD_FILES_SEARCHED(state, files) {
     state.filesSearched = files
   },
+  REMOVE_FILE_FROM_SEARCHED(state, file) {
+    if (!state.filesSearched) {
+      return
+    }
+
+    state.filesSearched = state.filesSearched.filter(i => file.id !== i.id)
+  },
   CLEAR_FILES_SEARCHED(state) {
     state.filesSearched = null
   },
+  SET_FILE_SELECTION(state, files) {
+    state.selected = files
+  },
   ADD_FILE_SELECTION(state, file) {
     const selected = [...state.selected]
     const fileIndex = selected.findIndex(f => {
@@ -93,13 +103,6 @@ export default {
     }
     state.selected = []
   },
-  REMOVE_FILE_FROM_SEARCHED(state, file) {
-    if (!state.filesSearched) {
-      return
-    }
-
-    state.filesSearched = state.filesSearched.filter(i => file.id !== i.id)
-  },
   RESET_SELECTION(state) {
     state.selected = []
   },
@@ -212,18 +215,6 @@ export default {
   UPDATE_FOLDER_LOADING(state, value) {
     state.loadingFolder = value
   },
-  SET_HIGHLIGHTED_FILE(state, file) {
-    if (typeof file === 'string') {
-      const fileIndex = state.files.findIndex(f => {
-        return f.name === file
-      })
-      if (fileIndex === -1) {
-        return
-      }
-      file = state.files[fileIndex]
-    }
-    state.highlightedResourceId = file ? file.id : file
-  },
   SET_PUBLIC_LINK_PASSWORD(state, password) {
     // cache into state for reactivity
     state.publicLinkPassword = password
@@ -249,7 +240,6 @@ export default {
   CLEAR_CURRENT_FILES_LIST(state) {
     state.currentFolder = null
     state.selected = []
-    state.highlightedResourceId = null
     // release blob urls
     state.files.forEach(item => {
       if (item.previewUrl && item.previewUrl.startsWith('blob:')) {
diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
index 84ff4699d24..21b1bea68aa 100644
--- a/packages/web-app-files/src/store/state.js
+++ b/packages/web-app-files/src/store/state.js
@@ -30,7 +30,6 @@ export default {
   sharesTreeLoading: false,
 
   loadingFolder: false,
-  highlightedResourceId: null,
   publicLinkPassword: null,
   uploaded: [],
   actionsInProgress: [],
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 57e4806bef8..16db3865b8d 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -18,7 +18,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 3d914de9e5b..65cd7e6927e 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -26,7 +26,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
@@ -270,7 +270,8 @@ export default {
           const resource = this.activeFiles.find(r => r.name === resourceName)
 
           if (resource) {
-            this.$_mountSideBar_showDetails(resource)
+            this.selected = [resource]
+            this.$_mountSideBar_showDefaultPanel(resource)
             this.scrollToResource(resource)
           }
         })
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index a9c5240816e..40ee033674d 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -26,7 +26,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index 4029dd131ec..dd401fd7450 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -22,7 +22,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index de2a3fb7f58..05b7036f4b6 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -24,7 +24,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index e5fead26ecf..b8064be9ef8 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -24,7 +24,7 @@
         :resources="activeFiles"
         :target-route="targetRoute"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index bafcc1b7973..73670b59193 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -23,7 +23,7 @@
         :resources="activeFiles"
         :are-resources-clickable="false"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
       >
         <template #contextMenu="{ resource }">
           <context-actions :item="resource" />

From 43f848ed761d92fe33e72fe2bdfd7df48c1d9dd6 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 17:21:46 +0200
Subject: [PATCH 42/58] Bump ODS to v9.0.1

---
 packages/web-runtime/package.json | 2 +-
 yarn.lock                         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index ca875ca5ed7..7f045e24a86 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^9.0.0",
+    "owncloud-design-system": "^9.0.1",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",
diff --git a/yarn.lock b/yarn.lock
index 7d59146530f..50d1947324d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.0.tgz#da445da6b9f8f01d8adceb197249e3150f09bf0f"
-  integrity sha512-7dg16L7Ind6kES+9LlXlAWI5hl7zsTTpcqpbjBEe0Zi5B3NwGwjr6fiqRoH7oHZGj3sGaL/G9PuYVxfflBjTtw==
+owncloud-design-system@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.1.tgz#fcfd1ebcb3604a02a72a891f3bdaae7970a1e4b7"
+  integrity sha512-NG6TcK8Hrj4hgXf1Kbhp4UGWvxlUDmX/FTJCxBvioHSOhcI4Gcsb0l+GPX5dcZsV2OctroU935B9BUHb7KXSKQ==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"

From c5e8f5c7c10bd2f4d76ce199c4a5598a14dc1fd1 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 11 Aug 2021 17:22:57 +0200
Subject: [PATCH 43/58] Make linter happy

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 76c791a7276..5208c6d1093 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -288,7 +288,12 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['updateFileProgress', 'removeFilesFromTrashbin', 'loadIndicators', 'setFileSelection']),
+    ...mapActions('Files', [
+      'updateFileProgress',
+      'removeFilesFromTrashbin',
+      'loadIndicators',
+      'setFileSelection'
+    ]),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_HIDDEN_FILES_VISIBILITY']),
     ...mapMutations(['SET_QUOTA']),

From 31bd71619a6d7ea323efb01cdbcb9d60370a75a5 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 07:06:34 +0200
Subject: [PATCH 44/58] Fix opening sidebar in tests after click behaviour
 changed

---
 .../pageObjects/FilesPageElement/filesList.js  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index ce793564d57..0ff6f837c7d 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -225,14 +225,12 @@ module.exports = {
      */
     clickRow: async function(item) {
       await this.waitForFileVisible(item)
-      await this.initAjaxCounters()
-        .useXpath()
-        // click in empty space in the tr using coordinates to avoid
-        // clicking on other elements that might be in the front
-        .clickElementAt(this.getFileRowSelectorByFileName(item), 1, 1)
-        .waitForOutstandingAjaxCalls()
-        .useCss()
-
+      const selectorXPath =
+        this.getFileRowSelectorByFileName(item) + this.elements.detailsBtnInFileRow.selector
+      await this.click({
+        selector: selectorXPath,
+        locateStrategy: 'xpath'
+      }).waitForAjaxCallsToStartAndFinish()
       return this
     },
 
@@ -703,6 +701,10 @@ module.exports = {
         '//span[contains(@class, "oc-resource-name") and (@data-test-resource-name=%s or @data-test-resource-path=%s) and @data-test-resource-type=%s]/parent::*',
       locateStrategy: 'xpath'
     },
+    detailsBtnInFileRow: {
+      selector: '//button[contains(@class, "oc-table-files-btn-show-details")]',
+      locateStrategy: 'xpath'
+    },
     /**
      * This element is concatenated as child of @see fileRowByResourcePath
      */

From 656f70a5060c53673dcce8407c939aa8332aea89 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 09:08:41 +0200
Subject: [PATCH 45/58] Fix tests creating new files or folders by clearing
 selection first

---
 .../AppBar/SelectedResources/SizeInfo.vue     |  1 +
 .../src/views/LocationPicker.vue              |  6 +++-
 .../pageObjects/FilesPageElement/filesList.js |  9 ++++--
 tests/acceptance/pageObjects/personalPage.js  | 31 ++++++++++++-------
 .../stepDefinitions/filesContext.js           |  2 +-
 5 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
index 3f2dd82b3d8..40a9e3a8df6 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
@@ -19,6 +19,7 @@
       >%{ amount } selected item
     </translate>
     <oc-button
+      id="files-clear-selection"
       v-oc-tooltip="clearSelectionLabel"
       :aria-label="clearSelectionLabel"
       class="oc-ml oc-mr-xs"
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 4b85c0bb79f..de305a3ef3d 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -8,7 +8,11 @@
         <oc-breadcrumb :items="breadcrumbs" class="oc-mb-s" />
         <oc-grid gutter="small" flex class="uk-flex-middle">
           <div>
-            <oc-button size="small" @click="leaveLocationPicker(originalLocation)">
+            <oc-button
+              id="location-picker-btn-cancel"
+              size="small"
+              @click="leaveLocationPicker(originalLocation)"
+            >
               <translate>Cancel</translate>
             </oc-button>
           </div>
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index 0ff6f837c7d..e8e7f2846b4 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -599,8 +599,8 @@ module.exports = {
     cancelResourceMoveOrCopyProgress: async function() {
       // cancel copy or move
       await this.useXpath()
-        .waitForElementVisible(client.page.personalPage().elements.cancelMoveCopyBtn.selector)
-        .click(this.page.personalPage().elements.cancelMoveCopyBtn.selector)
+        .waitForElementVisible(this.elements.cancelMoveCopyBtn.selector)
+        .click(this.elements.cancelMoveCopyBtn.selector)
         .useCss()
       await this.waitForLoadingFinished()
 
@@ -765,6 +765,9 @@ module.exports = {
     previewImage: {
       selector: '//img[contains(@class, "oc-resource-thumbnail")]',
       locateStrategy: 'xpath'
-    }
+    },
+    cancelMoveCopyBtn: {
+      selector: '#location-picker-btn-cancel'
+    },
   }
 }
diff --git a/tests/acceptance/pageObjects/personalPage.js b/tests/acceptance/pageObjects/personalPage.js
index 793dd213d62..3249d26a59b 100644
--- a/tests/acceptance/pageObjects/personalPage.js
+++ b/tests/acceptance/pageObjects/personalPage.js
@@ -84,8 +84,9 @@ module.exports = {
      * @param {boolean} expectToSucceed
      */
     createFolder: async function(name, expectToSucceed = true) {
+      await this.clearFileSelectionIfAny()
       await this.waitForElementVisible('@newFileMenuButtonAnyState')
-        .waitForElementEnabled(this.elements.newFileMenuButtonAnyState.selector)
+        .waitForElementEnabled('@newFileMenuButtonAnyState')
         .click('@newFileMenuButton')
         .click('@newFolderButton')
         .waitForElementVisible('@dialog')
@@ -114,6 +115,7 @@ module.exports = {
      * @param {boolean} expectToSucceed
      */
     createFile: async function(name, expectToSucceed = true) {
+      await this.clearFileSelectionIfAny()
       await this.waitForElementVisible('@newFileMenuButton')
         .click('@newFileMenuButton')
         .waitForElementVisible('@newFileButton')
@@ -321,11 +323,21 @@ module.exports = {
       })
       return searchBar.length > 0
     },
-    clearSelection: async function() {
-      await this.useXpath()
-        .waitForElementVisible('@clearSelectionBtn')
-        .click('@clearSelectionBtn')
-        .waitForElementNotPresent('@clearSelectionBtn')
+    clearFileSelectionIfAny: async function() {
+      let activeFileSelection = false
+      await this.isVisible(
+        {
+          selector: '@clearSelectionBtn',
+          timeout: client.globals.waitForNegativeConditionTimeout
+        },
+        result => {
+          activeFileSelection = result.value === true
+        }
+      )
+      if (activeFileSelection) {
+        await this.click('@clearSelectionBtn').waitForElementNotPresent('@clearSelectionBtn')
+      }
+      return this
     }
   },
   elements: {
@@ -427,12 +439,7 @@ module.exports = {
       selector: '#markdown-editor-app-bar .uk-text-right .oc-button'
     },
     clearSelectionBtn: {
-      selector: '//button[contains(@aria-label, "Clear selection")]',
-      locateStrategy: 'xpath'
-    },
-    cancelMoveCopyBtn: {
-      selector: '//button[.="Cancel"]',
-      locateStrategy: 'xpath'
+      selector: '#files-clear-selection'
     },
     dialogBoxInputTextInRed: {
       selector: '.oc-text-input-danger'
diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 85926d96d63..44f8012ea47 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -588,7 +588,7 @@ Then('these files should not be selected on the webUI', async function(fileOrFol
 })
 
 When('the user/public clears the selection of files', function() {
-  return client.page.personalPage().clearSelection()
+  return client.page.personalPage().clearSelectionIfAny()
 })
 
 When('the user clears the trashbin', function() {

From d394fb6730105a00438d8e009006c68cf2bdbf32 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 09:50:10 +0200
Subject: [PATCH 46/58] Make linter happy

---
 tests/acceptance/pageObjects/FilesPageElement/filesList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index e8e7f2846b4..d0d489378eb 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -768,6 +768,6 @@ module.exports = {
     },
     cancelMoveCopyBtn: {
       selector: '#location-picker-btn-cancel'
-    },
+    }
   }
 }

From fc08738bc0662d0d18481cf6d877063ce5f43212 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 10:25:34 +0200
Subject: [PATCH 47/58] Fix helper call to clearing file selection

---
 tests/acceptance/stepDefinitions/filesContext.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 44f8012ea47..b06e17232fb 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -588,7 +588,7 @@ Then('these files should not be selected on the webUI', async function(fileOrFol
 })
 
 When('the user/public clears the selection of files', function() {
-  return client.page.personalPage().clearSelectionIfAny()
+  return client.page.personalPage().clearFileSelectionIfAny()
 })
 
 When('the user clears the trashbin', function() {

From 2677cc2f0295108ad74a5d24b38a5572787a1e51 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Aug 2021 11:18:13 +0200
Subject: [PATCH 48/58] fixed share indicators

---
 packages/web-app-files/src/store/mutations.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index f14b0f068c1..4b7ad2d6d1d 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -119,11 +119,12 @@ export default {
   },
   UPDATE_CURRENT_FILE_SHARE_TYPES(state) {
     const files = [...state.files]
-    if (!state.highlightedResourceId) {
+    const highlighted = state.selected[0]
+    if (!highlighted) {
       return
     }
     const fileIndex = files.findIndex(f => {
-      return f.id === state.highlightedResourceId
+      return f.id === highlighted.id
     })
     files[fileIndex].shareTypes = computeShareTypes(state.currentFileOutgoingShares)
     state.files = files

From 005733b963ba0335781e77c62974a4a1f3f0a833 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Aug 2021 11:28:56 +0200
Subject: [PATCH 49/58] fixed cancel button when testing move files

---
 tests/acceptance/pageObjects/FilesPageElement/filesList.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index d0d489378eb..a053f96ae3c 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -598,10 +598,9 @@ module.exports = {
 
     cancelResourceMoveOrCopyProgress: async function() {
       // cancel copy or move
-      await this.useXpath()
+      await this
         .waitForElementVisible(this.elements.cancelMoveCopyBtn.selector)
         .click(this.elements.cancelMoveCopyBtn.selector)
-        .useCss()
       await this.waitForLoadingFinished()
 
       return this

From b8dc5b5e8f427f0b0bf50d60e406620855c586f2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Aug 2021 11:45:39 +0200
Subject: [PATCH 50/58] fixed linting

---
 tests/acceptance/pageObjects/FilesPageElement/filesList.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index a053f96ae3c..828951a4933 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -598,9 +598,9 @@ module.exports = {
 
     cancelResourceMoveOrCopyProgress: async function() {
       // cancel copy or move
-      await this
-        .waitForElementVisible(this.elements.cancelMoveCopyBtn.selector)
-        .click(this.elements.cancelMoveCopyBtn.selector)
+      await this.waitForElementVisible(this.elements.cancelMoveCopyBtn.selector).click(
+        this.elements.cancelMoveCopyBtn.selector
+      )
       await this.waitForLoadingFinished()
 
       return this

From 1a3014c9734eb8501856d0bda5e6c9bb8fdabdd0 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 11:58:34 +0200
Subject: [PATCH 51/58] fix some async/await in tests

---
 .../pageObjects/FilesPageElement/appSideBar.js        | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
index ee1cd6b2eea..f9685e45d84 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
@@ -10,10 +10,10 @@ module.exports = {
         this.api.page.personalPage().elements.sideBar
       ).waitForElementVisible(this.elements.fileInfoIcon)
     },
-    closeSidebar: function(timeout = null) {
+    closeSidebar: async function(timeout = null) {
       timeout = timeoutHelper.parseTimeout(timeout)
       try {
-        this.click({
+        await this.click({
           selector: '@sidebarCloseBtn',
           timeout: timeout
         })
@@ -36,15 +36,14 @@ module.exports = {
           }
         )
         if (backBtnVisible) {
-          this.click({
+          await this.click({
             selector: '@sidebarBackBtn'
           })
           await this.waitForAnimationToFinish() // wait for sliding animation to the root panel
         }
         this.useXpath()
-          .initAjaxCounters()
           .click(this.getXpathOfPanelSelect(item))
-          .waitForOutstandingAjaxCalls()
+          .waitForAjaxCallsToStartAndFinish()
           .useCss()
         await this.waitForAnimationToFinish() // wait for sliding animation to the sub panel
       }
@@ -121,7 +120,7 @@ module.exports = {
       let isVisible = false
       timeout = timeoutHelper.parseTimeout(timeout)
       await this.isVisible({ locateStrategy: 'css selector', selector, timeout }, result => {
-        isVisible = result.status === 0
+        isVisible = result.value === true
       })
       return isVisible
     },

From 767ef78c57d635ba0c75272c5673d2f69c22bfa2 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 12:09:54 +0200
Subject: [PATCH 52/58] Set shorter timeout in tests

---
 .../acceptance/pageObjects/FilesPageElement/appSideBar.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
index f9685e45d84..a18ac5073c1 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
@@ -23,14 +23,16 @@ module.exports = {
       return this.api.page.FilesPageElement.filesList()
     },
     activatePanel: async function(item) {
-      const timeout = this.api.globals.waitForNegativeConditionTimeout
       await this.waitForElementVisible(this.api.page.personalPage().elements.sideBar)
-      const active = await this.isPanelActive(item, timeout)
+      const active = await this.isPanelActive(
+        item,
+        this.api.globals.waitForNegativeConditionTimeout
+      )
       if (!active) {
         let backBtnVisible = false
         const backBtn = this.elements.sidebarBackBtn
         await this.isVisible(
-          { locateStrategy: backBtn.locateStrategy, selector: backBtn.selector, timeout },
+          { locateStrategy: backBtn.locateStrategy, selector: backBtn.selector, timeout: 200 },
           result => {
             backBtnVisible = result.status === 0
           }

From d64cfb69b776383244b4a990a6d38938e43adbb0 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 13:13:01 +0200
Subject: [PATCH 53/58] Revert async/await when closing sidebar

---
 tests/acceptance/pageObjects/FilesPageElement/appSideBar.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
index a18ac5073c1..232960b2000 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
@@ -10,10 +10,10 @@ module.exports = {
         this.api.page.personalPage().elements.sideBar
       ).waitForElementVisible(this.elements.fileInfoIcon)
     },
-    closeSidebar: async function(timeout = null) {
+    closeSidebar: function(timeout = null) {
       timeout = timeoutHelper.parseTimeout(timeout)
       try {
-        await this.click({
+        this.click({
           selector: '@sidebarCloseBtn',
           timeout: timeout
         })

From 2ececa05dfee8aae6d1aeefdfdae9f154741a4d6 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 14:30:20 +0200
Subject: [PATCH 54/58] Add one broken sharing test to expected failures

---
 .../expected-failures-XGA-with-oc10-server-oauth2-login.md   | 5 ++++-
 ...-with-oc10-server-oauth2-login-and-web-integration-app.md | 3 +++
 .../expected-failures-with-oc10-server-oauth2-login.md       | 5 ++++-
 .../expected-failures-with-oc10-server-openid-login.md       | 3 +++
 .../expected-failures-with-ocis-server-ocis-storage.md       | 3 +++
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md b/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
index de2aebb940d..4e5f469bf2e 100644
--- a/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
+++ b/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
@@ -3,6 +3,9 @@
 ### [renaming a resource does not work](https://github.com/owncloud/ocis-reva/issues/14)
 -   [webUISharingNotificationsToRoot/shareWithUsers.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/shareWithUsers.feature:#L40)
 
+### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
+-   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
+
 ### [File link in notifications seems to not work](https://github.com/owncloud/web/issues/5227)
 -   [webUISharingNotifications/notificationLink.feature:18](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotifications/notificationLink.feature#L18)
 -   [webUISharingNotificationsToRoot/notificationLink.feature:17](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/notificationLink.feature#L17)
@@ -11,7 +14,7 @@
 -   [webUITrashbinDelete/trashbinDelete.feature:29](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUITrashbinDelete/trashbinDelete.feature#29)
 
 ### [Federated Shares not showing in shared with me page](https://github.com/owncloud/web/issues/2510)
-- [webUISharingExternalToRoot/federationSharing.feature:169](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingExternalToRoot/federationSharing.feature#L169)
+-   [webUISharingExternalToRoot/federationSharing.feature:169](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingExternalToRoot/federationSharing.feature#L169)
 
 ### [browsing directly to a details 'tab' is not possible](https://github.com/owncloud/web/issues/5464)
 -   [webUIFiles/browseDirectlyToDetailsTab.feature:21](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFiles/browseDirectlyToDetailsTab.feature#L21)
diff --git a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login-and-web-integration-app.md b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login-and-web-integration-app.md
index c2224eabda5..efc22bdc590 100644
--- a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login-and-web-integration-app.md
+++ b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login-and-web-integration-app.md
@@ -11,6 +11,9 @@ Other free text and markdown formatting can be used elsewhere in the document if
 ### [regression in accepting shares from notifications](https://github.com/owncloud/web/issues/4839)
 -   [webUISharingNotificationsToRoot/shareWithUsers.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/shareWithUsers.feature#L40)
 
+### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
+-   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
+
 ### [File link in notifications seems to not work](https://github.com/owncloud/web/issues/5227)
 -   [webUISharingNotifications/notificationLink.feature:18](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotifications/notificationLink.feature#L18)
 -   [webUISharingNotificationsToRoot/notificationLink.feature:17](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/notificationLink.feature#L17)
diff --git a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md
index d421991e9e3..9fe0808fa29 100644
--- a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md
+++ b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md
@@ -22,6 +22,9 @@ Other free text and markdown formatting can be used elsewhere in the document if
 ### [regression in accepting shares from notifications](https://github.com/owncloud/web/issues/4839)
 -   [webUISharingNotificationsToRoot/shareWithUsers.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/shareWithUsers.feature#L40)
 
+### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
+-   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
+
 ### [Comments in sidebar](https://github.com/owncloud/web/issues/1158)
 -   [webUIComments/comments.feature:25](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L25)
 -   [webUIComments/comments.feature:26](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L26)
@@ -167,4 +170,4 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUISharingAcceptShares/acceptShares.feature:31](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingAcceptShares/acceptShares.feature#L31)
 
 ### [Change the file content of a received shared file](https://github.com/owncloud/ocis/issues/2319)
--   [webUIFilesActionMenu/versions.feature:88](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesActionMenu/versions.feature#L88)
\ No newline at end of file
+-   [webUIFilesActionMenu/versions.feature:88](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesActionMenu/versions.feature#L88)
diff --git a/tests/acceptance/expected-failures-with-oc10-server-openid-login.md b/tests/acceptance/expected-failures-with-oc10-server-openid-login.md
index 4bb79b317fa..338da9ad098 100644
--- a/tests/acceptance/expected-failures-with-oc10-server-openid-login.md
+++ b/tests/acceptance/expected-failures-with-oc10-server-openid-login.md
@@ -28,3 +28,6 @@ Other free text and markdown formatting can be used elsewhere in the document if
 
 ### [regression in accepting shares from notifications](https://github.com/owncloud/web/issues/4839)
 -   [webUISharingNotificationsToRoot/shareWithUsers.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/shareWithUsers.feature#L40)
+
+### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
+-   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
diff --git a/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md b/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
index 993b279867b..e2623cf07f4 100644
--- a/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
+++ b/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
@@ -52,6 +52,9 @@ Other free text and markdown formatting can be used elsewhere in the document if
 
 ### [delete pending share option is not available for sharee](https://github.com/owncloud/web/issues/5435)
 -   [webUIDeleteFilesFolders/deleteFilesFolders.feature:235](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIDeleteFilesFolders/deleteFilesFolders.feature#L235)
+- 
+### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
+-   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
 
 ### [file_path property is not unique for a share created with same resource name i.e already present in sharee](https://github.com/owncloud/ocis/issues/2249)
 -   [webUIRenameFiles/renameFiles.feature:205](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIRenameFiles/renameFiles.feature#L205)

From 03fa4695dd33b13e8b72897594b402bb9741a3d0 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 14:30:36 +0200
Subject: [PATCH 55/58] Fix waiting in modals (tests)

---
 .../FilesPageElement/fileActionsMenu.js       |  7 +++---
 .../pageObjects/FilesPageElement/filesList.js |  8 +++----
 .../FilesPageElement/publicLinksDialog.js     |  8 ++++---
 tests/acceptance/pageObjects/personalPage.js  | 22 ++++++++++---------
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js b/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
index d719ca3689e..604dea26f98 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
@@ -80,9 +80,10 @@ module.exports = {
       await this.useXpath()
         .performFileAction(this.FileAction.rename)
         .waitForElementVisible('@dialog')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
         .clearValue('@dialogInput')
         .setValue('@dialogInput', toName)
-        .click('@dialogConfirmBtn')
+        .click('@dialogConfirmBtnEnabled')
         .useCss()
 
       if (expectToSucceed) {
@@ -199,8 +200,8 @@ module.exports = {
     dialog: {
       selector: '.oc-modal'
     },
-    dialogConfirmBtn: {
-      selector: '.oc-modal-body-actions-confirm'
+    dialogConfirmBtnEnabled: {
+      selector: '.oc-modal-body-actions-confirm:enabled'
     },
     dialogInput: {
       selector: '.oc-modal-body-input .oc-text-input'
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index 828951a4933..8bca2c7c0fa 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -169,9 +169,7 @@ module.exports = {
      * @return {Promise<*>}
      */
     confirmDeletion: function() {
-      return this.waitForElementEnabled('@dialogConfirmBtn')
-        .click('@dialogConfirmBtn')
-        .waitForElementNotPresent('@dialog')
+      return this.click('@dialogConfirmBtnEnabled').waitForElementNotPresent('@dialog')
     },
     /**
      *
@@ -755,8 +753,8 @@ module.exports = {
     dialog: {
       selector: '.oc-modal'
     },
-    dialogConfirmBtn: {
-      selector: '.oc-modal-body-actions-confirm'
+    dialogConfirmBtnEnabled: {
+      selector: '.oc-modal-body-actions-confirm:enabled'
     },
     dialogCancelBtn: {
       selector: '.oc-modal-body-actions-cancel'
diff --git a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
index 667de9d2bfa..51dc5b12b11 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
@@ -149,7 +149,8 @@ module.exports = {
         .initAjaxCounters()
         .click(linkRowDeleteButton)
         .waitForElementVisible('@dialog')
-        .click('@dialogConfirmBtn')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
+        .click('@dialogConfirmBtnEnabled')
         .waitForOutstandingAjaxCalls()
     },
     /**
@@ -170,6 +171,7 @@ module.exports = {
         .initAjaxCounters()
         .click(linkRowDeleteButton)
         .waitForElementVisible('@dialog')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
         .click('@dialogCancelBtn')
         .waitForOutstandingAjaxCalls()
     },
@@ -456,8 +458,8 @@ module.exports = {
     dialog: {
       selector: '.oc-modal'
     },
-    dialogConfirmBtn: {
-      selector: '.oc-modal-body-actions-confirm'
+    dialogConfirmBtnEnabled: {
+      selector: '.oc-modal-body-actions-confirm:enabled'
     },
     dialogCancelBtn: {
       selector: '.oc-modal-body-actions-cancel'
diff --git a/tests/acceptance/pageObjects/personalPage.js b/tests/acceptance/pageObjects/personalPage.js
index 3249d26a59b..8b2bf6230ca 100644
--- a/tests/acceptance/pageObjects/personalPage.js
+++ b/tests/acceptance/pageObjects/personalPage.js
@@ -90,13 +90,14 @@ module.exports = {
         .click('@newFileMenuButton')
         .click('@newFolderButton')
         .waitForElementVisible('@dialog')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
 
       if (name !== null) {
         await this.clearValueWithEvent('@dialogInput')
         await this.setValue('@dialogInput', name)
       }
 
-      await this.click('@dialogConfirmBtn').waitForAjaxCallsToStartAndFinish()
+      await this.click('@dialogConfirmBtnEnabled').waitForAjaxCallsToStartAndFinish()
 
       if (expectToSucceed) {
         await this.waitForElementNotPresent('@dialog')
@@ -121,13 +122,14 @@ module.exports = {
         .waitForElementVisible('@newFileButton')
         .click('@newFileButton')
         .waitForElementVisible('@dialog')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
 
       if (name !== null) {
         await this.clearValueWithEvent('@dialogInput')
         await this.setValue('@dialogInput', name)
       }
 
-      await this.click('@dialogConfirmBtn')
+      await this.click('@dialogConfirmBtnEnabled')
 
       if (expectToSucceed) {
         await this.waitForElementNotPresent('@dialog')
@@ -228,7 +230,8 @@ module.exports = {
       return this.waitForElementVisible('@deleteSelectedButton')
         .click('@deleteSelectedButton')
         .waitForElementVisible('@dialog')
-        .click('@dialogConfirmBtn')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
+        .click('@dialogConfirmBtnEnabled')
         .waitForAjaxCallsToStartAndFinish()
         .waitForElementNotPresent('@dialog')
     },
@@ -257,7 +260,8 @@ module.exports = {
       })
     },
     confirmFileOverwrite: async function() {
-      await this.click('@dialogConfirmBtn')
+      await this.waitForAnimationToFinish() // wait for transition on the modal to finish
+        .click('@dialogConfirmBtnEnabled')
         .waitForElementNotPresent('@dialog')
         .waitForAjaxCallsToStartAndFinish()
       return this
@@ -301,7 +305,7 @@ module.exports = {
       }
 
       await this.initAjaxCounters()
-        .click('@dialogConfirmBtn')
+        .click('@dialogConfirmBtnEnabled')
         .waitForOutstandingAjaxCalls()
 
       if (expectToSucceed) {
@@ -415,13 +419,11 @@ module.exports = {
     dialog: {
       selector: '.oc-modal'
     },
-    dialogConfirmBtn: {
-      selector: '.oc-modal-body-actions-confirm'
+    dialogConfirmBtnEnabled: {
+      selector: '.oc-modal-body-actions-confirm:enabled'
     },
     dialogConfirmBtnDisabled: {
-      selector:
-        '//button[contains(@class, "oc-modal-body-actions-confirm") and @disabled="disabled"]',
-      locateStrategy: 'xpath'
+      selector: '.oc-modal-body-actions-confirm:disabled'
     },
     dialogCancelBtn: {
       selector: '.oc-modal-body-actions-cancel'

From 251f6e5d2e27a10a72dce08e6898c26eaec1348b Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 15:42:31 +0200
Subject: [PATCH 56/58] Don't open sidebar on selection

---
 packages/web-app-files/src/App.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index f056a9cdec4..ef5eb301d20 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -67,11 +67,6 @@ export default {
     showSidebar(visible) {
       if (visible) return
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
-    },
-    selectedFiles(selected, oldSelected) {
-      if (selected.length !== oldSelected.length) {
-        this.sidebarClosed = false
-      }
     }
   },
   created() {

From 51113e76f9b8d38240108b0b117b49c1b8551a95 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 12 Aug 2021 16:37:08 +0200
Subject: [PATCH 57/58] fixed initial sidebar open

---
 packages/web-app-files/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index ef5eb301d20..0d3af18ac05 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -47,7 +47,7 @@ export default {
       fileName: '',
       selected: [],
       breadcrumbs: [],
-      sidebarClosed: false
+      sidebarClosed: true
     }
   },
   computed: {

From 40b5ed8f5495cdbf497c292007d04fdd011eff47 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 12 Aug 2021 17:44:40 +0200
Subject: [PATCH 58/58] Remove test from expected failures

---
 .../expected-failures-XGA-with-oc10-server-oauth2-login.md     | 3 ---
 ...es-with-oc10-server-oauth2-login-and-web-integration-app.md | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md b/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
index 4e5f469bf2e..50768f9ee26 100644
--- a/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
+++ b/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
@@ -3,9 +3,6 @@
 ### [renaming a resource does not work](https://github.com/owncloud/ocis-reva/issues/14)
 -   [webUISharingNotificationsToRoot/shareWithUsers.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/shareWithUsers.feature:#L40)
 
-### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
--   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
-
 ### [File link in notifications seems to not work](https://github.com/owncloud/web/issues/5227)
 -   [webUISharingNotifications/notificationLink.feature:18](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotifications/notificationLink.feature#L18)
 -   [webUISharingNotificationsToRoot/notificationLink.feature:17](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/notificationLink.feature#L17)
diff --git a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login-and-web-integration-app.md b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login-and-web-integration-app.md
index efc22bdc590..c2224eabda5 100644
--- a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login-and-web-integration-app.md
+++ b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login-and-web-integration-app.md
@@ -11,9 +11,6 @@ Other free text and markdown formatting can be used elsewhere in the document if
 ### [regression in accepting shares from notifications](https://github.com/owncloud/web/issues/4839)
 -   [webUISharingNotificationsToRoot/shareWithUsers.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/shareWithUsers.feature#L40)
 
-### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
--   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
-
 ### [File link in notifications seems to not work](https://github.com/owncloud/web/issues/5227)
 -   [webUISharingNotifications/notificationLink.feature:18](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotifications/notificationLink.feature#L18)
 -   [webUISharingNotificationsToRoot/notificationLink.feature:17](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/notificationLink.feature#L17)