[full-ci] move sidebar state into views

changelog/unreleased/enhancement-scroll-to-without-sidebar

@@ -0,0 +1,5 @@
+Enhancement: Don't open right sidebar from private links
+
+We've changed the behaviour of the web ui to not open the right sidebar anymore when the URL contains a "scrollTo" option. We still select the file and scroll it into the view, but opening the right sidebar felt very invasive, so we now leave that choice to the user.
+
+https://github.com/owncloud/web/pull/7559

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="files-app-bar" ref="filesAppBar" :class="{ 'files-app-bar-squashed': !sidebarClosed }">
+  <div id="files-app-bar" ref="filesAppBar" :class="{ 'files-app-bar-squashed': sideBarOpen }">
     <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
     <div class="files-topbar oc-py-s">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
@@ -74,7 +74,8 @@ export default {
     hasSharesNavigation: { type: Boolean, default: false },
     hasSidebarToggle: { type: Boolean, default: true },
     hasViewOptions: { type: Boolean, default: true },
-    showActionsOnSelection: { type: Boolean, default: false }
+    showActionsOnSelection: { type: Boolean, default: false },
+    sideBarOpen: { type: Boolean, default: false }
   },
   data: function () {
     return {
@@ -85,7 +86,6 @@ export default {
   computed: {
     ...mapGetters('Files', ['files', 'selectedFiles']),
     ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
-    ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
     pageTitle() {
       const title = this.$route.meta.title
@@ -138,9 +138,9 @@ export default {
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
 
     onResize() {
-      this.limitedScreenSpace = this.sidebarClosed
-        ? window.innerWidth <= 1000
-        : window.innerWidth <= 1280
+      this.limitedScreenSpace = this.sideBarOpen
+        ? window.innerWidth <= 1280
+        : window.innerWidth <= 1000
     }
   }
 }

packages/web-app-files/src/components/AppBar/SidebarToggle.vue

@@ -5,30 +5,37 @@
     :aria-label="toggleSidebarButtonLabel"
     appearance="raw"
     class="oc-my-s oc-p-xs"
-    @click.stop="toggleSidebar"
+    @click.stop="toggleSideBar"
   >
     <oc-icon name="side-bar-right" :fill-type="toggleSidebarButtonIconFillType" />
   </oc-button>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
+import { bus } from 'web-pkg/src/instance'
+import { SideBarEventTopics } from '../../composables/sideBar'
 
 export default {
+  props: {
+    sideBarOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
   computed: {
-    ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
-
     toggleSidebarButtonLabel() {
-      if (this.sidebarClosed) return this.$gettext('Open sidebar to view details')
-      return this.$gettext('Close sidebar to hide details')
+      if (this.sideBarOpen) return this.$gettext('Close sidebar to hide details')
+      return this.$gettext('Open sidebar to view details')
     },
 
     toggleSidebarButtonIconFillType() {
-      return this.sidebarClosed ? 'line' : 'fill'
+      return this.sideBarOpen ? 'fill' : 'line'
     }
   },
   methods: {
-    ...mapActions('Files/sidebar', { toggleSidebar: 'toggle' })
+    toggleSideBar() {
+      bus.publish(SideBarEventTopics.toggle)
+    }
   }
 }
 </script>

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

@@ -190,6 +190,7 @@ import { ClipboardActions } from '../../helpers/clipboardActions'
 import { ShareTypes } from 'web-client/src/helpers/share'
 import { createLocationSpaces } from '../../router'
 import { formatDateFromJSDate, formatRelativeDateFromJSDate } from 'web-pkg/src/helpers'
+import { SideBarEventTopics } from '../../composables/sideBar'
 
 const mapResourceFields = (resource: Resource, mapping = {}) => {
   return Object.keys(mapping).reduce((result, resourceKey) => {
@@ -563,7 +564,6 @@ export default defineComponent({
     }
   },
   methods: {
-    ...mapActions('Files/sidebar', ['openWithPanel']),
     ...mapActions('Files', ['toggleFileSelection']),
     isResourceSelected(item) {
       return this.selectedIds.includes(item.id)
@@ -584,10 +584,10 @@ export default defineComponent({
     },
     openSharingSidebar(file) {
       if (file.share?.shareType === ShareTypes.link.value) {
-        this.openWithPanel('sharing-item#linkShares')
+        bus.publish(SideBarEventTopics.openWithPanel, 'sharing-item#linkShares')
         return
       }
-      this.openWithPanel('sharing-item#peopleShares')
+      bus.publish(SideBarEventTopics.openWithPanel, 'sharing-item#peopleShares')
     },
     folderLink(file) {
       return this.createFolderLink(file.path, file)

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -15,7 +15,7 @@
       v-model="selectedResourcesIds"
       :data-test-share-status="shareStatus"
       class="files-table"
-      :class="{ 'files-table-squashed': !sidebarClosed }"
+      :class="{ 'files-table-squashed': sideBarOpen }"
       :fields-displayed="displayedFields"
       sidebar-closed
       :are-thumbnails-displayed="displayThumbnails"
@@ -91,20 +91,18 @@ import { computed, defineComponent, unref } from '@vue/composition-api'
 import debounce from 'lodash-es/debounce'
 import { ImageDimension, ImageType } from '../../constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import FileActions from '../../mixins/fileActions'
 import MixinAcceptShare from '../../mixins/actions/acceptShare'
 import MixinDeclineShare from '../../mixins/actions/declineShare'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
-import MixinMountSideBar from '../../mixins/sidebar/mountSideBar'
-import { useResourcesViewDefaults } from '../../composables'
-import { Resource } from 'web-client'
 import { useCapabilityShareJailEnabled, useStore } from 'web-pkg/src/composables'
 import { createLocationSpaces } from '../../router'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import { ShareStatus } from 'web-client/src/helpers/share'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
+import { useSelectedResources } from '../../composables/selection'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -116,13 +114,7 @@ export default defineComponent({
     NoContentMessage
   },
 
-  mixins: [
-    FileActions,
-    MixinAcceptShare,
-    MixinDeclineShare,
-    MixinMountSideBar,
-    MixinFilesListFilter
-  ],
+  mixins: [FileActions, MixinAcceptShare, MixinDeclineShare, MixinFilesListFilter],
   props: {
     title: {
       type: String,
@@ -168,15 +160,17 @@ export default defineComponent({
     displayThumbnails: {
       type: Boolean,
       default: true
+    },
+    sideBarOpen: {
+      type: Boolean,
+      default: false
+    },
+    fileListHeaderY: {
+      type: Number,
+      default: 0
     }
   },
   setup() {
-    const { fileListHeaderY, selectedResourcesIds, selectedResources } = useResourcesViewDefaults<
-      Resource,
-      any,
-      any[]
-    >()
-
     const store = useStore()
     const hasShareJail = useCapabilityShareJailEnabled()
     const resourceTargetLocation = computed(() =>
@@ -197,9 +191,7 @@ export default defineComponent({
       resourceTargetLocation,
       resourceTargetParamMapping,
       resourceTargetQueryMapping,
-      fileListHeaderY,
-      selectedResources,
-      selectedResourcesIds
+      ...useSelectedResources({ store })
     }
   },
 
@@ -210,7 +202,6 @@ export default defineComponent({
 
   computed: {
     ...mapGetters(['configuration']),
-    ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
     displayedFields() {
       return ['name', 'status', 'owner', 'sdate', 'sharedWith']

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

@@ -165,6 +165,8 @@ import { getIndicators } from '../../../helpers/statusIndicators'
 import copyToClipboard from 'copy-to-clipboard'
 import { encodePath } from 'web-pkg/src/utils'
 import { formatDateFromHTTP, formatFileSize } from 'web-pkg/src/helpers'
+import { bus } from 'web-pkg/src/instance'
+import { SideBarEventTopics } from '../../../composables/sideBar'
 
 export default defineComponent({
   name: 'FileDetails',
@@ -404,7 +406,6 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('Files', ['loadPreview', 'loadVersions', 'loadSharesTree']),
-    ...mapActions('Files/sidebar', { setSidebarPanel: 'setActivePanel' }),
     async refreshShareDetailsTree() {
       await this.loadSharesTree({
         client: this.$client,
@@ -429,7 +430,7 @@ export default defineComponent({
       return null
     },
     expandVersionsPanel() {
-      this.setSidebarPanel('versions-item')
+      bus.publish(SideBarEventTopics.setActivePanel, 'versions-item')
     },
     async loadData() {
       const calls = []

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

@@ -65,7 +65,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, unref } from '@vue/composition-api'
-import { mapActions, mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
 import { buildResource } from '../../../helpers/resources'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
@@ -76,6 +76,8 @@ import { useAccessToken, useStore } from 'web-pkg/src/composables'
 import SpaceQuota from '../../SpaceQuota.vue'
 import { formatDateFromISO } from 'web-pkg/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
+import { bus } from 'web-pkg/src/instance'
+import { SideBarEventTopics } from '../../../composables/sideBar'
 
 export default defineComponent({
   name: 'SpaceDetails',
@@ -247,12 +249,8 @@ export default defineComponent({
     this.loadImageTask.perform(this)
   },
   methods: {
-    ...mapActions('Files/sidebar', {
-      setSidebarPanel: 'setActivePanel',
-      closeSidebar: 'close'
-    }),
     expandSharesPanel() {
-      this.setSidebarPanel('space-share-item')
+      bus.publish(SideBarEventTopics.setActivePanel, 'space-share-item')
     }
   }
 })

packages/web-app-files/src/components/SideBar/FileInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="file_info">
     <oc-resource-icon
-      v-if="sidebarActivePanel"
+      v-if="isSubPanelActive"
       :resource="file"
       size="large"
       class="file_info__icon"
@@ -37,9 +37,9 @@ export default {
   },
   inject: ['displayedItem'],
   props: {
-    isContentDisplayed: {
+    isSubPanelActive: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
   setup() {
@@ -50,7 +50,6 @@ export default {
   computed: {
     ...mapGetters(['capabilities']),
     ...mapState('Files', ['areFileExtensionsShown']),
-    ...mapState('Files/sidebar', { sidebarActivePanel: 'activePanel' }),
     timeData() {
       const interpolate = (obj) => {
         obj.time = formatDateFromRFC(obj.sourceTime, this.$language.current)

packages/web-app-files/src/components/SideBar/Shares/SharesPanel.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, watch } from '@vue/composition-api'
+import { computed, defineComponent, unref, watch } from '@vue/composition-api'
 import FileLinks from './FileLinks.vue'
 import FileShares from './FileShares.vue'
 import SpaceMembers from './SpaceMembers.vue'
@@ -31,6 +31,7 @@ export default defineComponent({
     FileShares,
     SpaceMembers
   },
+  inject: ['activePanel'],
   props: {
     showSpaceMembers: { type: Boolean, default: false },
     showLinks: { type: Boolean, default: false }
@@ -66,17 +67,16 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters('Files', ['highlightedFile', 'currentFileOutgoingSharesLoading']),
-    ...mapState('Files/sidebar', ['activePanel']),
     ...mapState('Files', ['incomingSharesLoading', 'sharesTreeLoading'])
   },
   watch: {
     sharesLoading: {
       handler: function () {
-        if (this.loading || !this.activePanel) {
+        if (this.loading || !unref(this.activePanel)) {
           return
         }
         this.$nextTick(() => {
-          const [panelName, ref] = this.activePanel.split('#')
+          const [panelName, ref] = unref(this.activePanel).split('#')
 
           if (!ref || !this.$refs[ref]) {
             return