feat(pci.os): object pagination#21928
Conversation
af14670 to
de773bd
Compare
de773bd to
238a259
Compare
238a259 to
0b3cf1b
Compare
There was a problem hiding this comment.
Pull request overview
This PR implements object pagination for S3 object storage, introducing a virtualized browser with infinite scroll capabilities and improved folder navigation.
Changes:
- Replaced client-side filtering with server-side paginated object fetching using infinite queries
- Introduced virtualized rendering for efficient handling of large object lists
- Added folder navigation with prefix-based browsing and improved search functionality
Reviewed changes
Copilot reviewed 43 out of 43 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| objects.utils.ts | New utility functions for prefix normalization and URL building |
| objects.constants.ts | Constants for debounce delays, pagination limits, and display values |
| AddS3Form.component.tsx | Added prefix validation rules preventing trailing/consecutive slashes |
| Add.modal.tsx | Integration of URL query parameters to pre-populate prefix field |
| SearchBar.component.tsx | Removed complex search dropdown component |
| S3ObjectRow.component.tsx | New component dispatching rendering to appropriate row type |
| S3ObjectFileRenderer.component.tsx | Removed old file renderer component |
| S3ObjectBrowser.component.tsx | Removed old browser component |
| S3LZObjectFileRenderer.component.tsx | Removed old locale zone file renderer |
| RowActions.component.tsx | Extracted reusable row action buttons component |
| ParentRow.component.tsx | New component for navigating to parent directory |
| LZFileRow.component.tsx | New locale zone file row with virtualization support |
| FolderRow.component.tsx | New folder row component with keyboard navigation |
| FileRow.component.tsx | New file row component using extracted RowActions |
| Objects.page.tsx | Major refactor introducing pagination, virtualization, and folder navigation |
| useDebounce.hook.ts | New custom hook for debouncing values |
| useUpdateS3ObjectStorageClass.hook.tsx | Added query invalidation for browser queries |
| useS3ObjectsBrowser.spec.tsx | Comprehensive test suite for browser hook |
| useS3ObjectsBrowser.hook.tsx | New hook implementing infinite query pagination |
| useRestoreS3Object.hook.tsx | Added browser query invalidation |
| useDeleteS3ObjectVersion.hook.tsx | Added browser query invalidation |
| useDeleteS3Object.hook.tsx | Added browser query invalidation |
| useAddS3Object.hook.tsx | Added browser query invalidation |
| virtualized-browser.constants.ts | Constants for virtualized browser configuration |
| VirtualizedBrowser.component.tsx | New virtualized list component with infinite scroll |
| SimpleSearchBar.component.tsx | Enhanced with clear button and disabled state |
| Messages_*.json | Added translations for new UI labels and messages |
| package.json | Updated dependencies and added react-virtual library |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...nager/apps/pci-object-storage/src/pages/object-storage/storage/s3Id/objects/Objects.page.tsx
Show resolved
Hide resolved
.../apps/pci-object-storage/src/components/virtualized-browser/VirtualizedBrowser.component.tsx
Show resolved
Hide resolved
...nager/apps/pci-object-storage/src/pages/object-storage/storage/s3Id/objects/Objects.page.tsx
Show resolved
Hide resolved
0b3cf1b to
7f76a4a
Compare
packages/manager/apps/pci-object-storage/src/data/hooks/s3-storage/useS3ObjectsBrowser.hook.tsx
Outdated
Show resolved
Hide resolved
packages/manager/apps/pci-object-storage/src/data/hooks/s3-storage/useS3ObjectsBrowser.hook.tsx
Outdated
Show resolved
Hide resolved
packages/manager/apps/pci-object-storage/src/data/hooks/s3-storage/useS3ObjectsBrowser.hook.tsx
Outdated
Show resolved
Hide resolved
packages/manager/apps/pci-object-storage/src/data/hooks/s3-storage/useS3ObjectsBrowser.hook.tsx
Outdated
Show resolved
Hide resolved
| searchQuery: string, | ||
| navigationPrefix: string, | ||
| ): string { | ||
| return searchQuery || navigationPrefix; |
There was a problem hiding this comment.
question for me we should add the prefix for the actual navigation ? How to search in a folder with the actual implementation ?
There was a problem hiding this comment.
Search works only by providing the full prefix because of current api design. We could inject the current prefix in the search, but that would prevent user from searching in the whole bucket except when viewing the root content.
Maybe we could improve this in the future by letting the user search either in the current folder (where we inject the prefix) or in the whole bucket
packages/manager/apps/pci-object-storage/src/data/hooks/s3-storage/useS3ObjectsBrowser.hook.tsx
Outdated
Show resolved
Hide resolved
7f76a4a to
ada0438
Compare
ref: #DATATR-1234 Signed-off-by: Jonathan Perchoc <jonathan.perchoc@ovhcloud.com>
ada0438 to
f071dda
Compare
ref: #DATATR-1234
Description
Ticket Reference: #...
Additional Information