refactor: remove left sidebar nav state from vuex store

No need to handle the state in a vuex store module, it can be simply handled within the `Application` component.

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

@@ -2,16 +2,16 @@
   <div
     id="web-nav-sidebar"
     :class="{
-      'oc-app-navigation-collapsed': navigation.closed,
-      'oc-app-navigation-expanded': !navigation.closed
+      'oc-app-navigation-collapsed': closed,
+      'oc-app-navigation-expanded': !closed
     }"
   >
     <oc-button
       appearance="raw"
       :class="toggleSidebarButtonClass"
       class="toggle-sidebar-button oc-pb-s oc-pt-m"
       :aria-label="$gettext('Toggle sidebar')"
-      @click="toggleSidebarButtonClick"
+      @click="$emit('update:nav-bar-closed', !closed)"
     >
       <oc-icon size="large" fill-type="line" :name="toggleSidebarButtonIcon" />
     </oc-button>
@@ -37,7 +37,7 @@
           :icon="link.icon"
           :fill-type="link.fillType"
           :name="link.name"
-          :collapsed="navigation.closed"
+          :collapsed="closed"
           :tag="link.tag"
           :handler="link.handler"
         />
@@ -60,7 +60,6 @@ import {
   unref,
   watch
 } from 'vue'
-import { mapState, mapActions } from 'vuex'
 import * as uuid from 'uuid'
 import SidebarNavItem from './SidebarNavItem.vue'
 import { NavItem } from '../../helpers/navItems'
@@ -73,8 +72,10 @@ export default defineComponent({
     navItems: {
       type: Array as PropType<NavItem[]>,
       required: true
-    }
+    },
+    closed: { type: Boolean, default: false }
   },
+  emits: ['update:nav-bar-closed'],
   setup(props) {
     let resizeObserver
     const navItemRefs = ref<Record<string, ComponentPublicInstance>>({})
@@ -129,29 +130,21 @@ export default defineComponent({
     return { highlighterAttrs, navItemRefs }
   },
   computed: {
-    ...mapState(['navigation']),
-
     toggleSidebarButtonClass() {
-      return this.navigation.closed
+      return this.closed
         ? 'toggle-sidebar-button-collapsed'
         : 'toggle-sidebar-button-expanded oc-pr-s'
     },
 
     toggleSidebarButtonIcon() {
-      return this.navigation.closed ? 'arrow-drop-right' : 'arrow-drop-left'
+      return this.closed ? 'arrow-drop-right' : 'arrow-drop-left'
     },
 
     isAnyNavItemActive() {
       return this.navItems.some((i) => i.active === true)
     }
   },
   methods: {
-    ...mapActions(['openNavigation', 'closeNavigation']),
-
-    toggleSidebarButtonClick() {
-      return this.navigation.closed ? this.openNavigation() : this.closeNavigation()
-    },
-
     getUuid() {
       return uuid.v4().replaceAll('-', '')
     }

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

@@ -11,7 +11,13 @@
       <div class="app-container oc-flex">
         <app-loading-spinner v-if="isLoading" />
         <template v-else>
-          <sidebar-nav v-if="isSidebarVisible" class="app-navigation" :nav-items="navItems" />
+          <sidebar-nav
+            v-if="isSidebarVisible"
+            class="app-navigation"
+            :nav-items="navItems"
+            :closed="navBarClosed"
+            @update:nav-bar-closed="setNavBarClosed"
+          />
           <portal to="app.runtime.mobile.nav">
             <mobile-nav v-if="isMobileWidth" :nav-items="navItems" />
           </portal>
@@ -174,12 +180,19 @@ export default defineComponent({
       return unref(navItems).length && !unref(isMobileWidth)
     })
 
+    const navBarClosed = ref(false)
+    const setNavBarClosed = (value: boolean) => {
+      navBarClosed.value = value
+    }
+
     return {
       isSidebarVisible,
       isLoading,
       navItems,
       onResize,
-      isMobileWidth
+      isMobileWidth,
+      navBarClosed,
+      setNavBarClosed
     }
   },
   computed: {

packages/web-runtime/src/store/navigation.ts

@@ -1,7 +1,6 @@
 const state = {
   // static nav items are set during extension loading and will not be modified later on
-  staticNavItems: {},
-  closed: false
+  staticNavItems: {}
 }
 
 const mutations = {
@@ -18,9 +17,6 @@ const mutations = {
     const staticNavItems = state.staticNavItems
     staticNavItems[extension] = navItems
     state.staticNavItems = staticNavItems
-  },
-  SET_CLOSED(state, closed) {
-    state.closed = closed
   }
 }
 
@@ -49,14 +45,7 @@ const getters = {
   }
 }
 
-const actions = {
-  openNavigation({ commit }) {
-    commit('SET_CLOSED', false)
-  },
-  closeNavigation({ commit }) {
-    commit('SET_CLOSED', true)
-  }
-}
+const actions = {}
 export default {
   state,
   mutations,

packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.ts

@@ -1,6 +1,6 @@
 import SidebarNav from 'web-runtime/src/components/SidebarNav/SidebarNav.vue'
 import sidebarNavItemFixtures from '../../../__fixtures__/sidebarNavItems'
-import { createStore, defaultPlugins, defaultStoreMockOptions, mount } from 'web-test-helpers'
+import { defaultPlugins, mount } from 'web-test-helpers'
 
 jest.mock('uuid', () => ({
   v4: () => {
@@ -21,18 +21,18 @@ describe('OcSidebarNav', () => {
     const { wrapper } = getWrapper()
     expect(wrapper.html()).toMatchSnapshot()
   })
-  it('toggles into closed state upon button click', async () => {
-    const { wrapper, storeOptions } = getWrapper()
-    await wrapper.find('.toggle-sidebar-button').trigger('click')
-    await wrapper.vm.$nextTick()
-    expect(storeOptions.actions.closeNavigation).toHaveBeenCalled()
+  it('expands the navbar in open state', () => {
+    const { wrapper } = getWrapper({ closed: false })
+    expect(wrapper.find('.oc-app-navigation-expanded').exists).toBeTruthy()
+  })
+  it('collapses the navbar in closed state', () => {
+    const { wrapper } = getWrapper({ closed: true })
+    expect(wrapper.find('.oc-app-navigation-collapsed').exists).toBeTruthy()
   })
-  it('toggles back into open state upon button click', async () => {
-    const { wrapper, storeOptions } = getWrapper()
-    storeOptions.state.navigation.closed = true
+  it('emits "update:nav-bar-closed" upon button click', async () => {
+    const { wrapper } = getWrapper()
     await wrapper.find('.toggle-sidebar-button').trigger('click')
-    await wrapper.vm.$nextTick()
-    expect(storeOptions.actions.openNavigation).toHaveBeenCalled()
+    expect(wrapper.emitted('update:nav-bar-closed').length).toBeGreaterThan(0)
   })
   it('initially sets the highlighter to the active nav item', async () => {
     const { wrapper } = getWrapper()
@@ -46,19 +46,17 @@ describe('OcSidebarNav', () => {
   })
 })
 
-function getWrapper() {
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
+function getWrapper({ closed = false } = {}) {
   return {
-    storeOptions,
     wrapper: mount(SidebarNav, {
       slots,
       props: {
-        navItems: sidebarNavItemFixtures
+        navItems: sidebarNavItemFixtures,
+        closed
       },
       global: {
         renderStubDefaultSlot: true,
-        plugins: [...defaultPlugins(), store],
+        plugins: [...defaultPlugins()],
         stubs: { SidebarNavItem: true }
       }
     })

packages/web-test-helpers/src/mocks/store/defaultStoreMockOptions.ts

@@ -31,14 +31,5 @@ export const defaultStoreMockOptions = {
         mimeTypes: jest.fn(() => ({}))
       }
     }
-  },
-  actions: {
-    openNavigation: jest.fn(),
-    closeNavigation: jest.fn()
-  },
-  state: {
-    navigation: {
-      closed: false
-    }
   }
 } // FIXME: when we switch to TypeScript 4.9: satisfies StoreOptionsExtended<any>