Make Asset Table selection backend specific (#11288)

- Fix enso-org/cloud-v2#1542
- Ignore selection (and clear target directory) when the selection is for a different backend

# Important Notes
None

Author: somebody1234

app/common/src/text/english.json

@@ -629,6 +629,8 @@
   "slsaLicenseAgreementDescription1": "This Order is governed by the Software License and Service Agreement found at",
   "slsaLicenseAgreementDescription2": ", (the “Agreement”). All capitalized terms used in this Customer Order but not otherwise defined herein shall have the meanings set forth in the Agreement.\n                      Except as expressly provided in the Agreement, Products and Services purchased under this Customer Order are non-cancelable and non-refundable.",
   "downgradeInfo": "to downgrade",
+  "xItemsCopied": "$0 item(s) copied",
+  "xItemsCut": "$0 item(s) cut",
 
   "someAgreementsHaveBeenUpdated": "Some agreements have been updated. Please re-read and agree to continue.",
   "licenseAgreementTitle": "Enso Terms of Service",

app/common/src/text/index.ts

@@ -139,6 +139,8 @@ interface PlaceholderOverrides {
   readonly trialDescription: [days: number]
   readonly groupNameSettingsInputDescription: [howLong: number]
   readonly xIsUsingTheProject: [userName: string]
+  readonly xItemsCopied: [count: number]
+  readonly xItemsCut: [count: number]
 
   readonly arbitraryFieldTooLarge: [maxSize: string]
   readonly arbitraryFieldTooSmall: [minSize: string]

app/gui/src/dashboard/layouts/AssetContextMenu.tsx

@@ -36,7 +36,9 @@ import ManagePermissionsModal from '#/modals/ManagePermissionsModal'
 import * as backendModule from '#/services/Backend'
 import * as localBackendModule from '#/services/LocalBackend'
 
+import { backendMutationOptions } from '#/hooks/backendHooks'
 import {
+  usePasteData,
   useSetAssetPanelProps,
   useSetIsAssetPanelTemporarilyVisible,
 } from '#/providers/DriveProvider'
@@ -70,7 +72,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
   const { innerProps, rootDirectoryId, event, eventTarget, hidden = false } = props
   const { doCopy, doCut, doPaste, doDelete } = props
   const { item, setItem, state, setRowState } = innerProps
-  const { backend, category, hasPasteData, pasteData, nodeMap } = state
+  const { backend, category, nodeMap } = state
 
   const { user } = authProvider.useFullUserSession()
   const { setModal } = modalProvider.useSetModal()
@@ -99,6 +101,9 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
     : isCloud ? encodeURI(pathRaw)
     : pathRaw
   const copyMutation = copyHooks.useCopy({ copyText: path ?? '' })
+  const uploadFileMutation = reactQuery.useMutation(
+    backendMutationOptions(remoteBackend, 'uploadFile'),
+  )
 
   const { isFeatureUnderPaywall } = billingHooks.usePaywall({ plan: user.plan })
   const isUnderPaywall = isFeatureUnderPaywall('share')
@@ -112,8 +117,10 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
     category.type !== 'recent' &&
     asset.type === backendModule.AssetType.directory &&
     canEditThisAsset
+  const pasteData = usePasteData()
+  const hasPasteData = (pasteData?.data.ids.size ?? 0) > 0
   const pasteDataParentKeys =
-    !pasteData.current ? null : (
+    !pasteData ? null : (
       new Map(
         Array.from(nodeMap.current.entries()).map(([id, otherAsset]) => [
           id,
@@ -122,9 +129,9 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
       )
     )
   const canPaste =
-    !pasteData.current || !pasteDataParentKeys || !isCloud ?
+    !pasteData || !pasteDataParentKeys || !isCloud ?
       true
-    : !Array.from(pasteData.current.data).some((assetId) => {
+    : !Array.from(pasteData.data.ids).some((assetId) => {
         const parentKey = pasteDataParentKeys.get(assetId)
         const parent = parentKey == null ? null : nodeMap.current.get(parentKey)
         return !parent ? true : (
@@ -156,6 +163,20 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
 
   const setAsset = setAssetHooks.useSetAsset(asset, setItem)
 
+  const pasteMenuEntry = hasPasteData && canPaste && (
+    <ContextMenuEntry
+      hidden={hidden}
+      action="paste"
+      doAction={() => {
+        const [directoryKey, directoryId] =
+          item.type === backendModule.AssetType.directory ?
+            [item.key, item.item.id]
+          : [item.directoryKey, item.directoryId]
+        doPaste(directoryKey, directoryId)
+      }}
+    />
+  )
+
   return (
     category.type === 'trash' ?
       !ownsThisAsset ? null
@@ -186,6 +207,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
                 )
               }}
             />
+            {pasteMenuEntry}
           </ContextMenu>
         </ContextMenus>
     : <ContextMenus hidden={hidden} key={asset.id} event={event}>
@@ -276,19 +298,14 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
                     const projectResponse = await fetch(
                       `./api/project-manager/projects/${localBackendModule.extractTypeAndId(asset.id).id}/enso-project`,
                     )
-                    // This DOES NOT update the cloud assets list when it
-                    // completes, as the current backend is not the remote
-                    // (cloud) backend. The user may change to the cloud backend
-                    // while this request is in progress, however this is
-                    // uncommon enough that it is not worth the added complexity.
-                    await remoteBackend.uploadFile(
+                    await uploadFileMutation.mutateAsync([
                       {
                         fileName: `${asset.title}.enso-project`,
                         fileId: null,
                         parentDirectoryId: null,
                       },
                       await projectResponse.blob(),
-                    )
+                    ])
                     toast.toast.success(getText('uploadProjectToCloudSuccess'))
                   } catch (error) {
                     toastAndLog('uploadProjectToCloudError', error)
@@ -467,25 +484,12 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
               }}
             />
           )}
-          {hasPasteData && canPaste && (
-            <ContextMenuEntry
-              hidden={hidden}
-              action="paste"
-              doAction={() => {
-                const [directoryKey, directoryId] =
-                  item.type === backendModule.AssetType.directory ?
-                    [item.key, item.item.id]
-                  : [item.directoryKey, item.directoryId]
-                doPaste(directoryKey, directoryId)
-              }}
-            />
-          )}
+          {pasteMenuEntry}
         </ContextMenu>
         {canAddToThisDirectory && (
           <GlobalContextMenu
             hidden={hidden}
             backend={backend}
-            hasPasteData={hasPasteData}
             rootDirectoryId={rootDirectoryId}
             directoryKey={
               // This is SAFE, as both branches are guaranteed to be `DirectoryId`s

app/gui/src/dashboard/layouts/AssetsTable.tsx

@@ -64,7 +64,12 @@ import useOnScroll from '#/hooks/useOnScroll'
 import type * as assetSearchBar from '#/layouts/AssetSearchBar'
 import * as eventListProvider from '#/layouts/AssetsTable/EventListProvider'
 import AssetsTableContextMenu from '#/layouts/AssetsTableContextMenu'
-import { isLocalCategory, type Category } from '#/layouts/CategorySwitcher/Category'
+import {
+  canTransferBetweenCategories,
+  isLocalCategory,
+  useTransferBetweenCategories,
+  type Category,
+} from '#/layouts/CategorySwitcher/Category'
 import DragModal from '#/modals/DragModal'
 import DuplicateAssetsModal from '#/modals/DuplicateAssetsModal'
 import UpsertSecretModal from '#/modals/UpsertSecretModal'
@@ -81,6 +86,7 @@ import {
   useSetCanDownload,
   useSetIsAssetPanelTemporarilyVisible,
   useSetNewestFolderId,
+  useSetPasteData,
   useSetSelectedKeys,
   useSetSuggestions,
   useSetTargetDirectory,
@@ -141,7 +147,6 @@ import { fileExtension } from '#/utilities/fileInfo'
 import type { DetailedRectangle } from '#/utilities/geometry'
 import { DEFAULT_HANDLER } from '#/utilities/inputBindings'
 import LocalStorage from '#/utilities/LocalStorage'
-import type { PasteData } from '#/utilities/pasteData'
 import PasteType from '#/utilities/PasteType'
 import {
   canPermissionModifyDirectoryContents,
@@ -309,14 +314,11 @@ export interface AssetsTableState {
   readonly scrollContainerRef: RefObject<HTMLElement>
   readonly visibilities: ReadonlyMap<AssetId, Visibility>
   readonly category: Category
-  readonly hasPasteData: boolean
-  readonly setPasteData: (pasteData: PasteData<Set<AssetId>>) => void
   readonly sortInfo: SortInfo<SortableColumn> | null
   readonly setSortInfo: (sortInfo: SortInfo<SortableColumn> | null) => void
   readonly query: AssetQuery
   readonly setQuery: Dispatch<SetStateAction<AssetQuery>>
   readonly nodeMap: Readonly<MutableRefObject<ReadonlyMap<AssetId, AnyAssetTreeNode>>>
-  readonly pasteData: Readonly<MutableRefObject<PasteData<ReadonlySet<AssetId>> | null>>
   readonly hideColumn: (column: Column) => void
   readonly doToggleDirectoryExpansion: (
     directoryId: DirectoryId,
@@ -396,7 +398,7 @@ export default function AssetsTable(props: AssetsTableProps) {
   const setSelectedKeys = useSetSelectedKeys()
   const setVisuallySelectedKeys = useSetVisuallySelectedKeys()
   const updateAssetRef = useRef<Record<AnyAsset['id'], (asset: AnyAsset) => void>>({})
-  const [pasteData, setPasteData] = useState<PasteData<ReadonlySet<AssetId>> | null>(null)
+  const setPasteData = useSetPasteData()
 
   const { data: users } = useBackendQuery(backend, 'listUsers', [])
   const { data: userGroups } = useBackendQuery(backend, 'listUserGroups', [])
@@ -864,7 +866,6 @@ export default function AssetsTable(props: AssetsTableProps) {
   const lastSelectedIdsRef = useRef<AssetId | ReadonlySet<AssetId> | null>(null)
   const headerRowRef = useRef<HTMLTableRowElement>(null)
   const assetTreeRef = useRef<AnyAssetTreeNode>(assetTree)
-  const pasteDataRef = useRef<PasteData<ReadonlySet<AssetId>> | null>(null)
   const nodeMapRef = useRef<ReadonlyMap<AssetId, AnyAssetTreeNode>>(
     new Map<AssetId, AnyAssetTreeNode>(),
   )
@@ -1141,25 +1142,22 @@ export default function AssetsTable(props: AssetsTableProps) {
     nodeMapRef.current = newNodeMap
   }, [assetTree])
 
-  useEffect(() => {
-    pasteDataRef.current = pasteData
-  }, [pasteData])
-
   useEffect(() => {
     if (!hidden) {
       return inputBindings.attach(document.body, 'keydown', {
         cancelCut: () => {
-          if (pasteDataRef.current == null) {
+          const { pasteData } = driveStore.getState()
+          if (pasteData == null) {
             return false
           } else {
-            dispatchAssetEvent({ type: AssetEventType.cancelCut, ids: pasteDataRef.current.data })
+            dispatchAssetEvent({ type: AssetEventType.cancelCut, ids: pasteData.data.ids })
             setPasteData(null)
             return
           }
         },
       })
     }
-  }, [hidden, inputBindings, dispatchAssetEvent])
+  }, [dispatchAssetEvent, driveStore, hidden, inputBindings, setPasteData])
 
   useEffect(
     () =>
@@ -2145,29 +2143,40 @@ export default function AssetsTable(props: AssetsTableProps) {
   const doCopy = useEventCallback(() => {
     unsetModal()
     const { selectedKeys } = driveStore.getState()
-    setPasteData({ type: PasteType.copy, data: selectedKeys })
+    setPasteData({
+      type: PasteType.copy,
+      data: { backendType: backend.type, category, ids: selectedKeys },
+    })
   })
 
   const doCut = useEventCallback(() => {
     unsetModal()
+    const { selectedKeys, pasteData } = driveStore.getState()
     if (pasteData != null) {
-      dispatchAssetEvent({ type: AssetEventType.cancelCut, ids: pasteData.data })
+      dispatchAssetEvent({ type: AssetEventType.cancelCut, ids: pasteData.data.ids })
     }
-    const { selectedKeys } = driveStore.getState()
-    setPasteData({ type: PasteType.move, data: selectedKeys })
+    setPasteData({
+      type: PasteType.move,
+      data: { backendType: backend.type, category, ids: selectedKeys },
+    })
     dispatchAssetEvent({ type: AssetEventType.cut, ids: selectedKeys })
     setSelectedKeys(EMPTY_SET)
   })
 
+  const transferBetweenCategories = useTransferBetweenCategories(category)
   const doPaste = useEventCallback((newParentKey: DirectoryId, newParentId: DirectoryId) => {
     unsetModal()
-    if (pasteData != null) {
-      if (pasteData.data.has(newParentKey)) {
+    const { pasteData } = driveStore.getState()
+    if (
+      pasteData?.data.backendType === backend.type &&
+      canTransferBetweenCategories(pasteData.data.category, category)
+    ) {
+      if (pasteData.data.ids.has(newParentKey)) {
         toast.error('Cannot paste a folder into itself.')
       } else {
         doToggleDirectoryExpansion(newParentId, newParentKey, true)
         if (pasteData.type === PasteType.copy) {
-          const assets = Array.from(pasteData.data, (id) => nodeMapRef.current.get(id)).flatMap(
+          const assets = Array.from(pasteData.data.ids, (id) => nodeMapRef.current.get(id)).flatMap(
             (asset) => (asset ? [asset.item] : []),
           )
           dispatchAssetListEvent({
@@ -2177,12 +2186,13 @@ export default function AssetsTable(props: AssetsTableProps) {
             newParentKey,
           })
         } else {
-          dispatchAssetEvent({
-            type: AssetEventType.move,
-            ids: pasteData.data,
+          transferBetweenCategories(
+            pasteData.data.category,
+            category,
+            pasteData.data.ids,
             newParentKey,
             newParentId,
-          })
+          )
         }
         setPasteData(null)
       }
@@ -2207,7 +2217,6 @@ export default function AssetsTable(props: AssetsTableProps) {
         hidden
         backend={backend}
         category={category}
-        pasteData={pasteData}
         nodeMapRef={nodeMapRef}
         rootDirectoryId={rootDirectoryId}
         event={{ pageX: 0, pageY: 0 }}
@@ -2217,7 +2226,7 @@ export default function AssetsTable(props: AssetsTableProps) {
         doDelete={doDeleteById}
       />
     ),
-    [backend, category, pasteData, rootDirectoryId, doCopy, doCut, doPaste, doDeleteById],
+    [backend, category, rootDirectoryId, doCopy, doCut, doPaste, doDeleteById],
   )
 
   const onDropzoneDragOver = (event: DragEvent<Element>) => {
@@ -2260,14 +2269,11 @@ export default function AssetsTable(props: AssetsTableProps) {
       visibilities,
       scrollContainerRef: rootRef,
       category,
-      hasPasteData: pasteData != null,
-      setPasteData,
       sortInfo,
       setSortInfo,
       query,
       setQuery,
       nodeMap: nodeMapRef,
-      pasteData: pasteDataRef,
       hideColumn,
       doToggleDirectoryExpansion,
       doCopy,
@@ -2283,7 +2289,6 @@ export default function AssetsTable(props: AssetsTableProps) {
       rootDirectoryId,
       visibilities,
       category,
-      pasteData,
       sortInfo,
       query,
       doToggleDirectoryExpansion,
@@ -2762,7 +2767,6 @@ export default function AssetsTable(props: AssetsTableProps) {
             <AssetsTableContextMenu
               backend={backend}
               category={category}
-              pasteData={pasteData}
               nodeMapRef={nodeMapRef}
               event={event}
               rootDirectoryId={rootDirectoryId}