diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 40167c5036e..f3b6f7dccd5 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -10,4 +10,10 @@ /apps/www/public/images/blog @supabase/marketing /apps/www/lib/redirects.js -/docker/ @supabase/cli +/docker/ @supabase/dev-workflows + +/apps/studio/next.config.js @supabase/security +/apps/studio/components/interfaces/Billing/Payment @supabase/security +/apps/studio/components/interfaces/Organization/BillingSettings/ @supabase/security +/apps/studio/components/interfaces/Organization/Documents/ @supabase/security +/apps/studio/pages/new/index.tsx @supabase/security \ No newline at end of file diff --git a/apps/docs/content/guides/auth/enterprise-sso/auth-sso-saml.mdx b/apps/docs/content/guides/auth/enterprise-sso/auth-sso-saml.mdx index 59a5c388ae4..7e41fc0adb1 100644 --- a/apps/docs/content/guides/auth/enterprise-sso/auth-sso-saml.mdx +++ b/apps/docs/content/guides/auth/enterprise-sso/auth-sso-saml.mdx @@ -421,3 +421,47 @@ If you really need access to the key, please [open a support ticket](https://sup Yes, Supabase supports multi-tenant Single Sign-On (SSO) using SAML 2.0. While the dashboard displays only one SAML field, you can set up multiple SAML connections using the Supabase CLI. Each connection is assigned a unique `sso_provider_id`, which is included in the user's JWT and can be used in Row Level Security (RLS) policies. You can configure custom attribute mappings for each connection to include tenant-specific information, such as roles. This setup allows you to implement multi-tenant SSO for multiple clients or organizations within a single application. For example, if you have an app with multiple clients using different Azure Active Directories, you can create separate SAML connections for each and use the `sso_provider_id` to manage access and apply appropriate security policies. + +### Is multi-subdomain SSO with SAML supported? + +Yes, also referred to as [cross-origin authentication within the same site](https://web.dev/articles/same-site-same-origin). To redirect to a URL other than the [Site URL](https://supabase.com/docs/guides/auth/redirect-urls), following the SAML response from the IdP, the `redirectTo` option can be added to [`signInWithSSO`](https://supabase.com/docs/reference/javascript/auth-signinwithsso). + +```ts + const { data, error } = await supabase.auth.signInWithSSO({ + domain: 'company.com' + options: { + redirectTo: `https://app.company.com/callback`, + }, + }) +``` + +When redirecting to a URL other than the Site URL, a `/callback` endpoint is necessary to process the auth code from the IdP and exchange it for a session. This assumes the [Supabase SSR client](https://supabase.com/docs/guides/auth/server-side/creating-a-client) has already been configured. + + + + + +```ts +import { error, redirect } from '@sveltejs/kit' +import type { RequestHandler } from './$types' + +export const GET: RequestHandler = async ({ url, locals }) => { + const code = url.searchParams.get('code') + + if (!code) { + error(400, 'No authorization code provided') + } + + const { error: tokenExchangeError } = await locals.supabase.auth.exchangeCodeForSession(code) + + if (tokenExchangeError) { + error(400, 'Failed to exchange authorization code for session') + } + + redirect(303, '/') +} +``` + + + + diff --git a/apps/docs/content/guides/database/extensions/pgvector.mdx b/apps/docs/content/guides/database/extensions/pgvector.mdx index b320a7e23a5..c505abe6991 100644 --- a/apps/docs/content/guides/database/extensions/pgvector.mdx +++ b/apps/docs/content/guides/database/extensions/pgvector.mdx @@ -102,6 +102,20 @@ const { data, error } = await supabase.from('posts').insert({ }) ``` +## Specific usage cases + +### Queries with filtering + +If you use an IVFFlat or HNSW index and naively filter the results based on the value of another column, you may get fewer rows returned than requested. + +For example, the following query may return fewer than 5 rows, even if 5 corresponding rows exist in the database. This is because the embedding index may not return 5 rows matching the filter. + +``` +SELECT * FROM items WHERE category_id = 123 ORDER BY embedding <-> '[3,1,2]' LIMIT 5; +``` + +To get the exact number of requested rows, use [iterative search](https://github.com/pgvector/pgvector/?tab=readme-ov-file#iterative-index-scans) to continue scanning the index until enough results are found. + ## More pgvector and Supabase resources - [Supabase Clippy: ChatGPT for Supabase Docs](https://supabase.com/blog/chatgpt-supabase-docs) diff --git a/apps/docs/content/guides/functions/background-tasks.mdx b/apps/docs/content/guides/functions/background-tasks.mdx index 2ad76d7028d..7eb79415be5 100644 --- a/apps/docs/content/guides/functions/background-tasks.mdx +++ b/apps/docs/content/guides/functions/background-tasks.mdx @@ -3,6 +3,7 @@ id: 'function-background-tasks' title: 'Background Tasks' description: 'How to run background tasks in an Edge Function outside of the request handler' subtitle: 'How to run background tasks in an Edge Function outside of the request handler' +tocVideo: 'rSKBTJxG9VA' --- Edge Function instances can process background tasks outside of the request handler. Background tasks are useful for asynchronous operations like uploading a file to Storage, updating a database, or sending events to a logging service. You can respond to the request immediately and leave the task running in the background. @@ -12,18 +13,18 @@ A background task can run until the Edge Function instance hits its [wall-clock Here's an example of defining a background task using a custom event. ```ts -// define a custom event +// Define a custom event type for the background task. class MyBackgroundTaskEvent extends Event { - readonly taskPromise: Promise + readonly taskPromise: Promise - constructor(taskPromise) { + constructor(taskPromise: Promise) { super('myBackgroundTask') this.taskPromise = taskPromise } } -globalThis.addEventListener('myBackgroundTask', async (event: MyBackgroundTaskEvent) => { - const res = await event.taskPromise +globalThis.addEventListener('myBackgroundTask', async (event) => { + const res = await (event as MyBackgroundTaskEvent).taskPromise console.log(await res.json()) }) diff --git a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx index 1b11196eaeb..88b705e3f90 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx @@ -9,53 +9,7 @@ hideToc: true - - - Go to [database.new](https://database.new) and create a new Supabase project. - - When your project is up and running, go to the [Table Editor](https://supabase.com/dashboard/project/_/editor), create a new table and insert some data. - - Alternatively, you can run the following snippet in your project's [SQL Editor](https://supabase.com/dashboard/project/_/sql/new). This will create a `notes` table with some sample data. - - - - - - ```sql SQL_EDITOR - -- Create the table - create table notes ( - id bigint primary key generated always as identity, - title text not null - ); - - -- Insert some sample data into the table - insert into notes (title) - values - ('Today I created a Supabase project.'), - ('I added some data and queried it from Next.js.'), - ('It was awesome!'); - - alter table notes enable row level security; - ``` - - - - - - Make the data in your table publicly readable by adding an RLS policy: - - - - - - ```sql SQL_EDITOR - create policy "public can read notes" - on public.notes - for select to anon - using (true); - ``` - - + @@ -104,9 +58,9 @@ hideToc: true - Create a new file at `app/notes/page.tsx` and populate with the following. + Create a new file at `app/countries/page.tsx` and populate with the following. - This will select all the rows from the `notes` table in Supabase and render them on the page. + This will select all the rows from the `countries` table in Supabase and render them on the page. @@ -114,14 +68,14 @@ hideToc: true - ```ts app/notes/page.tsx + ```ts app/countries/page.tsx import { createClient } from '@/utils/supabase/server'; - export default async function Notes() { + export default async function Countries() { const supabase = await createClient(); - const { data: notes } = await supabase.from("notes").select(); + const { data: countries } = await supabase.from("countries").select(); - return 
{JSON.stringify(notes, null, 2)}
+ return 
{JSON.stringify(countries, null, 2)}
} ``` @@ -166,7 +120,7 @@ hideToc: true - Run the development server, go to http://localhost:3000/notes in a browser and you should see the list of notes. + Run the development server, go to http://localhost:3000/countries in a browser and you should see the list of countries. diff --git a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx index bcb65aca897..c78cc43a9b1 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx @@ -24,7 +24,7 @@ hideToc: true ```bash Terminal - npm create svelte@latest myapp + npx sv create my-app ``` @@ -43,7 +43,7 @@ hideToc: true ```bash Terminal - cd myapp && npm install @supabase/supabase-js + cd my-app && npm install @supabase/supabase-js ``` @@ -53,7 +53,7 @@ hideToc: true - Create a `/src/lib` directory in your SvelteKit app, create a file called `supabaseClient.js` and add the following code to initialize the Supabase client with your project URL and public API (anon) key: + Create a `src/lib` directory in your SvelteKit app, create a file called `supabaseClient.js` and add the following code to initialize the Supabase client with your project URL and public API (anon) key: @@ -77,7 +77,7 @@ hideToc: true Use `load` method to fetch the data server-side and display the query results as a simple list. - Create `+page.server.js` file in the `routes` directory with the following code. + Create `+page.server.js` file in the `src/routes` directory with the following code. @@ -98,7 +98,7 @@ hideToc: true - Replace the existing content in your `+page.svelte` file in the `routes` directory with the following code. + Replace the existing content in your `+page.svelte` file in the `src/routes` directory with the following code. diff --git a/apps/studio/components/grid/SupabaseGrid.tsx b/apps/studio/components/grid/SupabaseGrid.tsx index 2ba8e5d0a03..7c996ca9108 100644 --- a/apps/studio/components/grid/SupabaseGrid.tsx +++ b/apps/studio/components/grid/SupabaseGrid.tsx @@ -149,10 +149,9 @@ const SupabaseGridLayout = (props: SupabaseGridProps) => { const { project } = useProjectContext() const { data, error, isSuccess, isError, isLoading, isRefetching } = useTableRowsQuery( { - queryKey: [props.table.schema, props.table.name], projectRef: project?.ref, connectionString: project?.connectionString, - table: props.table, + tableId: props.table.id, sorts, filters, page: snap.page, diff --git a/apps/studio/components/grid/components/editor/SelectEditor.tsx b/apps/studio/components/grid/components/editor/SelectEditor.tsx index 0aa6a08e6c2..3ea7cbe16b1 100644 --- a/apps/studio/components/grid/components/editor/SelectEditor.tsx +++ b/apps/studio/components/grid/components/editor/SelectEditor.tsx @@ -23,7 +23,6 @@ export function SelectEditor({ const value = row[column.key as keyof TRow] as unknown as string function onChange(event: any) { - debugger if (!event.target.value || event.target.value == '') { onRowChange({ ...row, [column.key]: null }, true) } else { diff --git a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx index bb32dd1a3e2..9c4384a8f14 100644 --- a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx +++ b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx @@ -44,7 +44,6 @@ const Pagination = () => { const [{ filter }] = useUrlState({ arrayKeys: ['filter'] }) const filters = formatFilterURLParams(filter as string[]) const page = snap.page - const table = state.table ?? undefined const roleImpersonationState = useRoleImpersonationStateSnapshot() const [isConfirmNextModalOpen, setIsConfirmNextModalOpen] = useState(false) @@ -60,10 +59,9 @@ const Pagination = () => { const { data, isLoading, isSuccess, isError, isFetching } = useTableRowsCountQuery( { - queryKey: [table?.schema, table?.name, 'count-estimate'], projectRef: project?.ref, connectionString: project?.connectionString, - table, + tableId: id, filters, enforceExactCount: snap.enforceExactCount, impersonatedRole: roleImpersonationState.role, diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx index 9024b480d53..45c69218f99 100644 --- a/apps/studio/components/grid/components/header/Header.tsx +++ b/apps/studio/components/grid/components/header/Header.tsx @@ -239,10 +239,9 @@ const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => { const [isExporting, setIsExporting] = useState(false) const { data } = useTableRowsQuery({ - queryKey: [table.schema, table.name], projectRef: project?.ref, connectionString: project?.connectionString, - table, + tableId: table.id, sorts, filters, page: snap.page, @@ -252,10 +251,9 @@ const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => { const { data: countData } = useTableRowsCountQuery( { - queryKey: [table?.schema, table?.name, 'count-estimate'], projectRef: project?.ref, connectionString: project?.connectionString, - table, + tableId: table.id, filters, enforceExactCount: snap.enforceExactCount, impersonatedRole: roleImpersonationState.role, diff --git a/apps/studio/components/grid/components/header/RefreshButton.tsx b/apps/studio/components/grid/components/header/RefreshButton.tsx index 0b43a2aa0b2..9bf63bf1b0c 100644 --- a/apps/studio/components/grid/components/header/RefreshButton.tsx +++ b/apps/studio/components/grid/components/header/RefreshButton.tsx @@ -2,20 +2,18 @@ import { useQueryClient } from '@tanstack/react-query' import { RefreshCw } from 'lucide-react' import { useParams } from 'common' -import type { SupaTable } from 'components/grid/types' -import { sqlKeys } from 'data/sql/keys' -import { Entity } from 'data/table-editor/table-editor-types' +import { tableRowKeys } from 'data/table-rows/keys' import { Button } from 'ui' export type RefreshButtonProps = { - table: Entity | SupaTable + table: { id: number } isRefetching?: boolean } const RefreshButton = ({ table, isRefetching }: RefreshButtonProps) => { const { ref } = useParams() const queryClient = useQueryClient() - const queryKey = sqlKeys.query(ref, [table.schema, table.name]) + const queryKey = tableRowKeys.tableRowsAndCount(ref, table.id) async function onClick() { await queryClient.invalidateQueries(queryKey) diff --git a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx index 04a923d0082..7543072de08 100644 --- a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx +++ b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx @@ -8,7 +8,6 @@ import * as z from 'zod' import { useParams } from 'common' import { useUserUpdateMutation } from 'data/auth/user-update-mutation' import { User } from 'data/auth/users-infinite-query' -import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query' import { Button, cn, @@ -34,7 +33,6 @@ interface BanUserModalProps { export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => { const { ref: projectRef } = useParams() - const { data: settings } = useProjectSettingsV2Query({ projectRef }) const { mutate: updateUser, isLoading: isBanningUser } = useUserUpdateMutation({ onSuccess: (_, vars) => { const bannedUntil = dayjs() @@ -62,25 +60,15 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => { const bannedUntil = dayjs().add(Number(value), unit).format('DD MMM YYYY HH:mm (ZZ)') const onSubmit = (data: FormType) => { - if (!settings) { - return toast.error(`Failed to ban user: Error loading project config`) - } else if (user.id === undefined) { + if (projectRef === undefined) return console.error('Project ref is required') + if (user.id === undefined) { return toast.error(`Failed to ban user: User ID not found`) } const durationHours = data.unit === 'hours' ? Number(data.value) : Number(data.value) * 24 - const protocol = settings?.app_config?.protocol ?? 'https' - const endpoint = settings?.app_config?.endpoint - const { serviceKey } = getAPIKeys(settings) - - if (!endpoint) return toast.error(`Failed to ban user: Unable to retrieve API endpoint`) - if (!serviceKey?.api_key) return toast.error(`Failed to ban user: Unable to retrieve API key`) updateUser({ projectRef, - protocol, - endpoint, - serviceApiKey: serviceKey.api_key, userId: user.id, banDuration: durationHours, }) diff --git a/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx index 8e0b2467781..dd6b79e3de6 100644 --- a/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx +++ b/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx @@ -7,7 +7,6 @@ import * as z from 'zod' import { useParams } from 'common' import { useUserCreateMutation } from 'data/auth/user-create-mutation' -import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query' import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' import { Button, @@ -39,13 +38,6 @@ const CreateUserFormSchema = z.object({ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => { const { ref: projectRef } = useParams() - - const { - data: settings, - isLoading, - isSuccess, - } = useProjectSettingsV2Query({ projectRef }, { enabled: visible }) - const canCreateUsers = useCheckPermissions(PermissionAction.AUTH_EXECUTE, 'create_user') const { mutate: createUser, isLoading: isCreatingUser } = useUserCreateMutation({ @@ -57,24 +49,9 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => { }) const onCreateUser = async (values: any) => { - if (!isSuccess) { - return toast.error(`Failed to create user: Error loading project config`) - } - const protocol = settings?.app_config?.protocol ?? 'https' - const endpoint = settings?.app_config?.endpoint - const { serviceKey } = getAPIKeys(settings) + if (!projectRef) return console.error('Project ref is required') - if (!endpoint) return toast.error(`Failed to create user: Unable to retrieve API endpoint`) - if (!serviceKey?.api_key) - return toast.error(`Failed to create user: Unable to retrieve API key`) - - createUser({ - projectRef, - protocol, - endpoint, - serviceApiKey: serviceKey.api_key, - user: values, - }) + createUser({ projectRef, user: values }) } const form = useForm>({ @@ -115,7 +92,7 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => { type="email" name="email" placeholder="user@example.com" - disabled={isCreatingUser || isLoading} + disabled={isCreatingUser} className="pl-8" /> @@ -145,9 +122,9 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => { type="password" name="password" placeholder="••••••••" - disabled={isCreatingUser || isLoading} + disabled={isCreatingUser} className="pl-8" - > + /> @@ -182,7 +159,7 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => { size="small" htmlType="submit" loading={isCreatingUser} - disabled={!canCreateUsers || isCreatingUser || isLoading} + disabled={!canCreateUsers || isCreatingUser} > Create user diff --git a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx index 81d08ea2a2c..af15700c840 100644 --- a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx @@ -16,7 +16,6 @@ import { useUserSendMagicLinkMutation } from 'data/auth/user-send-magic-link-mut import { useUserSendOTPMutation } from 'data/auth/user-send-otp-mutation' import { useUserUpdateMutation } from 'data/auth/user-update-mutation' import { User } from 'data/auth/users-infinite-query' -import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query' import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' import { BASE_PATH } from 'lib/constants' import { timeout } from 'lib/helpers' @@ -58,6 +57,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => { } }) + const canUpdateUser = useCheckPermissions(PermissionAction.AUTH_EXECUTE, '*') const canSendMagicLink = useCheckPermissions(PermissionAction.AUTH_EXECUTE, 'send_magic_link') const canSendRecovery = useCheckPermissions(PermissionAction.AUTH_EXECUTE, 'send_recovery') const canSendOtp = useCheckPermissions(PermissionAction.AUTH_EXECUTE, 'send_otp') @@ -76,7 +76,6 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => { const [isDeleteFactorsModalOpen, setIsDeleteFactorsModalOpen] = useState(false) const { data } = useAuthConfigQuery({ projectRef }) - const { data: settings } = useProjectSettingsV2Query({ projectRef }) const mailerOtpExpiry = data?.MAILER_OTP_EXP ?? 0 const minutes = Math.floor(mailerOtpExpiry / 60) @@ -143,24 +142,13 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => { } const handleUnban = () => { - if (!settings) { - return toast.error(`Failed to ban user: Error loading project config`) - } else if (user.id === undefined) { + if (projectRef === undefined) return console.error('Proejct ref is required') + if (user.id === undefined) { return toast.error(`Failed to ban user: User ID not found`) } - const protocol = settings?.app_config?.protocol ?? 'https' - const endpoint = settings?.app_config?.endpoint - const { serviceKey } = getAPIKeys(settings) - - if (!endpoint) return toast.error(`Failed to unban user: Unable to retrieve API endpoint`) - if (!serviceKey?.api_key) return toast.error(`Failed to unban user: Unable to retrieve API key`) - updateUser({ projectRef, - protocol, - endpoint, - serviceApiKey: serviceKey.api_key, userId: user.id, banDuration: 'none', }) @@ -386,7 +374,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => { button={{ icon: , text: isBanned ? 'Unban user' : 'Ban user', - disabled: !canRemoveMFAFactors, + disabled: !canUpdateUser, onClick: () => { if (isBanned) { setIsUnbanModalOpen(true) diff --git a/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx b/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx index 34e1d52cb90..870af2ef2d4 100644 --- a/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx +++ b/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx @@ -31,7 +31,7 @@ export const NoProjectsOnPaidOrgInfo = ({ organization }: NoProjectsOnPaidOrgInf } /> diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx index 5b4e7a5b70f..524b5915c96 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx @@ -17,7 +17,9 @@ import { Button, Form_Shadcn_, FormControl_Shadcn_, + FormDescription_Shadcn_, FormField_Shadcn_, + FormLabel_Shadcn_, Input_Shadcn_, RadioGroupStacked, RadioGroupStackedItem, @@ -43,6 +45,7 @@ import { SqlFunctionSection } from './SqlFunctionSection' import { SqlSnippetSection } from './SqlSnippetSection' import EnableExtensionModal from 'components/interfaces/Database/Extensions/EnableExtensionModal' import { checkDomainOfScale } from 'recharts/types/util/ChartUtils' +import { InfoIcon } from 'lucide-react' export interface CreateCronJobSheetProps { selectedCronJob?: Pick @@ -229,10 +232,14 @@ export const CreateCronJobSheet = ({ control={form.control} name="name" render={({ field }) => ( - + - + + + + Cron jobs cannot be renamed once created + )} /> diff --git a/apps/studio/components/interfaces/Integrations/Queues/Queues.constants.tsx b/apps/studio/components/interfaces/Integrations/Queues/Queues.constants.tsx index 6ba001477a5..a80a56be71e 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/Queues.constants.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/Queues.constants.tsx @@ -2,10 +2,17 @@ import { Rows2, Rows3, Rows4 } from 'lucide-react' export const QUEUE_TYPES = [ { - value: 'normal', + value: 'basic', icon: , - label: 'Normal queue', - description: 'Create a normal queue.', + label: 'Basic queue', + description: 'Create a basic queue.', + }, + { + value: 'unlogged', + icon: , + label: 'Unlogged queue', + description: + 'Creates an unlogged queue which loses all data on database restart. Can be useful when write throughput is more important than durability.', }, { value: 'partitioned', @@ -13,11 +20,4 @@ export const QUEUE_TYPES = [ label: 'Partitioned queue', description: 'Create a partitioned queue which is optimized for large amount of messages', }, - - { - value: 'unlogged', - icon: , - label: 'Unlogged queue', - description: 'Creates an unlogged queue which loses all data on database restart.', - }, ] as const diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesDisabledState.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesDisabledState.tsx index ad4331f6706..5de88c73820 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueuesDisabledState.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesDisabledState.tsx @@ -1,12 +1,11 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { ExternalLink } from 'lucide-react' -import Link from 'next/link' import { useState } from 'react' import EnableExtensionModal from 'components/interfaces/Database/Extensions/EnableExtensionModal' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' +import { DocsButton } from 'components/ui/DocsButton' import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query' import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' import { Button } from 'ui' @@ -65,15 +64,7 @@ export const QueuesDisabledState = () => { )} - + diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesListing.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesListing.tsx index f34ad985e9d..eba0a0779b3 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueuesListing.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesListing.tsx @@ -69,10 +69,10 @@ export const QueuesListing = () => { {queues.length === 0 ? (
-

No queues created yet

+

No queues created yet

) : ( @@ -98,9 +98,12 @@ export const QueuesListing = () => { Type - + Created at + +
Size
+ } diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx index ec68ed69772..629b0347d9f 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx @@ -1,22 +1,76 @@ import dayjs from 'dayjs' import { includes, sortBy } from 'lodash' -import { ChevronRight } from 'lucide-react' +import { ChevronRight, Loader2 } from 'lucide-react' +import { useRouter } from 'next/router' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import Table from 'components/to-be-cleaned/Table' +import { useQueuesMetricsQuery } from 'data/database-queues/database-queues-metrics-query' import { PostgresQueue } from 'data/database-queues/database-queues-query' import { DATETIME_FORMAT } from 'lib/constants' -import { useRouter } from 'next/router' interface QueuesRowsProps { queues: PostgresQueue[] filterString: string } -export const QueuesRows = ({ queues: fetchedQueues, filterString }: QueuesRowsProps) => { +const QueueRow = ({ queue }: { queue: PostgresQueue }) => { const router = useRouter() const { project: selectedProject } = useProjectContext() + const { data: metrics, isLoading } = useQueuesMetricsQuery( + { + queueName: queue.queue_name, + projectRef: selectedProject?.ref, + connectionString: selectedProject?.connectionString, + }, + { + staleTime: 30 * 1000, // 60 seconds, talk with Oli whether this is ok to call every minute + } + ) + + const type = queue.is_partitioned ? 'Partitioned' : queue.is_unlogged ? 'Unlogged' : 'Basic' + + return ( + { + router.push(`/project/${selectedProject?.ref}/integrations/queues/${queue.queue_name}`) + }} + className="hover:" + > + +

{queue.queue_name}

+ + +

+ {type} +

+ + +

{dayjs(queue.created_at).format(DATETIME_FORMAT)}

+ + +
+ {isLoading ? ( + + ) : ( +

+ {metrics?.queue_length} {metrics?.method === 'estimated' ? '(Approximate)' : null} +

+ )} +
+ + +
+ +
+ + + ) +} + +export const QueuesRows = ({ queues: fetchedQueues, filterString }: QueuesRowsProps) => { const filteredQueues = fetchedQueues.filter((x) => includes(x.queue_name.toLowerCase(), filterString.toLowerCase()) ) @@ -25,7 +79,7 @@ export const QueuesRows = ({ queues: fetchedQueues, filterString }: QueuesRowsPr if (queues.length === 0 && filterString.length > 0) { return ( - +

No results found

Your search for "{filterString}" did not return any results @@ -37,34 +91,9 @@ export const QueuesRows = ({ queues: fetchedQueues, filterString }: QueuesRowsPr return ( <> - {queues.map((q) => { - const type = q.is_partitioned ? 'Partitioned' : q.is_unlogged ? 'Unlogged' : 'Regular' - - return ( - { - router.push(`/project/${selectedProject?.ref}/integrations/queues/${q.queue_name}`) - }} - className="hover:" - > - -

{q.queue_name}

- - -

- {type} -

- - -

{dayjs(q.created_at).format(DATETIME_FORMAT)}

- - - - - - ) - })} + {queues.map((q) => ( + + ))} ) } diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx index e7fed0b97e2..9de86466dec 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx @@ -1,12 +1,15 @@ +import { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown' import { isNil, noop } from 'lodash' -import { Archive, X } from 'lucide-react' +import { Archive, Clock12, Trash2, X } from 'lucide-react' import { useState } from 'react' import { useParams } from 'common' import { MonacoEditor } from 'components/grid/components/common/MonacoEditor' import { RowAction, RowData } from 'components/interfaces/Auth/Users/UserOverview' import { useDatabaseQueueMessageArchiveMutation } from 'data/database-queues/database-queue-messages-archive-mutation' +import { useDatabaseQueueMessageDeleteMutation } from 'data/database-queues/database-queue-messages-delete-mutation' import { PostgresQueueMessage } from 'data/database-queues/database-queue-messages-infinite-query' +import { useDatabaseQueueMessageReadMutation } from 'data/database-queues/database-queue-messages-read-mutation' import dayjs from 'dayjs' import { useSelectedProject } from 'hooks/misc/useSelectedProject' import { prettifyJSON } from 'lib/helpers' @@ -48,7 +51,25 @@ export const MessageDetailsPanel = ({ const { name: queueName } = useParams() const project = useSelectedProject() - const { mutate, isLoading, isSuccess } = useDatabaseQueueMessageArchiveMutation() + useEscapeKeydown(() => setSelectedMessage(null)) + + const { + mutate: archiveMessage, + isLoading: isLoadingArchive, + isSuccess: isSuccessArchive, + } = useDatabaseQueueMessageArchiveMutation() + + const { + mutate: readMessage, + isLoading: isLoadingRead, + isSuccess: isSuccessRead, + } = useDatabaseQueueMessageReadMutation() + + const { + mutate: deleteMessage, + isLoading: isLoadingDelete, + isSuccess: isSuccessDelete, + } = useDatabaseQueueMessageDeleteMutation() const initialValue = JSON.stringify(selectedMessage?.message) const jsonString = prettifyJSON(!isNil(initialValue) ? tryFormatInitialValue(initialValue) : '') @@ -100,7 +121,7 @@ export const MessageDetailsPanel = ({
-

Payload

+

Payload

-
+
{!selectedMessage.archived_at ? ( - , - text: 'Archive', - isLoading: isLoading, - onClick: () => { - mutate({ - projectRef: project!.ref, - connectionString: project?.connectionString, - queryName: queueName!, - messageId: selectedMessage.msg_id, - }) - }, - }} - success={ - isSuccess - ? { - title: 'Archived', - description: 'The message is archived successfully.', - } - : undefined - } - /> + <> + , + text: 'Postpone', + isLoading: isLoadingRead, + onClick: () => { + readMessage({ + projectRef: project!.ref, + connectionString: project?.connectionString, + queryName: queueName!, + messageId: selectedMessage.msg_id, + duration: 60, + }) + }, + }} + success={ + isSuccessRead + ? { + title: 'Postponed', + description: 'The message was postponed for 60 seconds.', + } + : undefined + } + /> + , + text: 'Archive', + isLoading: isLoadingArchive, + type: 'warning', + onClick: () => { + archiveMessage({ + projectRef: project!.ref, + connectionString: project?.connectionString, + queryName: queueName!, + messageId: selectedMessage.msg_id, + }) + }, + }} + success={ + isSuccessArchive + ? { + title: 'Archived', + description: 'The message was archived successfully.', + } + : undefined + } + /> + , + text: 'Delete', + type: 'danger', + isLoading: isLoadingDelete, + onClick: () => { + deleteMessage({ + projectRef: project!.ref, + connectionString: project?.connectionString, + queueName: queueName!, + messageId: selectedMessage.msg_id, + }) + }, + }} + success={ + isSuccessDelete + ? { + title: 'Deleted', + description: 'The message was deleted successfully.', + } + : undefined + } + /> + ) : null}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx new file mode 100644 index 00000000000..5743748e97a --- /dev/null +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx @@ -0,0 +1,65 @@ +import { useRouter } from 'next/router' +import { toast } from 'sonner' + +import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' +import { useDatabaseQueuePurgeMutation } from 'data/database-queues/database-queues-purge-mutation' +import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal' + +interface PurgeQueueProps { + queueName: string + visible: boolean + onClose: () => void +} + +const PurgeQueue = ({ queueName, visible, onClose }: PurgeQueueProps) => { + const { project } = useProjectContext() + const router = useRouter() + + const { mutate: purgeDatabaseQueue, isLoading } = useDatabaseQueuePurgeMutation({ + onSuccess: () => { + toast.success(`Successfully purged queue ${queueName}`) + router.push(`/project/${project?.ref}/integrations/queues`) + onClose() + }, + }) + + async function handlePurge() { + if (!project) return console.error('Project is required') + + purgeDatabaseQueue({ + queueName: queueName, + projectRef: project.ref, + connectionString: project.connectionString, + }) + } + + if (!queueName) { + return null + } + + return ( + onClose()} + onConfirm={handlePurge} + title="Purge this queue" + loading={isLoading} + confirmLabel={`Purge queue ${queueName}`} + confirmPlaceholder="Type in name of queue" + confirmString={queueName ?? 'Unknown'} + text={ + <> + This will purge the queue{' '} + {queueName} + + } + alert={{ + title: + "This action will delete all messages from the queue. They can't be recovered afterwards.", + }} + /> + ) +} + +export default PurgeQueue diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx index e5e30783d41..c77211a1c7f 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx @@ -6,17 +6,18 @@ import { UIEvent, useMemo, useRef } from 'react' import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid' import { PostgresQueueMessage } from 'data/database-queues/database-queue-messages-infinite-query' -import { Badge, ResizableHandle, ResizablePanel, ResizablePanelGroup, cn } from 'ui' +import { Badge, Button, ResizableHandle, ResizablePanel, ResizablePanelGroup, cn } from 'ui' import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { DATE_FORMAT, MessageDetailsPanel } from './MessageDetailsPanel' interface QueueDataGridProps { isLoading: boolean messages: PostgresQueueMessage[] + showMessageModal: () => void fetchNextPage: () => void } -function isAtBottom({ currentTarget }: React.UIEvent): boolean { +function isAtBottom({ currentTarget }: UIEvent): boolean { return currentTarget.scrollTop + 10 >= currentTarget.scrollHeight - currentTarget.clientHeight } @@ -123,6 +124,7 @@ const columns = messagesCols.map((col) => { export const QueueMessagesDataGrid = ({ isLoading, messages, + showMessageModal, fetchNextPage, }: QueueDataGridProps) => { const gridRef = useRef(null) @@ -188,6 +190,9 @@ export const QueueMessagesDataGrid = ({

The selected queue doesn't have any messages.

+
), diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx new file mode 100644 index 00000000000..26fb2c27c1b --- /dev/null +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx @@ -0,0 +1,138 @@ +import { zodResolver } from '@hookform/resolvers/zod' +import { SubmitHandler, useForm } from 'react-hook-form' +import z from 'zod' + +import { useParams } from 'common' +import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' +import CodeEditor from 'components/ui/CodeEditor/CodeEditor' +import { useDatabaseQueueMessageSendMutation } from 'data/database-queues/database-queue-messages-send-mutation' +import { useEffect } from 'react' +import { toast } from 'sonner' +import { Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input, Modal } from 'ui' +import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' + +interface SendMessageModalProps { + visible: boolean + onClose: () => void +} + +const FormSchema = z.object({ + delay: z.coerce.number().int().gte(0).default(5), + payload: z.string().refine( + (val) => { + try { + JSON.parse(val) + } catch { + return false + } + }, + { + message: 'The payload should be a JSON object', + } + ), +}) + +export type SendMessageForm = z.infer + +const FORM_ID = 'QUEUES_SEND_MESSAGE_FORM' + +export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) => { + const { name: queueName } = useParams() + const { project } = useProjectContext() + const form = useForm({ + resolver: zodResolver(FormSchema), + defaultValues: { + delay: 1, + payload: '{}', + }, + }) + + const { isLoading, mutate } = useDatabaseQueueMessageSendMutation({ + onSuccess: () => { + toast.success(`Successfully added a message to the queue.`) + onClose() + }, + }) + + const onSubmit: SubmitHandler = (values) => { + mutate({ + projectRef: project?.ref!, + connectionString: project?.connectionString, + queueName: queueName!, + payload: values.payload, + delay: values.delay, + }) + } + + useEffect(() => { + if (visible) { + form.reset({ delay: 1, payload: '{}' }) + } + }, [visible]) + + return ( + { + const values = form.getValues() + onSubmit(values) + }} + > + + +
+ ( + + + sec

} + /> + + + )} + /> + ( + + + field.onChange(e)} + options={{ wordWrap: 'off', contextmenu: false }} + value={field.value} + /> + + + )} + /> + +
+ + + ) +} diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx index cee1b4f4cb9..19ddf0ca50a 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx @@ -15,7 +15,6 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import UpcomingInvoice from './UpcomingInvoice' -import { Markdown } from 'components/interfaces/Markdown' const BillingBreakdown = () => { const { slug: orgSlug } = useParams() @@ -70,10 +69,13 @@ const BillingBreakdown = () => { {invoiceFeatureEnabled && ( <> - +

+ The table shows your upcoming invoice, excluding credits. This invoice will + continue updating until the end of your billing period on{' '} + {billingCycleEnd.format('MMMM DD')}. See{' '} + usage page for a more detailed usage + breakdown. +

diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx index 423fc6843c0..3d717734a9f 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx @@ -86,8 +86,7 @@ const ColumnEditor = ({ const { data: constraints } = useTableConstraintsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, - schema: selectedTable?.schema, - table: selectedTable?.name, + id: selectedTable?.id, }) const primaryKey = (constraints ?? []).find( (constraint) => constraint.type === CONSTRAINT_TYPE.PRIMARY_KEY_CONSTRAINT diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx index 85de3f09930..1840497c8e4 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx @@ -59,10 +59,9 @@ const ForeignRowSelector = ({ const { data, isLoading, isSuccess, isError, isRefetching } = useTableRowsQuery( { - queryKey: [schemaName, tableName], projectRef: project?.ref, connectionString: project?.connectionString, - table: supaTable, + tableId: table?.id, sorts, filters, page, diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx index b1c2dfca30d..94ea0ca15e7 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx @@ -10,10 +10,12 @@ import { useDatabasePublicationsQuery } from 'data/database-publications/databas import { useDatabasePublicationUpdateMutation } from 'data/database-publications/database-publications-update-mutation' import type { Constraint } from 'data/database/constraints-query' import type { ForeignKeyConstraint } from 'data/database/foreign-key-constraints-query' +import { databaseKeys } from 'data/database/keys' import { entityTypeKeys } from 'data/entity-types/keys' import { sqlKeys } from 'data/sql/keys' import { tableEditorKeys } from 'data/table-editor/keys' import { isTableLike } from 'data/table-editor/table-editor-types' +import { tableRowKeys } from 'data/table-rows/keys' import { useTableRowCreateMutation } from 'data/table-rows/table-row-create-mutation' import { useTableRowUpdateMutation } from 'data/table-rows/table-row-update-mutation' import { tableKeys } from 'data/tables/keys' @@ -258,17 +260,15 @@ const SidePanelEditor = ({ queryClient.invalidateQueries(tableEditorKeys.tableEditor(project?.ref, selectedTable?.id)), queryClient.invalidateQueries(sqlKeys.query(project?.ref, ['foreign-key-constraints'])), queryClient.invalidateQueries( - sqlKeys.query(project?.ref, [ - 'table-definition', - selectedTable!.schema, - selectedTable!.name, - ]) + databaseKeys.tableDefinition(project?.ref, selectedTable?.id) ), queryClient.invalidateQueries(entityTypeKeys.list(project?.ref)), ]) + // We need to invalidate tableRowsAndCount after tableEditor + // to ensure the query sent is correct await queryClient.invalidateQueries( - sqlKeys.query(project?.ref, [selectedTable!.schema, selectedTable!.name]) + tableRowKeys.tableRowsAndCount(project?.ref, selectedTable?.id) ) setIsEdited(false) @@ -472,22 +472,6 @@ const SidePanelEditor = ({ if (hasError) { toast(`Table ${table.name} has been updated, but there were some errors`, { id: toastId }) } else { - queryClient.invalidateQueries(sqlKeys.query(project?.ref, ['foreign-key-constraints'])) - await Promise.all([ - queryClient.invalidateQueries(tableEditorKeys.tableEditor(project?.ref, table.id)), - queryClient.invalidateQueries( - sqlKeys.query(project?.ref, [selectedTable.schema, selectedTable.name]) - ), - queryClient.invalidateQueries( - sqlKeys.query(project?.ref, [ - 'table-definition', - selectedTable.schema, - selectedTable.name, - ]) - ), - queryClient.invalidateQueries(entityTypeKeys.list(project?.ref)), - ]) - toast.success(`Successfully updated ${table.name}!`, { id: toastId }) } } @@ -562,11 +546,9 @@ const SidePanelEditor = ({ } } - await Promise.all([ - queryClient.invalidateQueries( - sqlKeys.query(project?.ref, [selectedTable!.schema, selectedTable!.name]) - ), - ]) + await queryClient.invalidateQueries( + tableRowKeys.tableRowsAndCount(project?.ref, selectedTable?.id) + ) toast.success(`Successfully imported ${rowCount} rows of data into ${selectedTable.name}`, { id: toastId, }) diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx index 12aa1adf6ca..f13b0cd7c37 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx @@ -11,11 +11,15 @@ import { updateDatabaseColumn } from 'data/database-columns/database-column-upda import type { Constraint } from 'data/database/constraints-query' import { FOREIGN_KEY_CASCADE_ACTION } from 'data/database/database-query-constants' import { ForeignKeyConstraint } from 'data/database/foreign-key-constraints-query' +import { databaseKeys } from 'data/database/keys' import { entityTypeKeys } from 'data/entity-types/keys' +import { prefetchEditorTablePage } from 'data/prefetchers/project.$ref.editor.$id' import { getQueryClient } from 'data/query-client' import { executeSql } from 'data/sql/execute-sql-query' import { sqlKeys } from 'data/sql/keys' -import { getTableEditor } from 'data/table-editor/table-editor-query' +import { tableEditorKeys } from 'data/table-editor/keys' +import { prefetchTableEditor } from 'data/table-editor/table-editor-query' +import { tableRowKeys } from 'data/table-rows/keys' import { tableKeys } from 'data/tables/keys' import { createTable as createTableMutation } from 'data/tables/table-create-mutation' import { deleteTable as deleteTableMutation } from 'data/tables/table-delete-mutation' @@ -211,6 +215,8 @@ export const createColumn = async ({ selectedTable, primaryKey, foreignKeyRelations = [], + skipSuccessMessage = false, + toastId: _toastId, }: { projectRef: string connectionString: string | undefined @@ -218,8 +224,10 @@ export const createColumn = async ({ selectedTable: PostgresTable primaryKey?: Constraint foreignKeyRelations?: ForeignKey[] + skipSuccessMessage?: boolean + toastId?: string | number }) => { - const toastId = toast.loading(`Creating column "${payload.name}"...`) + const toastId = _toastId ?? toast.loading(`Creating column "${payload.name}"...`) try { // Once pg-meta supports composite keys, we can remove this logic const { isPrimaryKey, ...formattedPayload } = payload @@ -265,7 +273,9 @@ export const createColumn = async ({ }) } - toast.success(`Successfully created column "${column.name}"`, { id: toastId }) + if (!skipSuccessMessage) { + toast.success(`Successfully created column "${column.name}"`, { id: toastId }) + } } catch (error: any) { toast.error(`An error occurred while creating the column "${payload.name}"`, { id: toastId }) return { error } @@ -454,6 +464,8 @@ export const createTable = async ({ isRLSEnabled: boolean importContent?: ImportContent }) => { + const queryClient = getQueryClient() + // Create the table first. Error may be thrown. const table = await createTableMutation({ projectRef: projectRef, @@ -598,6 +610,13 @@ export const createTable = async ({ } } + await prefetchEditorTablePage({ + queryClient, + projectRef, + connectionString, + id: table.id, + }) + // Finally, return the created table return table } catch (error) { @@ -689,6 +708,8 @@ export const updateTable = async ({ connectionString: connectionString, payload: columnPayload, selectedTable: updatedTable, + skipSuccessMessage: true, + toastId, }) } else { const originalColumn = find(originalColumns, { id: column.id }) @@ -696,16 +717,15 @@ export const updateTable = async ({ const columnPayload = generateUpdateColumnPayload(originalColumn, updatedTable, column) if (!isEmpty(columnPayload)) { toast.loading(`Updating column ${column.name} from ${updatedTable.name}`, { id: toastId }) - const skipPKCreation = true - const skipSuccessMessage = true + const res = await updateColumn({ projectRef: projectRef, connectionString: connectionString, id: column.id, payload: columnPayload, selectedTable: updatedTable, - skipPKCreation, - skipSuccessMessage, + skipPKCreation: true, + skipSuccessMessage: true, }) if (res?.error) { hasError = true @@ -739,18 +759,18 @@ export const updateTable = async ({ const queryClient = getQueryClient() await Promise.all([ + queryClient.invalidateQueries(tableEditorKeys.tableEditor(projectRef, table.id)), queryClient.invalidateQueries(sqlKeys.query(projectRef, ['foreign-key-constraints'])), - // invalidate list of tables, as well as visible individual tables - queryClient.invalidateQueries(['projects', projectRef, 'tables']), - queryClient.invalidateQueries(sqlKeys.query(projectRef, [table.schema, table.name])), - queryClient.invalidateQueries( - sqlKeys.query(projectRef, ['table-definition', table.schema, table.name]) - ), + queryClient.invalidateQueries(databaseKeys.tableDefinition(projectRef, table.id)), queryClient.invalidateQueries(entityTypeKeys.list(projectRef)), ]) + // We need to invalidate tableRowsAndCount after tableEditor + // to ensure the query sent is correct + await queryClient.invalidateQueries(tableRowKeys.tableRowsAndCount(projectRef, table.id)) + return { - table: await getTableEditor({ + table: await prefetchTableEditor(queryClient, { projectRef, connectionString, id: table.id, diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx index 4b471a8014d..cc792afd031 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx @@ -124,8 +124,7 @@ const TableEditor = ({ const { data: constraints } = useTableConstraintsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, - schema: table?.schema, - table: table?.name, + id: table?.id, }) const primaryKey = (constraints ?? []).find( (constraint) => constraint.type === CONSTRAINT_TYPE.PRIMARY_KEY_CONSTRAINT diff --git a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx index db15bafe083..8250fc7528a 100644 --- a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx @@ -33,8 +33,7 @@ const TableDefinition = ({ entity }: TableDefinitionProps) => { const viewResult = useViewDefinitionQuery( { - schema: entity?.schema, - name: entity?.name, + id: entity?.id, projectRef: project?.ref, connectionString: project?.connectionString, }, @@ -45,8 +44,7 @@ const TableDefinition = ({ entity }: TableDefinitionProps) => { const tableResult = useTableDefinitionQuery( { - schema: entity?.schema, - name: entity?.name, + id: entity?.id, projectRef: project?.ref, connectionString: project?.connectionString, }, diff --git a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx index 9b1887d9081..ff4ef5d7127 100644 --- a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx @@ -9,14 +9,15 @@ import { SupabaseGrid } from 'components/grid/SupabaseGrid' import { parseSupaTable } from 'components/grid/SupabaseGrid.utils' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { DocsButton } from 'components/ui/DocsButton' -import { sqlKeys } from 'data/sql/keys' import { Entity, isMaterializedView, isTableLike, isView, } from 'data/table-editor/table-editor-types' +import { tableRowKeys } from 'data/table-rows/keys' import { useTableRowUpdateMutation } from 'data/table-rows/table-row-update-mutation' +import { TableRowsData } from 'data/table-rows/table-rows-query' import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' import useLatest from 'hooks/misc/useLatest' import { useUrlState } from 'hooks/ui/useUrlState' @@ -61,20 +62,16 @@ const TableGridEditor = ({ async onMutate({ projectRef, table, configuration, payload }) { const primaryKeyColumns = new Set(Object.keys(configuration.identifiers)) - const queryKey = sqlKeys.query(projectRef, [ - table.schema, - table.name, - { table: { name: table.name, schema: table.schema } }, - ]) + const queryKey = tableRowKeys.tableRows(projectRef, { table: { id: table.id } }) await queryClient.cancelQueries(queryKey) - const previousRowsQueries = queryClient.getQueriesData<{ result: any[] }>(queryKey) + const previousRowsQueries = queryClient.getQueriesData(queryKey) - queryClient.setQueriesData<{ result: any[] }>(queryKey, (old) => { + queryClient.setQueriesData(queryKey, (old) => { return { - result: - old?.result.map((row) => { + rows: + old?.rows.map((row) => { // match primary keys if ( Object.entries(row) diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx index 16c4cc691d1..dce32b418ac 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx @@ -36,11 +36,10 @@ export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => { const router = useRouter() const { profile } = useProfile() const project = useSelectedProject() - const { ref, id: activeId } = useParams() + const { ref } = useParams() const snapV2 = useSqlEditorV2StateSnapshot() const [searchText, setSearchText] = useState('') - const [selectedQueries, setSelectedQueries] = useState([]) const canCreateSQLSnippet = useCheckPermissions(PermissionAction.CREATE, 'user_content', { resource: { type: 'sql', owner_id: profile?.id }, @@ -80,78 +79,76 @@ export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => { } return ( - <> -
-
-
- - setSearchText(e.target.value)} +
+
+
+ + setSearchText(e.target.value)} + > + snapV2.setOrder(value)} > - snapV2.setOrder(value)} - > - - Alphabetical - - - Created At - - - - - - -
- -
- - Templates - - - Quickstarts - -
- - + + Alphabetical + + + Created At + + + + + + +
-
- +
+ + Templates + + + Quickstarts +
+ +
- + +
+ +
+
) } diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx index 16d3174d5ac..9562476804d 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx @@ -1,4 +1,4 @@ -import { ChevronRight, Eye, EyeOffIcon, Heart, Unlock } from 'lucide-react' +import { Eye, EyeOffIcon, Heart, Unlock } from 'lucide-react' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import { toast } from 'sonner' @@ -31,18 +31,15 @@ import { useSnippets, useSqlEditorV2StateSnapshot, } from 'state/sql-editor-v2' +import { Separator, Skeleton, TreeView } from 'ui' import { - AlertDescription_Shadcn_, - AlertTitle_Shadcn_, - Alert_Shadcn_, - CollapsibleContent_Shadcn_, - CollapsibleTrigger_Shadcn_, - Collapsible_Shadcn_, - Separator, - TreeView, -} from 'ui' + InnerSideBarEmptyPanel, + InnerSideMenuCollapsible, + InnerSideMenuCollapsibleContent, + InnerSideMenuCollapsibleTrigger, + InnerSideMenuSeparator, +} from 'ui-patterns' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' -import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { ROOT_NODE, formatFolderResponseForTreeView } from './SQLEditorNav.utils' import { SQLEditorTreeViewItem } from './SQLEditorTreeViewItem' @@ -75,11 +72,6 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) => const [selectedSnippetToDownload, setSelectedSnippetToDownload] = useState() const [selectedFolderToDelete, setSelectedFolderToDelete] = useState() - const COLLAPSIBLE_TRIGGER_CLASS_NAMES = - 'flex items-center gap-x-2 px-4 [&[data-state=open]>svg]:!rotate-90' - const COLLAPSIBLE_ICON_CLASS_NAMES = 'text-foreground-light transition-transform duration-200' - const COLLASIBLE_HEADER_CLASS_NAMES = 'text-foreground-light font-mono text-sm uppercase' - // ======================================================= // [Joshen] Set up favorites, shared, and private snippets // ======================================================= @@ -341,27 +333,24 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) => return ( <> - - + {((numProjectSnippets === 0 && searchText.length === 0) || numProjectSnippets > 0) && ( <> - - - - - Shared{numProjectSnippets > 0 && ` (${numProjectSnippets})`} - - - + + 0 ? ` (${numProjectSnippets})` : ''}`} + /> + {numProjectSnippets === 0 ? ( -
- - No shared queries - - Share queries with your team by right-clicking on the query. - - -
+ ) : ( )} /> )} - - - + + + )} {((numFavoriteSnippets === 0 && searchText.length === 0) || numFavoriteSnippets > 0) && ( <> - - - - - Favorites{numFavoriteSnippets > 0 && ` (${numFavoriteSnippets})`} - - - + + 0 ? ` (${numFavoriteSnippets})` : ''}`} + /> + {numFavoriteSnippets === 0 ? ( -
- - No favorite queries - + Save a query to favorites for easy accessbility by clicking the{' '} {' '} icon. - - -
+ + } + /> ) : ( )} /> )} - - - + + + )} - - - - - PRIVATE - {numPrivateSnippets > 0 && ` (${numPrivateSnippets})`} - - - + + 0 ? ` (${numPrivateSnippets})` : ''}`} + /> + {!snapV2.loaded[projectRef as string] ? ( -
- -
+ <> +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ ) : folders.length === 0 && numPrivateSnippets === 0 ? ( -
- - No queries created yet - - Queries will be automatically saved once you start writing in the editor. - - -
+ ) : ( )} /> )} - - + + diff --git a/apps/studio/data/auth/user-create-mutation.ts b/apps/studio/data/auth/user-create-mutation.ts index 4484f199cc7..83adf73a3ff 100644 --- a/apps/studio/data/auth/user-create-mutation.ts +++ b/apps/studio/data/auth/user-create-mutation.ts @@ -1,59 +1,31 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' import { toast } from 'sonner' +import { handleError, post } from 'data/fetchers' import { sqlKeys } from 'data/sql/keys' -import { post } from 'lib/common/fetch' -import { IS_PLATFORM } from 'lib/constants' -import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants' import type { ResponseError } from 'types' import { authKeys } from './keys' export type UserCreateVariables = { - projectRef?: string - protocol: string - endpoint: string - serviceApiKey: string + projectRef: string user: { email: string password: string - autoConfirmUser: string + autoConfirmUser: boolean } } -export type UserCreateResponse = { - id: string - phone: string - role: string - updated_at: string - app_metadata: { - provider: string - providers: string[] - } - aud: string - created_at: string - email: string - email_confirmed_at: string - identities: any[] - user_metadata: any -} - -export async function createUser({ protocol, endpoint, serviceApiKey, user }: UserCreateVariables) { - const response = await post( - `${protocol}://${endpoint}/auth/v1/admin/users`, - { +export async function createUser({ projectRef, user }: UserCreateVariables) { + const { data, error } = await post('/platform/auth/{ref}/users', { + params: { path: { ref: projectRef } }, + body: { email: user.email, password: user.password, email_confirm: user.autoConfirmUser, }, - { - headers: { - apikey: serviceApiKey, - Authorization: `Bearer ${serviceApiKey}`, - }, - } - ) - if (response.error) throw response.error - return response + }) + if (error) handleError(error) + return data } type UserCreateData = Awaited> diff --git a/apps/studio/data/auth/user-update-mutation.ts b/apps/studio/data/auth/user-update-mutation.ts index d6f2e5a7623..19cf3ae3b9f 100644 --- a/apps/studio/data/auth/user-update-mutation.ts +++ b/apps/studio/data/auth/user-update-mutation.ts @@ -1,46 +1,25 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' import { toast } from 'sonner' -import { put } from 'lib/common/fetch' -import { IS_PLATFORM } from 'lib/constants' -import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants' +import { handleError, patch } from 'data/fetchers' import type { ResponseError } from 'types' import { authKeys } from './keys' export type UserUpdateVariables = { - projectRef?: string - protocol: string - endpoint: string - serviceApiKey: string - + projectRef: string userId: string // For now just support updating banning the user banDuration: number | 'none' // In hours, "none" to unban, otherwise a string in hours e.g "24h" } -export async function updateUser({ - protocol, - endpoint, - serviceApiKey, - userId, - banDuration, -}: UserUpdateVariables) { - // [Joshen] This is probably the only endpoint that needs the put method from lib/common/fetch - // as it's not our internal API. - const response = await put( - `${protocol}://${endpoint}/auth/v1/admin/users/${userId}`, - { ban_duration: typeof banDuration === 'number' ? `${banDuration}h` : banDuration }, - { - headers: { - apikey: serviceApiKey, - Authorization: `Bearer ${serviceApiKey}`, - }, - credentials: undefined, - } - ) +export async function updateUser({ projectRef, userId, banDuration }: UserUpdateVariables) { + const { data, error } = await patch('/platform/auth/{ref}/users/{id}', { + params: { path: { ref: projectRef, id: userId } }, + body: { ban_duration: typeof banDuration === 'number' ? `${banDuration}h` : banDuration }, + }) - if (response.error) throw response.error - return response + if (error) handleError(error) + return data } type UserUpdateData = Awaited> diff --git a/apps/studio/data/database-columns/database-column-delete-mutation.ts b/apps/studio/data/database-columns/database-column-delete-mutation.ts index 2572f5fa673..16350f8961f 100644 --- a/apps/studio/data/database-columns/database-column-delete-mutation.ts +++ b/apps/studio/data/database-columns/database-column-delete-mutation.ts @@ -1,10 +1,12 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' import { toast } from 'sonner' +import { databaseKeys } from 'data/database/keys' import { entityTypeKeys } from 'data/entity-types/keys' import { del, handleError } from 'data/fetchers' import { sqlKeys } from 'data/sql/keys' import { tableEditorKeys } from 'data/table-editor/keys' +import { tableRowKeys } from 'data/table-rows/keys' import { viewKeys } from 'data/views/keys' import type { ResponseError } from 'types' @@ -62,18 +64,20 @@ export const useDatabaseColumnDeleteMutation = ({ ...(table !== undefined ? [ queryClient.invalidateQueries(tableEditorKeys.tableEditor(projectRef, table.id)), - queryClient.invalidateQueries( - sqlKeys.query(projectRef, [table.schema, table.name]) - ), - queryClient.invalidateQueries( - sqlKeys.query(projectRef, ['table-definition', table.schema, table.name]) - ), + queryClient.invalidateQueries(databaseKeys.tableDefinition(projectRef, table.id)), // invalidate all views from this schema, not sure if this is needed since you can't actually delete a column // which has a view dependent on it queryClient.invalidateQueries(viewKeys.listBySchema(projectRef, table.schema)), ] : []), ]) + + if (table !== undefined) { + // We need to invalidate tableRowsAndCount after tableEditor + // to ensure the query sent is correct + await queryClient.invalidateQueries(tableRowKeys.tableRowsAndCount(projectRef, table.id)) + } + await onSuccess?.(data, variables, context) }, async onError(data, variables, context) { diff --git a/apps/studio/data/database-queues/database-queue-messages-delete-mutation.ts b/apps/studio/data/database-queues/database-queue-messages-delete-mutation.ts new file mode 100644 index 00000000000..65c0c124bf2 --- /dev/null +++ b/apps/studio/data/database-queues/database-queue-messages-delete-mutation.ts @@ -0,0 +1,68 @@ +import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' +import { toast } from 'sonner' + +import { executeSql } from 'data/sql/execute-sql-query' +import type { ResponseError } from 'types' +import { databaseQueuesKeys } from './keys' + +export type DatabaseQueueMessageDeleteVariables = { + projectRef: string + connectionString?: string + queueName: string + messageId: number +} + +export async function deleteDatabaseQueueMessage({ + projectRef, + connectionString, + queueName, + messageId, +}: DatabaseQueueMessageDeleteVariables) { + const { result } = await executeSql({ + projectRef, + connectionString, + sql: `SELECT * FROM pgmq.delete('${queueName}', ${messageId})`, + queryKey: databaseQueuesKeys.create(), + }) + + return result +} + +type DatabaseQueueMessageDeleteData = Awaited> + +export const useDatabaseQueueMessageDeleteMutation = ({ + onSuccess, + onError, + ...options +}: Omit< + UseMutationOptions< + DatabaseQueueMessageDeleteData, + ResponseError, + DatabaseQueueMessageDeleteVariables + >, + 'mutationFn' +> = {}) => { + const queryClient = useQueryClient() + + return useMutation< + DatabaseQueueMessageDeleteData, + ResponseError, + DatabaseQueueMessageDeleteVariables + >((vars) => deleteDatabaseQueueMessage(vars), { + async onSuccess(data, variables, context) { + const { projectRef, queueName } = variables + await queryClient.invalidateQueries( + databaseQueuesKeys.getMessagesInfinite(projectRef, queueName) + ) + await onSuccess?.(data, variables, context) + }, + async onError(data, variables, context) { + if (onError === undefined) { + toast.error(`Failed to delete database queue message: ${data.message}`) + } else { + onError(data, variables, context) + } + }, + ...options, + }) +} diff --git a/apps/studio/data/database-queues/database-queue-messages-read-mutation.ts b/apps/studio/data/database-queues/database-queue-messages-read-mutation.ts new file mode 100644 index 00000000000..601675001cb --- /dev/null +++ b/apps/studio/data/database-queues/database-queue-messages-read-mutation.ts @@ -0,0 +1,70 @@ +import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' +import { toast } from 'sonner' + +import { executeSql } from 'data/sql/execute-sql-query' +import type { ResponseError } from 'types' +import { databaseQueuesKeys } from './keys' + +export type DatabaseQueueMessageReadVariables = { + projectRef: string + connectionString?: string + queryName: string + duration: number + messageId: number +} + +export async function readDatabaseQueueMessage({ + projectRef, + connectionString, + queryName, + messageId, + duration, +}: DatabaseQueueMessageReadVariables) { + const { result } = await executeSql({ + projectRef, + connectionString, + sql: `select * from pgmq.set_vt('${queryName}', ${messageId}, ${duration})`, + queryKey: databaseQueuesKeys.create(), + }) + + return result +} + +type DatabaseQueueMessageReadData = Awaited> + +export const useDatabaseQueueMessageReadMutation = ({ + onSuccess, + onError, + ...options +}: Omit< + UseMutationOptions< + DatabaseQueueMessageReadData, + ResponseError, + DatabaseQueueMessageReadVariables + >, + 'mutationFn' +> = {}) => { + const queryClient = useQueryClient() + + return useMutation< + DatabaseQueueMessageReadData, + ResponseError, + DatabaseQueueMessageReadVariables + >((vars) => readDatabaseQueueMessage(vars), { + async onSuccess(data, variables, context) { + const { projectRef, queryName } = variables + await queryClient.invalidateQueries( + databaseQueuesKeys.getMessagesInfinite(projectRef, queryName) + ) + await onSuccess?.(data, variables, context) + }, + async onError(data, variables, context) { + if (onError === undefined) { + toast.error(`Failed to postpone database queue message: ${data.message}`) + } else { + onError(data, variables, context) + } + }, + ...options, + }) +} diff --git a/apps/studio/data/database-queues/database-queue-messages-send-mutation.ts b/apps/studio/data/database-queues/database-queue-messages-send-mutation.ts new file mode 100644 index 00000000000..e06600ff413 --- /dev/null +++ b/apps/studio/data/database-queues/database-queue-messages-send-mutation.ts @@ -0,0 +1,70 @@ +import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' +import { toast } from 'sonner' + +import { executeSql } from 'data/sql/execute-sql-query' +import type { ResponseError } from 'types' +import { databaseQueuesKeys } from './keys' + +export type DatabaseQueueMessageSendVariables = { + projectRef: string + connectionString?: string + queueName: string + payload: string + delay: number +} + +export async function sendDatabaseQueueMessage({ + projectRef, + connectionString, + queueName, + payload, + delay, +}: DatabaseQueueMessageSendVariables) { + const { result } = await executeSql({ + projectRef, + connectionString, + sql: `select * from pgmq.send( '${queueName}', '${payload}', ${delay})`, + queryKey: databaseQueuesKeys.create(), + }) + + return result +} + +type DatabaseQueueMessageSendData = Awaited> + +export const useDatabaseQueueMessageSendMutation = ({ + onSuccess, + onError, + ...options +}: Omit< + UseMutationOptions< + DatabaseQueueMessageSendData, + ResponseError, + DatabaseQueueMessageSendVariables + >, + 'mutationFn' +> = {}) => { + const queryClient = useQueryClient() + + return useMutation< + DatabaseQueueMessageSendData, + ResponseError, + DatabaseQueueMessageSendVariables + >((vars) => sendDatabaseQueueMessage(vars), { + async onSuccess(data, variables, context) { + const { projectRef, queueName } = variables + await queryClient.invalidateQueries( + databaseQueuesKeys.getMessagesInfinite(projectRef, queueName) + ) + await onSuccess?.(data, variables, context) + }, + async onError(data, variables, context) { + if (onError === undefined) { + toast.error(`Failed to send database queue message: ${data.message}`) + } else { + onError(data, variables, context) + } + }, + ...options, + }) +} diff --git a/apps/studio/data/database-queues/database-queues-delete-mutation.ts b/apps/studio/data/database-queues/database-queues-delete-mutation.ts index 7cdd8b3df41..83c2c828359 100644 --- a/apps/studio/data/database-queues/database-queues-delete-mutation.ts +++ b/apps/studio/data/database-queues/database-queues-delete-mutation.ts @@ -20,7 +20,7 @@ export async function deleteDatabaseQueue({ projectRef, connectionString, sql: `select * from pgmq.drop_queue('${queueName}');`, - queryKey: databaseQueuesKeys.delete(), + queryKey: databaseQueuesKeys.delete(queueName), }) return result diff --git a/apps/studio/data/database-queues/database-queues-metrics-query.ts b/apps/studio/data/database-queues/database-queues-metrics-query.ts new file mode 100644 index 00000000000..a7617213b7c --- /dev/null +++ b/apps/studio/data/database-queues/database-queues-metrics-query.ts @@ -0,0 +1,90 @@ +import { UseQueryOptions, useQuery } from '@tanstack/react-query' +import { handleError } from 'data/fetchers' +import { executeSql } from 'data/sql/execute-sql-query' +import { ResponseError } from 'types' +import { databaseQueuesKeys } from './keys' + +export type DatabaseQueuesMetricsVariables = { + projectRef?: string + connectionString?: string + queueName: string +} + +export type PostgresQueueMetric = { + queue_name: string + queue_length: number + method: 'estimated' | 'precise' +} + +const preciseMetricsSqlQuery = (queueName: string) => ` + set local statement_timeout = '1s'; + SELECT + COUNT(*) AS row_count + FROM + "pgmq"."q_${queueName}"; +` + +const estimateMetricsSqlQuery = (queueName: string) => ` + select + reltuples::bigint as estimated_rows + from + pg_class + where + relname = 'q_${queueName}' + and relnamespace = 'pgmq'::regnamespace; +` + +export async function getDatabaseQueuesMetrics({ + projectRef, + connectionString, + queueName, +}: DatabaseQueuesMetricsVariables) { + if (!projectRef) throw new Error('Project ref is required') + + try { + const { result } = await executeSql({ + projectRef, + connectionString, + sql: preciseMetricsSqlQuery(queueName), + }) + return { + queue_name: queueName, + queue_length: result[0].row_count, + method: 'precise', + } as PostgresQueueMetric + } catch (error: any) { + // if the error is caused because the count timeouted, try to fetch an approximate count + if (error?.message === 'canceling statement due to statement timeout') { + const { result } = await executeSql({ + projectRef, + connectionString, + sql: estimateMetricsSqlQuery(queueName), + }) + return { + queue_name: queueName, + queue_length: result[0].estimated_rows, + method: 'estimated', + } as PostgresQueueMetric + } + return handleError(error) + } +} + +export type DatabaseQueuesMetricsData = PostgresQueueMetric +export type DatabaseQueuesMetricsError = ResponseError + +export const useQueuesMetricsQuery = ( + { projectRef, connectionString, queueName }: DatabaseQueuesMetricsVariables, + { + enabled = true, + ...options + }: UseQueryOptions = {} +) => + useQuery( + databaseQueuesKeys.metrics(projectRef, queueName), + () => getDatabaseQueuesMetrics({ projectRef, connectionString, queueName }), + { + enabled: enabled && typeof projectRef !== 'undefined', + ...options, + } + ) diff --git a/apps/studio/data/database-queues/database-queues-purge-mutation.ts b/apps/studio/data/database-queues/database-queues-purge-mutation.ts new file mode 100644 index 00000000000..7a4419b64ae --- /dev/null +++ b/apps/studio/data/database-queues/database-queues-purge-mutation.ts @@ -0,0 +1,61 @@ +import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query' +import { toast } from 'sonner' + +import { executeSql } from 'data/sql/execute-sql-query' +import type { ResponseError } from 'types' +import { databaseQueuesKeys } from './keys' + +export type DatabaseQueuePurgeVariables = { + projectRef: string + connectionString?: string + queueName: string +} + +export async function purgeDatabaseQueue({ + projectRef, + connectionString, + queueName, +}: DatabaseQueuePurgeVariables) { + const { result } = await executeSql({ + projectRef, + connectionString, + sql: `select * from pgmq.purge_queue('${queueName}');`, + queryKey: databaseQueuesKeys.purge(queueName), + }) + + return result +} + +type DatabaseQueuePurgeData = Awaited> + +export const useDatabaseQueuePurgeMutation = ({ + onSuccess, + onError, + ...options +}: Omit< + UseMutationOptions, + 'mutationFn' +> = {}) => { + const queryClient = useQueryClient() + + return useMutation( + (vars) => purgeDatabaseQueue(vars), + { + async onSuccess(data, variables, context) { + const { projectRef, queueName } = variables + await queryClient.invalidateQueries( + databaseQueuesKeys.getMessagesInfinite(projectRef, queueName) + ) + await onSuccess?.(data, variables, context) + }, + async onError(data, variables, context) { + if (onError === undefined) { + toast.error(`Failed to purge database queue: ${data.message}`) + } else { + onError(data, variables, context) + } + }, + ...options, + } + ) +} diff --git a/apps/studio/data/database-queues/keys.ts b/apps/studio/data/database-queues/keys.ts index c0c484c93aa..228c5caa694 100644 --- a/apps/studio/data/database-queues/keys.ts +++ b/apps/studio/data/database-queues/keys.ts @@ -1,7 +1,11 @@ export const databaseQueuesKeys = { create: () => ['queues', 'create'] as const, - delete: () => ['queues', 'delete'] as const, + delete: (name: string) => ['queues', name, 'delete'] as const, + purge: (name: string) => ['queues', name, 'purge'] as const, getMessagesInfinite: (projectRef: string | undefined, queueName: string, options?: object) => ['projects', projectRef, 'queues', queueName, options].filter(Boolean), list: (projectRef: string | undefined) => ['projects', projectRef, 'queues'] as const, + // invalidating queues.list will also invalidate queues.metrics + metrics: (projectRef: string | undefined, queueName: string) => + ['projects', projectRef, 'queues', 'metrics', queueName] as const, } diff --git a/apps/studio/data/database/constraints-query.ts b/apps/studio/data/database/constraints-query.ts index ccf0ae456da..bfefce69f65 100644 --- a/apps/studio/data/database/constraints-query.ts +++ b/apps/studio/data/database/constraints-query.ts @@ -1,9 +1,9 @@ -import { UseQueryOptions } from '@tanstack/react-query' -import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from '../sql/execute-sql-query' +import { useQuery, UseQueryOptions } from '@tanstack/react-query' +import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query' +import { databaseKeys } from './keys' type GetTableConstraintsVariables = { - schema?: string - table?: string + id?: number } export type Constraint = { @@ -21,19 +21,29 @@ export enum CONSTRAINT_TYPE { EXCLUSION_CONSTRAINT = 'x', } -export const getTableConstraints = ({ schema, table }: GetTableConstraintsVariables) => { +export const getTableConstraintsSql = ({ id }: GetTableConstraintsVariables) => { const sql = /* SQL */ ` - SELECT + with table_info as ( + select + n.nspname::text as schema, + c.relname::text as name, + to_regclass(concat('"', n.nspname, '"."', c.relname, '"')) as regclass + from pg_class c + join pg_namespace n on n.oid = c.relnamespace + where c.oid = ${id} +) +select con.oid as id, con.conname as name, con.contype as type - FROM pg_catalog.pg_constraint con - INNER JOIN pg_catalog.pg_class rel - ON rel.oid = con.conrelid - INNER JOIN pg_catalog.pg_namespace nsp - ON nsp.oid = connamespace - WHERE nsp.nspname = '${schema}' - AND rel.relname = '${table}'; +from pg_catalog.pg_constraint con +inner join pg_catalog.pg_class rel + on rel.oid = con.conrelid +inner join pg_catalog.pg_namespace nsp + on nsp.oid = connamespace +inner join table_info ti + on ti.schema = nsp.nspname + and ti.name = rel.relname; `.trim() return sql @@ -47,23 +57,31 @@ export type TableConstraintsVariables = GetTableConstraintsVariables & { export type TableConstraintsData = Constraint[] export type TableConstraintsError = ExecuteSqlError -export const useTableConstraintsQuery = ( - { projectRef, connectionString, schema, table }: TableConstraintsVariables, - options: UseQueryOptions = {} -) => { - return useExecuteSqlQuery( +export async function getTableConstraints( + { projectRef, connectionString, id }: TableConstraintsVariables, + signal?: AbortSignal +) { + const sql = getTableConstraintsSql({ id }) + const { result } = await executeSql( + { projectRef, connectionString, sql, queryKey: ['table-constraints', id] }, + signal + ) + + return (result as TableConstraintsData) ?? [] +} + +export const useTableConstraintsQuery = ( + { projectRef, connectionString, id }: TableConstraintsVariables, + { + enabled = true, + ...options + }: UseQueryOptions = {} +) => + useQuery( + databaseKeys.tableConstraints(projectRef, id), + ({ signal }) => getTableConstraints({ projectRef, connectionString, id }, signal), { - projectRef, - connectionString, - sql: getTableConstraints({ schema, table }), - queryKey: ['table-constraints'], - }, - { - enabled: typeof schema !== 'undefined' && typeof table !== 'undefined', - select(data) { - return (data as any)?.result ?? [] - }, + enabled: enabled && typeof projectRef !== 'undefined' && typeof id !== 'undefined', ...options, } ) -} diff --git a/apps/studio/data/database/entity-definition-query.ts b/apps/studio/data/database/entity-definition-query.ts index 5c8ffcb8832..ad960f55f1b 100644 --- a/apps/studio/data/database/entity-definition-query.ts +++ b/apps/studio/data/database/entity-definition-query.ts @@ -1,7 +1,7 @@ -import { UseQueryOptions } from '@tanstack/react-query' +import { useQuery, UseQueryOptions } from '@tanstack/react-query' import { SupportedAssistantEntities } from 'components/ui/AIAssistantPanel/AIAssistant.types' -import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from '../sql/execute-sql-query' +import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query' import { databaseKeys } from './keys' const generatePolicyDefinition = (policy: { @@ -21,14 +21,19 @@ CREATE POLICY "${policy.name}" on "${policy.schema}"."${policy.table}" AS ${poli } // [Joshen] Eventually should support table definition and view definition as well if possible -export const getEntityDefinitionQuery = ({ +export const getEntityDefinitionSql = ({ id, type, }: { id?: number type?: SupportedAssistantEntities | 'table' | 'view' | null }) => { - if (!id || !type) return '' + if (!id) { + throw new Error('id is required') + } + if (!type) { + throw new Error('type is required') + } switch (type) { case 'functions': @@ -79,32 +84,54 @@ export type EntityDefinitionVariables = { connectionString?: string } -export type EntityDefinitionData = string -export type EntityDefinitionError = ExecuteSqlError +export async function getEntityDefinition( + { projectRef, connectionString, id, type }: EntityDefinitionVariables, + signal?: AbortSignal +) { + if (!id) { + throw new Error('id is required') + } -export const useEntityDefinitionQuery = ( - { id, type, projectRef, connectionString }: EntityDefinitionVariables, - { enabled = true, ...options }: UseQueryOptions = {} -) => { - return useExecuteSqlQuery( + const sql = getEntityDefinitionSql({ id, type }) + const { result } = await executeSql( { projectRef, connectionString, - sql: getEntityDefinitionQuery({ id, type }), - queryKey: databaseKeys.entityDefinition(projectRef, id), + sql, + queryKey: ['entity-definition', id], }, + signal + ) + + if (type === 'functions') { + return result[0].pg_get_functiondef + } else if (type === 'rls-policies') { + return generatePolicyDefinition(result[0]) + } else { + return result[0] + } +} + +export type EntityDefinitionData = string +export type EntityDefinitionError = ExecuteSqlError + +export const useEntityDefinitionQuery = ( + { projectRef, connectionString, id, type }: EntityDefinitionVariables, + { + enabled = true, + ...options + }: UseQueryOptions = {} +) => + useQuery( + databaseKeys.entityDefinition(projectRef, id), + ({ signal }) => getEntityDefinition({ projectRef, connectionString, id, type }, signal), { - select(data) { - if (type === 'functions') { - return data.result[0].pg_get_functiondef - } else if (type === 'rls-policies') { - return generatePolicyDefinition(data.result[0]) - } else { - return data.result[0] - } - }, - enabled: enabled && typeof id !== 'undefined' && typeof type !== 'undefined', + enabled: + enabled && + typeof projectRef !== 'undefined' && + typeof id !== 'undefined' && + !isNaN(id) && + typeof type !== 'undefined', ...options, } ) -} diff --git a/apps/studio/data/database/entity-definitions-query.ts b/apps/studio/data/database/entity-definitions-query.ts index 4506ea58ec9..f159eb37256 100644 --- a/apps/studio/data/database/entity-definitions-query.ts +++ b/apps/studio/data/database/entity-definitions-query.ts @@ -1,9 +1,9 @@ -import { UseQueryOptions } from '@tanstack/react-query' -import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from '../sql/execute-sql-query' +import { useQuery, UseQueryOptions } from '@tanstack/react-query' +import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query' import { CREATE_PG_GET_TABLEDEF_SQL } from './database-query-constants' import { databaseKeys } from './keys' -export const getEntityDefinitionsQuery = ({ +export const getEntityDefinitionsSql = ({ schemas, limit = 100, }: { @@ -82,32 +82,40 @@ export type EntityDefinitionsVariables = { schemas: string[] } +export async function getEntityDefinitions( + { projectRef, connectionString, schemas, limit }: EntityDefinitionsVariables, + signal?: AbortSignal +) { + const sql = getEntityDefinitionsSql({ schemas, limit }) + const { result } = await executeSql( + { + projectRef, + connectionString, + sql, + queryKey: ['entity-definitions', schemas], + }, + signal + ) + + return result[0].data.definitions +} + type EntityDefinition = { id: number; sql: string } export type EntityDefinitionsData = EntityDefinition[] export type EntityDefinitionsError = ExecuteSqlError -export const useEntityDefinitionsQuery = < - TData extends EntityDefinitionsData = EntityDefinitionsData, ->( - { schemas, limit, projectRef, connectionString }: EntityDefinitionsVariables, +export const useEntityDefinitionsQuery = ( + { projectRef, connectionString, schemas, limit }: EntityDefinitionsVariables, { enabled = true, ...options - }: UseQueryOptions = {} -) => { - return useExecuteSqlQuery( + }: UseQueryOptions = {} +) => + useQuery( + databaseKeys.entityDefinitions(projectRef, schemas), + ({ signal }) => getEntityDefinitions({ projectRef, connectionString, schemas, limit }, signal), { - projectRef, - connectionString, - sql: getEntityDefinitionsQuery({ schemas, limit }), - queryKey: databaseKeys.entityDefinitions(projectRef, schemas), - }, - { - select(data) { - return data.result[0].data.definitions - }, - enabled: enabled && schemas.length > 0, + enabled: enabled && typeof projectRef !== 'undefined' && schemas.length > 0, ...options, } ) -} diff --git a/apps/studio/data/database/keys.ts b/apps/studio/data/database/keys.ts index c3a98169d40..ad10299daac 100644 --- a/apps/studio/data/database/keys.ts +++ b/apps/studio/data/database/keys.ts @@ -2,9 +2,13 @@ import { SupportedAssistantEntities } from 'components/ui/AIAssistantPanel/AIAss export const databaseKeys = { entityDefinition: (projectRef: string | undefined, id?: number) => - ['projects', projectRef, 'entity-definition', id].filter(Boolean), + ['projects', projectRef, 'entity-definition', id] as const, entityDefinitions: (projectRef: string | undefined, schemas: string[]) => ['projects', projectRef, 'entity-definitions', schemas] as const, + tableDefinition: (projectRef: string | undefined, id?: number) => + ['projects', projectRef, 'table-definition', id] as const, + viewDefinition: (projectRef: string | undefined, id?: number) => + ['projects', projectRef, 'view-definition', id] as const, backups: (projectRef: string | undefined) => [projectRef, 'database', 'backups'] as const, poolingConfiguration: (projectRef: string | undefined) => [projectRef, 'database', 'pooling-configuration'] as const, @@ -12,4 +16,6 @@ export const databaseKeys = { ['projects', projectRef, 'indexes', { query }] as const, indexAdvisorFromQuery: (projectRef: string | undefined, query: string) => ['projects', projectRef, 'index-advisor', { query }] as const, + tableConstraints: (projectRef: string | undefined, id?: number) => + ['projects', projectRef, 'table-constraints', id] as const, } diff --git a/apps/studio/data/database/table-definition-query.ts b/apps/studio/data/database/table-definition-query.ts index be3f657168b..190de796118 100644 --- a/apps/studio/data/database/table-definition-query.ts +++ b/apps/studio/data/database/table-definition-query.ts @@ -1,53 +1,81 @@ -import { UseQueryOptions } from '@tanstack/react-query' -import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from '../sql/execute-sql-query' +import { useQuery, UseQueryOptions } from '@tanstack/react-query' +import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query' import { CREATE_PG_GET_TABLEDEF_SQL } from './database-query-constants' +import { databaseKeys } from './keys' -type GetTableDefinition = { - schema?: string - name?: string +type GetTableDefinitionArgs = { + id?: number } // [Joshen] Eventually move this into entity-definition-query -export const getTableDefinitionQuery = ({ schema = 'public', name }: GetTableDefinition) => { +const getTableDefinitionSql = ({ id }: GetTableDefinitionArgs) => { const sql = /* SQL */ ` ${CREATE_PG_GET_TABLEDEF_SQL} + with table_info as ( + select + n.nspname::text as schema, + c.relname::text as name + from pg_class c + join pg_namespace n on n.oid = c.relnamespace + where c.oid = ${id} + ) select pg_temp.pg_get_tabledef ( - '${schema}', - '${name}', + t.schema, + t.name, false, 'FKEYS_INTERNAL', 'INCLUDE_TRIGGERS' ) as definition + from table_info t; `.trim() return sql } -export type TableDefinitionVariables = GetTableDefinition & { +export type TableDefinitionVariables = GetTableDefinitionArgs & { projectRef?: string connectionString?: string } +export async function getTableDefinition( + { projectRef, connectionString, id }: TableDefinitionVariables, + signal?: AbortSignal +) { + if (!id) { + throw new Error('id is required') + } + + const sql = getTableDefinitionSql({ id }) + const { result } = await executeSql( + { + projectRef, + connectionString, + sql, + queryKey: ['table-definition', id], + }, + signal + ) + + return result[0].definition.trim() as string +} + export type TableDefinitionData = string export type TableDefinitionError = ExecuteSqlError -export const useTableDefinitionQuery = ( - { projectRef, connectionString, schema, name }: TableDefinitionVariables, - options: UseQueryOptions = {} -) => { - return useExecuteSqlQuery( +export const useTableDefinitionQuery = ( + { projectRef, connectionString, id }: TableDefinitionVariables, + { + enabled = true, + ...options + }: UseQueryOptions = {} +) => + useQuery( + databaseKeys.tableDefinition(projectRef, id), + ({ signal }) => getTableDefinition({ projectRef, connectionString, id }, signal), { - projectRef, - connectionString, - sql: getTableDefinitionQuery({ schema, name }), - queryKey: ['table-definition', schema, name], - }, - { - select(data) { - return data.result[0].definition.trim() - }, + enabled: + enabled && typeof projectRef !== 'undefined' && typeof id !== 'undefined' && !isNaN(id), ...options, } ) -} diff --git a/apps/studio/data/database/view-definition-query.ts b/apps/studio/data/database/view-definition-query.ts index fe2a98567aa..7091077635d 100644 --- a/apps/studio/data/database/view-definition-query.ts +++ b/apps/studio/data/database/view-definition-query.ts @@ -1,45 +1,73 @@ -import { UseQueryOptions } from '@tanstack/react-query' -import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from '../sql/execute-sql-query' +import { useQuery, UseQueryOptions } from '@tanstack/react-query' +import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query' +import { databaseKeys } from './keys' -type GetViewDefinition = { - schema?: string - name?: string +type GetViewDefinitionArgs = { + id?: number } // [Joshen] Eventually move this into entity-definition-query -export const getViewDefinitionQuery = ({ schema, name }: GetViewDefinition) => { +export const getViewDefinitionSql = ({ id }: GetViewDefinitionArgs) => { + if (!id) { + throw new Error('id is required') + } + const sql = /* SQL */ ` - select pg_get_viewdef(to_regclass('"${schema}"."${name}"'), true) as definition + with table_info as ( + select + n.nspname::text as schema, + c.relname::text as name, + to_regclass(concat('"', n.nspname, '"."', c.relname, '"')) as regclass + from pg_class c + join pg_namespace n on n.oid = c.relnamespace + where c.oid = ${id} + ) + select pg_get_viewdef(t.regclass, true) as definition + from table_info t `.trim() return sql } -export type ViewDefinitionVariables = GetViewDefinition & { +export type ViewDefinitionVariables = GetViewDefinitionArgs & { projectRef?: string connectionString?: string } +export async function getViewDefinition( + { projectRef, connectionString, id }: ViewDefinitionVariables, + signal?: AbortSignal +) { + const sql = getViewDefinitionSql({ id }) + const { result } = await executeSql( + { + projectRef, + connectionString, + sql, + queryKey: ['view-definition', id], + }, + signal + ) + + return result[0].definition.trim() +} + export type ViewDefinitionData = string export type ViewDefinitionError = ExecuteSqlError -export const useViewDefinitionQuery = ( - { projectRef, connectionString, schema, name }: ViewDefinitionVariables, - options: UseQueryOptions = {} -) => { - return useExecuteSqlQuery( +export const useViewDefinitionQuery = ( + { projectRef, connectionString, id }: ViewDefinitionVariables, + { + enabled = true, + ...options + }: UseQueryOptions = {} +) => + useQuery( + databaseKeys.viewDefinition(projectRef, id), + ({ signal }) => getViewDefinition({ projectRef, connectionString, id }, signal), { - projectRef, - connectionString, - sql: getViewDefinitionQuery({ schema, name }), - queryKey: ['view-definition', schema, name], - }, - { - select(data) { - return data.result[0].definition.trim() - }, - enabled: typeof schema !== 'undefined' && typeof name !== 'undefined', + enabled: + enabled && typeof projectRef !== 'undefined' && typeof id !== 'undefined' && !isNaN(id), ...options, } ) -} diff --git a/apps/studio/data/prefetchers/project.$ref.editor.$id.tsx b/apps/studio/data/prefetchers/project.$ref.editor.$id.tsx index 054f2c906f1..c86eb3542b2 100644 --- a/apps/studio/data/prefetchers/project.$ref.editor.$id.tsx +++ b/apps/studio/data/prefetchers/project.$ref.editor.$id.tsx @@ -1,4 +1,4 @@ -import { useQueryClient } from '@tanstack/react-query' +import { QueryClient, useQueryClient } from '@tanstack/react-query' import Link from 'next/link' import { useRouter } from 'next/router' import { ComponentProps, PropsWithChildren, useCallback } from 'react' @@ -14,9 +14,54 @@ import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectConte import { prefetchTableEditor } from 'data/table-editor/table-editor-query' import { prefetchTableRows } from 'data/table-rows/table-rows-query' import { useFlag } from 'hooks/ui/useFlag' +import { ImpersonationRole } from 'lib/role-impersonation' import { useRoleImpersonationStateSnapshot } from 'state/role-impersonation-state' import { TABLE_EDITOR_DEFAULT_ROWS_PER_PAGE } from 'state/table-editor' +interface PrefetchEditorTablePageArgs { + queryClient: QueryClient + projectRef: string + connectionString?: string + id: number + sorts?: Sort[] + filters?: Filter[] + impersonatedRole?: ImpersonationRole +} + +export function prefetchEditorTablePage({ + queryClient, + projectRef, + connectionString, + id, + sorts, + filters, + impersonatedRole, +}: PrefetchEditorTablePageArgs) { + return prefetchTableEditor(queryClient, { + projectRef, + connectionString, + id, + }).then((entity) => { + if (entity) { + const supaTable = parseSupaTable(entity) + + const { sorts: localSorts = [], filters: localFilters = [] } = + loadTableEditorSortsAndFiltersFromLocalStorage(projectRef, entity.name, entity.schema) ?? {} + + prefetchTableRows(queryClient, { + projectRef, + connectionString, + tableId: id, + sorts: sorts ?? formatSortURLParams(supaTable.name, localSorts), + filters: filters ?? formatFilterURLParams(localFilters), + page: 1, + limit: TABLE_EDITOR_DEFAULT_ROWS_PER_PAGE, + impersonatedRole, + }) + } + }) +} + export function usePrefetchEditorTablePage() { const router = useRouter() const queryClient = useQueryClient() @@ -35,38 +80,17 @@ export function usePrefetchEditorTablePage() { router.prefetch(`/project/${project.ref}/editor/${id}`) // Prefetch the data - prefetchTableEditor(queryClient, { + prefetchEditorTablePage({ + queryClient, projectRef: project.ref, connectionString: project.connectionString, id, + sorts, + filters, + impersonatedRole: roleImpersonationState.role, + }).catch(() => { + // eat prefetching errors as they are not critical }) - .then((entity) => { - if (entity) { - const supaTable = parseSupaTable(entity) - - const { sorts: localSorts = [], filters: localFilters = [] } = - loadTableEditorSortsAndFiltersFromLocalStorage( - project.ref, - entity.name, - entity.schema - ) ?? {} - - prefetchTableRows(queryClient, { - queryKey: [supaTable.schema, supaTable.name], - projectRef: project?.ref, - connectionString: project?.connectionString, - table: supaTable, - sorts: sorts ?? formatSortURLParams(supaTable.name, localSorts), - filters: filters ?? formatFilterURLParams(localFilters), - page: 1, - limit: TABLE_EDITOR_DEFAULT_ROWS_PER_PAGE, - impersonatedRole: roleImpersonationState.role, - }) - } - }) - .catch(() => { - // eat prefetching errors as they are not critical - }) }, [project, queryClient, roleImpersonationState.role, router, tableEditorPrefetchingEnabled] ) diff --git a/apps/studio/data/table-editor/table-editor-query.ts b/apps/studio/data/table-editor/table-editor-query.ts index ddcd42bcdca..b9fcdc975d9 100644 --- a/apps/studio/data/table-editor/table-editor-query.ts +++ b/apps/studio/data/table-editor/table-editor-query.ts @@ -56,7 +56,7 @@ export const useTableEditorQuery = ( export function prefetchTableEditor( client: QueryClient, - { projectRef, connectionString, id }: Required + { projectRef, connectionString, id }: TableEditorVariables ) { return client.fetchQuery(tableEditorKeys.tableEditor(projectRef, id), ({ signal }) => getTableEditor( diff --git a/apps/studio/data/table-rows/get-cell-value-mutation.ts b/apps/studio/data/table-rows/get-cell-value-mutation.ts index 096a2771e40..7c22ef6855a 100644 --- a/apps/studio/data/table-rows/get-cell-value-mutation.ts +++ b/apps/studio/data/table-rows/get-cell-value-mutation.ts @@ -51,8 +51,6 @@ export const useGetCellValueMutation = ({ (vars) => getCellValue(vars), { async onSuccess(data, variables, context) { - const { projectRef, table } = variables - // await queryClient.invalidateQueries(sqlKeys.query(projectRef, [table.schema, table.name])) await onSuccess?.(data, variables, context) }, async onError(data, variables, context) { diff --git a/apps/studio/data/table-rows/keys.ts b/apps/studio/data/table-rows/keys.ts new file mode 100644 index 00000000000..38313e014ea --- /dev/null +++ b/apps/studio/data/table-rows/keys.ts @@ -0,0 +1,12 @@ +import type { GetTableRowsArgs } from './table-rows-query' + +type TableRowKeyArgs = Omit & { table?: { id?: number } } + +export const tableRowKeys = { + tableRows: (projectRef?: string, { table, ...args }: TableRowKeyArgs = {}) => + [projectRef, 'table-rows', table?.id, 'rows', args] as const, + tableRowsCount: (projectRef?: string, { table, ...args }: TableRowKeyArgs = {}) => + [projectRef, 'table-rows', table?.id, 'count', args] as const, + tableRowsAndCount: (projectRef?: string, tableId?: number) => + [projectRef, 'table-rows', tableId] as const, +} diff --git a/apps/studio/data/table-rows/table-row-create-mutation.ts b/apps/studio/data/table-rows/table-row-create-mutation.ts index 7624ca09ccd..6dce6c2b5db 100644 --- a/apps/studio/data/table-rows/table-row-create-mutation.ts +++ b/apps/studio/data/table-rows/table-row-create-mutation.ts @@ -3,15 +3,15 @@ import { toast } from 'sonner' import { Query } from 'components/grid/query/Query' import { executeSql } from 'data/sql/execute-sql-query' -import { sqlKeys } from 'data/sql/keys' import { ImpersonationRole, wrapWithRoleImpersonation } from 'lib/role-impersonation' import { isRoleImpersonationEnabled } from 'state/role-impersonation-state' import type { ResponseError } from 'types' +import { tableRowKeys } from './keys' export type TableRowCreateVariables = { projectRef: string connectionString?: string - table: { name: string; schema?: string } + table: { id: number; name: string; schema?: string } payload: any enumArrayColumns: string[] returning?: boolean @@ -74,7 +74,7 @@ export const useTableRowCreateMutation = ({ { async onSuccess(data, variables, context) { const { projectRef, table } = variables - await queryClient.invalidateQueries(sqlKeys.query(projectRef, [table.schema, table.name])) + await queryClient.invalidateQueries(tableRowKeys.tableRowsAndCount(projectRef, table.id)) await onSuccess?.(data, variables, context) }, async onError(data, variables, context) { diff --git a/apps/studio/data/table-rows/table-row-delete-all-mutation.ts b/apps/studio/data/table-rows/table-row-delete-all-mutation.ts index 15a7ad0a6b3..c09c65708aa 100644 --- a/apps/studio/data/table-rows/table-row-delete-all-mutation.ts +++ b/apps/studio/data/table-rows/table-row-delete-all-mutation.ts @@ -4,10 +4,10 @@ import { toast } from 'sonner' import { Query } from 'components/grid/query/Query' import type { Filter, SupaTable } from 'components/grid/types' import { executeSql } from 'data/sql/execute-sql-query' -import { sqlKeys } from 'data/sql/keys' import { ImpersonationRole, wrapWithRoleImpersonation } from 'lib/role-impersonation' import { isRoleImpersonationEnabled } from 'state/role-impersonation-state' import type { ResponseError } from 'types' +import { tableRowKeys } from './keys' import { formatFilterValue } from './utils' export type TableRowDeleteAllVariables = { @@ -76,7 +76,7 @@ export const useTableRowDeleteAllMutation = ({ { async onSuccess(data, variables, context) { const { projectRef, table } = variables - await queryClient.invalidateQueries(sqlKeys.query(projectRef, [table.schema, table.name])) + await queryClient.invalidateQueries(tableRowKeys.tableRowsAndCount(projectRef, table.id)) await onSuccess?.(data, variables, context) }, async onError(data, variables, context) { diff --git a/apps/studio/data/table-rows/table-row-delete-mutation.tsx b/apps/studio/data/table-rows/table-row-delete-mutation.tsx index afb9cbfec88..f79dfc45f38 100644 --- a/apps/studio/data/table-rows/table-row-delete-mutation.tsx +++ b/apps/studio/data/table-rows/table-row-delete-mutation.tsx @@ -6,11 +6,11 @@ import type { SupaRow } from 'components/grid/types' import { Markdown } from 'components/interfaces/Markdown' import { DocsButton } from 'components/ui/DocsButton' import { executeSql } from 'data/sql/execute-sql-query' -import { sqlKeys } from 'data/sql/keys' import { Entity } from 'data/table-editor/table-editor-types' import { ImpersonationRole, wrapWithRoleImpersonation } from 'lib/role-impersonation' import { isRoleImpersonationEnabled } from 'state/role-impersonation-state' import type { ResponseError } from 'types' +import { tableRowKeys } from './keys' import { getPrimaryKeys } from './utils' export type TableRowDeleteVariables = { @@ -76,7 +76,7 @@ export const useTableRowDeleteMutation = ({ { async onSuccess(data, variables, context) { const { projectRef, table } = variables - await queryClient.invalidateQueries(sqlKeys.query(projectRef, [table.schema, table.name])) + await queryClient.invalidateQueries(tableRowKeys.tableRowsAndCount(projectRef, table.id)) await onSuccess?.(data, variables, context) }, async onError(data, variables, context) { diff --git a/apps/studio/data/table-rows/table-row-truncate-mutation.ts b/apps/studio/data/table-rows/table-row-truncate-mutation.ts index 051b5d216ce..f00ddc1153a 100644 --- a/apps/studio/data/table-rows/table-row-truncate-mutation.ts +++ b/apps/studio/data/table-rows/table-row-truncate-mutation.ts @@ -3,13 +3,13 @@ import { toast } from 'sonner' import { Query } from 'components/grid/query/Query' import { executeSql } from 'data/sql/execute-sql-query' -import { sqlKeys } from 'data/sql/keys' import type { ResponseError } from 'types' +import { tableRowKeys } from './keys' export type TableRowTruncateVariables = { projectRef: string connectionString?: string - table: { name: string; schema?: string } + table: { id: number; name: string; schema?: string } } export function getTableRowTruncateSql({ table }: Pick) { @@ -51,7 +51,7 @@ export const useTableRowTruncateMutation = ({ { async onSuccess(data, variables, context) { const { projectRef, table } = variables - await queryClient.invalidateQueries(sqlKeys.query(projectRef, [table.schema, table.name])) + await queryClient.invalidateQueries(tableRowKeys.tableRowsAndCount(projectRef, table.id)) await onSuccess?.(data, variables, context) }, async onError(data, variables, context) { diff --git a/apps/studio/data/table-rows/table-row-update-mutation.ts b/apps/studio/data/table-rows/table-row-update-mutation.ts index 5c5d49783c1..e5c4470cdd5 100644 --- a/apps/studio/data/table-rows/table-row-update-mutation.ts +++ b/apps/studio/data/table-rows/table-row-update-mutation.ts @@ -3,15 +3,15 @@ import { toast } from 'sonner' import { Query } from 'components/grid/query/Query' import { executeSql } from 'data/sql/execute-sql-query' -import { sqlKeys } from 'data/sql/keys' import { ImpersonationRole, wrapWithRoleImpersonation } from 'lib/role-impersonation' import { isRoleImpersonationEnabled } from 'state/role-impersonation-state' import type { ResponseError } from 'types' +import { tableRowKeys } from './keys' export type TableRowUpdateVariables = { projectRef: string connectionString?: string - table: { name: string; schema?: string } + table: { id: number; name: string; schema?: string } configuration: { identifiers: any } payload: any enumArrayColumns: string[] @@ -59,6 +59,7 @@ export async function updateTableRow({ connectionString, sql, isRoleImpersonationEnabled: isRoleImpersonationEnabled(impersonatedRole), + queryKey: ['table-row-update', table.id], }) return result @@ -81,7 +82,9 @@ export const useTableRowUpdateMutation = ({ { async onSuccess(data, variables, context) { const { projectRef, table } = variables - await queryClient.invalidateQueries(sqlKeys.query(projectRef, [table.schema, table.name])) + await queryClient.invalidateQueries( + tableRowKeys.tableRows(projectRef, { table: { id: table.id } }) + ) await onSuccess?.(data, variables, context) }, async onError(data, variables, context) { diff --git a/apps/studio/data/table-rows/table-rows-count-query.ts b/apps/studio/data/table-rows/table-rows-count-query.ts index 36d14f5d58a..39b9de14901 100644 --- a/apps/studio/data/table-rows/table-rows-count-query.ts +++ b/apps/studio/data/table-rows/table-rows-count-query.ts @@ -1,20 +1,22 @@ -import type { QueryKey, UseQueryOptions } from '@tanstack/react-query' +import { QueryClient, useQuery, useQueryClient, type UseQueryOptions } from '@tanstack/react-query' import { Query } from 'components/grid/query/Query' +import { parseSupaTable } from 'components/grid/SupabaseGrid.utils' import type { Filter, SupaTable } from 'components/grid/types' +import { prefetchTableEditor } from 'data/table-editor/table-editor-query' import { ImpersonationRole, wrapWithRoleImpersonation } from 'lib/role-impersonation' -import { useIsRoleImpersonationEnabled } from 'state/role-impersonation-state' -import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from '../sql/execute-sql-query' +import { isRoleImpersonationEnabled } from 'state/role-impersonation-state' +import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query' +import { tableRowKeys } from './keys' import { formatFilterValue } from './utils' type GetTableRowsCountArgs = { table?: SupaTable filters?: Filter[] enforceExactCount?: boolean - impersonatedRole?: ImpersonationRole } export const THRESHOLD_COUNT = 50000 -const COUNT_ESTIMATE_SQL = ` +const COUNT_ESTIMATE_SQL = /* SQL */ ` CREATE OR REPLACE FUNCTION pg_temp.count_estimate( query text ) RETURNS integer LANGUAGE plpgsql AS $$ @@ -27,7 +29,7 @@ END; $$; `.trim() -export const getTableRowsCountSqlQuery = ({ +export const getTableRowsCountSql = ({ table, filters = [], enforceExactCount = false, @@ -92,56 +94,78 @@ export type TableRowsCount = { is_estimate?: boolean } -export type TableRowsCountVariables = GetTableRowsCountArgs & { +export type TableRowsCountVariables = Omit & { + queryClient: QueryClient + tableId?: number + impersonatedRole?: ImpersonationRole projectRef?: string connectionString?: string - queryKey?: QueryKey } export type TableRowsCountData = TableRowsCount export type TableRowsCountError = ExecuteSqlError -export const useTableRowsCountQuery = ( +export async function getTableRowsCount( { + queryClient, projectRef, connectionString, - queryKey, - table, - enforceExactCount, + tableId, + filters, impersonatedRole, - ...args + enforceExactCount, }: TableRowsCountVariables, - options: UseQueryOptions = {} -) => { - const isRoleImpersonationEnabled = useIsRoleImpersonationEnabled() + signal?: AbortSignal +) { + const entity = await prefetchTableEditor(queryClient, { + projectRef, + connectionString, + id: tableId, + }) + if (!entity) { + throw new Error('Table not found') + } - return useExecuteSqlQuery( + const table = parseSupaTable(entity) + + const sql = wrapWithRoleImpersonation( + getTableRowsCountSql({ table, filters, enforceExactCount }), + { + projectRef: projectRef ?? 'ref', + role: impersonatedRole, + } + ) + const { result } = await executeSql( { projectRef, connectionString, - sql: wrapWithRoleImpersonation( - getTableRowsCountSqlQuery({ table, enforceExactCount, ...args }), - { projectRef: projectRef ?? 'ref', role: impersonatedRole } - ), - queryKey: [ - ...(queryKey ?? []), - { - table: { name: table?.name, schema: table?.schema }, - enforceExactCount, - impersonatedRole, - ...args, - }, - ], - isRoleImpersonationEnabled, + sql, + queryKey: ['table-rows-count', table.id], + isRoleImpersonationEnabled: isRoleImpersonationEnabled(impersonatedRole), }, + signal + ) + + return { + count: result[0].count, + is_estimate: result[0].is_estimate ?? false, + } as TableRowsCount +} + +export const useTableRowsCountQuery = ( + { projectRef, connectionString, tableId, ...args }: Omit, + { + enabled = true, + ...options + }: UseQueryOptions = {} +) => { + const queryClient = useQueryClient() + return useQuery( + tableRowKeys.tableRowsCount(projectRef, { table: { id: tableId }, ...args }), + ({ signal }) => + getTableRowsCount({ queryClient, projectRef, connectionString, tableId, ...args }, signal), { - select(data) { - return { - count: data.result[0].count, - is_estimate: data.result[0].is_estimate ?? false, - } as TData - }, - enabled: typeof projectRef !== 'undefined' && typeof table !== 'undefined', + enabled: enabled && typeof projectRef !== 'undefined' && typeof tableId !== 'undefined', ...options, } ) diff --git a/apps/studio/data/table-rows/table-rows-query.ts b/apps/studio/data/table-rows/table-rows-query.ts index 39ecb7dce9a..f1a6aca4db0 100644 --- a/apps/studio/data/table-rows/table-rows-query.ts +++ b/apps/studio/data/table-rows/table-rows-query.ts @@ -1,34 +1,33 @@ -import type { QueryClient, QueryKey, UseQueryOptions } from '@tanstack/react-query' +import { + useQuery, + useQueryClient, + type QueryClient, + type UseQueryOptions, +} from '@tanstack/react-query' import { IS_PLATFORM } from 'common' import { Query } from 'components/grid/query/Query' +import { parseSupaTable } from 'components/grid/SupabaseGrid.utils' import { Filter, Sort, SupaRow, SupaTable } from 'components/grid/types' import { JSON_TYPES, TEXT_TYPES, } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants' -import { sqlKeys } from 'data/sql/keys' +import { prefetchTableEditor } from 'data/table-editor/table-editor-query' import { KB } from 'lib/constants' import { ImpersonationRole, ROLE_IMPERSONATION_NO_RESULTS, wrapWithRoleImpersonation, } from 'lib/role-impersonation' -import { - isRoleImpersonationEnabled, - useIsRoleImpersonationEnabled, -} from 'state/role-impersonation-state' -import { - ExecuteSqlData, - ExecuteSqlError, - executeSql, - useExecuteSqlQuery, -} from '../sql/execute-sql-query' +import { isRoleImpersonationEnabled } from 'state/role-impersonation-state' +import { ExecuteSqlError, executeSql } from '../sql/execute-sql-query' import { getPagination } from '../utils/pagination' +import { tableRowKeys } from './keys' import { THRESHOLD_COUNT } from './table-rows-count-query' import { formatFilterValue } from './utils' -type GetTableRowsArgs = { +export interface GetTableRowsArgs { table?: SupaTable filters?: Filter[] sorts?: Sort[] @@ -135,7 +134,7 @@ export const fetchAllTableRows = async ({ return rows.filter((row) => row[ROLE_IMPERSONATION_NO_RESULTS] !== 1) } -export const getTableRowsSqlQuery = ({ +export const getTableRowsSql = ({ table, filters = [], sorts = [], @@ -199,58 +198,79 @@ export const getTableRowsSqlQuery = ({ export type TableRows = { rows: SupaRow[] } -export type TableRowsVariables = GetTableRowsArgs & { +export type TableRowsVariables = Omit & { + queryClient: QueryClient projectRef?: string connectionString?: string - queryKey?: QueryKey + tableId?: number } export type TableRowsData = TableRows export type TableRowsError = ExecuteSqlError -function getTableRowsQueryKey({ queryKey, table, impersonatedRole, ...args }: TableRowsVariables) { - return [ - ...(queryKey ?? []), +export async function getTableRows( + { + queryClient, + projectRef, + connectionString, + tableId, + impersonatedRole, + filters, + sorts, + limit, + page, + }: TableRowsVariables, + signal?: AbortSignal +) { + const entity = await prefetchTableEditor(queryClient, { + projectRef, + connectionString, + id: tableId, + }) + if (!entity) { + throw new Error('Table not found') + } + + const table = parseSupaTable(entity) + + const sql = wrapWithRoleImpersonation( + getTableRowsSql({ table, filters, sorts, limit, page, impersonatedRole }), { - table: { - name: table?.name, - schema: table?.schema, - columns: table?.columns.map((c) => c.name), - }, - impersonatedRole, - ...args, - }, - ] -} - -export const useTableRowsQuery = ( - { projectRef, connectionString, queryKey, table, impersonatedRole, ...args }: TableRowsVariables, - options: UseQueryOptions = {} -) => { - const isRoleImpersonationEnabled = useIsRoleImpersonationEnabled() - - return useExecuteSqlQuery( + projectRef: projectRef ?? 'ref', + role: impersonatedRole, + } + ) + const { result } = await executeSql( { projectRef, connectionString, - sql: wrapWithRoleImpersonation(getTableRowsSqlQuery({ table, ...args }), { - projectRef: projectRef ?? 'ref', - role: impersonatedRole, - }), - queryKey: getTableRowsQueryKey({ queryKey, table, impersonatedRole, ...args }), - isRoleImpersonationEnabled, + sql, + queryKey: ['table-rows', table?.id], + isRoleImpersonationEnabled: isRoleImpersonationEnabled(impersonatedRole), }, - { - select(data: { result: Record[] }) { - const rows = data.result.map((x, index) => { - return { idx: index, ...x } as SupaRow - }) + signal + ) - return { - rows, - } as TData - }, - enabled: typeof projectRef !== 'undefined' && typeof table !== 'undefined', + const rows = result.map((x: any, index: number) => { + return { idx: index, ...x } + }) as SupaRow[] + + return { + rows, + } +} + +export const useTableRowsQuery = ( + { projectRef, connectionString, tableId, ...args }: Omit, + { enabled = true, ...options }: UseQueryOptions = {} +) => { + const queryClient = useQueryClient() + return useQuery( + tableRowKeys.tableRows(projectRef, { table: { id: tableId }, ...args }), + ({ signal }) => + getTableRows({ queryClient, projectRef, connectionString, tableId, ...args }, signal), + { + enabled: enabled && typeof projectRef !== 'undefined' && typeof tableId !== 'undefined', ...options, } ) @@ -258,23 +278,17 @@ export const useTableRowsQuery = ( export function prefetchTableRows( client: QueryClient, - { projectRef, connectionString, queryKey, table, impersonatedRole, ...args }: TableRowsVariables + { + projectRef, + connectionString, + tableId, + impersonatedRole, + ...args + }: Omit ) { return client.fetchQuery( - sqlKeys.query(projectRef, getTableRowsQueryKey({ queryKey, table, impersonatedRole, ...args })), + tableRowKeys.tableRows(projectRef, { table: { id: tableId }, ...args }), ({ signal }) => - executeSql( - { - projectRef, - connectionString, - sql: wrapWithRoleImpersonation(getTableRowsSqlQuery({ table, ...args }), { - projectRef: projectRef ?? 'ref', - role: impersonatedRole, - }), - queryKey: getTableRowsQueryKey({ queryKey, table, impersonatedRole, ...args }), - isRoleImpersonationEnabled: isRoleImpersonationEnabled(impersonatedRole), - }, - signal - ) + getTableRows({ queryClient: client, projectRef, connectionString, tableId, ...args }, signal) ) } diff --git a/apps/studio/pages/api/auth/[ref]/users.ts b/apps/studio/pages/api/auth/[ref]/users.ts index 5acfcfd044c..0fbcf299d36 100644 --- a/apps/studio/pages/api/auth/[ref]/users.ts +++ b/apps/studio/pages/api/auth/[ref]/users.ts @@ -1,5 +1,6 @@ import { NextApiRequest, NextApiResponse } from 'next' import SqlString from 'sqlstring' +import { createClient } from '@supabase/supabase-js' import { post } from 'lib/common/fetch' import { tryParseInt } from 'lib/helpers' @@ -7,6 +8,8 @@ import { PG_META_URL } from 'lib/constants' import apiWrapper from 'lib/api/apiWrapper' import { constructHeaders } from 'lib/api/apiHelpers' +const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_KEY!) + export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler) async function handler(req: NextApiRequest, res: NextApiResponse) { @@ -15,10 +18,12 @@ async function handler(req: NextApiRequest, res: NextApiResponse) { switch (method) { case 'GET': return handleGetAll(req, res) + case 'POST': + return handlePost(req, res) case 'DELETE': return handleDelete(req, res) default: - res.setHeader('Allow', ['GET', 'DELETE']) + res.setHeader('Allow', ['GET', 'POST', 'DELETE']) res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } }) } } @@ -110,18 +115,18 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => { return res.status(200).json({ total, users: getUsers }) } -const handleDelete = async (req: NextApiRequest, res: NextApiResponse) => { - const headers = constructHeaders(req.headers) +const handlePost = async (req: NextApiRequest, res: NextApiResponse) => { + const { email, password, email_confirm } = req.body + const { data, error } = await supabase.auth.admin.createUser({ email, password, email_confirm }) - const payload = req.body - const query = { query: `DELETE from auth.users where id='${payload.id}';` } + if (error) return res.status(400).json({ error: { message: error.message } }) + return res.status(200).json(data.user) +} - const response = await post(`${PG_META_URL}/query`, query, { headers }) +const handleDelete = async (req: NextApiRequest, res: NextApiResponse) => { + const { id } = req.body + const { data, error } = await supabase.auth.admin.deleteUser(id) - if (response.error) { - console.error('Delete Users POST:', response.error) - return res.status(400).json({ error: response.error }) - } - - return res.status(200).json(response) + if (error) return res.status(400).json({ error: { message: error.message } }) + return res.status(200).json(data.user) } diff --git a/apps/studio/pages/api/auth/[ref]/users/[id]/index.ts b/apps/studio/pages/api/auth/[ref]/users/[id]/index.ts new file mode 100644 index 00000000000..531cf3ba6f7 --- /dev/null +++ b/apps/studio/pages/api/auth/[ref]/users/[id]/index.ts @@ -0,0 +1,29 @@ +import { createClient } from '@supabase/supabase-js' +import { NextApiRequest, NextApiResponse } from 'next' + +import apiWrapper from 'lib/api/apiWrapper' + +const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_KEY!) + +export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler) + +async function handler(req: NextApiRequest, res: NextApiResponse) { + const { method } = req + + switch (method) { + case 'PATCH': + return handlePatch(req, res) + default: + res.setHeader('Allow', ['PATCH']) + res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } }) + } +} + +const handlePatch = async (req: NextApiRequest, res: NextApiResponse) => { + const { id } = req.query + const { ban_duration } = req.body + const { data, error } = await supabase.auth.admin.updateUserById(id as string, { ban_duration }) + + if (error) return res.status(400).json({ error: { message: error.message } }) + return res.status(200).json(data.user) +} diff --git a/apps/studio/pages/project/[ref]/integrations/queues/[name].tsx b/apps/studio/pages/project/[ref]/integrations/queues/[name].tsx index 0acaa3f36ca..1ed8a0dfd97 100644 --- a/apps/studio/pages/project/[ref]/integrations/queues/[name].tsx +++ b/apps/studio/pages/project/[ref]/integrations/queues/[name].tsx @@ -1,16 +1,29 @@ +import { Paintbrush, Trash2 } from 'lucide-react' +import Link from 'next/link' import { useMemo, useState } from 'react' import { useParams } from 'common' import DeleteQueue from 'components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue' +import PurgeQueue from 'components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue' import { QUEUE_MESSAGE_TYPE } from 'components/interfaces/Integrations/Queues/SingleQueue/Queue.utils' import { QueueMessagesDataGrid } from 'components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid' import { QueueFilters } from 'components/interfaces/Integrations/Queues/SingleQueue/QueueFilters' +import { SendMessageModal } from 'components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal' import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' -import { FormHeader } from 'components/ui/Forms/FormHeader' import { useQueueMessagesInfiniteQuery } from 'data/database-queues/database-queue-messages-infinite-query' import type { NextPageWithLayout } from 'types' -import { Button, LoadingLine } from 'ui' +import { + Breadcrumb_Shadcn_, + BreadcrumbItem_Shadcn_, + BreadcrumbLink_Shadcn_, + BreadcrumbList_Shadcn_, + BreadcrumbPage_Shadcn_, + BreadcrumbSeparator_Shadcn_, + Button, + LoadingLine, + Separator, +} from 'ui' const QueueMessagesPage: NextPageWithLayout = () => { // TODO: Change this to the correct permissions @@ -23,6 +36,8 @@ const QueueMessagesPage: NextPageWithLayout = () => { const { name: queueName } = useParams() const { project } = useProjectContext() + const [sendMessageModalShown, setSendMessageModalShown] = useState(false) + const [purgeQueueModalShown, setPurgeQueueModalShown] = useState(false) const [deleteQueueModalShown, setDeleteQueueModalShown] = useState(false) const [selectedTypes, setSelectedTypes] = useState([]) @@ -38,34 +53,72 @@ const QueueMessagesPage: NextPageWithLayout = () => { ) const messages = useMemo(() => data?.pages.flatMap((p) => p), [data?.pages]) - if (isLoading && isError) { + if (isError) { return null } return (
- setDeleteQueueModalShown(true)}> - Delete the queue +
+
+ + + + + Queues + + + + + {queueName} + + + +
+
+ - } - /> + + {/* } */} +
+
setSendMessageModalShown(true)} fetchNextPage={fetchNextPage} /> + setSendMessageModalShown(false)} + /> setDeleteQueueModalShown(false)} /> + setPurgeQueueModalShown(false)} + />
) } diff --git a/apps/www/_blog/2024-11-13-supabase-dynamic-functions.mdx b/apps/www/_blog/2024-11-13-supabase-dynamic-functions.mdx new file mode 100644 index 00000000000..71b5e7448a1 --- /dev/null +++ b/apps/www/_blog/2024-11-13-supabase-dynamic-functions.mdx @@ -0,0 +1,473 @@ +--- +title: 'Executing Dynamic JavaScript Code on Supabase with Edge Functions' +description: 'Learn how to execute dynamic JavaScript code on Supabase using Edge Functions.' +author: rodrigo_mansueli +image: 2024-11-13-supabase-dynamic-functions/dynamic-og.png +thumb: 2024-11-13-supabase-dynamic-functions/dynamic-og.png +categories: + - engineering +tags: + - edge-funcion + - funcions + - AI +date: '2024-11-13' +toc_depth: 3 +--- + +We're always looking for ways to improve the developer experience and reduce complexity across your application development pipeline. One way you can use Supabase to do that is with dynamic JavaScript in Edge Functions. This greatly increases the versatility of your edge functions and reduces the need for you to redeploy your functions if you need to change business logic. + +### Introduction to Edge Functions + +Edge Functions in Supabase are serverless functions that execute in response to HTTP requests. These functions are deployed at the edge, meaning they run close to the user's location, resulting in faster response times. + +### Why Use Dynamic Code Execution? + +Dynamic code execution allows you to modify and run JavaScript code on the fly without having to redeploy your function each time the code changes. This is particularly useful when you need the flexibility to execute different logic depending on the incoming request, without incurring the overhead of redeployment. + +### Prerequisites + +To follow along, you will need: + +- A Supabase project +- Supabase CLI installed on your local machine +- Orb Stack or Docker Desktop installed on your local machine +- Environment variables set up in Vault, ensuring it passes validation in the function (e.g., `service_role`) + +> Edge Functions defaults to the verification of the JWT, so it could be called with the ANON API Key. Make sure to implement proper security measures. + +## Install the SQL script from the repo + +We have a repo with the SQL script to create helper functions to support the dynamic execution of JavaScript code. You can find the repo here: [supa-dynamic](https://github.com/mansueli/supa-dynamic) + +Install the SQL script `supa-dynamic--0.1.sql` from the repo in your Supabase project. (You can copy and paste the code from the repo into the SQL editor in your Supabase project.) +These are the functions we'll use to execute the JavaScript code: + +- `edge.http_request(url text, method text, headers jsonb, params jsonb, payload jsonb, timeout_ms integer) RETURNS jsonb`: Makes an HTTP request with the specified parameters. +- `edge_wrapper(code text) RETURNS text`: Executes the provided JavaScript code. +- `edge.get_secret(secret_name text) RETURNS text`: Retrieves a secret from Vault. + +### Deep Dive into the helper functions (optional) + +You can skip this section if you are only interested in using the dynamic execution of JavaScript code. However, if you want to understand how the helper functions work, keep reading. + +### `edge.http_request` Function + +This function handles the actual HTTP request and processes the response. It ensures consistency in response format. + +```sql +CREATE OR REPLACE FUNCTION edge.http_request( + url TEXT, + method TEXT DEFAULT 'POST', + headers JSONB DEFAULT '{"Content-Type": "application/json"}'::jsonb, + params JSONB DEFAULT '{}'::jsonb, + payload JSONB DEFAULT '{}'::jsonb, + timeout_ms INTEGER DEFAULT 5000 +) RETURNS jsonb AS $$ +DECLARE + http_response extensions.http_response; + status_code integer := 0; + response_json jsonb; + response_text text; + header_array extensions.http_header[]; + request extensions.http_request; +BEGIN + -- Set the timeout option + IF timeout_ms > 0 THEN + PERFORM http_set_curlopt('CURLOPT_TIMEOUT_MS', timeout_ms::text); + END IF; + + -- Convert headers JSONB to http_header array + SELECT array_agg(extensions.http_header(key, value::text)) + FROM jsonb_each_text(headers) + INTO header_array; + + -- Construct the http_request composite type + request := ROW(method, url, header_array, 'application/json', payload::text)::extensions.http_request; + + -- Make the HTTP request + http_response := http(request); + status_code := http_response.status; + + -- Attempt to extract JSONB response content + BEGIN + response_json := http_response.content::jsonb; + EXCEPTION + WHEN others THEN + response_text := http_response.content; + response_json := jsonb_build_object('status_code', status_code, 'response', response_text); + END; + + RETURN jsonb_build_object('status_code', status_code, 'response', response_json); +END; +$$ LANGUAGE plpgsql; + +``` + +### `edge_wrapper` Function + +The `edge_wrapper` function manages HTTP requests with features like retries, custom headers, and region selection. Below are the parameters it accepts: + +- **`url`**: The endpoint to call. +- **`method`**: HTTP method, defaulting to `POST`. +- **`headers`**: Custom headers to include, including region information. +- **`timeout_ms`**: Timeout duration in milliseconds. +- **`max_retries`**: Maximum retry attempts for the request. + +```sql +CREATE OR REPLACE FUNCTION edge.edge_wrapper( + url TEXT, + method TEXT DEFAULT 'POST', + headers JSONB DEFAULT '{"Content-Type": "application/json"}'::jsonb, + params JSONB DEFAULT '{}'::jsonb, + payload JSONB DEFAULT '{}'::jsonb, -- Payload as JSONB + timeout_ms INTEGER DEFAULT 5000, + max_retries INTEGER DEFAULT 0, + allowed_regions TEXT[] DEFAULT NULL +) RETURNS jsonb AS $$ +DECLARE + retry_count INTEGER := 0; + retry_delays DOUBLE PRECISION[] := ARRAY[0, 0.250, 0.500, 1.000, 2.500, 5.000]; + succeeded BOOLEAN := FALSE; + current_region_index INTEGER := 1; -- Start index at 1 for PostgreSQL array + combined_headers JSONB; + response_json JSONB; +BEGIN + -- Validate headers, params, and payload are JSON objects + IF headers IS NULL OR NOT jsonb_typeof(headers) = 'object' THEN + RAISE EXCEPTION 'Invalid headers parameter: %', headers; + END IF; + + IF params IS NULL OR NOT jsonb_typeof(params) = 'object' THEN + RAISE EXCEPTION 'Invalid params parameter: %', params; + END IF; + + IF payload IS NULL OR NOT jsonb_typeof(payload) = 'object' THEN + RAISE EXCEPTION 'Invalid payload parameter: %', payload; + END IF; + + -- Validate allowed_regions if provided + IF allowed_regions IS NOT NULL AND cardinality(allowed_regions) = 0 THEN + RAISE EXCEPTION 'allowed_regions parameter cannot be an empty array'; + END IF; + + -- Check if retry_delays has enough elements + IF cardinality(retry_delays) < max_retries + 1 THEN + RAISE EXCEPTION 'retry_delays array must have at least % elements', max_retries + 1; + END IF; + + -- Retry loop + WHILE NOT succeeded AND retry_count <= max_retries LOOP + combined_headers := headers; + + -- Set x-region header if allowed_regions is provided + IF allowed_regions IS NOT NULL AND cardinality(allowed_regions) > 0 THEN + combined_headers := combined_headers || jsonb_build_object('x-region', allowed_regions[current_region_index]); + END IF; + + -- Sleep if not the first attempt + IF retry_count > 0 THEN + PERFORM pg_sleep(retry_delays[retry_count]); + END IF; + + retry_count := retry_count + 1; + + -- Increment region index, wrapping around if necessary + IF allowed_regions IS NOT NULL AND cardinality(allowed_regions) > 0 THEN + current_region_index := current_region_index + 1; + IF current_region_index > cardinality(allowed_regions) THEN + current_region_index := 1; + END IF; + END IF; + + BEGIN + RAISE WARNING 'headers:%s', combined_headers; + + -- Call the simplified HTTP request function + response_json := edge.http_request(url, method, combined_headers, params, payload, timeout_ms); + + -- Check the status code + IF (response_json->>'status_code')::INTEGER < 500 THEN + succeeded := TRUE; + END IF; + EXCEPTION + WHEN OTHERS THEN + IF retry_count > max_retries THEN + RAISE EXCEPTION 'HTTP request failed after % retries. SQL Error: { %, % }', + max_retries, SQLERRM, SQLSTATE; + END IF; + END; + END LOOP; + + RETURN response_json; +END; +$$ LANGUAGE plpgsql; + +``` + +To securely manage secrets, you will need to set your `service_role_key` in Vault. Here’s how you can create a function to retrieve secrets: + +```sql +CREATE OR REPLACE FUNCTION edge.get_secret(secret_name text) RETURNS text + LANGUAGE "plpgsql" + AS $$ +DECLARE + decrypted text; +BEGIN + IF current_setting('request.jwt.claims', true)::jsonb->>'role' = 'service_role' OR current_user = 'postgres' THEN + SELECT decrypted_secret + INTO decrypted + FROM vault.decrypted_secrets + WHERE name = secret_name; + RETURN decrypted; + ELSE + RAISE EXCEPTION 'Access denied: only service_role or postgres user can execute this function.'; + END IF; +END; +$$; +``` + +This function can retrieve the `service_role` secret from [Vault](https://supabase.com/dashboard/project/_/settings/vault/secrets), it also ensures that only authorized roles can access sensitive environment variables. + +## Setting Up the Edge Function + +Let's dive into the code and set up our dynamic JavaScript executor Edge Function using Deno. Below is an overview of how to accomplish this. + +### Code Walkthrough + +We'll create a function named `multi-purpose`: + +```jsx +supabase functions new multi-purpose +``` + +Now, we'll edit the code adding verification and the eval function, including the supabase client so we have it ready without the need to import. + +```tsx +import "jsr:@supabase/functions-js/edge-runtime.d.ts"; + +// Import the supabase client +import { createClient } from ""; + +console.log("===\\n\\tBooted Edge Worker!\\n===\\n"); +const supabase_url = Deno.env.get("SUPABASE_URL") ?? ""; +const service_role = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY"); +// Set the permission to service_role key: +const supabase = createClient(supabase_url, service_role); +// This allows us to use Supabase.ai in the function +const session = new Supabase.ai.Session('gte-small'); + +Deno.serve(async (req: Request) => + const authorization = req.headers.get("Authorization"); + if (!authorization) throw new Error("Authorization header is missing."); + // Ensures that the function is called with service_role to prevent missuse + if (!authorization.includes(service_role)) { + throw new Error("Authorization header is invalid."); + } + + const { code } = await req.json(); + try { + // Wrap the provided code in an async function context + const asyncFunction = new Function('supabase', ` + return (async () => { + ${code.replace(/\\\\/g, '')} + })(); + `); + // Pass the Supabase client as the scope for the function to use: + const data = await asyncFunction(supabase); + console.log(data); + return new Response( + JSON.stringify({ data }), + { headers: { 'Content-Type': 'application/json', 'Connection': 'keep-alive' } }, + ); + } catch (error) { + console.error("Error executing user code:", error); + return new Response( + JSON.stringify({ error: "An error occurred -> " + error.message }), + { status: 500, headers: { "Content-Type": "application/json" } } + ); + } +}); + +``` + +> Note: If you need more details, check the full guide to [create an edge function](https://supabase.com/docs/guides/functions/quickstart#create-an-edge-function). + +### Step-by-Step Walkthrough + +1. **Validate Authorization**: First, we ensure the request contains a valid authorization header. (this prevents calls from anon users) + +```jsx +const authorization = req.headers.get('Authorization') +if (!authorization) throw new Error('Authorization header is missing.') +// Ensures that the function is called with service_role to prevent missuse +if (!authorization.includes(service_role)) { + throw new Error('Authorization header is invalid.') +} +``` + +1. **Receive JavaScript Code Payload**: Extract the `code` from the request body. + +```jsx +const { code } = await req.json() +``` + +1. **Wrap Code in Async Context**: Use `new Function()` to create an async function that executes the incoming JavaScript code. This allows async calls in the code to be executed: + +```jsx +try { + // Wrap the provided code in an async function context + const asyncFunction = new Function('supabase', ` + return (async () => { + ${code.replace(/\\\\/g, '')} + })(); + `); +} +``` + +1. **Execute and Return Results**: Run the JavaScript code, which can interact with Supabase via the provided client, and return the results. + +```jsx +// Pass the Supabase client as the scope for the function to use: +const data = await asyncFunction(supabase) +console.log(data) +return new Response(JSON.stringify({ data }), { + headers: { 'Content-Type': 'application/json', Connection: 'keep-alive' }, +}) +``` + +### Deploying the Edge Function + +To deploy this Edge Function, you'll need to use the Supabase CLI. Ensure you have Docker installed and running on your local machine. Follow these steps to deploy: + +1. **Install the Supabase CLI**: If you haven't already, install the Supabase CLI by following the instructions in the [Supabase CLI Documentation](https://supabase.com/docs/guides/cli). +2. **Log In to Supabase**: Use the command `supabase login` to authenticate your account. +3. **Deploy the Function**: Run the command `supabase functions deploy ` to deploy your Edge Function. Replace `` with the desired name for your function. + +### Setting Environment Variables in Vault + +## Creating the main function to interact with the edge function + +We are using the helper functions defined earlier to create a function that interacts with the edge function. This function will execute the dynamic JavaScript code and return the results. +This is the main function that will be used to execute the dynamic JavaScript code and return the results. + +### `edge.exec` Function + +The `edge.exec` is a simple function leverages `edge_wrapper` to execute dynamic JavaScript code. Here's an example of how it is structured: + +```sql +CREATE OR REPLACE FUNCTION edge.exec(data text) RETURNS JSONB LANGUAGE plpgsql +AS $function$ +DECLARE + custom_headers JSONB; +-- Example restricting regions available to Europe + allowed_regions TEXT[] := ARRAY['eu-west-1', 'eu-west-2', 'eu-west-3', 'eu-north-1', 'eu-central-1']; +BEGIN + -- Set headers with anon key and Content-Type + custom_headers := jsonb_build_object( + 'Authorization', 'Bearer ' || edge.get_secret('service_role_key'), + 'Content-Type', 'application/json', + 'x-region', allowed_regions + ); + -- Call edge_wrapper function with default values + RETURN edge.edge_wrapper( + url := ('https://.supabase.co/functions/v1/multi-purpose'), + headers := custom_headers, + payload := jsonb_build_object('code', data), + max_retries := 5, + allowed_regions := allowed_regions + ); +END; +$function$; + +``` + +### Executing Dynamic JavaScript Code + +The key to executing the dynamic JavaScript code is wrapping it in an `async` function context using `new Function()`. This approach lets you evaluate the code in isolation while retaining access to the `supabase` client for interacting with your database. You can check the examples of how to use this calling the [supabase client](https://www.notion.so/Executing-Dynamic-JavaScript-Code-on-Supabase-with-Edge-Functions-1125004b775f80ca97d4c367a2cfcd7d?pvs=21) or even [generating embeddings](https://www.notion.so/Executing-Dynamic-JavaScript-Code-on-Supabase-with-Edge-Functions-1125004b775f80ca97d4c367a2cfcd7d?pvs=21). + +### Example of Using Supabase Client Libraries + +To demonstrate the execution of dynamic JavaScript, you can use the Supabase client libraries within the SQL context. Here’s an example query: + +```sql +SELECT edge.exec( + $js$ + const { data, error } = await supabase.rpc('postgres_function', {'foo': 'bar'}); + if (error) { + return new Response(JSON.stringify({ error: "An error occurred ->" + error.message }), { + status: 500, + headers: { "Content-Type": "application/json" }, + }); + } + return data; + $js$ +); + +``` + +## Using the Edge Function in Practice + +### Example: Generating Embeddings + +The `edge.exec` function allows for dynamic JavaScript execution, such as interacting with an AI session to generate embeddings. When executed, the JavaScript code within the SQL context runs through the edge function, returning results to the database. + +```sql +select edge.exec( +$js$ + +const session = new Supabase.ai.Session('gte-small'); +return await session.run('hello world'); + +$js$); +``` + +You can also create a Postgres function to generate embeddings: + +``` +CREATE OR REPLACE FUNCTION edge.generate_embedding(input_text TEXT) RETURNS JSONB AS $$ +DECLARE + response JSONB; +BEGIN + -- Call the edge function to generate the embedding for the provided text + response := edge.exec( + format( + $js$ + const session = new Supabase.ai.Session('gte-small'); + return await session.run(%L); + $js$, + input_text + ) + ); + RETURN response->'response'->'data'; +END; +$$ LANGUAGE plpgsql; + + select edge.generate_embedding('The quick brown fox jumps over the lazy dog'); + +-- response: +-- [-0.07254139333963394,-0.02173878252506256,0.042930446565151215,0.04853367060422897,0.015609614551067352,0.02912059798836708,0.0371023565530777,0.05054798722267151,0.0035842431243509054,0.0015563230263069272,0.0009484672918915749,-0.09247169643640518,0.04190639406442642,0.05874202027916908,-0.012341015040874481,0.01661474071443081,-0.013452880084514618,0.003742767730727792,-0.07664268463850021,0.03231268376111984,0.0006968052475713193,-0.06508929282426834,-0.04956015944480896,-0.014327225275337696,0.03270547464489937,0.01635774038732052,-0.022707758471369743,-0.007586371619254351,-0.03548099845647812,-0.17844657599925995,0.03325255215167999,-0.07009242475032806,0.02982083335518837,-0.05649203434586525,-0.006693259347230196,-0.02781110256910324,-0.01687553897500038,0.04976152256131172,-0.015715090557932854,0.038247860968112946,0.040495794266462326,-0.007263457402586937,-0.019288228824734688,-0.0527581050992012,-0.0065462407656013966,-0.022786622866988182,-0.04975651577115059,-0.04053974151611328,0.03047902137041092,-0.05064946785569191,-0.023929744958877563,-0.03891737014055252,0.03785012289881706,-0.0133274607360363,0.03001898154616356,-0.007281183265149593,0.060004156082868576,0.017414024099707603,0.025516854599118233,0.029599720612168312,0.02893918938934803,0.03455337509512901,-0.14698833227157593,0.09387505799531937,0.05768263339996338,0.019130567088723183,-0.0380706787109375,-0.04105521738529205,0.008963614702224731,0.012743324972689152,0.009223062545061111,0.060711149126291275,0.007398003712296486,0.04229794815182686,0.046996768563985825,-0.003397924592718482,0.00808036606758833,0.022617157548666,-0.01847437582910061,0.0026343590579926968,-0.010598739609122276,-0.037673674523830414,-0.04375630244612694,-0.0007789010996930301,-0.007935777306556702,-0.03272915259003639,0.021433845162391663,-0.07967976480722427,0.06888656318187714,0.07489841431379318,-0.02783842757344246,-0.006374717690050602,-0.035476282238960266,0.006344574969261885,-0.03357071802020073,-0.036727335304021835,0.012309364043176174,-0.00006389369809767231,-0.053050097078084946,0.19709722697734833,-0.05575009435415268,0.05757850036025047,0.0951322615146637,-0.04633559286594391,0.03476420044898987,0.012983368709683418,0.0004390157700981945,0.010212302207946777,-0.012741461396217346,0.014706282876431942,0.03321540355682373,-0.006495281588286161,0.041682176291942596,0.003406582633033395,0.02581774815917015,-0.0007246752502396703,0.011133069172501564,0.08353550732135773,0.006477882619947195,0.00224463758058846,0.020395604893565178,-0.013416256755590439,0.05663946643471718,-0.028388522565364838,0.019082417711615562,-0.08387858420610428,0.054498571902513504,0.10694538056850433,0.06286843866109848,0.03180928900837898,0.037740662693977356,-0.07479764521121979,0.010231229476630688,-0.04866624251008034,0.004061027429997921,0.0362103171646595,-0.009540606290102005,0.00915283989161253,0.031154874712228775,-0.04876647889614105,-0.015956921502947807,-0.1429857611656189,-0.01470054779201746,-0.09399641305208206,-0.019157350063323975,0.02896934375166893,-0.018669532611966133,0.014991801232099533,-0.06764508783817291,0.027312103658914566,-0.003859955817461014,0.025718173012137413,-0.018675100058317184,-0.016409857198596,-0.021459592506289482,0.004702075384557247,-0.0323822982609272,0.10394860059022903,-0.020106177777051926,-0.008876764215528965,-0.027185838669538498,0.0003392586368136108,-0.009877108968794346,-0.0004303457390051335,0.04185814782977104,-0.05188998952507973,-0.021185973659157753,0.00026368125691078603,-0.02180171199142933,-0.03400561958551407,0.020068379119038582,0.034275852143764496,-0.10943055897951126,0.031987469643354416,0.054017845541238785,-0.009243185631930828,-0.07103140652179718,0.00785127654671669,-0.0040434580296278,-0.05036382004618645,0.07858535647392273,-0.08356015384197235,-0.06914680451154709,0.06180981919169426,0.043073058128356934,-0.020246226340532303,-0.015496478416025639,-0.005946696270257235,0.006562687456607819,0.04845070466399193,-0.029123008251190186,0.02194702997803688,0.002446065191179514,-0.06825454533100128,-0.07056894898414612,0.01598423719406128,-0.04185032472014427,-0.01633128523826599,0.014294272288680077,-0.01768324337899685,0.05590462312102318,-0.044063832610845566,0.02461099997162819,0.0006756667862646282,0.07429251074790955,0.011551265604794025,0.014212443493306637,-0.02237367257475853,0.039057254791259766,0.000325449975207448,-0.004185846075415611,-0.003040974261239171,0.01800958439707756,-0.02479490265250206,-0.019247515127062798,0.04366869106888771,-0.027130864560604095,0.018955133855342865,0.03239727392792702,0.03226468712091446,0.06487660109996796,-0.06456360220909119,0.0006639647181145847,-0.20788206160068512,0.05066373199224472,-0.012870946899056435,-0.034873317927122116,0.023824242874979973,-0.02305314689874649,0.030056791380047798,-0.06937119364738464,0.0642433762550354,0.05418730527162552,0.06050065532326698,-0.04655877873301506,-0.026898164302110672,-0.003803820814937353,0.002598312683403492,0.1081414744257927,0.014850604347884655,0.013619652017951012,0.013523285277187824,-0.0016119466163218021,-0.00329813570715487,0.002907108049839735,0.014589778147637844,-0.048919934779405594,0.056754376739263535,-0.03171522915363312,0.2308642566204071,0.08356188982725143,0.05350973457098007,-0.03191335126757622,0.003732810029760003,0.031172126531600952,-0.08899383991956711,-0.09938952326774597,0.08256369829177856,0.08178982138633728,0.07785400003194809,-0.04618730768561363,-0.02995850332081318,-0.022348755970597267,-0.05898110195994377,0.05294518917798996,0.0038859194610267878,-0.0923057422041893,-0.01576364040374756,-0.0035308743827044964,-0.04901731014251709,-0.012596397660672665,-0.036502618342638016,0.00886201299726963,0.059619251638650894,-0.017561428248882294,0.05459151417016983,0.04560315981507301,-0.0019153780303895473,0.009595169685781002,-0.057729125022888184,0.026341130957007408,-0.023892194032669067,0.016832968220114708,-0.026450062170624733,-0.07305766642093658,0.03468620404601097,-0.02054707705974579,0.041034333407878876,0.00404499564319849,-0.017474710941314697,-0.043891143053770065,0.02514275535941124,0.02372695878148079,0.010677577927708626,0.06225359067320824,0.040919024497270584,0.005154050886631012,0.030111495405435562,0.0054080006666481495,0.03592434898018837,0.0001651789789320901,0.017304912209510803,-0.01922907680273056,0.04822206869721413,-0.0688890889286995,0.019858958199620247,-0.0008752745925448835,0.03513675928115845,-0.07729781419038773,0.08145932108163834,-0.0327017717063427,0.03425054997205734,-0.08482713997364044,0.006879036780446768,0.059308722615242004,-0.03618019446730614,-0.056978799402713776,-0.021730659529566765,-0.0007874490693211555,-0.30017349123954773,0.011467894539237022,0.0029629627242684364,-0.00585860526189208,-0.010300826281309128,0.023507587611675262,0.009586751461029053,0.01615791581571102,-0.05407087132334709,-0.0025957857724279165,-0.005770532879978418,0.03627054765820503,0.03723520413041115,0.0002953026269096881,-0.01028500497341156,0.003999052103608847,-0.005846572108566761,0.033623822033405304,-0.0072589460760355,-0.07468357682228088,0.03272583335638046,-0.00448765279725194,0.21248994767665863,-0.057705674320459366,0.044046953320503235,0.03008623979985714,-0.018218697980046272,0.04393533617258072,0.07603447884321213,-0.04150347039103508,0.06695082038640976,-0.010416779667139053,0.08510852605104446,-0.07743050903081894,-0.005964982323348522,0.03540671616792679,-0.036865249276161194,0.058287233114242554,0.005791360046714544,-0.03530560061335564,-0.010620728135108948,0.03216135874390602,0.012065712362527847,-0.05922657623887062,0.08696120232343674,-0.051534030586481094,-0.08612160384654999,-0.04676511138677597,-0.005788259673863649,0.06060168892145157,-0.02552523836493492,-0.02923434041440487,-0.05256013199687004,0.0033684736117720604,0.023232899606227875,0.023369308561086655,-0.02598796784877777,-0.02167469449341297,-0.05872185155749321,-0.0459195151925087,0.008857548236846924,-0.07634632289409637,0.016223475337028503,0.03924580290913582,0.11316763609647751] +``` + +### Example: Creating Users via Admin API + +You can also leverage the admin API to create users: + +```jsx +select edge.exec( +$js$ + +const { data, error } = await supabase.auth.admin.createUser({ + email: 'user@email.com', + password: 'password', + user_metadata: { name: 'Yoda' } +}); + +$js$)); + +``` + +## Conclusion + +As you can see, combining dynamic Javascript in Edge Functions with a few SQL support functions gets you a powerful new set of tools. By leveraging the edge_wrapper, edge.http_request, and `edge.exec` functions, developers can create robust and flexible serverless applications that can dynamically execute JavaScript code while interacting with PostgreSQL databases. + +As we continue to build and innovate with Supabase, combining edge functions and SQL support functions opens up new avenues for building scalable, efficient, and secure applications. Whether developing a simple project or a complex application, these tools provide the flexibility and power to bring your ideas to life. diff --git a/apps/www/_events/2024-11-22-supabase-ai-hackathon-at-y-combinator.mdx b/apps/www/_events/2024-11-22-supabase-ai-hackathon-at-y-combinator.mdx index 8e12fe15aab..bf5781898c7 100644 --- a/apps/www/_events/2024-11-22-supabase-ai-hackathon-at-y-combinator.mdx +++ b/apps/www/_events/2024-11-22-supabase-ai-hackathon-at-y-combinator.mdx @@ -8,13 +8,14 @@ og_image: '/images/events/hackathons/supabase-ai-hackathon-at-y-combinator/yc-ha onDemand: false main_cta: { - url: 'https://forms.supabase.com/yai-hackathon', + url: '', target: '_blank', - label: 'Apply now', - disabled_label: 'Registrations closed', + label: 'Applications closed', + disabled_label: 'Applications closed', + disabled: true, } -date: '2024-11-22T10:00:00.000-07:00' -end_date: '2024-11-23T18:00:00.000-07:00' +date: '2024-11-22T18:00:00.000-08:00' +end_date: '2024-11-23T18:00:00.000-08:00' timezone: 'America/Los_Angeles' duration: '2 days' categories: @@ -29,7 +30,7 @@ We've already seen [several 1M+ user AI applications](https://x.com/kiwicopple/s [Anthropic](https://www.anthropic.com) is also supporting the hackathon and will provide credits to every team. -Because we have limited capacity, we've created [a very short application](https://forms.supabase.com/yai-hackathon). We’ll keep the form open for a few weeks and let you know if you’re in by early November. +**This event is full and invite only.** ### Jury diff --git a/apps/www/app/api-v2/opt-out/[ref]/route.ts b/apps/www/app/api-v2/opt-out/[ref]/route.ts new file mode 100644 index 00000000000..15456e39ba6 --- /dev/null +++ b/apps/www/app/api-v2/opt-out/[ref]/route.ts @@ -0,0 +1,56 @@ +import { NextRequest, NextResponse } from 'next/server' +import { createClient } from '@supabase/supabase-js' + +const supabaseUrl = process.env.NEXT_PUBLIC_EMAIL_ABUSE_URL as string +const supabaseServiceKey = process.env.EMAIL_ABUSE_SERVICE_KEY as string + +export async function POST(req: NextRequest, { params }: { params: { ref: string } }) { + const ref = params.ref + const { reason, email } = await req.json() + + const supabase = createClient(supabaseUrl, supabaseServiceKey) + + if (!ref) { + return NextResponse.json( + { error: 'Bad Request: Missing or invalid project reference.' }, + { status: 400 } + ) + } + + const refPattern = /^[a-zA-Z]{20}$/ + const refIsInvalid = !refPattern.test(ref) + + if (refIsInvalid) { + return NextResponse.json( + { error: 'Bad Request: Missing or invalid project reference.' }, + { status: 400 } + ) + } + + try { + const { error: supabaseError } = await supabase + .from('manual_reports') + .insert([{ project_ref: ref, reason, email }]) + + if (supabaseError) throw new Error(`Supabase error: ${supabaseError.message}`) + + const response = await fetch(process.env.EMAIL_REPORT_SLACK_WEBHOOK as string, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ text: `New report from: ${ref} \n\n ${reason}` }), + }) + + if (!response.ok) throw new Error('Failed to send to Slack') + + return NextResponse.json( + { message: 'Thank you! We have received your report.' }, + { status: 200 } + ) + } catch (error) { + const errorMessage = (error as Error).message + return NextResponse.json( + { error: `Failure: Could not send post to Slack. Error: ${errorMessage}` }, + { status: 500 } + ) + } +} diff --git a/apps/www/pages/careers.tsx b/apps/www/pages/careers.tsx index 9ec0d3327ca..f1631cd88f6 100644 --- a/apps/www/pages/careers.tsx +++ b/apps/www/pages/careers.tsx @@ -119,7 +119,7 @@ const CareerPage: NextPage = ({ jobs, placeholderJob, contribu We're on a mission to build the best developer platform

- Explore remote possibilities and join our team to help us achieve it. + Explore remote opportunities and join our team to help us achieve it.

+ + {formMessage} + + + + + + ) +} diff --git a/apps/www/pages/opt-out/index.tsx b/apps/www/pages/opt-out/index.tsx new file mode 100644 index 00000000000..690ff9449b5 --- /dev/null +++ b/apps/www/pages/opt-out/index.tsx @@ -0,0 +1,15 @@ +import { useEffect } from 'react' +import { useRouter } from 'next/router' + +const OptOutIndex = () => { + const router = useRouter() + + // We don't want anyone landing here directly + useEffect(() => { + router.push('/') + }, [router]) + + return null +} + +export default OptOutIndex diff --git a/apps/www/public/images/blog/2024-11-13-supabase-dynamic-functions/dynamic-og.png b/apps/www/public/images/blog/2024-11-13-supabase-dynamic-functions/dynamic-og.png new file mode 100644 index 00000000000..cfd4b9e92b4 Binary files /dev/null and b/apps/www/public/images/blog/2024-11-13-supabase-dynamic-functions/dynamic-og.png differ diff --git a/examples/edge-functions/supabase/functions/background-upload-storage/index.ts b/examples/edge-functions/supabase/functions/background-upload-storage/index.ts new file mode 100644 index 00000000000..6ab56876341 --- /dev/null +++ b/examples/edge-functions/supabase/functions/background-upload-storage/index.ts @@ -0,0 +1,76 @@ +import { createClient } from 'jsr:@supabase/supabase-js@2.45.6' +import OpenAI from 'https://deno.land/x/openai@v4.68.2/mod.ts' + +const client = new OpenAI({ apiKey: Deno.env.get('OPENAI_API_KEY')! }) + +const supabase = createClient( + Deno.env.get('SUPABASE_URL')!, + Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')! +) + +type StorageFileApi = ReturnType +type StorageUploadPromise = ReturnType + +class MyBackgroundTaskEvent extends Event { + readonly taskPromise: StorageUploadPromise + + constructor(taskPromise: StorageUploadPromise) { + super('myBackgroundTask') + this.taskPromise = taskPromise + } +} + +globalThis.addEventListener('myBackgroundTask', async (event) => { + const { data, error } = await (event as MyBackgroundTaskEvent).taskPromise + console.log({ data, error }) +}) + +Deno.serve(async (req) => { + const url = new URL(req.url) + const params = new URLSearchParams(url.search) + const text = params.get('text') + + if (!text) { + return new Response(JSON.stringify({ error: 'Text parameter is required' }), { + status: 400, + headers: { 'Content-Type': 'application/json' }, + }) + } + + try { + const response = await client.audio.speech.create({ + model: 'tts-1', + voice: 'nova', + input: text, + }) + + const stream = response.body + if (!stream) { + throw new Error('No stream') + } + + // Branch stream to Supabase Storage + const [browserStream, storageStream] = stream.tee() + + // Upload to Supabase Storage + const storageUploadPromise = supabase.storage + .from('videos') + .upload(`audio-stream_${Date.now()}.mp3`, storageStream, { + contentType: 'audio/mp3', + }) + const event = new MyBackgroundTaskEvent(storageUploadPromise) + globalThis.dispatchEvent(event) + + return new Response(browserStream, { + headers: { + 'Content-Type': 'audio/mp3', + }, + }) + } catch (error) { + console.log('error', { error }) + return new Response(JSON.stringify({ error: error.message }), { + status: 500, + headers: { 'Content-Type': 'application/json' }, + }) + } +}) diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js index 9254c114124..d0d5df21861 100644 --- a/packages/config/tailwind.config.js +++ b/packages/config/tailwind.config.js @@ -420,6 +420,9 @@ const uiConfig = ui({ require('@tailwindcss/typography'), require('tailwindcss-animate'), plugin(motionSafeTransition), + function ({ addVariant }) { + addVariant('not-disabled', '&:not(:disabled)') + }, ], }) diff --git a/packages/ui-patterns/InnerSideMenu/index.tsx b/packages/ui-patterns/InnerSideMenu/index.tsx index 89de8af534e..d478cc2ef61 100644 --- a/packages/ui-patterns/InnerSideMenu/index.tsx +++ b/packages/ui-patterns/InnerSideMenu/index.tsx @@ -39,7 +39,13 @@ const InnerSideMenuCollapsible = forwardRef< ElementRef, React.ComponentPropsWithoutRef >(({ ...props }, ref) => { - return + return ( + + ) }) const InnerSideMenuCollapsibleTrigger = forwardRef< @@ -73,10 +79,7 @@ const InnerSideMenuCollapsibleContent = forwardRef< ) }) @@ -220,7 +223,7 @@ const InnerSideBarEmptyPanel = forwardRef< HTMLDivElement, React.ComponentPropsWithoutRef<'div'> & { title: string - description?: string + description?: string | React.ReactNode illustration?: React.ReactNode actions?: React.ReactNode } diff --git a/packages/ui/src/components/shadcn/ui/breadcrumb.tsx b/packages/ui/src/components/shadcn/ui/breadcrumb.tsx index 7bddf8fa745..e76be186190 100644 --- a/packages/ui/src/components/shadcn/ui/breadcrumb.tsx +++ b/packages/ui/src/components/shadcn/ui/breadcrumb.tsx @@ -1,6 +1,6 @@ -import * as React from 'react' -import { ChevronRightIcon } from 'lucide-react' import { Slot } from '@radix-ui/react-slot' +import { ChevronRightIcon } from 'lucide-react' +import * as React from 'react' import { cn } from '../../../lib/utils' const Breadcrumb = React.forwardRef< @@ -64,7 +64,7 @@ const BreadcrumbPage = React.forwardRef ) @@ -108,10 +108,10 @@ BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis' export { Breadcrumb, - BreadcrumbList, + BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, + BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, - BreadcrumbEllipsis, } diff --git a/packages/ui/src/components/shadcn/ui/select.tsx b/packages/ui/src/components/shadcn/ui/select.tsx index 8bc84d8b5f8..8fd409dbcae 100644 --- a/packages/ui/src/components/shadcn/ui/select.tsx +++ b/packages/ui/src/components/shadcn/ui/select.tsx @@ -47,7 +47,7 @@ const SelectTrigger = React.forwardRef<