refactor: transform useSidebar composable to a pinia store

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -48,13 +48,9 @@
         </div>
         <side-bar
           v-if="isSideBarOpen"
-          :active-panel="sideBarActivePanel"
           :available-panels="sideBarAvailablePanels"
           :panel-context="sideBarPanelContext"
           :loading="sideBarLoading"
-          :is-open="isSideBarOpen"
-          @select-panel="selectPanel"
-          @close="closeSideBar"
         >
           <template #header>
             <slot name="sideBarHeader" />
@@ -73,7 +69,8 @@ import {
   BatchActions,
   SideBarPanelContext,
   Action,
-  useIsTopBarSticky
+  useIsTopBarSticky,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import {
   defineComponent,
@@ -83,15 +80,15 @@ import {
   Ref,
   ref,
   unref,
-  VNodeRef,
+  useTemplateRef,
   watch
 } from 'vue'
-import { eventBus, useAppDefaults } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
+import { useAppDefaults } from '@opencloud-eu/web-pkg'
 import { SideBarPanel } from '@opencloud-eu/web-pkg'
 import { BreadcrumbItem } from '@opencloud-eu/design-system/helpers'
 import { ViewOptions } from '@opencloud-eu/web-pkg'
 import { Item } from '@opencloud-eu/web-client'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   components: {
@@ -105,11 +102,6 @@ export default defineComponent({
       required: true,
       type: Array as PropType<BreadcrumbItem[]>
     },
-    isSideBarOpen: {
-      required: false,
-      type: Boolean,
-      default: false
-    },
     sideBarAvailablePanels: {
       required: false,
       type: Array as PropType<SideBarPanel<unknown, unknown, unknown>[]>,
@@ -120,11 +112,6 @@ export default defineComponent({
       type: Object as PropType<SideBarPanelContext<unknown, unknown, unknown>>,
       default: (): SideBarPanelContext<unknown, unknown, unknown> => ({})
     },
-    sideBarActivePanel: {
-      required: false,
-      type: [String, null],
-      default: null
-    },
     loading: {
       required: false,
       type: Boolean,
@@ -161,47 +148,41 @@ export default defineComponent({
       default: true
     }
   },
-  setup(props) {
-    const appBarRef = ref<VNodeRef>()
+  setup() {
+    const sidebarStore = useSideBar()
+    const { isSideBarOpen } = storeToRefs(sidebarStore)
+    const appBarRef = useTemplateRef<HTMLElement>('appBarRef')
     const limitedScreenSpace = ref(false)
     const { isSticky } = useIsTopBarSticky()
 
     const onResize = () => {
-      limitedScreenSpace.value = props.isSideBarOpen
+      limitedScreenSpace.value = unref(isSideBarOpen)
         ? window.innerWidth <= 1600
         : window.innerWidth <= 1200
     }
     const resizeObserver = new ResizeObserver(onResize)
 
-    const closeSideBar = () => {
-      eventBus.publish(SideBarEventTopics.close)
-    }
-    const selectPanel = (panel: string) => {
-      eventBus.publish(SideBarEventTopics.setActivePanel, panel)
-    }
-
     watch(
       appBarRef,
       (ref) => {
         if (ref) {
-          resizeObserver.observe(unref(appBarRef) as unknown as HTMLElement)
+          resizeObserver.observe(unref(appBarRef))
         }
       },
       { immediate: true }
     )
 
     onBeforeUnmount(() => {
       if (unref(appBarRef)) {
-        resizeObserver.unobserve(unref(appBarRef) as unknown as HTMLElement)
+        resizeObserver.unobserve(unref(appBarRef))
       }
     })
 
     return {
       isMobileWidth: inject<Ref<boolean>>('isMobileWidth'),
       appBarRef,
       limitedScreenSpace,
-      closeSideBar,
-      selectPanel,
+      isSideBarOpen,
       ...useAppDefaults({
         applicationId: 'admin-settings'
       }),

packages/web-app-admin-settings/src/components/Groups/GroupsList.vue

@@ -137,13 +137,13 @@ import {
   displayPositionedDropdown,
   eventBus,
   Pagination,
-  SideBarEventTopics,
   useFileListHeaderPosition,
   useIsTopBarSticky,
   useKeyboardActions,
   usePagination,
   useRoute,
-  useRouter
+  useRouter,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
 import { useGettext } from 'vue3-gettext'
@@ -171,6 +171,7 @@ export default defineComponent({
     const router = useRouter()
     const route = useRoute()
     const { isSticky } = useIsTopBarSticky()
+    const { openSideBar, openSideBarPanel } = useSideBar()
 
     const lastSelectedGroupIndex = ref(0)
     const lastSelectedGroupId = ref<string>()
@@ -208,7 +209,7 @@ export default defineComponent({
       if (!isGroupSelected(group)) {
         selectGroup(group)
       }
-      eventBus.publish(SideBarEventTopics.open)
+      openSideBar()
     }
     const rowClicked = (data: [Group, MouseEvent | KeyboardEvent]) => {
       const resource = data[0]
@@ -268,7 +269,7 @@ export default defineComponent({
       if (!isGroupSelected(group)) {
         selectGroup(group)
       }
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel')
+      openSideBarPanel('EditPanel')
     }
 
     const readOnlyLabel = computed(() => $gettext("This group is read-only and can't be edited"))

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -130,7 +130,8 @@ import {
   useKeyboardActions,
   ContextMenuBtnClickEventData,
   useIsTopBarSticky,
-  useSharesStore
+  useSharesStore,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import {
   ComponentPublicInstance,
@@ -147,7 +148,6 @@ import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
 import { eventBus } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { ContextMenuQuickAction } from '@opencloud-eu/web-pkg'
 import {
   useFileListHeaderPosition,
@@ -172,6 +172,7 @@ const language = useGettext()
 const { $gettext } = language
 const { isSticky } = useIsTopBarSticky()
 const sharesStore = useSharesStore()
+const { openSideBar } = useSideBar()
 
 const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
 const contextMenuButtonRef =
@@ -487,7 +488,7 @@ const spaceDetailsLabel = computed(() => {
 })
 const showDetailsForSpace = (space: SpaceResource) => {
   selectSpace(space)
-  eventBus.publish(SideBarEventTopics.open)
+  openSideBar()
 }
 
 const selectSpace = (selectedSpace: SpaceResource) => {

packages/web-app-admin-settings/src/components/Users/UsersList.vue

@@ -131,13 +131,13 @@ import {
   eventBus,
   Pagination,
   queryItemAsString,
-  SideBarEventTopics,
   useFileListHeaderPosition,
   useIsTopBarSticky,
   useKeyboardActions,
   usePagination,
   useRouteQuery,
-  UserAvatar
+  UserAvatar,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import { AppRole, User } from '@opencloud-eu/web-client/graph/generated'
 import { perPageDefault, perPageStoragePrefix } from '../../defaults'
@@ -169,6 +169,7 @@ export default defineComponent({
   setup(props) {
     const { $gettext } = useGettext()
     const { isSticky } = useIsTopBarSticky()
+    const { openSideBar, openSideBarPanel } = useSideBar()
 
     const tableRef = useTemplateRef<ComponentPublicInstance<typeof OcTable>>('tableRef')
     const contextMenuButtonRef =
@@ -214,21 +215,21 @@ export default defineComponent({
       if (!isUserSelected(user)) {
         selectUser(user)
       }
-      eventBus.publish(SideBarEventTopics.open)
+      openSideBar()
     }
 
     const showEditPanel = (user: User) => {
       if (!isUserSelected(user)) {
         selectUser(user)
       }
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel')
+      openSideBarPanel('EditPanel')
     }
 
     const showUserAssigmentPanel = (user: User) => {
       if (!isUserSelected(user)) {
         selectUser(user)
       }
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'UserAssignmentsPanel')
+      openSideBarPanel('UserAssignmentsPanel')
     }
 
     const rowClicked = (data: [User, MouseEvent | KeyboardEvent]) => {

packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts

@@ -1,18 +1,17 @@
-import { eventBus } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
-import { GroupAction } from '@opencloud-eu/web-pkg'
+import { GroupAction, useSideBar } from '@opencloud-eu/web-pkg'
 
 export const useGroupActionsEdit = () => {
   const { $gettext } = useGettext()
+  const { openSideBarPanel } = useSideBar()
 
   const actions = computed((): GroupAction[] => [
     {
       name: 'edit',
       icon: 'pencil',
       label: () => $gettext('Edit'),
-      handler: () => eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel'),
+      handler: () => openSideBarPanel('EditPanel'),
       isVisible: ({ resources }) => {
         return resources.length === 1 && !resources[0].groupTypes?.includes('ReadOnly')
       },

packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEdit.ts

@@ -1,18 +1,17 @@
-import { eventBus } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
-import { UserAction } from '@opencloud-eu/web-pkg'
+import { UserAction, useSideBar } from '@opencloud-eu/web-pkg'
 
 export const useUserActionsEdit = () => {
   const { $gettext } = useGettext()
+  const { openSideBarPanel } = useSideBar()
 
   const actions = computed((): UserAction[] => [
     {
       name: 'edit',
       icon: 'pencil',
       label: () => $gettext('Edit'),
-      handler: () => eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel'),
+      handler: () => openSideBarPanel('EditPanel'),
       isVisible: ({ resources }) => {
         return resources.length === 1
       },

packages/web-app-admin-settings/src/views/General.vue

@@ -8,8 +8,6 @@
         }
       ]"
       :show-app-bar="false"
-      :is-side-bar-open="isSideBarOpen"
-      :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
     >
       <template #mainContent>
@@ -22,16 +20,12 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentPublicInstance, useTemplateRef } from 'vue'
 import AppTemplate from '../components/AppTemplate.vue'
 import InfoSection from '../components/General/InfoSection.vue'
 import DetailsPanel from '../components/General/SideBar/DetailsPanel.vue'
 import { useGettext } from 'vue3-gettext'
-import { useSideBar } from '@opencloud-eu/web-pkg'
 
-const template = useTemplateRef<ComponentPublicInstance<typeof AppTemplate>>('template')
 const { $gettext } = useGettext()
-const { isSideBarOpen, sideBarActivePanel } = useSideBar()
 
 const sideBarAvailablePanels = [
   {

packages/web-app-admin-settings/src/views/Groups.vue

@@ -4,10 +4,8 @@
       ref="template"
       :loading="loadResourcesTask.isRunning || !loadResourcesTask.last"
       :breadcrumbs="breadcrumbs"
-      :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-panel-context="sideBarPanelContext"
-      :is-side-bar-open="isSideBarOpen"
       :show-batch-actions="!!selectedGroups.length"
       :batch-actions="batchActions"
       :batch-action-items="selectedGroups"
@@ -63,8 +61,7 @@ import {
   NoContentMessage,
   SideBarPanel,
   SideBarPanelContext,
-  useClientService,
-  useSideBar
+  useClientService
 } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
 import {
@@ -181,7 +178,6 @@ export default defineComponent({
     })
 
     return {
-      ...useSideBar(),
       groups,
       selectedGroups,
       template,

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -4,10 +4,8 @@
       ref="template"
       :loading="loadResourcesTask.isRunning || !loadResourcesTask.last"
       :breadcrumbs="breadcrumbs"
-      :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-panel-context="sideBarPanelContext"
-      :is-side-bar-open="isSideBarOpen"
       :show-batch-actions="!!selectedSpaces.length"
       :batch-actions="batchActions"
       :batch-action-items="selectedSpaces"
@@ -95,7 +93,8 @@ import { Quota } from '@opencloud-eu/web-client/graph/generated'
 
 const clientService = useClientService()
 const { $gettext } = useGettext()
-const { isSideBarOpen, sideBarActivePanel } = useSideBar()
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
 const { can } = useAbility()
 
 let loadResourcesEventToken: string