Merge pull request #9853 from LukasHirt/feat/embed-folder-creation

feat: show only folder create action in embed mode

changelog/unreleased/enhancement-embed-folder-creation

@@ -0,0 +1,7 @@
+Enhancement: Show only create folder button in embed mode
+
+We've changed the actions in the AppBar in Files app to show only create folder button instead of create and upload actions.
+In embed mode, it is possible to only create a new folder so it does not make sense to hide this action inside of a dropdown.
+
+https://github.com/owncloud/web/pull/9853
+https://github.com/owncloud/web/issues/9768

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -15,7 +15,25 @@
         @item-dropped="fileDropped"
       >
         <template #actions="{ limitedScreenSpace }">
+          <oc-button
+            v-if="isEmbedModeEnabled"
+            key="new-folder-btn"
+            v-oc-tooltip="limitedScreenSpace ? $gettext('Create a new folder') : ''"
+            data-testid="btn-new-folder"
+            :aria-label="$gettext('Create a new folder')"
+            appearance="filled"
+            variation="primary"
+            :disabled="!canUpload"
+            @click="createNewFolderAction"
+          >
+            <oc-icon name="add" />
+            <span v-if="!limitedScreenSpace" v-text="$gettext('Create a new folder')" />
+          </oc-button>
+
           <create-and-upload
+            v-else
+            key="create-and-upload-actions"
+            data-testid="actions-create-and-upload"
             :space="space"
             :item="item"
             :item-id="itemId"
@@ -152,7 +170,7 @@ import {
   SpaceResource
 } from '@ownclouders/web-client/src/helpers'
 
-import { useFileActions } from '@ownclouders/web-pkg'
+import { useEmbedMode, useFileActions, useFileActionsCreateNewFolder } from '@ownclouders/web-pkg'
 
 import { AppBar } from '@ownclouders/web-pkg'
 import { ContextActions } from '@ownclouders/web-pkg'
@@ -247,6 +265,11 @@ export default defineComponent({
     const clientService = useClientService()
     const hasShareJail = useCapabilityShareJailEnabled()
     const { breadcrumbsFromPath, concatBreadcrumbs } = useBreadcrumbsFromPath()
+    const { actions: createNewFolder } = useFileActionsCreateNewFolder({
+      store,
+      space: props.space
+    })
+    const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
 
     let loadResourcesEventToken
 
@@ -503,6 +526,8 @@ export default defineComponent({
       )
     }
 
+    const createNewFolderAction = computed(() => unref(createNewFolder)[0].handler)
+
     return {
       ...useFileActions(),
       ...resourcesViewDefaults,
@@ -520,7 +545,9 @@ export default defineComponent({
       ),
       whitespaceContextMenu,
       clientService,
-      hasShareJail
+      hasShareJail,
+      createNewFolderAction,
+      isEmbedModeEnabled
     }
   },
 

packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts

@@ -16,6 +16,8 @@ import {
 import { ConfigurationManager, useBreadcrumbsFromPath } from '@ownclouders/web-pkg'
 import { useBreadcrumbsFromPathMock } from '../../../mocks/useBreadcrumbsFromPathMock'
 
+const mockCreateFolder = jest.fn()
+
 jest.mock('web-app-files/src/composables/resourcesViewDefaults')
 jest.mock('web-app-files/src/composables/keyboardActions')
 jest.mock('@ownclouders/web-pkg', () => ({
@@ -28,9 +30,17 @@ jest.mock('@ownclouders/web-pkg', () => ({
           fullShareOwnerPaths: false
         }
       }
-    })
+    }),
+  useFileActionsCreateNewFolder: () => ({
+    actions: [{ handler: mockCreateFolder }]
+  })
 }))
 
+const selectors = Object.freeze({
+  btnCreateFolder: '[data-testid="btn-new-folder"]',
+  actionsCreateAndUpload: '[data-testid="actions-create-and-upload"]'
+})
+
 describe('GenericSpace view', () => {
   it('appBar always present', () => {
     const { wrapper } = getMountedWrapper()
@@ -201,6 +211,55 @@ describe('GenericSpace view', () => {
       })
     })
   })
+  describe('create and upload actions', () => {
+    const AppBarStub = { template: '<div><slot name="actions" /></div>' }
+
+    it('should not render create folder button when not in embed mode', () => {
+      const { wrapper } = getMountedWrapper({
+        stubs: { 'app-bar': AppBarStub, CreateAndUpload: true }
+      })
+
+      expect(wrapper.find(selectors.btnCreateFolder).exists()).toBe(false)
+    })
+
+    it('should render create and upload actions when not in embed mode', () => {
+      const { wrapper } = getMountedWrapper({
+        stubs: { 'app-bar': AppBarStub, CreateAndUpload: true }
+      })
+
+      expect(wrapper.find(selectors.actionsCreateAndUpload).exists()).toBe(true)
+    })
+
+    it('should render create folder button when in embed mode', () => {
+      const { wrapper } = getMountedWrapper({
+        stubs: { 'app-bar': AppBarStub, CreateAndUpload: true },
+        configurationOptions: { mode: 'embed' }
+      })
+
+      expect(wrapper.find(selectors.btnCreateFolder).exists()).toBe(true)
+    })
+
+    it('should not render create and upload actions when in embed mode', () => {
+      const { wrapper } = getMountedWrapper({
+        stubs: { 'app-bar': AppBarStub, CreateAndUpload: true },
+        configurationOptions: { mode: 'embed' }
+      })
+
+      expect(wrapper.find(selectors.actionsCreateAndUpload).exists()).toBe(false)
+    })
+
+    it('should call createNewFolderAction when create folder button is clicked', () => {
+      const { wrapper } = getMountedWrapper({
+        stubs: { 'app-bar': AppBarStub, CreateAndUpload: true },
+        configurationOptions: { mode: 'embed' }
+      })
+
+      // @ts-expect-error even though the vm object is not specified on WrapperLike, it actually is present there
+      wrapper.findComponent(selectors.btnCreateFolder).vm.$emit('click')
+
+      expect(mockCreateFolder).toHaveBeenCalledTimes(1)
+    })
+  })
 })
 
 function getMountedWrapper({
@@ -212,7 +271,9 @@ function getMountedWrapper({
   currentFolder = mock<Resource>() || {},
   runningOnEos = false,
   space = { id: 1, getDriveAliasAndItem: jest.fn(), name: 'Personal space', driveType: '' },
-  breadcrumbsFromPath = []
+  breadcrumbsFromPath = [],
+  stubs = {},
+  configurationOptions = {}
 } = {}) {
   const resourcesViewDetailsMock = useResourcesViewDefaultsMock({
     paginatedResources: ref(files),
@@ -237,7 +298,8 @@ function getMountedWrapper({
         return {
           currentTheme: { general: { slogan: 'Public link slogan' } },
           options: {
-            runningOnEos
+            runningOnEos,
+            ...configurationOptions
           }
         }
       }
@@ -264,7 +326,7 @@ function getMountedWrapper({
         plugins: [...defaultPlugins(), store],
         mocks: defaultMocks,
         provide: defaultMocks,
-        stubs: { ...defaultStubs, 'resource-details': true, portal: true }
+        stubs: { ...defaultStubs, 'resource-details': true, portal: true, ...stubs }
       }
     })
   }