From b8cfdb1b715f99442bce2fcf1ebc269333f24279 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 13 Jan 2023 11:11:18 +0100
Subject: [PATCH 1/7] Move useSidebar composable to web-pkg

---
 .../web-app-files/src/composables/sideBar/eventTopics.ts   | 7 -------
 packages/web-pkg/src/composables/sideBar/eventTopics.ts    | 7 +++++++
 .../src/composables/sideBar/index.ts                       | 0
 .../src/composables/sideBar/useSideBar.ts                  | 0
 .../tests/unit/composables/sideBar/useSideBar.spec.ts      | 0
 5 files changed, 7 insertions(+), 7 deletions(-)
 delete mode 100644 packages/web-app-files/src/composables/sideBar/eventTopics.ts
 create mode 100644 packages/web-pkg/src/composables/sideBar/eventTopics.ts
 rename packages/{web-app-files => web-pkg}/src/composables/sideBar/index.ts (100%)
 rename packages/{web-app-files => web-pkg}/src/composables/sideBar/useSideBar.ts (100%)
 rename packages/{web-app-files => web-pkg}/tests/unit/composables/sideBar/useSideBar.spec.ts (100%)

diff --git a/packages/web-app-files/src/composables/sideBar/eventTopics.ts b/packages/web-app-files/src/composables/sideBar/eventTopics.ts
deleted file mode 100644
index ab5079730ad..00000000000
--- a/packages/web-app-files/src/composables/sideBar/eventTopics.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export abstract class SideBarEventTopics {
-  public static readonly open = 'app.files.sidebar.open'
-  public static readonly close = 'app.files.sidebar.close'
-  public static readonly toggle = 'app.files.sidebar.toggle'
-  public static readonly openWithPanel = 'app.files.sidebar.openWithPanel'
-  public static readonly setActivePanel = 'app.files.sidebar.setActivePanel'
-}
diff --git a/packages/web-pkg/src/composables/sideBar/eventTopics.ts b/packages/web-pkg/src/composables/sideBar/eventTopics.ts
new file mode 100644
index 00000000000..bb92c0d878f
--- /dev/null
+++ b/packages/web-pkg/src/composables/sideBar/eventTopics.ts
@@ -0,0 +1,7 @@
+export abstract class SideBarEventTopics {
+  public static readonly open = 'sidebar.open'
+  public static readonly close = 'sidebar.close'
+  public static readonly toggle = 'sidebar.toggle'
+  public static readonly openWithPanel = 'sidebar.openWithPanel'
+  public static readonly setActivePanel = 'sidebar.setActivePanel'
+}
diff --git a/packages/web-app-files/src/composables/sideBar/index.ts b/packages/web-pkg/src/composables/sideBar/index.ts
similarity index 100%
rename from packages/web-app-files/src/composables/sideBar/index.ts
rename to packages/web-pkg/src/composables/sideBar/index.ts
diff --git a/packages/web-app-files/src/composables/sideBar/useSideBar.ts b/packages/web-pkg/src/composables/sideBar/useSideBar.ts
similarity index 100%
rename from packages/web-app-files/src/composables/sideBar/useSideBar.ts
rename to packages/web-pkg/src/composables/sideBar/useSideBar.ts
diff --git a/packages/web-app-files/tests/unit/composables/sideBar/useSideBar.spec.ts b/packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts
similarity index 100%
rename from packages/web-app-files/tests/unit/composables/sideBar/useSideBar.spec.ts
rename to packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts

From 6a23f61675939bcd8bf54c74dabcdd20d1b87b94 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 13 Jan 2023 11:13:06 +0100
Subject: [PATCH 2/7] Adjust imports for SideBarEventTopics

---
 .../web-app-files/src/components/AppBar/SidebarToggle.vue     | 2 +-
 .../web-app-files/src/components/FilesList/ResourceTable.vue  | 2 +-
 .../src/components/SideBar/Details/FileDetails.vue            | 2 +-
 packages/web-app-files/src/components/SideBar/SideBar.vue     | 2 +-
 packages/web-app-files/src/components/Spaces/SpaceHeader.vue  | 2 +-
 .../resourcesViewDefaults/useResourcesViewDefaults.ts         | 2 +-
 .../web-app-files/src/composables/scrollTo/useScrollTo.ts     | 2 +-
 packages/web-app-files/src/helpers/statusIndicators.js        | 2 +-
 packages/web-app-files/src/mixins/actions/showActions.js      | 2 +-
 packages/web-app-files/src/mixins/actions/showDetails.ts      | 2 +-
 packages/web-app-files/src/mixins/actions/showEditTags.js     | 2 +-
 packages/web-app-files/src/mixins/actions/showShares.ts       | 2 +-
 packages/web-app-files/src/quickActions.js                    | 2 +-
 packages/web-app-files/src/views/spaces/Projects.vue          | 2 +-
 .../tests/unit/components/FilesList/ResourceTable.spec.ts     | 2 +-
 .../tests/unit/mixins/actions/showDetails.spec.ts             | 2 +-
 .../src/components/sideBar/Spaces/Details/SpaceDetails.vue    | 3 ++-
 packages/web-pkg/src/mixins/spaces/showMembers.ts             | 4 ++--
 18 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/SidebarToggle.vue b/packages/web-app-files/src/components/AppBar/SidebarToggle.vue
index 2695af392ef..00aa92bb0d1 100644
--- a/packages/web-app-files/src/components/AppBar/SidebarToggle.vue
+++ b/packages/web-app-files/src/components/AppBar/SidebarToggle.vue
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   props: {
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 45bb2d6640e..a4b3bb7a8d9 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -222,7 +222,7 @@ import {
   formatDateFromJSDate,
   formatRelativeDateFromJSDate
 } from 'web-pkg/src/helpers'
-import { SideBarEventTopics } from '../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { buildShareSpaceResource, extractDomSelector, SpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { CreateTargetRouteOptions } from '../../helpers/folderLink'
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 e4e18da3887..da1065f9cca 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -179,7 +179,7 @@ import { useClipboard } from '@vueuse/core'
 import { encodePath } from 'web-pkg/src/utils'
 import { formatDateFromHTTP, formatFileSize } from 'web-pkg/src/helpers'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { Resource } from 'web-client'
 import { buildShareSpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index b27ff8e3907..ce8c1a742d4 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -55,7 +55,7 @@ import {
   useStore
 } from 'web-pkg/src/composables'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import isEqual from 'lodash-es/isEqual'
 import { useActiveLocation } from '../../composables'
 import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index c5fa3cff7df..1db30717d4d 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -92,7 +92,7 @@ import { marked } from 'marked'
 import sanitizeHtml from 'sanitize-html'
 import SpaceContextActions from './SpaceContextActions.vue'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 const visibilityObserver = new VisibilityObserver()
 const markdownContainerCollapsedClass = 'collapsed'
diff --git a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
index 180ecccdf73..e923f30e307 100644
--- a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
+++ b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
@@ -3,7 +3,7 @@ import { folderService } from '../../services/folder'
 import { fileList } from '../../helpers/ui'
 import { usePagination, useFileListHeaderPosition, SortField } from '../'
 import { useSort, SortDir } from '../sort/'
-import { useSideBar } from '../sideBar'
+import { useSideBar } from 'web-pkg/src/composables/sideBar'
 
 import {
   queryItemAsString,
diff --git a/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts b/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts
index 99dda5d4562..ad87357bf1c 100644
--- a/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts
+++ b/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts
@@ -3,7 +3,7 @@ import { Resource } from 'web-client/src'
 import { eventBus, useStore } from 'web-pkg/src'
 import { queryItemAsString } from 'web-pkg/src/composables/appDefaults'
 import { useRouteQuery } from 'web-pkg/src/composables'
-import { SideBarEventTopics } from '../sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export interface ScrollToResult {
   scrollToResource(resource: Resource): void
diff --git a/packages/web-app-files/src/helpers/statusIndicators.js b/packages/web-app-files/src/helpers/statusIndicators.js
index 31005302de0..9e44d81143a 100644
--- a/packages/web-app-files/src/helpers/statusIndicators.js
+++ b/packages/web-app-files/src/helpers/statusIndicators.js
@@ -2,7 +2,7 @@ import { getParentPaths } from './path'
 import { $gettext } from '../gettext'
 import { ShareTypes } from 'web-client/src/helpers/share'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 const $shareTypes = (resource) => {
   if (typeof resource.shareTypes !== 'undefined') {
diff --git a/packages/web-app-files/src/mixins/actions/showActions.js b/packages/web-app-files/src/mixins/actions/showActions.js
index 1dfc4f5909f..1e4dc77805a 100644
--- a/packages/web-app-files/src/mixins/actions/showActions.js
+++ b/packages/web-app-files/src/mixins/actions/showActions.js
@@ -1,7 +1,7 @@
 import { isLocationTrashActive } from '../../router'
 import isFilesAppActive from './helpers/isFilesAppActive'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default {
   mixins: [isFilesAppActive],
diff --git a/packages/web-app-files/src/mixins/actions/showDetails.ts b/packages/web-app-files/src/mixins/actions/showDetails.ts
index f124b6adc2e..cbc8d50f604 100644
--- a/packages/web-app-files/src/mixins/actions/showDetails.ts
+++ b/packages/web-app-files/src/mixins/actions/showDetails.ts
@@ -2,7 +2,7 @@ import { mapMutations } from 'vuex'
 import { isLocationTrashActive } from '../../router'
 import isFilesAppActive from './helpers/isFilesAppActive'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { useGraphClient } from 'web-pkg/src/composables'
 
 export default {
diff --git a/packages/web-app-files/src/mixins/actions/showEditTags.js b/packages/web-app-files/src/mixins/actions/showEditTags.js
index ed9e45a1f36..844bda434fa 100644
--- a/packages/web-app-files/src/mixins/actions/showEditTags.js
+++ b/packages/web-app-files/src/mixins/actions/showEditTags.js
@@ -2,7 +2,7 @@ import { mapGetters } from 'vuex'
 import { eventBus } from 'web-pkg'
 import { isLocationTrashActive, isLocationPublicActive } from '../../router'
 import isFilesAppActive from './helpers/isFilesAppActive'
-import { SideBarEventTopics } from '../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default {
   mixins: [isFilesAppActive],
diff --git a/packages/web-app-files/src/mixins/actions/showShares.ts b/packages/web-app-files/src/mixins/actions/showShares.ts
index 687990dd1e8..74b43abf2a1 100644
--- a/packages/web-app-files/src/mixins/actions/showShares.ts
+++ b/packages/web-app-files/src/mixins/actions/showShares.ts
@@ -4,7 +4,7 @@ import { ShareStatus } from 'web-client/src/helpers/share'
 import isFilesAppActive from './helpers/isFilesAppActive'
 import { mapMutations } from 'vuex'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default {
   mixins: [isFilesAppActive],
diff --git a/packages/web-app-files/src/quickActions.js b/packages/web-app-files/src/quickActions.js
index 45aa019043f..037528df24c 100644
--- a/packages/web-app-files/src/quickActions.js
+++ b/packages/web-app-files/src/quickActions.js
@@ -1,7 +1,7 @@
 import { $gettext } from './gettext'
 import { createQuicklink } from './helpers/share'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from './composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export function canShare(item, store) {
   const { capabilities } = store.state.user
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 570a9501ce3..823a7773a44 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -96,7 +96,7 @@ import SideBar from '../../components/SideBar/SideBar.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ResourceTiles from '../../components/FilesList/ResourceTiles.vue'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics, useSideBar } from '../../composables/sideBar'
+import { SideBarEventTopics, useSideBar } from 'web-pkg/src/composables/sideBar'
 import { WebDAV } from 'web-client/src/webdav'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.ts
index 820b369ceb5..4b7a7435f5b 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.ts
@@ -3,7 +3,7 @@ import ResourceTable from '../../../../src/components/FilesList/ResourceTable.vu
 import { extractDomSelector, Resource } from 'web-client/src/helpers'
 import { createStore, defaultPlugins, mount, defaultStoreMockOptions } from 'web-test-helpers'
 import { displayPositionedDropdown, eventBus } from 'web-pkg/src'
-import { SideBarEventTopics } from 'web-app-files/src/composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { mockDeep } from 'jest-mock-extended'
 
 const router = {
diff --git a/packages/web-app-files/tests/unit/mixins/actions/showDetails.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/showDetails.spec.ts
index ac31ffba5a4..a2b5123d736 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/showDetails.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/showDetails.spec.ts
@@ -1,6 +1,6 @@
 import showDetails from 'web-app-files/src/mixins/actions/showDetails'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { SideBarEventTopics } from '../../../../src/composables/sideBar'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import {
   createStore,
   defaultPlugins,
diff --git a/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue
index e66dd9ac4e8..5d1c7c0dad4 100644
--- a/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetails.vue
@@ -77,6 +77,7 @@ import SpaceQuota from '../../../SpaceQuota.vue'
 import { formatDateFromISO } from 'web-pkg/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { eventBus } from 'web-pkg/src/services/eventBus'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   name: 'SpaceDetails',
@@ -266,7 +267,7 @@ export default defineComponent({
   },
   methods: {
     expandSharesPanel() {
-      eventBus.publish('app.files.sidebar.setActivePanel', 'space-share')
+      eventBus.publish(SideBarEventTopics.setActivePanel, 'space-share')
     }
   }
 })
diff --git a/packages/web-pkg/src/mixins/spaces/showMembers.ts b/packages/web-pkg/src/mixins/spaces/showMembers.ts
index 2fcb4b85b26..15596f8d2d7 100644
--- a/packages/web-pkg/src/mixins/spaces/showMembers.ts
+++ b/packages/web-pkg/src/mixins/spaces/showMembers.ts
@@ -1,6 +1,7 @@
 import { mapMutations } from 'vuex'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { useGraphClient } from 'web-pkg/src/composables'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default {
   setup() {
@@ -26,8 +27,7 @@ export default {
 
     $_showMembers_trigger({ resources }) {
       this.SET_FILE_SELECTION(resources)
-      // FIXME: Use SideBarEventTopics from files-app. Maybe make it global?
-      eventBus.publish('app.files.sidebar.openWithPanel', 'space-share')
+      eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share')
     }
   }
 }

From fc585f6dc69aa19f32f04be3326436c11dd852e9 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 13 Jan 2023 11:13:43 +0100
Subject: [PATCH 3/7] Make use of the useSidebar composable in admin-settings

---
 .../src/components/AppTemplate.vue            | 19 ++++++++---
 .../src/views/Groups.vue                      | 28 +++-------------
 .../src/views/Spaces.vue                      | 32 ++-----------------
 .../src/views/Users.vue                       | 28 +++-------------
 .../tests/unit/views/Groups.spec.ts           | 12 +++----
 .../tests/unit/views/Users.spec.ts            | 27 ++++------------
 6 files changed, 37 insertions(+), 109 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index b421bbc0cc6..06c57765fb4 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -13,7 +13,7 @@
                 :aria-label="toggleSidebarButtonLabel"
                 appearance="raw"
                 class="oc-my-s oc-p-xs"
-                @click.stop="$emit('toggleSideBar')"
+                @click.stop="toggleSideBar"
               >
                 <oc-icon name="side-bar-right" :fill-type="toggleSidebarButtonIconFillType" />
               </oc-button>
@@ -30,7 +30,7 @@
         :loading="false"
         :open="sideBarOpen"
         @selectPanel="selectPanel"
-        @close="$emit('closeSideBar')"
+        @close="closeSideBar"
       >
       </side-bar>
     </template>
@@ -41,7 +41,8 @@
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import SideBar from 'web-pkg/src/components/sideBar/SideBar.vue'
 import { defineComponent } from 'vue'
-import { useAppDefaults } from 'web-pkg'
+import { eventBus, useAppDefaults } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   components: {
@@ -70,11 +71,19 @@ export default defineComponent({
       type: String
     }
   },
-  setup(props, { emit }) {
+  setup() {
+    const closeSideBar = () => {
+      eventBus.publish(SideBarEventTopics.close)
+    }
+    const toggleSideBar = () => {
+      eventBus.publish(SideBarEventTopics.toggle)
+    }
     const selectPanel = (panel) => {
-      emit('selectPanel', panel)
+      eventBus.publish(SideBarEventTopics.setActivePanel, panel)
     }
     return {
+      closeSideBar,
+      toggleSideBar,
       selectPanel,
       ...useAppDefaults({
         applicationId: 'admin-settings'
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index e18ecf98bf2..cedc56625ec 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -7,9 +7,6 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
-      @selectPanel="selectPanel"
-      @closeSideBar="closeSideBar"
-      @toggleSideBar="toggleSideBar"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -89,6 +86,7 @@ import DetailsPanel from '../components/Groups/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
+import { useSideBar } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   components: {
@@ -111,6 +109,7 @@ export default defineComponent({
     })
 
     return {
+      ...useSideBar(),
       groups,
       loadResourcesTask,
       graphClient
@@ -121,9 +120,7 @@ export default defineComponent({
       listHeaderPosition: 0,
       selectedGroups: [],
       createGroupModalOpen: false,
-      deleteGroupModalOpen: false,
-      sideBarOpen: false,
-      sideBarActivePanel: 'DetailsPanel'
+      deleteGroupModalOpen: false
     }
   },
   computed: {
@@ -168,15 +165,7 @@ export default defineComponent({
            * Editing groups is currently not supported by backend
            */
         }
-      ]
-    }
-  },
-
-  watch: {
-    selectedGroups() {
-      if (!this.selectedGroups.length || this.selectedGroups.length > 1) {
-        this.sideBarActivePanel = 'DetailsPanel'
-      }
+      ].filter((p) => p.enabled)
     }
   },
 
@@ -224,15 +213,6 @@ export default defineComponent({
     toggleDeleteGroupModal() {
       this.deleteGroupModalOpen = !this.deleteGroupModalOpen
     },
-    selectPanel(panel) {
-      this.sideBarActivePanel = panel || 'DetailsPanel'
-    },
-    toggleSideBar() {
-      this.sideBarOpen = !this.sideBarOpen
-    },
-    closeSideBar() {
-      this.sideBarOpen = false
-    },
     showPanel({ group, panel }) {
       this.selectedGroups = [group]
       this.sideBarActivePanel = panel
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 0ed4dff8445..6069443a250 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -7,9 +7,6 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
-      @closeSideBar="closeSideBar"
-      @toggleSideBar="toggleSideBar"
-      @selectPanel="selectPanel"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -71,6 +68,7 @@ import SpaceDetailsMultiple from 'web-pkg/src/components/sideBar/Spaces/Details/
 import SpaceNoSelection from 'web-pkg/src/components/sideBar/Spaces/SpaceNoSelection.vue'
 import ContextActions from '../components/Spaces/ContextActions.vue'
 import MembersPanel from '../components/Spaces/SideBar/MembersPanel.vue'
+import { useSideBar } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   name: 'SpacesView',
@@ -91,8 +89,6 @@ export default defineComponent({
     const template = ref(null)
     const listHeaderPosition = ref(0)
     const selectedSpaces = ref([])
-    const sideBarOpen = ref(false)
-    const selectedPanel = ref(undefined)
 
     const loadResourcesTask = useTask(function* (signal) {
       const {
@@ -178,27 +174,9 @@ export default defineComponent({
             spaceResource: unref(selectedSpaces)[0]
           }
         }
-      ]
+      ].filter((p) => p.enabled)
     })
 
-    const sideBarActivePanel = computed(() => {
-      if (unref(selectedPanel)) {
-        return unref(selectedPanel)
-      }
-      return unref(sideBarAvailablePanels).find((e) => e.enabled).app
-    })
-
-    const closeSideBar = () => {
-      sideBarOpen.value = false
-      selectedPanel.value = false
-    }
-    const toggleSideBar = () => {
-      sideBarOpen.value = !unref(sideBarOpen)
-    }
-    const selectPanel = (panel) => {
-      selectedPanel.value = panel
-    }
-
     onMounted(async () => {
       await loadResourcesTask.perform()
       loadResourcesEventToken.value = eventBus.subscribe('app.admin-settings.list.load', () => {
@@ -214,6 +192,7 @@ export default defineComponent({
     })
 
     return {
+      ...useSideBar(),
       spaces,
       loadResourcesTask,
       graphClient,
@@ -221,13 +200,8 @@ export default defineComponent({
       breadcrumbs,
       listHeaderPosition,
       selectedSpaces,
-      sideBarOpen,
       sideBarAvailablePanels,
-      sideBarActivePanel,
-      closeSideBar,
-      toggleSideBar,
       template,
-      selectPanel,
       toggleSelectAllSpaces,
       toggleSelectSpace,
       unselectAllSpaces
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 9814cf5f957..2d5815f9a0e 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -7,9 +7,6 @@
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-open="sideBarOpen"
-      @selectPanel="selectPanel"
-      @closeSideBar="closeSideBar"
-      @toggleSideBar="toggleSideBar"
     >
       <template #topbarActions>
         <div class="admin-settings-app-bar-actions oc-mt-xs">
@@ -95,6 +92,7 @@ import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
 import { useLoadTasks } from '../composables/loadTasks/useLoadTasks'
+import { useSideBar } from 'web-pkg/src/composables/sideBar'
 
 export default defineComponent({
   name: 'UsersView',
@@ -159,6 +157,7 @@ export default defineComponent({
     })
 
     return {
+      ...useSideBar(),
       addRoleAssignment,
       users,
       roles,
@@ -174,9 +173,7 @@ export default defineComponent({
       listHeaderPosition: 0,
       selectedUsers: [],
       createUserModalOpen: false,
-      deleteUserModalOpen: false,
-      sideBarOpen: false,
-      sideBarActivePanel: 'DetailsPanel'
+      deleteUserModalOpen: false
     }
   },
   computed: {
@@ -233,15 +230,7 @@ export default defineComponent({
           componentAttrs: { user: this.selectedUsers[0], groups: this.groups },
           componentListeners: { confirm: this.editUserGroupAssignments }
         }
-      ]
-    }
-  },
-
-  watch: {
-    selectedUsers() {
-      if (!this.selectedUsers.length || this.selectedUsers.length > 1) {
-        this.sideBarActivePanel = 'DetailsPanel'
-      }
+      ].filter((p) => p.enabled)
     }
   },
 
@@ -292,15 +281,6 @@ export default defineComponent({
     toggleDeleteUserModal() {
       this.deleteUserModalOpen = !this.deleteUserModalOpen
     },
-    selectPanel(panel) {
-      this.sideBarActivePanel = panel || 'DetailsPanel'
-    },
-    toggleSideBar() {
-      this.sideBarOpen = !this.sideBarOpen
-    },
-    closeSideBar() {
-      this.sideBarOpen = false
-    },
     async showPanel({ user, panel }) {
       await this.loadAdditionalUserDataTask.perform(this, user)
       this.selectedUsers = [user]
diff --git a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
index 6344686cd6f..d48a254d96f 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
@@ -88,22 +88,22 @@ describe('Groups view', () => {
      * As soon as edit panel will be available in group management, please un-skip it.
      */
     // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('should contain EditPanel with property enabled set true when one group is selected', () => {
+    it.skip('should contain EditPanel when one group is selected', () => {
       const wrapper = getMountedWrapper({ data: { selectedGroups: [{ id: '1' }] } })
       expect(
         wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel').enabled
       ).toBeTruthy()
     })
-    it('should contain EditPanel with property enabled set false when no group is selected', () => {
+    it('should contain DetailsPanel when no group is selected', () => {
       const wrapper = getMountedWrapper({ data: { selectedGroups: [] } })
       expect(
-        wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel').enabled
-      ).toBeFalsy()
+        wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'DetailsPanel').enabled
+      ).toBeTruthy()
     })
-    it('should contain EditPanel with property enabled set false when multiple groups are selected', () => {
+    it('should not contain EditPanel multiple groups are selected', () => {
       const wrapper = getMountedWrapper({ data: { selectedGroups: [{ id: '1' }, { id: '2' }] } })
       expect(
-        wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel').enabled
+        wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel')
       ).toBeFalsy()
     })
   })
diff --git a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
index e92d65797c0..5f0754ace1f 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
@@ -192,22 +192,22 @@ describe('Users view', () => {
   })
 
   describe('computed method "sideBarAvailablePanels"', () => {
-    it('should contain EditPanel with property enabled set true when one user is selected', () => {
+    it('should contain EditPanel when one user is selected', () => {
       const { wrapper } = getMountedWrapper({ data: { selectedUsers: [{ id: '1' }] } })
       expect(
         wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel').enabled
       ).toBeTruthy()
     })
-    it('should contain EditPanel with property enabled set false when no user is selected', () => {
+    it('should contain DetailsPanel no user is selected', () => {
       const { wrapper } = getMountedWrapper({ data: { selectedUsers: [] } })
       expect(
-        wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel').enabled
-      ).toBeFalsy()
+        wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'DetailsPanel').enabled
+      ).toBeTruthy()
     })
-    it('should contain EditPanel with property enabled set false when multiple users are selected', () => {
+    it('should not contain EditPanel when multiple users are selected', () => {
       const { wrapper } = getMountedWrapper({ data: { selectedUsers: [{ id: '1' }, { id: '2' }] } })
       expect(
-        wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel').enabled
+        wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel')
       ).toBeFalsy()
     })
   })
@@ -233,21 +233,6 @@ describe('Users view', () => {
       expect(wrapper.vm.allUsersSelected).toBeFalsy()
     })
   })
-
-  describe('method toggleSideBar', () => {
-    it('should set sideBarOpen to true if current value is false', () => {
-      const { wrapper } = getMountedWrapper({})
-      wrapper.vm.sideBarOpen = false
-      wrapper.vm.toggleSideBar()
-      expect(wrapper.vm.sideBarOpen).toBeTruthy()
-    })
-    it('should set sideBarOpen to false if current value is true', () => {
-      const { wrapper } = getMountedWrapper({})
-      wrapper.vm.sideBarOpen = true
-      wrapper.vm.toggleSideBar()
-      expect(wrapper.vm.sideBarOpen).toBeFalsy()
-    })
-  })
 })
 
 function getMountedWrapper({ data = {}, graph = defaultGraphMock() } = {}) {

From 5ae5da05004234ad5c5ad5367804a0809c375786 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 13 Jan 2023 11:14:15 +0100
Subject: [PATCH 4/7] Implement showDetails-action in spaces management

---
 .../src/components/Spaces/ContextActions.vue  | 17 ++++++++----
 .../src/mixins/showDetails.ts                 | 27 +++++++++++++++++++
 .../components/Spaces/ContextActions.spec.ts  |  3 ++-
 3 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 packages/web-app-admin-settings/src/mixins/showDetails.ts

diff --git a/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue b/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue
index a7c7b589e71..d60c3b79cf9 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue
@@ -17,6 +17,7 @@ import EditDescription from 'web-pkg/src/mixins/spaces/editDescription'
 import EditQuota from 'web-pkg/src/mixins/spaces/editQuota'
 import Rename from 'web-pkg/src/mixins/spaces/rename'
 import Restore from 'web-pkg/src/mixins/spaces/restore'
+import ShowDetails from '../../mixins/showDetails'
 import { computed, defineComponent, getCurrentInstance, PropType, unref } from 'vue'
 import { Resource } from 'web-client'
 import ContextActionMenu from 'web-pkg/src/components/ContextActions/ContextActionMenu.vue'
@@ -25,15 +26,13 @@ import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue'
 export default defineComponent({
   name: 'ContextActions',
   components: { ContextActionMenu, QuotaModal },
-  mixins: [Delete, Disable, EditDescription, EditQuota, Rename, Restore],
-
+  mixins: [Delete, Disable, EditDescription, EditQuota, Rename, Restore, ShowDetails],
   props: {
     items: {
       type: Array as PropType<Resource[]>,
       required: true
     }
   },
-
   setup(props) {
     const instance = getCurrentInstance().proxy
 
@@ -51,6 +50,10 @@ export default defineComponent({
         ...instance.$_delete_items
       ].filter((item) => item.isEnabled(unref(filterParams)))
     )
+    const menuItemsSidebar = computed(() =>
+      [...instance.$_showDetails_items].filter((item) => item.isEnabled(unref(filterParams)))
+    )
+
     const menuSections = computed(() => {
       const sections = []
 
@@ -66,7 +69,12 @@ export default defineComponent({
           items: unref(menuItemsSecondaryActions)
         })
       }
-
+      if (unref(menuItemsSidebar).length) {
+        sections.push({
+          name: 'sidebar',
+          items: unref(menuItemsSidebar)
+        })
+      }
       return sections
     })
 
@@ -78,7 +86,6 @@ export default defineComponent({
     const spaceQuotaUpdated = (quota) => {
       instance.$data.$_editQuota_selectedSpace.spaceQuota = quota
     }
-
     return {
       menuSections,
       quotaModalSelectedSpace,
diff --git a/packages/web-app-admin-settings/src/mixins/showDetails.ts b/packages/web-app-admin-settings/src/mixins/showDetails.ts
new file mode 100644
index 00000000000..9db82823137
--- /dev/null
+++ b/packages/web-app-admin-settings/src/mixins/showDetails.ts
@@ -0,0 +1,27 @@
+import { eventBus } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+
+export default {
+  computed: {
+    $_showDetails_items() {
+      return [
+        {
+          name: 'show-details',
+          icon: 'information',
+          label: () => this.$gettext('Details'),
+          handler: this.$_showDetails_trigger,
+          isEnabled: ({ resources }) => {
+            return resources.length > 0
+          },
+          componentType: 'button',
+          class: 'oc-spaces-actions-show-details-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    $_showDetails_trigger() {
+      eventBus.publish(SideBarEventTopics.open)
+    }
+  }
+}
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/ContextActions.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/ContextActions.spec.ts
index d2a9db434eb..93af69eed19 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/ContextActions.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/ContextActions.spec.ts
@@ -16,7 +16,8 @@ const mixins = [
   '$_editQuota_items',
   '$_disable_items',
   '$_restore_items',
-  '$_delete_items'
+  '$_delete_items',
+  '$_showDetails_items'
 ]
 
 const Component = {

From a36203fa777b0d46acb816b74182608d6819a9af Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 13 Jan 2023 13:05:54 +0100
Subject: [PATCH 5/7] Add PR link to changelog#

---
 changelog/unreleased/enhancement-spaces-list-in-admin-settings | 1 +
 1 file changed, 1 insertion(+)

diff --git a/changelog/unreleased/enhancement-spaces-list-in-admin-settings b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
index e4d63736ae2..5ab3ec5319e 100644
--- a/changelog/unreleased/enhancement-spaces-list-in-admin-settings
+++ b/changelog/unreleased/enhancement-spaces-list-in-admin-settings
@@ -10,4 +10,5 @@ https://github.com/owncloud/web/pull/8199
 https://github.com/owncloud/web/pull/8224
 https://github.com/owncloud/web/pull/8228
 https://github.com/owncloud/web/pull/8229
+https://github.com/owncloud/web/pull/8231
 https://github.com/owncloud/web/issues/8219

From b901a7f8a129c73071ea323de7f6d4bc252aadff Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 13 Jan 2023 13:19:06 +0100
Subject: [PATCH 6/7] Add sideBar event unit tests in AppTemplate

---
 .../tests/unit/components/AppTemplate.spec.ts | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
index d678e33c538..7f5ce052e25 100644
--- a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
@@ -6,11 +6,14 @@ import {
   defaultStoreMockOptions,
   shallowMount
 } from 'web-test-helpers'
+import { eventBus } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 const stubSelectors = {
   ocBreadcrumb: 'oc-breadcrumb-stub',
   appLoadingSpinner: 'app-loading-spinner-stub',
-  sideBar: 'side-bar-stub'
+  sideBar: 'side-bar-stub',
+  sideBarToggleButton: '#files-toggle-sidebar'
 }
 
 const elSelectors = {
@@ -50,17 +53,34 @@ describe('AppTemplate', () => {
       expect(wrapper.find(elSelectors.adminSettingsWrapper).exists()).toBeTruthy()
     })
   })
-  describe('sideBarOpen is true', () => {
-    it('should show side bar component', () => {
+  describe('sideBar', () => {
+    it('should show when opened', () => {
       const { wrapper } = getWrapper({ propsData: { sideBarOpen: true } })
       expect(wrapper.find(stubSelectors.sideBar).exists()).toBeTruthy()
     })
-  })
-  describe('sideBarOpen is false', () => {
-    it('should not show side bar component', () => {
+    it('should not show when closed', () => {
       const { wrapper } = getWrapper({ propsData: { sideBarOpen: false } })
       expect(wrapper.find(stubSelectors.sideBar).exists()).toBeFalsy()
     })
+    it('can be toggled', async () => {
+      const eventSpy = jest.spyOn(eventBus, 'publish')
+      const { wrapper } = getWrapper()
+      await wrapper.find(stubSelectors.sideBarToggleButton).trigger('click')
+      expect(eventSpy).toHaveBeenCalledWith(SideBarEventTopics.toggle)
+    })
+    it('can be closed', async () => {
+      const eventSpy = jest.spyOn(eventBus, 'publish')
+      const { wrapper } = getWrapper()
+      ;(wrapper.findComponent<any>(stubSelectors.sideBar).vm as any).$emit('close')
+      expect(eventSpy).toHaveBeenCalledWith(SideBarEventTopics.close)
+    })
+    it('panel can be selected', async () => {
+      const eventSpy = jest.spyOn(eventBus, 'publish')
+      const panelName = 'SomePanel'
+      const { wrapper } = getWrapper()
+      ;(wrapper.findComponent<any>(stubSelectors.sideBar).vm as any).$emit('selectPanel', panelName)
+      expect(eventSpy).toHaveBeenCalledWith(SideBarEventTopics.setActivePanel, panelName)
+    })
   })
   describe('property propagation', () => {
     describe('oc breadcrumb component', () => {
@@ -109,6 +129,9 @@ function getWrapper({ propsData = {} } = {}) {
       },
       global: {
         plugins: [...defaultPlugins(), store],
+        stubs: {
+          OcButton: false
+        },
         mocks: {
           ...defaultComponentMocks({
             gettext: false,

From 91e6b41f34bc89035e03b12f6a087a974d35d04d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 13 Jan 2023 14:31:09 +0100
Subject: [PATCH 7/7] Improve showDetails action class name, use enum for
 SideBarEventTopics

---
 .../web-app-admin-settings/src/mixins/showDetails.ts |  2 +-
 .../web-pkg/src/composables/sideBar/eventTopics.ts   | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-admin-settings/src/mixins/showDetails.ts b/packages/web-app-admin-settings/src/mixins/showDetails.ts
index 9db82823137..cb2a75b1060 100644
--- a/packages/web-app-admin-settings/src/mixins/showDetails.ts
+++ b/packages/web-app-admin-settings/src/mixins/showDetails.ts
@@ -14,7 +14,7 @@ export default {
             return resources.length > 0
           },
           componentType: 'button',
-          class: 'oc-spaces-actions-show-details-trigger'
+          class: 'oc-admin-settings-show-details-trigger'
         }
       ]
     }
diff --git a/packages/web-pkg/src/composables/sideBar/eventTopics.ts b/packages/web-pkg/src/composables/sideBar/eventTopics.ts
index bb92c0d878f..55d98e4c41c 100644
--- a/packages/web-pkg/src/composables/sideBar/eventTopics.ts
+++ b/packages/web-pkg/src/composables/sideBar/eventTopics.ts
@@ -1,7 +1,7 @@
-export abstract class SideBarEventTopics {
-  public static readonly open = 'sidebar.open'
-  public static readonly close = 'sidebar.close'
-  public static readonly toggle = 'sidebar.toggle'
-  public static readonly openWithPanel = 'sidebar.openWithPanel'
-  public static readonly setActivePanel = 'sidebar.setActivePanel'
+export enum SideBarEventTopics {
+  open = 'sidebar.open',
+  close = 'sidebar.close',
+  toggle = 'sidebar.toggle',
+  openWithPanel = 'sidebar.openWithPanel',
+  setActivePanel = 'sidebar.setActivePanel'
 }