[front] - feat(data-sources): searchable folders and websites #6601
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JulesBelveze
changed the title
…reation - Implement a search bar to filter data sources by name in the builder UI - Update the data source creation flow with a new button and asynchronous interaction - Remove the old section headers, replacing them with a flexible row layout containing the search and button components - Use React hooks to manage new search bar state and input references - Streamline the creation process of public URLs and folders within builder data sources pages
…tItem with Table component for data sources display - Replaced the ContextItem component with a more structured Table component to list data sources - Added useMemo for creating a list of clickable data sources with associated metadata and actions - Implemented getTableColumns helper function to define the columns for the new table layout
- Updated package-lock.json to use the release candidate 0.2.194-rc2 of @dust-tt/sparkle - Adjusted package.json to specifically target the new release candidate version [front] - fix: correct typo in static data sources table column header - Fixed a typo from "Lasted updated" to "Last updated" in the data sources table component [front] - feat: add filtering feature to static data sources table - Enabled width expansion and added filtering by name to the static data sources table
…d improve data sources UI - Upgraded @dust-tt/sparkle package to its latest release candidate version. - Reworked public and static data sources UI to use a Table component for better data presentation and interaction. - Removed unused imports and components to clean up the data sources pages. - Introduced useMemo to optimize render performance for clickable data sources list. - Enhanced the data sources UI with additional columns and more informative cell components.
- Introduced a new TypeScript interface to improve type checking for the cell rendering functions in data source tables - Added null checks for the `editedByUser` field and fallbacks for missing `imageUrl` and `editedAt` properties to prevent runtime errors - Ensured the display of formatted dates accounts for possible null values in `editedAt` field
- Upgraded @dust-tt/sparkle from a release candidate to a stable version, ensuring the use of the latest features and fixes - Included new dependency @tanstack/react-table to enhance table components within the platform [front] - refactor: migrate Table to DataTable component - Replaced the Table component with the new DataTable component from @dust-tt/sparkle to leverage the latest library updates - Adjusted table cell components to align with the DataTable API changes for consistency and improved maintainability
…nent - Transition from Table to DataTable for consistent component use across the platform - Update corresponding TableData.Cell to DataTable.Cell to align with the new DataTable component usage
JulesBelveze
force-pushed
the
feat/connection-search-bar
branch
from
db5a6ae to
ce1e147
Compare
…ant 'clickable' property - Bumped the @dust-tt/sparkle package version from 0.2.197 to 0.2.198 - Simplified data source items by removing the unnecessary 'clickable' property since all items are intended to be clickable
fontanierh
reviewed
Aug 1, 2024
| icon: ComponentType; | ||
| usage: number; | ||
| }; | ||
| interface Info { |
There was a problem hiding this comment.
Why can't this be a type as well ?
There was a problem hiding this comment.
Also, why can't the whole thing be a singe type ?
There was a problem hiding this comment.
You right, on it 👍🏼
| </Page.Vertical> | ||
| </AppLayout> | ||
| ); | ||
| } | ||
|
|
||
| function getTableColumns() { |
There was a problem hiding this comment.
Can we avoid duplicating this whole thing ?
There was a problem hiding this comment.
Kinda feel like you want to have control over the columns and this logic is really dependant on the page you're in. I agree that there are very similar but they will soon differ. (For example the logo in folders is gonna be dependant on the type of file it is and we will add the size of the object, cf Figma)
There was a problem hiding this comment.
But totally fine sharing this function between pages if you want.
fontanierh
approved these changes
Aug 1, 2024
|
LGTM then |
- Changed OriginalType interface to a more concise Info type definition - Updated type structure to directly include the original DataSourceType within the row object
albandum
pushed a commit
that referenced
this pull request
Aug 28, 2024
* [front] - feature: add search functionality and enhance data-source creation - Implement a search bar to filter data sources by name in the builder UI - Update the data source creation flow with a new button and asynchronous interaction - Remove the old section headers, replacing them with a flexible row layout containing the search and button components - Use React hooks to manage new search bar state and input references - Streamline the creation process of public URLs and folders within builder data sources pages * [front/pages/w/[wId]/builder/data-sources] - refactor: replace ContextItem with Table component for data sources display - Replaced the ContextItem component with a more structured Table component to list data sources - Added useMemo for creating a list of clickable data sources with associated metadata and actions - Implemented getTableColumns helper function to define the columns for the new table layout * [front] - refactor: update @dust-tt/sparkle package to 0.2.194-rc2 - Updated package-lock.json to use the release candidate 0.2.194-rc2 of @dust-tt/sparkle - Adjusted package.json to specifically target the new release candidate version [front] - fix: correct typo in static data sources table column header - Fixed a typo from "Lasted updated" to "Last updated" in the data sources table component [front] - feat: add filtering feature to static data sources table - Enabled width expansion and added filtering by name to the static data sources table * [front] - refactor: update @dust-tt/sparkle to version 0.2.194-rc3 and improve data sources UI - Upgraded @dust-tt/sparkle package to its latest release candidate version. - Reworked public and static data sources UI to use a Table component for better data presentation and interaction. - Removed unused imports and components to clean up the data sources pages. - Introduced useMemo to optimize render performance for clickable data sources list. - Enhanced the data sources UI with additional columns and more informative cell components. * [front] - fix: ensure type safety and null checks in data sources tables - Introduced a new TypeScript interface to improve type checking for the cell rendering functions in data source tables - Added null checks for the `editedByUser` field and fallbacks for missing `imageUrl` and `editedAt` properties to prevent runtime errors - Ensured the display of formatted dates accounts for possible null values in `editedAt` field * [front] - feature: update @dust-tt/sparkle to version 0.2.197 - Upgraded @dust-tt/sparkle from a release candidate to a stable version, ensuring the use of the latest features and fixes - Included new dependency @tanstack/react-table to enhance table components within the platform [front] - refactor: migrate Table to DataTable component - Replaced the Table component with the new DataTable component from @dust-tt/sparkle to leverage the latest library updates - Adjusted table cell components to align with the DataTable API changes for consistency and improved maintainability * [front] - refactor: replace Table with DataTable in public-urls component - Transition from Table to DataTable for consistent component use across the platform - Update corresponding TableData.Cell to DataTable.Cell to align with the new DataTable component usage * [front] - refactor: update @dust-tt/sparkle package and remove redundant 'clickable' property - Bumped the @dust-tt/sparkle package version from 0.2.197 to 0.2.198 - Simplified data source items by removing the unnecessary 'clickable' property since all items are intended to be clickable * [front] - refactor: streamline type definitions for data source tables - Changed OriginalType interface to a more concise Info type definition - Updated type structure to directly include the original DataSourceType within the row object --------- Co-authored-by: Jules <[email protected]> Co-authored-by: Jules <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR aims at making folders and websites searchable as described in https://github.com/dust-tt/tasks/issues/1073.
It uses the newly introduced
Tablecomponent from sparkle (see PR #6583).New UI look:
References:
Risk
Broken UI
Deploy Plan
frontfront-edgefront