bug(*) set proper route on click (#208)

Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com>

src/components/Sidebar/NavItem.spec.ts

@@ -0,0 +1,23 @@
+import renderWithVuex from '@/testUtils/renderWithVuex'
+import TestComponent from '@/testUtils/TestComponent.vue'
+import NavItem from './NavItem.vue'
+
+describe('NavItem.vue', () => {
+  it('renders snapshot with link to selected mesh', async () => {
+    const { container } = renderWithVuex(NavItem, {
+      routes: [
+        {
+          path: '/:mesh/default',
+          name: 'default',
+          component: TestComponent,
+        },
+      ],
+      propsData: {
+        name: 'Default',
+        link: 'default',
+      },
+    })
+
+    expect(container).toMatchSnapshot()
+  })
+})

src/components/Sidebar/NavItem.vue

@@ -53,6 +53,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { datadogLogs } from '@datadog/browser-logs'
 import { datadogLogEvents } from '@/datadogEvents'
 
@@ -103,8 +104,13 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      selectedMesh: 'getSelectedMesh',
+    }),
     routerLink() {
-      const params = !this.subNav && Object.keys(this.$route?.params || {}).length > 0 ? this.$route?.params : undefined
+      const params = {
+        mesh: this.selectedMesh,
+      }
 
       const link = () => {
         if (this.link) {

src/components/Sidebar/__snapshots__/NavItem.spec.ts.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavItem.vue renders snapshot with link to selected mesh 1`] = `
+<div>
+  <div
+    class="nav-item is-menu-item"
+  >
+     
+    <a
+      class=""
+      href="#/all/default"
+    >
+      <!---->
+       
+      <div
+        class="nav-link"
+      >
+        
+        Default
+      
+      </div>
+       
+    </a>
+  </div>
+</div>
+`;

src/components/Utils/MeshSelector.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'MeshSelector',
   props: {
@@ -44,12 +46,9 @@ export default {
     },
   },
   computed: {
-    selectedMesh() {
-      const stored = localStorage.getItem('selectedMesh')
-      const query = this.$route.params.mesh
-
-      return stored || query
-    },
+    ...mapGetters({
+      selectedMesh: 'getSelectedMesh',
+    }),
   },
   methods: {
     changeMesh(event) {