Provider views rewrite (.files, .folders => .partialTree)

packages/@uppy/companion-client/src/Provider.ts

@@ -366,7 +366,7 @@ export default class Provider<M extends Meta, B extends Body>
   }
 
   list<ResBody>(
-    directory: string | undefined,
+    directory: string | null,
     options: RequestOptions,
   ): Promise<ResBody> {
     return this.get<ResBody>(`${this.id}/list/${directory || ''}`, options)

packages/@uppy/core/src/Uppy.test.ts

@@ -2160,7 +2160,7 @@ describe('src/Core', () => {
       )
     })
 
-    it('should check if a file validateRestrictions', () => {
+    it('should report error on validateSingleFile', () => {
       const core = new Core({
         restrictions: {
           minFileSize: 300000,
@@ -2185,17 +2185,13 @@ describe('src/Core', () => {
         size: 270733,
       }
 
-      // @ts-ignore
-      const validateRestrictions1 = core.validateRestrictions(newFile)
-      // @ts-ignore
-      const validateRestrictions2 = core2.validateRestrictions(newFile)
+      const validateRestrictions1 = core.validateSingleFile(newFile)
+      const validateRestrictions2 = core2.validateSingleFile(newFile)
 
-      expect(validateRestrictions1!.message).toEqual(
+      expect(validateRestrictions1).toEqual(
         'This file is smaller than the allowed size of 293 KB',
       )
-      expect(validateRestrictions2!.message).toEqual(
-        'You can only upload: image/png',
-      )
+      expect(validateRestrictions2).toEqual('You can only upload: image/png')
     })
 
     it('should emit `restriction-failed` event when some rule is violated', () => {

packages/@uppy/core/src/Uppy.ts

@@ -58,23 +58,86 @@ export type UnknownPlugin<
   PluginState extends Record<string, unknown> = Record<string, unknown>,
 > = BasePlugin<any, M, B, PluginState>
 
-// `OmitFirstArg<typeof someArray>` is the type of the returned value of `someArray.slice(1)`.
-type OmitFirstArg<T> = T extends [any, ...infer U] ? U : never
+/**
+ * ids are always `string`s, except the root folder's id can be `null`
+ */
+export type PartialTreeId = string | null
+
+export type PartialTreeStatusFile = 'checked' | 'unchecked'
+export type PartialTreeStatus = PartialTreeStatusFile | 'partial'
+
+export type PartialTreeFile = {
+  type: 'file'
+  id: string
+
+  /**
+   * There exist two types of restrictions:
+   * - individual restrictions (`allowedFileTypes`, `minFileSize`, `maxFileSize`), and
+   * - aggregate restrictions (`maxNumberOfFiles`, `maxTotalFileSize`).
+   *
+   * `.restrictionError` reports whether this file passes individual restrictions.
+   *
+   */
+  restrictionError: string | null
+
+  status: PartialTreeStatusFile
+  parentId: PartialTreeId
+  data: CompanionFile
+}
+
+export type PartialTreeFolderNode = {
+  type: 'folder'
+  id: string
+
+  /**
+   * Consider `(.nextPagePath, .cached)` a composite key that can represent 4 states:
+   * - `{ cached: true, nextPagePath: null }` - we fetched all pages in this folder
+   * - `{ cached: true, nextPagePath: 'smth' }` - we fetched 1st page, and there are still pages left to fetch in this folder
+   * - `{ cached: false, nextPagePath: null }` - we didn't fetch the 1st page in this folder
+   * - `{ cached: false, nextPagePath: 'someString' }` - ❌ CAN'T HAPPEN ❌
+   */
+  cached: boolean
+  nextPagePath: PartialTreeId
+
+  status: PartialTreeStatus
+  parentId: PartialTreeId
+  data: CompanionFile
+}
+
+export type PartialTreeFolderRoot = {
+  type: 'root'
+  id: PartialTreeId
+
+  cached: boolean
+  nextPagePath: PartialTreeId
+}
+
+export type PartialTreeFolder = PartialTreeFolderNode | PartialTreeFolderRoot
+
+/**
+ * PartialTree has the following structure.
+ *
+ *           FolderRoot
+ *         ┌─────┴─────┐
+ *     FolderNode     File
+ *   ┌─────┴────┐
+ *  File      File
+ *
+ * Root folder is called `PartialTreeFolderRoot`,
+ * all other folders are called `PartialTreeFolderNode`, because they are "internal nodes".
+ *
+ * It's possible for `PartialTreeFolderNode` to be a leaf node if it doesn't contain any files.
+ */
+export type PartialTree = (PartialTreeFile | PartialTreeFolder)[]
 
 export type UnknownProviderPluginState = {
   authenticated: boolean | undefined
-  breadcrumbs: {
-    requestPath?: string
-    name?: string
-    id?: string
-  }[]
   didFirstRender: boolean
-  currentSelection: CompanionFile[]
-  filterInput: string
+  searchString: string
   loading: boolean | string
-  folders: CompanionFile[]
-  files: CompanionFile[]
-  isSearchVisible: boolean
+  partialTree: PartialTree
+  currentFolderId: PartialTreeId
+  username: string | null
 }
 /*
  * UnknownProviderPlugin can be any Companion plugin (such as Google Drive).
@@ -89,8 +152,8 @@ export type UnknownProviderPlugin<
   M extends Meta,
   B extends Body,
 > = UnknownPlugin<M, B, UnknownProviderPluginState> & {
-  rootFolderId: string | null
   title: string
+  rootFolderId: string | null
   files: UppyFile<M, B>[]
   icon: () => h.JSX.Element
   provider: CompanionClientProvider
@@ -111,16 +174,10 @@ export type UnknownProviderPlugin<
  * `SearchProvider` does operate on Companion plugins with `uppy.getPlugin()`.
  */
 export type UnknownSearchProviderPluginState = {
-  isInputMode?: boolean
-  searchTerm?: string | null
+  isInputMode: boolean
 } & Pick<
   UnknownProviderPluginState,
-  | 'loading'
-  | 'files'
-  | 'folders'
-  | 'currentSelection'
-  | 'filterInput'
-  | 'didFirstRender'
+  'loading' | 'searchString' | 'partialTree' | 'currentFolderId'
 >
 export type UnknownSearchProviderPlugin<
   M extends Meta,
@@ -296,6 +353,9 @@ export interface UppyEventMap<M extends Meta, B extends Body>
   'upload-start': (files: UppyFile<M, B>[]) => void
 }
 
+/** `OmitFirstArg<typeof someArray>` is the type of the returned value of `someArray.slice(1)`. */
+type OmitFirstArg<T> = T extends [any, ...infer U] ? U : never
+
 const defaultUploadState = {
   totalProgress: 0,
   allowNewUpload: true,
@@ -780,14 +840,23 @@ export class Uppy<M extends Meta, B extends Body = Record<string, never>> {
     }
   }
 
-  validateRestrictions(
-    file: ValidateableFile<M, B>,
-    files: ValidateableFile<M, B>[] = this.getFiles(),
-  ): RestrictionError<M, B> | null {
+  validateSingleFile(file: ValidateableFile<M, B>): string | null {
+    try {
+      this.#restricter.validateSingleFile(file)
+    } catch (err) {
+      return err.message
+    }
+    return null
+  }
+
+  validateAggregateRestrictions(
+    files: ValidateableFile<M, B>[],
+  ): string | null {
+    const existingFiles = this.getFiles()
     try {
-      this.#restricter.validate(files, [file])
+      this.#restricter.validateAggregateRestrictions(existingFiles, files)
     } catch (err) {
-      return err as any
+      return err.message
     }
     return null
   }

packages/@uppy/core/src/_common.scss

@@ -127,7 +127,7 @@
   background-color: $blue;
   border-radius: 4px;
 
-  &:hover {
+  &:not(:disabled):hover {
     background-color: darken($blue, 10%);
   }
 
@@ -145,6 +145,10 @@
 
     @include blue-border-focus--dark;
   }
+
+  &.uppy-c-btn--disabled {
+    background-color: rgb(142, 178, 219);
+  }
 }
 
 .uppy-c-btn-link {

packages/@uppy/facebook/src/Facebook.tsx

@@ -103,19 +103,19 @@ export default class Facebook<M extends Meta, B extends Body> extends UIPlugin<
   }
 
   render(state: unknown): ComponentChild {
-    const viewOptions: {
-      viewType?: string
-      showFilter?: boolean
-      showTitles?: boolean
-    } = {}
-    if (
-      this.getPluginState().files.length &&
-      !this.getPluginState().folders.length
-    ) {
-      viewOptions.viewType = 'grid'
-      viewOptions.showFilter = false
-      viewOptions.showTitles = false
+    const { partialTree, currentFolderId } = this.getPluginState()
+
+    const foldersInThisFolder = partialTree.filter(
+      (i) => i.type === 'folder' && i.parentId === currentFolderId,
+    )
+
+    if (foldersInThisFolder.length === 0) {
+      return this.view.render(state, {
+        viewType: 'grid',
+        showFilter: false,
+        showTitles: false,
+      })
     }
-    return this.view.render(state, viewOptions)
+    return this.view.render(state)
   }
 }

packages/@uppy/google-drive/src/DriveProviderViews.ts

@@ -1,18 +1,22 @@
+import type {
+  PartialTreeFile,
+  PartialTreeFolderNode,
+} from '@uppy/core/lib/Uppy'
 import { ProviderViews } from '@uppy/provider-views'
-import type { CompanionFile } from '@uppy/utils/lib/CompanionFile'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 
 export default class DriveProviderViews<
   M extends Meta,
   B extends Body,
 > extends ProviderViews<M, B> {
-  toggleCheckbox(e: Event, file: CompanionFile): void {
-    e.stopPropagation()
-    e.preventDefault()
-
-    // Shared Drives aren't selectable; for all else, defer to the base ProviderView.
-    if (!file.custom!.isSharedDrive) {
-      super.toggleCheckbox(e, file)
+  toggleCheckbox(
+    item: PartialTreeFolderNode | PartialTreeFile,
+    isShiftKeyPressed: boolean,
+  ): void {
+    // We don't allow to check team drives; but we leave the checkboxes visible to show the 'partial' state
+    // (For a full explanation, see https://github.com/transloadit/uppy/issues/5232)
+    if (!item.data.custom?.isSharedDrive) {
+      super.toggleCheckbox(item, isShiftKeyPressed)
     }
   }
 }

packages/@uppy/google-photos/src/GooglePhotos.tsx

@@ -114,10 +114,13 @@ export default class GooglePhotos<
   }
 
   render(state: unknown): ComponentChild {
-    if (
-      this.getPluginState().files.length &&
-      !this.getPluginState().folders.length
-    ) {
+    const { partialTree, currentFolderId } = this.getPluginState()
+
+    const foldersInThisFolder = partialTree.filter(
+      (i) => i.type === 'folder' && i.parentId === currentFolderId,
+    )
+
+    if (foldersInThisFolder.length === 0) {
       return this.view.render(state, {
         viewType: 'grid',
         showFilter: false,

packages/@uppy/provider-views/package.json

@@ -25,6 +25,9 @@
     "p-queue": "^8.0.0",
     "preact": "^10.5.13"
   },
+  "devDependencies": {
+    "vitest": "^1.6.0"
+  },
   "peerDependencies": {
     "@uppy/core": "workspace:^"
   },

packages/@uppy/provider-views/src/Breadcrumbs.tsx

@@ -1,53 +1,35 @@
-import type { UnknownProviderPluginState } from '@uppy/core/lib/Uppy'
+import type { PartialTreeFolder } from '@uppy/core/lib/Uppy'
 import { h, Fragment } from 'preact'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 import type ProviderView from './ProviderView/index.js'
 
-type BreadcrumbProps = {
-  getFolder: () => void
-  title: string
-  isLast: boolean
-}
-
-const Breadcrumb = (props: BreadcrumbProps) => {
-  const { getFolder, title, isLast } = props
-
-  return (
-    <Fragment>
-      <button
-        type="button"
-        className="uppy-u-reset uppy-c-btn"
-        onClick={getFolder}
-      >
-        {title}
-      </button>
-      {!isLast ? ' / ' : ''}
-    </Fragment>
-  )
-}
-
 type BreadcrumbsProps<M extends Meta, B extends Body> = {
-  getFolder: ProviderView<M, B>['getFolder']
+  openFolder: ProviderView<M, B>['openFolder']
   title: string
   breadcrumbsIcon: h.JSX.Element
-  breadcrumbs: UnknownProviderPluginState['breadcrumbs']
+  breadcrumbs: PartialTreeFolder[]
 }
 
 export default function Breadcrumbs<M extends Meta, B extends Body>(
   props: BreadcrumbsProps<M, B>,
-) {
-  const { getFolder, title, breadcrumbsIcon, breadcrumbs } = props
+): h.JSX.Element {
+  const { openFolder, title, breadcrumbsIcon, breadcrumbs } = props
 
   return (
     <div className="uppy-Provider-breadcrumbs">
       <div className="uppy-Provider-breadcrumbsIcon">{breadcrumbsIcon}</div>
-      {breadcrumbs.map((directory, i) => (
-        <Breadcrumb
-          key={directory.id}
-          getFolder={() => getFolder(directory.requestPath, directory.name)}
-          title={i === 0 ? title : (directory.name as string)}
-          isLast={i + 1 === breadcrumbs.length}
-        />
+      {breadcrumbs.map((folder, index) => (
+        <Fragment>
+          <button
+            key={folder.id}
+            type="button"
+            className="uppy-u-reset uppy-c-btn"
+            onClick={() => openFolder(folder.id)}
+          >
+            {folder.type === 'root' ? title : folder.data.name}
+          </button>
+          {breadcrumbs.length === index + 1 ? '' : ' / '}
+        </Fragment>
       ))}
     </div>
   )