Feature/7600 - scroll to newly created folder

owncloud · Jun 1, 2023 · 7d92c0b · 7d92c0b
1 parent 237abab
commit 7d92c0b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/changelog/unreleased/feature-scroll-to-created-folder b/changelog/unreleased/feature-scroll-to-created-folder
@@ -0,0 +1,6 @@
+Feature: Scroll to newly created folder
+
+After creating a new folder that gets sorted into the currently displayed resources but outside of the current viewport, we now scroll to the new folder.
+
+https://github.com/owncloud/web/issues/7600
+https://github.com/owncloud/web/pulls/8145
diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -121,7 +121,7 @@ export default defineComponent({
       resetSelectionCursor()
       store.dispatch('Files/resetFileSelection')
       store.commit('Files/ADD_FILE_SELECTION', { id: nextId })
-      scrollToResource({ id: nextId } as any)
+      scrollToResource(nextId)
     }
     const handleCtrlClickAction = (resource) => {
       store.dispatch('Files/toggleFileSelection', { id: resource.id })
@@ -148,7 +148,7 @@ export default defineComponent({
         // select
         store.commit('Files/ADD_FILE_SELECTION', { id: nextResourceId })
       }
-      scrollToResource({ id: nextResourceId } as any)
+      scrollToResource(nextResourceId)
       selectionCursor.value = unref(selectionCursor) - 1
     }
     const handleShiftDownAction = () => {
@@ -164,7 +164,7 @@ export default defineComponent({
         // select
         store.commit('Files/ADD_FILE_SELECTION', { id: nextResourceId })
       }
-      scrollToResource({ id: nextResourceId } as any)
+      scrollToResource(nextResourceId)
       selectionCursor.value = unref(selectionCursor) + 1
     }
     const handleShiftClickAction = ({ resource, skipTargetSelection }) => {

diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts
@@ -9,6 +9,7 @@ import { join } from 'path'
 import { WebDAV } from 'web-client/src/webdav'
 import { isLocationSpacesActive } from 'web-app-files/src/router'
 import { getIndicators } from 'web-app-files/src/helpers/statusIndicators'
+import { useScrollTo } from '../../scrollTo/useScrollTo'
 
 export const useFileActionsCreateNewFolder = ({
   store,
@@ -17,6 +18,7 @@ export const useFileActionsCreateNewFolder = ({
   store = store || useStore()
   const router = useRouter()
   const { $gettext } = useGettext()
+  const { scrollToResource } = useScrollTo()
 
   const clientService = useClientService()
   const currentFolder = computed((): Resource => store.getters['Files/currentFolder'])
@@ -66,12 +68,14 @@ export const useFileActionsCreateNewFolder = ({
         resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
       }
 
-      store.commit('Files/UPSERT_RESOURCE', resource)
+      await store.commit('Files/UPSERT_RESOURCE', resource)
       store.dispatch('hideModal')
 
       store.dispatch('showMessage', {
         title: $gettext('"%{folderName}" was created successfully', { folderName })
       })
+
+      scrollToResource(resource.id)
     } catch (error) {
       console.error(error)
       store.dispatch('showMessage', {

diff --git a/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts b/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts
@@ -6,7 +6,7 @@ import { useRouteQuery } from 'web-pkg/src/composables'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 
 export interface ScrollToResult {
-  scrollToResource(resource: Resource): void
+  scrollToResource(resourceId: string | number): void
   scrollToResourceFromRoute(resources: Resource[]): void
 }
 
@@ -21,9 +21,9 @@ export const useScrollTo = (): ScrollToResult => {
     return queryItemAsString(unref(detailsQuery))
   })
 
-  const scrollToResource = (resource) => {
+  const scrollToResource = (resourceId) => {
     const resourceElement = document.querySelectorAll(
-      `[data-item-id='${resource.id}']`
+      `[data-item-id='${resourceId}']`
     )[0] as HTMLElement
 
     if (!resourceElement) {
@@ -32,7 +32,7 @@ export const useScrollTo = (): ScrollToResult => {
 
     // bottom reached
     if (resourceElement.getBoundingClientRect().bottom > window.innerHeight) {
-      resourceElement.scrollIntoView(false)
+      resourceElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
       return
     }
 

diff --git a/packages/web-app-files/tests/unit/composables/scrollTo/useScrollTo.spec.ts b/packages/web-app-files/tests/unit/composables/scrollTo/useScrollTo.spec.ts
@@ -25,7 +25,7 @@ describe('useScrollTo', () => {
       getComposableWrapper(
         () => {
           const { scrollToResource } = useScrollTo()
-          scrollToResource(mockDeep<Resource>())
+          scrollToResource('mockResourceId')
           expect(htmlPageObject.scrollIntoView).not.toHaveBeenCalled()
         },
         { mocks: defaultComponentMocks(), store: defaultStoreMockOptions }
@@ -39,7 +39,7 @@ describe('useScrollTo', () => {
       getComposableWrapper(
         () => {
           const { scrollToResource } = useScrollTo()
-          scrollToResource(mockDeep<Resource>())
+          scrollToResource('mockResourceId')
           expect(htmlPageObject.scrollIntoView).toHaveBeenCalled()
         },
         { mocks: defaultComponentMocks(), store: defaultStoreMockOptions }
@@ -56,7 +56,7 @@ describe('useScrollTo', () => {
       getComposableWrapper(
         () => {
           const { scrollToResource } = useScrollTo()
-          scrollToResource(mockDeep<Resource>())
+          scrollToResource('mockResourceId')
           expect(htmlPageObject.scrollBy).toHaveBeenCalled()
         },
         { mocks: defaultComponentMocks(), store: defaultStoreMockOptions }