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,16 @@ 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 } = this.getPluginState()
+ const folders = partialTree.filter((i) => i.type === 'folder')
+
+ if (folders.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/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>
  )