From 4e38d8666052f5010f612c5b995ec167e4df791c Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Mon, 4 Jul 2022 12:24:48 +0200
Subject: [PATCH 1/7] Add search nav item

---
 packages/web-app-files/src/index.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index 416dadbcae4..779cdc2b88d 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -41,6 +41,16 @@ const appInfo = {
   fileSideBars
 }
 const navItems = [
+  {
+    name: $gettext('Search'),
+    icon: 'search',
+    route: {
+      path: `/${appInfo.id}/search/list`
+    },
+    enabled() {
+      return window.location.pathname === this.route.path
+    }
+  },
   {
     name(capabilities) {
       return capabilities.spaces?.enabled ? $gettext('Personal') : $gettext('All files')

From 4a69ea403a63eb4f20acdf3fe553b18ce9c318ba Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 12 Jul 2022 11:20:10 +0200
Subject: [PATCH 2/7] Bugfix: Sidebar nav highlighter

---
 .../bugfix-repair-navigtion-highlighter       |  5 +
 .../src/components/SidebarNav/SidebarNav.vue  | 35 ++++++-
 .../components/SidebarNav/SidebarNavItem.vue  | 36 ++++++--
 .../SidebarNav/SidebarNavItemHighlight.vue    | 91 -------------------
 .../__snapshots__/SidebarNavItem.spec.js.snap |  2 -
 5 files changed, 67 insertions(+), 102 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-repair-navigtion-highlighter
 delete mode 100644 packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue

diff --git a/changelog/unreleased/bugfix-repair-navigtion-highlighter b/changelog/unreleased/bugfix-repair-navigtion-highlighter
new file mode 100644
index 00000000000..0d330933627
--- /dev/null
+++ b/changelog/unreleased/bugfix-repair-navigtion-highlighter
@@ -0,0 +1,5 @@
+Bugfix: Repair navigation highlighter
+
+We've refactored the navigation highlighter to fix several small glitches.
+
+https://github.com/owncloud/web/pull/7210
\ No newline at end of file
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index f3bd37f2472..852613488d5 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -17,10 +17,11 @@
     </oc-button>
     <nav class="oc-sidebar-nav oc-my-m oc-px-xs" :aria-label="$gettext('Sidebar navigation menu')">
       <oc-list>
+        <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient" />
         <sidebar-nav-item
-          v-for="(link, index) in navItems"
+          v-for="link in navItems"
           :key="link.route.path"
-          :index="index"
+          :index="getUuid()"
           :target="link.route.path"
           :active="link.active"
           :icon="link.icon"
@@ -39,6 +40,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import SidebarNavItem from './SidebarNavItem.vue'
+import * as uuid from 'uuid'
 
 export default {
   components: {
@@ -50,6 +52,22 @@ export default {
       required: true
     }
   },
+  mounted() {
+    const navItem = document.getElementsByClassName('oc-sidebar-nav-item-link')[0]
+    const highlighter = document.getElementById('nav-highlighter')
+
+    const resizeObserver = new ResizeObserver((data) => {
+      const width = data[0].borderBoxSize[0].inlineSize
+      highlighter.style.setProperty('transition-duration', `0.05s`)
+      highlighter.style.setProperty('width', `${width}px`)
+    }).observe(navItem)
+    highlighter.style.setProperty('width', `${navItem.clientWidth}px`)
+    highlighter.style.setProperty('height', `${navItem.clientHeight}px`)
+
+    this.$on('beforeDestroy', () => {
+      resizeObserver.disconnect()
+    })
+  },
   computed: {
     ...mapState(['navigation']),
 
@@ -68,12 +86,21 @@ export default {
 
     toggleSidebarButtonClick() {
       return this.navigation.closed ? this.openNavigation() : this.closeNavigation()
+    },
+
+    getUuid() {
+      return uuid.v4().replaceAll('-', '')
     }
   }
 }
 </script>
 
 <style lang="scss">
+#nav-highlighter {
+  position: absolute;
+  border-radius: 5px;
+  transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
+}
 #web-nav-sidebar {
   background-color: var(--oc-color-background-default);
   border-radius: 15px;
@@ -84,6 +111,10 @@ export default {
   transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   z-index: 4;
 
+  .oc-list {
+    position: relative;
+  }
+
   .toggle-sidebar-button {
     min-height: 3rem;
     transition: all 0.2s ease-out;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 425c5c38f95..094feed46c2 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -1,5 +1,9 @@
 <template>
-  <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" :aria-current="active ? 'page' : null">
+  <li
+    ref="item"
+    class="oc-sidebar-nav-item oc-pb-xs oc-px-s"
+    :aria-current="active ? 'page' : null"
+  >
     <oc-button
       v-oc-tooltip="toolTip"
       type="router-link"
@@ -15,25 +19,20 @@
         <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
       </span>
       <oc-tag v-if="tag" class="oc-py-rm" size="small">{{ tag }}</oc-tag>
-      <sidebar-nav-item-highlight :index="index" :active="active" />
     </oc-button>
   </li>
 </template>
 <script>
-import SidebarNavItemHighlight from './SidebarNavItemHighlight.vue'
 import get from 'lodash-es/get'
 
 export default {
-  components: {
-    SidebarNavItemHighlight
-  },
   props: {
     name: {
       type: String,
       required: true
     },
     index: {
-      type: Number,
+      type: String,
       required: true
     },
     active: {
@@ -82,6 +81,29 @@ export default {
         arrow: false
       }
     }
+  },
+  watch: {
+    active(active) {
+      if (!active) return
+      this.animateHighlightPosition(this.index)
+    }
+  },
+  mounted() {
+    if (!this.active) return
+    this.animateHighlightPosition(this.index)
+  },
+  methods: {
+    animateHighlightPosition(target, durationSeconds = 0.2) {
+      const highlightedElement = document.getElementById('nav-highlighter')
+      if (!highlightedElement) {
+        return
+      }
+      const targetElement = this.$refs.item
+      const offset = targetElement.offsetTop
+      const style = highlightedElement.style
+      style.setProperty('transition-duration', `${durationSeconds}s`)
+      style.setProperty('transform', `translateY(${offset}px)`)
+    }
   }
 }
 </script>
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue
deleted file mode 100644
index c488d7d3c05..00000000000
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <span
-    v-if="initial"
-    id="highlighter"
-    class="oc-background-primary-gradient"
-    :data-initial-id="index"
-  />
-</template>
-<script>
-export default {
-  props: {
-    index: {
-      type: Number,
-      required: true
-    },
-    active: {
-      type: Boolean,
-      required: true
-    }
-  },
-  data() {
-    return {
-      initial: false
-    }
-  },
-  watch: {
-    active(active) {
-      if (!active) return
-      this.animateHighlightPosition(this.index)
-    }
-  },
-  created() {
-    if (!this.active) return
-    this.initial = true
-  },
-  methods: {
-    animateHighlightPosition(target, durationSeconds = 0.2) {
-      const highlightedElement = document.getElementById('highlighter')
-      if (!highlightedElement) {
-        return
-      }
-      const initialId = highlightedElement.getAttribute('data-initial-id')
-      const currentElement = this.getNavigationItem(initialId)
-      const targetElement = this.getNavigationItem(target)
-      const distanceAbs = this.getDistanceBetweenElements(currentElement, targetElement)
-      const distance = target < initialId ? -distanceAbs : distanceAbs
-      const style = highlightedElement.style
-      style.setProperty('transition-duration', `${durationSeconds}s`)
-      style.setProperty('transform', `translateY(${distance}px)`)
-    },
-    getNavigationItem(index) {
-      return document.querySelectorAll(`[data-nav-id="${index}"]`)[0]
-    },
-    getPositionAtCenter(element) {
-      const { top, left, width, height } = element.getBoundingClientRect()
-      return {
-        x: left + width / 2,
-        y: top + height / 2
-      }
-    },
-    getDistanceBetweenElements(a, b) {
-      const aPosition = this.getPositionAtCenter(a)
-      const bPosition = this.getPositionAtCenter(b)
-      return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-#highlighter {
-  border-radius: 5px;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
-  z-index: -1;
-
-  &::before {
-    bottom: 0;
-    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.14);
-    content: '';
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 40px;
-  }
-}
-</style>
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
index 3bd1ef056ae..7fc94c03b24 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
@@ -4,7 +4,6 @@ exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
   <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">Personal</span></span>
     <!---->
-    <!---->
   </router-link-stub>
 </li>
 `;
@@ -13,7 +12,6 @@ exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
   <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">Personal</span></span>
     <!---->
-    <!---->
   </router-link-stub>
 </li>
 `;

From ac601c88783e9a7d513317c4317de100844e1132 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 12 Jul 2022 11:47:01 +0200
Subject: [PATCH 3/7] Add changelog item

---
 .../enhancement-show-search-item-in-left-sidebar           | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-show-search-item-in-left-sidebar

diff --git a/changelog/unreleased/enhancement-show-search-item-in-left-sidebar b/changelog/unreleased/enhancement-show-search-item-in-left-sidebar
new file mode 100644
index 00000000000..731a5bc7d49
--- /dev/null
+++ b/changelog/unreleased/enhancement-show-search-item-in-left-sidebar
@@ -0,0 +1,7 @@
+Enhancement: Show nav item in left side sidebar while searching
+
+We've introduced a new nav item in the left sidebar which will fade in,
+while using the 'Search all files' search provider.
+
+https://github.com/owncloud/web/pull/7210
+https://github.com/owncloud/web/issues/7190

From abf1ae25e8b8feaaf71b70030a7c3d8efc23e65a Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 12 Jul 2022 12:32:20 +0200
Subject: [PATCH 4/7] Fix unit tests

---
 .../src/components/SidebarNav/SidebarNav.vue  |  4 ++++
 .../components/SidebarNav/SidebarNav.spec.js  |  1 +
 .../__snapshots__/SidebarNav.spec.js.snap     | 21 +++++++++++--------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 852613488d5..e1b3d068048 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -56,6 +56,10 @@ export default {
     const navItem = document.getElementsByClassName('oc-sidebar-nav-item-link')[0]
     const highlighter = document.getElementById('nav-highlighter')
 
+    if (!highlighter || !navItem) {
+      return
+    }
+
     const resizeObserver = new ResizeObserver((data) => {
       const width = data[0].borderBoxSize[0].inlineSize
       highlighter.style.setProperty('transition-duration', `0.05s`)
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
index 9e6473c316a..5c4358f499a 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
@@ -11,6 +11,7 @@ const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(DesignSystem)
 
+
 const slots = {
   bottom: '<span class="footer">Footer</span>'
 }
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
index 1c7d2242891..2aa63a74702 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -6,9 +6,10 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="ead217b9f25a453f85076276b4ed2e44" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="f366ad0f1fd24306a0b9e46e3c198e9c" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="e3d29d6d27ec4d12b48329db35a40b84" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -20,9 +21,10 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="364dda49fa1348d3a411ff67ddd7ced2" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="3f4a797392eb4538843c7981e6e8063f" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="fc4f85a00ee04609a6bbfdfdd4bedc51" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -34,9 +36,10 @@ exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="65097261372547949b0b756ddb26071f" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="8e07dbba28074f35a4eab290cfd7ccaf" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="c77a2805d46f4459b37d4e5039c6d1d3" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>

From 8c91e8705583cdeed38d363bb99187a227e6bff1 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 12 Jul 2022 12:36:34 +0200
Subject: [PATCH 5/7] Lint

---
 .../tests/unit/components/SidebarNav/SidebarNav.spec.js          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
index 5c4358f499a..9e6473c316a 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
@@ -11,7 +11,6 @@ const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(DesignSystem)
 
-
 const slots = {
   bottom: '<span class="footer">Footer</span>'
 }

From d14392f76d80d11c33a9e9c7635e670f50a6f42e Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 12 Jul 2022 12:55:18 +0200
Subject: [PATCH 6/7] Fake index

---
 .../components/SidebarNav/SidebarNav.spec.js   |  3 +++
 .../__snapshots__/SidebarNav.spec.js.snap      | 18 +++++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
index 9e6473c316a..9eb5e226500 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
@@ -41,6 +41,9 @@ describe('OcSidebarNav', () => {
 
 function getWrapper() {
   return mount(SidebarNav, {
+    methods: {
+      getUuid: () => '1'
+    },
     store: new Vuex.Store({
       state: {
         navigation: {
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
index 2aa63a74702..a7aec350a44 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -7,9 +7,9 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
       <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
-      <sidebar-nav-item-stub name="Personal" index="ead217b9f25a453f85076276b4ed2e44" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="f366ad0f1fd24306a0b9e46e3c198e9c" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="e3d29d6d27ec4d12b48329db35a40b84" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Personal" index="1" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="1" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -22,9 +22,9 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
       <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
-      <sidebar-nav-item-stub name="Personal" index="364dda49fa1348d3a411ff67ddd7ced2" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="3f4a797392eb4538843c7981e6e8063f" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="fc4f85a00ee04609a6bbfdfdd4bedc51" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Personal" index="1" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="1" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -37,9 +37,9 @@ exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
       <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
-      <sidebar-nav-item-stub name="Personal" index="65097261372547949b0b756ddb26071f" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="8e07dbba28074f35a4eab290cfd7ccaf" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="c77a2805d46f4459b37d4e5039c6d1d3" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Personal" index="1" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="1" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>

From b90f559fabaa4fb153a88748c96dc6d12f79cf46 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 12 Jul 2022 13:15:18 +0200
Subject: [PATCH 7/7] Fake index

---
 .../components/SidebarNav/SidebarNav.spec.js   |  9 ++++++---
 .../__snapshots__/SidebarNav.spec.js.snap      | 18 +++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
index 9eb5e226500..1746df1df23 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
@@ -7,6 +7,12 @@ import SidebarNav from 'web-runtime/src/components/SidebarNav/SidebarNav.vue'
 import stubs from '../../../../../../tests/unit/stubs'
 import sidebarNavItemFixtures from '../../../../../../__fixtures__/sidebarNavItems'
 
+jest.mock('uuid', () => ({
+  v4: () => {
+    return '00000000-0000-0000-0000-000000000000'
+  }
+}))
+
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(DesignSystem)
@@ -41,9 +47,6 @@ describe('OcSidebarNav', () => {
 
 function getWrapper() {
   return mount(SidebarNav, {
-    methods: {
-      getUuid: () => '1'
-    },
     store: new Vuex.Store({
       state: {
         navigation: {
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
index a7aec350a44..724f1207912 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -7,9 +7,9 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
       <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
-      <sidebar-nav-item-stub name="Personal" index="1" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="1" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -22,9 +22,9 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
       <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
-      <sidebar-nav-item-stub name="Personal" index="1" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="1" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -37,9 +37,9 @@ exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
       <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
-      <sidebar-nav-item-stub name="Personal" index="1" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="1" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>