Merge pull request #8021 from owncloud/sidebar-panels-via-url

[full-ci] Access right sidebar panels via URL

changelog/unreleased/enhancement-access-sidebar-via-url

@@ -0,0 +1,16 @@
+Enhancement: Access right sidebar panels via URL
+
+Opening the right sidebar (including its panels) is now possible via URL param.
+
+For private or internal links it only requires the new `details` param in the URL. For other URLs (e.g. personal space, project space) the `scrollTo` param including the resource id is needed as well.
+
+The following values can be used for the `details` param:
+
+* `details` - sidebar open, no specific panel
+* `actions` - actions panel
+* `sharing` - share panel
+* `versions` - versions panel
+* `space-share` - members panel (project space only)
+
+https://github.com/owncloud/web/pull/8021
+https://github.com/owncloud/web/issues/7927

packages/web-app-files/src/components/FilesList/KeyboardActions.vue

@@ -7,11 +7,10 @@ import keycode from 'keycode'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mapActions, mapState, mapMutations, mapGetters } from 'vuex'
 import { defineComponent, PropType } from 'vue'
-import MixinFilesListScrolling from '../../mixins/filesListScrolling'
 import { SpaceResource } from 'web-client/src/helpers'
+import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 
 export default defineComponent({
-  mixins: [MixinFilesListScrolling],
   props: {
     paginatedResources: {
       type: Array,
@@ -27,6 +26,9 @@ export default defineComponent({
       required: true
     }
   },
+  setup() {
+    return { ...useScrollTo() }
+  },
   data: () => {
     return {
       selectionCursor: 0

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -566,11 +566,11 @@ export default defineComponent({
     openSharingSidebar(file) {
       let panelToOpen
       if (file.type === 'space') {
-        panelToOpen = 'space-share-item'
+        panelToOpen = 'space-share'
       } else if (file.share?.shareType === ShareTypes.link.value) {
-        panelToOpen = 'sharing-item#linkShares'
+        panelToOpen = 'sharing#linkShares'
       } else {
-        panelToOpen = 'sharing-item#peopleShares'
+        panelToOpen = 'sharing#peopleShares'
       }
       eventBus.publish(SideBarEventTopics.openWithPanel, panelToOpen)
     },

packages/web-app-files/src/components/Search/List.vue

@@ -77,11 +77,10 @@ import ContextActions from '../FilesList/ContextActions.vue'
 import debounce from 'lodash-es/debounce'
 import { mapMutations, mapGetters, mapActions } from 'vuex'
 import AppBar from '../AppBar/AppBar.vue'
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import ListInfo from '../FilesList/ListInfo.vue'
 import Pagination from '../FilesList/Pagination.vue'
 import MixinFileActions from '../../mixins/fileActions'
-import MixinFilesListScrolling from '../../mixins/filesListScrolling'
 import { searchLimit } from '../../search/sdk/list'
 import { Resource } from 'web-client'
 import FilesViewWrapper from '../FilesViewWrapper.vue'
@@ -105,7 +104,7 @@ export default defineComponent({
     ResourceTable,
     FilesViewWrapper
   },
-  mixins: [MixinFileActions, MixinFilesListScrolling],
+  mixins: [MixinFileActions],
   props: {
     searchResult: {
       type: Object,
@@ -172,7 +171,7 @@ export default defineComponent({
   },
   watch: {
     searchResult: {
-      handler: function () {
+      handler: async function () {
         if (!this.searchResult) {
           return
         }
@@ -184,6 +183,8 @@ export default defineComponent({
             ? this.searchResult.values.map((searchResult) => searchResult.data)
             : []
         })
+        await nextTick()
+        this.scrollToResourceFromRoute(this.paginatedResources)
       }
     }
   },

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -430,7 +430,7 @@ export default defineComponent({
       return null
     },
     expandVersionsPanel() {
-      eventBus.publish(SideBarEventTopics.setActivePanel, 'versions-item')
+      eventBus.publish(SideBarEventTopics.setActivePanel, 'versions')
     },
     async loadData() {
       const calls = []

packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue

@@ -246,7 +246,7 @@ export default defineComponent({
   },
   methods: {
     expandSharesPanel() {
-      eventBus.publish(SideBarEventTopics.setActivePanel, 'space-share-item')
+      eventBus.publish(SideBarEventTopics.setActivePanel, 'space-share')
     }
   }
 })

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -250,7 +250,7 @@ export default defineComponent({
 
     const openSideBarSharePanel = () => {
       store.commit('Files/SET_SELECTED_IDS', [])
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share-item')
+      eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share')
     }
 
     return {

packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts

@@ -11,6 +11,7 @@ import { Task } from 'vue-concurrency'
 import { Resource } from 'web-client'
 import { useSelectedResources, SelectedResourcesResult } from '../selection'
 import { ReadOnlyRef } from 'web-pkg'
+import { ScrollToResult, useScrollTo } from '../scrollTo'
 
 interface ResourcesViewDefaultsOptions<T, U extends any[]> {
   loadResourcesTask?: Task<T, U>
@@ -36,7 +37,8 @@ type ResourcesViewDefaultsResult<T, TT, TU extends any[]> = {
 
   sideBarOpen: Ref<boolean>
   sideBarActivePanel: Ref<string>
-} & SelectedResourcesResult
+} & SelectedResourcesResult &
+  ScrollToResult
 
 export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
   options: ResourcesViewDefaultsOptions<TT, TU> = {}
@@ -85,6 +87,7 @@ export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
     sortBy,
     sortDir,
     ...useSelectedResources({ store }),
-    ...useSideBar()
+    ...useSideBar(),
+    ...useScrollTo()
   }
 }

packages/web-app-files/src/composables/scrollTo/index.ts

@@ -0,0 +1 @@
+export * from './useScrollTo'

packages/web-app-files/src/composables/scrollTo/useScrollTo.ts

@@ -0,0 +1,70 @@
+import { computed, unref } from 'vue'
+import { Resource } from 'web-client/src'
+import { eventBus, useStore } from 'web-pkg/src'
+import { queryItemAsString } from 'web-pkg/src/composables/appDefaults'
+import { useRouteQuery } from 'web-pkg/src/composables'
+import { SideBarEventTopics } from '../sideBar'
+
+export interface ScrollToResult {
+  scrollToResource(resource: Resource): void
+  scrollToResourceFromRoute(resources: Resource[]): void
+}
+
+export const useScrollTo = (): ScrollToResult => {
+  const store = useStore()
+  const scrollToQuery = useRouteQuery('scrollTo')
+  const detailsQuery = useRouteQuery('details')
+  const scrollTo = computed(() => {
+    return queryItemAsString(unref(scrollToQuery))
+  })
+  const details = computed(() => {
+    return queryItemAsString(unref(detailsQuery))
+  })
+
+  const scrollToResource = (resource) => {
+    const resourceElement = document.querySelectorAll(
+      `[data-item-id='${resource.id}']`
+    )[0] as HTMLElement
+
+    if (!resourceElement) {
+      return
+    }
+
+    // bottom reached
+    if (resourceElement.getBoundingClientRect().bottom > window.innerHeight) {
+      resourceElement.scrollIntoView(false)
+      return
+    }
+
+    const topbarElement = document.getElementsByClassName('files-topbar')[0] as HTMLElement
+    // topbar height + th height + height of one row = offset needed when scrolling top
+    const topOffset = topbarElement.offsetHeight + resourceElement.offsetHeight * 2
+
+    // top reached
+    if (resourceElement.getBoundingClientRect().top < topOffset) {
+      const fileListWrapperElement = document.getElementsByClassName('files-view-wrapper')[0]
+      fileListWrapperElement.scrollBy(0, -resourceElement.offsetHeight)
+    }
+  }
+
+  const scrollToResourceFromRoute = (resources: Resource[]) => {
+    if (!unref(scrollTo) || !resources.length) {
+      return
+    }
+
+    const resource = unref(resources).find((r) => r.id === unref(scrollTo))
+    if (resource) {
+      store.commit('Files/SET_FILE_SELECTION', [resource])
+      scrollToResource(resource)
+
+      if (unref(details)) {
+        eventBus.publish(SideBarEventTopics.openWithPanel, unref(details))
+      }
+    }
+  }
+
+  return {
+    scrollToResource,
+    scrollToResourceFromRoute
+  }
+}

packages/web-app-files/src/fileSideBars.ts

@@ -41,7 +41,7 @@ const panelGenerators: (({
   // We don't have file details in the trashbin, yet.
   // Only allow `actions` panel on trashbin route for now.
   ({ rootFolder, highlightedFile }): Panel => ({
-    app: 'no-selection-item',
+    app: 'no-selection',
     icon: 'questionnaire-line',
     title: $gettext('Details'),
     component: NoSelection,
@@ -51,7 +51,7 @@ const panelGenerators: (({
     }
   }),
   ({ router, multipleSelection, rootFolder, highlightedFile }) => ({
-    app: 'details-item',
+    app: 'details',
     icon: 'questionnaire-line',
     title: $gettext('Details'),
     component: FileDetails,
@@ -66,7 +66,7 @@ const panelGenerators: (({
     }
   }),
   ({ multipleSelection, rootFolder, highlightedFile, router }) => ({
-    app: 'details-multiple-item',
+    app: 'details-multiple',
     icon: 'questionnaire-line',
     title: $gettext('Details'),
     component: FileDetailsMultiple,
@@ -85,7 +85,7 @@ const panelGenerators: (({
     }
   }),
   ({ multipleSelection, highlightedFile }) => ({
-    app: 'details-space-item',
+    app: 'details-space',
     icon: 'questionnaire-line',
     title: $gettext('Details'),
     component: SpaceDetails,
@@ -95,7 +95,7 @@ const panelGenerators: (({
     }
   }),
   ({ router, multipleSelection, rootFolder, highlightedFile }) => ({
-    app: 'actions-item',
+    app: 'actions',
     icon: 'slideshow-3',
     title: $gettext('Actions'),
     component: FileActions,
@@ -105,7 +105,7 @@ const panelGenerators: (({
     }
   }),
   ({ multipleSelection, highlightedFile, user }) => ({
-    app: 'space-actions-item',
+    app: 'space-actions',
     icon: 'slideshow-3',
     title: $gettext('Actions'),
     component: SpaceActions,
@@ -123,7 +123,7 @@ const panelGenerators: (({
     }
   }),
   ({ capabilities, router, multipleSelection, rootFolder, highlightedFile }) => ({
-    app: 'sharing-item',
+    app: 'sharing',
     icon: 'user-add',
     iconFillType: 'line',
     title: $gettext('Shares'),
@@ -155,7 +155,7 @@ const panelGenerators: (({
     }
   }),
   ({ multipleSelection, highlightedFile, capabilities }) => ({
-    app: 'space-share-item',
+    app: 'space-share',
     icon: 'group',
     title: $gettext('Members'),
     component: SharesPanel,
@@ -173,7 +173,7 @@ const panelGenerators: (({
     }
   }),
   ({ capabilities, highlightedFile, router, multipleSelection, rootFolder }) => ({
-    app: 'versions-item',
+    app: 'versions',
     icon: 'git-branch',
     title: $gettext('Versions'),
     component: FileVersions,

packages/web-app-files/src/helpers/statusIndicators.js

@@ -95,7 +95,7 @@ export const getIndicators = (resource, sharesTree, hasShareJail = false) => {
       label: $gettext('Show invited people'),
       visible: isUserShare(resource, sharesTree, hasShareJail),
       icon: 'group',
-      target: 'sharing-item',
+      target: 'sharing',
       type: isDirectUserShare(resource) ? 'user-direct' : 'user-indirect',
       handler: (resource, panel) => {
         eventBus.publish(SideBarEventTopics.openWithPanel, `${panel}#peopleShares`)
@@ -107,7 +107,7 @@ export const getIndicators = (resource, sharesTree, hasShareJail = false) => {
       label: $gettext('Show links'),
       visible: isLinkShare(resource, sharesTree),
       icon: 'link',
-      target: 'sharing-item',
+      target: 'sharing',
       type: isDirectLinkShare(resource) ? 'link-direct' : 'link-indirect',
       handler: (resource, panel) => {
         eventBus.publish(SideBarEventTopics.openWithPanel, `${panel}#linkShares`)

packages/web-app-files/src/mixins/actions/createQuicklink.ts

@@ -44,7 +44,7 @@ export default {
         $gettext: this.$gettext
       })
 
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'sharing-item#linkShares')
+      eventBus.publish(SideBarEventTopics.openWithPanel, 'sharing#linkShares')
     }
   }
 }

packages/web-app-files/src/mixins/actions/showActions.js

@@ -33,11 +33,11 @@ export default {
     $_showActions_trigger() {
       // we don't have details in the trashbin, yet. the actions panel is the default
       // panel at the moment, so we need to use `null` as panel name for trashbins.
-      // unconditionally return hardcoded `actions-item` once we have a dedicated
+      // unconditionally return hardcoded `actions` once we have a dedicated
       // details panel in trashbins.
       const panelName = isLocationTrashActive(this.$router, 'files-trash-generic')
         ? null
-        : 'actions-item'
+        : 'actions'
       eventBus.publish(SideBarEventTopics.openWithPanel, panelName)
     }
   }

packages/web-app-files/src/mixins/actions/showShares.ts

@@ -47,7 +47,7 @@ export default {
 
     $_showShares_trigger({ resources }) {
       this.SET_FILE_SELECTION(resources)
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'sharing-item#peopleShares')
+      eventBus.publish(SideBarEventTopics.openWithPanel, 'sharing#peopleShares')
     }
   }
 }

packages/web-app-files/src/mixins/spaces/actions/showMembers.js

@@ -27,7 +27,7 @@ export default {
 
     $_showMembers_trigger({ resources }) {
       this.SET_FILE_SELECTION(resources)
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share-item')
+      eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share')
     }
   }
 }