Merge pull request #10341 from owncloud/remove-clipboard-from-files-s…

…tore

Remove clipboard from files store

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

@@ -177,7 +177,7 @@
       <oc-button
         :disabled="uploadOrFileCreationBlocked"
         class="clear-clipboard-btn"
-        @click="clearClipboardFiles"
+        @click="clearClipboard"
       >
         <oc-icon fill-type="line" name="close" />
       </oc-button>
@@ -186,12 +186,12 @@
 </template>
 
 <script lang="ts">
-import { mapActions, mapGetters } from 'vuex'
 import {
   isLocationPublicActive,
   isLocationSpacesActive,
   useAppsStore,
   useCapabilityStore,
+  useClipboardStore,
   useFileActions,
   useFileActionsCreateNewShortcut,
   useMessages,
@@ -274,6 +274,11 @@ export default defineComponent({
     const capabilityRefs = storeToRefs(capabilityStore)
     const route = useRoute()
     const language = useGettext()
+
+    const clipboardStore = useClipboardStore()
+    const { clearClipboard } = clipboardStore
+    const { resources: clipboardResources } = storeToRefs(clipboardStore)
+
     const areFileExtensionsShown = computed(() => unref(store.state.Files.areFileExtensionsShown))
 
     useUpload({ uppyService })
@@ -359,7 +364,7 @@ export default defineComponent({
 
     const handlePasteFileEvent = (event) => {
       // Ignore file in clipboard if there are already files from owncloud in the clipboard
-      if (store.state.Files.clipboardResources.length || !unref(canUpload)) {
+      if (unref(clipboardResources).length || !unref(canUpload)) {
         return
       }
       // Browsers only allow single files to be pasted for security reasons
@@ -456,14 +461,14 @@ export default defineComponent({
       actionKeySuffix,
       showDrop,
       areFileExtensionsShown,
+      clearClipboard,
+      clipboardResources,
 
       // HACK: exported for unit tests:
       onUploadComplete
     }
   },
   computed: {
-    ...mapGetters('Files', ['clipboardResources']),
-
     showPasteHereButton() {
       return this.clipboardResources && this.clipboardResources.length !== 0
     },
@@ -521,8 +526,6 @@ export default defineComponent({
     }
   },
   methods: {
-    ...mapActions('Files', ['clearClipboardFiles']),
-
     getIconResource(fileHandler) {
       return { type: 'file', extension: fileHandler.ext } as Resource
     }

packages/web-app-files/src/composables/keyboardActions/useKeyboardTableActions.ts

@@ -1,17 +1,11 @@
-import { Key, KeyboardActions, ModifierKey, useMessages } from '@ownclouders/web-pkg'
+import { Key, KeyboardActions, ModifierKey, useClipboardStore } from '@ownclouders/web-pkg'
 import { useStore } from '@ownclouders/web-pkg'
-import { useGettext } from 'vue3-gettext'
 
 export const useKeyboardTableActions = (keyActions: KeyboardActions) => {
   const store = useStore()
-  const messageStore = useMessages()
-  const language = useGettext()
+  const { copyResources } = useClipboardStore()
 
   keyActions.bindKeyAction({ modifier: ModifierKey.Ctrl, primary: Key.C }, () => {
-    store.dispatch('Files/copySelectedFiles', {
-      ...language,
-      resources: store.getters['Files/selectedFiles'],
-      messageStore
-    })
+    copyResources(store.getters['Files/selectedFiles'])
   })
 }

packages/web-app-files/src/composables/keyboardActions/useKeyboardTableSpaceActions.ts

@@ -1,37 +1,25 @@
-import { Key, KeyboardActions, ModifierKey, useMessages } from '@ownclouders/web-pkg'
+import { Key, KeyboardActions, ModifierKey, useClipboardStore } from '@ownclouders/web-pkg'
 import { SpaceResource } from '@ownclouders/web-client'
 import { useStore } from '@ownclouders/web-pkg'
-import { useGettext } from 'vue3-gettext'
 import { unref } from 'vue'
 import { useFileActionsPaste } from '@ownclouders/web-pkg'
 
 export const useKeyboardTableSpaceActions = (keyActions: KeyboardActions, space: SpaceResource) => {
   const store = useStore()
-  const messageStore = useMessages()
-  const language = useGettext()
+  const { copyResources, cutResources } = useClipboardStore()
 
   const { actions: pasteFileActions } = useFileActionsPaste({ store })
   const pasteFileAction = unref(pasteFileActions)[0].handler
 
   keyActions.bindKeyAction({ modifier: ModifierKey.Ctrl, primary: Key.C }, () => {
-    store.dispatch('Files/copySelectedFiles', {
-      ...language,
-      space: space,
-      resources: store.getters['Files/selectedFiles'],
-      messageStore
-    })
+    copyResources(store.getters['Files/selectedFiles'])
   })
 
   keyActions.bindKeyAction({ modifier: ModifierKey.Ctrl, primary: Key.V }, () => {
     pasteFileAction({ space: space })
   })
 
   keyActions.bindKeyAction({ modifier: ModifierKey.Ctrl, primary: Key.X }, () => {
-    store.dispatch('Files/cutSelectedFiles', {
-      ...language,
-      space: space,
-      resources: store.getters['Files/selectedFiles'],
-      messageStore
-    })
+    cutResources(store.getters['Files/selectedFiles'])
   })
 }

packages/web-app-files/src/helpers/resource/actions/index.ts

@@ -1,3 +1 @@
-export * from './transfer'
 export * from './upload'
-export * from './types'

packages/web-app-files/src/store/actions.ts

@@ -1,16 +1,14 @@
 import PQueue from 'p-queue'
 
-import { MessageStore, CapabilityStore, getParentPaths, ConfigStore } from '@ownclouders/web-pkg'
+import { MessageStore, CapabilityStore, ConfigStore, getParentPaths } from '@ownclouders/web-pkg'
 import {
   buildShare,
   buildCollaboratorShare,
   ShareTypes
 } from '@ownclouders/web-client/src/helpers/share'
-import { ResourceTransfer, TransferType } from '../helpers/resource'
 import { avatarUrl } from '../helpers/user'
 import { has } from 'lodash-es'
 import get from 'lodash-es/get'
-import { ClipboardActions } from '@ownclouders/web-pkg'
 import {
   buildResource,
   isProjectSpaceResource,
@@ -45,74 +43,6 @@ export default {
       context.commit('ADD_FILE_SELECTION', file)
     }
   },
-  copySelectedFiles(
-    context,
-    options: { resources: Resource[]; messageStore: MessageStore } & Language
-  ) {
-    const { $gettext } = options
-    context.commit('CLIPBOARD_SELECTED', options)
-    context.commit('SET_CLIPBOARD_ACTION', ClipboardActions.Copy)
-    options.messageStore.showMessage({ title: $gettext('Copied to clipboard!'), status: 'success' })
-  },
-  cutSelectedFiles(
-    context,
-    options: {
-      space: SpaceResource
-      resources: Resource[]
-      messageStore: MessageStore
-    } & Language
-  ) {
-    const { $gettext } = options
-    context.commit('CLIPBOARD_SELECTED', options)
-    context.commit('SET_CLIPBOARD_ACTION', ClipboardActions.Cut)
-    options.messageStore.showMessage({ title: $gettext('Cut to clipboard!'), status: 'success' })
-  },
-  clearClipboardFiles(context) {
-    context.commit('CLEAR_CLIPBOARD')
-  },
-  pasteSelectedFiles(
-    context,
-    { targetSpace, clientService, loadingService, $gettext, $ngettext, sourceSpace, resources }
-  ) {
-    const copyMove = new ResourceTransfer(
-      sourceSpace,
-      resources,
-      targetSpace,
-      context.state.currentFolder,
-      clientService,
-      loadingService,
-      $gettext,
-      $ngettext
-    )
-    let movedResourcesPromise
-    if (context.state.clipboardAction === ClipboardActions.Cut) {
-      movedResourcesPromise = copyMove.perform(TransferType.MOVE)
-    }
-    if (context.state.clipboardAction === ClipboardActions.Copy) {
-      movedResourcesPromise = copyMove.perform(TransferType.COPY)
-    }
-    return movedResourcesPromise.then((movedResources) => {
-      const loadingResources = []
-      const fetchedResources = []
-      for (const resource of movedResources) {
-        loadingResources.push(
-          (async () => {
-            const movedResource = await (clientService.webdav as WebDAV).getFileInfo(
-              targetSpace,
-              resource
-            )
-            fetchedResources.push(movedResource)
-          })()
-        )
-      }
-
-      return Promise.all(loadingResources).then(() => {
-        const currentFolder = context.getters.currentFolder
-        context.commit('UPSERT_RESOURCES', fetchedResources)
-        context.commit('LOAD_INDICATORS', currentFolder.path)
-      })
-    })
-  },
   resetFileSelection(context) {
     context.commit('RESET_SELECTION')
   },

packages/web-app-files/src/store/getters.ts

@@ -11,12 +11,6 @@ export default {
   currentFolder: (state) => {
     return state.currentFolder
   },
-  clipboardResources: (state) => {
-    return state.clipboardResources
-  },
-  clipboardAction: (state) => {
-    return state.clipboardAction
-  },
   activeFiles: (state, getters) => {
     let files = [].concat(getters.files)
 

packages/web-app-files/src/store/mutations.ts

@@ -1,6 +1,5 @@
 import { set, has } from 'lodash-es'
 import { getIndicators } from '@ownclouders/web-pkg'
-import { Resource } from '@ownclouders/web-client/src/helpers'
 
 export default {
   LOAD_FILES(state, { currentFolder, files }) {
@@ -13,16 +12,6 @@ export default {
   CLEAR_FILES(state) {
     state.files = []
   },
-  CLEAR_CLIPBOARD(state) {
-    state.clipboardResources = []
-    state.clipboardAction = null
-  },
-  CLIPBOARD_SELECTED(state, { resources }: { resources: Resource[] }) {
-    state.clipboardResources = resources
-  },
-  SET_CLIPBOARD_ACTION(state, action) {
-    state.clipboardAction = action
-  },
   SET_LATEST_SELECTED_FILE_ID(state, fileId) {
     state.latestSelectedId = fileId
   },

packages/web-app-files/src/store/state.ts

@@ -3,8 +3,6 @@ export default {
   files: [],
   selectedIds: [],
   latestSelectedId: null,
-  clipboardResources: [],
-  clipboardAction: null,
   versions: [],
 
   /**

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

@@ -169,6 +169,8 @@ import {
 
 import {
   ProcessorType,
+  ResourceTransfer,
+  TransferType,
   useCapabilityStore,
   useConfigStore,
   useEmbedMode,
@@ -212,7 +214,6 @@ import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import WhitespaceContextMenu from 'web-app-files/src/components/Spaces/WhitespaceContextMenu.vue'
 import { eventBus } from '@ownclouders/web-pkg'
 import { useResourcesViewDefaults } from '../../composables'
-import { ResourceTransfer, TransferType } from '../../helpers/resource'
 import { FolderLoaderOptions } from '../../services/folder'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { v4 as uuidv4 } from 'uuid'

packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts

@@ -7,7 +7,9 @@ import {
   useFileActionsCreateNewFile,
   useRequest,
   useSpacesStore,
-  CapabilityStore
+  CapabilityStore,
+  useClipboardStore,
+  useFileActionsPaste
 } from '@ownclouders/web-pkg'
 import { eventBus, UppyResource } from '@ownclouders/web-pkg'
 import {
@@ -27,7 +29,8 @@ jest.mock('@ownclouders/web-pkg', () => ({
   useExtensionRegistry: jest.fn(),
   useRequest: jest.fn(),
   useFileActionsCreateNewFile: jest.fn(),
-  useFileActions: jest.fn()
+  useFileActions: jest.fn(),
+  useFileActionsPaste: jest.fn()
 }))
 
 const elSelector = {
@@ -105,20 +108,21 @@ describe('CreateAndUpload component', () => {
       expect(wrapper.findAll(`${elSelector.clipboardBtns} .oc-button`).length).toBe(2)
     })
     it('call the "paste files"-action', async () => {
-      const { wrapper, storeOptions } = getWrapper({
+      const { wrapper, mocks } = getWrapper({
         clipboardResources: [
           mock<Resource>({
             shareRoot: undefined
           })
         ]
       })
       await wrapper.find(elSelector.pasteFilesBtn).trigger('click')
-      expect(storeOptions.modules.Files.actions.pasteSelectedFiles).toHaveBeenCalled()
+      expect(mocks.pasteActionHandler).toHaveBeenCalled()
     })
     it('call "clear clipboard"-action', async () => {
-      const { wrapper, storeOptions } = getWrapper({ clipboardResources: [mock<Resource>()] })
+      const { wrapper } = getWrapper({ clipboardResources: [mock<Resource>()] })
       await wrapper.find(elSelector.clearClipboardBtn).trigger('click')
-      expect(storeOptions.modules.Files.actions.clearClipboardFiles).toHaveBeenCalled()
+      const clipboardStore = useClipboardStore()
+      expect(clipboardStore.clearClipboard).toHaveBeenCalled()
     })
   })
   describe('method "onUploadComplete"', () => {
@@ -194,14 +198,21 @@ function getWrapper({
     })
   )
 
+  const pasteActionHandler = jest.fn()
+  jest.mocked(useFileActionsPaste).mockReturnValue(
+    mock<ReturnType<typeof useFileActionsPaste>>({
+      actions: ref([mock<FileAction>({ handler: pasteActionHandler })])
+    })
+  )
+
   const storeOptions = { ...defaultStoreMockOptions }
   storeOptions.modules.Files.state.areFileExtensionsShown = areFileExtensionsShown
   storeOptions.modules.Files.getters.currentFolder.mockImplementation(() => currentFolder)
-  storeOptions.modules.Files.getters.clipboardResources.mockImplementation(() => clipboardResources)
   storeOptions.modules.Files.getters.files.mockImplementation(() => files)
   const store = createStore(storeOptions)
   const mocks = {
-    ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: currentRouteName }) })
+    ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: currentRouteName }) }),
+    pasteActionHandler
   }
   const capabilities = {
     spaces: { enabled: true },
@@ -224,7 +235,8 @@ function getWrapper({
             piniaOptions: {
               appsState: { fileExtensions },
               spacesState: { spaces: spaces as any },
-              capabilityState: { capabilities }
+              capabilityState: { capabilities },
+              clipboardState: { resources: clipboardResources }
             }
           }),
           store