Merge pull request #11251 from /issues/11212

Purge config option options.sidebar.shares.showAllOnLoad

dev/docker/ocis.web-federated.config.json

@@ -9,11 +9,6 @@
     "scope": "openid profile email"
   },
   "options": {
-    "sidebar": {
-      "shares": {
-        "showAllOnLoad": true
-      }
-    },
     "contextHelpersReadMore": true
   },
   "apps": [

dev/docker/ocis.web.config.json

@@ -9,11 +9,6 @@
     "scope": "openid profile email"
   },
   "options": {
-    "sidebar": {
-      "shares": {
-        "showAllOnLoad": true
-      }
-    },
     "contextHelpersReadMore": true
   },
   "apps": [

docs/getting-started.md

@@ -57,7 +57,6 @@ Depending on the backend you are using, there are sample config files provided i
     - `options.feedbackLink.description` Provide any description you want to see as tooltip and as accessible description. Defaults to `Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.`
 - `options.sharingRecipientsPerPage` Sets the amount of users shown as recipients in the dropdown when sharing resources. Default amount is 200.
 - `options.sidebar` This accepts an object with the following fields to customize the right sidebar behaviour:
-    - `options.sidebar.shares.showAllOnLoad` Sets the list of (link) shares list in the sidebar to be initially expanded (default is a collapsed state, only showing the first three shares).
     - `options.sidebar.exif.showLocation` Sets the `location` data in the exif panel to visible or hidden. One might want to hide the location info when a map view of the location is available from another app (the GPX Viewer app provides such a sidebar panel).  
 - `options.runningOnEos` Set this option to `true` if running on an [EOS storage backend](https://eos-web.web.cern.ch/eos-web/) to enable its specific features. Defaults to `false`, and we recommend reaching out to [the ownCloud web team](https://talk.owncloud.com/channel/web) if you're not CERN and thinking about enabling this feature flag.
 - `options.cernFeatures` Enabling this will activate CERN-specific features. Defaults to `false`.

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

@@ -64,14 +64,9 @@
       </li>
     </oc-list>
     <div v-if="directLinks.length > 3" class="oc-flex oc-flex-center">
-      <oc-button
-        class="indirect-link-list-toggle"
-        appearance="raw"
-        @click="toggleLinkListCollapsed"
-      >
-        <span v-text="collapseButtonTitle" />
-        <oc-icon :name="collapseButtonIcon" fill-type="line" />
-      </oc-button>
+      <oc-button class="indirect-link-list-toggle" appearance="raw" @click="toggleLinkListCollapsed"
+        ><span v-text="collapseButtonTitle"
+      /></oc-button>
     </div>
     <div v-if="indirectLinks.length" id="indirect-link-list">
       <hr class="oc-my-m" />
@@ -104,7 +99,6 @@
           @click="toggleIndirectLinkListCollapsed"
         >
           <span v-text="indirectCollapseButtonTitle" />
-          <oc-icon :name="indirectCollapseButtonIcon" fill-type="line" />
         </oc-button>
       </div>
     </div>
@@ -173,9 +167,8 @@ export default defineComponent({
     const space = inject<Ref<SpaceResource>>('space')
     const resource = inject<Ref<Resource>>('resource')
 
-    const initialLinkListCollapsed = !configStore.options.sidebar.shares.showAllOnLoad
-    const linkListCollapsed = ref(initialLinkListCollapsed)
-    const indirectLinkListCollapsed = ref(initialLinkListCollapsed)
+    const linkListCollapsed = ref(true)
+    const indirectLinkListCollapsed = ref(true)
     const directLinks = computed(() =>
       unref(linkShares)
         .filter((l) => !l.indirect && !l.isQuickLink)
@@ -280,17 +273,11 @@ export default defineComponent({
   },
   computed: {
     collapseButtonTitle() {
-      return this.linkListCollapsed ? this.$gettext('Show all') : this.$gettext('Show less')
-    },
-    collapseButtonIcon() {
-      return this.linkListCollapsed ? 'arrow-down-s' : 'arrow-up-s'
+      return this.linkListCollapsed ? this.$gettext('Show more') : this.$gettext('Show less')
     },
     indirectCollapseButtonTitle() {
       return this.indirectLinkListCollapsed ? this.$gettext('Show') : this.$gettext('Hide')
     },
-    indirectCollapseButtonIcon() {
-      return this.indirectLinkListCollapsed ? 'arrow-down-s' : 'arrow-up-s'
-    },
 
     quicklink() {
       return this.linkShares.find(({ isQuickLink, indirect }) => isQuickLink === true && !indirect)

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

@@ -162,11 +162,11 @@ export default defineComponent({
     const resource = inject<Ref<Resource>>('resource')
     const space = inject<Ref<SpaceResource>>('space')
 
-    const sharesListCollapsed = ref(!configStore.options.sidebar.shares.showAllOnLoad)
+    const sharesListCollapsed = ref(true)
     const toggleShareListCollapsed = () => {
       sharesListCollapsed.value = !unref(sharesListCollapsed)
     }
-    const memberListCollapsed = ref(!configStore.options.sidebar.shares.showAllOnLoad)
+    const memberListCollapsed = ref(true)
     const toggleMemberListCollapsed = () => {
       memberListCollapsed.value = !unref(memberListCollapsed)
     }

packages/web-app-files/tests/unit/components/SideBar/Shares/FileLinks.spec.ts

@@ -52,8 +52,9 @@ vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
 describe('FileLinks', () => {
   describe('links', () => {
     describe('when links list is not empty', () => {
-      it('should render a list of direct and indirect links', () => {
+      it('should render a list of direct and indirect links', async () => {
         const { wrapper } = getWrapper()
+        await wrapper.find('.indirect-link-list-toggle').trigger('click')
 
         const linkListItems = wrapper.findAllComponents<any>(linkListItemNameAndCopy)
         const linkListItemsDetails = wrapper.findAll(linkListItemDetailsAndEdit)
@@ -78,21 +79,15 @@ describe('FileLinks', () => {
           createdDateTime: '2020-01-01'
         })
 
-        it('shows all links if showAllOnLoad config is set', () => {
+        it('shows only 3 links initially', () => {
           const links = [link, link, link, link]
-          const { wrapper } = getWrapper({ links, showAllOnLoad: true })
-
-          expect(wrapper.findAll(linkListItemNameAndCopy).length).toBe(links.length)
-        })
-        it('shows only 3 links if showAllOnLoad config is not set', () => {
-          const links = [link, link, link, link]
-          const { wrapper } = getWrapper({ links, showAllOnLoad: false })
+          const { wrapper } = getWrapper({ links })
 
           expect(wrapper.findAll(linkListItemNameAndCopy).length).toBe(3)
         })
         it('button toggles to show all links', async () => {
           const links = [link, link, link, link]
-          const { wrapper } = getWrapper({ links, showAllOnLoad: false })
+          const { wrapper } = getWrapper({ links })
           await wrapper.find(selectors.indirectToggle).trigger('click')
 
           expect(wrapper.findAll(linkListItemNameAndCopy).length).toBe(links.length)
@@ -161,15 +156,13 @@ function getWrapper({
   resource = mockDeep<Resource>({ isFolder: false, canShare: () => true }),
   links = defaultLinksList,
   abilities = [{ action: 'create-all', subject: 'PublicLink' }],
-  canShare = true,
-  showAllOnLoad = true
+  canShare = true
 }: {
   resource?: Resource
   links?: typeof defaultLinksList
   abilities?: AbilityRule[]
   defaultLinkPermissions?: number
   canShare?: boolean
-  showAllOnLoad?: boolean
 } = {}) {
   const createLinkMock = vi.fn()
   vi.mocked(useCanShare).mockReturnValue({ canShare: () => canShare })
@@ -199,7 +192,6 @@ function getWrapper({
             abilities,
             piniaOptions: {
               capabilityState: { capabilities },
-              configState: { options: { sidebar: { shares: { showAllOnLoad } } } },
               sharesState: { linkShares: links }
             }
           })

packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts

@@ -58,8 +58,9 @@ describe('FileShares', () => {
       collaborators = [getCollaborator(), getCollaborator(), getCollaborator(), getCollaborator()]
     })
 
-    it('renders sharedWithLabel and sharee list', () => {
+    it('renders sharedWithLabel and sharee list', async () => {
       const { wrapper } = getWrapper({ collaborators })
+      await wrapper.find('.toggle-shares-list-btn').trigger('click')
       expect(wrapper.find('#files-collaborators-list').exists()).toBeTruthy()
       expect(wrapper.findAll('#files-collaborators-list li').length).toBe(collaborators.length)
       expect(wrapper.html()).toMatchSnapshot()
@@ -86,11 +87,10 @@ describe('FileShares', () => {
       expect(listItemStub.props('modifiable')).toBeFalsy()
     })
     it('toggles the share list', async () => {
-      const showAllOnLoad = true
       const { wrapper } = getWrapper({ mountType: mount, collaborators })
-      expect(wrapper.vm.sharesListCollapsed).toBe(!showAllOnLoad)
+      expect(wrapper.vm.sharesListCollapsed).toBe(true)
       await wrapper.find('.toggle-shares-list-btn').trigger('click')
-      expect(wrapper.vm.sharesListCollapsed).toBe(showAllOnLoad)
+      expect(wrapper.vm.sharesListCollapsed).toBe(false)
     })
     it('share should be modifiable if its personal space share', () => {
       const space = mock<SpaceResource>({ driveType: 'personal' })
@@ -165,7 +165,6 @@ function getWrapper({
   collaborators = [],
   spaceMembers = [],
   user = undefined,
-  showAllOnLoad = true,
   ancestorMetaData = {},
   canShare = true
 }: {
@@ -175,7 +174,6 @@ function getWrapper({
   collaborators?: CollaboratorShare[]
   spaceMembers?: CollaboratorShare[]
   user?: User
-  showAllOnLoad?: boolean
   ancestorMetaData?: AncestorMetaData
   canShare?: boolean
 } = {}) {
@@ -196,7 +194,7 @@ function getWrapper({
               spacesState: { spaceMembers },
               capabilityState: { capabilities },
               configState: {
-                options: { contextHelpers: true, sidebar: { shares: { showAllOnLoad } } }
+                options: { contextHelpers: true }
               },
               sharesState: { collaboratorShares: collaborators },
               resourcesStore: { ancestorMetaData }

packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts

@@ -142,7 +142,7 @@ function getWrapper({
             userState: { user },
             spacesState: { spaceMembers },
             configState: {
-              options: { contextHelpers: true, sidebar: { shares: { showAllOnLoad: true } } }
+              options: { contextHelpers: true }
             }
           }
         })

packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap

@@ -11,7 +11,7 @@ exports[`FileShares > collaborators list > renders sharedWithLabel and sharee li
     <h4 data-v-5d17c3fa="" class="oc-text-bold oc-my-rm">Shared with</h4>
     <!--v-if-->
   </div>
-  <portal-target data-v-5d17c3fa="" name="app.files.sidebar.sharing.shared-with.top" slot-props="[object Object]" multiple="true"></portal-target>
+  <portal-target data-v-5d17c3fa="" name="app.files.sidebar.sharing.shared-with.top" multiple="true" slot-props="[object Object]"></portal-target>
   <ul data-v-5d17c3fa="" id="files-collaborators-list" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm" aria-label="Share receivers">
     <li data-v-5d17c3fa="">
       <collaborator-list-item-stub data-v-5d17c3fa="" share="[object Object]" issharedenied="false" modifiable="true" resourcename="[Function]" deniable="false" islocked="[Function]" isspaceshare="false"></collaborator-list-item-stub>
@@ -25,7 +25,7 @@ exports[`FileShares > collaborators list > renders sharedWithLabel and sharee li
     <li data-v-5d17c3fa="">
       <collaborator-list-item-stub data-v-5d17c3fa="" share="[object Object]" issharedenied="false" modifiable="true" resourcename="[Function]" deniable="false" islocked="[Function]" isspaceshare="false"></collaborator-list-item-stub>
     </li>
-    <portal-target data-v-5d17c3fa="" name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]" multiple="true"></portal-target>
+    <portal-target data-v-5d17c3fa="" name="app.files.sidebar.sharing.shared-with.bottom" multiple="true" slot-props="[object Object]"></portal-target>
   </ul>
   <div data-v-5d17c3fa="" class="oc-flex oc-flex-center"><button data-v-5d17c3fa="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-shares-list-btn">
       <!--v-if-->

packages/web-app-files/tests/unit/components/SideBar/TagsSelect.spec.ts

@@ -127,6 +127,7 @@ function createWrapper(
   stubVueSelect = true
 ) {
   const mocks = { ...defaultComponentMocks(), $clientService: clientService }
+  mocks.$clientService.graphAuthenticated.tags.listTags.mockResolvedValue([])
   return {
     wrapper: mount(TagsSelect, {
       global: {

packages/web-pkg/src/composables/piniaStores/config/config.ts

@@ -36,11 +36,6 @@ const defaultOptions = {
     fullShareOwnerPaths: false
   },
   runningOnEos: false,
-  sidebar: {
-    shares: {
-      showAllOnLoad: false
-    }
-  },
   tokenStorageLocal: true,
   userListRequiresFilter: false
 } satisfies Partial<OptionsConfig>

packages/web-pkg/src/composables/piniaStores/config/types.ts

@@ -111,15 +111,6 @@ const OptionsConfigSchema = z.object({
     })
     .optional(),
   runningOnEos: z.boolean().optional(),
-  sidebar: z
-    .object({
-      shares: z
-        .object({
-          showAllOnLoad: z.boolean().optional()
-        })
-        .optional()
-    })
-    .optional(),
   tokenStorageLocal: z.boolean().optional(),
   upload: z
     .object({

tests/drone/config-ocis.json

@@ -9,11 +9,6 @@
     "scope": "openid profile email"
   },
   "options": {
-    "sidebar": {
-      "shares": {
-        "showAllOnLoad": true
-      }
-    },
     "routing": {
       "idBased": false
     }

tests/e2e/support/objects/app-files/share/actions.ts

@@ -31,6 +31,7 @@ const createLinkButton = '.oc-modal-body-actions-confirm'
 const showMoreOptionsButton = '#show-more-share-options-btn'
 const calendarDatePickerId = 'recipient-datepicker-btn'
 const informMessage = '//div[contains(@class,"oc-notification-message-title")]'
+const showMoreBtn = '.toggle-shares-list-btn:has-text("Show more")'
 
 export interface ShareArgs {
   page: Page
@@ -61,6 +62,12 @@ export const openSharingPanel = async function (
       await sidebar.openPanel({ page, name: 'sharing' })
       break
   }
+
+  // always click on the “Show more” button if it exists
+  const showMore = page.locator(showMoreBtn)
+  if ((await showMore.count()) > 0) {
+    await showMore.click()
+  }
 }
 
 export type ActionViaType = 'SIDEBAR_PANEL' | 'QUICK_ACTION' | 'URL_NAVIGATION'