## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
- Index mismatch on ADD then DELETE/EDIT:
formatGridDataWithOperationValues was searching the original rows array
for DELETE_ROW and EDIT_CELL_CONTENT operations, then using those
indices on the modified formattedRows array (which had been shifted by
ADD_ROW's unshift). Both now search formattedRows directly.
- Cross-table operation leaking: The entire operation queue was passed
to formatGridDataWithOperationValues without filtering by the current
table, causing pending ADD_ROW and DELETE_ROW operations from one table
to appear in other tables. Operations are now filtered by tableId before
rendering.
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Since queue operations is a feature users can opt-out of, we need to
make it cleaner to toggle between queuing vs straight edits. To do this,
refactor all the operations into a single hook and reference it in
places where we mutate the rows.
## Testing
- Test edit cells, rows, and deletes for non queue operations
- Test edit cells, rows, and deletes for queue operations, also double
check modifying the same rows that are not yet added
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Context
If you've got a queued operation on a table, then switch tables, the
dashboard stalls for a few seconds before finally rendering the selected
table.
This was caused by an infinite loop in a useEffect calling
`reapplyOptimisticUpdates` due to `dataUpdatedAt` being in the
dependency array (which comes from react query)
Removing `dataUpdatedAt` would resolve the issue, but then it won't
solve the following comment in the code:
`// This ensures pending changes remain visible when switching tabs or
after data refresh`
## Changes involved
Opting to refactor the logic for rendering data in the Grid instead
- Avoid manipulating the data directly from the query client
- Manual changes to the query client are hard to track when debugging
- Ideally the data in the query client are exactly what is coming from
the API
- Instead just compute the row data if there's operations applied, and
render that in the grid
```
const baseRows = data?.rows ?? EMPTY_ARR
const rows = formatGridDataWithOperationValues({ operations, rows:
baseRows })
```
- Simplifies operations logic + data in react query remains as the
source of truth
- This also improves perceived performance, as previously we'd need to
invalidate the query client if we're removing any operation.
- A lot more apparent with the undo operation introduced
[here](https://github.com/supabase/supabase/pull/43957)
- Whereas now, we'll just revert back to whatever's in the query client
(and still do the invalidation behind the scenes) so things feel faster
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This pull request updates the `react-data-grid` dependency and refactors
code throughout the codebase to use the new import structure and updated
APIs. The changes improve compatibility with the latest version of
`react-data-grid`, simplify imports, and update row selection logic to
match new hook signatures. Additionally, some code is reorganized to use
absolute imports for internal components.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Context
Just removes the default column freeze behaviour on primary key columns
in the table editor. Behaviour should still persist if freezing
manually.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Updates**
* Grid columns are no longer frozen based on primary key designation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Completion of batch edits on the table editor
## Demo
https://github.com/user-attachments/assets/ab5a7112-3dcc-456a-a5fc-1c9a99fccf34
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Queued add/edit/delete operations with optimistic UI, conflict
resolution, and queue-based flows
* Side-panel items showing queued add/delete row previews
* **UI**
* Pending-add placeholders plus a visible "DEFAULT" marker in grid cells
* Visual row states: green for pending adds, red with strike-through for
pending deletes
* Queue-based deletes can bypass confirmation when queue mode is enabled
* **Tests**
* Expanded tests covering queue conflict resolution and queue utilities
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Consolidate copy to clipboard
* Fix
* Fix some extra clipboard events.
* Fix the tests. Fix a small issue with the copy button.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* chore: remove react-tracked part 1
* move out table specific state to own store
* chore: remove react-tracked part 2
* remove unused type
* ensure table is properly updated on changes
* remove all filters save in local storage
* Tiny fixes
* fix sort / filters applying issue + feedback
* fix entity links
* remove unnecessary style
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Update grid cell editor for date and timestamp type fields
* Forgot to commit this
* Add basic validation
* Remove console log
* Add placeholder
* Add Set to NOW action
* Pass isNullable to the DatetimeEditor.
* Fix the TooltipTrigger to deduplicate classes. Fix the TimestampInfo to use TooltipTrigger as child.
* Fix the height of the spans to match.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Fix inability to update composite foreign key values in RowEditor
* Fix unable to view referencing record in table editor if FK column is also PK
* Update apps/studio/state/table-editor.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Support rendering large text/jsons in grid
* Support rendering large json in side panel, and large text in grid
* Support rendering large text in side panel
* Fix
* Update comment
* Fix the editValue type for json fields.
* Fix
* Update blur value
* Fix
* Feex
* Padding bump
* Small refactor
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* Do up logic for callback for opening side panel
* Add TextEditor side panel and fix some quirky bugs with JSONEditor too
* Add Markdown Preview in TextEditor
* Fix bad cs
* Fix border css
* Add react-query mutations for columns APIs.
* Use the new delete column mutation.
* Remove the column store and replace all its methods with mutations from react-query.
* Fix type errors.
* Move some the meta store methods to be pure functions in sidepanel.utils.
* Move the createColumn and updateColumn out of the metaStore.
* Some refactors and fixes
* Shift query invalidation when deleting column to mutation file instead of component file
* reorder some code for my sanity
* remove some @ts-ignores
* remove more @ts-ignores
* Update apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils.ts
* Fix ForeignKeyFormatter crashing client
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Assign keys to each side panel editor on the table editor to ensure that input fields have the latest data
* move rowsPerPage to valtio + more cleanup
* remove sidepanel row optimistic updates
* Change prop for listbox in input field from default value to value
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
