From ac2475e6ef1122853138153bad756678361fd286 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 16 Feb 2023 09:16:52 +0100
Subject: [PATCH] perf: slightly faster key up/down (#8356)

* perf: slightly faster key up/down

* Update packages/web-app-files/tests/unit/components/FilesList/KeyboardActions.spec.ts

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>

* fix: linter complaints

---------

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>
---
 .../enhancement-key-up-down-performance       |  5 +++
 .../components/FilesList/KeyboardActions.vue  | 35 ++++++-------------
 .../FilesList/KeyboardActions.spec.ts         | 20 +++++------
 3 files changed, 25 insertions(+), 35 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-key-up-down-performance

diff --git a/changelog/unreleased/enhancement-key-up-down-performance b/changelog/unreleased/enhancement-key-up-down-performance
new file mode 100644
index 00000000000..25e2ba609de
--- /dev/null
+++ b/changelog/unreleased/enhancement-key-up-down-performance
@@ -0,0 +1,5 @@
+Enhancement: Slight improvement of key up/down performance
+
+The render performance of the key up/down events in file lists has been improved slightly.
+
+https://github.com/owncloud/web/pull/8356
diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
index fef02e2f8b2..120da25ade7 100644
--- a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
+++ b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -15,7 +15,7 @@ import {
   ref,
   unref
 } from 'vue'
-import { SpaceResource } from 'web-client/src/helpers'
+import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 import { useClientService, useStore } from 'web-pkg'
 import { useGettext } from 'vue3-gettext'
@@ -23,7 +23,7 @@ import { useGettext } from 'vue3-gettext'
 export default defineComponent({
   props: {
     paginatedResources: {
-      type: Array,
+      type: Array as PropType<Resource[]>,
       required: true
     },
     keybindOnElementId: {
@@ -82,28 +82,20 @@ export default defineComponent({
       selectionCursor.value = 0
     }
     const getNextResourceId = (previous = false) => {
-      const latestSelectedRow = document.querySelectorAll(
-        `[data-item-id='${unref(latestSelectedId)}']`
-      )[0]
-      let nextRow
-      try {
-        nextRow = (
-          previous ? latestSelectedRow.previousElementSibling : latestSelectedRow.nextElementSibling
-        ) as HTMLElement
-      } catch {
+      const latestSelectedResourceIndex = props.paginatedResources.findIndex(
+        (resource) => resource.id === latestSelectedId.value
+      )
+      if (latestSelectedResourceIndex === -1) {
         return -1
       }
-      if (nextRow === null) {
+      const nextResourceIndex = latestSelectedResourceIndex + (previous ? -1 : 1)
+      if (nextResourceIndex < 0 || nextResourceIndex >= props.paginatedResources.length) {
         return -1
       }
-      return nextRow.getAttribute('data-item-id')
+      return props.paginatedResources[nextResourceIndex].id
     }
     const getFirstResourceId = () => {
-      const firstRow = document.getElementsByClassName('oc-tbody-tr')[0]
-      if (!firstRow) {
-        return -1
-      }
-      return firstRow.getAttribute('data-item-id')
+      return props.paginatedResources.length ? props.paginatedResources[0].id : -1
     }
 
     const handleSpaceAction = (event) => {
@@ -124,12 +116,7 @@ export default defineComponent({
     }
     const handleNavigateAction = (event, up = false) => {
       event.preventDefault()
-      let nextId
-      if (!unref(latestSelectedId)) {
-        nextId = getFirstResourceId()
-      } else {
-        nextId = getNextResourceId(up)
-      }
+      const nextId = !unref(latestSelectedId) ? getFirstResourceId() : getNextResourceId(up)
       if (nextId === -1) {
         return
       }
diff --git a/packages/web-app-files/tests/unit/components/FilesList/KeyboardActions.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/KeyboardActions.spec.ts
index f5437f76478..7448a291d02 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/KeyboardActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/KeyboardActions.spec.ts
@@ -70,15 +70,6 @@ describe('KeyboardActions', () => {
     })
   })
   describe('global shortcuts', () => {
-    beforeEach(() => {
-      document.body.innerHTML =
-        '<table>' +
-        '<tr class="oc-tbody-tr" data-item-id="0"><td></td></tr>' +
-        '<tr class="oc-tbody-tr" data-item-id="1"><td></td></tr>' +
-        '<tr class="oc-tbody-tr" data-item-id="2"><td></td></tr>' +
-        '</table>'
-    })
-
     it('copy selected files', () => {
       const event = new KeyboardEvent('keyDown', {
         keyCode: keycode('c'),
@@ -123,7 +114,6 @@ describe('KeyboardActions', () => {
       const event = new KeyboardEvent('keyDown', { keyCode: keycode(key) })
       const { wrapper, storeOptions } = getWrapper()
       wrapper.vm.handleGlobalShortcuts(event)
-      expect(storeOptions.modules.Files.actions.resetFileSelection).toHaveBeenCalled()
       expect(storeOptions.modules.Files.mutations.ADD_FILE_SELECTION).toHaveBeenCalled()
     })
     it.each(['down', 'up'])('navigate via shift + up and down keys', (key) => {
@@ -178,7 +168,15 @@ const getWrapper = ({ props = {}, latestSelectedId = undefined } = {}) => {
   return {
     storeOptions,
     wrapper: mount(KeyboardActions, {
-      props: { paginatedResources: [], space: mock<SpaceResource>(), ...props },
+      props: {
+        paginatedResources: [
+          mock<Resource>({ id: 0 }),
+          mock<Resource>({ id: 1 }),
+          mock<Resource>({ id: 2 })
+        ],
+        space: mock<SpaceResource>(),
+        ...props
+      },
       global: {
         plugins: [...defaultPlugins(), store]
       }