* feat: remove tabs and unify columns
This removes the tabs from Query Performance with unified columns in the table.
* chore: remove unused imports
* chore: small adjustment to min max and mean time col size
* chore: remove unused prop
* feat: tidy up query perf column headers
* feat: update col widths and which ones are sortable
This gives a reasonable column width to all cols as well as adds an option for us to filter out which columns we dont want to make the table sortable by.
* feat: column order and word wrapping for query
* feat: column data text align for numbers
* fix: pointer event was preventing index advisor icon popover
* feat: use code block instead of editor
Swapped Editor out for Code block as its less expensive and modified it to add pgsql syntax highlighting
* fix: small truncation issue
* chore: remove unused sort function
* fix: sort menu closing on first click
Sort menu of a column no longer disappears on first click
* feat: move sorting and ordering over to nuqs
This removes the usage of Next Router params and uses Nuqs instead for managing the QP table sorting and ordering.
* feat: add clear sorting button to filter bar
* chore: remove unused files
* fix: add highlighting for selected sort
* Nit update sort
* nit: smol styling update for direction
* feat: inian feedback on time based numbers
* fix: return number instead of string for total time
We were returning a string for total time percentage which meant the sorting was a little bit off
* Shift roles to nuqs
* chore: clean up
* fix: smaller viewport filter bar
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat: remove redundant sort by
We had conflicting sort by dropdown which clashed with the individual column sorting itself. Either we do something similar to our table editor or leave it out for now. Opting to leave it out for now.
* fix: alignment of download dropdown
This aligns the download dropdown on the Query Performance page to look visually correct.
* feat: improved query search
This improves our query search in the Query Performance area. Now it does a local search through the available queries in the table. I removed it requesting the string from server for now. Simple
:x
q
* fix: increased width of filter popover
The roles filter popover is was too narrow for its contents. Increased teh size slightly.
* chore: remove commented out component
* chore: update placeholder for query filter
* fix: leftover prop on query performance page
* feat: reintroduce sql based query for search
Bringing back a hybrid approach - seems to work fine but also returns items that are not in your visible queries.
* feat: use debounce on search query
* feat: use nuqs instead of next router for roles
* Tiny optimization for debounced search to immediately run query if clearing input
* Add clear search CTA
* Remove client side searching
* Revert changes in useIndexInvalidation
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Add CodeBlock for SQL query display to add syntax highlight
* use monaco editor for better highlighting
* create `SqlMonacoBlock` component for SQL in detail panel
* add mean_time to most_time_comsuming queries
* make outline transparent
* Add keyboard navigation for query performance grid
* Stop default RDG behavior on arrow key navigation
* Update column minWidth values to remove horizontal scrollbar
* Load SqlMonacoBlock and Editor client-side only
- following a pattern in `SQLEditor.tsx`
fix: query performance empty columns
The role and total time columns were not rendering the results that were there. Added a check to make sure they render.
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* Split index advisor hook into installed and enabled instead of just available
* TS error
* Some nits
* Revert
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* init
* hovercard
* adds button to install index advisor
* hover card now now insert indexes
* update
* moved hook
* align alert dialog to design syste,
* Update index-advisor.utils.ts
* shows all index statements now
* Update query-performance.tsx
* Some refactors
* Clean up
* Fix
* One last nit refactor
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* docs: user nav dropdown
* www: user dropdown nav
* update menus
* chore: add complete local storage allowlist
* move all local-storage to common
* reload after logOut
* add local storage key changes from #35175
* fix errors
* add more keys
* fix merge bugs
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Bump the sql-formatter dependency.
* Add a function formatQuery which is a wrapper around sql-formatter.
* Replace all formatSQL features to use the new function formatSql.
* Remove unneeded RQ for formatting.
* Small fix.
* Add export functionality to security and performance advisors
* Add download results button to query performance advisor
* Add refresh buttons to security and performance advisors
* Add LoadingLine to Query performance to make UI consistent with the other advisors
* Minor change
* Show tab max value in seconds if > 1000ms
* Fix incorrect sort option in initial state with no URL state
* Fix trim of undefined in Query Performance when retrieving index
* Set up banning and unbanning user, although untested due to API CORs issue
* Update search filter UI for users management V2
* Update API types
* Minoir
* Small fix
* Update UI
* Add support for resizing and re-ordering columns
* Add google profile image url to csp
* Revert test button
* Implement toggling of columns
* Fix loading
* Fully implement banning/unbanning user
* Fix
* Update apps/studio/components/interfaces/Auth/Users/UserOverview.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Fallback non CSP supported avatar urls to user icon
* Fix some bugs
* Remove prism-react-renderer from studio, add to ui patterns
* Migrate users query from API to studio
* Address some feedback
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Switch all top-level imports for ui-patterns components to use specific components when importing.
* Remove the @ui-patterns shorthand since it works exactly the same without the @.
* More import fixes.
* Fix the ui-patterns tests.
* Add lucide-react to docs (to make the autocomplete work).
* Migrate the docs app icons.
* Migrate the ui-patterns.
* Remove the old icons from ui package.
* Migrate the www app from react-feather icons.
* Migrate all of studio icons.
* Migrate the only component in design-system.
* Fix an old import in ui package. Revert an import in docs app.
* Fix some pages in www.
* Remove unneeded files used in generation of icons.
* Fix a prettier error.
* Fix more issues in www.
* Fix an issue in Log Date picker.
* Replace all string sizes with number sizes because the icons grew in some cases.
* Fix more imports in security page.
* Fix an extra import.
* Remove the size prop from all icons if they're in a button and they match the button size.
* Minor fixes for docs and www.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Update the design of the sonner toasts. Add the close button by default.
* Migrate studio and www apps to use the SonnerToaster.
* Migrate all toasts from studio.
* Migrate all leftover toasts in studio.
* Add a new toast component with progress. Use it in studio.
* Migrate the design-system app.
* Refactor the consent toast to use sonner.
* Switch docs to use the new sonner toasts.
* Remove toast examples from the design-system app.
* Remove all toast-related components and old code.
* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.
* Fix the width of the toast progress.
* Use text-foreground-lighter instead of muted for ToastProgress text
* Rename ToastProgress to SonnerProgress.
* Shorten the text in sonner progress.
* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.
* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).
* Fix the playwright tests.
* Refactor imports to use ui instead of @ui.
* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.
* Remove react-hot-toast lib.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Fix downgrade network error causing UI crash
* Ensure that all try blocks have at least a catch block and not an empty finally block
* Update apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Update
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* UpgradeToPro remove project ref and org slug props
* Add check in Docs/ResourceContent
* Add conditional for accessing query property in QueryPerformanceGrid
* Add fallback value for lastPage in notifications-v2-query
* Simplify logic for finding api key in TerminalInstructions, EdgeFunctionDetails, [ref]/api/index
* Minor fixes and refactors
* Fix type issues
* RQ convert mutateAsync calls to mutate where possible, otherwise add try finally blocks
* Skip eligibility query if project status is coming up
* Small UI update to replicas side panel
* Update apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Add error handling in CIDR
* Prettier lint
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Scaffold for API reports
* Add support for filtering database reports by replicas
* midway adding read replica support for custom reports
* Refactor reports page to use react query and deprecate project content mobxstore
* Reports add chart labels if metric is read replica specific
* Give an easier way to remove charts from reports
* make reports layout non-blocking
* Update apps/studio/components/interfaces/Reports/Reports.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Standardize to use FormHeader for all database pages
* Tidy up query performance page
* Add filter for roles
* Make search in query performance consistent with other pages and shift FilterPopover to ui
kemal.earth