setSearchValue(event.target.value)}
@@ -116,7 +116,7 @@ const EncryptionKeysManagement = () => {
}
/>
-
+
{
)
}
-
-export default EncryptionKeysManagement
diff --git a/apps/studio/components/interfaces/Settings/Vault/Secrets/AddNewSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Settings/Vault/Secrets/AddNewSecretModal.tsx
rename to apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx
diff --git a/apps/studio/components/interfaces/Settings/Vault/Secrets/DeleteSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/DeleteSecretModal.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Settings/Vault/Secrets/DeleteSecretModal.tsx
rename to apps/studio/components/interfaces/Integrations/Vault/Secrets/DeleteSecretModal.tsx
diff --git a/apps/studio/components/interfaces/Settings/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
similarity index 88%
rename from apps/studio/components/interfaces/Settings/Vault/Secrets/EditSecretModal.tsx
rename to apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
index 2532e05db5c..36f93d9633c 100644
--- a/apps/studio/components/interfaces/Settings/Vault/Secrets/EditSecretModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
@@ -109,26 +109,34 @@ const EditSecretModal = ({ selectedSecret, onClose }: EditSecretModalProps) => {
onSubmit={onUpdateSecret}
>
{({ isSubmitting, resetForm }: any) => {
- // [Joshen] JFYI this is breaking rules of hooks, will be fixed once we move to
- // using react hook form instead
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const { isLoading: isLoadingSecretValue } = useVaultSecretDecryptedValueQuery(
+ const {
+ data,
+ isLoading: isLoadingSecretValue,
+ isSuccess: isSuccessSecretValue,
+ // [Joshen] JFYI this is breaking rules of hooks, will be fixed once we move to
+ // using react hook form instead
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ } = useVaultSecretDecryptedValueQuery(
{
projectRef: project?.ref!,
id: selectedSecret?.id!,
connectionString: project?.connectionString,
},
- {
- enabled: !!(project?.ref && selectedSecret?.id),
- onSuccess: (res) => {
- resetForm({
- values: { ...INITIAL_VALUES, secret: res },
- initialValues: { ...INITIAL_VALUES, secret: res },
- })
- },
- }
+ { enabled: !!(project?.ref && selectedSecret?.id) }
)
+ // [Joshen] JFYI this is breaking rules of hooks, will be fixed once we move to
+ // using react hook form instead
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ useEffect(() => {
+ if (selectedSecret !== undefined && isSuccessSecretValue) {
+ resetForm({
+ values: { ...INITIAL_VALUES, secret: data },
+ initialValues: { ...INITIAL_VALUES, secret: data },
+ })
+ }
+ }, [selectedSecret, isSuccessSecretValue])
+
return isLoadingSecretValue ? (
-
-
+
diff --git a/apps/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
similarity index 96%
rename from apps/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx
rename to apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
index f4702527080..6988b6d20d4 100644
--- a/apps/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
@@ -16,7 +16,7 @@ import DeleteSecretModal from './DeleteSecretModal'
import EditSecretModal from './EditSecretModal'
import SecretRow from './SecretRow'
-const SecretsManagement = () => {
+export const SecretsManagement = () => {
const { search } = useParams()
const { project } = useProjectContext()
@@ -56,12 +56,12 @@ const SecretsManagement = () => {
return (
<>
-
+
setSearchValue(event.target.value)}
@@ -82,7 +82,7 @@ const SecretsManagement = () => {
}
/>
-
+
{
)
}
-
-export default SecretsManagement
diff --git a/apps/studio/components/interfaces/Integrations/Integrations-Vercel.constants.ts b/apps/studio/components/interfaces/Integrations/Vercel/Integrations-Vercel.constants.ts
similarity index 100%
rename from apps/studio/components/interfaces/Integrations/Integrations-Vercel.constants.ts
rename to apps/studio/components/interfaces/Integrations/Vercel/Integrations-Vercel.constants.ts
diff --git a/apps/studio/components/interfaces/Integrations/OrganizationPicker.tsx b/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Integrations/OrganizationPicker.tsx
rename to apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
diff --git a/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
similarity index 98%
rename from apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx
rename to apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
index b54187ecd71..3d287c1bc4f 100644
--- a/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx
+++ b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
@@ -7,7 +7,7 @@ import { toast } from 'sonner'
import {
IntegrationConnection,
IntegrationConnectionProps,
-} from 'components/interfaces/Integrations/IntegrationPanels'
+} from 'components/interfaces/Integrations/VercelGithub/IntegrationPanels'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import { useIntegrationsVercelConnectionSyncEnvsMutation } from 'data/integrations/integrations-vercel-connection-sync-envs-mutation'
import type { IntegrationProjectConnection } from 'data/integrations/integrations.types'
diff --git a/apps/studio/components/interfaces/Integrations/IntegrationPanels.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Integrations/IntegrationPanels.tsx
rename to apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx
diff --git a/apps/studio/components/interfaces/Integrations/ProjectLinker.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Integrations/ProjectLinker.tsx
rename to apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
diff --git a/apps/studio/components/interfaces/Integrations/Webhooks/ListTab.tsx b/apps/studio/components/interfaces/Integrations/Webhooks/ListTab.tsx
new file mode 100644
index 00000000000..4afe8207280
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Webhooks/ListTab.tsx
@@ -0,0 +1,53 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useState } from 'react'
+
+import DeleteHookModal from 'components/interfaces/Database/Hooks/DeleteHookModal'
+import EditHookPanel from 'components/interfaces/Database/Hooks/EditHookPanel'
+import HooksList from 'components/interfaces/Database/Hooks/HooksList/HooksList'
+import NoPermission from 'components/ui/NoPermission'
+import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
+
+export const WebhooksListTab = () => {
+ const [selectedHook, setSelectedHook] = useState()
+ const [showCreateHookForm, setShowCreateHookForm] = useState(false)
+ const [showDeleteHookForm, setShowDeleteHookForm] = useState(false)
+
+ const canReadWebhooks = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'triggers')
+ const canCreateWebhooks = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'triggers')
+ const isPermissionsLoaded = usePermissionsLoaded()
+
+ const createHook = () => {
+ setSelectedHook(undefined)
+ setShowCreateHookForm(true)
+ }
+
+ const editHook = (hook: any) => {
+ setSelectedHook(hook)
+ setShowCreateHookForm(true)
+ }
+
+ const deleteHook = (hook: any) => {
+ setSelectedHook(hook)
+ setShowDeleteHookForm(true)
+ }
+
+ if (isPermissionsLoaded && !canReadWebhooks) {
+ return
+ setShowCreateHookForm(false)}
+ />
+ setShowDeleteHookForm(false)}
+ />
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx
new file mode 100644
index 00000000000..e8b2ec79869
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx
@@ -0,0 +1,94 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { toast } from 'sonner'
+
+import { useParams } from 'common'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import NoPermission from 'components/ui/NoPermission'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { useHooksEnableMutation } from 'data/database/hooks-enable-mutation'
+import { useSchemasQuery } from 'data/database/schemas-query'
+import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
+import { Admonition } from 'ui-patterns'
+import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
+
+export const WebhooksOverviewTab = () => {
+ const { project } = useProjectContext()
+ const { ref: projectRef } = useParams()
+
+ const {
+ data: schemas,
+ isSuccess: isSchemasLoaded,
+ refetch,
+ } = useSchemasQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ })
+
+ const isHooksEnabled = schemas?.some((schema) => schema.name === 'supabase_functions')
+ const canReadWebhooks = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'triggers')
+ const isPermissionsLoaded = usePermissionsLoaded()
+
+ const { mutate: enableHooks, isLoading: isEnablingHooks } = useHooksEnableMutation({
+ onSuccess: async () => {
+ await refetch()
+ toast.success('Successfully enabled webhooks')
+ },
+ })
+
+ const enableHooksForProject = async () => {
+ if (!projectRef) return console.error('Project ref is required')
+ enableHooks({ ref: projectRef })
+ }
+
+ if (isPermissionsLoaded && !canReadWebhooks) {
+ return (
+
+
+ )
+ }
+
+ if (!isSchemasLoaded) {
+ return (
+
+
+ )
+ }
+
+ return (
+
+
+ Database Webhooks can be used to trigger serverless functions or send requests to an
+ HTTP endpoint
+
+ enableHooksForProject()}
+ disabled={!isPermissionsLoaded || isEnablingHooks}
+ tooltip={{
+ content: {
+ side: 'bottom',
+ text:
+ isPermissionsLoaded && !canReadWebhooks
+ ? 'You need additional permissions to enable webhooks'
+ : undefined,
+ },
+ }}
+ >
+ Enable webhooks
+
+
+ )
+ }
+ />
+ )
+}
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
new file mode 100644
index 00000000000..376b7999c8f
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
@@ -0,0 +1,283 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { isEmpty } from 'lodash'
+import { Edit, Trash } from 'lucide-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms/FormSection'
+import { invalidateSchemasQuery } from 'data/database/schemas-query'
+import { useFDWCreateMutation } from 'data/fdw/fdw-create-mutation'
+import { Button, Form, Input, SheetFooter, SheetHeader, SheetTitle } from 'ui'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import InputField from './InputField'
+import { WrapperMeta } from './Wrappers.types'
+import { makeValidateRequired } from './Wrappers.utils'
+import WrapperTableEditor from './WrapperTableEditor'
+
+export interface CreateWrapperSheetProps {
+ isClosing: boolean
+ wrapperMeta: WrapperMeta
+ setIsClosing: (v: boolean) => void
+ onClose: () => void
+}
+
+const FORM_ID = 'create-wrapper-form'
+
+export const CreateWrapperSheet = ({
+ wrapperMeta,
+ isClosing,
+ setIsClosing,
+ onClose,
+}: CreateWrapperSheetProps) => {
+ const queryClient = useQueryClient()
+ const { project } = useProjectContext()
+
+ const [newTables, setNewTables] = useState([])
+ const [isEditingTable, setIsEditingTable] = useState(false)
+ const [selectedTableToEdit, setSelectedTableToEdit] = useState()
+ const [formErrors, setFormErrors] = useState<{ [k: string]: string }>({})
+
+ const { mutate: createFDW, isLoading: isCreating } = useFDWCreateMutation({
+ onSuccess: () => {
+ toast.success(`Successfully created ${wrapperMeta?.label} foreign data wrapper`)
+ setNewTables([])
+
+ const hasNewSchema = newTables.some((table) => table.is_new_schema)
+ if (hasNewSchema) invalidateSchemasQuery(queryClient, project?.ref)
+
+ onClose()
+ },
+ })
+
+ const initialValues = {
+ wrapper_name: '',
+ server_name: '',
+ ...Object.fromEntries(
+ wrapperMeta.server.options.map((option) => [option.name, option.defaultValue ?? ''])
+ ),
+ }
+
+ const onUpdateTable = (values: any) => {
+ setNewTables((prev) => {
+ // if the new values have tableIndex, we are editing an existing table
+ if (values.tableIndex !== undefined) {
+ const tableIndex = values.tableIndex
+ const newTables = [...prev]
+ delete values.tableIndex
+ newTables[tableIndex] = values
+ return newTables
+ }
+ return [...prev, values]
+ })
+ setIsEditingTable(false)
+ setSelectedTableToEdit(undefined)
+ }
+
+ const onSubmit = async (values: any) => {
+ const validate = makeValidateRequired(wrapperMeta.server.options)
+ const errors: any = validate(values)
+
+ const { wrapper_name } = values
+ if (wrapper_name.length === 0) errors.name = 'Please provide a name for your wrapper'
+ if (newTables.length === 0) errors.tables = 'Please add at least one table'
+ if (!isEmpty(errors)) return setFormErrors(errors)
+
+ createFDW({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ wrapperMeta,
+ formState: { ...values, server_name: `${wrapper_name}_server` },
+ tables: newTables,
+ })
+ }
+
+ return (
+ <>
+
+ setIsClosing(false)}
+ onConfirm={() => onClose()}
+ >
+
+ There are unsaved changes. Are you sure you want to close the panel? Your changes will be
+ lost.
+
+
+
+ {
+ setSelectedTableToEdit(undefined)
+ setIsEditingTable(false)
+ }}
+ onSave={onUpdateTable}
+ initialData={selectedTableToEdit}
+ />
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Database/Wrappers/DeleteWrapperModal.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/DeleteWrapperModal.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Database/Wrappers/DeleteWrapperModal.tsx
rename to apps/studio/components/interfaces/Integrations/Wrappers/DeleteWrapperModal.tsx
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
new file mode 100644
index 00000000000..378a1395345
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
@@ -0,0 +1,364 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { isEmpty } from 'lodash'
+import { Edit, Trash } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms/FormSection'
+import { invalidateSchemasQuery } from 'data/database/schemas-query'
+import { useFDWUpdateMutation } from 'data/fdw/fdw-update-mutation'
+import { FDW } from 'data/fdw/fdws-query'
+import { getDecryptedValue } from 'data/vault/vault-secret-decrypted-value-query'
+import { useVaultSecretsQuery } from 'data/vault/vault-secrets-query'
+import { Button, Form, Input, SheetFooter, SheetHeader, SheetTitle } from 'ui'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import InputField from './InputField'
+import { WrapperMeta } from './Wrappers.types'
+import {
+ convertKVStringArrayToJson,
+ formatWrapperTables,
+ makeValidateRequired,
+} from './Wrappers.utils'
+import WrapperTableEditor from './WrapperTableEditor'
+
+export interface EditWrapperSheetProps {
+ wrapper: FDW
+ isClosing: boolean
+ wrapperMeta: WrapperMeta
+ setIsClosing: (v: boolean) => void
+ onClose: () => void
+}
+
+const FORM_ID = 'edit-wrapper-form'
+
+export const EditWrapperSheet = ({
+ wrapper,
+ wrapperMeta,
+ isClosing,
+ setIsClosing,
+ onClose,
+}: EditWrapperSheetProps) => {
+ const queryClient = useQueryClient()
+ const { project } = useProjectContext()
+
+ const { data: secrets, isLoading: isSecretsLoading } = useVaultSecretsQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ })
+
+ const { mutate: updateFDW, isLoading: isSaving } = useFDWUpdateMutation({
+ onSuccess: () => {
+ toast.success(`Successfully updated ${wrapperMeta?.label} foreign data wrapper`)
+ setWrapperTables([])
+
+ const hasNewSchema = wrapperTables.some((table) => table.is_new_schema)
+ if (hasNewSchema) invalidateSchemasQuery(queryClient, project?.ref)
+ },
+ })
+
+ const [wrapperTables, setWrapperTables] = useState(
+ formatWrapperTables(wrapper, wrapperMeta)
+ )
+ const [isEditingTable, setIsEditingTable] = useState(false)
+ const [selectedTableToEdit, setSelectedTableToEdit] = useState()
+ const [formErrors, setFormErrors] = useState<{ [k: string]: string }>({})
+
+ const initialValues = {
+ wrapper_name: wrapper?.name,
+ server_name: wrapper?.server_name,
+ ...convertKVStringArrayToJson(wrapper?.server_options ?? []),
+ }
+
+ const onUpdateTable = (values: any) => {
+ setWrapperTables((prev) => {
+ // if the new values have tableIndex, we are editing an existing table
+ if (values.tableIndex !== undefined) {
+ const tableIndex = values.tableIndex
+ const wrapperTables = [...prev]
+ delete values.tableIndex
+ wrapperTables[tableIndex] = values
+ return wrapperTables
+ }
+ return [...prev, values]
+ })
+ setIsEditingTable(false)
+ setSelectedTableToEdit(undefined)
+ }
+
+ const onSubmit = async (values: any) => {
+ const validate = makeValidateRequired(wrapperMeta.server.options)
+ const errors: any = validate(values)
+
+ const { wrapper_name } = values
+ if (wrapper_name.length === 0) errors.name = 'Please provide a name for your wrapper'
+ if (wrapperTables.length === 0) errors.tables = 'Please add at least one table'
+ if (!isEmpty(errors)) return setFormErrors(errors)
+
+ updateFDW({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ wrapper,
+ wrapperMeta,
+ formState: { ...values, server_name: `${wrapper_name}_server` },
+ tables: wrapperTables,
+ })
+ }
+
+ return (
+ <>
+
+
+ setIsClosing(false)}
+ onConfirm={() => onClose()}
+ >
+
+ There are unsaved changes. Are you sure you want to close the panel? Your changes will be
+ lost.
+
+
+
+ {
+ setSelectedTableToEdit(undefined)
+ setIsEditingTable(false)
+ }}
+ onSave={onUpdateTable}
+ initialData={selectedTableToEdit}
+ />
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Database/Wrappers/InputField.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Database/Wrappers/InputField.tsx
rename to apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx
new file mode 100644
index 00000000000..6a0141d0ff5
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/OverviewTab.tsx
@@ -0,0 +1,130 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import Link from 'next/link'
+import { useState } from 'react'
+
+import { useParams } from 'common'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import {
+ Alert_Shadcn_,
+ AlertDescription_Shadcn_,
+ AlertTitle_Shadcn_,
+ Button,
+ Separator,
+ Sheet,
+ SheetContent,
+ WarningIcon,
+} from 'ui'
+import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
+import { INTEGRATIONS } from '../Landing/Integrations.constants'
+import { CreateWrapperSheet } from './CreateWrapperSheet'
+import { WrapperTable } from './WrapperTable'
+
+export const WrapperOverviewTab = () => {
+ const { id } = useParams()
+ const { project } = useProjectContext()
+ const [createWrapperShown, setCreateWrapperShown] = useState(false)
+ const [isClosingCreateWrapper, setisClosingCreateWrapper] = useState(false)
+ const canCreateWrapper = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'wrappers')
+
+ const { data } = useDatabaseExtensionsQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ })
+
+ const integration = INTEGRATIONS.find((i) => i.id === id)
+
+ if (integration?.type !== 'wrapper') {
+ return Unsupported integration type
+ }
+
+ const wrapperMeta = integration.meta
+ const wrappersExtension = data?.find((ext) => ext.name === 'wrappers')
+ const isWrappersExtensionInstalled = !!wrappersExtension?.installed_version
+ const hasRequiredVersion =
+ (wrappersExtension?.installed_version ?? '') >= (wrapperMeta?.minimumExtensionVersion ?? '')
+ const databaseNeedsUpgrading =
+ wrappersExtension?.installed_version !== wrappersExtension?.default_version
+
+ return (
+
+
+
+ Your extension version is outdated for this wrapper.
+
+
+
+ The {wrapperMeta.label} wrapper requires a minimum extension version of{' '}
+ {wrapperMeta.minimumExtensionVersion}. You have version{' '}
+ {wrappersExtension?.installed_version} installed. Please{' '}
+ {databaseNeedsUpgrading && 'upgrade your database then '}update the extension by
+ disabling and enabling the wrappers extension to
+ create this wrapper.
+
+
+ Warning: Before reinstalling the wrapper extension, you must first remove all
+ existing wrappers. Afterward, you can recreate the wrappers.
+
+
+
+
+
+
+
+
+ ) : (
+
+ setCreateWrapperShown(true)}
+ disabled={!canCreateWrapper}
+ tooltip={{
+ content: {
+ text: !canCreateWrapper
+ ? 'You need additional permissions to create a foreign data wrapper'
+ : undefined,
+ },
+ }}
+ >
+ Add new wrapper
+
+
+ )
+ }
+ >
+
+ Recent wrappers
+
+
+
setisClosingCreateWrapper(true)}>
+
+ {
+ setCreateWrapperShown(false)
+ setisClosingCreateWrapper(false)
+ }}
+ isClosing={isClosingCreateWrapper}
+ setIsClosing={setisClosingCreateWrapper}
+ />
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Database/Wrappers/WrapperDynamicColumns.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Database/Wrappers/WrapperDynamicColumns.tsx
rename to apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx
new file mode 100644
index 00000000000..1ca1738225b
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx
@@ -0,0 +1,159 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { partition } from 'lodash'
+import { ChevronRight, Edit, ExternalLink, Table2, Trash } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+
+import { useParams } from 'common'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import type { FDW } from 'data/fdw/fdws-query'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { Badge, Sheet, SheetContent, TableCell, TableRow } from 'ui'
+import { INTEGRATIONS } from '../Landing/Integrations.constants'
+import DeleteWrapperModal from './DeleteWrapperModal'
+import { EditWrapperSheet } from './EditWrapperSheet'
+import { formatWrapperTables } from './Wrappers.utils'
+
+interface WrapperRowProps {
+ wrapper: FDW
+}
+
+const WrapperRow = ({ wrapper }: WrapperRowProps) => {
+ const { ref, id } = useParams()
+ const canManageWrappers = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'wrappers')
+
+ const [editWrapperShown, setEditWrapperShown] = useState(false)
+ const [isClosingEditWrapper, setisClosingEditWrapper] = useState(false)
+ const [deleteWrapperShown, setDeleteWrapperShown] = useState(false)
+
+ const integration = INTEGRATIONS.find((i) => i.id === id)
+
+ if (!integration || integration.type !== 'wrapper') {
+ return
A wrapper with this ID does not exist
+ }
+
+ const serverOptions = Object.fromEntries(
+ wrapper.server_options.map((option) => option.split('='))
+ )
+ const [encryptedMetadata, visibleMetadata] = partition(
+ integration?.meta?.server.options.filter((option) => !option.hidden),
+ 'secureEntry'
+ )
+
+ const _tables = formatWrapperTables(wrapper, integration?.meta)
+
+ return (
+ <>
+
+
+ {wrapper.name}
+
+ {visibleMetadata.map((metadata) => (
+
+ {metadata.label}:
+ {serverOptions[metadata.name]}
+
+ ))}
+
+
+
+ {_tables?.map((table) => {
+ const target = table.table ?? table.object
+
+ return (
+
+
+
+ {integration.icon({ className: 'p-0' })}
+
+ {target}{' '}
+
+
+
+
+
+
+ {encryptedMetadata.map((metadata) => (
+
+ {/*
{metadata.label}:
*/}
+
+
Vault
+
+
+
+
+
+
+
setisClosingEditWrapper(true)}>
+
+ {
+ setEditWrapperShown(false)
+ setisClosingEditWrapper(false)
+ }}
+ isClosing={isClosingEditWrapper}
+ setIsClosing={setisClosingEditWrapper}
+ />
+
+
+ {deleteWrapperShown && (
+
setDeleteWrapperShown(false)}
+ />
+ )}
+
+ )
+}
+
+export default WrapperRow
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTable.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTable.tsx
new file mode 100644
index 00000000000..ffb88fc25f8
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTable.tsx
@@ -0,0 +1,66 @@
+import { useParams } from 'common'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useFDWsQuery } from 'data/fdw/fdws-query'
+import {
+ Card,
+ CardContent,
+ Table,
+ TableBody,
+ TableCaption,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from 'ui'
+import { INTEGRATIONS } from '../Landing/Integrations.constants'
+import WrapperRow from './WrapperRow'
+
+interface WrapperTableProps {
+ isLatest?: boolean
+}
+
+export const WrapperTable = ({ isLatest = false }: WrapperTableProps) => {
+ const { id, ref } = useParams()
+ const { project } = useProjectContext()
+ const integration = INTEGRATIONS.find((i) => i.id === id)
+
+ const { data } = useFDWsQuery({
+ projectRef: ref,
+ connectionString: project?.connectionString,
+ })
+
+ if (!integration || integration.type !== 'wrapper') {
+ return (
+
+ The referenced ID doesn't correspond to a wrapper integration
+
+ )
+ }
+
+ const wrappers = (data ?? []).filter((x) => x.handler === integration.meta.handlerName) || []
+
+ return (
+
+
+
+
+ {wrappers.length} {integration?.name}
+ {wrappers.length > 1 ? 's' : ''} created
+
+
+
+ Name
+ Tables
+ Encrypted key
+
+
+
+ {(isLatest ? wrappers.slice(0, 3) : wrappers).map((x) => {
+ return
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
rename to apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
diff --git a/apps/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts b/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.constants.ts
similarity index 98%
rename from apps/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
rename to apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.constants.ts
index aebebdeb0d4..88e0ab69351 100644
--- a/apps/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.constants.ts
@@ -23,6 +23,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.STRIPE,
validatorName: 'stripe_fdw_validator',
icon: `${BASE_PATH}/img/icons/stripe-icon.svg`,
+ description: 'Payment processing and subscription management',
extensionName: 'StripeFdw',
label: 'Stripe',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/stripe',
@@ -1139,6 +1140,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.FIREBASE,
validatorName: 'firebase_fdw_validator',
icon: `${BASE_PATH}/img/icons/firebase-icon.svg`,
+ description: 'Backend-as-a-Service with real-time database',
extensionName: 'FirebaseFdw',
label: 'Firebase',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/firebase',
@@ -1265,6 +1267,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.S3,
validatorName: 's3_fdw_validator',
icon: `${BASE_PATH}/img/icons/s3-icon.svg`,
+ description: 'Cloud object storage service',
extensionName: 'S3Fdw',
label: 'S3',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/s3',
@@ -1348,6 +1351,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.CLICK_HOUSE,
validatorName: 'click_house_fdw_validator',
icon: `${BASE_PATH}/img/icons/clickhouse-icon.svg`,
+ description: 'Column-oriented analytics database',
extensionName: 'ClickHouseFdw',
label: 'ClickHouse',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/clickhouse',
@@ -1392,6 +1396,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.BIG_QUERY,
validatorName: 'big_query_fdw_validator',
icon: `${BASE_PATH}/img/icons/bigquery-icon.svg`,
+ description: 'Serverless data warehouse and analytics',
extensionName: 'BigQueryFdw',
label: 'BigQuery',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/bigquery',
@@ -1466,6 +1471,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.AIRTABLE,
validatorName: 'airtable_fdw_validator',
icon: `${BASE_PATH}/img/icons/airtable-icon.svg`,
+ description: 'No-code database and spreadsheet platform',
extensionName: 'airtableFdw',
label: 'Airtable',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/airtable',
@@ -1508,6 +1514,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.LOGFLARE,
validatorName: 'logflare_fdw_validator',
icon: `${BASE_PATH}/img/icons/logflare-icon.svg`,
+ description: 'Log management and analytics service',
extensionName: 'logflareFdw',
label: 'Logflare',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/logflare',
@@ -1543,6 +1550,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.AUTH0,
validatorName: 'auth0_fdw_validator',
icon: `${BASE_PATH}/img/icons/auth0-icon.svg`,
+ description: 'Identity and access management platform',
extensionName: 'Auth0Fdw',
label: 'Auth0',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/auth0',
@@ -1673,6 +1681,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.COGNITO,
validatorName: 'cognito_fdw_validator',
icon: `${BASE_PATH}/img/icons/cognito-icon.svg`,
+ description: 'AWS user authentication and authorization',
extensionName: 'CognitoFdw',
label: 'Cognito',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/cognito',
@@ -1756,6 +1765,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.MSSQL,
validatorName: 'mssql_fdw_validator',
icon: `${BASE_PATH}/img/icons/mssql-icon.svg`,
+ description: 'Microsoft SQL Server database',
extensionName: 'mssqlFdw',
label: 'Microsoft SQL Server',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/mssql',
@@ -1792,6 +1802,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.REDIS,
validatorName: 'redis_fdw_validator',
icon: `${BASE_PATH}/img/icons/redis-icon.svg`,
+ description: 'In-memory data structure store',
extensionName: 'redisFdw',
label: 'Redis',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/redis',
@@ -1874,6 +1885,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.PADDLE,
validatorName: 'wasm_fdw_validator',
icon: `${BASE_PATH}/img/icons/paddle-icon.svg`,
+ description: 'Subscription billing and payments platform',
extensionName: 'paddleFdw',
label: 'Paddle',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/paddle',
@@ -1974,6 +1986,7 @@ export const WRAPPERS: WrapperMeta[] = [
handlerName: WRAPPER_HANDLERS.SNOWFLAKE,
validatorName: 'wasm_fdw_validator',
icon: `${BASE_PATH}/img/icons/snowflake-icon.svg`,
+ description: 'Cloud data warehouse platform',
extensionName: 'snowflakeFdw',
label: 'Snowflake',
docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/snowflake',
diff --git a/apps/studio/components/interfaces/Database/Wrappers/Wrappers.types.ts b/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.types.ts
similarity index 92%
rename from apps/studio/components/interfaces/Database/Wrappers/Wrappers.types.ts
rename to apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.types.ts
index 786db021133..70011183472 100644
--- a/apps/studio/components/interfaces/Database/Wrappers/Wrappers.types.ts
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.types.ts
@@ -3,6 +3,8 @@ export type WrapperMeta = {
handlerName: string
validatorName: string
icon: string
+ /** Short description (one-sentence) used in lists of integrations */
+ description: string
extensionName: string
label: string
server: Server
diff --git a/apps/studio/components/interfaces/Database/Wrappers/Wrappers.utils.ts b/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.utils.ts
similarity index 84%
rename from apps/studio/components/interfaces/Database/Wrappers/Wrappers.utils.ts
rename to apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.utils.ts
index fd7cf3cf2b9..3298e6d5b21 100644
--- a/apps/studio/components/interfaces/Database/Wrappers/Wrappers.utils.ts
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.utils.ts
@@ -1,4 +1,4 @@
-import { FDW } from 'data/fdw/fdws-query'
+import { FDW, FDWTable } from 'data/fdw/fdws-query'
import { WRAPPERS, WRAPPER_HANDLERS } from './Wrappers.constants'
import type { WrapperMeta } from './Wrappers.types'
@@ -50,10 +50,24 @@ export const makeValidateRequired = (options: { name: string; required: boolean
}
}
-export const formatWrapperTables = (wrapper: any, wrapperMeta?: WrapperMeta) => {
+interface FormattedWrapperTable {
+ index: number
+ columns: { name: string }[]
+ is_new_schema: boolean
+ schema: string
+ schema_name: string
+ table_name: string
+ object?: string // From options object for Firebase/Stripe
+ [key: string]: any // For other dynamic options from table.options
+}
+
+export const formatWrapperTables = (
+ wrapper: { handler: string; tables?: FDWTable[] },
+ wrapperMeta?: WrapperMeta
+): FormattedWrapperTable[] => {
const tables = wrapper?.tables ?? []
- return tables.map((table: any) => {
+ return tables.map((table) => {
let index: number = 0
const options = Object.fromEntries(table.options.map((option: string) => option.split('=')))
@@ -85,6 +99,7 @@ export const formatWrapperTables = (wrapper: any, wrapperMeta?: WrapperMeta) =>
return {
...options,
index,
+ id: table.id,
columns: table.columns,
is_new_schema: false,
schema: table.schema,
@@ -98,7 +113,10 @@ export const convertKVStringArrayToJson = (values: string[]) => {
return Object.fromEntries(values.map((value) => value.split('=')))
}
-export function wrapperMetaComparator(wrapperMeta: WrapperMeta, wrapper: FDW | undefined) {
+export function wrapperMetaComparator(
+ wrapperMeta: Pick,
+ wrapper: FDW | undefined
+) {
if (wrapperMeta.handlerName === 'wasm_fdw_handler') {
const serverOptions = convertKVStringArrayToJson(wrapper?.server_options ?? [])
return (
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx
new file mode 100644
index 00000000000..f84bf45a2d9
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrappersTab.tsx
@@ -0,0 +1,105 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { HTMLProps, ReactNode, useCallback, useState } from 'react'
+
+import { useParams } from 'common'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { FDW, useFDWsQuery } from 'data/fdw/fdws-query'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { Sheet, SheetContent } from 'ui'
+import { INTEGRATIONS } from '../Landing/Integrations.constants'
+import { CreateWrapperSheet } from './CreateWrapperSheet'
+import { WrapperTable } from './WrapperTable'
+import DeleteWrapperModal from './DeleteWrapperModal'
+import { wrapperMetaComparator } from './Wrappers.utils'
+
+export const WrappersTab = () => {
+ const { id } = useParams()
+ const { project } = useProjectContext()
+ const [selectedWrapperForDelete, setSelectedWrapperForDelete] = useState(null)
+ const [createWrapperShown, setCreateWrapperShown] = useState(false)
+ const [isClosingCreateWrapper, setisClosingCreateWrapper] = useState(false)
+ const canCreateWrapper = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'wrappers')
+
+ const { data } = useFDWsQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ })
+
+ const wrappers = data ?? []
+ const integration = INTEGRATIONS.find((i) => i.id === id)
+
+ // this contains a collection of all wrapper instances for the wrapper type
+ const createdWrappers =
+ integration?.type === 'wrapper'
+ ? wrappers.filter((w) => wrapperMetaComparator(integration.meta, w))
+ : []
+
+ const Container = useCallback(
+ ({ ...props }: { children: ReactNode } & HTMLProps) => (
+
+ {props.children}
+ setisClosingCreateWrapper(true)}>
+
+ {integration?.type === 'wrapper' && (
+ {
+ setCreateWrapperShown(false)
+ setisClosingCreateWrapper(false)
+ }}
+ isClosing={isClosingCreateWrapper}
+ setIsClosing={setisClosingCreateWrapper}
+ />
+ )}
+
+
+
+ ),
+ [createWrapperShown, integration, isClosingCreateWrapper]
+ )
+
+ if (!integration || integration.type !== 'wrapper') {
+ return Missing integration.
+ }
+
+ if (createdWrappers.length === 0) {
+ return (
+
+
+
+
+ No {integration.meta.label} wrappers have been installed
+
+
setCreateWrapperShown(true)}
+ disabled={!canCreateWrapper}
+ tooltip={{
+ content: {
+ text: !canCreateWrapper
+ ? 'You need additional permissions to create a foreign data wrapper'
+ : undefined,
+ },
+ }}
+ >
+ Add new wrapper
+
+
+
+ )
+ }
+
+ return (
+
+ setSelectedWrapperForDelete(null)}
+ />
+ )}
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Markdown.tsx b/apps/studio/components/interfaces/Markdown.tsx
index e210d4beb75..dc688a968d6 100644
--- a/apps/studio/components/interfaces/Markdown.tsx
+++ b/apps/studio/components/interfaces/Markdown.tsx
@@ -1,5 +1,7 @@
+import Link from 'next/link'
import { ReactMarkdown, ReactMarkdownOptions } from 'react-markdown/lib/react-markdown'
import remarkGfm from 'remark-gfm'
+
import { cn } from 'ui'
interface Props extends Omit {
@@ -14,11 +16,17 @@ const Markdown = ({ className, content = '', extLinks = false, ...props }: Props
remarkPlugins={[remarkGfm]}
components={{
h3: ({ children }) => {children} ,
- a: ({ href, children }) => (
-
- {children}
-
- ),
+ a: ({ href, children }) => {
+ if (extLinks) {
+ return (
+
+ {children}
+
+ )
+ } else {
+ return
This is due to changes in compute instances from the downgrade. Affected projects
include {projectsWithComputeDowngrade.map((project) => project.name).join(', ')}.
@@ -209,11 +204,11 @@ const ExitSurveyModal = ({ visible, subscription, projects, onClose }: ExitSurve
- {willPlanDowngradeHappenImmediately && (
-
- The unused amount for the remaining of your billing cycle will be refunded as credits
-
- )}
+
+ The unused amount for the remaining time of your billing cycle will be refunded as
+ credits
+
+
onClose()}>
Cancel
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
index 6929f728c9e..76f834a19be 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
@@ -82,7 +82,7 @@ const PlanUpdateSidePanel = () => {
setSelectedTier(undefined)
onClose()
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
- setShowUpgradeSurvey(true)
+ if (planMeta?.change_type === 'upgrade') setShowUpgradeSurvey(true)
},
onError: (error) => {
toast.error(`Unable to update subscription: ${error.message}`)
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
index 8e8828f65de..57d3b730ba1 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
@@ -4,7 +4,6 @@ import dayjs from 'dayjs'
import { ExternalLink } from 'lucide-react'
import Link from 'next/link'
-import { Markdown } from 'components/interfaces/Markdown'
import {
ScaffoldSection,
ScaffoldSectionContent,
@@ -147,10 +146,14 @@ const Subscription = () => {
type="default"
title="This organization is limited by the included usage"
>
-
+ Projects may become unresponsive when this organization exceeds its
+
{
+ const { mutate, isLoading } = useInvoicePaymentLinkGetMutation({
+ onSuccess(data) {
+ toast.success('Redirecting to payment gateway...')
+
+ window.location.href = data.redirectUrl
+ },
+ })
+
+ function onPayNow() {
+ mutate({ slug, invoiceId })
+ }
+
+ return (
+
+ Pay Now
+
+ )
+}
+
+export default InvoicePayButton
diff --git a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
index 4804764ae49..baf7142059c 100644
--- a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
+++ b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
@@ -21,6 +21,7 @@ import { formatCurrency } from 'lib/helpers'
import { Button } from 'ui'
import CurrentPaymentMethod from '../BillingSettings/PaymentMethods/CurrentPaymentMethod'
import { FileText, Download, ChevronLeft, ChevronRight } from 'lucide-react'
+import InvoicePayButton from './InvoicePayButton'
const PAGE_LIMIT = 10
@@ -152,15 +153,7 @@ const InvoicesSettings = () => {
InvoiceStatus.OPEN,
InvoiceStatus.ISSUED,
].includes(x.status as InvoiceStatus) && (
-
-
+
- {children}
-
-)
+const ReportPadding = ({ children }: PropsWithChildren<{}>) => {
+ const { aiAssistantPanel } = useAppStateSnapshot()
+ const { open } = aiAssistantPanel
+
+ return (
+
+ {children}
+
+ )
+}
export default ReportPadding
diff --git a/apps/studio/components/interfaces/SQLEditor/AiAssistantPanel/index.tsx b/apps/studio/components/interfaces/SQLEditor/AiAssistantPanel/index.tsx
index 994de7cb037..d27eebd1d8f 100644
--- a/apps/studio/components/interfaces/SQLEditor/AiAssistantPanel/index.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/AiAssistantPanel/index.tsx
@@ -94,13 +94,13 @@ export const AiAssistantPanel = ({
// Use chat id because useChat doesn't have a reset function to clear all messages
const {
messages: chatMessages,
- append,
isLoading,
+ append,
} = useChat({
id: chatId,
api: `${BASE_PATH}/api/ai/sql/generate-v2`,
body: {
- existingSql: existingSql,
+ existingSql,
entityDefinitions: entityDefinitions,
},
})
diff --git a/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx b/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
index 7be8fb03bc3..b0571a93f66 100644
--- a/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
@@ -13,6 +13,8 @@ import { cn } from 'ui'
import { untitledSnippetTitle } from './SQLEditor.constants'
import type { IStandaloneCodeEditor } from './SQLEditor.types'
import { createSqlSnippetSkeletonV2 } from './SQLEditor.utils'
+import { useIsAssistantV2Enabled } from '../App/FeaturePreview/FeaturePreviewContext'
+import { useAppStateSnapshot } from 'state/app-state'
export type MonacoEditorProps = {
id: string
@@ -39,6 +41,9 @@ const MonacoEditor = ({
const project = useSelectedProject()
const snapV2 = useSqlEditorV2StateSnapshot()
+ const isAssistantV2Enabled = useIsAssistantV2Enabled()
+ const { setAiAssistantPanel } = useAppStateSnapshot()
+
const [intellisenseEnabled] = useLocalStorageQuery(
LOCAL_STORAGE_KEYS.SQL_EDITOR_INTELLISENSE,
true
@@ -69,6 +74,25 @@ const MonacoEditor = ({
},
})
+ if (isAssistantV2Enabled) {
+ editor.addAction({
+ id: 'explain-code',
+ label: 'Explain Code',
+ contextMenuGroupId: 'operation',
+ contextMenuOrder: 1,
+ run: () => {
+ const selectedValue = (editorRef?.current as any)
+ .getModel()
+ .getValueInRange((editorRef?.current as any)?.getSelection())
+ setAiAssistantPanel({
+ open: true,
+ sqlSnippets: [selectedValue],
+ initialInput: 'Can you explain this section to me in more detail?',
+ })
+ },
+ })
+ }
+
editor.onDidChangeCursorSelection(({ selection }) => {
const noSelection =
selection.startLineNumber === selection.endLineNumber &&
diff --git a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
index 29a1a86024f..df092785ad2 100644
--- a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
@@ -8,6 +8,7 @@ import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
import { useQueryAbortMutation } from 'data/sql/abort-query-mutation'
import { useOngoingQueriesQuery } from 'data/sql/ongoing-queries-query'
import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { useUrlState } from 'hooks/ui/useUrlState'
import { IS_PLATFORM } from 'lib/constants'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
import { ResponseError } from 'types'
@@ -33,6 +34,7 @@ interface OngoingQueriesPanel {
}
export const OngoingQueriesPanel = ({ visible, onClose }: OngoingQueriesPanel) => {
+ const [_, setParams] = useUrlState({ replace: true })
const project = useSelectedProject()
const state = useDatabaseSelectorStateSnapshot()
const [selectedId, setSelectedId] = useState()
@@ -66,9 +68,14 @@ export const OngoingQueriesPanel = ({ visible, onClose }: OngoingQueriesPanel) =
},
})
+ const closePanel = () => {
+ setParams({ viewOngoingQueries: undefined })
+ onClose()
+ }
+
return (
<>
- onClose()}>
+ closePanel()}>
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
index 1d254d90e2f..a958b2ffcb8 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
@@ -52,9 +52,10 @@ import {
cn,
} from 'ui'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { useIsAssistantV2Enabled } from '../App/FeaturePreview/FeaturePreviewContext'
import { subscriptionHasHipaaAddon } from '../Billing/Subscription/Subscription.utils'
-import AISchemaSuggestionPopover from './AISchemaSuggestionPopover'
import { AiAssistantPanel } from './AiAssistantPanel'
+import AISchemaSuggestionPopover from './AISchemaSuggestionPopover'
import { DiffActionBar } from './DiffActionBar'
import {
ROWS_PER_PAGE_OPTIONS,
@@ -87,8 +88,8 @@ const DiffEditor = dynamic(
)
const SQLEditor = () => {
- const { ref, id: urlId } = useParams()
const router = useRouter()
+ const { ref, id: urlId } = useParams()
// generate an id to be used for new snippets. The dependency on urlId is to avoid a bug which
// shows up when clicking on the SQL Editor while being in the SQL editor on a random snippet.
@@ -105,11 +106,13 @@ const SQLEditor = () => {
const databaseSelectorState = useDatabaseSelectorStateSnapshot()
const queryClient = useQueryClient()
+ const isAssistantV2Enabled = useIsAssistantV2Enabled()
+ const { open } = appSnap.aiAssistantPanel
+
const { mutate: formatQuery } = useFormatQueryMutation()
const { mutateAsync: generateSqlTitle } = useSqlTitleGenerateMutation()
const { mutateAsync: debugSql, isLoading: isDebugSqlLoading } = useSqlDebugMutation()
- const [selectedMessage, setSelectedMessage] = useState()
const [debugSolution, setDebugSolution] = useState()
const [sourceSqlDiff, setSourceSqlDiff] = useState()
const [pendingTitle, setPendingTitle] = useState()
@@ -118,6 +121,7 @@ const SQLEditor = () => {
const editorRef = useRef(null)
const monacoRef = useRef(null)
const diffEditorRef = useRef(null)
+ const aiPanelRef = useRef(null)
const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug })
const { data: databases, isSuccess: isSuccessReadReplicas } = useReadReplicasQuery({
@@ -127,7 +131,9 @@ const SQLEditor = () => {
// Customers on HIPAA plans should not have access to Supabase AI
const hasHipaaAddon = subscriptionHasHipaaAddon(subscription)
+ // [Joshen] This eventually needs to be in the app state
const [isAiOpen, setIsAiOpen] = useLocalStorageQuery(LOCAL_STORAGE_KEYS.SQL_EDITOR_AI_OPEN, true)
+ const isAssistantOpen = (!isAssistantV2Enabled && isAiOpen) || (isAssistantV2Enabled && open)
const [showPotentialIssuesModal, setShowPotentialIssuesModal] = useState(false)
const [queryHasDestructiveOperations, setQueryHasDestructiveOperations] = useState(false)
@@ -376,7 +382,7 @@ const SQLEditor = () => {
)
const updateEditorWithCheckForDiff = useCallback(
- ({ id, diffType, sql }: { id: string; diffType: DiffType; sql: string }) => {
+ ({ diffType, sql }: { diffType: DiffType; sql: string }) => {
const editorModel = editorRef.current?.getModel()
if (!editorModel) return
@@ -392,7 +398,6 @@ const SQLEditor = () => {
},
])
} else {
- setSelectedMessage(id)
const currentSql = editorRef.current?.getValue()
const diff = { original: currentSql || '', modified: sql }
setSourceSqlDiff(diff)
@@ -406,26 +411,33 @@ const SQLEditor = () => {
try {
const snippet = snapV2.snippets[id]
const result = snapV2.results[id]?.[0]
-
- const { solution, sql } = await debugSql({
- sql: snippet.snippet.content.sql.replace(sqlAiDisclaimerComment, '').trim(),
- errorMessage: result.error.message,
- entityDefinitions,
- })
-
- const formattedSql =
- sqlAiDisclaimerComment +
- '\n\n' +
- format(sql, {
- language: 'postgresql',
- keywordCase: 'lower',
+ if (isAssistantV2Enabled) {
+ appSnap.setAiAssistantPanel({
+ open: true,
+ sqlSnippets: [snippet.snippet.content.sql.replace(sqlAiDisclaimerComment, '').trim()],
+ initialInput: `Help me to debug the attached sql snippet which gives the following error: \n\n${result.error.message}`,
})
- setDebugSolution(solution)
- setSourceSqlDiff({
- original: snippet.snippet.content.sql,
- modified: formattedSql,
- })
- setSelectedDiffType(DiffType.Modification)
+ } else {
+ const { solution, sql } = await debugSql({
+ sql: snippet.snippet.content.sql.replace(sqlAiDisclaimerComment, '').trim(),
+ errorMessage: result.error.message,
+ entityDefinitions,
+ })
+
+ const formattedSql =
+ sqlAiDisclaimerComment +
+ '\n\n' +
+ format(sql, {
+ language: 'postgresql',
+ keywordCase: 'lower',
+ })
+ setDebugSolution(solution)
+ setSourceSqlDiff({
+ original: snippet.snippet.content.sql,
+ modified: formattedSql,
+ })
+ setSelectedDiffType(DiffType.Modification)
+ }
} catch (error: unknown) {
// [Joshen] There's a tendency for the SQL debug to chuck a lengthy error message
// that's not relevant for the user - so we prettify it here by avoiding to return the
@@ -482,7 +494,6 @@ const SQLEditor = () => {
label: debugSolution ? 'debug_snippet' : 'edit_snippet',
})
- setSelectedMessage(undefined)
setSelectedDiffType(DiffType.Modification)
setDebugSolution(undefined)
setSourceSqlDiff(undefined)
@@ -509,7 +520,6 @@ const SQLEditor = () => {
label: debugSolution ? 'debug_snippet' : 'edit_snippet',
})
- setSelectedMessage(undefined)
setDebugSolution(undefined)
setSourceSqlDiff(undefined)
setPendingTitle(undefined)
@@ -588,6 +598,12 @@ const SQLEditor = () => {
}
}, [isSuccessReadReplicas, databases, ref])
+ useEffect(() => {
+ if (snapV2.diffContent !== undefined) {
+ updateEditorWithCheckForDiff(snapV2.diffContent)
+ }
+ }, [snapV2.diffContent])
+
const defaultSqlDiff = useMemo(() => {
if (!sourceSqlDiff) {
return { original: '', modified: '' }
@@ -610,8 +626,6 @@ const SQLEditor = () => {
}
}, [selectedDiffType, sourceSqlDiff])
- const aiPanelRef = useRef(null)
-
return (
<>
{
direction="vertical"
autoSaveId={LOCAL_STORAGE_KEYS.SQL_EDITOR_SPLIT_SIZE}
>
- {(isAiOpen || isDiffOpen) && !hasHipaaAddon && (
+ {(isAssistantOpen || isDiffOpen) && !hasHipaaAddon && (
{
appSnap.setShowAiSettingsModal(true)
@@ -715,14 +729,36 @@ const SQLEditor = () => {
)}
- {!isAiOpen && (
+ {!isAssistantV2Enabled && !isAiOpen && (
aiPanelRef.current?.expand()}
- className={cn(
- 'group absolute z-10 rounded-lg right-[24px] top-4 transition-all duration-200 ease-out'
- )}
+ className="group absolute z-10 rounded-lg right-[24px] top-4 transition-all duration-200 ease-out"
+ onClick={() => {
+ if (isAssistantV2Enabled) {
+ const state = getSqlEditorV2StateSnapshot()
+ const snippet = state.snippets[id]
+ const editor = editorRef.current
+ const selection = editor?.getSelection()
+ const selectedValue = selection
+ ? editor?.getModel()?.getValueInRange(selection)
+ : undefined
+ const sql = snippet
+ ? (selectedValue || editorRef.current?.getValue()) ??
+ snippet.snippet.content.sql
+ : selectedValue || editorRef.current?.getValue()
+
+ appSnap.setAiAssistantPanel({
+ open: true,
+ sqlSnippets: sql ? [sql] : [],
+ initialInput: sql
+ ? `Help me make a change to the attached sql snippet`
+ : '',
+ })
+ } else {
+ aiPanelRef.current?.expand()
+ }
+ }}
>
@@ -860,25 +896,27 @@ const SQLEditor = () => {
-
-
-
setIsAiOpen(false)}
- onExpand={() => setIsAiOpen(true)}
- >
- aiPanelRef.current?.collapse()}
- />
-
+ {!isAssistantV2Enabled && (
+ <>
+
+
setIsAiOpen(false)}
+ onExpand={() => setIsAiOpen(true)}
+ >
+ aiPanelRef.current?.collapse()}
+ />
+
+
+ )}
)
diff --git a/apps/studio/components/interfaces/SQLEditor/hooks.ts b/apps/studio/components/interfaces/SQLEditor/hooks.ts
new file mode 100644
index 00000000000..f3a06b50be5
--- /dev/null
+++ b/apps/studio/components/interfaces/SQLEditor/hooks.ts
@@ -0,0 +1,53 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useRouter } from 'next/router'
+import { toast } from 'sonner'
+
+import { useParams } from 'common'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { uuidv4 } from 'lib/helpers'
+import { useProfile } from 'lib/profile'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
+import { createSqlSnippetSkeletonV2 } from './SQLEditor.utils'
+
+export const useNewQuery = () => {
+ const router = useRouter()
+ const { ref } = useParams()
+ const { profile } = useProfile()
+ const { project } = useProjectContext()
+ const snapV2 = useSqlEditorV2StateSnapshot()
+
+ const canCreateSQLSnippet = useCheckPermissions(PermissionAction.CREATE, 'user_content', {
+ resource: { type: 'sql', owner_id: profile?.id },
+ subject: { id: profile?.id },
+ })
+
+ const newQuery = async (sql: string, name: string) => {
+ if (!ref) return console.error('Project ref is required')
+ if (!project) return console.error('Project is required')
+ if (!profile) return console.error('Profile is required')
+
+ if (!canCreateSQLSnippet) {
+ return toast('Your queries will not be saved as you do not have sufficient permissions')
+ }
+
+ try {
+ const snippet = createSqlSnippetSkeletonV2({
+ id: uuidv4(),
+ name,
+ sql,
+ owner_id: profile?.id,
+ project_id: project?.id,
+ })
+ snapV2.addSnippet({ projectRef: ref, snippet })
+ snapV2.addNeedsSaving(snippet.id)
+ router.push(`/project/${ref}/sql/${snippet.id}`)
+ } catch (error: any) {
+ toast.error(`Failed to create new query: ${error.message}`)
+ }
+ }
+
+ return { newQuery }
+}
+
+export default useNewQuery
diff --git a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
index f3c8beb61d3..789ee83d5b9 100644
--- a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
@@ -1,11 +1,11 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useQueryClient } from '@tanstack/react-query'
+import { ExternalLink, Info } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'
-import { ExternalLink, Info } from 'lucide-react'
import { useParams } from 'common'
import {
@@ -32,7 +32,6 @@ import {
AlertTitle_Shadcn_,
Badge,
Button,
- CriticalIcon,
Modal,
Radio,
SidePanel,
@@ -45,17 +44,14 @@ const ComputeInstanceSidePanel = () => {
const { ref: projectRef } = useParams()
const { project: selectedProject } = useProjectContext()
const organization = useSelectedOrganization()
-
const computeSizeChangesDisabled = useFlag('disableComputeSizeChanges')
+ const diskAndComputeForm = useFlag('diskAndComputeForm')
const [showConfirmationModal, setShowConfirmationModal] = useState(false)
-
const canUpdateCompute = useCheckPermissions(
PermissionAction.BILLING_WRITE,
'stripe.subscriptions'
)
-
const isProjectActive = useIsProjectActive()
-
const { panel, setPanel, closePanel } = useAddonsPagePanel()
const visible = panel === 'computeInstance'
@@ -176,16 +172,6 @@ const ComputeInstanceSidePanel = () => {
hasReadReplicas &&
(isDowngradingToBelowSmall || hasMoreThanTwoReplicasForXLAndAbove)
- useEffect(() => {
- if (visible) {
- if (subscriptionCompute !== undefined) {
- setSelectedOption(subscriptionCompute.variant.identifier)
- } else {
- setSelectedOption(defaultInstanceSize)
- }
- }
- }, [visible, isLoading])
-
const onConfirmUpdateComputeInstance = async () => {
if (!projectRef) return console.error('Project ref is required')
if (!projectId) return console.error('Project ID is required')
@@ -210,6 +196,22 @@ const ComputeInstanceSidePanel = () => {
}
}
+ useEffect(() => {
+ if (visible) {
+ if (subscriptionCompute !== undefined) {
+ setSelectedOption(subscriptionCompute.variant.identifier)
+ } else {
+ setSelectedOption(defaultInstanceSize)
+ }
+ }
+ }, [visible, isLoading])
+
+ useEffect(() => {
+ if (visible && diskAndComputeForm) {
+ router.push(`/project/${projectRef}/settings/compute-and-disk`)
+ }
+ }, [visible, diskAndComputeForm, router, projectRef])
+
return (
<>
{
const { ref } = useParams()
@@ -80,12 +80,8 @@ const ResetDbPassword = ({ disabled = false }) => {
}
}
- function generateStrongPassword() {
- const password = generator.generate({
- length: 16,
- numbers: true,
- uppercase: true,
- })
+ function generatePassword() {
+ const password = generateStrongPassword()
setPassword(password)
delayedCheckPasswordStrength(password)
}
@@ -148,7 +144,7 @@ const ResetDbPassword = ({ disabled = false }) => {
passwordStrengthScore={passwordStrengthScore}
passwordStrengthMessage={passwordStrengthMessage}
password={password}
- generateStrongPassword={generateStrongPassword}
+ generateStrongPassword={generatePassword}
/>
}
/>
diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
index 0f7ff4d7fbd..0763d3e39fc 100644
--- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
@@ -62,7 +62,7 @@ const DiskSizeConfiguration = ({ disabled = false }: DiskSizeConfigurationProps)
projectRef: project?.ref,
connectionString: project?.connectionString,
})
- const databaseSizeBytesUsed = data?.result[0].db_size ?? 0
+ const databaseSizeBytesUsed = data ?? 0
return (
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
index e5430310967..81d8460c339 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
@@ -3,8 +3,8 @@ import { useCallback } from 'react'
import { toast } from 'sonner'
import { useParams } from 'common'
-import { IntegrationConnectionItem } from 'components/interfaces/Integrations/IntegrationConnection'
-import { EmptyIntegrationConnection } from 'components/interfaces/Integrations/IntegrationPanels'
+import { IntegrationConnectionItem } from 'components/interfaces/Integrations/VercelGithub/IntegrationConnection'
+import { EmptyIntegrationConnection } from 'components/interfaces/Integrations/VercelGithub/IntegrationPanels'
import { Markdown } from 'components/interfaces/Markdown'
import {
ScaffoldContainer,
diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
index c2825bfceee..131895eae2d 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
@@ -4,12 +4,12 @@ import { useCallback, useMemo } from 'react'
import { toast } from 'sonner'
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { IntegrationConnectionItem } from 'components/interfaces/Integrations/IntegrationConnection'
+import { IntegrationConnectionItem } from 'components/interfaces/Integrations/VercelGithub/IntegrationConnection'
import {
EmptyIntegrationConnection,
IntegrationConnectionHeader,
IntegrationInstallation,
-} from 'components/interfaces/Integrations/IntegrationPanels'
+} from 'components/interfaces/Integrations/VercelGithub/IntegrationPanels'
import { Markdown } from 'components/interfaces/Markdown'
import {
ScaffoldContainer,
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
index 4168bea354c..2da4d335752 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
@@ -363,6 +363,7 @@ export enum LogsTableName {
POSTGREST = 'postgrest_logs',
SUPAVISOR = 'supavisor_logs',
WAREHOUSE = 'warehouse_logs',
+ CRON_JOBS = 'cron_job_run_details',
}
export const LOGS_TABLES = {
@@ -376,6 +377,7 @@ export const LOGS_TABLES = {
postgrest: LogsTableName.POSTGREST,
supavisor: LogsTableName.SUPAVISOR,
warehouse: LogsTableName.WAREHOUSE,
+ cron: LogsTableName.CRON_JOBS,
}
export const LOGS_SOURCE_DESCRIPTION = {
@@ -389,6 +391,7 @@ export const LOGS_SOURCE_DESCRIPTION = {
[LogsTableName.POSTGREST]: 'RESTful API web server logs',
[LogsTableName.SUPAVISOR]: 'Cloud-native Postgres connection pooler logs',
[LogsTableName.WAREHOUSE]: 'Logs obtained from a data warehouse collection',
+ [LogsTableName.CRON_JOBS]: 'Logs obtained from cron job runs',
}
export const genQueryParams = (params: { [k: string]: string }) => {
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
index f9c055618af..3ba1eef4fb8 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
@@ -88,6 +88,7 @@ export type QueryType =
| 'supavisor'
| 'postgrest'
| 'warehouse'
+ | 'cron'
export type Mode = 'simple' | 'custom'
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
index b4c4732ee15..6a4c84ec55c 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
@@ -211,6 +211,9 @@ limit ${limit}
${orderBy}
limit ${limit}
`
+
+ case 'cron_job_run_details':
+ return `select status, start_time, end_time, jobid from ${table} ${where} ${orderBy} limit ${limit}`
}
}
diff --git a/apps/studio/components/interfaces/Settings/Vault/VaultNavTabs.tsx b/apps/studio/components/interfaces/Settings/Vault/VaultNavTabs.tsx
deleted file mode 100644
index 27d3f4b16c7..00000000000
--- a/apps/studio/components/interfaces/Settings/Vault/VaultNavTabs.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Link from 'next/link'
-import React, { PropsWithChildren } from 'react'
-import { NavMenu, NavMenuItem } from 'ui'
-
-type Props = {
- projRef: string
- activeTab: 'secrets' | 'keys'
-}
-
-const VaultNavTabs = (props: PropsWithChildren
) => {
- return (
-
-
-
-
-
-
- )
-}
-
-export default VaultNavTabs
diff --git a/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx b/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
deleted file mode 100644
index b5a53421cb6..00000000000
--- a/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import * as Tooltip from '@radix-ui/react-tooltip'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useTheme } from 'next-themes'
-import Link from 'next/link'
-import { useState } from 'react'
-import { toast } from 'sonner'
-
-import { useParams } from 'common'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { useDatabaseExtensionEnableMutation } from 'data/database-extensions/database-extension-enable-mutation'
-import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
-import { executeSql } from 'data/sql/execute-sql-query'
-import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { BASE_PATH } from 'lib/constants'
-import { Button } from 'ui'
-import { ExternalLink } from 'lucide-react'
-
-const VaultToggle = () => {
- const { ref } = useParams()
- const { resolvedTheme } = useTheme()
- const { project } = useProjectContext()
- const [isEnabling, setIsEnabling] = useState(false)
- const canToggleVault = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'extensions')
-
- const { data } = useDatabaseExtensionsQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
- const vaultExtension = (data ?? []).find((ext) => ext.name === 'supabase_vault')
- const isNotAvailable = vaultExtension === undefined
-
- const { mutate: enableExtension } = useDatabaseExtensionEnableMutation({
- onSuccess: () => {
- toast.success(`Vault is now enabled for your project!`)
- },
- onError: (error) => {
- toast.error(`Failed to enable Vault for your project: ${error.message}`)
- setIsEnabling(false)
- },
- })
-
- const onEnableVault = async () => {
- if (vaultExtension === undefined) return
- if (project === undefined) return console.error('Project is required')
-
- setIsEnabling(true)
-
- try {
- await executeSql({
- projectRef: project.ref,
- connectionString: project.connectionString,
- sql: `create schema if not exists ${vaultExtension.schema ?? 'vault'};`,
- })
- } catch (createSchemaError: any) {
- setIsEnabling(false)
- return toast.error(`Failed to create schema: ${createSchemaError.message}`)
- }
-
- enableExtension({
- projectRef: project.ref,
- connectionString: project.connectionString,
- schema: vaultExtension.schema ?? 'vault',
- name: vaultExtension.name,
- version: vaultExtension.default_version,
- cascade: true,
- })
- }
-
- return (
-
-
-
-
-
Enable Vault today
-
- Supabase Vault is a Postgres extension for managing secrets and encryption inside your
- database without leaking any sensitive information.
-
-
- {isNotAvailable ? (
-
-
-
-
- Vault is not available for this project yet.
-
-
- Do reach out to us if you're interested!
-
-
-
-
-
-
-
-
-
-
- ) : (
-
-
}>
-
- About Vault
-
-
-
-
- onEnableVault()}
- >
- Enable Vault
-
-
- {!canToggleVault && (
-
-
-
-
- You need additional permissions to enable Vault for this project
-
-
-
-
- )}
-
-
- )}
-
-
-
>({})
const [columnFields, setColumnFields] = useState()
const [fkRelations, setFkRelations] = useState([])
+ const [placeholder, setPlaceholder] = useState(
+ getPlaceholderText(columnFields?.format, columnFields?.name)
+ )
const { data: types } = useEnumeratedTypesQuery({
projectRef: project?.ref,
@@ -129,6 +133,7 @@ const ColumnEditor = ({
}
const changedName = 'name' in changes && changes.name !== columnFields.name
+ const changedFormat = 'format' in changes && changes.format !== columnFields.format
if (
changedName &&
@@ -144,6 +149,12 @@ const ColumnEditor = ({
)
}
+ if (changedName || changedFormat) {
+ setPlaceholder(
+ getPlaceholderText(changes.format || columnFields.format, changes.name || columnFields.name)
+ )
+ }
+
const updatedColumnFields: ColumnField = { ...columnFields, ...changes }
setColumnFields(updatedColumnFields)
updateEditorDirty()
@@ -253,6 +264,7 @@ const ColumnEditor = ({
onUpdateField({ format })}
+ onUpdateColumnType={(format: string) => {
+ if (format[0] === '_') {
+ onUpdateField({ format: format.slice(1), isArray: true, isIdentity: false })
+ } else {
+ onUpdateField({ format })
+ }
+ }}
onUpdateFkRelations={setFkRelations}
/>
@@ -342,7 +360,7 @@ const ColumnEditor = ({
diff --git a/apps/studio/components/layouts/AppLayout/AssistantButton.tsx b/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
new file mode 100644
index 00000000000..7ea54e9a94d
--- /dev/null
+++ b/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
@@ -0,0 +1,20 @@
+import { useAppStateSnapshot } from 'state/app-state'
+import { AiIconAnimation, Button } from 'ui'
+
+const AssistantButton = () => {
+ const { setAiAssistantPanel, aiAssistantPanel } = useAppStateSnapshot()
+
+ return (
+
{
+ setAiAssistantPanel({ open: !aiAssistantPanel.open })
+ }}
+ icon={
+}
+
+export const Header = forwardRef(({ scroll }, ref) => {
+ const router = useRouter()
+ const { id } = useParams()
+ // Get project context
+ const { project } = useProjectContext()
+ // Find the integration details based on ID
+ const integration = INTEGRATIONS.find((i) => i.id === id)
+ // Check if we're on the main integrations page
+ const isIntegrationsHome = !id
+
+ const layoutTransition = { duration: 0.15 }
+
+ const headerRef = useRef(null)
+
+ // Input range: The scrollY range for triggering the animation (e.g., 0 to 200px of scroll)
+ const scrollRange = [40, headerRef.current?.offsetHeight ?? 128]
+
+ // Output range: The Y position range for the icon (e.g., 0 to 150px movement)
+ const iconYRange = [0, headerRef.current?.offsetHeight ? headerRef.current.offsetHeight / 2 : 64] // Change 150 to set the end Y position of the icon
+ // Output range: The size range for the icon container
+ const sizeRange = [32, 20] // From 24px (scrolled) to 32px (top)
+ // Output range: The padding range for the image
+ const iconPaddingRange = [3, 1.5] // From 1.5px (scrolled) to 4px (top)
+
+ // Map scrollY to the icon's Y position
+ const iconY = useTransform(scroll?.scrollY!, scrollRange, iconYRange)
+
+ const iconSize = useTransform(scroll?.scrollY!, scrollRange, sizeRange)
+
+ const iconPadding = useTransform(scroll?.scrollY!, scrollRange, iconPaddingRange)
+
+ if (!router?.isReady) {
+ return null
+ }
+
+ return (
+ <>
+
+
+ {/* Main header content */}
+
+
+ {/* Container with animated padding */}
+
+ {/* Navigation link back to integrations landing */}
+
+ {/* Back arrow */}
+
+ {!isIntegrationsHome && (
+
+
+ )}
+
+ {/* Two separate spans with the same key */}
+ {isIntegrationsHome ? (
+
+ Integrations
+
+ ) : (
+
+
+ )}
+
+
+ {/* Integration details section - only shown when viewing a specific integration */}
+
+ {!isIntegrationsHome && integration && (
+
+ {/* Integration icon */}
+
+ {integration.icon({
+ style: {
+ padding: iconPadding.get(),
+ },
+ })}
+
+
+ {/* Integration name and description */}
+
+
+
+ {integration.name}
+ {integration.beta && (
+
+ Beta
+
+ )}
+
+
{integration.description}
+
+
+ )}
+
+
+
+
+
+ )
+})
+
+Header.displayName = 'Header'
diff --git a/apps/studio/components/layouts/Integrations/layout.tsx b/apps/studio/components/layouts/Integrations/layout.tsx
new file mode 100644
index 00000000000..4c94e4c3074
--- /dev/null
+++ b/apps/studio/components/layouts/Integrations/layout.tsx
@@ -0,0 +1,245 @@
+import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect, useRef, useState } from 'react'
+
+import { IntegrationDefinition } from 'components/interfaces/Integrations/Landing/Integrations.constants'
+import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
+import { Header } from 'components/layouts/Integrations/header'
+import ProjectLayout from 'components/layouts/ProjectLayout/ProjectLayout'
+import { ProductMenu } from 'components/ui/ProductMenu'
+import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
+import { useScroll } from 'framer-motion'
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { withAuth } from 'hooks/misc/withAuth'
+import { useFlag } from 'hooks/ui/useFlag'
+import { IntegrationTabs } from './tabs'
+import { Menu, Separator } from 'ui'
+import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem'
+import { GenericSkeletonLoader } from 'ui-patterns'
+import AlertError from 'components/ui/AlertError'
+
+/**
+ * Layout component for the Integrations section
+ * Handles scroll-based sticky header behavior and authentication
+ */
+const IntegrationsLayout = ({ ...props }: PropsWithChildren) => {
+ const layoutSidebar = useFlag('integrationLayoutSidebar')
+ if (layoutSidebar) {
+ return (null)
+ const headerRef = useRef(null)
+ // Track if header should be in sticky state
+ const [isSticky, setIsSticky] = useState(false)
+
+ // State to hold the scrollable container element
+ const [container, setContainer] = useState(null)
+
+ // Initialize framer-motion scroll tracking
+ // Only tracks scroll when container is available
+ const scroll = useScroll({
+ container: container ? { current: container } : undefined,
+ })
+
+ // Set up container reference once mainElementRef is mounted
+ useEffect(() => {
+ if (mainElementRef.current) {
+ setContainer(mainElementRef.current)
+ }
+ }, [mainElementRef.current])
+
+ // Set up scroll event listener to handle sticky header behavior
+ useEffect(() => {
+ // Exit if scroll tracking isn't available yet
+ if (!scroll.scrollY) return
+
+ // Update sticky state based on scroll position relative to header height
+ const handleScroll = (latest: number) => {
+ if (headerRef.current) {
+ setIsSticky(latest > headerRef.current.offsetHeight)
+ }
+ }
+
+ // Subscribe to scroll position changes
+ const unsubscribe = scroll.scrollY.on('change', handleScroll)
+
+ // Clean up scroll listener on unmount
+ return () => {
+ unsubscribe()
+ }
+ }, [scroll.scrollY])
+
+ const segments = router.asPath.split('/')
+ // construct the page url to be used to determine the active state for the sidebar
+ const page = `${segments[3]}${segments[4] ? `/${segments[4]}` : ''}`
+
+ const {
+ installedIntegrations: integrations,
+ error,
+ isLoading,
+ isSuccess,
+ isError,
+ } = useInstalledIntegrations()
+ const installedIntegrationItems = integrations.map((integration) => ({
+ name: integration.name,
+ label: integration.beta ? 'Beta' : undefined,
+ key: `integrations/${integration.id}`,
+ url: `/project/${project?.ref}/integrations/${integration.id}/overview`,
+ icon: (
+
+ {integration.icon({ className: 'p-1' })}
+
+ ),
+ items: [],
+ }))
+
+ return (
+
+
+
+ Installed integrations
+
+ {installedIntegrationItems.map((item) => (
+
+ ))}
+
+ {integration.icon({ className: 'p-1' })}
+
+ ),
+ items: [],
+ }))
+
+ return (
+
+
+
+ Installed integrations
+
+ {installedIntegrationItems.map((item) => (
+
+ ))}
+
& MotionProps>
+
+// Output range: The padding range for the nav (from compact to expanded)
+const paddingRange = [40, 86]
+
+// Output range: The padding range for the image
+const iconPaddingRange = [3, 1.5] // From 1.5px (scrolled) to 4px (top)
+
+interface IntegrationTabsProps {
+ scroll: ReturnType
+ isSticky?: boolean
+}
+
+export const IntegrationTabs = ({ scroll, isSticky }: IntegrationTabsProps) => {
+ const navRef = useRef(null)
+ const { project } = useProjectContext()
+ const { id, pageId, childId } = useParams()
+
+ const { installedIntegrations } = useInstalledIntegrations()
+ // Find the integration details based on ID
+ const integration = INTEGRATIONS.find((i) => i.id === id)
+
+ const headerRef = useRef(null)
+
+ // Input range: The scrollY range for triggering the animation (e.g., 0 to 200px of scroll)
+ const scrollRange = [40, headerRef.current?.offsetHeight ?? 128]
+ const navInnerLeftPaddingX = useTransform(scroll?.scrollY!, scrollRange, paddingRange)
+ const iconPadding = useTransform(scroll?.scrollY!, scrollRange, iconPaddingRange)
+
+ const installedIntegration = installedIntegrations?.find((i) => i.id === id)
+
+ const tabs = installedIntegration
+ ? integration?.navigation ?? []
+ : (integration?.navigation ?? []).filter((tab) => tab.route === 'overview')
+
+ if (!integration) return null
+
+ return (
+
+
+
+ {isSticky && (
+
+ {integration?.icon({
+ style: { padding: iconPadding.get() },
+ })}
+
+ )}
+
+ {tabs.map((tab) => {
+ const tabUrl = `/project/${project?.ref}/integrations/${integration?.id}/${tab.route}`
+ return (
+
+
+
+
+
+ {tab.hasChild && childId && (
+ <>
+
+
+
+
+ {tab.childIcon}
+
+
+
+ )}
+
+
+
+ )
+}
+
+IntegrationTabs.displayName = 'IntegrationTabs'
diff --git a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
index ae123766bdf..0eda209a230 100644
--- a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
+++ b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
@@ -164,6 +164,12 @@ export function LogsSidebarMenuV2() {
url: `/project/${ref}/logs/edge-functions-logs`,
items: [],
},
+ {
+ name: 'Cron Jobs',
+ key: 'cron-logs',
+ url: `/project/${ref}/logs/cron-logs`,
+ items: [],
+ },
]
const filteredLogs = BASE_COLLECTIONS.filter((collection) => {
diff --git a/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrations.Commands.tsx b/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrations.Commands.tsx
index 0fdc8a11075..0601598e5a8 100644
--- a/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrations.Commands.tsx
+++ b/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrations.Commands.tsx
@@ -77,7 +77,7 @@ export function useDatabaseGotoCommands(options?: CommandOptions) {
id: 'nav-database-hooks',
name: 'Webhooks',
value: 'Database: Webhooks',
- route: `/project/${ref}/database/hooks`,
+ route: `/project/${ref}/integrations/hooks`,
defaultHidden: true,
},
{
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index 0935a2ed968..13a481d1a35 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -17,11 +17,14 @@ import BreadcrumbsView from './BreadcrumbsView'
import { FeedbackDropdown } from './FeedbackDropdown'
import HelpPopover from './HelpPopover'
import NotificationsPopoverV2 from './NotificationsPopoverV2/NotificationsPopover'
+import AssistantButton from 'components/layouts/AppLayout/AssistantButton'
+import { useIsAssistantV2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder = true }: any) => {
const { ref: projectRef } = useParams()
const selectedProject = useSelectedProject()
const selectedOrganization = useSelectedOrganization()
+ const isAssistantV2Enabled = useIsAssistantV2Enabled()
const isBranchingEnabled = selectedProject?.is_branch_enabled === true
const { data: subscription } = useOrgSubscriptionQuery({
@@ -117,6 +120,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
diff --git a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
index 0032c511051..256621653f9 100644
--- a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -9,7 +9,7 @@ import { useState } from 'react'
import {
useIsAPIDocsSidePanelEnabled,
- useIsDatabaseFunctionsAssistantEnabled,
+ useIsAssistantV2Enabled,
} from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { useProjectLintsQuery } from 'data/lint/lint-query'
import { ProjectIndexPageLink } from 'data/prefetchers/project.$ref'
@@ -73,7 +73,7 @@ const NavigationBar = () => {
const navLayoutV2 = useFlag('navigationLayoutV2')
const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
- const isFunctionsAssistantEnabled = useIsDatabaseFunctionsAssistantEnabled()
+ const isFunctionsAssistantEnabled = useIsAssistantV2Enabled()
const [userDropdownOpen, setUserDropdownOpenState] = useState(false)
const [allowNavPanelToExpand] = useLocalStorageQuery(
@@ -181,7 +181,9 @@ const NavigationBar = () => {
}
label="Assistant"
shortcut="I"
- onClick={() => snap.setAiAssistantPanel({ open: true, editor: null })}
+ onClick={() => {
+ snap.setAiAssistantPanel({ open: !snap.aiAssistantPanel.open })
+ }}
/>
diff --git a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
index 6d695d60116..d55afbd075c 100644
--- a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
@@ -145,7 +145,7 @@ export const generateOtherRoutes = (ref?: string, project?: Project): Route[] =>
key: 'integrations',
label: 'Integrations',
icon:
,
- link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/integrations/wrappers`),
+ link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/integrations`),
},
]
}
diff --git a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index 8c4ceeb0f58..204958a3349 100644
--- a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -1,9 +1,11 @@
import { useParams } from 'common'
import Head from 'next/head'
import { useRouter } from 'next/router'
-import { Fragment, PropsWithChildren, ReactNode, useEffect } from 'react'
+import { forwardRef, Fragment, PropsWithChildren, ReactNode, useEffect } from 'react'
+import { useIsAssistantV2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import ProjectAPIDocs from 'components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
+import { AiAssistantPanel } from 'components/ui/AIAssistantPanel/AIAssistantPanel'
import AISettingsModal from 'components/ui/AISettingsModal'
import { Loading } from 'components/ui/Loading'
import ResourceExhaustionWarningBanner from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
@@ -12,8 +14,9 @@ import { useSelectedProject } from 'hooks/misc/useSelectedProject'
import { withAuth } from 'hooks/misc/withAuth'
import { useFlag } from 'hooks/ui/useFlag'
import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
+import { useAppStateSnapshot } from 'state/app-state'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup, cn } from 'ui'
+import { cn, ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
import AppLayout from '../AppLayout/AppLayout'
import EnableBranchingModal from '../AppLayout/EnableBranchingButton/EnableBranchingModal'
import BuildingState from './BuildingState'
@@ -26,11 +29,11 @@ import PauseFailedState from './PauseFailedState'
import PausingState from './PausingState'
import ProductMenuBar from './ProductMenuBar'
import { ProjectContextProvider } from './ProjectContext'
+import { ResizingState } from './ResizingState'
import RestartingState from './RestartingState'
import RestoreFailedState from './RestoreFailedState'
import RestoringState from './RestoringState'
import { UpgradingState } from './UpgradingState'
-import { ResizingState } from './ResizingState'
// [Joshen] This is temporary while we unblock users from managing their project
// if their project is not responding well for any reason. Eventually needs a bit of an overhaul
@@ -69,111 +72,153 @@ export interface ProjectLayoutProps {
resizableSidebar?: boolean
}
-const ProjectLayout = ({
- title,
- isLoading = false,
- isBlocking = true,
- product = '',
- productMenu,
- children,
- hideHeader = false,
- hideIconBar = false,
- selectedTable,
- resizableSidebar = false,
-}: PropsWithChildren
) => {
- const router = useRouter()
- const { ref: projectRef } = useParams()
- const selectedOrganization = useSelectedOrganization()
- const selectedProject = useSelectedProject()
- const projectName = selectedProject?.name
- const organizationName = selectedOrganization?.name
+const ProjectLayout = forwardRef>(
+ (
+ {
+ title,
+ isLoading = false,
+ isBlocking = true,
+ product = '',
+ productMenu,
+ children,
+ hideHeader = false,
+ hideIconBar = false,
+ selectedTable,
+ resizableSidebar = false,
+ },
+ ref
+ ) => {
+ const router = useRouter()
+ const { ref: projectRef } = useParams()
+ const selectedOrganization = useSelectedOrganization()
+ const selectedProject = useSelectedProject()
+ const { aiAssistantPanel, setAiAssistantPanel } = useAppStateSnapshot()
+ const { open } = aiAssistantPanel
- const navLayoutV2 = useFlag('navigationLayoutV2')
+ const navLayoutV2 = useFlag('navigationLayoutV2')
+ const isAssistantV2Enabled = useIsAssistantV2Enabled()
- const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
- const showProductMenu = selectedProject
- ? selectedProject.status === PROJECT_STATUS.ACTIVE_HEALTHY ||
- (selectedProject.status === PROJECT_STATUS.COMING_UP &&
- router.pathname.includes('/project/[ref]/settings'))
- : true
+ const projectName = selectedProject?.name
+ const organizationName = selectedOrganization?.name
- const ignorePausedState =
- router.pathname === '/project/[ref]' || router.pathname.includes('/project/[ref]/settings')
- const showPausedState = isPaused && !ignorePausedState
+ const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
+ const showProductMenu = selectedProject
+ ? selectedProject.status === PROJECT_STATUS.ACTIVE_HEALTHY ||
+ (selectedProject.status === PROJECT_STATUS.COMING_UP &&
+ router.pathname.includes('/project/[ref]/settings'))
+ : true
- return (
-
-
-
-
- {title
- ? `${title} | Supabase`
- : selectedTable
- ? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
- : projectName
- ? `${projectName} | ${organizationName} | Supabase`
- : organizationName
- ? `${organizationName} | Supabase`
- : 'Supabase'}
-
-
- {/* Left-most navigation side bar to access products */}
- {!hideIconBar &&
}
- {/* Product menu bar */}
-
- {
+ const handler = (e: KeyboardEvent) => {
+ if (e.metaKey && e.code === 'KeyI') setAiAssistantPanel({ open: !open })
+ }
+ if (isAssistantV2Enabled) window.addEventListener('keydown', handler)
+ return () => window.removeEventListener('keydown', handler)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isAssistantV2Enabled, open])
+
+ return (
+
+
+
+
+ {title
+ ? `${title} | Supabase`
+ : selectedTable
+ ? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
+ : projectName
+ ? `${projectName} | ${organizationName} | Supabase`
+ : organizationName
+ ? `${organizationName} | Supabase`
+ : 'Supabase'}
+
+
+ {/* Left-most navigation side bar to access products */}
+ {!hideIconBar &&
}
+ {/* Product menu bar */}
+
-
- {productMenu}
-
-
-
- {!navLayoutV2 && !hideHeader && IS_PLATFORM &&
- {showPausedState ? (
-
- ) : (
-
-
- )}
-
-
-
-
+ {productMenu}
+
+
+
+ {!navLayoutV2 && !hideHeader && IS_PLATFORM &&
+
+
+ {showPausedState ? (
+
+ ) : (
+
+
+ )}
+
+
+ {aiAssistantPanel.open && (
+ <>
+
+
+
+ )}
+
+
+
+
-
- )
-}
+ {
[]
)
+ useEffect(() => {
+ if (viewOngoingQueries === 'true') setShowOngoingQueries(true)
+ }, [viewOngoingQueries])
+
return (
& { bottomPadding?: boolean }
>(({ className, bottomPadding, ...props }, ref) => {
+ const { aiAssistantPanel } = useAppStateSnapshot()
+ const { open } = aiAssistantPanel
return (
)
})
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index 6b265070ee2..57b63d892f8 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -21,7 +21,6 @@ import {
MAX_EXPORT_ROW_COUNT_MESSAGE,
} from 'components/grid/components/header/Header'
import { parseSupaTable } from 'components/grid/SupabaseGrid.utils'
-import { Markdown } from 'components/interfaces/Markdown'
import {
formatTableRowsToSQL,
getEntityLintDetails,
@@ -117,7 +116,7 @@ const EntityListItem: ItemRenderer = ({
})
if (isTableLike(table) && table.live_rows_estimate > MAX_EXPORT_ROW_COUNT) {
return toast.error(
- {MAX_EXPORT_ROW_COUNT_MESSAGE}
,
{ id: toastId }
)
}
@@ -171,7 +170,7 @@ const EntityListItem: ItemRenderer = ({
if (isTableLike(table) && table.live_rows_estimate > MAX_EXPORT_ROW_COUNT) {
return toast.error(
- {MAX_EXPORT_ROW_COUNT_MESSAGE}
,
{ id: toastId }
)
}
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
index 08942f7d655..74c2d00d301 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
@@ -1,173 +1,128 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { AnimatePresence, motion } from 'framer-motion'
+import { motion } from 'framer-motion'
import { last } from 'lodash'
-import { FileText, MessageCircleMore, Plus, WandSparkles } from 'lucide-react'
-import Link from 'next/link'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { FileText } from 'lucide-react'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
import { toast } from 'sonner'
import type { Message as MessageType } from 'ai/react'
import { useChat } from 'ai/react'
-import { useParams } from 'common'
+import { subscriptionHasHipaaAddon } from 'components/interfaces/Billing/Subscription/Subscription.utils'
import { Markdown } from 'components/interfaces/Markdown'
import OptInToOpenAIToggle from 'components/interfaces/Organization/GeneralSettings/OptInToOpenAIToggle'
-import { MessageWithDebug } from 'components/interfaces/SQLEditor/AiAssistantPanel'
-import { DiffType } from 'components/interfaces/SQLEditor/SQLEditor.types'
+import { SQL_TEMPLATES } from 'components/interfaces/SQLEditor/SQLEditor.queries'
import { useCheckOpenAIKeyQuery } from 'data/ai/check-api-key-query'
-import { useSqlDebugMutation } from 'data/ai/sql-debug-mutation'
-import { useEntityDefinitionQuery } from 'data/database/entity-definition-query'
-import { useEntityDefinitionsQuery } from 'data/database/entity-definitions-query'
+import { constructHeaders } from 'data/fetchers'
import { useOrganizationUpdateMutation } from 'data/organizations/organization-update-mutation'
+import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
+import { useTablesQuery } from 'data/tables/tables-query'
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { useOrgOptedIntoAi } from 'hooks/misc/useOrgOptedIntoAi'
-import { useSchemasForAi } from 'hooks/misc/useSchemasForAi'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { useSelectedProject } from 'hooks/misc/useSelectedProject'
import { useFlag } from 'hooks/ui/useFlag'
-import {
- BASE_PATH,
- IS_PLATFORM,
- OPT_IN_TAGS,
- TELEMETRY_ACTIONS,
- TELEMETRY_CATEGORIES,
- TELEMETRY_LABELS,
-} from 'lib/constants'
+import { BASE_PATH, IS_PLATFORM, OPT_IN_TAGS } from 'lib/constants'
+import { TELEMETRY_EVENTS, TELEMETRY_VALUES } from 'lib/constants/telemetry'
+import uuidv4 from 'lib/uuid'
import { useAppStateSnapshot } from 'state/app-state'
import {
AiIconAnimation,
Button,
cn,
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuLabel,
- DropdownMenuRadioGroup,
- DropdownMenuRadioItem,
- DropdownMenuSeparator,
- DropdownMenuSub,
- DropdownMenuSubContent,
- DropdownMenuSubTrigger,
- DropdownMenuTrigger,
- SheetHeader,
- SheetSection,
Tooltip_Shadcn_,
TooltipContent_Shadcn_,
+ TooltipProvider_Shadcn_,
TooltipTrigger_Shadcn_,
} from 'ui'
-import { Admonition, AssistantChatForm } from 'ui-patterns'
+import { Admonition, AssistantChatForm, GenericSkeletonLoader } from 'ui-patterns'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import { DocsButton } from '../DocsButton'
-import { ASSISTANT_SUPPORT_ENTITIES } from './AiAssistant.constants'
-import { SupportedAssistantEntities, SupportedAssistantQuickPromptTypes } from './AIAssistant.types'
-import { generatePrompt, retrieveDocsUrl } from './AIAssistant.utils'
-import { ContextBadge } from './ContextBadge'
-import { EntitiesDropdownMenu } from './EntitiesDropdownMenu'
+import AIOnboarding from './AIOnboarding'
+import CollapsibleCodeBlock from './CollapsibleCodeBlock'
import { Message } from './Message'
-import { SchemasDropdownMenu } from './SchemasDropdownMenu'
-import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
+import { useParams } from 'common/hooks'
+import { useSearchParamsShallow } from 'common/hooks'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
+import { useRouter } from 'next/router'
-const ANIMATION_DURATION = 0.3
+const MemoizedMessage = memo(
+ ({ message, isLoading }: { message: MessageType; isLoading: boolean }) => {
+ return (
+ (null)
const bottomRef = useRef(null)
+ const scrollContainerRef = useRef(null)
- const [value, setValue] = useState('')
- const [selectedDatabaseEntity, setSelectedDatabaseEntity] = useState<
- SupportedAssistantEntities | ''
- >('')
- const [selectedSchemas, setSelectedSchemas] = useSchemasForAi(project?.ref!)
- const [contextHistory, setContextHistory] = useState<{
- [key: string]: { entity: string; schemas: string[]; tables: string[] }
- }>({})
- // [Joshen] Mainly for error handling on useChat - cause last sent messages will be voided
+ const [value, setValue] = useState(initialInput)
const [assistantError, setAssistantError] = useState()
const [lastSentMessage, setLastSentMessage] = useState()
const [isConfirmOptInModalOpen, setIsConfirmOptInModalOpen] = useState(false)
-
- const docsUrl = retrieveDocsUrl(selectedDatabaseEntity as SupportedAssistantEntities)
- const entityContext = ASSISTANT_SUPPORT_ENTITIES.find((x) => x.id === selectedDatabaseEntity)
- const noContextAdded =
- selectedDatabaseEntity.length === 0 &&
- selectedSchemas.length === 0 &&
- selectedTables.length === 0
+ const [showFade, setShowFade] = useState(false)
const { data: check } = useCheckOpenAIKeyQuery()
const isApiKeySet = IS_PLATFORM || !!check?.hasKey
- const { data: policies } = useDatabasePoliciesQuery(
- {
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- },
- { enabled: editor === 'rls-policies' }
- )
- const existingPolicies = (policies ?? [])
- .filter((policy) =>
- selectedTables.some((x) => policy.schema === x.schema && policy.table === x.name)
- )
- .sort((a, b) => a.name.localeCompare(b.name))
+ const isInSQLEditor = router.pathname.includes('/sql/[id]')
+ const snippet = snippets[entityId ?? '']
+ const snippetContent = snippet?.snippet?.content?.sql
- const { data: existingDefinition } = useEntityDefinitionQuery({
- id: entity?.id,
- type: editor,
+ const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: selectedOrganization?.slug })
+ const hasHipaaAddon = subscriptionHasHipaaAddon(subscription)
+
+ const { data: tables, isLoading: isLoadingTables } = useTablesQuery({
projectRef: project?.ref,
connectionString: project?.connectionString,
+ schema: 'public',
})
- const { data } = useEntityDefinitionsQuery(
- {
- schemas: selectedSchemas,
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- },
- { enabled: includeSchemaMetadata }
- )
-
- const tableDefinitions =
- selectedTables.length === 0
- ? data?.map((def) => def.sql.trim()) ?? []
- : data
- ?.filter((def) => {
- return selectedTables.some((table) => {
- return def.sql.startsWith(`CREATE TABLE ${table.schema}.${table.name}`)
- })
- })
- .map((def) => def.sql.trim()) ?? []
- const entityDefinitions = includeSchemaMetadata ? tableDefinitions : undefined
+ const currentTable = tables?.find((t) => t.id.toString() === entityId)
+ const currentSchema = searchParams?.get('schema') ?? 'public'
const { mutate: sendEvent } = useSendEventMutation()
- const sendTelemetryEvent = (action: string) => {
+ const sendTelemetryEvent = (value: string) => {
sendEvent({
- action,
- category: TELEMETRY_CATEGORIES.AI_ASSISTANT,
- label: TELEMETRY_LABELS.QUICK_SQL_EDITOR,
+ value,
+ action: TELEMETRY_EVENTS.AI_ASSISTANT_V2,
+ ...((sqlSnippets ?? []).length > 0 ? { label: 'context-added' } : {}),
})
}
@@ -175,28 +130,28 @@ export const AIAssistant = ({
messages: chatMessages,
isLoading: isChatLoading,
append,
+ setMessages,
} = useChat({
id,
- api: `${BASE_PATH}/api/ai/sql/generate-v2`,
+ api: `${BASE_PATH}/api/ai/sql/generate-v3`,
+ maxSteps: 5,
+ // [Joshen] Not currently used atm, but initialMessages will be for...
+ initialMessages,
body: {
- entityDefinitions,
- context: selectedDatabaseEntity,
- existingSql: existingDefinition,
- existingPolicies,
+ includeSchemaMetadata,
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ schema: currentSchema,
+ table: currentTable?.name,
},
- onError: (error) => setAssistantError(JSON.parse(error.message).error),
})
const canUpdateOrganization = useCheckPermissions(PermissionAction.UPDATE, 'organizations')
const { mutate: updateOrganization, isLoading: isUpdating } = useOrganizationUpdateMutation()
- const { isLoading: isDebugSqlLoading } = useSqlDebugMutation()
- const isLoading = isChatLoading || isDebugSqlLoading
-
const messages = useMemo(() => {
const merged = [
- ...debugThread,
- ...chatMessages.map((m) => ({ ...m, isDebug: false })),
+ ...chatMessages,
...(assistantError !== undefined && lastSentMessage !== undefined ? [lastSentMessage] : []),
]
@@ -205,61 +160,40 @@ export const AIAssistant = ({
(a.createdAt?.getTime() ?? 0) - (b.createdAt?.getTime() ?? 0) ||
a.role.localeCompare(b.role)
)
- }, [chatMessages, debugThread, assistantError, lastSentMessage])
+ }, [chatMessages, assistantError, lastSentMessage])
+
+ const renderedMessages = useMemo(
+ () =>
+ messages.map((message) => {
+ return (
+
+ {/* [Joshen] We could try play around with a custom loader for the assistant here */}
+
+ )
+ }
return (
<>
-
-
-
-
- {hasMessages && (
-
- onResetConversation()}>
- Reset conversation
-
-
- )}
-
-
-
-
+
- {hasMessages && (
-
- {messages.map((m, index) => {
- const isFirstUserMessage =
- m.role === 'user' && messages.slice(0, index).every((msg) => msg.role !== 'user')
+
+
+
- return (
-
onDiff({ id: m.id, diffType, sql })}
- >
- {isFirstUserMessage && !includeSchemaMetadata && (
-
- setIsConfirmOptInModalOpen(true)}
- >
- Update AI settings
-
-
- )}
- {isFirstUserMessage &&
- includeSchemaMetadata &&
- selectedSchemas.length === 0 && (
-
- )
- })}
- {assistantError !== undefined && (
-
-
- {hasMessages ? 'New chat' : 'Assistant'}
+
+ {(hasMessages || suggestions || sqlSnippets) && (
+
+ Reset
-
- )}
- {!isLoading && !pendingReply && assistantError === undefined && (
-
- Please verify all responses as the Assistant can make mistakes
-
- )}
- {pendingChatReply && (
-
+ )}
+
+ {!includeSchemaMetadata && (
+
+ {!hasHipaaAddon && (
+ setIsConfirmOptInModalOpen(true)}
+ >
+ Update AI settings
+
+ )}
+
+ )}
+
+
+ {new Date(messages[0].createdAt || new Date()).toLocaleDateString('en-US', {
+ month: 'long',
+ day: 'numeric',
+ year: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ })}
+
+ {renderedMessages}
+ {(last(messages)?.role === 'user' || last(messages)?.content?.length === 0) && (
+
+ Thinking
+
+
+ .
+
+
+ .
+
+
+ .
+
+
+
)}
+ ) : suggestions ? (
+
+
+ Suggestions
+
+ {suggestions.title &&
{suggestions.title}
}
+
+ {suggestions?.prompts?.map((prompt) => (
+
+
+
+
Welcome to Supabase!
+
+ This is the Supabase assistant which will help you create, debug and modify tables,
+ policies, functions and more. You can even use it to query your data using just your
+ words. It looks like we have a blank canvas though, so what are you looking to
+ build? Here are some ideas.
+
+
+
setValue('Generate a database schema for ...')}
+ className="rounded-full"
+ >
+ Generate a ...
+
+ {SQL_TEMPLATES.filter((t) => t.type === 'quickstart').map((qs) => (
+
+
+
+ {
+ setMessages([
+ {
+ id: uuidv4(),
+ role: 'user',
+ createdAt: new Date(Date.now() - 3000),
+ content: qs.description,
+ },
+ {
+ id: uuidv4(),
+ role: 'assistant',
+ createdAt: new Date(),
+ content: `Sure! I can help you with that. Here is a starting point you can run directly or customize further. Would you like to make any changes? \n\n\`\`\`sql\n-- props: {"title": "${qs.title}"}\n${qs.sql}\n\`\`\``,
+ },
+ ])
+ }}
+ >
+ {qs.title}
+
+
+
+ {qs.description}
+
+
+
+ ))}
+
+
+ {sqlSnippets && sqlSnippets.length > 0 && (
+
+ {sqlSnippets.map((snippet, index) => (
+ {
+ const newSnippets = [...sqlSnippets]
+ newSnippets.splice(index, 1)
+ setAiAssistantPanel({ sqlSnippets: newSnippets })
+ }}
+ className="text-xs"
+ />
+ ))}
+
+ )}
+ {disablePrompts && (
+
)}
-
+ }
+ />
+ )}
+
+
textarea]:border-1 [&>textarea]:rounded-md [&>textarea]:!outline-none [&>textarea]:!ring-offset-0 [&>textarea]:!ring-0'
)}
- >
-
- {!hasMessages && (
-
-
- {entity !== undefined && !!entityContext ? (
- <>
- Need help with updating this{' '}
- {entityContext.name}
-
- ) : (
- <>
- How can I help you
- {!!entityContext ? (
- <>
- {' '}
- with{' '}
-
- {entityContext.id === 'rls-policies'
- ? entityContext.label
- : `Database ${entityContext.label}`}
-
-
- ) : (
- ' today'
- )}
-
- )}
- ?
-
-
- )}
-
-
- {disablePrompts && (
-
- )}
- {!isApiKeySet && (
-
- }
- />
- )}
-
-
-
-
-
-
- Add context
-
-
-
- Add context for the assistant
-
-
-
-
-
- Improve the output quality of the assistant by giving it context about what
- you need help with
-
-
-
-
-
Database Entity
-
- Inform about what you're working with
-
-
-
-
- setSelectedDatabaseEntity(value as SupportedAssistantEntities)
- }
- >
- {ASSISTANT_SUPPORT_ENTITIES.map((x) => (
-
- {x.label}
-
- ))}
-
-
-
- )}
- {includeSchemaMetadata && (
- <>
-
-
-
-
Schemas
-
- Share table definitions in the selected schemas
-
-
-
-
-
- {selectedSchemas.length > 0 && (
-
-
-
-
Tables
-
- Select specific tables to share definitions for
-
-
-
-
-
- )}
-
- )}
-
-
-
- {!!entityContext && (
-
setSelectedDatabaseEntity('') : undefined}
- />
- )}
-
- {selectedSchemas.length > 0 && (
- 2 ? ` and ${selectedSchemas.length - 2} other${selectedSchemas.length > 3 ? 's' : ''}` : ''}`}
- onRemove={() => {
- setSelectedSchemas([])
- setAiAssistantPanel({ tables: [] })
- }}
- tooltip={
- selectedSchemas.length > 2 ? (
- <>
-
- {selectedSchemas.length} schemas selected:
-
-
- {selectedSchemas.map((x) => (
- {x}
- ))}
-
-
- ) : undefined
- }
- />
- )}
-
- {selectedTables.length > 0 && (
- x.name)
- .join(
- ', '
- )}${selectedTables.length > 2 ? ` and ${selectedTables.length - 2} other${selectedTables.length > 3 ? 's' : ''}` : ''}`}
- onRemove={() => setAiAssistantPanel({ tables: [] })}
- tooltip={
- selectedTables.length > 2 ? (
- <>
-
- {selectedTables.length} tables selected:
-
-
- {selectedTables.map((x) => (
-
- {x.schema}.{x.name}
-
- ))}
-
-
- ) : undefined
- }
- />
- )}
-
-
-
textarea]:rounded-none [&>textarea]:border-0 [&>textarea]:!outline-none [&>textarea]:!ring-offset-0 [&>textarea]:!ring-0'
- )}
- loading={isLoading}
- disabled={!isApiKeySet || disablePrompts || isLoading}
- placeholder={
- hasMessages ? 'Reply to the assistant...' : 'How can we help you today?'
- }
- value={value}
- onValueChange={(e) => setValue(e.target.value)}
- onSubmit={(event) => {
- event.preventDefault()
- sendMessageToAssistant(value)
- }}
- />
- {!hasMessages && IS_PLATFORM && (
-
- The Assistant is in Alpha and your prompts might be rate limited
-
- )}
-
-
-
- {!hasMessages && (
-
-
-
-
-
-
- Suggest some{' '}
- {entityContext?.id === 'rls-policies'
- ? entityContext.label
- : `database ${entityContext?.label.toLowerCase()}`}
-
-
-
-
-
-
- Provide some examples of{' '}
- {entityContext?.id === 'rls-policies'
- ? entityContext.label
- : `database ${entityContext?.label.toLowerCase()}`}
-
-
-
-
-
-
- What are{' '}
- {entityContext?.id === 'rls-policies'
- ? entityContext.label
- : `database ${entityContext?.label.toLowerCase()}`}
- ?
-
-
- {docsUrl !== undefined &&
-
- )}
-
-
+ loading={isChatLoading}
+ disabled={!isApiKeySet || disablePrompts || isChatLoading}
+ placeholder={
+ hasMessages
+ ? 'Reply to the assistant...'
+ : (sqlSnippets ?? [])?.length > 0
+ ? 'Ask a question or make a change...'
+ : 'How can we help you today?'
+ }
+ value={value}
+ onValueChange={(e) => setValue(e.target.value)}
+ onSubmit={(event) => {
+ event.preventDefault()
+ if (includeSchemaMetadata) {
+ const sqlSnippetsString =
+ sqlSnippets?.map((snippet) => '```sql\n' + snippet + '\n```').join('\n') || ''
+ const valueWithSnippets = [value, sqlSnippetsString].filter(Boolean).join('\n\n')
+ sendMessageToAssistant(valueWithSnippets)
+ } else {
+ sendMessageToAssistant(value)
+ }
+ }}
+ />
+ {!hasMessages && (
+
+ The Assistant is in Alpha and your prompts might be rate limited
+
+ )}
+
{
- switch (editor) {
- case 'functions':
- if (entity === undefined) return 'Create a new function'
- else return `Edit function: ${entity.name}`
- case 'rls-policies':
- if (entity === undefined) return 'Create a new RLS policy'
- else return `Edit RLS policy: ${entity.name}`
- default:
- return 'SQL Scratch Pad'
- }
-}
-
-export const generateCTA = (editor?: SupportedAssistantEntities | null) => {
- switch (editor) {
- case 'functions':
- return 'Save function'
- case 'rls-policies':
- return 'Save policy'
- default:
- return 'Run query'
- }
-}
-
+// [Joshen] Not used but keeping this for now in case we do an inline editor
export const generatePlaceholder = (
editor?: SupportedAssistantEntities | null,
entity?: CommonDatabaseEntity,
@@ -117,68 +96,91 @@ COMMIT;
}
}
-export const retrieveDocsUrl = (editor?: SupportedAssistantEntities | null) => {
- switch (editor) {
- case 'functions':
- return 'https://supabase.com/docs/guides/database/functions'
- case 'rls-policies':
- return 'https://supabase.com/docs/guides/database/postgres/row-level-security'
- default:
- return undefined
- }
-}
-
-// [Joshen] This is just very basic validation, but possible can extend perhaps
-export const validateQuery = (editor: SupportedAssistantEntities | null, query: string) => {
+// [Joshen] This is just very basic identification, but possible can extend perhaps
+export const identifyQueryType = (query: string) => {
const formattedQuery = query.toLowerCase().replaceAll('\n', ' ')
-
- switch (editor) {
- case 'functions':
- return (
- formattedQuery.includes('create function') ||
- formattedQuery.includes('create or replace function')
- )
- case 'rls-policies':
- return formattedQuery.includes('create policy') || formattedQuery.includes('alter policy')
- default:
- return true
+ if (
+ formattedQuery.includes('create function') ||
+ formattedQuery.includes('create or replace function')
+ ) {
+ return 'functions'
+ } else if (formattedQuery.includes('create policy') || formattedQuery.includes('alter policy')) {
+ return 'rls-policies'
}
}
-export const generatePrompt = ({
- type,
- context,
- schemas,
- tables,
-}: {
- type: SupportedAssistantQuickPromptTypes
- context: SupportedAssistantEntities
- schemas: string[]
- tables: readonly { schema: string; name: string }[]
-}) => {
- if (type === 'examples') {
- return `What are some common examples of user-defined database ${context}? ${PLACEHOLDER_LIMIT}`
- } else if (type === 'ask') {
- return `Could you explain to me what are used-defined database ${context}?`
- } else if (type === 'suggest') {
- const output =
- context === 'functions'
- ? 'user-defined database functions'
- : context === 'rls-policies'
- ? 'RLS policies'
- : ''
+export const isReadOnlySelect = (query: string): boolean => {
+ const normalizedQuery = query.trim().toLowerCase()
- const suffix =
- context === 'functions' ? 'Let me know for which tables each function will be useful' : ''
+ // Check if it starts with SELECT
+ if (!normalizedQuery.startsWith('select')) {
+ return false
+ }
- const basePrompt = `Suggest some ${output} that might be useful`
+ // List of keywords that indicate write operations or function calls
+ const disallowedPatterns = [
+ // Write operations
+ 'insert',
+ 'update',
+ 'delete',
+ 'alter',
+ 'drop',
+ 'create',
+ 'truncate',
+ 'replace',
+ 'with',
- if (tables.length > 0 && schemas.length > 0) {
- return `${basePrompt} for the following tables within this database: ${tables.map((x) => `${x.schema}.${x.name}`)}. ${PLACEHOLDER_LIMIT} ${suffix}`.trim()
- } else if (schemas.length > 0) {
- return `${basePrompt} for the tables in the following schemas within this database: ${schemas.join(', ')}. ${suffix}`.trim()
+ // Function patterns
+ 'function',
+ 'procedure',
+ ]
+
+ const allowedPatterns = ['created', 'inserted', 'updated', 'deleted']
+
+ // Check if query contains any disallowed patterns, but allow if part of allowedPatterns
+ return !disallowedPatterns.some((pattern) => {
+ // Check if the found disallowed pattern is actually part of an allowed pattern
+ const isPartOfAllowedPattern = allowedPatterns.some(
+ (allowed) => normalizedQuery.includes(allowed) && allowed.includes(pattern)
+ )
+
+ if (isPartOfAllowedPattern) {
+ return false
}
- return basePrompt
- }
+ return normalizedQuery.includes(pattern)
+ })
+}
+
+const getContextKey = (pathname: string) => {
+ const [_, __, ___, ...rest] = pathname.split('/')
+ const key = rest.join('/')
+ return key
+}
+
+export const getContextualInvalidationKeys = ({
+ ref,
+ pathname,
+ schema = 'public',
+}: {
+ ref: string
+ pathname: string
+ schema?: string
+}) => {
+ const key = getContextKey(pathname)
+
+ return (
+ (
+ {
+ 'auth/users': [authKeys.usersInfinite(ref)],
+ 'auth/policies': [databasePoliciesKeys.list(ref)],
+ 'database/functions': [databaseKeys.databaseFunctions(ref)],
+ 'database/tables': [tableKeys.list(ref, schema, true), tableKeys.list(ref, schema, false)],
+ 'database/triggers': [databaseTriggerKeys.list(ref)],
+ 'database/types': [enumeratedTypesKeys.list(ref)],
+ 'database/extensions': [databaseExtensionsKeys.list(ref)],
+ 'database/indexes': [databaseKeys.indexes(ref, schema)],
+ } as const
+ )[key] ?? []
+ )
}
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantPanel.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantPanel.tsx
index 702c1f0cdbe..e6b97cd88f3 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantPanel.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantPanel.tsx
@@ -1,464 +1,43 @@
-import { useQueryClient } from '@tanstack/react-query'
-import { uniqBy } from 'lodash'
-import { Command, CornerDownLeft, Loader2, X } from 'lucide-react'
-import { useRouter } from 'next/router'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { toast } from 'sonner'
-
-import { useChat } from 'ai/react'
-import { useParams } from 'common'
-import { useIsDatabaseFunctionsAssistantEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import { generateThreadMessage } from 'components/interfaces/Auth/Policies/AIPolicyEditorPanel/AIPolicyEditorPanel.utils'
-import { MessageWithDebug } from 'components/interfaces/SQLEditor/AiAssistantPanel'
-import { sqlAiDisclaimerComment } from 'components/interfaces/SQLEditor/SQLEditor.constants'
-import { DiffType, IStandaloneCodeEditor } from 'components/interfaces/SQLEditor/SQLEditor.types'
-import { suffixWithLimit } from 'components/interfaces/SQLEditor/SQLEditor.utils'
-import Results from 'components/interfaces/SQLEditor/UtilityPanel/Results'
-import { useSqlDebugMutation } from 'data/ai/sql-debug-mutation'
-import { databasePoliciesKeys } from 'data/database-policies/keys'
-import { useEntityDefinitionQuery } from 'data/database/entity-definition-query'
-import { QueryResponseError, useExecuteSqlMutation } from 'data/sql/execute-sql-mutation'
-import { sqlKeys } from 'data/sql/keys'
-import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
-import { usePrevious } from 'hooks/deprecated'
-import { useLocalStorage } from 'hooks/misc/useLocalStorage'
-import { useSelectedProject } from 'hooks/misc/useSelectedProject'
-import { SqlEditor } from 'icons'
-import {
- BASE_PATH,
- LOCAL_STORAGE_KEYS,
- TELEMETRY_ACTIONS,
- TELEMETRY_CATEGORIES,
- TELEMETRY_LABELS,
-} from 'lib/constants'
-import { detectOS, uuidv4 } from 'lib/helpers'
+import { uuidv4 } from 'lib/helpers'
+import { useState, useEffect } from 'react'
import { useAppStateSnapshot } from 'state/app-state'
-import {
- Button,
- cn,
- Sheet,
- SheetContent,
- SheetFooter,
- SheetHeader,
- Tooltip_Shadcn_,
- TooltipContent_Shadcn_,
- TooltipTrigger_Shadcn_,
-} from 'ui'
-import { Admonition } from 'ui-patterns'
-import CodeEditor from '../CodeEditor/CodeEditor'
+import { cn } from 'ui'
import { AIAssistant } from './AIAssistant'
-import { generateCTA, generatePlaceholder, generateTitle, validateQuery } from './AIAssistant.utils'
-import { ASSISTANT_SUPPORT_ENTITIES } from './AiAssistant.constants'
+import type { Message as MessageType } from 'ai/react'
export const AiAssistantPanel = () => {
- const os = detectOS()
- const router = useRouter()
- const { ref } = useParams()
- const project = useSelectedProject()
- const queryClient = useQueryClient()
- const { aiAssistantPanel, setAiAssistantPanel } = useAppStateSnapshot()
- const isEnabled = useIsDatabaseFunctionsAssistantEnabled()
+ const { aiAssistantPanel, resetAiAssistantPanel } = useAppStateSnapshot()
+ const [initialMessages, setInitialMessages] = useState(undefined)
- const { open, editor, content, entity } = aiAssistantPanel
- const previousEditor = usePrevious(editor)
- const previousEntity = usePrevious(entity)
-
- const [isAcknowledged, setIsAcknowledged] = useLocalStorage(
- LOCAL_STORAGE_KEYS.SQL_SCRATCH_PAD_BANNER_ACKNOWLEDGED,
- false
- )
+ useEffect(() => {
+ // set initial state of local messages to the global state if it exists
+ if (aiAssistantPanel.messages) {
+ const messagesCopy = aiAssistantPanel.messages.map((msg) => ({
+ content: msg.content,
+ createdAt: msg.createdAt,
+ role: msg.role,
+ id: msg.id,
+ }))
+ setInitialMessages(messagesCopy)
+ }
+ }, [])
+ const { open } = aiAssistantPanel
const [chatId, setChatId] = useState(() => uuidv4())
- const [error, setError] = useState()
- const [results, setResults] = useState(undefined)
- const [showResults, setShowResults] = useState(false)
- const [showWarning, setShowWarning] = useState(false)
- const [debugThread, setDebugThread] = useState([])
- const { data: existingDefinition } = useEntityDefinitionQuery({
- id: entity?.id,
- type: editor,
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
-
- // [Joshen] JFYI I'm opting to just have the assistant always show and not toggle-able
- // I don't really see any negatives of keeping it open (or benefits from hiding) tbh
- // const [showAssistant, setShowAssistant] = useState(true)
- const title = generateTitle(editor, entity)
- const placeholder = generatePlaceholder(editor, entity, existingDefinition)
- const ctaText = generateCTA(editor)
- const editorRef = useRef()
- const editorModel = editorRef.current?.getModel()
-
- const numResults = (results ?? []).length
- const [errorHeader, ...errorContent] =
- (error?.formattedError?.split('\n') ?? [])?.filter((x: string) => x.length > 0) ?? []
- const entityContext = ASSISTANT_SUPPORT_ENTITIES.find((x) => x.id === editor)
-
- const { mutate: sendEvent } = useSendEventMutation()
- const sendTelemetryEvent = (action: string) => {
- sendEvent({
- action,
- category: TELEMETRY_CATEGORIES.AI_ASSISTANT,
- label: TELEMETRY_LABELS.QUICK_SQL_EDITOR,
- })
+ const handleReset = () => {
+ // reset local and global state
+ setChatId(uuidv4())
+ setInitialMessages(undefined)
+ resetAiAssistantPanel()
}
- const { mutate: executeSql, isLoading: isExecuting } = useExecuteSqlMutation({
- onSuccess: async (res) => {
- // [Joshen] If in a specific editor context mode, assume that intent was to create/update
- // a database entity - so close it once success. Otherwise it's in Quick SQL mode and we
- // show the results.
- if (editor !== null) {
- switch (editor) {
- case 'functions':
- await queryClient.invalidateQueries(sqlKeys.query(ref, ['functions-list']))
- break
- case 'rls-policies':
- await queryClient.invalidateQueries(databasePoliciesKeys.list(ref))
- break
- }
-
- toast.success(
- `Successfully ${entity === undefined ? 'created' : 'updated'} ${entityContext?.name}!`
- )
- setAiAssistantPanel({ open: false })
- } else {
- setShowResults(true)
- setResults(res.result)
- }
- },
- onError: (error) => {
- setError(error)
- setResults([])
- },
- })
-
- const { append } = useChat({
- id: chatId,
- api: `${BASE_PATH}/api/ai/sql/generate-v2`,
- // [Joshen] Don't need entity definitions if calling here cause support action
- // via AI here is just to explain code segment, no need for entity definitions context
- body: {},
- })
-
- const { mutateAsync: debugSql } = useSqlDebugMutation({ onError: () => {} })
-
- const onExecuteSql = (skipValidation = false) => {
- setError(undefined)
- setShowWarning(false)
-
- const query = editorRef.current?.getValue() ?? ''
- if (query.length === 0) return
-
- if (editor !== undefined && !skipValidation) {
- // [Joshen] Some basic validation logic
- const validated = validateQuery(editor, query)
- if (!validated) {
- return setShowWarning(true)
- }
- }
-
- executeSql({
- sql: suffixWithLimit(query, 100),
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- handleError: (error) => {
- throw error
- },
- })
- }
-
- const onFixWithAssistant = async () => {
- if (!error) return
-
- const messageId = uuidv4()
- const query = editorRef.current?.getValue() ?? ''
-
- const assistantMessageBefore = generateThreadMessage({
- id: messageId,
- content: 'Thinking...',
- isDebug: true,
- })
-
- setDebugThread([...debugThread, assistantMessageBefore])
- sendTelemetryEvent(TELEMETRY_ACTIONS.FIX_WITH_ASSISTANT)
-
- try {
- const { solution, sql } = await debugSql({
- sql: query,
- errorMessage: error.message,
- })
-
- const assistantMessageAfter = generateThreadMessage({
- id: messageId,
- content: `${solution}\n\`\`\`sql\n${sql}\n\`\`\``,
- isDebug: true,
- })
- const cleanedMessages = uniqBy([...debugThread, assistantMessageAfter], (m) => m.id)
- setDebugThread(cleanedMessages)
- } catch (error) {
- const assistantMessageAfter = generateThreadMessage({
- id: messageId,
- content: `Hmm, Sorry but I'm unable to find a solution for the error that you're facing`,
- isDebug: true,
- })
- const cleanedMessages = uniqBy([...debugThread, assistantMessageAfter], (m) => m.id)
- setDebugThread(cleanedMessages)
- }
- }
-
- const onExplainSql = (value: string) => {
- append({
- role: 'user',
- createdAt: new Date(),
- content: `
- Can you explain this section to me in more detail?\n
- ${value}
- `.trim(),
- })
- sendTelemetryEvent(TELEMETRY_ACTIONS.EXPLAIN_CODE)
- }
-
- const updateEditorWithCheckForDiff = useCallback(
- ({ id, diffType, sql }: { id: string; diffType: DiffType; sql: string }) => {
- if (!editorModel) return
-
- const existingValue = editorRef.current?.getValue() ?? ''
- if (existingValue.length === 0) {
- // if the editor is empty, just copy over the code
- editorRef.current?.executeEdits('apply-ai-message', [
- {
- text: `${sqlAiDisclaimerComment}\n\n${sql}`,
- range: editorModel.getFullModelRange(),
- },
- ])
- } else {
- const currentSql = editorRef.current?.getValue()
- editorRef.current?.executeEdits('apply-ai-message', [
- {
- text: `${currentSql}\n\n${sqlAiDisclaimerComment}\n\n${sql}`,
- range: editorModel.getFullModelRange(),
- },
- ])
- }
- },
- [editorModel]
- )
-
- const onTogglePanel = () => {
- if (open) {
- // [Joshen] Save the code content when closing - should allow users to continue from
- // where they left off IF they are opening the assistant again in the same "editor" context
- const existingValue = editorRef.current?.getValue() ?? ''
- setAiAssistantPanel({ open: false, content: existingValue })
- } else {
- setAiAssistantPanel({ open: true, editor: null, entity: undefined })
- }
- }
-
- useEffect(() => {
- if (open) {
- // [Joshen] Only reset the assistant if the editor changed or if the provided entity has changed
- if (previousEditor !== editor || previousEntity !== entity) {
- setChatId(uuidv4())
- setError(undefined)
- setShowWarning(false)
- setDebugThread([])
- setResults(undefined)
- setShowResults(false)
- } else {
- // [Joshen] Repopulate the code editor with the content from where the user left off
- // setTimeout is just to give time for the editorRef to get associated
- setTimeout(() => {
- const editorModel = editorRef.current?.getModel()
- if (content && editorModel) {
- editorRef.current?.executeEdits('apply-ai-message', [
- { text: content, range: editorModel.getFullModelRange() },
- ])
- }
- }, 100)
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [open])
-
- // [Joshen] Just to test the concept of a universal assistant of sorts
- useEffect(() => {
- const handler = (e: KeyboardEvent) => {
- if (e.metaKey && e.code === 'KeyI') onTogglePanel()
- }
- if (project !== undefined && isEnabled) window.addEventListener('keydown', handler)
- return () => window.removeEventListener('keydown', handler)
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [project, isEnabled, open])
-
- // [Joshen] Whenever the deps change recalculate the height of the editor
- useEffect(() => {
- editorRef.current?.layout({ width: 0, height: 0 })
- window.requestAnimationFrame(() => editorRef.current?.layout())
- }, [error, showWarning, isExecuting, numResults, showResults])
-
- return (
- onTogglePanel()}>
-
- {/* Assistant */}
- setChatId(uuidv4())}
- />
-
- {/* Editor */}
-
-
- {title}
-
-
-
- Open in SQL Editor
-
-
- {editor === null && !isAcknowledged && (
-
-
- Queries written here will not be saved and results are limited up to only 100 rows
-
-
- )}
-
-
- onExecuteSql() },
- explainCode: { enabled: true, callback: onExplainSql },
- closeAssistant: { enabled: true, callback: () => onTogglePanel() },
- }}
- />
-
-
- {error !== undefined && (
-
-
- {errorContent.length > 0 ? (
- errorContent.map((errorText: string, i: number) => (
-
- {errorText}
-
- ))
- ) : (
-
{error.error}
- )}
-
onFixWithAssistant()}>
- Fix with Assistant
-
-
- }
- />
- )}
- {showWarning && (
-
- Are you sure you want to run this query?
- onExecuteSql(true)}>
- Confirm run query
-
-
- }
- />
- )}
- {results !== undefined && results.length > 0 && (
- <>
-
-
-
-
- {results.length} rows
- {results.length >= 100 && ` (Limited to only 100 rows)`}
-
-
setShowResults(!showResults)}>
- {showResults ? 'Hide' : 'Show'} results
-
-
-
Success. No rows returned.
-
- onTogglePanel()}>
- Cancel
-
- onExecuteSql()}
- iconRight={
- isExecuting ? (
-
- {os === 'macos' ? (
-
- ) : (
-
CTRL
- )}
-
-
-
-
-
-
-
+ return !open ? null : (
+
+
+
+ How can I help you today?
+
+
+
+ Tables
+
+
+
+
+
+ RLS Policies
+
+
+
+
+
+ Functions
+
+
+
+
+
+ Triggers
+
+
+
+
+
+
+
setIsExpanded(!isExpanded)}
+ icon={isExpanded ?
+ code]:m-0 [&>code>span]:flex border-t-0 [&>code>span]:flex-wrap [&>code]:block [&>code>span]:text-foreground text-wrap whitespace-pre-wrap',
+ props.className
+ )}
+ />
+
+
+ {onRemove && (
+
+
) {
- const { profile } = useProfile()
const isUser = role === 'user'
- const icon = useMemo(() => {
- return role === 'assistant' ? (
-
-
- )
- }, [content, profile?.username, role])
-
- const formattedContext =
- context !== undefined
- ? Object.entries(context)
- .filter(([_, value]) => value.length > 0)
- .map(([key, value]) => {
- return `${key.charAt(0).toUpperCase() + key.slice(1)}: ${Array.isArray(value) ? value.join(', ') : value}`
- })
- .join(' • ')
- : undefined
-
if (!content) return null
return (
-
-
-
- {variant === 'warning' ?
: icon}
-
-
-
- {!isUser ? 'Assistant' : name ? name : 'You'}
- {createdAt && (
-
- {dayjs(createdAt).fromNow()}
-
- )}
-
- {role === 'user' && context !== undefined && (
-
{formattedContext}
- )}
-
-
- {isDebug &&
Debug request }
-
{' '}
- {action}
-
-
-
{
- return (
- div>pre]:max-w-full',
- isSelected ? '[&>div>pre]:!border-stronger [&>div>pre]:!bg-surface-200' : ''
- )}
- >
- {props.children[0].props.children}
-
- )
- },
- ol: (props: any) => {
- return {props.children}
- },
- li: (props: any) => {
- return {props.children}
- },
- h3: (props: any) => {
- return {props.children}
- },
- code: (props: any) => {
- return {props.children}
- },
- }}
- >
- {content}
-
{children}
-
+ {variant === 'warning' &&
}
+
+ {action}
+
+
{
+ return readOnly ? (
+
+
+ ) : (
+ {props.children}
+ },
+ li: (props: any) => {
+ return {props.children}
+ },
+ h3: (props: any) => {
+ return {props.children}
+ },
+ code: (props: any) => {
+ return {props.children}
+ },
+ }}
+ >
+ {content}
+
+
- Insert code
+ Edit
diff --git a/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx b/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx
new file mode 100644
index 00000000000..de91f7eab30
--- /dev/null
+++ b/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx
@@ -0,0 +1,426 @@
+import { Code, DatabaseIcon, Edit, Play } from 'lucide-react'
+import { useRouter } from 'next/router'
+import { useCallback, useEffect, useState } from 'react'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+import useNewQuery from 'components/interfaces/SQLEditor/hooks'
+import { DiffType } from 'components/interfaces/SQLEditor/SQLEditor.types'
+import { suffixWithLimit } from 'components/interfaces/SQLEditor/SQLEditor.utils'
+import Results from 'components/interfaces/SQLEditor/UtilityPanel/Results'
+import { QueryResponseError, useExecuteSqlMutation } from 'data/sql/execute-sql-mutation'
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { useAppStateSnapshot } from 'state/app-state'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
+import {
+ Button,
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+ CodeBlock,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ cn,
+} from 'ui'
+import { Admonition } from 'ui-patterns'
+import { ButtonTooltip } from '../ButtonTooltip'
+import {
+ getContextualInvalidationKeys,
+ identifyQueryType,
+ isReadOnlySelect,
+} from './AIAssistant.utils'
+import { useParams } from 'common'
+import { useQueryClient } from '@tanstack/react-query'
+import { Markdown } from 'components/interfaces/Markdown'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { TELEMETRY_EVENTS, TELEMETRY_VALUES } from 'lib/constants/telemetry'
+
+interface SqlSnippetWrapperProps {
+ sql: string
+ isLoading?: boolean
+ readOnly?: boolean
+}
+
+const SqlSnippetWrapper = ({
+ sql,
+ isLoading = false,
+ readOnly = false,
+}: SqlSnippetWrapperProps) => {
+ const formatted = (sql || [''])[0]
+ const propsMatch = formatted.match(/--\s*props:\s*(\{[^}]+\})/)
+ const props = propsMatch ? JSON.parse(propsMatch[1]) : {}
+ const title = props.title || 'SQL Query'
+ const updatedFormatted = formatted?.replace(/--\s*props:\s*\{[^}]+\}/, '').trim()
+
+ return (
+
+
+ )
+}
+
+interface ParsedSqlProps {
+ sql: string
+ title: string
+ isLoading?: boolean
+ readOnly?: boolean
+ isChart: boolean
+ xAxis: string
+ yAxis: string
+}
+
+export const SqlCard = ({
+ sql,
+ isChart,
+ xAxis,
+ yAxis,
+ title,
+ readOnly = false,
+ isLoading = false,
+}: ParsedSqlProps) => {
+ const router = useRouter()
+ const { ref } = useParams()
+ const queryClient = useQueryClient()
+ const project = useSelectedProject()
+ const snapV2 = useSqlEditorV2StateSnapshot()
+ const { setAiAssistantPanel } = useAppStateSnapshot()
+ const { newQuery } = useNewQuery()
+
+ const isInSQLEditor = router.pathname.includes('/sql')
+ const isInNewSnippet = router.pathname.endsWith('/sql')
+
+ const [showCode, setShowCode] = useState(readOnly || !isReadOnlySelect(sql))
+ const [showResults, setShowResults] = useState(false)
+ const [results, setResults] = useState()
+ const [error, setError] = useState()
+ const [showWarning, setShowWarning] = useState(false)
+
+ const { mutate: sendEvent } = useSendEventMutation()
+
+ const { mutate: executeSql, isLoading: isExecuting } = useExecuteSqlMutation({
+ onSuccess: async (res) => {
+ // [Joshen] Only do contextual invalidation within a project context
+ if (!!ref) {
+ const invalidationKeys = getContextualInvalidationKeys({ ref, pathname: router.pathname })
+ await Promise.all(invalidationKeys?.map((x) => queryClient.invalidateQueries(x)))
+ }
+
+ setShowResults(true)
+ setResults(res.result)
+ setShowWarning(false)
+ },
+ onError: (error) => {
+ setError(error)
+ setResults([])
+ setShowWarning(false)
+ },
+ })
+
+ const handleExecute = useCallback(() => {
+ if (!project?.ref || !sql || readOnly) return
+
+ if (!isReadOnlySelect(sql)) {
+ setShowCode(true)
+ setShowWarning(true)
+ return
+ }
+
+ setError(undefined)
+ executeSql({
+ sql: suffixWithLimit(sql, 100),
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ handleError: (error: any) => {
+ setError(error)
+ setResults([])
+ return { result: [] }
+ },
+ })
+ }, [project?.ref, project?.connectionString, sql, executeSql, readOnly])
+
+ const handleEditInSQLEditor = () => {
+ if (isInSQLEditor) {
+ snapV2.setDiffContent(sql, DiffType.Addition)
+ } else {
+ newQuery(sql, title)
+ }
+ }
+
+ const [errorHeader, ...errorContent] =
+ (error?.formattedError?.split('\n') ?? [])?.filter((x: string) => x.length > 0) ?? []
+
+ useEffect(() => {
+ if (isReadOnlySelect(sql) && !results && !readOnly && !isLoading) {
+ handleExecute()
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [sql, readOnly, isLoading])
+
+ return (
+
+
+ {showWarning ? (
+
+ This query contains write operations. Are you sure you want to execute it?
+
+ setShowWarning(false)}
+ >
+ Cancel
+
+ {
+ setShowWarning(false)
+ executeSql({
+ sql: suffixWithLimit(sql, 100),
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ handleError: (error: any) => {
+ setError(error)
+ setResults([])
+ return { result: [] }
+ },
+ })
+
+ sendEvent({
+ action: TELEMETRY_EVENTS.AI_ASSISTANT_V2,
+ value: TELEMETRY_VALUES.RAN_SQL_SUGGESTION,
+ label: 'mutation',
+ category: identifyQueryType(sql) ?? 'unknown',
+ })
+ }}
+ >
+ Run
+
+
+
+ ) : (
+ <>
+
+
{title}
+
+ {!readOnly && (
+
+
+
+
+
+ snapV2.setDiffContent(sql, DiffType.Addition)}
+ >
+ Insert code
+
+ snapV2.setDiffContent(sql, DiffType.Modification)}
+ >
+ Replace code
+
+ snapV2.setDiffContent(sql, DiffType.NewSnippet)}
+ >
+ Create new snippet
+
+
+
+ )}
+
+
+ )}
+
+ )}
+
+
+ {showCode && (
+
code]:m-0 [&>code>span]:flex [&>code>span]:flex-wrap [&>code]:block [&>code>span]:text-foreground'
+ )}
+ />
+ )}
+
+ {/* Results Section */}
+ {results !== undefined && results.length > 0 && isChart && xAxis && yAxis ? (
+
+
+
+
+
+
+ ) : (
+
+ {error !== undefined ? (
+
+
+ {errorContent.length > 0 ? (
+
+ {errorContent.map((errorText: string, i: number) => (
+
+ {errorText}
+
+ ))}
+
{
+ setAiAssistantPanel({
+ sqlSnippets: [sql],
+ initialInput: `Help me to debug the attached sql snippet which gives the following error: \n\n${errorHeader}\n${errorContent.join('\n')}`,
+ })
+ }}
+ >
+ Debug
+
+
+ ) : (
+ <>
+
{error.error}
+
{
+ setAiAssistantPanel({
+ sqlSnippets: [sql],
+ initialInput: `Help me to debug the attached sql snippet which gives the following error: \n\n${error.error}`,
+ })
+ }}
+ >
+ Debug
+
+
+ )}
+
+
+
+
+ {results.length} rows
+ {results.length >= 100 && ` (Limited to only 100 rows)`}
+
+
+
Success. No rows returned.
+
- {subject}
diff --git a/apps/studio/components/ui/CountdownTimer/CountdownTimerSpan.tsx b/apps/studio/components/ui/CountdownTimer/CountdownTimerSpan.tsx
index 166e7818ae0..11af6fd0aa2 100644
--- a/apps/studio/components/ui/CountdownTimer/CountdownTimerSpan.tsx
+++ b/apps/studio/components/ui/CountdownTimer/CountdownTimerSpan.tsx
@@ -1,14 +1,10 @@
-import MotionNumber from 'motion-number'
+import MotionNumber from '@number-flow/react'
interface CountdownTimerSpanProps {
seconds: number
}
const CountdownTimerSpan = ({ seconds }: CountdownTimerSpanProps) => {
- const transitionConfig = {
- y: { type: 'spring', duration: 0.35, bounce: 0 },
- }
-
const hours = Math.floor(seconds / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
const remainingSeconds = seconds % 60
@@ -20,23 +16,11 @@ const CountdownTimerSpan = ({ seconds }: CountdownTimerSpanProps) => {
Time remaining:
-
)
diff --git a/apps/studio/components/ui/Forms/FormHeader.tsx b/apps/studio/components/ui/Forms/FormHeader.tsx
index a29b9caa98a..8e7aa444874 100644
--- a/apps/studio/components/ui/Forms/FormHeader.tsx
+++ b/apps/studio/components/ui/Forms/FormHeader.tsx
@@ -1,6 +1,3 @@
-import ReactMarkdown from 'react-markdown'
-
-import { Markdown } from 'components/interfaces/Markdown'
import { ReactNode } from 'react'
import { cn } from 'ui'
import { DocsButton } from '../DocsButton'
@@ -21,12 +18,8 @@ const FormHeader = ({
return (
-
-
- {title}
-
-
- {description &&
}
+
{title}
+ {description &&
{description}
}
{docsUrl !== undefined && {title} */}
{description && (
-
-
- {description}
-
-
+
)}
diff --git a/apps/studio/components/ui/ProductMenu/ProductMenu.tsx b/apps/studio/components/ui/ProductMenu/ProductMenu.tsx
index 8e81e63af56..798118f10c3 100644
--- a/apps/studio/components/ui/ProductMenu/ProductMenu.tsx
+++ b/apps/studio/components/ui/ProductMenu/ProductMenu.tsx
@@ -43,7 +43,7 @@ const ProductMenu = ({ page, menu }: ProductMenuProps) => {
- {idx !== menu.length - 1 &&
}
+ {idx !== menu.length - 1 &&
}
))}
diff --git a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
index 5441340bb8d..e05c15edc2f 100644
--- a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
+++ b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
@@ -37,7 +37,11 @@ const ProductMenuItem = ({
className={'flex items-center gap-2 truncate w-full ' + textClassName}
>
{name}
- {label !== undefined &&
{label} }
+ {label !== undefined && (
+
+ {label}
+
+ )}
{rightIcon}
}
diff --git a/apps/studio/data/__templates/README.md b/apps/studio/data/__templates/README.md
index 71a970294da..5cc02004da1 100644
--- a/apps/studio/data/__templates/README.md
+++ b/apps/studio/data/__templates/README.md
@@ -11,9 +11,7 @@ Referencing the other files in the `data` directory is a good way to see how to
### SQL queries and mutations
-The dashboard often needs to query the users database directly. There are already some reusable hooks for this in `data/sql`. Reference the `data/fdw` directory for an example of how to use them.
-
-Note that the query key of the `useExecuteSqlQuery` hook will be automatically filled with an md5 hash of the SQL query, unless you provide a name for the query.
+The dashboard often needs to query the users database directly. You can use the `executeSql()` function to do this.
## Files
diff --git a/apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts b/apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts
index 6b698797f98..8e9a5815f03 100644
--- a/apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts
+++ b/apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts
@@ -2,9 +2,9 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
import { toast } from 'sonner'
import { configKeys } from 'data/config/keys'
+import { databaseKeys } from 'data/database/keys'
import { handleError, patch } from 'data/fetchers'
import { executeSql } from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
import type { ResponseError } from 'types'
export type CreateAndExposeAPISchemaVariables = {
@@ -69,7 +69,7 @@ export const useCreateAndExposeAPISchemaMutation = ({
async onSuccess(data, variables, context) {
const { projectRef } = variables
await Promise.all([
- queryClient.invalidateQueries(sqlKeys.query(projectRef, ['schemas', 'list'])),
+ queryClient.invalidateQueries(databaseKeys.schemas(projectRef)),
queryClient.invalidateQueries(configKeys.postgrest(projectRef)),
])
await onSuccess?.(data, variables, context)
diff --git a/apps/studio/data/auth/keys.ts b/apps/studio/data/auth/keys.ts
index 9047a22593d..725370b1572 100644
--- a/apps/studio/data/auth/keys.ts
+++ b/apps/studio/data/auth/keys.ts
@@ -6,7 +6,7 @@ export const authKeys = {
keywords: string | undefined
filter: string | undefined
}
- ) => ['auth', projectRef, 'users', ...(params ? [params] : [])] as const,
+ ) => ['projects', projectRef, 'users', ...(params ? [params] : [])] as const,
usersInfinite: (
projectRef: string | undefined,
@@ -17,7 +17,13 @@ export const authKeys = {
sort: string | undefined
order: string | undefined
}
- ) => ['auth', projectRef, 'users-infinite', ...(params ? [params].filter(Boolean) : [])] as const,
+ ) =>
+ [
+ 'projects',
+ projectRef,
+ 'users-infinite',
+ ...(params ? [params].filter(Boolean) : []),
+ ] as const,
usersCount: (
projectRef: string | undefined,
params?: {
@@ -25,8 +31,9 @@ export const authKeys = {
filter: string | undefined
providers: string[] | undefined
}
- ) => ['auth', projectRef, 'users-count', ...(params ? [params].filter(Boolean) : [])] as const,
+ ) =>
+ ['projects', projectRef, 'users-count', ...(params ? [params].filter(Boolean) : [])] as const,
- authConfig: (projectRef: string | undefined) => ['auth', projectRef, 'config'] as const,
+ authConfig: (projectRef: string | undefined) => ['projects', projectRef, 'auth-config'] as const,
accessToken: () => ['access-token'] as const,
}
diff --git a/apps/studio/data/auth/user-create-mutation.ts b/apps/studio/data/auth/user-create-mutation.ts
index 83adf73a3ff..4ff0ea43f4d 100644
--- a/apps/studio/data/auth/user-create-mutation.ts
+++ b/apps/studio/data/auth/user-create-mutation.ts
@@ -2,7 +2,6 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
import { toast } from 'sonner'
import { handleError, post } from 'data/fetchers'
-import { sqlKeys } from 'data/sql/keys'
import type { ResponseError } from 'types'
import { authKeys } from './keys'
@@ -46,9 +45,9 @@ export const useUserCreateMutation = ({
async onSuccess(data, variables, context) {
const { projectRef } = variables
- Promise.all([
+ await Promise.all([
queryClient.invalidateQueries(authKeys.usersInfinite(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, authKeys.usersCount(projectRef))),
+ queryClient.invalidateQueries(authKeys.usersCount(projectRef)),
])
await onSuccess?.(data, variables, context)
diff --git a/apps/studio/data/auth/user-delete-mutation.ts b/apps/studio/data/auth/user-delete-mutation.ts
index 8551ffe2450..9fe1975b892 100644
--- a/apps/studio/data/auth/user-delete-mutation.ts
+++ b/apps/studio/data/auth/user-delete-mutation.ts
@@ -2,7 +2,6 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
import { toast } from 'sonner'
import { del, handleError } from 'data/fetchers'
-import { sqlKeys } from 'data/sql/keys'
import type { ResponseError } from 'types'
import { authKeys } from './keys'
import type { User } from './users-infinite-query'
@@ -41,7 +40,7 @@ export const useUserDeleteMutation = ({
await Promise.all([
queryClient.invalidateQueries(authKeys.usersInfinite(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, authKeys.usersCount(projectRef))),
+ queryClient.invalidateQueries(authKeys.usersCount(projectRef)),
])
await onSuccess?.(data, variables, context)
diff --git a/apps/studio/data/auth/user-invite-mutation.ts b/apps/studio/data/auth/user-invite-mutation.ts
index 6a883fc1c5f..0466ab0ed09 100644
--- a/apps/studio/data/auth/user-invite-mutation.ts
+++ b/apps/studio/data/auth/user-invite-mutation.ts
@@ -2,8 +2,6 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
import { toast } from 'sonner'
import { handleError, post } from 'data/fetchers'
-import { sqlKeys } from 'data/sql/keys'
-import { useFlag } from 'hooks/ui/useFlag'
import type { ResponseError } from 'types'
import { authKeys } from './keys'
@@ -41,7 +39,7 @@ export const useUserInviteMutation = ({
await Promise.all([
queryClient.invalidateQueries(authKeys.usersInfinite(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, authKeys.usersCount(projectRef))),
+ queryClient.invalidateQueries(authKeys.usersCount(projectRef)),
])
await onSuccess?.(data, variables, context)
diff --git a/apps/studio/data/auth/users-count-query.ts b/apps/studio/data/auth/users-count-query.ts
index 73b475ad066..927bb95ad2b 100644
--- a/apps/studio/data/auth/users-count-query.ts
+++ b/apps/studio/data/auth/users-count-query.ts
@@ -1,6 +1,6 @@
-import { UseQueryOptions } from '@tanstack/react-query'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from 'data/sql/execute-sql-query'
+import { executeSql, ExecuteSqlError } from 'data/sql/execute-sql-query'
import { authKeys } from './keys'
import { Filter } from './users-infinite-query'
@@ -12,12 +12,12 @@ type UsersCountVariables = {
providers?: string[]
}
-const getUsersCountSQl = ({
- verified,
+const getUsersCountSql = ({
+ filter,
keywords,
providers,
}: {
- verified?: Filter
+ filter?: Filter
keywords?: string
providers?: string[]
}) => {
@@ -32,11 +32,11 @@ const getUsersCountSQl = ({
)
}
- if (verified === 'verified') {
+ if (filter === 'verified') {
conditions.push(`email_confirmed_at IS NOT NULL or phone_confirmed_at IS NOT NULL`)
- } else if (verified === 'anonymous') {
+ } else if (filter === 'anonymous') {
conditions.push(`is_anonymous is true`)
- } else if (verified === 'unverified') {
+ } else if (filter === 'unverified') {
conditions.push(`email_confirmed_at IS NULL AND phone_confirmed_at IS NULL`)
}
@@ -59,20 +59,44 @@ const getUsersCountSQl = ({
return `${baseQueryCount}${conditions.length > 0 ? ` where ${combinedConditions}` : ''};`
}
-export type UsersCountData = { result: [{ count: number }] }
-export type UsersCountError = ExecuteSqlError
-
-export const useUsersCountQuery =
(
+export async function getUsersCount(
{ projectRef, connectionString, keywords, filter, providers }: UsersCountVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+ signal?: AbortSignal
+) {
+ const sql = getUsersCountSql({ filter, keywords, providers })
+
+ const { result } = await executeSql(
{
projectRef,
connectionString,
- sql: getUsersCountSQl({ keywords, verified: filter, providers }),
- queryKey: authKeys.usersCount(projectRef, { keywords, filter, providers }),
+ sql,
+ queryKey: ['users-count'],
},
- options
+ signal
)
+
+ const count = result?.[0]?.count
+
+ if (typeof count !== 'number') {
+ throw new Error('Error fetching users count')
+ }
+
+ return count
}
+
+export type UsersCountData = Awaited>
+export type UsersCountError = ExecuteSqlError
+
+export const useUsersCountQuery = (
+ { projectRef, connectionString, keywords, filter, providers }: UsersCountVariables,
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ authKeys.usersCount(projectRef, { keywords, filter, providers }),
+ ({ signal }) =>
+ getUsersCount({ projectRef, connectionString, keywords, filter, providers }, signal),
+ {
+ enabled: enabled && typeof projectRef !== 'undefined',
+ ...options,
+ }
+ )
diff --git a/apps/studio/data/auth/users-infinite-query.ts b/apps/studio/data/auth/users-infinite-query.ts
index 97ec9d82287..01f817eea57 100644
--- a/apps/studio/data/auth/users-infinite-query.ts
+++ b/apps/studio/data/auth/users-infinite-query.ts
@@ -109,9 +109,7 @@ export const useUsersInfiniteQuery = (
)
},
{
- staleTime: 0,
enabled: enabled && typeof projectRef !== 'undefined' && isActive,
-
getNextPageParam(lastPage, pages) {
const page = pages.length
const hasNextPage = lastPage.result.length <= USERS_PAGE_LIMIT
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 16350f8961f..5ef14555e59 100644
--- a/apps/studio/data/database-columns/database-column-delete-mutation.ts
+++ b/apps/studio/data/database-columns/database-column-delete-mutation.ts
@@ -4,7 +4,6 @@ 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'
@@ -58,11 +57,13 @@ export const useDatabaseColumnDeleteMutation = ({
async onSuccess(data, variables, context) {
const { projectRef, table } = variables
await Promise.all([
- queryClient.invalidateQueries(sqlKeys.query(projectRef, ['foreign-key-constraints'])),
// refetch all entities in the sidebar because deleting a column may regenerate a view (and change its id)
queryClient.invalidateQueries(entityTypeKeys.list(projectRef)),
...(table !== undefined
? [
+ queryClient.invalidateQueries(
+ databaseKeys.foreignKeyConstraints(projectRef, table?.schema)
+ ),
queryClient.invalidateQueries(tableEditorKeys.tableEditor(projectRef, table.id)),
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
diff --git a/apps/studio/data/database-functions/database-functions-create-mutation.ts b/apps/studio/data/database-functions/database-functions-create-mutation.ts
index 230553fd563..de7ea73dc6d 100644
--- a/apps/studio/data/database-functions/database-functions-create-mutation.ts
+++ b/apps/studio/data/database-functions/database-functions-create-mutation.ts
@@ -3,8 +3,8 @@ import { toast } from 'sonner'
import { z } from 'zod'
import pgMeta from '@supabase/pg-meta'
+import { databaseKeys } from 'data/database/keys'
import { executeSql } from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
import type { ResponseError } from 'types'
export type DatabaseFunctionCreateVariables = {
@@ -47,7 +47,7 @@ export const useDatabaseFunctionCreateMutation = ({
{
async onSuccess(data, variables, context) {
const { projectRef } = variables
- await queryClient.invalidateQueries(sqlKeys.query(projectRef, ['functions-list']))
+ await queryClient.invalidateQueries(databaseKeys.databaseFunctions(projectRef))
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/database-functions/database-functions-delete-mutation.ts b/apps/studio/data/database-functions/database-functions-delete-mutation.ts
index c19e086fb0f..af2f36f65f2 100644
--- a/apps/studio/data/database-functions/database-functions-delete-mutation.ts
+++ b/apps/studio/data/database-functions/database-functions-delete-mutation.ts
@@ -3,8 +3,8 @@ import { toast } from 'sonner'
import { z } from 'zod'
import pgMeta from '@supabase/pg-meta'
+import { databaseKeys } from 'data/database/keys'
import { executeSql } from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
import type { ResponseError } from 'types'
import { DatabaseFunction } from './database-functions-query'
@@ -48,7 +48,7 @@ export const useDatabaseFunctionDeleteMutation = ({
{
async onSuccess(data, variables, context) {
const { projectRef } = variables
- await queryClient.invalidateQueries(sqlKeys.query(projectRef, ['functions-list']))
+ await queryClient.invalidateQueries(databaseKeys.databaseFunctions(projectRef))
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/database-functions/database-functions-query.ts b/apps/studio/data/database-functions/database-functions-query.ts
index a6e7148ca79..d15671b7ea5 100644
--- a/apps/studio/data/database-functions/database-functions-query.ts
+++ b/apps/studio/data/database-functions/database-functions-query.ts
@@ -1,7 +1,7 @@
import pgMeta from '@supabase/pg-meta'
-import { UseQueryOptions } from '@tanstack/react-query'
-import type { ExecuteSqlData, ExecuteSqlError } from 'data/sql/execute-sql-query'
-import { useExecuteSqlQuery } from 'data/sql/execute-sql-query'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { databaseKeys } from 'data/database/keys'
+import { executeSql } from 'data/sql/execute-sql-query'
import type { ResponseError } from 'types'
import { z } from 'zod'
@@ -14,27 +14,38 @@ export type DatabaseFunction = z.infer
const pgMetaFunctionsList = pgMeta.functions.list()
-export type DatabaseFunctionsData = z.infer
-export type DatabaseFunctionsError = ResponseError
-
-export const useDatabaseFunctionsQuery = <
- TData extends DatabaseFunctionsData = DatabaseFunctionsData,
->(
+export async function getDatabaseFunctions(
{ projectRef, connectionString }: DatabaseFunctionsVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+ signal?: AbortSignal
+) {
+ const { result } = await executeSql(
{
projectRef,
connectionString,
sql: pgMetaFunctionsList.sql,
- queryKey: ['functions-list'],
+ queryKey: ['database-functions'],
},
+ signal
+ )
+
+ return result as DatabaseFunction[]
+}
+
+export type DatabaseFunctionsData = z.infer
+export type DatabaseFunctionsError = ResponseError
+
+export const useDatabaseFunctionsQuery = (
+ { projectRef, connectionString }: DatabaseFunctionsVariables,
+ {
+ enabled = true,
+ ...options
+ }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.databaseFunctions(projectRef),
+ ({ signal }) => getDatabaseFunctions({ projectRef, connectionString }, signal),
{
- select(data) {
- return (data as any)?.result ?? []
- },
+ enabled: enabled && typeof projectRef !== 'undefined',
...options,
}
)
-}
diff --git a/apps/studio/data/database-functions/database-functions-update-mutation.ts b/apps/studio/data/database-functions/database-functions-update-mutation.ts
index 3f58bf3bdde..cc4a3d07841 100644
--- a/apps/studio/data/database-functions/database-functions-update-mutation.ts
+++ b/apps/studio/data/database-functions/database-functions-update-mutation.ts
@@ -3,8 +3,8 @@ import { toast } from 'sonner'
import { z } from 'zod'
import pgMeta from '@supabase/pg-meta'
+import { databaseKeys } from 'data/database/keys'
import { executeSql } from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
import type { ResponseError } from 'types'
import type { DatabaseFunction } from './database-functions-query'
@@ -50,7 +50,7 @@ export const useDatabaseFunctionUpdateMutation = ({
{
async onSuccess(data, variables, context) {
const { projectRef } = variables
- await queryClient.invalidateQueries(sqlKeys.query(projectRef, ['functions-list']))
+ await queryClient.invalidateQueries(databaseKeys.databaseFunctions(projectRef))
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/database-policies/database-policies-query.ts b/apps/studio/data/database-policies/database-policies-query.ts
index e0246c3d943..d9855f37681 100644
--- a/apps/studio/data/database-policies/database-policies-query.ts
+++ b/apps/studio/data/database-policies/database-policies-query.ts
@@ -14,11 +14,12 @@ export type DatabasePoliciesVariables = {
export async function getDatabasePolicies(
{ projectRef, connectionString, schema }: DatabasePoliciesVariables,
- signal?: AbortSignal
+ signal?: AbortSignal,
+ headersInit?: HeadersInit
) {
if (!projectRef) throw new Error('projectRef is required')
- let headers = new Headers()
+ let headers = new Headers(headersInit)
if (connectionString) headers.set('x-connection-encrypted', connectionString)
const { data, error } = await get('/platform/pg-meta/{ref}/policies', {
diff --git a/apps/studio/data/database-roles/database-roles-query.ts b/apps/studio/data/database-roles/database-roles-query.ts
index 9a5569b07ae..8ea80d1b608 100644
--- a/apps/studio/data/database-roles/database-roles-query.ts
+++ b/apps/studio/data/database-roles/database-roles-query.ts
@@ -1,9 +1,9 @@
import pgMeta from '@supabase/pg-meta'
-import { QueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { QueryClient, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { z } from 'zod'
-import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
+import { executeSql, ExecuteSqlError } from 'data/sql/execute-sql-query'
+import { databaseRoleKeys } from './keys'
export type DatabaseRolesVariables = {
projectRef?: string
@@ -14,28 +14,34 @@ export type PgRole = z.infer
const pgMetaRolesList = pgMeta.roles.list()
+export async function getDatabaseRoles(
+ { projectRef, connectionString }: DatabaseRolesVariables,
+ signal?: AbortSignal
+) {
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql: pgMetaRolesList.sql, queryKey: ['database-roles'] },
+ signal
+ )
+
+ return result as PgRole[]
+}
+
export type DatabaseRolesData = z.infer
export type DatabaseRolesError = ExecuteSqlError
export const useDatabaseRolesQuery = (
{ projectRef, connectionString }: DatabaseRolesVariables,
- options: UseQueryOptions = {}
+ { enabled = true, ...options }: UseQueryOptions = {}
) =>
- useExecuteSqlQuery(
+ useQuery(
+ databaseRoleKeys.databaseRoles(projectRef),
+ ({ signal }) => getDatabaseRoles({ projectRef, connectionString }, signal),
{
- projectRef,
- connectionString,
- sql: pgMetaRolesList.sql,
- queryKey: ['roles', 'list'],
- },
- {
- select(data) {
- return data.result
- },
+ enabled: enabled && typeof projectRef !== 'undefined',
...options,
}
)
export function invalidateRolesQuery(client: QueryClient, projectRef: string | undefined) {
- return client.invalidateQueries(sqlKeys.query(projectRef, ['roles', 'list']))
+ return client.invalidateQueries(databaseRoleKeys.databaseRoles(projectRef))
}
diff --git a/apps/studio/data/database-roles/keys.ts b/apps/studio/data/database-roles/keys.ts
new file mode 100644
index 00000000000..02d00897b74
--- /dev/null
+++ b/apps/studio/data/database-roles/keys.ts
@@ -0,0 +1,4 @@
+export const databaseRoleKeys = {
+ databaseRoles: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'database-roles'] as const,
+}
diff --git a/apps/studio/data/database-triggers/database-triggers-query.ts b/apps/studio/data/database-triggers/database-triggers-query.ts
index 46fc96cfc2b..065ec129d40 100644
--- a/apps/studio/data/database-triggers/database-triggers-query.ts
+++ b/apps/studio/data/database-triggers/database-triggers-query.ts
@@ -42,7 +42,6 @@ export const useDatabaseHooksQuery = (
databaseTriggerKeys.list(projectRef),
({ signal }) => getDatabaseTriggers({ projectRef, connectionString }, signal),
{
- staleTime: 0,
// @ts-ignore
select(data) {
return (data as PostgresTrigger[]).filter(
diff --git a/apps/studio/data/database/database-size-query.ts b/apps/studio/data/database/database-size-query.ts
index 4a51c4b5e19..484cff8525a 100644
--- a/apps/studio/data/database/database-size-query.ts
+++ b/apps/studio/data/database/database-size-query.ts
@@ -1,7 +1,8 @@
-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'
-export const getDatabaseSizeQuery = () => {
+export const getDatabaseSizeSql = () => {
const sql = /* SQL */ `
select sum(pg_database_size(pg_database.datname))::bigint as db_size from pg_database;
`.trim()
@@ -14,23 +15,42 @@ export type DatabaseSizeVariables = {
connectionString?: string
}
-export type DatabaseSizeData = { result: { db_size: number }[] }
-export type DatabaseSizeError = ExecuteSqlError
-
-export const useDatabaseSizeQuery = (
+export async function getDatabaseSize(
{ projectRef, connectionString }: DatabaseSizeVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+ signal?: AbortSignal
+) {
+ const sql = getDatabaseSizeSql()
+
+ const { result } = await executeSql(
{
projectRef,
connectionString,
- sql: getDatabaseSizeQuery(),
+ sql,
queryKey: ['database-size'],
},
+ signal
+ )
+
+ const dbSize = result?.[0]?.db_size
+ if (typeof dbSize !== 'number') {
+ throw new Error('Error fetching dbSize')
+ }
+
+ return dbSize
+}
+
+export type DatabaseSizeData = Awaited>
+export type DatabaseSizeError = ExecuteSqlError
+
+export const useDatabaseSizeQuery = (
+ { projectRef, connectionString }: DatabaseSizeVariables,
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.databaseSize(projectRef),
+ ({ signal }) => getDatabaseSize({ projectRef, connectionString }, signal),
{
+ enabled: enabled && typeof projectRef !== 'undefined',
...options,
- staleTime: 1000 * 60, // default good for a minute
}
)
-}
diff --git a/apps/studio/data/database/database-table-definition.ts b/apps/studio/data/database/database-table-definition.ts
index 0e09cb40507..59baf815eee 100644
--- a/apps/studio/data/database/database-table-definition.ts
+++ b/apps/studio/data/database/database-table-definition.ts
@@ -13,7 +13,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
/* SQL */ `
DROP TYPE IF EXISTS pg_temp.tabledefs CASCADE;
CREATE TYPE pg_temp.tabledefs AS ENUM ('PKEY_INTERNAL','PKEY_EXTERNAL','FKEYS_INTERNAL', 'FKEYS_EXTERNAL', 'COMMENTS', 'FKEYS_NONE', 'INCLUDE_TRIGGERS', 'NO_TRIGGERS');
-
+
-- SELECT * FROM pg_temp.pg_get_coldef('sample','orders','id');
-- DROP FUNCTION pg_temp.pg_get_coldef(text,text,text,boolean);
CREATE OR REPLACE FUNCTION pg_temp.pg_get_coldef(
@@ -32,39 +32,39 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
v_dt2 text;
v_dt3 text;
v_nullable boolean;
- v_position int;
- v_identity text;
- v_generated text;
- v_hasdflt boolean;
+ v_position int;
+ v_identity text;
+ v_generated text;
+ v_hasdflt boolean;
v_dfltexpr text;
-
+
BEGIN
- IF oldway THEN
- SELECT pg_catalog.format_type(a.atttypid, a.atttypmod) INTO v_coldef FROM pg_namespace n, pg_class c, pg_attribute a, pg_type t
+ IF oldway THEN
+ SELECT pg_catalog.format_type(a.atttypid, a.atttypmod) INTO v_coldef FROM pg_namespace n, pg_class c, pg_attribute a, pg_type t
WHERE n.nspname = in_schema AND n.oid = c.relnamespace AND c.relname = in_table AND a.attname = in_column and a.attnum > 0 AND a.attrelid = c.oid AND a.atttypid = t.oid ORDER BY a.attnum;
-- RAISE NOTICE 'DEBUG: oldway=%',v_coldef;
ELSE
-- a.attrelid::regclass::text, a.attname
- SELECT CASE WHEN a.atttypid = ANY ('{int,int8,int2}'::regtype[]) AND EXISTS (SELECT FROM pg_attrdef ad WHERE ad.adrelid = a.attrelid AND ad.adnum = a.attnum AND
- pg_get_expr(ad.adbin, ad.adrelid) = 'nextval(''' || (pg_get_serial_sequence (a.attrelid::regclass::text, a.attname))::regclass || '''::regclass)') THEN CASE a.atttypid
- WHEN 'int'::regtype THEN 'serial' WHEN 'int8'::regtype THEN 'bigserial' WHEN 'int2'::regtype THEN 'smallserial' END ELSE format_type(a.atttypid, a.atttypmod) END AS data_type
- INTO v_coldef FROM pg_namespace n, pg_class c, pg_attribute a, pg_type t
+ SELECT CASE WHEN a.atttypid = ANY ('{int,int8,int2}'::regtype[]) AND EXISTS (SELECT FROM pg_attrdef ad WHERE ad.adrelid = a.attrelid AND ad.adnum = a.attnum AND
+ pg_get_expr(ad.adbin, ad.adrelid) = 'nextval(''' || (pg_get_serial_sequence (a.attrelid::regclass::text, a.attname))::regclass || '''::regclass)') THEN CASE a.atttypid
+ WHEN 'int'::regtype THEN 'serial' WHEN 'int8'::regtype THEN 'bigserial' WHEN 'int2'::regtype THEN 'smallserial' END ELSE format_type(a.atttypid, a.atttypmod) END AS data_type
+ INTO v_coldef FROM pg_namespace n, pg_class c, pg_attribute a, pg_type t
WHERE n.nspname = in_schema AND n.oid = c.relnamespace AND c.relname = in_table AND a.attname = in_column and a.attnum > 0 AND a.attrelid = c.oid AND a.atttypid = t.oid ORDER BY a.attnum;
-- RAISE NOTICE 'DEBUG: newway=%',v_coldef;
-
- -- Issue#24: not implemented yet
+
+ -- Issue#24: not implemented yet
-- might replace with this below to do more detailed parsing...
- -- SELECT a.atttypid::regtype AS dt1, format_type(a.atttypid, a.atttypmod) as dt2, t.typname as dt3, CASE WHEN not(a.attnotnull) THEN True ELSE False END AS nullable,
- -- a.attnum, a.attidentity, a.attgenerated, a.atthasdef, pg_get_expr(ad.adbin, ad.adrelid) dfltexpr
- -- INTO v_dt1, v_dt2, v_dt3, v_nullable, v_position, v_identity, v_generated, v_hasdflt, v_dfltexpr
- -- FROM pg_attribute a JOIN pg_class c ON (a.attrelid = c.oid) JOIN pg_type t ON (a.atttypid = t.oid) LEFT JOIN pg_attrdef ad ON (a.attrelid = ad.adrelid AND a.attnum = ad.adnum)
+ -- SELECT a.atttypid::regtype AS dt1, format_type(a.atttypid, a.atttypmod) as dt2, t.typname as dt3, CASE WHEN not(a.attnotnull) THEN True ELSE False END AS nullable,
+ -- a.attnum, a.attidentity, a.attgenerated, a.atthasdef, pg_get_expr(ad.adbin, ad.adrelid) dfltexpr
+ -- INTO v_dt1, v_dt2, v_dt3, v_nullable, v_position, v_identity, v_generated, v_hasdflt, v_dfltexpr
+ -- FROM pg_attribute a JOIN pg_class c ON (a.attrelid = c.oid) JOIN pg_type t ON (a.atttypid = t.oid) LEFT JOIN pg_attrdef ad ON (a.attrelid = ad.adrelid AND a.attnum = ad.adnum)
-- WHERE c.relkind in ('r','p') AND a.attnum > 0 AND NOT a.attisdropped AND c.relnamespace::regnamespace::text = in_schema AND c.relname = in_table AND a.attname = in_column;
-- RAISE NOTICE 'schema=% table=% column=% dt1=% dt2=% dt3=% nullable=% pos=% identity=% generated=% HasDefault=% DeftExpr=%', in_schema, in_table, in_column, v_dt1,v_dt2,v_dt3,v_nullable,v_position,v_identity,v_generated,v_hasdflt,v_dfltexpr;
END IF;
RETURN v_coldef;
END;
$$;
-
+
-- SELECT * FROM pg_temp.pg_get_tabledef('sample', 'address', false);
DROP FUNCTION IF EXISTS pg_temp.pg_get_tabledef(character varying,character varying,boolean,tabledefs[]);
CREATE OR REPLACE FUNCTION pg_temp.pg_get_tabledef(
@@ -97,7 +97,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
v_parent text;
v_parent_schema text;
v_persist text;
- v_temp text := '';
+ v_temp text := '';
v_temp2 text;
v_relopts text;
v_tablespace text;
@@ -116,8 +116,8 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
search_path_new text := '';
v_partial boolean;
v_pos integer;
-
- -- assume defaults for ENUMs at the getgo
+
+ -- assume defaults for ENUMs at the getgo
pkcnt int := 0;
fkcnt int := 0;
trigcnt int := 0;
@@ -128,7 +128,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
arglen integer;
vargs text;
avarg pg_temp.tabledefs;
-
+
-- exception variables
v_ret text;
v_diag1 text;
@@ -137,14 +137,14 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
v_diag4 text;
v_diag5 text;
v_diag6 text;
-
+
BEGIN
SET client_min_messages = 'notice';
IF _verbose THEN bVerbose = True; END IF;
-
- -- v17 fix: handle case-sensitive
+
+ -- v17 fix: handle case-sensitive
-- v_qualified = in_schema || '.' || in_table;
-
+
arglen := array_length($4, 1);
IF arglen IS NULL THEN
-- nothing to do, so assume defaults
@@ -164,44 +164,44 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
trigtype = avarg;
ELSEIF avarg = 'PKEY_EXTERNAL' THEN
pkcnt = pkcnt + 1;
- pktype = avarg;
+ pktype = avarg;
ELSEIF avarg = 'COMMENTS' THEN
cmtcnt = cmtcnt + 1;
-
+
END IF;
END LOOP;
- IF fkcnt > 1 THEN
+ IF fkcnt > 1 THEN
RAISE WARNING 'Only one foreign key option can be provided. You provided %', fkcnt;
RETURN '';
- ELSEIF trigcnt > 1 THEN
+ ELSEIF trigcnt > 1 THEN
RAISE WARNING 'Only one trigger option can be provided. You provided %', trigcnt;
RETURN '';
- ELSEIF pkcnt > 1 THEN
+ ELSEIF pkcnt > 1 THEN
RAISE WARNING 'Only one pkey option can be provided. You provided %', pkcnt;
- RETURN '';
- ELSEIF cmtcnt > 1 THEN
+ RETURN '';
+ ELSEIF cmtcnt > 1 THEN
RAISE WARNING 'Only one comments option can be provided. You provided %', cmtcnt;
- RETURN '';
-
- END IF;
+ RETURN '';
+
+ END IF;
END IF;
-
+
SELECT c.oid, (select setting from pg_settings where name = 'server_version_num') INTO v_table_oid, v_pgversion FROM pg_catalog.pg_class c LEFT JOIN pg_catalog.pg_namespace n ON n.oid = c.relnamespace
WHERE c.relkind in ('r','p') AND c.relname = in_table AND n.nspname = in_schema;
-
+
-- set search_path = public before we do anything to force explicit schema qualification but dont forget to set it back before exiting...
SELECT setting INTO search_path_old FROM pg_settings WHERE name = 'search_path';
-
+
-- RAISE NOTICE 'DEBUG tableddl: saving old search_path: ***%***', search_path_old;
EXECUTE 'SET search_path = "public"';
SELECT setting INTO search_path_new FROM pg_settings WHERE name = 'search_path';
-- RAISE NOTICE 'DEBUG tableddl: using new search path=***%***', search_path_new;
-
+
-- throw an error if table was not found
IF (v_table_oid IS NULL) THEN
RAISE EXCEPTION 'table does not exist';
END IF;
-
+
-- get user-defined tablespaces if applicable
SELECT tablespace INTO v_temp FROM pg_tables WHERE schemaname = in_schema and tablename = in_table and tablespace IS NOT NULL;
IF v_temp IS NULL THEN
@@ -209,16 +209,16 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
ELSE
v_tablespace := 'TABLESPACE ' || v_temp;
END IF;
-
+
-- also see if there are any SET commands for this table, ie, autovacuum_enabled=off, fillfactor=70
- WITH relopts AS (SELECT unnest(c.reloptions) relopts FROM pg_class c, pg_namespace n WHERE n.nspname = in_schema and n.oid = c.relnamespace and c.relname = in_table)
+ WITH relopts AS (SELECT unnest(c.reloptions) relopts FROM pg_class c, pg_namespace n WHERE n.nspname = in_schema and n.oid = c.relnamespace and c.relname = in_table)
SELECT string_agg(r.relopts, ', ') as relopts INTO v_temp from relopts r;
IF v_temp IS NULL THEN
v_relopts := '';
ELSE
v_relopts := ' WITH (' || v_temp || ')';
END IF;
-
+
-- -----------------------------------------------------------------------------------
-- Create table defs for partitions/children using inheritance or declarative methods.
-- inheritance: pg_class.relkind = 'r' pg_class.relispartition=false pg_class.relpartbound is NULL
@@ -230,7 +230,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
IF v_pgversion < 100000 THEN
-- Issue#11: handle parent schema
SELECT c2.relname parent, c2.relnamespace::regnamespace INTO v_parent, v_parent_schema from pg_class c1, pg_namespace n, pg_inherits i, pg_class c2
- WHERE n.nspname = in_schema and n.oid = c1.relnamespace and c1.relname = in_table and c1.oid = i.inhrelid and i.inhparent = c2.oid and c1.relkind = 'r';
+ WHERE n.nspname = in_schema and n.oid = c1.relnamespace and c1.relname = in_table and c1.oid = i.inhrelid and i.inhparent = c2.oid and c1.relkind = 'r';
IF (v_parent IS NOT NULL) THEN
bPartition := True;
bInheritance := True;
@@ -250,24 +250,24 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
END IF;
IF bPartition THEN
--Issue#17 fix for case-sensitive tables
- -- SELECT count(*) INTO v_cnt1 FROM information_schema.tables t WHERE EXISTS (SELECT REGEXP_MATCHES(s.table_name, '([A-Z]+)','g') FROM information_schema.tables s
- -- WHERE t.table_schema=s.table_schema AND t.table_name=s.table_name AND t.table_schema = quote_ident(in_schema) AND t.table_name = quote_ident(in_table) AND t.table_type = 'BASE TABLE');
- SELECT count(*) INTO v_cnt1 FROM information_schema.tables t WHERE EXISTS (SELECT REGEXP_MATCHES(s.table_name, '([A-Z]+)','g') FROM information_schema.tables s
- WHERE t.table_schema=s.table_schema AND t.table_name=s.table_name AND t.table_schema = in_schema AND t.table_name = in_table AND t.table_type = 'BASE TABLE');
-
+ -- SELECT count(*) INTO v_cnt1 FROM information_schema.tables t WHERE EXISTS (SELECT REGEXP_MATCHES(s.table_name, '([A-Z]+)','g') FROM information_schema.tables s
+ -- WHERE t.table_schema=s.table_schema AND t.table_name=s.table_name AND t.table_schema = quote_ident(in_schema) AND t.table_name = quote_ident(in_table) AND t.table_type = 'BASE TABLE');
+ SELECT count(*) INTO v_cnt1 FROM information_schema.tables t WHERE EXISTS (SELECT REGEXP_MATCHES(s.table_name, '([A-Z]+)','g') FROM information_schema.tables s
+ WHERE t.table_schema=s.table_schema AND t.table_name=s.table_name AND t.table_schema = in_schema AND t.table_name = in_table AND t.table_type = 'BASE TABLE');
+
--Issue#19 put double-quotes around SQL keyword column names
-- Issue#121: fix keyword lookup for table name not column name that does not apply here
-- SELECT COUNT(*) INTO v_cnt2 FROM pg_get_keywords() WHERE word = v_colrec.column_name AND catcode = 'R';
SELECT COUNT(*) INTO v_cnt2 FROM pg_get_keywords() WHERE word = in_table AND catcode = 'R';
-
+
IF bInheritance THEN
-- inheritance-based
IF v_cnt1 > 0 OR v_cnt2 > 0 THEN
- v_table_ddl := 'CREATE TABLE ' || in_schema || '."' || in_table || '"( '|| E'\\n';
+ v_table_ddl := 'CREATE TABLE ' || in_schema || '."' || in_table || '"( '|| E'\\n';
ELSE
- v_table_ddl := 'CREATE TABLE ' || in_schema || '.' || in_table || '( '|| E'\\n';
+ v_table_ddl := 'CREATE TABLE ' || in_schema || '.' || in_table || '( '|| E'\\n';
END IF;
-
+
-- Jump to constraints section to add the check constraints
ELSE
-- declarative-based
@@ -288,7 +288,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
END IF;
END IF;
IF bVerbose THEN RAISE NOTICE '(1)tabledef so far: %', v_table_ddl; END IF;
-
+
IF NOT bPartition THEN
-- see if this is unlogged or temporary table
select c.relpersistence into v_persist from pg_class c, pg_namespace n where n.nspname = in_schema and n.oid = c.relnamespace and c.relname = in_table and c.relkind = 'r';
@@ -300,29 +300,29 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
v_temp := '';
END IF;
END IF;
-
+
-- start the create definition for regular tables unless we are in progress creating an inheritance-based child table
IF NOT bPartition THEN
--Issue#17 fix for case-sensitive tables
- -- SELECT count(*) INTO v_cnt1 FROM information_schema.tables t WHERE EXISTS (SELECT REGEXP_MATCHES(s.table_name, '([A-Z]+)','g') FROM information_schema.tables s
- -- WHERE t.table_schema=s.table_schema AND t.table_name=s.table_name AND t.table_schema = quote_ident(in_schema) AND t.table_name = quote_ident(in_table) AND t.table_type = 'BASE TABLE');
- SELECT count(*) INTO v_cnt1 FROM information_schema.tables t WHERE EXISTS (SELECT REGEXP_MATCHES(s.table_name, '([A-Z]+)','g') FROM information_schema.tables s
- WHERE t.table_schema=s.table_schema AND t.table_name=s.table_name AND t.table_schema = in_schema AND t.table_name = in_table AND t.table_type = 'BASE TABLE');
+ -- SELECT count(*) INTO v_cnt1 FROM information_schema.tables t WHERE EXISTS (SELECT REGEXP_MATCHES(s.table_name, '([A-Z]+)','g') FROM information_schema.tables s
+ -- WHERE t.table_schema=s.table_schema AND t.table_name=s.table_name AND t.table_schema = quote_ident(in_schema) AND t.table_name = quote_ident(in_table) AND t.table_type = 'BASE TABLE');
+ SELECT count(*) INTO v_cnt1 FROM information_schema.tables t WHERE EXISTS (SELECT REGEXP_MATCHES(s.table_name, '([A-Z]+)','g') FROM information_schema.tables s
+ WHERE t.table_schema=s.table_schema AND t.table_name=s.table_name AND t.table_schema = in_schema AND t.table_name = in_table AND t.table_type = 'BASE TABLE');
IF v_cnt1 > 0 THEN
v_table_ddl := 'CREATE ' || v_temp || ' TABLE ' || in_schema || '."' || in_table || '" (' || E'\\n';
ELSE
v_table_ddl := 'CREATE ' || v_temp || ' TABLE ' || in_schema || '.' || in_table || ' (' || E'\\n';
END IF;
END IF;
- -- RAISE NOTICE 'DEBUG2: tabledef so far: %', v_table_ddl;
+ -- RAISE NOTICE 'DEBUG2: tabledef so far: %', v_table_ddl;
-- define all of the columns in the table unless we are in progress creating an inheritance-based child table
IF NOT bPartition THEN
FOR v_colrec IN
- SELECT c.column_name, c.data_type, c.udt_name, c.udt_schema, c.character_maximum_length, c.is_nullable, c.column_default, c.numeric_precision, c.numeric_scale, c.is_identity, c.identity_generation, c.is_generated, c.generation_expression
+ SELECT c.column_name, c.data_type, c.udt_name, c.udt_schema, c.character_maximum_length, c.is_nullable, c.column_default, c.numeric_precision, c.numeric_scale, c.is_identity, c.identity_generation, c.is_generated, c.generation_expression
FROM information_schema.columns c WHERE (table_schema, table_name) = (in_schema, in_table) ORDER BY ordinal_position
LOOP
- IF bVerbose THEN RAISE NOTICE '(col loop) name=% type=% udt_name=% default=% is_generated=% gen_expr=%', v_colrec.column_name, v_colrec.data_type, v_colrec.udt_name, v_colrec.column_default, v_colrec.is_generated, v_colrec.generation_expression; END IF;
-
+ IF bVerbose THEN RAISE NOTICE '(col loop) name=% type=% udt_name=% default=% is_generated=% gen_expr=%', v_colrec.column_name, v_colrec.data_type, v_colrec.udt_name, v_colrec.column_default, v_colrec.is_generated, v_colrec.generation_expression; END IF;
+
-- v17 fix: handle case-sensitive for pg_get_serial_sequence that requires SQL Identifier handling
-- SELECT CASE WHEN pg_get_serial_sequence(v_qualified, v_colrec.column_name) IS NOT NULL THEN True ELSE False END into bSerial;
SELECT CASE WHEN pg_get_serial_sequence(quote_ident(in_schema) || '.' || quote_ident(in_table), v_colrec.column_name) IS NOT NULL THEN True ELSE False END into bSerial;
@@ -335,20 +335,20 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
RAISE NOTICE 'DEBUG table: % Column: % datatype: % Serial=% serialval=% coldef=%', v_qualified, v_colrec.column_name, v_colrec.data_type, bSerial, v_temp, v_diag1;
RAISE NOTICE 'DEBUG tabledef: %', v_table_ddl;
END IF;
-
+
--Issue#17 put double-quotes around case-sensitive column names
- SELECT COUNT(*) INTO v_cnt1 FROM information_schema.columns t WHERE EXISTS (SELECT REGEXP_MATCHES(s.column_name, '([A-Z]+)','g') FROM information_schema.columns s
- WHERE t.table_schema=s.table_schema and t.table_name=s.table_name and t.column_name=s.column_name AND t.table_schema = quote_ident(in_schema) AND column_name = v_colrec.column_name);
-
- --Issue#19 put double-quotes around SQL keyword column names
+ SELECT COUNT(*) INTO v_cnt1 FROM information_schema.columns t WHERE EXISTS (SELECT REGEXP_MATCHES(s.column_name, '([A-Z]+)','g') FROM information_schema.columns s
+ WHERE t.table_schema=s.table_schema and t.table_name=s.table_name and t.column_name=s.column_name AND t.table_schema = quote_ident(in_schema) AND column_name = v_colrec.column_name);
+
+ --Issue#19 put double-quotes around SQL keyword column names
SELECT COUNT(*) INTO v_cnt2 FROM pg_get_keywords() WHERE word = v_colrec.column_name AND catcode = 'R';
-
+
IF v_cnt1 > 0 OR v_cnt2 > 0 THEN
v_table_ddl := v_table_ddl || ' "' || v_colrec.column_name || '" ';
ELSE
v_table_ddl := v_table_ddl || ' ' || v_colrec.column_name || ' ';
END IF;
-
+
-- Issue#23: Handle autogenerated columns and rewrite as a simpler IF THEN ELSE branch instead of a much more complex embedded CASE STATEMENT
IF v_colrec.is_generated = 'ALWAYS' and v_colrec.generation_expression IS NOT NULL THEN
-- searchable tsvector GENERATED ALWAYS AS (to_tsvector('simple'::regconfig, COALESCE(translate(email, '@.-'::citext, ' '::text), ''::text)) ) STORED
@@ -361,7 +361,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
-- Issue#6 fix: handle arrays
v_temp = pg_temp.pg_get_coldef(in_schema, in_table,v_colrec.column_name);
-- v17 fix: handle case-sensitive for pg_get_serial_sequence that requires SQL Identifier handling
- -- WHEN pg_get_serial_sequence(v_qualified, v_colrec.column_name) IS NOT NULL
+ -- WHEN pg_get_serial_sequence(v_qualified, v_colrec.column_name) IS NOT NULL
ELSEIF pg_get_serial_sequence(quote_ident(in_schema) || '.' || quote_ident(in_table), v_colrec.column_name) IS NOT NULL THEN
-- Issue#8 fix: handle serial. Note: NOT NULL is implied so no need to declare it explicitly
v_temp = pg_temp.pg_get_coldef(in_schema, in_table,v_colrec.column_name);
@@ -369,31 +369,31 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
v_temp = v_colrec.data_type;
END IF;
-- RAISE NOTICE 'column def1=%', v_temp;
-
+
-- handle IDENTITY columns
IF v_colrec.is_identity = 'YES' THEN
- IF v_colrec.identity_generation = 'ALWAYS' THEN
+ IF v_colrec.identity_generation = 'ALWAYS' THEN
v_temp = v_temp || ' GENERATED ALWAYS AS IDENTITY';
ELSE
v_temp = v_temp || ' GENERATED BY DEFAULT AS IDENTITY';
END IF;
- ELSEIF v_colrec.character_maximum_length IS NOT NULL THEN
+ ELSEIF v_colrec.character_maximum_length IS NOT NULL THEN
v_temp = v_temp || ('(' || v_colrec.character_maximum_length || ')');
- ELSEIF v_colrec.numeric_precision > 0 AND v_colrec.numeric_scale > 0 THEN
+ ELSEIF v_colrec.numeric_precision > 0 AND v_colrec.numeric_scale > 0 THEN
v_temp = v_temp || '(' || v_colrec.numeric_precision || ',' || v_colrec.numeric_scale || ')';
END IF;
-
+
-- Handle NULL/NOT NULL
- IF bSerial THEN
+ IF bSerial THEN
v_temp = v_temp || ' NOT NULL';
- ELSEIF v_colrec.is_nullable = 'NO' THEN
+ ELSEIF v_colrec.is_nullable = 'NO' THEN
v_temp = v_temp || ' NOT NULL';
ELSEIF v_colrec.is_nullable = 'YES' THEN
v_temp = v_temp || ' NULL';
END IF;
-
+
-- Handle defaults
- IF v_colrec.column_default IS NOT null AND NOT bSerial THEN
+ IF v_colrec.column_default IS NOT null AND NOT bSerial THEN
-- RAISE NOTICE 'Setting default for column, %', v_colrec.column_name;
v_temp = v_temp || (' DEFAULT ' || v_colrec.column_default);
END IF;
@@ -401,11 +401,11 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
-- RAISE NOTICE 'column def2=%', v_temp;
v_table_ddl := v_table_ddl || v_temp;
-- RAISE NOTICE 'tabledef=%', v_table_ddl;
-
+
END LOOP;
END IF;
IF bVerbose THEN RAISE NOTICE '(2)tabledef so far: %', v_table_ddl; END IF;
-
+
-- define all the constraints: conparentid does not exist pre PGv11
IF v_pgversion < 110000 THEN
FOR v_constraintrec IN
@@ -435,8 +435,8 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
|| ',' || E'\\n';
ELSE
-- Issue#16 handle external PG def
- SELECT 'ALTER TABLE ONLY ' || in_schema || '.' || c.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_pkey_def
- FROM pg_catalog.pg_constraint r, pg_class c, pg_namespace n where r.conrelid = c.oid and r.contype = 'p' and n.oid = r.connamespace and n.nspname = in_schema AND c.relname = in_table and r.conname = v_constraint_name;
+ SELECT 'ALTER TABLE ONLY ' || in_schema || '.' || c.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_pkey_def
+ FROM pg_catalog.pg_constraint r, pg_class c, pg_namespace n where r.conrelid = c.oid and r.contype = 'p' and n.oid = r.connamespace and n.nspname = in_schema AND c.relname = in_table and r.conname = v_constraint_name;
END IF;
IF bPartition THEN
continue;
@@ -453,10 +453,10 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
|| 'CONSTRAINT' || ' '
|| v_constraint_name || ' '
|| v_constraint_def
- || ',' || E'\\n';
+ || ',' || E'\\n';
ELSE
-- external def
- SELECT 'ALTER TABLE ONLY ' || n.nspname || '.' || c2.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_fkey_def
+ SELECT 'ALTER TABLE ONLY ' || n.nspname || '.' || c2.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_fkey_def
FROM pg_constraint r, pg_class c1, pg_namespace n, pg_class c2 where r.conrelid = c1.oid and r.contype = 'f' and n.nspname = in_schema and n.oid = r.connamespace and r.conrelid = c2.oid and c2.relname = in_table;
v_fkey_defs = v_fkey_defs || v_fkey_def || E'\\n';
END IF;
@@ -466,11 +466,11 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
|| 'CONSTRAINT' || ' '
|| v_constraint_name || ' '
|| v_constraint_def
- || ',' || E'\\n';
+ || ',' || E'\\n';
END IF;
if bVerbose THEN RAISE NOTICE 'DEBUG4: constraint name=% constraint_def=%', v_constraint_name,v_constraint_def; END IF;
constraintarr := constraintarr || v_constraintrec.constraint_name:: text;
-
+
END LOOP;
ELSE
-- handle PG versions 11 and up
@@ -486,9 +486,9 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
END as type_rank,
pg_get_constraintdef(con.oid) as constraint_definition
FROM pg_catalog.pg_constraint con JOIN pg_catalog.pg_class rel ON rel.oid = con.conrelid JOIN pg_catalog.pg_namespace nsp ON nsp.oid = connamespace
- WHERE nsp.nspname = in_schema AND rel.relname = in_table
+ WHERE nsp.nspname = in_schema AND rel.relname = in_table
--Issue#13 added this condition:
- AND con.conparentid = 0
+ AND con.conparentid = 0
ORDER BY type_rank
LOOP
v_constraint_name := v_constraintrec.constraint_name;
@@ -505,8 +505,8 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
|| ',' || E'\\n';
ELSE
-- Issue#16 handle external PG def
- SELECT 'ALTER TABLE ONLY ' || in_schema || '.' || c.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_pkey_def
- FROM pg_catalog.pg_constraint r, pg_class c, pg_namespace n where r.conrelid = c.oid and r.contype = 'p' and n.oid = r.connamespace and n.nspname = in_schema AND c.relname = in_table;
+ SELECT 'ALTER TABLE ONLY ' || in_schema || '.' || c.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_pkey_def
+ FROM pg_catalog.pg_constraint r, pg_class c, pg_namespace n where r.conrelid = c.oid and r.contype = 'p' and n.oid = r.connamespace and n.nspname = in_schema AND c.relname = in_table;
END IF;
IF bPartition THEN
continue;
@@ -516,18 +516,18 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
--Issue#22 fix: added FKEY_NONE check
IF fktype = 'FKEYS_NONE' THEN
-- skip
- continue;
+ continue;
ELSIF fkcnt = 0 OR fktype = 'FKEYS_INTERNAL' THEN
-- internal def
v_table_ddl := v_table_ddl || ' ' -- note: two char spacer to start, to indent the column
|| 'CONSTRAINT' || ' '
|| v_constraint_name || ' '
|| v_constraint_def
- || ',' || E'\\n';
+ || ',' || E'\\n';
ELSE
-- external def
- SELECT 'ALTER TABLE ONLY ' || n.nspname || '.' || c2.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_fkey_def
- FROM pg_constraint r, pg_class c1, pg_namespace n, pg_class c2 where r.conrelid = c1.oid and r.contype = 'f' and n.nspname = in_schema and n.oid = r.connamespace and r.conrelid = c2.oid and c2.relname = in_table and
+ SELECT 'ALTER TABLE ONLY ' || n.nspname || '.' || c2.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_fkey_def
+ FROM pg_constraint r, pg_class c1, pg_namespace n, pg_class c2 where r.conrelid = c1.oid and r.contype = 'f' and n.nspname = in_schema and n.oid = r.connamespace and r.conrelid = c2.oid and c2.relname = in_table and
r.conname = v_constraint_name and r.conparentid = 0;
v_fkey_defs = v_fkey_defs || v_fkey_def || E'\\n';
END IF;
@@ -537,14 +537,14 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
|| 'CONSTRAINT' || ' '
|| v_constraint_name || ' '
|| v_constraint_def
- || ',' || E'\\n';
+ || ',' || E'\\n';
END IF;
if bVerbose THEN RAISE NOTICE 'DEBUG4: constraint name=% constraint_def=%', v_constraint_name,v_constraint_def; END IF;
constraintarr := constraintarr || v_constraintrec.constraint_name:: text;
-
+
END LOOP;
- END IF;
-
+ END IF;
+
-- drop the last comma before ending the create statement, which should be right before the carriage return character
-- Issue#24: make sure the comma is there before removing it
select substring(v_table_ddl, length(v_table_ddl) - 1, 1) INTO v_temp;
@@ -552,12 +552,12 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
v_table_ddl = substr(v_table_ddl, 0, length(v_table_ddl) - 1) || E'\\n';
END IF;
IF bVerbose THEN RAISE NOTICE '(3)tabledef so far: %', trim(v_table_ddl); END IF;
-
+
-- ---------------------------------------------------------------------------
-- at this point we have everything up to the last table-enclosing parenthesis
-- ---------------------------------------------------------------------------
IF bVerbose THEN RAISE NOTICE '(4)tabledef so far: %', v_table_ddl; END IF;
-
+
-- See if this is an inheritance-based child table and finish up the table create.
IF bPartition and bInheritance THEN
-- Issue#11: handle parent schema
@@ -565,132 +565,132 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
IF v_parent_schema = '' OR v_parent_schema IS NULL THEN v_parent_schema = in_schema; END IF;
v_table_ddl := v_table_ddl || ') INHERITS (' || v_parent_schema || '.' || v_parent || ') ' || E'\\n' || v_relopts || ' ' || v_tablespace || ';' || E'\\n';
END IF;
-
+
IF v_pgversion >= 100000 AND NOT bPartition and NOT bInheritance THEN
- -- See if this is a partitioned table (pg_class.relkind = 'p') and add the partitioned key
- SELECT pg_get_partkeydef(c1.oid) as partition_key INTO v_partition_key FROM pg_class c1 JOIN pg_namespace n ON (n.oid = c1.relnamespace) LEFT JOIN pg_partitioned_table p ON (c1.oid = p.partrelid)
+ -- See if this is a partitioned table (pg_class.relkind = 'p') and add the partitioned key
+ SELECT pg_get_partkeydef(c1.oid) as partition_key INTO v_partition_key FROM pg_class c1 JOIN pg_namespace n ON (n.oid = c1.relnamespace) LEFT JOIN pg_partitioned_table p ON (c1.oid = p.partrelid)
WHERE n.nspname = in_schema and n.oid = c1.relnamespace and c1.relname = in_table and c1.relkind = 'p';
-
+
IF v_partition_key IS NOT NULL AND v_partition_key <> '' THEN
-- add partition clause
-- NOTE: cannot specify default tablespace for partitioned relations
- -- v_table_ddl := v_table_ddl || ') PARTITION BY ' || v_partition_key || ' ' || v_tablespace || ';' || E'\\n';
- v_table_ddl := v_table_ddl || ') PARTITION BY ' || v_partition_key || ';' || E'\\n';
+ -- v_table_ddl := v_table_ddl || ') PARTITION BY ' || v_partition_key || ' ' || v_tablespace || ';' || E'\\n';
+ v_table_ddl := v_table_ddl || ') PARTITION BY ' || v_partition_key || ';' || E'\\n';
ELSEIF v_relopts <> '' THEN
- v_table_ddl := v_table_ddl || ') ' || v_relopts || ' ' || v_tablespace || ';' || E'\\n';
+ v_table_ddl := v_table_ddl || ') ' || v_relopts || ' ' || v_tablespace || ';' || E'\\n';
ELSE
-- end the create definition
- v_table_ddl := v_table_ddl || ') ' || v_tablespace || ';' || E'\\n';
- END IF;
+ v_table_ddl := v_table_ddl || ') ' || v_tablespace || ';' || E'\\n';
+ END IF;
END IF;
-
+
IF bVerbose THEN RAISE NOTICE '(5)tabledef so far: %', v_table_ddl; END IF;
-
+
-- Add closing paren for regular tables
-- IF NOT bPartition THEN
- -- v_table_ddl := v_table_ddl || ') ' || v_relopts || ' ' || v_tablespace || E';\\n';
+ -- v_table_ddl := v_table_ddl || ') ' || v_relopts || ' ' || v_tablespace || E';\\n';
-- END IF;
-- RAISE NOTICE 'ddlsofar3: %', v_table_ddl;
-
+
-- Issue#16 create the external PKEY def if indicated
IF v_pkey_def <> '' THEN
- v_table_ddl := v_table_ddl || v_pkey_def || E'\\n';
+ v_table_ddl := v_table_ddl || v_pkey_def || E'\\n';
END IF;
-
+
-- Issue#20
IF v_fkey_defs <> '' THEN
- v_table_ddl := v_table_ddl || v_fkey_defs || E'\\n';
+ v_table_ddl := v_table_ddl || v_fkey_defs || E'\\n';
END IF;
-
+
IF bVerbose THEN RAISE NOTICE '(6)tabledef so far: %', v_table_ddl; END IF;
-
+
-- create indexes
FOR v_indexrec IN
SELECT indexdef, COALESCE(tablespace, 'pg_default') as tablespace, indexname FROM pg_indexes WHERE (schemaname, tablename) = (in_schema, in_table)
LOOP
- -- RAISE NOTICE 'DEBUG6: indexname=% indexdef=%', v_indexrec.indexname, v_indexrec.indexdef;
+ -- RAISE NOTICE 'DEBUG6: indexname=% indexdef=%', v_indexrec.indexname, v_indexrec.indexdef;
-- loop through constraints and skip ones already defined
bSkip = False;
FOREACH constraintelement IN ARRAY constraintarr
- LOOP
+ LOOP
IF constraintelement = v_indexrec.indexname THEN
-- RAISE NOTICE 'DEBUG7: skipping index, %', v_indexrec.indexname;
bSkip = True;
EXIT;
END IF;
- END LOOP;
+ END LOOP;
if bSkip THEN CONTINUE; END IF;
-
+
-- Add IF NOT EXISTS clause so partition index additions will not be created if declarative partition in effect and index already created on parent
v_indexrec.indexdef := REPLACE(v_indexrec.indexdef, 'CREATE INDEX', 'CREATE INDEX IF NOT EXISTS');
-- Fix Issue#26: do it for unique/primary key indexes as well
v_indexrec.indexdef := REPLACE(v_indexrec.indexdef, 'CREATE UNIQUE INDEX', 'CREATE UNIQUE INDEX IF NOT EXISTS');
-- RAISE NOTICE 'DEBUG8: adding index, %', v_indexrec.indexname;
-
+
-- NOTE: cannot specify default tablespace for partitioned relations
IF v_partition_key IS NOT NULL AND v_partition_key <> '' THEN
v_table_ddl := v_table_ddl || v_indexrec.indexdef || ';' || E'\\n';
ELSE
-- Issue#25: see if partial index or not
- select CASE WHEN i.indpred IS NOT NULL THEN True ELSE False END INTO v_partial
- FROM pg_index i JOIN pg_class c1 ON (i.indexrelid = c1.oid) JOIN pg_class c2 ON (i.indrelid = c2.oid)
- WHERE c1.relnamespace::regnamespace::text = in_schema AND c2.relnamespace::regnamespace::text = in_schema AND c2.relname = in_table AND c1.relname = v_indexrec.indexname;
+ select CASE WHEN i.indpred IS NOT NULL THEN True ELSE False END INTO v_partial
+ FROM pg_index i JOIN pg_class c1 ON (i.indexrelid = c1.oid) JOIN pg_class c2 ON (i.indrelid = c2.oid)
+ WHERE c1.relnamespace::regnamespace::text = in_schema AND c2.relnamespace::regnamespace::text = in_schema AND c2.relname = in_table AND c1.relname = v_indexrec.indexname;
IF v_partial THEN
-- Put tablespace def before WHERE CLAUSE
v_temp = v_indexrec.indexdef;
v_pos = POSITION(' WHERE ' IN v_temp);
v_temp2 = SUBSTRING(v_temp, v_pos);
v_temp = SUBSTRING(v_temp, 1, v_pos);
- v_table_ddl := v_table_ddl || v_temp || ' TABLESPACE ' || v_indexrec.tablespace || v_temp2 || ';' || E'\\n';
+ v_table_ddl := v_table_ddl || v_temp || ' TABLESPACE ' || v_indexrec.tablespace || v_temp2 || ';' || E'\\n';
ELSE
v_table_ddl := v_table_ddl || v_indexrec.indexdef || ' TABLESPACE ' || v_indexrec.tablespace || ';' || E'\\n';
END IF;
END IF;
-
+
END LOOP;
IF bVerbose THEN RAISE NOTICE '(7)tabledef so far: %', v_table_ddl; END IF;
-
+
-- Issue#20: added logic for table and column comments
- IF cmtcnt > 0 THEN
+ IF cmtcnt > 0 THEN
FOR v_rec IN
- SELECT c.relname, 'COMMENT ON ' || CASE WHEN c.relkind in ('r','p') AND a.attname IS NULL THEN 'TABLE ' WHEN c.relkind in ('r','p') AND a.attname IS NOT NULL THEN 'COLUMN ' WHEN c.relkind = 'f' THEN 'FOREIGN TABLE '
- WHEN c.relkind = 'm' THEN 'MATERIALIZED VIEW ' WHEN c.relkind = 'v' THEN 'VIEW ' WHEN c.relkind = 'i' THEN 'INDEX ' WHEN c.relkind = 'S' THEN 'SEQUENCE ' ELSE 'XX' END || n.nspname || '.' ||
+ SELECT c.relname, 'COMMENT ON ' || CASE WHEN c.relkind in ('r','p') AND a.attname IS NULL THEN 'TABLE ' WHEN c.relkind in ('r','p') AND a.attname IS NOT NULL THEN 'COLUMN ' WHEN c.relkind = 'f' THEN 'FOREIGN TABLE '
+ WHEN c.relkind = 'm' THEN 'MATERIALIZED VIEW ' WHEN c.relkind = 'v' THEN 'VIEW ' WHEN c.relkind = 'i' THEN 'INDEX ' WHEN c.relkind = 'S' THEN 'SEQUENCE ' ELSE 'XX' END || n.nspname || '.' ||
CASE WHEN c.relkind in ('r','p') AND a.attname IS NOT NULL THEN quote_ident(c.relname) || '.' || a.attname ELSE quote_ident(c.relname) END || ' IS ' || quote_literal(d.description) || ';' as ddl
FROM pg_class c JOIN pg_namespace n ON (n.oid = c.relnamespace) LEFT JOIN pg_description d ON (c.oid = d.objoid) LEFT JOIN pg_attribute a ON (c.oid = a.attrelid AND a.attnum > 0 and a.attnum = d.objsubid)
WHERE d.description IS NOT NULL AND n.nspname = in_schema AND c.relname = in_table ORDER BY 2 desc, ddl
LOOP
--RAISE NOTICE 'comments:%', v_rec.ddl;
v_table_ddl = v_table_ddl || v_rec.ddl || E'\\n';
- END LOOP;
+ END LOOP;
END IF;
IF bVerbose THEN RAISE NOTICE '(8)tabledef so far: %', v_table_ddl; END IF;
-
+
IF trigtype = 'INCLUDE_TRIGGERS' THEN
-- Issue#14: handle multiple triggers for a table
FOR v_trigrec IN
- select pg_get_triggerdef(t.oid, True) || ';' as triggerdef FROM pg_trigger t, pg_class c, pg_namespace n
+ select pg_get_triggerdef(t.oid, True) || ';' as triggerdef FROM pg_trigger t, pg_class c, pg_namespace n
WHERE n.nspname = in_schema and n.oid = c.relnamespace and c.relname = in_table and c.relkind = 'r' and t.tgrelid = c.oid and NOT t.tgisinternal
LOOP
v_table_ddl := v_table_ddl || v_trigrec.triggerdef;
- v_table_ddl := v_table_ddl || E'\\n';
+ v_table_ddl := v_table_ddl || E'\\n';
IF bVerbose THEN RAISE NOTICE 'triggerdef = %', v_trigrec.triggerdef; END IF;
- END LOOP;
+ END LOOP;
END IF;
-
+
IF bVerbose THEN RAISE NOTICE '(9)tabledef so far: %', v_table_ddl; END IF;
-- add empty line
v_table_ddl := v_table_ddl || E'\\n';
IF bVerbose THEN RAISE NOTICE '(10)tabledef so far: %', v_table_ddl; END IF;
-
+
-- reset search_path back to what it was
IF search_path_old = '' THEN
SELECT set_config('search_path', '', false) into v_temp;
ELSE
EXECUTE 'SET search_path = ' || search_path_old;
END IF;
-
+
RETURN v_table_ddl;
-
+
EXCEPTION
WHEN others THEN
BEGIN
@@ -701,7 +701,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
-- put additional coding here if necessarY
RETURN '';
END;
-
+
END;
$$;`,
{ compress: true, removeAll: true }
diff --git a/apps/studio/data/database/entity-definitions-query.ts b/apps/studio/data/database/entity-definitions-query.ts
index f159eb37256..48d2ce9332a 100644
--- a/apps/studio/data/database/entity-definitions-query.ts
+++ b/apps/studio/data/database/entity-definitions-query.ts
@@ -25,7 +25,7 @@ with records as (
'NO_TRIGGERS'
)
when 'v' then concat(
- 'create view ', concat(nc.nspname, '.', c.relname), ' as',
+ 'create view ', concat(nc.nspname, '.', c.relname), ' as',
pg_get_viewdef(concat(nc.nspname, '.', c.relname), true)
)
when 'm' then concat(
diff --git a/apps/studio/data/database/foreign-key-constraints-query.ts b/apps/studio/data/database/foreign-key-constraints-query.ts
index 7c34c7894fd..351386d41a9 100644
--- a/apps/studio/data/database/foreign-key-constraints-query.ts
+++ b/apps/studio/data/database/foreign-key-constraints-query.ts
@@ -1,12 +1,7 @@
-import { QueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { QueryClient, useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { sqlKeys } from 'data/sql/keys'
-import {
- executeSql,
- ExecuteSqlData,
- ExecuteSqlError,
- useExecuteSqlQuery,
-} from '../sql/execute-sql-query'
+import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query'
+import { databaseKeys } from './keys'
type GetForeignKeyConstraintsVariables = {
schema?: string
@@ -42,7 +37,11 @@ export type ForeignKeyConstraint = {
target_columns: string[]
}
-export const getForeignKeyConstraintsQuery = ({ schema }: GetForeignKeyConstraintsVariables) => {
+export const getForeignKeyConstraintsSql = ({ schema }: GetForeignKeyConstraintsVariables) => {
+ if (!schema) {
+ throw new Error('schema is required')
+ }
+
const sql = /* SQL */ `
SELECT
con.oid as id,
@@ -89,7 +88,7 @@ FROM
INNER JOIN pg_namespace fnsp ON fnsp.oid = frel.relnamespace
WHERE
con.contype = 'f'
- ${schema !== undefined ? `AND nsp.nspname = '${schema}'` : ''};
+ AND nsp.nspname = '${schema}'
`.trim()
return sql
@@ -100,60 +99,55 @@ export type ForeignKeyConstraintsVariables = GetForeignKeyConstraintsVariables &
connectionString?: string
}
-export type ForeignKeyConstraintsData = ForeignKeyConstraint[]
-export type ForeignKeyConstraintsError = ExecuteSqlError
-
-function select(
- data:
- | {
- result: any
- }
- | undefined
+export async function getForeignKeyConstraints(
+ { projectRef, connectionString, schema }: ForeignKeyConstraintsVariables,
+ signal?: AbortSignal
) {
- return (data?.result ?? []).map((foreignKey: ForeignKeyConstraintRaw) => {
+ const sql = getForeignKeyConstraintsSql({ schema })
+
+ const { result } = await executeSql(
+ {
+ projectRef,
+ connectionString,
+ sql,
+ queryKey: ['foreign-key-constraints', schema],
+ },
+ signal
+ )
+
+ return (result ?? []).map((foreignKey: ForeignKeyConstraintRaw) => {
return {
...foreignKey,
source_columns: foreignKey.source_columns.replace('{', '').replace('}', '').split(','),
target_columns: foreignKey.target_columns.replace('{', '').replace('}', '').split(','),
}
- })
+ }) as ForeignKeyConstraint[]
}
-export const useForeignKeyConstraintsQuery = <
- TData extends ForeignKeyConstraintsData = ForeignKeyConstraintsData,
->(
+export type ForeignKeyConstraintsData = Awaited>
+export type ForeignKeyConstraintsError = ExecuteSqlError
+
+export const useForeignKeyConstraintsQuery = (
{ projectRef, connectionString, schema }: ForeignKeyConstraintsVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+ {
+ enabled = true,
+ ...options
+ }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.foreignKeyConstraints(projectRef, schema),
+ ({ signal }) => getForeignKeyConstraints({ projectRef, connectionString, schema }, signal),
{
- projectRef,
- connectionString,
- sql: getForeignKeyConstraintsQuery({ schema }),
- queryKey: ['foreign-key-constraints', schema],
- },
- {
- select,
+ enabled: enabled && typeof projectRef !== 'undefined' && typeof schema !== 'undefined',
...options,
}
)
-}
export function prefetchForeignKeyConstraints(
client: QueryClient,
{ projectRef, connectionString, schema }: ForeignKeyConstraintsVariables
) {
- return client
- .fetchQuery(sqlKeys.query(projectRef, ['foreign-key-constraints', schema]), ({ signal }) =>
- executeSql(
- {
- projectRef,
- connectionString,
- sql: getForeignKeyConstraintsQuery({ schema }),
- queryKey: ['foreign-key-constraints', schema],
- },
- signal
- )
- )
- .then((data) => select(data) as ForeignKeyConstraintsData)
+ return client.fetchQuery(databaseKeys.foreignKeyConstraints(projectRef, schema), ({ signal }) =>
+ getForeignKeyConstraints({ projectRef, connectionString, schema }, signal)
+ )
}
diff --git a/apps/studio/data/database/indexes-query.ts b/apps/studio/data/database/indexes-query.ts
index c6f066caa36..35a351890d6 100644
--- a/apps/studio/data/database/indexes-query.ts
+++ b/apps/studio/data/database/indexes-query.ts
@@ -1,17 +1,12 @@
-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'
-// [Joshen] Future refactor to move to pg-meta once available
-
-export type DatabaseIndex = {
- name: string
- schema: string
- table: string
- definition: string
- enabled: boolean
+type GetIndexesArgs = {
+ schema?: string
}
-export const getIndexesQuery = ({ schema }: { schema: string }) => {
+export const getIndexesSql = ({ schema }: GetIndexesArgs) => {
const sql = /* SQL */ `
SELECT schemaname as "schema",
tablename as "table",
@@ -24,29 +19,49 @@ WHERE schemaname = '${schema}';
return sql
}
-type getIndexesDefinition = {
+export type DatabaseIndex = {
+ name: string
schema: string
+ table: string
+ definition: string
+ enabled: boolean
}
-export type IndexesVariables = getIndexesDefinition & {
+export type IndexesVariables = GetIndexesArgs & {
projectRef?: string
connectionString?: string
}
-export type IndexesData = { result: DatabaseIndex[] }
+export async function getIndexes(
+ { schema, projectRef, connectionString }: IndexesVariables,
+ signal?: AbortSignal
+) {
+ if (!schema) {
+ throw new Error('schema is required')
+ }
+
+ const sql = getIndexesSql({ schema })
+
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['indexes', schema] },
+ signal
+ )
+
+ return result as DatabaseIndex[]
+}
+
+export type IndexesData = Awaited>
export type IndexesError = ExecuteSqlError
-export const useIndexesQuery = (
- { schema, projectRef, connectionString }: IndexesVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+export const useIndexesQuery = (
+ { projectRef, connectionString, schema }: IndexesVariables,
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.indexes(projectRef, schema),
+ ({ signal }) => getIndexes({ projectRef, connectionString, schema }, signal),
{
- projectRef,
- connectionString,
- sql: getIndexesQuery({ schema }),
- queryKey: ['indexes', schema],
- },
- options
+ enabled: enabled && typeof projectRef !== 'undefined' && typeof schema !== 'undefined',
+ ...options,
+ }
)
-}
diff --git a/apps/studio/data/database/keys.ts b/apps/studio/data/database/keys.ts
index ad10299daac..063254216a8 100644
--- a/apps/studio/data/database/keys.ts
+++ b/apps/studio/data/database/keys.ts
@@ -1,6 +1,16 @@
-import { SupportedAssistantEntities } from 'components/ui/AIAssistantPanel/AIAssistant.types'
-
export const databaseKeys = {
+ schemas: (projectRef: string | undefined) => ['projects', projectRef, 'schemas'] as const,
+ indexes: (projectRef: string | undefined, schema: string | undefined) =>
+ ['projects', projectRef, 'indexes', schema] as const,
+ keywords: (projectRef: string | undefined) => ['projects', projectRef, 'keywords'] as const,
+ migrations: (projectRef: string | undefined) => ['projects', projectRef, 'migrations'] as const,
+ tableColumns: (
+ projectRef: string | undefined,
+ schema: string | undefined,
+ table: string | undefined
+ ) => ['projects', projectRef, 'table-columns', schema, table] as const,
+ databaseFunctions: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'database-functions'] as const,
entityDefinition: (projectRef: string | undefined, id?: number) =>
['projects', projectRef, 'entity-definition', id] as const,
entityDefinitions: (projectRef: string | undefined, schemas: string[]) =>
@@ -9,13 +19,20 @@ export const databaseKeys = {
['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,
+ backups: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'database', 'backups'] as const,
poolingConfiguration: (projectRef: string | undefined) =>
- [projectRef, 'database', 'pooling-configuration'] as const,
+ ['projects', projectRef, 'database', 'pooling-configuration'] as const,
indexesFromQuery: (projectRef: string | undefined, query: string) =>
['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,
+ foreignKeyConstraints: (projectRef: string | undefined, schema?: string) =>
+ ['projects', projectRef, 'foreign-key-constraints', schema] as const,
+ databaseSize: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'database-size'] as const,
+ maxConnections: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'max-connections'] as const,
}
diff --git a/apps/studio/data/database/keywords-query.ts b/apps/studio/data/database/keywords-query.ts
index 7cfc9aa483f..b33860dfadc 100644
--- a/apps/studio/data/database/keywords-query.ts
+++ b/apps/studio/data/database/keywords-query.ts
@@ -1,9 +1,8 @@
-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'
-export type DatabaseKeyword = { word: string }
-
-export const getKeywordsQuery = () => {
+export const getKeywordsSql = () => {
const sql = /* SQL */ `
SELECT word FROM pg_get_keywords();
`.trim()
@@ -16,27 +15,32 @@ export type KeywordsVariables = {
connectionString?: string
}
-export type KeywordsData = { result: string[] }
+export async function getKeywords(
+ { projectRef, connectionString }: KeywordsVariables,
+ signal?: AbortSignal
+) {
+ const sql = getKeywordsSql()
+
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['keywords'] },
+ signal
+ )
+
+ return result.map((x: { word: string }) => x.word.toLocaleLowerCase()) as string[]
+}
+
+export type KeywordsData = Awaited>
export type KeywordsError = ExecuteSqlError
-export const useKeywordsQuery = (
+export const useKeywordsQuery = (
{ projectRef, connectionString }: KeywordsVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.keywords(projectRef),
+ ({ signal }) => getKeywords({ projectRef, connectionString }, signal),
{
- projectRef,
- connectionString,
- sql: getKeywordsQuery(),
- queryKey: ['keywords'],
- },
- {
- select: (data) => {
- return {
- result: data.result.map((x: DatabaseKeyword) => x.word.toLocaleLowerCase()),
- } as any
- },
+ enabled: enabled && typeof projectRef !== 'undefined',
...options,
}
)
-}
diff --git a/apps/studio/data/database/max-connections-query.ts b/apps/studio/data/database/max-connections-query.ts
index 87a51ea04ac..76ca7d34d26 100644
--- a/apps/studio/data/database/max-connections-query.ts
+++ b/apps/studio/data/database/max-connections-query.ts
@@ -1,7 +1,8 @@
-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'
-export const getMaxConnectionsQuery = () => {
+export const getMaxConnectionsSql = () => {
const sql = /* SQL */ `show max_connections`
return sql
@@ -14,26 +15,37 @@ export type MaxConnectionsVariables = {
schema?: string
}
-export type MaxConnectionsData = { maxConnections: number }
+export async function getMaxConnections(
+ { projectRef, connectionString }: MaxConnectionsVariables,
+ signal?: AbortSignal
+) {
+ const sql = getMaxConnectionsSql()
+
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['max-connections'] },
+ signal
+ )
+
+ const connections = parseInt(result[0].max_connections)
+
+ return { maxConnections: connections }
+}
+
+export type MaxConnectionsData = Awaited>
export type MaxConnectionsError = ExecuteSqlError
-export const useMaxConnectionsQuery = (
+export const useMaxConnectionsQuery = (
{ projectRef, connectionString }: MaxConnectionsVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+ {
+ enabled = true,
+ ...options
+ }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.maxConnections(projectRef),
+ ({ signal }) => getMaxConnections({ projectRef, connectionString }, signal),
{
- projectRef,
- connectionString,
- sql: getMaxConnectionsQuery(),
- queryKey: ['max-connections'],
- },
- {
- select: (data: { result: { max_connections: string }[] }) => {
- const connections = parseInt(data.result[0].max_connections)
- return { maxConnections: connections } as any
- },
+ enabled: enabled && typeof projectRef !== 'undefined',
...options,
}
)
-}
diff --git a/apps/studio/data/database/migrations-query.ts b/apps/studio/data/database/migrations-query.ts
index aff79487eca..7d096189973 100644
--- a/apps/studio/data/database/migrations-query.ts
+++ b/apps/studio/data/database/migrations-query.ts
@@ -1,5 +1,6 @@
-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'
export type DatabaseMigration = {
version: string
@@ -7,7 +8,7 @@ export type DatabaseMigration = {
statements?: string[]
}
-export const getMigrationsQuery = () => {
+export const getMigrationsSql = () => {
const sql = /* SQL */ `
select
*
@@ -23,29 +24,44 @@ export type MigrationsVariables = {
connectionString?: string
}
-export type MigrationsData = { result: DatabaseMigration[] }
+export async function getMigrations(
+ { projectRef, connectionString }: MigrationsVariables,
+ signal?: AbortSignal
+) {
+ const sql = getMigrationsSql()
+
+ try {
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['migrations'] },
+ signal
+ )
+
+ return result as DatabaseMigration[]
+ } catch (error) {
+ if (
+ (error as ExecuteSqlError).message.includes(
+ 'relation "supabase_migrations.schema_migrations" does not exist'
+ )
+ ) {
+ return []
+ }
+
+ throw error
+ }
+}
+
+export type MigrationsData = Awaited>
export type MigrationsError = ExecuteSqlError
-export const useMigrationsQuery = (
+export const useMigrationsQuery = (
{ projectRef, connectionString }: MigrationsVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.migrations(projectRef),
+ ({ signal }) => getMigrations({ projectRef, connectionString }, signal),
{
- projectRef,
- connectionString,
- sql: getMigrationsQuery(),
- queryKey: ['migrations'],
- handleError: (error) => {
- if (
- error.message.includes('relation "supabase_migrations.schema_migrations" does not exist')
- ) {
- return { result: [] }
- } else {
- throw error
- }
- },
- },
- options
+ enabled: enabled && typeof projectRef !== 'undefined',
+ ...options,
+ }
)
-}
diff --git a/apps/studio/data/database/schemas-query.ts b/apps/studio/data/database/schemas-query.ts
index 22e27c76092..30f9d67ddc7 100644
--- a/apps/studio/data/database/schemas-query.ts
+++ b/apps/studio/data/database/schemas-query.ts
@@ -1,14 +1,9 @@
import pgMeta from '@supabase/pg-meta'
-import { QueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { QueryClient, useQuery, UseQueryOptions } from '@tanstack/react-query'
import { z } from 'zod'
-import {
- executeSql,
- ExecuteSqlData,
- ExecuteSqlError,
- useExecuteSqlQuery,
-} from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
+import { executeSql, ExecuteSqlError } from 'data/sql/execute-sql-query'
+import { databaseKeys } from './keys'
export type SchemasVariables = {
projectRef?: string
@@ -22,42 +17,45 @@ const pgMetaSchemasList = pgMeta.schemas.list()
export type SchemasData = z.infer
export type SchemasError = ExecuteSqlError
-export const useSchemasQuery = (
+export async function getSchemas(
{ projectRef, connectionString }: SchemasVariables,
- options: UseQueryOptions = {}
-) =>
- useExecuteSqlQuery(
+ signal?: AbortSignal
+) {
+ const { result } = await executeSql(
{
projectRef,
connectionString,
sql: pgMetaSchemasList.sql,
- queryKey: ['schemas', 'list'],
+ queryKey: ['schemas'],
},
+ signal
+ )
+
+ return result
+}
+
+export const useSchemasQuery = (
+ { projectRef, connectionString }: SchemasVariables,
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.schemas(projectRef),
+ ({ signal }) => getSchemas({ projectRef, connectionString }, signal),
{
- select(data) {
- return data.result
- },
+ enabled: enabled && typeof projectRef !== 'undefined',
...options,
}
)
export function invalidateSchemasQuery(client: QueryClient, projectRef: string | undefined) {
- return client.invalidateQueries(sqlKeys.query(projectRef, ['schemas', 'list']))
+ return client.invalidateQueries(databaseKeys.schemas(projectRef))
}
export function prefetchSchemas(
client: QueryClient,
{ projectRef, connectionString }: SchemasVariables
) {
- return client.fetchQuery(sqlKeys.query(projectRef, ['schemas', 'list']), ({ signal }) =>
- executeSql(
- {
- projectRef,
- connectionString,
- sql: pgMetaSchemasList.sql,
- queryKey: ['schemas', 'list'],
- },
- signal
- )
+ return client.fetchQuery(databaseKeys.schemas(projectRef), ({ signal }) =>
+ getSchemas({ projectRef, connectionString }, signal)
)
}
diff --git a/apps/studio/data/database/table-columns-query.ts b/apps/studio/data/database/table-columns-query.ts
index b680423d76c..c202177c28c 100644
--- a/apps/studio/data/database/table-columns-query.ts
+++ b/apps/studio/data/database/table-columns-query.ts
@@ -1,5 +1,6 @@
-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'
export type TableColumn = {
schemaname: string
@@ -9,7 +10,7 @@ export type TableColumn = {
columns: any[]
}
-export const getTableColumnsQuery = (table?: string, schema?: string) => {
+export const getTableColumnsSql = ({ table, schema }: { table?: string; schema?: string }) => {
const conditions = []
if (table) {
conditions.push(`tablename = '${table}'`)
@@ -91,20 +92,32 @@ export type TableColumnsVariables = {
schema?: string
}
-export type TableColumnsData = { result: TableColumn[] }
+export async function getTableColumns(
+ { projectRef, connectionString, table, schema }: TableColumnsVariables,
+ signal?: AbortSignal
+) {
+ const sql = getTableColumnsSql({ table, schema })
+
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['table-columns', schema, table] },
+ signal
+ )
+
+ return result as TableColumn[]
+}
+
+export type TableColumnsData = Awaited>
export type TableColumnsError = ExecuteSqlError
-export const useTableColumnsQuery = (
- { projectRef, connectionString, table, schema }: TableColumnsVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+export const useTableColumnsQuery = (
+ { projectRef, connectionString, schema, table }: TableColumnsVariables,
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ databaseKeys.tableColumns(projectRef, schema, table),
+ ({ signal }) => getTableColumns({ projectRef, connectionString, schema, table }, signal),
{
- projectRef,
- connectionString,
- sql: getTableColumnsQuery(table, schema),
- queryKey: ['table-columns', schema, table],
- },
- options
+ enabled: enabled && typeof projectRef !== 'undefined',
+ ...options,
+ }
)
-}
diff --git a/apps/studio/data/entity-types/entity-types-infinite-query.ts b/apps/studio/data/entity-types/entity-types-infinite-query.ts
index 49d1090844e..ab8e7cf0bcc 100644
--- a/apps/studio/data/entity-types/entity-types-infinite-query.ts
+++ b/apps/studio/data/entity-types/entity-types-infinite-query.ts
@@ -105,7 +105,7 @@ export async function getEntityTypes(
projectRef,
connectionString,
sql,
- queryKey: ['public', 'entity-types'],
+ queryKey: ['entity-types', ...schemas, page],
},
signal
)
@@ -149,7 +149,6 @@ export const useEntityTypesQuery = (
),
{
enabled: enabled && typeof projectRef !== 'undefined',
- staleTime: 0,
getNextPageParam(lastPage, pages) {
const page = pages.length
const currentTotalCount = page * limit
diff --git a/apps/studio/data/enumerated-types/enumerated-types-query.ts b/apps/studio/data/enumerated-types/enumerated-types-query.ts
index f6627b47faa..05948c6f31b 100644
--- a/apps/studio/data/enumerated-types/enumerated-types-query.ts
+++ b/apps/studio/data/enumerated-types/enumerated-types-query.ts
@@ -22,7 +22,7 @@ export async function getEnumeratedTypes(
if (connectionString) headers.set('x-connection-encrypted', connectionString)
const { data, error } = await get('/platform/pg-meta/{ref}/types', {
- // @ts-ignore: We don't need to pass included included_schemas / excluded_schemas in query params
+ // @ts-expect-error: We don't need to pass included included_schemas / excluded_schemas in query params
params: {
header: { 'x-connection-encrypted': connectionString! },
path: { ref: projectRef },
@@ -50,7 +50,6 @@ export const useEnumeratedTypesQuery = (
({ signal }) => getEnumeratedTypes({ projectRef, connectionString }, signal),
{
enabled: enabled && typeof projectRef !== 'undefined',
- staleTime: 0,
...options,
}
)
diff --git a/apps/studio/data/fdw/fdw-create-mutation.ts b/apps/studio/data/fdw/fdw-create-mutation.ts
index 9a54d75489b..917b89c1285 100644
--- a/apps/studio/data/fdw/fdw-create-mutation.ts
+++ b/apps/studio/data/fdw/fdw-create-mutation.ts
@@ -4,14 +4,15 @@ import { toast } from 'sonner'
import {
AvailableColumn,
WrapperMeta,
-} from 'components/interfaces/Database/Wrappers/Wrappers.types'
+} from 'components/interfaces/Integrations/Wrappers/Wrappers.types'
import { entityTypeKeys } from 'data/entity-types/keys'
+import { foreignTableKeys } from 'data/foreign-tables/keys'
import { pgSodiumKeys } from 'data/pg-sodium-keys/keys'
import { executeSql } from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
import { wrapWithTransaction } from 'data/sql/utils/transaction'
import { vaultSecretsKeys } from 'data/vault/keys'
import type { ResponseError } from 'types'
+import { fdwKeys } from './keys'
export type FDWCreateVariables = {
projectRef?: string
@@ -162,10 +163,11 @@ export const useFDWCreateMutation = ({
const { projectRef } = variables
await Promise.all([
+ queryClient.invalidateQueries(fdwKeys.list(projectRef), { refetchType: 'all' }),
queryClient.invalidateQueries(entityTypeKeys.list(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, ['fdws']), { refetchType: 'all' }),
+ queryClient.invalidateQueries(foreignTableKeys.list(projectRef)),
queryClient.invalidateQueries(pgSodiumKeys.list(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, vaultSecretsKeys.list(projectRef))),
+ queryClient.invalidateQueries(vaultSecretsKeys.list(projectRef)),
])
await onSuccess?.(data, variables, context)
diff --git a/apps/studio/data/fdw/fdw-delete-mutation.ts b/apps/studio/data/fdw/fdw-delete-mutation.ts
index bcb9e6d00c9..868422362c7 100644
--- a/apps/studio/data/fdw/fdw-delete-mutation.ts
+++ b/apps/studio/data/fdw/fdw-delete-mutation.ts
@@ -1,15 +1,16 @@
import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
-import type { WrapperMeta } from 'components/interfaces/Database/Wrappers/Wrappers.types'
+import type { WrapperMeta } from 'components/interfaces/Integrations/Wrappers/Wrappers.types'
import { entityTypeKeys } from 'data/entity-types/keys'
+import { foreignTableKeys } from 'data/foreign-tables/keys'
import { pgSodiumKeys } from 'data/pg-sodium-keys/keys'
import { executeSql } from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
import { wrapWithTransaction } from 'data/sql/utils/transaction'
import { vaultSecretsKeys } from 'data/vault/keys'
import type { ResponseError } from 'types'
import { FDW } from './fdws-query'
+import { fdwKeys } from './keys'
export type FDWDeleteVariables = {
projectRef: string
@@ -73,10 +74,11 @@ export const useFDWDeleteMutation = ({
const { projectRef } = variables
await Promise.all([
+ queryClient.invalidateQueries(fdwKeys.list(projectRef), { refetchType: 'all' }),
queryClient.invalidateQueries(entityTypeKeys.list(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, ['fdws'])),
+ queryClient.invalidateQueries(foreignTableKeys.list(projectRef)),
queryClient.invalidateQueries(pgSodiumKeys.list(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, vaultSecretsKeys.list(projectRef))),
+ queryClient.invalidateQueries(vaultSecretsKeys.list(projectRef)),
])
await onSuccess?.(data, variables, context)
diff --git a/apps/studio/data/fdw/fdw-update-mutation.ts b/apps/studio/data/fdw/fdw-update-mutation.ts
index 9092367076a..c49c729559f 100644
--- a/apps/studio/data/fdw/fdw-update-mutation.ts
+++ b/apps/studio/data/fdw/fdw-update-mutation.ts
@@ -1,17 +1,18 @@
import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
-import type { WrapperMeta } from 'components/interfaces/Database/Wrappers/Wrappers.types'
+import type { WrapperMeta } from 'components/interfaces/Integrations/Wrappers/Wrappers.types'
import { entityTypeKeys } from 'data/entity-types/keys'
+import { foreignTableKeys } from 'data/foreign-tables/keys'
import { pgSodiumKeys } from 'data/pg-sodium-keys/keys'
import { executeSql } from 'data/sql/execute-sql-query'
-import { sqlKeys } from 'data/sql/keys'
import { wrapWithTransaction } from 'data/sql/utils/transaction'
import { vaultSecretsKeys } from 'data/vault/keys'
import type { ResponseError } from 'types'
import { getCreateFDWSql } from './fdw-create-mutation'
import { getDeleteFDWSql } from './fdw-delete-mutation'
import { FDW } from './fdws-query'
+import { fdwKeys } from './keys'
export type FDWUpdateVariables = {
projectRef?: string
@@ -72,10 +73,11 @@ export const useFDWUpdateMutation = ({
const { projectRef } = variables
await Promise.all([
+ queryClient.invalidateQueries(fdwKeys.list(projectRef), { refetchType: 'all' }),
queryClient.invalidateQueries(entityTypeKeys.list(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, ['fdws'])),
+ queryClient.invalidateQueries(foreignTableKeys.list(projectRef)),
queryClient.invalidateQueries(pgSodiumKeys.list(projectRef)),
- queryClient.invalidateQueries(sqlKeys.query(projectRef, vaultSecretsKeys.list(projectRef))),
+ queryClient.invalidateQueries(vaultSecretsKeys.list(projectRef)),
])
await onSuccess?.(data, variables, context)
diff --git a/apps/studio/data/fdw/fdws-query.ts b/apps/studio/data/fdw/fdws-query.ts
index 2d40500870b..be8be92fa93 100644
--- a/apps/studio/data/fdw/fdws-query.ts
+++ b/apps/studio/data/fdw/fdws-query.ts
@@ -1,5 +1,6 @@
-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 { fdwKeys } from './keys'
export const getFDWsSql = () => {
const sql = /* SQL */ `
@@ -62,28 +63,37 @@ export type FDW = {
tables: FDWTable[]
}
-export type FDWsResponse = {
- result: FDW[]
-}
-
export type FDWsVariables = {
projectRef?: string
connectionString?: string
}
-export type FDWsData = FDWsResponse
+export async function getFDWs(
+ { projectRef, connectionString }: FDWsVariables,
+ signal?: AbortSignal
+) {
+ const sql = getFDWsSql()
+
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['fdws'] },
+ signal
+ )
+
+ return result as FDW[]
+}
+
+export type FDWsData = Awaited>
export type FDWsError = ExecuteSqlError
-export const useFDWsQuery = (
+export const useFDWsQuery = (
{ projectRef, connectionString }: FDWsVariables,
- options: UseQueryOptions = {}
+ { enabled = true, ...options }: UseQueryOptions = {}
) =>
- useExecuteSqlQuery(
+ useQuery(
+ fdwKeys.list(projectRef),
+ ({ signal }) => getFDWs({ projectRef, connectionString }, signal),
{
- projectRef,
- connectionString,
- sql: getFDWsSql(),
- queryKey: ['fdws'],
- },
- options
+ enabled: enabled && typeof projectRef !== 'undefined',
+ ...options,
+ }
)
diff --git a/apps/studio/data/fdw/keys.ts b/apps/studio/data/fdw/keys.ts
new file mode 100644
index 00000000000..5f2785a20e0
--- /dev/null
+++ b/apps/studio/data/fdw/keys.ts
@@ -0,0 +1,3 @@
+export const fdwKeys = {
+ list: (projectRef: string | undefined) => ['projects', projectRef, 'fdws'] as const,
+}
diff --git a/apps/studio/data/foreign-tables/foreign-tables-query.ts b/apps/studio/data/foreign-tables/foreign-tables-query.ts
index 32bad871e7f..d53ed54b24c 100644
--- a/apps/studio/data/foreign-tables/foreign-tables-query.ts
+++ b/apps/studio/data/foreign-tables/foreign-tables-query.ts
@@ -49,7 +49,6 @@ export const useForeignTablesQuery = (
({ signal }) => getForeignTables({ projectRef, connectionString, schema }, signal),
{
enabled: enabled && typeof projectRef !== 'undefined',
- staleTime: 0,
...options,
}
)
diff --git a/apps/studio/data/invoices/invoice-payment-link-mutation.ts b/apps/studio/data/invoices/invoice-payment-link-mutation.ts
new file mode 100644
index 00000000000..35fcdbdd939
--- /dev/null
+++ b/apps/studio/data/invoices/invoice-payment-link-mutation.ts
@@ -0,0 +1,65 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { get, handleError } from 'data/fetchers'
+import type { ResponseError } from 'types'
+import { invoicesKeys } from './keys'
+
+export type InvoicePaymentLinkGetVariables = {
+ slug?: string
+ invoiceId?: string
+}
+
+export async function updateInvoicePaymentLink({
+ slug,
+ invoiceId,
+}: InvoicePaymentLinkGetVariables) {
+ if (!slug) throw new Error('Org slug is required')
+ if (!invoiceId) throw new Error('Invoice ID is required')
+
+ const { data, error } = await get(
+ '/platform/organizations/{slug}/billing/invoices/{invoiceId}/payment-link',
+ {
+ params: {
+ path: {
+ slug,
+ invoiceId,
+ },
+ },
+ }
+ )
+
+ if (error) handleError(error)
+ return data
+}
+
+type InvoicePaymentLinkGetData = Awaited>
+
+export const useInvoicePaymentLinkGetMutation = ({
+ onError,
+ ...options
+}: Omit<
+ UseMutationOptions,
+ 'mutationFn'
+> = {}) => {
+ const queryClient = useQueryClient()
+
+ return useMutation(
+ (vars) => updateInvoicePaymentLink(vars),
+ {
+ async onError(error, variables, context) {
+ // In case of an error, there is a good chance that the invoice status has changed, so we invalidate the cache to reflect the updated status
+ await Promise.all([
+ queryClient.invalidateQueries(invoicesKeys.listAndCount(variables.slug)),
+ ])
+
+ if (onError === undefined) {
+ toast.error(error.message)
+ } else {
+ onError(error, variables, context)
+ }
+ },
+ ...options,
+ }
+ )
+}
diff --git a/apps/studio/data/invoices/keys.ts b/apps/studio/data/invoices/keys.ts
index e83637097ec..651dd5618f0 100644
--- a/apps/studio/data/invoices/keys.ts
+++ b/apps/studio/data/invoices/keys.ts
@@ -5,6 +5,7 @@ export const invoicesKeys = {
list: (slug: string | undefined, offset: number | undefined) =>
['invoices', slug, offset] as const,
count: (slug: string | undefined) => ['invoices', slug, 'count'] as const,
+ listAndCount: (slug: string | undefined) => ['invoices', slug] as const,
projectInvoices: (projectRef: string | undefined, offset: number | undefined) =>
['invoices', projectRef, offset] as const,
diff --git a/apps/studio/data/materialized-views/materialized-views-query.ts b/apps/studio/data/materialized-views/materialized-views-query.ts
index fc100cdb420..1f6888fd6b3 100644
--- a/apps/studio/data/materialized-views/materialized-views-query.ts
+++ b/apps/studio/data/materialized-views/materialized-views-query.ts
@@ -54,6 +54,8 @@ export const useMaterializedViewsQuery = (
({ signal }) => getMaterializedViews({ projectRef, connectionString, schema }, signal),
{
enabled: enabled && typeof projectRef !== 'undefined',
+ // We're using a staleTime of 0 here because the only way to create a
+ // materialized view is via SQL, which we don't know about
staleTime: 0,
...options,
}
diff --git a/apps/studio/data/prefetchers/PrefetchableLink.tsx b/apps/studio/data/prefetchers/PrefetchableLink.tsx
new file mode 100644
index 00000000000..4318dc1072c
--- /dev/null
+++ b/apps/studio/data/prefetchers/PrefetchableLink.tsx
@@ -0,0 +1,47 @@
+import Link from 'next/link'
+import { ComponentProps, forwardRef, useRef } from 'react'
+
+type LinkProps = ComponentProps
+
+export interface PrefetchableLinkProps extends Omit {
+ prefetcher: () => void
+}
+
+const DELAY = 75
+
+const PrefetchableLink = forwardRef(
+ function PrefetchableLink({ prefetcher, children, ...props }, ref) {
+ const mouseOverStartRef = useRef(null)
+ const prefetchTimeoutRef = useRef(null)
+
+ function onPrefetch() {
+ const now = Date.now()
+
+ // setTimeout is not guaranteed to be precise, so we need to check the time again
+ if (mouseOverStartRef.current && now - mouseOverStartRef.current >= DELAY) {
+ prefetcher()
+ }
+ }
+
+ function onMouseEnter() {
+ mouseOverStartRef.current = Date.now()
+ prefetchTimeoutRef.current = window.setTimeout(onPrefetch, DELAY)
+ }
+
+ function onMouseLeave() {
+ mouseOverStartRef.current = null
+ if (prefetchTimeoutRef.current) {
+ clearTimeout(prefetchTimeoutRef.current)
+ prefetchTimeoutRef.current = null
+ }
+ }
+
+ return (
+
-
-interface EditorTablePageLinkProps extends Omit {
+interface EditorTablePageLinkProps extends Omit {
projectRef?: string
id?: string
sorts?: Sort[]
filters?: Filter[]
- href?: LinkProps['href']
+ href?: PrefetchableLinkProps['href']
}
export function EditorTablePageLink({
@@ -118,12 +116,12 @@ export function EditorTablePageLink({
const prefetch = usePrefetchEditorTablePage()
return (
-
-
-interface EditorIndexPageLinkProps extends Omit {
+interface EditorIndexPageLinkProps extends Omit {
projectRef?: string
- href?: LinkProps['href']
+ href?: PrefetchableLinkProps['href']
}
export function EditorIndexPageLink({
@@ -61,8 +59,12 @@ export function EditorIndexPageLink({
const prefetch = usePrefetchEditorIndexPage()
return (
-
{children}
-
+
)
}
diff --git a/apps/studio/data/prefetchers/project.$ref.tsx b/apps/studio/data/prefetchers/project.$ref.tsx
index 9b826cc45fd..052e06e7eec 100644
--- a/apps/studio/data/prefetchers/project.$ref.tsx
+++ b/apps/studio/data/prefetchers/project.$ref.tsx
@@ -1,11 +1,11 @@
import { useQueryClient } from '@tanstack/react-query'
-import Link from 'next/link'
import { useRouter } from 'next/router'
-import { ComponentProps, PropsWithChildren, useCallback } from 'react'
+import { PropsWithChildren, useCallback } from 'react'
import { prefetchProjectLogRequestsCount } from 'data/analytics/project-log-requests-count-query'
import { prefetchProjectLogStats } from 'data/analytics/project-log-stats-query'
import { prefetchProjectDetail } from 'data/projects/project-detail-query'
+import PrefetchableLink, { PrefetchableLinkProps } from './PrefetchableLink'
export function usePrefetchProjectIndexPage() {
const router = useRouter()
@@ -40,11 +40,9 @@ export function usePrefetchProjectIndexPage() {
)
}
-type LinkProps = ComponentProps
-
-interface ProjectIndexPageLinkProps extends Omit {
+interface ProjectIndexPageLinkProps extends Omit {
projectRef?: string
- href?: LinkProps['href']
+ href?: PrefetchableLinkProps['href']
}
export function ProjectIndexPageLink({
@@ -56,12 +54,12 @@ export function ProjectIndexPageLink({
const prefetch = usePrefetchProjectIndexPage()
return (
- >
+
+export const useProjectCloneMutation = ({
+ onSuccess,
+ onError,
+ ...options
+}: Omit<
+ UseMutationOptions,
+ 'mutationFn'
+> = {}) => {
+ const queryClient = useQueryClient()
+
+ return useMutation(
+ (vars) => triggerClone(vars),
+ {
+ async onSuccess(data, variables, context) {
+ await queryClient.invalidateQueries({
+ queryKey: projectKeys.listCloneBackups(variables.projectRef),
+ })
+ await onSuccess?.(data, variables, context)
+ },
+ async onError(data, variables, context) {
+ if (onError === undefined) {
+ console.error(data)
+ toast.error(`Failed to trigger clone: ${data.message}`)
+ } else {
+ onError(data, variables, context)
+ }
+ },
+ ...options,
+ }
+ )
+}
diff --git a/apps/studio/data/projects/clone-query.ts b/apps/studio/data/projects/clone-query.ts
new file mode 100644
index 00000000000..d7f0114e1b6
--- /dev/null
+++ b/apps/studio/data/projects/clone-query.ts
@@ -0,0 +1,29 @@
+import { get, handleError } from 'data/fetchers'
+import { projectKeys } from './keys'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { ResponseError } from 'types'
+
+export async function getCloneBackups(projectRef?: string) {
+ if (!projectRef) throw new Error('Project ref is required')
+
+ const { data, error } = await get(`/platform/database/{ref}/clone`, {
+ params: { path: { ref: projectRef } },
+ })
+
+ if (error) handleError(error)
+ return data
+}
+
+export type CloneBackupsData = Awaited>
+export type CloneBackupsError = ResponseError
+
+export const useCloneBackupsQuery = (
+ { projectRef }: { projectRef?: string },
+ options: UseQueryOptions = {}
+) => {
+ return useQuery(
+ projectKeys.listCloneBackups(projectRef),
+ () => getCloneBackups(projectRef),
+ { enabled: !!projectRef, ...options }
+ )
+}
diff --git a/apps/studio/data/projects/clone-status-query.ts b/apps/studio/data/projects/clone-status-query.ts
new file mode 100644
index 00000000000..9f9b6a5253b
--- /dev/null
+++ b/apps/studio/data/projects/clone-status-query.ts
@@ -0,0 +1,29 @@
+import { get, handleError } from 'data/fetchers'
+import { projectKeys } from './keys'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { ResponseError } from 'types'
+
+export async function getCloneStatus(projectRef?: string) {
+ if (!projectRef) throw new Error('Project ref is required')
+
+ const { data, error } = await get(`/platform/database/{ref}/clone/status`, {
+ params: { path: { ref: projectRef } },
+ })
+
+ if (error) handleError(error)
+ return data
+}
+
+export type CloneStatusData = Awaited>
+export type CloneStatusError = ResponseError
+
+export const useCloneStatusQuery = (
+ { projectRef }: { projectRef?: string },
+ options: UseQueryOptions = {}
+) => {
+ return useQuery(
+ projectKeys.listCloneStatus(projectRef),
+ () => getCloneStatus(projectRef),
+ { enabled: !!projectRef, ...options }
+ )
+}
diff --git a/apps/studio/data/projects/keys.ts b/apps/studio/data/projects/keys.ts
index 87d8627132d..726558d8c5c 100644
--- a/apps/studio/data/projects/keys.ts
+++ b/apps/studio/data/projects/keys.ts
@@ -18,4 +18,10 @@ export const projectKeys = {
['projects', projectRef, 'pause-status'] as const,
orgProjects: (slug: string | undefined) => ['projects', 'org', slug] as const,
+
+ // Clone to new project
+ listCloneBackups: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'clone-backups'] as const,
+ listCloneStatus: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'clone-status'] as const,
}
diff --git a/apps/studio/data/projects/new-project.constants.ts b/apps/studio/data/projects/new-project.constants.ts
new file mode 100644
index 00000000000..82a51c5f84b
--- /dev/null
+++ b/apps/studio/data/projects/new-project.constants.ts
@@ -0,0 +1,97 @@
+import { components } from 'api-types'
+import { PROVIDERS } from 'lib/constants'
+
+type DesiredInstanceSize = components['schemas']['DesiredInstanceSize']
+
+export const instanceSizeSpecs: Record<
+ DesiredInstanceSize,
+ {
+ label: string
+ ram: string
+ cpu: string
+ priceHourly: number
+ priceMonthly: number
+ cloud_providers: string[]
+ }
+> = {
+ micro: {
+ label: 'Micro',
+ ram: '1 GB',
+ cpu: '2-core',
+ priceHourly: 0.01344,
+ priceMonthly: 10,
+ cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
+ },
+ small: {
+ label: 'Small',
+ ram: '2 GB',
+ cpu: '2-core',
+ priceHourly: 0.0206,
+ priceMonthly: 15,
+ cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
+ },
+ medium: {
+ label: 'Medium',
+ ram: '4 GB',
+ cpu: '2-core',
+ priceHourly: 0.0822,
+ priceMonthly: 60,
+ cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
+ },
+ large: {
+ label: 'Large',
+ ram: '8 GB',
+ cpu: '2-core',
+ priceHourly: 0.1517,
+ priceMonthly: 110,
+ cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
+ },
+ xlarge: {
+ label: 'XL',
+ ram: '16 GB',
+ cpu: '4-core',
+ priceHourly: 0.2877,
+ priceMonthly: 210,
+ cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
+ },
+ '2xlarge': {
+ label: '2XL',
+ ram: '32 GB',
+ cpu: '8-core',
+ priceHourly: 0.562,
+ priceMonthly: 410,
+ cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
+ },
+ '4xlarge': {
+ label: '4XL',
+ ram: '64 GB',
+ cpu: '16-core',
+ priceHourly: 1.32,
+ priceMonthly: 960,
+ cloud_providers: [PROVIDERS.AWS.id, PROVIDERS.FLY.id],
+ },
+ '8xlarge': {
+ label: '8XL',
+ ram: '128 GB',
+ cpu: '32-core',
+ priceHourly: 2.562,
+ priceMonthly: 1870,
+ cloud_providers: [PROVIDERS.AWS.id],
+ },
+ '12xlarge': {
+ label: '12XL',
+ ram: '192 GB',
+ cpu: '48-core',
+ priceHourly: 3.836,
+ priceMonthly: 2800,
+ cloud_providers: [PROVIDERS.AWS.id],
+ },
+ '16xlarge': {
+ label: '16XL',
+ ram: '256 GB',
+ cpu: '64-core',
+ priceHourly: 5.12,
+ priceMonthly: 3730,
+ cloud_providers: [PROVIDERS.AWS.id],
+ },
+}
diff --git a/apps/studio/data/read-replicas/keys.ts b/apps/studio/data/read-replicas/keys.ts
index 26b8cbd816d..b808065be02 100644
--- a/apps/studio/data/read-replicas/keys.ts
+++ b/apps/studio/data/read-replicas/keys.ts
@@ -4,4 +4,6 @@ export const replicaKeys = {
['project', projectRef, 'replicas-statuses'] as const,
loadBalancers: (projectRef: string | undefined) =>
['project', projectRef, 'load-balancers'] as const,
+ replicaLag: (projectRef: string | undefined, id: string) =>
+ ['project', projectRef, 'replica-lag', id] as const,
}
diff --git a/apps/studio/data/read-replicas/replica-lag-query.ts b/apps/studio/data/read-replicas/replica-lag-query.ts
index 9d0cf3fbf1d..08a978f9e27 100644
--- a/apps/studio/data/read-replicas/replica-lag-query.ts
+++ b/apps/studio/data/read-replicas/replica-lag-query.ts
@@ -1,7 +1,8 @@
-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 { replicaKeys } from './keys'
-export const replicationLagQuery = () => {
+export const replicationLagSql = () => {
const sql = /* SQL */ `
select
case
@@ -20,24 +21,34 @@ export type ReplicationLagVariables = {
connectionString?: string
}
-export type ReplicationLagData = number
+export async function getReplicationLag(
+ { projectRef, connectionString, id }: ReplicationLagVariables,
+ signal?: AbortSignal
+) {
+ const sql = replicationLagSql()
+
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['replica-lag', id] },
+ signal
+ )
+
+ return Number((result[0] ?? null)?.physical_replica_lag_second ?? 0)
+}
+
+export type ReplicationLagData = Awaited>
export type ReplicationLagError = ExecuteSqlError
-export const useReplicationLagQuery = (
+export const useReplicationLagQuery = (
{ projectRef, connectionString, id }: ReplicationLagVariables,
- { enabled = true, ...options }: UseQueryOptions = {}
+ {
+ enabled = true,
+ ...options
+ }: UseQueryOptions = {}
) =>
- useExecuteSqlQuery(
+ useQuery(
+ replicaKeys.replicaLag(projectRef, id),
+ ({ signal }) => getReplicationLag({ projectRef, connectionString, id }, signal),
{
- projectRef,
- connectionString,
- sql: replicationLagQuery(),
- queryKey: ['replica-lag', id],
- },
- {
- select(data) {
- return Number((data.result[0] ?? null)?.physical_replica_lag_second ?? 0) as TData
- },
enabled: enabled && typeof projectRef !== 'undefined' && typeof id !== 'undefined',
...options,
}
diff --git a/apps/studio/data/sql/abort-query-mutation.ts b/apps/studio/data/sql/abort-query-mutation.ts
index 944d2750231..d44472b6451 100644
--- a/apps/studio/data/sql/abort-query-mutation.ts
+++ b/apps/studio/data/sql/abort-query-mutation.ts
@@ -33,7 +33,7 @@ export const useQueryAbortMutation = ({
{
async onSuccess(data, variables, context) {
const { projectRef } = variables
- await queryClient.invalidateQueries(sqlKeys.query(projectRef, ['ongoing-queries']))
+ await queryClient.invalidateQueries(sqlKeys.ongoingQueries(projectRef))
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/sql/execute-sql-query.ts b/apps/studio/data/sql/execute-sql-query.ts
index 3bbc0881cc3..a278f72bd73 100644
--- a/apps/studio/data/sql/execute-sql-query.ts
+++ b/apps/studio/data/sql/execute-sql-query.ts
@@ -37,7 +37,8 @@ export async function executeSql(
| 'handleError'
| 'isRoleImpersonationEnabled'
>,
- signal?: AbortSignal
+ signal?: AbortSignal,
+ headersInit?: HeadersInit
): Promise<{ result: any }> {
if (!projectRef) throw new Error('projectRef is required')
@@ -47,7 +48,7 @@ export async function executeSql(
throw new Error('Query is too large to be run via the SQL Editor')
}
- let headers = new Headers()
+ let headers = new Headers(headersInit)
if (connectionString) headers.set('x-connection-encrypted', connectionString)
let { data, error } = await post('/platform/pg-meta/{ref}/query', {
@@ -55,7 +56,7 @@ export async function executeSql(
params: {
header: { 'x-connection-encrypted': connectionString ?? '' },
path: { ref: projectRef },
- // @ts-ignore: This is just a client side thing to identify queries better
+ // @ts-expect-error: This is just a client side thing to identify queries better
query: {
key:
queryKey?.filter((seg) => typeof seg === 'string' || typeof seg === 'number').join('-') ??
@@ -64,7 +65,7 @@ export async function executeSql(
},
body: { query: sql },
headers: Object.fromEntries(headers),
- } as any) // Needed to fix generated api types for now
+ })
if (error) {
if (
@@ -114,6 +115,9 @@ export async function executeSql(
export type ExecuteSqlData = Awaited>
export type ExecuteSqlError = ResponseError
+/**
+ * @deprecated Use the regular useQuery with a function that calls executeSql() instead
+ */
export const useExecuteSqlQuery = (
{
projectRef,
diff --git a/apps/studio/data/sql/keys.ts b/apps/studio/data/sql/keys.ts
index 06fc4f4c803..b622822f1cb 100644
--- a/apps/studio/data/sql/keys.ts
+++ b/apps/studio/data/sql/keys.ts
@@ -3,4 +3,6 @@ import type { QueryKey } from '@tanstack/react-query'
export const sqlKeys = {
query: (projectRef: string | undefined, queryKey: QueryKey) =>
['projects', projectRef, 'query', ...queryKey] as const,
+ ongoingQueries: (projectRef: string | undefined) =>
+ ['projects', projectRef, 'ongoing-queries'] as const,
}
diff --git a/apps/studio/data/sql/ongoing-queries-query.ts b/apps/studio/data/sql/ongoing-queries-query.ts
index bbc1b989dab..7022ea3ddde 100644
--- a/apps/studio/data/sql/ongoing-queries-query.ts
+++ b/apps/studio/data/sql/ongoing-queries-query.ts
@@ -1,5 +1,6 @@
-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 { sqlKeys } from './keys'
type OngoingQuery = {
pid: number
@@ -7,7 +8,7 @@ type OngoingQuery = {
query_start: string
}
-export const getOngoingQueries = () => {
+export const getOngoingQueriesSql = () => {
const sql = /* SQL */ `
select pid, query, query_start from pg_stat_activity where state = 'active' and datname = 'postgres';
`.trim()
@@ -20,27 +21,35 @@ export type OngoingQueriesVariables = {
connectionString?: string
}
-export type OngoingQueriesData = OngoingQuery[]
+export async function getOngoingQueries(
+ { projectRef, connectionString }: OngoingQueriesVariables,
+ signal?: AbortSignal
+) {
+ const sql = getOngoingQueriesSql().trim()
+
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['ongoing-queries'] },
+ signal
+ )
+
+ return (result ?? []).filter((x: OngoingQuery) => !x.query.startsWith(sql)) as OngoingQuery[]
+}
+
+export type OngoingQueriesData = Awaited>
export type OngoingQueriesError = ExecuteSqlError
-export const useOngoingQueriesQuery = (
+export const useOngoingQueriesQuery = (
{ projectRef, connectionString }: OngoingQueriesVariables,
- options: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
- {
- projectRef,
- connectionString,
- sql: getOngoingQueries(),
- queryKey: ['ongoing-queries'],
- },
+ {
+ enabled = true,
+ ...options
+ }: UseQueryOptions = {}
+) =>
+ useQuery(
+ sqlKeys.ongoingQueries(projectRef),
+ ({ signal }) => getOngoingQueries({ projectRef, connectionString }, signal),
{
+ enabled: enabled && typeof projectRef !== 'undefined',
...options,
- select(data) {
- return (data?.result ?? []).filter(
- (x: OngoingQuery) => !x.query.startsWith(getOngoingQueries())
- )
- },
}
)
-}
diff --git a/apps/studio/data/table-rows/keys.ts b/apps/studio/data/table-rows/keys.ts
index 38313e014ea..5e198498dc4 100644
--- a/apps/studio/data/table-rows/keys.ts
+++ b/apps/studio/data/table-rows/keys.ts
@@ -4,9 +4,9 @@ type TableRowKeyArgs = Omit & { table?: { id?: number
export const tableRowKeys = {
tableRows: (projectRef?: string, { table, ...args }: TableRowKeyArgs = {}) =>
- [projectRef, 'table-rows', table?.id, 'rows', args] as const,
+ ['projects', projectRef, 'table-rows', table?.id, 'rows', args] as const,
tableRowsCount: (projectRef?: string, { table, ...args }: TableRowKeyArgs = {}) =>
- [projectRef, 'table-rows', table?.id, 'count', args] as const,
+ ['projects', projectRef, 'table-rows', table?.id, 'count', args] as const,
tableRowsAndCount: (projectRef?: string, tableId?: number) =>
- [projectRef, 'table-rows', tableId] as const,
+ ['projects', projectRef, 'table-rows', tableId] as const,
}
diff --git a/apps/studio/data/tables/tables-query.ts b/apps/studio/data/tables/tables-query.ts
index 8bb2950f6f2..b6187f0a76d 100644
--- a/apps/studio/data/tables/tables-query.ts
+++ b/apps/studio/data/tables/tables-query.ts
@@ -72,7 +72,7 @@ export const useTablesQuery = (
return useQuery(
tableKeys.list(projectRef, schema, includeColumns),
({ signal }) => getTables({ projectRef, connectionString, schema, includeColumns }, signal),
- { enabled: enabled && typeof projectRef !== 'undefined', staleTime: 0, ...options }
+ { enabled: enabled && typeof projectRef !== 'undefined', ...options }
)
}
diff --git a/apps/studio/data/telemetry/send-event-mutation.ts b/apps/studio/data/telemetry/send-event-mutation.ts
index 3462905c476..45afbe6179f 100644
--- a/apps/studio/data/telemetry/send-event-mutation.ts
+++ b/apps/studio/data/telemetry/send-event-mutation.ts
@@ -10,10 +10,15 @@ import type { ResponseError } from 'types'
type SendEvent = components['schemas']['TelemetryEventBodyV2']
export type SendEventVariables = {
+ /** Defines the name of the event, refer to TELEMETRY_EVENTS in lib/constants */
action: string
- category: string
- label: string
+ /** These are all under the event's properties (customizable on the FE) */
+ /** value: refer to TELEMETRY_VALUES in lib/constants */
value?: string
+ /** label: secondary tag to the event for further identification */
+ label?: string
+ /** To deprecate - seems unnecessary */
+ category?: string
}
type SendEventPayload = any
diff --git a/apps/studio/data/vault/vault-secret-create-mutation.ts b/apps/studio/data/vault/vault-secret-create-mutation.ts
index 407404c12d1..fbdac087273 100644
--- a/apps/studio/data/vault/vault-secret-create-mutation.ts
+++ b/apps/studio/data/vault/vault-secret-create-mutation.ts
@@ -3,7 +3,6 @@ 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, VaultSecret } from 'types'
import { vaultSecretsKeys } from './keys'
@@ -44,9 +43,7 @@ export const useVaultSecretCreateMutation = ({
{
async onSuccess(data, variables, context) {
const { projectRef } = variables
- await queryClient.invalidateQueries(
- sqlKeys.query(projectRef, vaultSecretsKeys.list(projectRef))
- )
+ await queryClient.invalidateQueries(vaultSecretsKeys.list(projectRef))
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/vault/vault-secret-delete-mutation.ts b/apps/studio/data/vault/vault-secret-delete-mutation.ts
index d6d0cff6db9..975add08f3e 100644
--- a/apps/studio/data/vault/vault-secret-delete-mutation.ts
+++ b/apps/studio/data/vault/vault-secret-delete-mutation.ts
@@ -3,7 +3,6 @@ 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 { vaultSecretsKeys } from './keys'
@@ -40,9 +39,7 @@ export const useVaultSecretDeleteMutation = ({
{
async onSuccess(data, variables, context) {
const { projectRef } = variables
- await queryClient.invalidateQueries(
- sqlKeys.query(projectRef, vaultSecretsKeys.list(projectRef))
- )
+ await queryClient.invalidateQueries(vaultSecretsKeys.list(projectRef))
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/vault/vault-secret-update-mutation.ts b/apps/studio/data/vault/vault-secret-update-mutation.ts
index a2d0b441c45..fe74fb27eff 100644
--- a/apps/studio/data/vault/vault-secret-update-mutation.ts
+++ b/apps/studio/data/vault/vault-secret-update-mutation.ts
@@ -3,7 +3,6 @@ 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, VaultSecret } from 'types'
import { vaultSecretsKeys } from './keys'
@@ -48,9 +47,7 @@ export const useVaultSecretUpdateMutation = ({
const { id, projectRef } = variables
await Promise.all([
queryClient.removeQueries(vaultSecretsKeys.getDecryptedValue(projectRef, id)),
- queryClient.invalidateQueries(
- sqlKeys.query(projectRef, vaultSecretsKeys.list(projectRef))
- ),
+ queryClient.invalidateQueries(vaultSecretsKeys.list(projectRef)),
])
await onSuccess?.(data, variables, context)
},
diff --git a/apps/studio/data/vault/vault-secrets-query.ts b/apps/studio/data/vault/vault-secrets-query.ts
index 345481cba43..2945d213609 100644
--- a/apps/studio/data/vault/vault-secrets-query.ts
+++ b/apps/studio/data/vault/vault-secrets-query.ts
@@ -1,10 +1,10 @@
-import { UseQueryOptions } from '@tanstack/react-query'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
import { Query } from 'components/grid/query/Query'
import type { VaultSecret } from 'types'
-import { ExecuteSqlData, ExecuteSqlError, useExecuteSqlQuery } from '../sql/execute-sql-query'
+import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query'
import { vaultSecretsKeys } from './keys'
-export const getVaultSecretsQuery = () => {
+export const getVaultSecretsSql = () => {
const sql = new Query()
.from('secrets', 'vault')
.select('id,name,description,secret,key_id,created_at,updated_at')
@@ -18,26 +18,32 @@ export type VaultSecretsVariables = {
connectionString?: string
}
-export type VaultSecretsData = VaultSecret[]
+export async function getVaultSecrets(
+ { projectRef, connectionString }: VaultSecretsVariables,
+ signal?: AbortSignal
+) {
+ const sql = getVaultSecretsSql()
+
+ const { result } = await executeSql(
+ { projectRef, connectionString, sql, queryKey: ['vault-secrets'] },
+ signal
+ )
+
+ return result as VaultSecret[]
+}
+
+export type VaultSecretsData = Awaited>
export type VaultSecretsError = ExecuteSqlError
-export const useVaultSecretsQuery = (
+export const useVaultSecretsQuery = (
{ projectRef, connectionString }: VaultSecretsVariables,
- { enabled = true, ...options }: UseQueryOptions = {}
-) => {
- return useExecuteSqlQuery(
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ vaultSecretsKeys.list(projectRef),
+ ({ signal }) => getVaultSecrets({ projectRef, connectionString }, signal),
{
- projectRef,
- connectionString,
- sql: getVaultSecretsQuery(),
- queryKey: vaultSecretsKeys.list(projectRef),
- },
- {
- select(data) {
- return data.result
- },
enabled: enabled && typeof projectRef !== 'undefined',
...options,
}
)
-}
diff --git a/apps/studio/data/views/views-query.ts b/apps/studio/data/views/views-query.ts
index fd46365532d..bc9448210f3 100644
--- a/apps/studio/data/views/views-query.ts
+++ b/apps/studio/data/views/views-query.ts
@@ -48,6 +48,8 @@ export const useViewsQuery = (
({ signal }) => getViews({ projectRef, connectionString, schema }, signal),
{
enabled: enabled && typeof projectRef !== 'undefined',
+ // We're using a staleTime of 0 here because the only way to create a
+ // view is via SQL, which we don't know about
staleTime: 0,
...options,
}
diff --git a/apps/studio/hooks/misc/useOrgOptedIntoAi.ts b/apps/studio/hooks/misc/useOrgOptedIntoAi.ts
index 49f2c1ec937..7c1f3522254 100644
--- a/apps/studio/hooks/misc/useOrgOptedIntoAi.ts
+++ b/apps/studio/hooks/misc/useOrgOptedIntoAi.ts
@@ -2,6 +2,11 @@ import { useDisallowHipaa } from 'hooks/misc/useDisallowHipaa'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { OPT_IN_TAGS } from 'lib/constants'
+/**
+ * Checks if the organization has opted into sending anonymous data to OpenAI.
+ * Also considers if the organization has the HIPAA addon.
+ * @returns boolean (false if either not opted in or has the HIPAA addon)
+ */
export function useOrgOptedIntoAi() {
const selectedOrganization = useSelectedOrganization()
const optInTags = selectedOrganization?.opt_in_tags
diff --git a/apps/studio/hooks/ui/useFlag.ts b/apps/studio/hooks/ui/useFlag.ts
index 439e1800416..1178ebdefff 100644
--- a/apps/studio/hooks/ui/useFlag.ts
+++ b/apps/studio/hooks/ui/useFlag.ts
@@ -1,10 +1,16 @@
import { useContext } from 'react'
-
import FlagContext from 'components/ui/Flag/FlagContext'
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
export function useFlag(name: string) {
+ const project = useSelectedProject()
const store: any = useContext(FlagContext)
+ // Temporary override as Fly projects are cant seem to upgrade their compute with the new disk UI
+ if (name === 'diskAndComputeForm' && project?.cloud_provider === 'FLY') {
+ return false
+ }
+
const isObjectEmpty = (objectName: Object) => {
return Object.keys(objectName).length === 0
}
diff --git a/apps/studio/lib/constants/index.ts b/apps/studio/lib/constants/index.ts
index 1004802f502..bfca4e0614c 100644
--- a/apps/studio/lib/constants/index.ts
+++ b/apps/studio/lib/constants/index.ts
@@ -33,7 +33,7 @@ export const LOCAL_STORAGE_KEYS = {
UI_PREVIEW_NAVIGATION_LAYOUT: 'supabase-ui-preview-nav-layout',
UI_PREVIEW_API_SIDE_PANEL: 'supabase-ui-api-side-panel',
UI_PREVIEW_CLS: 'supabase-ui-cls',
- UI_PREVIEW_FUNCTIONS_ASSISTANT: 'supabase-ui-functions-assistant',
+ UI_PREVIEW_ASSISTANT_V2: 'supabase-ui-assistant-v2',
UI_ONBOARDING_NEW_PAGE_SHOWN: 'supabase-ui-onboarding-new-page-shown',
SQL_SCRATCH_PAD_BANNER_ACKNOWLEDGED: 'supabase-sql-scratch-pad-banner-acknowledged',
@@ -83,22 +83,3 @@ export const OPT_IN_TAGS = {
export const GB = 1024 * 1024 * 1024
export const MB = 1024 * 1024
export const KB = 1024
-
-// [Joshen] Just adding these to start consolidating our telemetry configs
-// may change depending on how we choose to standardize across all apps
-export enum TELEMETRY_CATEGORIES {
- AI_ASSISTANT = 'ai-assistant',
-}
-
-export enum TELEMETRY_LABELS {
- QUICK_SQL_EDITOR = 'quick-sql-editor',
-}
-
-export const TELEMETRY_ACTIONS = {
- PROMPT_SUBMITTED: 'prompt-submitted',
- QUICK_PROMPT_SELECTED: (type: string) => `quick-prompt-selected-${type}`,
- SCHEMA_CONTEXT_ADDED: 'schema-context-added',
- TABLE_CONTEXT_ADDED: 'table-context-added',
- FIX_WITH_ASSISTANT: 'fix-with-assistant',
- EXPLAIN_CODE: 'explain-code',
-}
diff --git a/apps/studio/lib/constants/telemetry.ts b/apps/studio/lib/constants/telemetry.ts
new file mode 100644
index 00000000000..7dd06282380
--- /dev/null
+++ b/apps/studio/lib/constants/telemetry.ts
@@ -0,0 +1,38 @@
+// [Joshen] Just adding these to start consolidating our telemetry configs
+// may change depending on how we choose to standardize across all apps
+// Events define the name of the event and it'll be used as the primary identification
+export enum TELEMETRY_EVENTS {
+ FEATURE_PREVIEWS = 'Dashboard UI Feature Previews',
+ AI_ASSISTANT_V2 = 'AI Assistant V2',
+}
+
+// [Joshen] Values refer to the "action" of the "event"
+// e.g prompt submitted (action) through the AI assistant (event)
+// e.g enabled feature x (action) via the feature preview (event)
+export enum TELEMETRY_VALUES {
+ /**
+ * Track whenever a prompt is submitted to the AI (excluding debug prompts)
+ * @context AI Assistant V2
+ * @purpose Indication of engagement with the feature, aid in prioritizing efforts into the assistant itself
+ */
+ PROMPT_SUBMITTED = 'prompt-submitted',
+ /**
+ * Track whenever a debug prompt is submitted to the AI
+ * @context AI Assistant V2
+ * @purpose TBD
+ */
+ DEBUG_SUBMITTED = 'debug-submitted',
+ /**
+ * Track running a SQL suggestion from AI Assistant
+ * @context AI Assistant V2
+ * @purpose Indication of usefulness of AI assistant response, aid in prioritizing tweak of Assistant prompts to adjust output quality
+ * @details Broken down into "select" or "mutation", and for the latter further broken down to the type of query (e.g "functions" or "rls-policies", default to unknown otherwise)
+ * */
+ RAN_SQL_SUGGESTION = 'ran-sql-suggestion',
+ /**
+ * Track editing a SQL suggestion:
+ * @context AI Assistant V2
+ * @purpose Indication of interest for wanting to expand from a SQL suggestion, aid in deciding the priority for an inline editor
+ * */
+ EDIT_IN_SQL_EDITOR = 'edit-in-sql-editor',
+}
diff --git a/apps/studio/lib/project.tsx b/apps/studio/lib/project.tsx
new file mode 100644
index 00000000000..09f8fba7f30
--- /dev/null
+++ b/apps/studio/lib/project.tsx
@@ -0,0 +1,10 @@
+import generator from 'generate-password-browser'
+
+export const generateStrongPassword = () => {
+ const password = generator.generate({
+ length: 16,
+ numbers: true,
+ uppercase: true,
+ })
+ return password
+}
diff --git a/apps/studio/middleware.ts b/apps/studio/middleware.ts
index 717606e7347..eb510b1988a 100644
--- a/apps/studio/middleware.ts
+++ b/apps/studio/middleware.ts
@@ -9,6 +9,7 @@ export const config = {
const HOSTED_SUPPORTED_API_URLS = [
'/ai/sql/suggest',
'/ai/sql/generate-v2',
+ '/ai/sql/generate-v3',
'/ai/sql/title',
'/ai/sql/debug',
'/ai/sql/cron',
diff --git a/apps/studio/next.config.js b/apps/studio/next.config.js
index 75b21301149..4a6a4a7e86b 100644
--- a/apps/studio/next.config.js
+++ b/apps/studio/next.config.js
@@ -533,6 +533,12 @@ const nextConfig = {
}
})
+ // .md files to be loaded as raw text
+ config.module.rules.push({
+ test: /\.md$/,
+ type: 'asset/source',
+ })
+
return config
},
onDemandEntries: {
diff --git a/apps/studio/package.json b/apps/studio/package.json
index e0b4b046619..9d446523616 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -22,6 +22,7 @@
"prettier:write": "prettier --write ."
},
"dependencies": {
+ "@ai-sdk/openai": "^0.0.72",
"@dagrejs/dagre": "^1.0.4",
"@graphiql/react": "^0.19.4",
"@graphiql/toolkit": "^0.9.1",
@@ -45,10 +46,11 @@
"@tanstack/react-query": "4.35.7",
"@tanstack/react-query-devtools": "4.35.7",
"@uidotdev/usehooks": "^2.4.1",
+ "@use-gesture/react": "^10.3.1",
"@vercel/flags": "^2.6.0",
"@vitejs/plugin-react": "^4.2.1",
"@zip.js/zip.js": "^2.7.29",
- "ai": "^2.2.31",
+ "ai": "^3.4.33",
"ai-commands": "*",
"awesome-debounce-promise": "^2.1.0",
"common": "*",
@@ -59,7 +61,7 @@
"dayjs": "^1.11.10",
"dnd-core": "^16.0.1",
"file-saver": "^2.0.5",
- "framer-motion": "^11.0.3",
+ "framer-motion": "^11.11.17",
"generate-password-browser": "^1.1.0",
"html-to-image": "^1.10.8",
"icons": "*",
@@ -69,12 +71,13 @@
"lodash": "^4.17.21",
"lucide-react": "^0.436.0",
"markdown-table": "^3.0.3",
+ "markdown-to-jsx": "^7.5.0",
"memoize-one": "^5.0.1",
"mime-db": "^1.53.0",
"mobx": "^6.10.2",
"mobx-react-lite": "^4.0.5",
"monaco-editor": "0.33.0",
- "motion-number": "^0.1.7",
+ "@number-flow/react": "^0.3.2",
"next": "^14.2.10",
"next-themes": "^0.3.0",
"nuqs": "^1.17.8",
@@ -124,6 +127,7 @@
"yup": "^1.4.0",
"yup-password": "^0.3.0",
"zod": "^3.22.4",
+ "zustand": "^5.0.1",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index e8faca7e842..dee68c98b40 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -156,7 +156,6 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
()
const [showPolicyAiEditor, setShowPolicyAiEditor] = useState(false)
@@ -99,9 +103,7 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
const filteredTables = onFilterTables(tables ?? [], policies ?? [], searchString)
const canReadPolicies = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'policies')
- const canCreatePolicies = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'policies')
const isPermissionsLoaded = usePermissionsLoaded()
- const schemaHasNoTables = (tables ?? []).length === 0
if (isPermissionsLoaded && !canReadPolicies) {
return
{
@@ -122,9 +124,9 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
}}
/>
+
+
+
+
+ )
+}
+
+RestoreToNewProjectPage.getLayout = (page) => (
+ {page}
+)
+
+const RestoreToNewProject = () => {
+ const { project } = useProjectContext()
+ const organization = useSelectedOrganization()
+ const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug })
+ const isFreePlan = subscription?.plan?.id === 'free'
+
+ const [refetchInterval, setRefetchInterval] = useState(false)
+ const [selectedBackupId, setSelectedBackupId] = useState(null)
+ const [showConfirmationDialog, setShowConfirmationDialog] = useState(false)
+ const [showNewProjectDialog, setShowNewProjectDialog] = useState(false)
+ const [recoveryTimeTarget, setRecoveryTimeTarget] = useState(null)
+
+ const { data: projects } = useProjectsQuery()
+
+ const {
+ data: cloneBackups,
+ error,
+ isLoading: cloneBackupsLoading,
+ isError,
+ } = useCloneBackupsQuery({ projectRef: project?.ref }, { enabled: !isFreePlan })
+
+ const plan = subscription?.plan?.id
+ const isActiveHealthy = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
+
+ const isPermissionsLoaded = usePermissionsLoaded()
+ const canReadPhysicalBackups = useCheckPermissions(PermissionAction.READ, 'physical_backups')
+ const canTriggerPhysicalBackups = useCheckPermissions(
+ PermissionAction.INFRA_EXECUTE,
+ 'queue_job.restore.prepare'
+ )
+ const hasPITREnabled = cloneBackups?.pitr_enabled
+
+ const dbVersion = getDatabaseMajorVersion(project?.dbVersion ?? '')
+ const IS_PG15_OR_ABOVE = dbVersion >= 15
+ const PHYSICAL_BACKUPS_ENABLED = project?.is_physical_backups_enabled
+
+ const {
+ data: cloneStatus,
+ refetch: refetchCloneStatus,
+ isLoading: cloneStatusLoading,
+ } = useCloneStatusQuery(
+ {
+ projectRef: project?.ref,
+ },
+ {
+ refetchInterval,
+ refetchOnWindowFocus: false,
+ onSuccess: (data) => {
+ const hasTransientState = data.clones.some((c) => c.status === 'IN_PROGRESS')
+ if (!hasTransientState) setRefetchInterval(false)
+ },
+ }
+ )
+ const lastClone = cloneStatus?.clones?.[cloneStatus?.clones.length - 1]
+ const IS_CLONED_PROJECT = (cloneStatus?.cloned_from?.source_project as any)?.ref ? true : false
+
+ const isLoading = !isPermissionsLoaded || cloneBackupsLoading || cloneStatusLoading
+ const clonedProject = projects?.find(
+ (p) => p.ref === cloneStatus?.clones?.[0]?.target_project.ref
+ )
+
+ if (isLoading) {
+ return
+
+ )
+ }
+
+ if (!PHYSICAL_BACKUPS_ENABLED) {
+ return (
+
+ Physical backups must be enabled to restore your database to a new project.
+
+
+
+
+ )
+ }
+
+ if (isError) {
+ return
+
+
+
+ )
+ }
+
+ if (lastClone?.status === 'COMPLETED') {
+ return (
+
+
+
+
+ )
+ }
+
+ if (lastClone?.status === 'IN_PROGRESS') {
+ return (
+
+ Restoration in progress
+
+
+ The new project{!!clonedProject ? ` ${clonedProject.name}` : ''} is currently being
+ created
+
+
+
+
+
+ )
+ }
+
+ if (
+ !isLoading &&
+ hasPITREnabled &&
+ !cloneBackups?.physicalBackupData.earliestPhysicalBackupDateUnix
+ ) {
+ return (
+ {
+ setShowConfirmationDialog(false)
+ setShowNewProjectDialog(true)
+ }}
+ />
+ {
+ refetchCloneStatus()
+ setRefetchInterval(5000)
+ setShowNewProjectDialog(false)
+ }}
+ />
+ {hasPITREnabled ? (
+ <>
+ {
+ setShowConfirmationDialog(true)
+ setRecoveryTimeTarget(v.recoveryTimeTargetUnix)
+ }}
+ earliestAvailableBackupUnix={
+ cloneBackups?.physicalBackupData.earliestPhysicalBackupDateUnix || 0
+ }
+ latestAvailableBackupUnix={
+ cloneBackups?.physicalBackupData.latestPhysicalBackupDateUnix || 0
+ }
+ />
+
+ ) : (
+ {
+ setSelectedBackupId(id)
+ setShowConfirmationDialog(true)
+ }}
+ />
+ )}
+
+ )
+}
+
+export default RestoreToNewProjectPage
diff --git a/apps/studio/pages/project/[ref]/database/indexes.tsx b/apps/studio/pages/project/[ref]/database/indexes.tsx
index f2da747faf2..2e1264b5229 100644
--- a/apps/studio/pages/project/[ref]/database/indexes.tsx
+++ b/apps/studio/pages/project/[ref]/database/indexes.tsx
@@ -36,7 +36,7 @@ const IndexesPage: NextPageWithLayout = () => {
className="no-underline"
href="https://supabase.com/docs/guides/database/extensions/index_advisor"
>
- Optimization with index_advisor
+ Index Advisor
diff --git a/apps/studio/pages/project/[ref]/database/types.tsx b/apps/studio/pages/project/[ref]/database/types.tsx
index b8830224da6..adb50596465 100644
--- a/apps/studio/pages/project/[ref]/database/types.tsx
+++ b/apps/studio/pages/project/[ref]/database/types.tsx
@@ -17,7 +17,7 @@ const DatabaseEnumeratedTypes: NextPageWithLayout = () => {
return (
-
+
{
+ const router = useRouter()
+ const { ref, id, pageId, childId } = useParams()
+
+ const { installedIntegrations: installedIntegrations, isLoading: isIntegrationsLoading } =
+ useInstalledIntegrations()
+
+ // everything is wrapped in useMemo to avoid UI resets when installing additional extensions like pg_net
+ const integration = useMemo(() => INTEGRATIONS.find((i) => i.id === id), [id])
+
+ const installation = useMemo(
+ () => installedIntegrations.find((inst) => inst.id === id),
+ [installedIntegrations, id]
+ )
+
+ // Get the corresponding component dynamically
+ const Component = useMemo(
+ () => integration?.navigate(id!, pageId, childId),
+ [integration, id, pageId, childId]
+ )
+
+ useEffect(() => {
+ // if the integration is not installed, redirect to the overview page
+ if (
+ router &&
+ router?.isReady &&
+ !isIntegrationsLoading &&
+ !installation &&
+ pageId !== 'overview'
+ ) {
+ router.replace(`/project/${ref}/integrations/${id}/overview`)
+ }
+ }, [installation, isIntegrationsLoading, pageId, router])
+
+ if (!router?.isReady || isIntegrationsLoading) {
+ return (
+
+
+ )
+ }
+
+ if (!id || !integration) {
+ return Integration not found
+ }
+
+ if (!Component) return Component not found
+
+ return {page}
+
+export default IntegrationPage
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
new file mode 100644
index 00000000000..e25dc2980fe
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
@@ -0,0 +1,63 @@
+import { useParams } from 'common'
+import { INTEGRATIONS } from 'components/interfaces/Integrations/Landing/Integrations.constants'
+import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
+import IntegrationsLayout from 'components/layouts/Integrations/layout'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { useRouter } from 'next/compat/router'
+import { useEffect, useMemo } from 'react'
+import { NextPageWithLayout } from 'types'
+
+const IntegrationPage: NextPageWithLayout = () => {
+ const router = useRouter()
+ const { ref, id, pageId, childId } = useParams()
+
+ const { installedIntegrations: installedIntegrations, isLoading: isIntegrationsLoading } =
+ useInstalledIntegrations()
+
+ // everything is wrapped in useMemo to avoid UI resets when installing additional extensions like pg_net
+ const integration = useMemo(() => INTEGRATIONS.find((i) => i.id === id), [id])
+
+ const installation = useMemo(
+ () => installedIntegrations.find((inst) => inst.id === id),
+ [installedIntegrations, id]
+ )
+
+ // Get the corresponding component dynamically
+ const Component = useMemo(
+ () => integration?.navigate(id!, pageId, childId),
+ [integration, id, pageId, childId]
+ )
+
+ useEffect(() => {
+ // if the integration is not installed, redirect to the overview page
+ if (
+ router &&
+ router?.isReady &&
+ !isIntegrationsLoading &&
+ !installation &&
+ pageId !== 'overview'
+ ) {
+ router.replace(`/project/${ref}/integrations/${id}/overview`)
+ }
+ }, [installation, isIntegrationsLoading, pageId, router])
+
+ if (!router?.isReady || isIntegrationsLoading) {
+ return (
+
+
+ )
+ }
+
+ if (!id || !integration) {
+ return Integration not found
+ }
+
+ if (!Component) return Component not found
+
+ return {page}
+
+export default IntegrationPage
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
new file mode 100644
index 00000000000..e25dc2980fe
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
@@ -0,0 +1,63 @@
+import { useParams } from 'common'
+import { INTEGRATIONS } from 'components/interfaces/Integrations/Landing/Integrations.constants'
+import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
+import IntegrationsLayout from 'components/layouts/Integrations/layout'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { useRouter } from 'next/compat/router'
+import { useEffect, useMemo } from 'react'
+import { NextPageWithLayout } from 'types'
+
+const IntegrationPage: NextPageWithLayout = () => {
+ const router = useRouter()
+ const { ref, id, pageId, childId } = useParams()
+
+ const { installedIntegrations: installedIntegrations, isLoading: isIntegrationsLoading } =
+ useInstalledIntegrations()
+
+ // everything is wrapped in useMemo to avoid UI resets when installing additional extensions like pg_net
+ const integration = useMemo(() => INTEGRATIONS.find((i) => i.id === id), [id])
+
+ const installation = useMemo(
+ () => installedIntegrations.find((inst) => inst.id === id),
+ [installedIntegrations, id]
+ )
+
+ // Get the corresponding component dynamically
+ const Component = useMemo(
+ () => integration?.navigate(id!, pageId, childId),
+ [integration, id, pageId, childId]
+ )
+
+ useEffect(() => {
+ // if the integration is not installed, redirect to the overview page
+ if (
+ router &&
+ router?.isReady &&
+ !isIntegrationsLoading &&
+ !installation &&
+ pageId !== 'overview'
+ ) {
+ router.replace(`/project/${ref}/integrations/${id}/overview`)
+ }
+ }, [installation, isIntegrationsLoading, pageId, router])
+
+ if (!router?.isReady || isIntegrationsLoading) {
+ return (
+
+
+ )
+ }
+
+ if (!id || !integration) {
+ return Integration not found
+ }
+
+ if (!Component) return Component not found
+
+ return {page}
+
+export default IntegrationPage
diff --git a/apps/studio/pages/project/[ref]/integrations/cron-jobs.tsx b/apps/studio/pages/project/[ref]/integrations/cron-jobs.tsx
deleted file mode 100644
index 1a59917e814..00000000000
--- a/apps/studio/pages/project/[ref]/integrations/cron-jobs.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { CronJobsListing } from 'components/interfaces/Integrations/CronJobs/CronJobsListing'
-import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
-import { DocsButton } from 'components/ui/DocsButton'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
-import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import { CronJob, useCronJobsQuery } from 'data/database-cron-jobs/database-cron-jobs-query'
-import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
-import { useEffect, useState } from 'react'
-import type { NextPageWithLayout } from 'types'
-import { Button } from 'ui'
-import { CronJobsDisabledState } from '../../../../components/interfaces/Integrations/CronJobs/CronJobsDisabledState'
-
-import { CreateCronJobSheet } from 'components/interfaces/Integrations/CronJobs/CreateCronJobSheet'
-import { Sheet, SheetContent } from 'ui'
-
-const CronJobsPage: NextPageWithLayout = () => {
- const { project } = useProjectContext()
- const [isClosingCreateCronJobSheet, setIsClosingCreateCronJobSheet] = useState(false)
- const [createCronJobSheetShown, setCreateCronJobSheetShown] = useState<
- Pick | undefined
- >()
-
- const { isError, refetch } = useCronJobsQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
-
- const { data: extensions, isLoading: isLoadingExtensions } = useDatabaseExtensionsQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
-
- const pgCronExtension = (extensions ?? []).find((ext) => ext.name === 'pg_cron')
- const pgCronExtensionInstalled = pgCronExtension?.installed_version
-
- useEffect(() => {
- // refetch the cron jobs after the pgcron extension has been installed
- if (pgCronExtensionInstalled && isError) {
- refetch()
- }
- }, [isError, pgCronExtensionInstalled, refetch])
-
- return (
-
-
-
- {pgCronExtensionInstalled && (
-
-
- setCreateCronJobSheetShown({
- jobname: '',
- schedule: '',
- command: '',
- active: true,
- })
- }
- >
- Create a new cron job
-
-
- }
- />
- )}
- {isLoadingExtensions ? (
-
-
-
- setIsClosingCreateCronJobSheet(true)}
- >
-
- {
- setIsClosingCreateCronJobSheet(false)
- setCreateCronJobSheetShown(undefined)
- }}
- isClosing={isClosingCreateCronJobSheet}
- setIsClosing={setIsClosingCreateCronJobSheet}
- />
-
-
-
- )
-}
-
-CronJobsPage.getLayout = (page) => (
- {page}
-)
-
-export default CronJobsPage
diff --git a/apps/studio/pages/project/[ref]/integrations/hooks.tsx b/apps/studio/pages/project/[ref]/integrations/hooks.tsx
deleted file mode 100644
index 980c6005e31..00000000000
--- a/apps/studio/pages/project/[ref]/integrations/hooks.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useState } from 'react'
-import { toast } from 'sonner'
-
-import { useParams } from 'common'
-import DeleteHookModal from 'components/interfaces/Database/Hooks/DeleteHookModal'
-import EditHookPanel from 'components/interfaces/Database/Hooks/EditHookPanel'
-import HooksList from 'components/interfaces/Database/Hooks/HooksList/HooksList'
-import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
-import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
-import NoPermission from 'components/ui/NoPermission'
-import { useHooksEnableMutation } from 'data/database/hooks-enable-mutation'
-import { useSchemasQuery } from 'data/database/schemas-query'
-import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
-import type { NextPageWithLayout } from 'types'
-
-const HooksPage: NextPageWithLayout = () => {
- const { project } = useProjectContext()
-
- const { ref: projectRef } = useParams()
-
- const {
- data: schemas,
- isSuccess: isSchemasLoaded,
- refetch,
- } = useSchemasQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
-
- const [selectedHook, setSelectedHook] = useState()
- const [showCreateHookForm, setShowCreateHookForm] = useState(false)
- const [showDeleteHookForm, setShowDeleteHookForm] = useState(false)
-
- const isHooksEnabled = schemas?.some((schema) => schema.name === 'supabase_functions')
- const canReadWebhooks = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'triggers')
- const canCreateWebhooks = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'triggers')
- const isPermissionsLoaded = usePermissionsLoaded()
-
- const { mutate: enableHooks, isLoading: isEnablingHooks } = useHooksEnableMutation({
- onSuccess: () => {
- refetch()
- toast.success('Successfully enabled webhooks')
- },
- })
-
- const enableHooksForProject = async () => {
- if (!projectRef) return console.error('Project ref is required')
- enableHooks({ ref: projectRef })
- }
-
- const createHook = () => {
- setSelectedHook(undefined)
- setShowCreateHookForm(true)
- }
-
- const editHook = (hook: any) => {
- setSelectedHook(hook)
- setShowCreateHookForm(true)
- }
-
- const deleteHook = (hook: any) => {
- setSelectedHook(hook)
- setShowDeleteHookForm(true)
- }
-
- if (isPermissionsLoaded && !canReadWebhooks) {
- return
-
enableHooksForProject()}
- loading={isEnablingHooks}
- disabled={isEnablingHooks || (isPermissionsLoaded && !canReadWebhooks)}
- disabledMessage={
- isPermissionsLoaded && !canCreateWebhooks
- ? 'You need additional permissions to enable webhooks'
- : undefined
- }
- >
-
- Database Webhooks can be used to trigger serverless functions or send requests to an
- HTTP endpoint.
-
- Enable database webhooks on your project.
-
-
-
-
-
-
-
- setShowCreateHookForm(false)}
- />
- setShowDeleteHookForm(false)}
- />
-
- )
-}
-
-HooksPage.getLayout = (page) => (
- {page}
-)
-
-export default HooksPage
diff --git a/apps/studio/pages/project/[ref]/integrations/index.tsx b/apps/studio/pages/project/[ref]/integrations/index.tsx
new file mode 100644
index 00000000000..58b1087c516
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/integrations/index.tsx
@@ -0,0 +1,17 @@
+import { AvailableIntegrations } from 'components/interfaces/Integrations/Landing/AvailableIntegrations'
+import { InstalledIntegrations } from 'components/interfaces/Integrations/Landing/InstalledIntegrations'
+import IntegrationsLayout from 'components/layouts/Integrations/layout'
+import type { NextPageWithLayout } from 'types'
+
+const IntegrationsPage: NextPageWithLayout = () => {
+ return (
+
+ )
+}
+
+IntegrationsPage.getLayout = (page) => {page}
+
+export default IntegrationsPage
diff --git a/apps/studio/pages/project/[ref]/integrations/queues/index.tsx b/apps/studio/pages/project/[ref]/integrations/queues/index.tsx
deleted file mode 100644
index de0b4eb246f..00000000000
--- a/apps/studio/pages/project/[ref]/integrations/queues/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { QueuesListing } from 'components/interfaces/Integrations/Queues/QueuesListing'
-import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout'
-import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
-import type { NextPageWithLayout } from 'types'
-
-const QueuesPage: NextPageWithLayout = () => {
- // TODO: Change this to the correct permissions
- // const canReadFunctions = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'functions')
- // const isPermissionsLoaded = usePermissionsLoaded()
-
- // if (isPermissionsLoaded && !canReadFunctions) {
- // return
-
-
-
-
-
- )
-}
-
-QueuesPage.getLayout = (page) => (
- {page}
-)
-
-export default QueuesPage
diff --git a/apps/studio/pages/project/[ref]/integrations/vault/keys.tsx b/apps/studio/pages/project/[ref]/integrations/vault/keys.tsx
deleted file mode 100644
index 63e5fd1b4cb..00000000000
--- a/apps/studio/pages/project/[ref]/integrations/vault/keys.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useParams } from 'common'
-
-import { EncryptionKeysManagement, VaultToggle } from 'components/interfaces/Settings/Vault'
-import VaultNavTabs from 'components/interfaces/Settings/Vault/VaultNavTabs'
-import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
-import {
- ScaffoldContainer,
- ScaffoldDescription,
- ScaffoldHeader,
- ScaffoldTitle,
-} from 'components/layouts/Scaffold'
-import ShimmeringLoader from 'components/ui/ShimmeringLoader'
-import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
-import type { NextPageWithLayout } from 'types'
-
-const VaultSettingsSecrets: NextPageWithLayout = () => {
- const { ref } = useParams()
- const { project } = useProjectContext()
-
- const { data, isLoading } = useDatabaseExtensionsQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
-
- const vaultExtension = (data ?? []).find((ext) => ext.name === 'supabase_vault')
- const isEnabled = vaultExtension !== undefined && vaultExtension.installed_version !== null
-
- return (
- <>
-
-
- Vault
- Application level encryption for your project
-
-
-
- {isLoading ? (
-
-
- ) : !isEnabled ? (
-
-
- )
-}
-
-VaultSettingsSecrets.getLayout = (page) => (
- {page}
-)
-export default VaultSettingsSecrets
diff --git a/apps/studio/pages/project/[ref]/integrations/vault/secrets.tsx b/apps/studio/pages/project/[ref]/integrations/vault/secrets.tsx
deleted file mode 100644
index bd3c1c7eade..00000000000
--- a/apps/studio/pages/project/[ref]/integrations/vault/secrets.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useParams } from 'common/hooks'
-import { SecretsManagement, VaultToggle } from 'components/interfaces/Settings/Vault'
-import VaultNavTabs from 'components/interfaces/Settings/Vault/VaultNavTabs'
-import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-
-import {
- ScaffoldContainer,
- ScaffoldDescription,
- ScaffoldHeader,
- ScaffoldTitle,
-} from 'components/layouts/Scaffold'
-import ShimmeringLoader from 'components/ui/ShimmeringLoader'
-import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
-import { useRouter } from 'next/router'
-import type { NextPageWithLayout } from 'types'
-
-const VaultSettingsSecrets: NextPageWithLayout = () => {
- const router = useRouter()
- const { ref } = useParams()
- const { project } = useProjectContext()
-
- const { data, isLoading } = useDatabaseExtensionsQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
-
- const vaultExtension = (data ?? []).find((ext) => ext.name === 'supabase_vault')
- const isEnabled = vaultExtension !== undefined && vaultExtension.installed_version !== null
-
- return (
- <>
-
-
- Vault
- Application level encryption for your project
-
-
-
- {isLoading ? (
-
-
- ) : !isEnabled ? (
-
-
- )
-}
-
-VaultSettingsSecrets.getLayout = (page) => (
- {page}
-)
-export default VaultSettingsSecrets
diff --git a/apps/studio/pages/project/[ref]/integrations/wrappers/[id].tsx b/apps/studio/pages/project/[ref]/integrations/wrappers/[id].tsx
deleted file mode 100644
index d9110015d27..00000000000
--- a/apps/studio/pages/project/[ref]/integrations/wrappers/[id].tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-
-import { EditWrapper } from 'components/interfaces/Database'
-import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout'
-import NoPermission from 'components/ui/NoPermission'
-import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
-import type { NextPageWithLayout } from 'types'
-
-const DatabaseWrappersNew: NextPageWithLayout = () => {
- const canReadWrappers = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'wrappers')
- const isPermissionsLoaded = usePermissionsLoaded()
-
- if (isPermissionsLoaded && !canReadWrappers) {
- return {page}
-)
-
-export default DatabaseWrappersNew
diff --git a/apps/studio/pages/project/[ref]/integrations/wrappers/index.tsx b/apps/studio/pages/project/[ref]/integrations/wrappers/index.tsx
deleted file mode 100644
index fa21318f6c4..00000000000
--- a/apps/studio/pages/project/[ref]/integrations/wrappers/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-
-import { Wrappers } from 'components/interfaces/Database'
-import WrappersDropdown from 'components/interfaces/Database/Wrappers/WrappersDropdown'
-import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import {
- ScaffoldContainer,
- ScaffoldSection,
- ScaffoldSectionContent,
- ScaffoldSectionDetail,
-} from 'components/layouts/Scaffold'
-import { DocsButton } from 'components/ui/DocsButton'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
-import NoPermission from 'components/ui/NoPermission'
-import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
-import { useFDWsQuery } from 'data/fdw/fdws-query'
-import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
-import type { NextPageWithLayout } from 'types'
-import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-
-const DatabaseWrappers: NextPageWithLayout = () => {
- const { project } = useProjectContext()
- const isPermissionsLoaded = usePermissionsLoaded()
- const canReadWrappers = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'tables')
-
- const { isLoading: isLoadingFDWs } = useFDWsQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
- const { data: exts, isLoading: isLoadingExtensions } = useDatabaseExtensionsQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
- const wrappersExtension = (exts ?? []).find((ext) => ext.name === 'wrappers')
- const vaultExtension = (exts ?? []).find((ext) => ext.name === 'supabase_vault')
-
- const isWrappersEnabled =
- wrappersExtension !== undefined &&
- wrappersExtension.installed_version !== null &&
- vaultExtension !== undefined &&
- vaultExtension.installed_version !== null
-
- return (
-
-
-
-
-
-
-
-
- {isLoadingExtensions || isLoadingFDWs ? (
-
-
-
- )
-}
-
-DatabaseWrappers.getLayout = (page) => (
- {page}
-)
-
-export default DatabaseWrappers
diff --git a/apps/studio/pages/project/[ref]/integrations/wrappers/new.tsx b/apps/studio/pages/project/[ref]/integrations/wrappers/new.tsx
deleted file mode 100644
index babc1819c1e..00000000000
--- a/apps/studio/pages/project/[ref]/integrations/wrappers/new.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-
-import { CreateWrapper } from 'components/interfaces/Database'
-import ProjectIntegrationsLayout from 'components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout'
-import NoPermission from 'components/ui/NoPermission'
-import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
-import type { NextPageWithLayout } from 'types'
-
-const DatabaseWrappersNew: NextPageWithLayout = () => {
- const canCreateWrappers = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables')
- const isPermissionsLoaded = usePermissionsLoaded()
-
- if (isPermissionsLoaded && !canCreateWrappers) {
- return {page}
-)
-
-export default DatabaseWrappersNew
diff --git a/apps/studio/pages/project/[ref]/logs/cron-logs.tsx b/apps/studio/pages/project/[ref]/logs/cron-logs.tsx
new file mode 100644
index 00000000000..cb80975342b
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/logs/cron-logs.tsx
@@ -0,0 +1,26 @@
+// select * from cron.job_run_details where jobid = '1' order by start_time desc limit 10
+
+import { useRouter } from 'next/router'
+
+import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
+import type { NextPageWithLayout } from 'types'
+import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
+
+export const LogPage: NextPageWithLayout = () => {
+ const router = useRouter()
+ const { ref } = router.query
+
+ return (
+ {page}
+
+export default LogPage
diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx
index c573b79a3c2..6584073bb36 100644
--- a/apps/studio/pages/project/[ref]/reports/database.tsx
+++ b/apps/studio/pages/project/[ref]/reports/database.tsx
@@ -22,12 +22,12 @@ import { useProjectDiskResizeMutation } from 'data/config/project-disk-resize-mu
import { useDatabaseSizeQuery } from 'data/database/database-size-query'
import { useDatabaseReport } from 'data/reports/database-report-query'
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import { useFlag } from 'hooks/ui/useFlag'
import { TIME_PERIODS_INFRA } from 'lib/constants/metrics'
import { formatBytes } from 'lib/helpers'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
import type { NextPageWithLayout } from 'types'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import { useFlag } from 'hooks/ui/useFlag'
const DatabaseReport: NextPageWithLayout = () => {
return (
@@ -59,7 +59,7 @@ const DatabaseUsage = () => {
projectRef: project?.ref,
connectionString: project?.connectionString,
})
- const databaseSizeBytes = data?.result[0].db_size ?? 0
+ const databaseSizeBytes = data ?? 0
const currentDiskSize = project?.volumeSizeGb ?? 0
const [showIncreaseDiskSizeModal, setshowIncreaseDiskSizeModal] = useState(false)
diff --git a/apps/studio/pages/project/[ref]/sql/[id].tsx b/apps/studio/pages/project/[ref]/sql/[id].tsx
index c06e2aae9f8..33bc4c7eb6d 100644
--- a/apps/studio/pages/project/[ref]/sql/[id].tsx
+++ b/apps/studio/pages/project/[ref]/sql/[id].tsx
@@ -112,9 +112,9 @@ const SqlEditor: NextPageWithLayout = () => {
if (pgInfoRef.current === null) {
pgInfoRef.current = {}
}
- pgInfoRef.current.tableColumns = tableColumns?.result
+ pgInfoRef.current.tableColumns = tableColumns
pgInfoRef.current.schemas = schemas
- pgInfoRef.current.keywords = keywords?.result
+ pgInfoRef.current.keywords = keywords
pgInfoRef.current.functions = functions
}
diff --git a/apps/studio/pages/vercel/setupProject.tsx b/apps/studio/pages/vercel/setupProject.tsx
index a9d24ba6070..34e1bab9de7 100644
--- a/apps/studio/pages/vercel/setupProject.tsx
+++ b/apps/studio/pages/vercel/setupProject.tsx
@@ -1,11 +1,9 @@
-import generator from 'generate-password-browser'
import { debounce } from 'lodash'
import { makeAutoObservable } from 'mobx'
import { observer, useLocalObservable } from 'mobx-react-lite'
import { useRouter } from 'next/router'
import { ChangeEvent, createContext, useContext, useEffect, useRef, useState } from 'react'
import { toast } from 'sonner'
-import { Button, Input, Listbox } from 'ui'
import VercelIntegrationLayout from 'components/layouts/VercelIntegrationLayout'
import {
@@ -22,9 +20,11 @@ import {
PROVIDERS,
} from 'lib/constants'
import passwordStrength from 'lib/password-strength'
+import { generateStrongPassword } from 'lib/project'
import { VERCEL_INTEGRATION_CONFIGS } from 'lib/vercelConfigs'
import { AWS_REGIONS } from 'shared-data'
import type { Dictionary } from 'types'
+import { Button, Input, Listbox } from 'ui'
interface ISetupProjectStore {
token: string
@@ -211,13 +211,8 @@ const CreateProject = observer(() => {
setPasswordStrengthMessage(message)
}
- function generateStrongPassword() {
- const password = generator.generate({
- length: 16,
- numbers: true,
- uppercase: true,
- })
-
+ function generatePassword() {
+ const password = generateStrongPassword()
setDbPass(password)
delayedCheckPasswordStrength(password)
}
@@ -271,7 +266,7 @@ const CreateProject = observer(() => {
passwordStrengthScore={passwordStrengthScore}
password={dbPass}
passwordStrengthMessage={passwordStrengthMessage}
- generateStrongPassword={generateStrongPassword}
+ generateStrongPassword={generatePassword}
/>
}
/>
diff --git a/apps/studio/public/img/previews/assistant-v2.png b/apps/studio/public/img/previews/assistant-v2.png
new file mode 100644
index 00000000000..02d697fd934
Binary files /dev/null and b/apps/studio/public/img/previews/assistant-v2.png differ
diff --git a/apps/studio/public/img/previews/functions-assistant.png b/apps/studio/public/img/previews/functions-assistant.png
deleted file mode 100644
index 7fc3f94c8f7..00000000000
Binary files a/apps/studio/public/img/previews/functions-assistant.png and /dev/null differ
diff --git a/apps/studio/state/app-state.ts b/apps/studio/state/app-state.ts
index 48e35d43b16..3ea197e9e17 100644
--- a/apps/studio/state/app-state.ts
+++ b/apps/studio/state/app-state.ts
@@ -3,6 +3,7 @@ import { proxy, snapshot, useSnapshot } from 'valtio'
import { SupportedAssistantEntities } from 'components/ui/AIAssistantPanel/AIAssistant.types'
import { LOCAL_STORAGE_KEYS } from 'lib/constants'
import { LOCAL_STORAGE_KEYS as COMMON_LOCAL_STORAGE_KEYS } from 'common'
+import type { Message as MessageType } from 'ai/react'
const EMPTY_DASHBOARD_HISTORY: {
sql?: string
@@ -19,8 +20,17 @@ export type CommonDatabaseEntity = {
[key: string]: any
}
+export type SuggestionsType = {
+ title: string
+ prompts?: string[]
+}
+
type AiAssistantPanelType = {
open: boolean
+ messages?: MessageType[] | undefined
+ initialInput: string
+ sqlSnippets?: string[]
+ suggestions?: SuggestionsType
editor?: SupportedAssistantEntities | null
// Raw string content for the monaco editor, currently used to retain where the user left off when toggling off the panel
content?: string
@@ -29,6 +39,18 @@ type AiAssistantPanelType = {
tables: { schema: string; name: string }[]
}
+const INITIAL_AI_ASSISTANT: AiAssistantPanelType = {
+ open: false,
+ messages: undefined,
+ sqlSnippets: undefined,
+ initialInput: '',
+ suggestions: undefined,
+ editor: null,
+ content: '',
+ entity: undefined,
+ tables: [],
+}
+
export const appState = proxy({
// [Joshen] Last visited "entity" for any page that we wanna track
dashboardHistory: EMPTY_DASHBOARD_HISTORY,
@@ -108,13 +130,14 @@ export const appState = proxy({
appState.navigationPanelJustClosed = value
},
- aiAssistantPanel: {
- open: false,
- editor: null,
- content: '',
- entity: undefined,
- tables: [],
- } as AiAssistantPanelType,
+ resetAiAssistantPanel: () => {
+ appState.aiAssistantPanel = {
+ ...INITIAL_AI_ASSISTANT,
+ open: appState.aiAssistantPanel.open,
+ }
+ },
+
+ aiAssistantPanel: INITIAL_AI_ASSISTANT as AiAssistantPanelType,
setAiAssistantPanel: (value: Partial) => {
const hasEntityChanged = value.entity?.id !== appState.aiAssistantPanel.entity?.id
diff --git a/apps/studio/state/sql-editor-v2.ts b/apps/studio/state/sql-editor-v2.ts
index 2fd708c9853..8e8cfad29fe 100644
--- a/apps/studio/state/sql-editor-v2.ts
+++ b/apps/studio/state/sql-editor-v2.ts
@@ -11,6 +11,7 @@ import { Snippet, SnippetFolder, SnippetFolderResponse } from 'data/content/sql-
import { SqlSnippet } from 'data/content/sql-snippets-query'
import { getQueryClient } from 'data/query-client'
import { getContentById } from 'data/content/content-id-query'
+import { DiffType } from 'components/interfaces/SQLEditor/SQLEditor.types'
export type StateSnippetFolder = {
projectRef: string
@@ -76,6 +77,9 @@ export const sqlEditorState = proxy({
// For handling renaming folder failed
lastUpdatedFolderName: '',
+ // For Assistant to render diffing into the editor
+ diffContent: undefined as undefined | { sql: string; diffType: DiffType },
+
get allFolderNames() {
return Object.values(sqlEditorState.folders).map((x) => x.folder.name)
},
@@ -121,6 +125,9 @@ export const sqlEditorState = proxy({
})
},
+ setDiffContent: (sql: string, diffType: DiffType) =>
+ (sqlEditorState.diffContent = { sql, diffType }),
+
setOrder: (value: 'name' | 'inserted_at') => (sqlEditorState.order = value),
setPrivateSnippetCount: ({ projectRef, value }: { projectRef: string; value: number }) => {
diff --git a/apps/studio/static-data/integrations/airtable_wrapper/overview.md b/apps/studio/static-data/integrations/airtable_wrapper/overview.md
new file mode 100644
index 00000000000..be72d1fc9c1
--- /dev/null
+++ b/apps/studio/static-data/integrations/airtable_wrapper/overview.md
@@ -0,0 +1,3 @@
+Airtable is an easy-to-use online platform for creating and sharing relational databases.
+
+The Airtable Wrapper allows you to read data from your Airtable bases/tables within your Postgres database.
diff --git a/apps/studio/static-data/integrations/auth0_wrapper/overview.md b/apps/studio/static-data/integrations/auth0_wrapper/overview.md
new file mode 100644
index 00000000000..a18f4b27ec5
--- /dev/null
+++ b/apps/studio/static-data/integrations/auth0_wrapper/overview.md
@@ -0,0 +1,3 @@
+[Auth0](https://auth0.com/) is a flexible, drop-in solution to add authentication and authorization services to your applications
+
+The Auth0 Wrapper allows you to read data from your Auth0 tenant for use within your Postgres database.
diff --git a/apps/studio/static-data/integrations/bigquery_wrapper/overview.md b/apps/studio/static-data/integrations/bigquery_wrapper/overview.md
new file mode 100644
index 00000000000..ebab5c701bc
--- /dev/null
+++ b/apps/studio/static-data/integrations/bigquery_wrapper/overview.md
@@ -0,0 +1,3 @@
+BigQuery is a completely serverless and cost-effective enterprise data warehouse that works across clouds and scales with your data, with BI, machine learning and AI built in.
+
+The BigQuery Wrapper allows you to read and write data from BigQuery within your Postgres database.
diff --git a/apps/studio/static-data/integrations/clickhouse_wrapper/overview.md b/apps/studio/static-data/integrations/clickhouse_wrapper/overview.md
new file mode 100644
index 00000000000..ee7c42c6f93
--- /dev/null
+++ b/apps/studio/static-data/integrations/clickhouse_wrapper/overview.md
@@ -0,0 +1,3 @@
+ClickHouse is a fast open-source column-oriented database management system that allows generating analytical data reports in real-time using SQL queries.
+
+The ClickHouse Wrapper allows you to read and write data from ClickHouse within your Postgres database.
diff --git a/apps/studio/static-data/integrations/cognito_wrapper/overview.md b/apps/studio/static-data/integrations/cognito_wrapper/overview.md
new file mode 100644
index 00000000000..ae2274e4681
--- /dev/null
+++ b/apps/studio/static-data/integrations/cognito_wrapper/overview.md
@@ -0,0 +1,3 @@
+[AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) is an identity platform for web and mobile apps.
+
+The Cognito wrapper allows you to read data from your Cognito Userpool within your Postgres database.
diff --git a/apps/studio/static-data/integrations/cron-jobs/overview.md b/apps/studio/static-data/integrations/cron-jobs/overview.md
new file mode 100644
index 00000000000..b9cfc653dfa
--- /dev/null
+++ b/apps/studio/static-data/integrations/cron-jobs/overview.md
@@ -0,0 +1 @@
+Cron jobs uses the `pg_cron` Postgres extension, which is a simple cron-based job scheduler for Postgres that runs inside the database. It uses the same syntax as a regular cron, but it allows you to schedule Postgres SQL commands directly from the database.
diff --git a/apps/studio/static-data/integrations/firebase_wrapper/overview.md b/apps/studio/static-data/integrations/firebase_wrapper/overview.md
new file mode 100644
index 00000000000..9433175384d
--- /dev/null
+++ b/apps/studio/static-data/integrations/firebase_wrapper/overview.md
@@ -0,0 +1,3 @@
+Firebase is an app development platform built around non-relational technologies. The Firebase Wrapper supports connecting to below objects.
+
+The Firebase Wrapper is aforeign data wrapper which allows you to read data from Firebase within your Postgres database.
diff --git a/apps/studio/static-data/integrations/graphiql/overview.md b/apps/studio/static-data/integrations/graphiql/overview.md
new file mode 100644
index 00000000000..60258d5f534
--- /dev/null
+++ b/apps/studio/static-data/integrations/graphiql/overview.md
@@ -0,0 +1,3 @@
+GraphiQL is the GraphQL integrated development environment (IDE). It’s a powerful (and all-around awesome) tool you’ll use often while building Gatsby websites. It offers syntax highlighting, intellisense autocompletion, automatic documentation, and much more.
+
+Use GraphiQL to interactively build your page and static queries.
diff --git a/apps/studio/static-data/integrations/logflare_wrapper/overview.md b/apps/studio/static-data/integrations/logflare_wrapper/overview.md
new file mode 100644
index 00000000000..5cb4e5cad0e
--- /dev/null
+++ b/apps/studio/static-data/integrations/logflare_wrapper/overview.md
@@ -0,0 +1,3 @@
+[Logflare](https://logflare.app/) is a centralized web-based log management solution to easily access Cloudflare, Vercel & Elixir logs.
+
+The Logflare Wrapper allows you to read data from Logflare endpoints within your Postgres database.
diff --git a/apps/studio/static-data/integrations/mssql_wrapper/overview.md b/apps/studio/static-data/integrations/mssql_wrapper/overview.md
new file mode 100644
index 00000000000..648dfa0247b
--- /dev/null
+++ b/apps/studio/static-data/integrations/mssql_wrapper/overview.md
@@ -0,0 +1,3 @@
+[Microsoft SQL Server](https://www.microsoft.com/en-au/sql-server/) is a proprietary relational database management system developed by Microsoft.
+
+The SQL Server Wrapper allows you to read data from Microsoft SQL Server within your Postgres database.
diff --git a/apps/studio/static-data/integrations/paddle_wrapper/overview.md b/apps/studio/static-data/integrations/paddle_wrapper/overview.md
new file mode 100644
index 00000000000..7eb5fd4fb7f
--- /dev/null
+++ b/apps/studio/static-data/integrations/paddle_wrapper/overview.md
@@ -0,0 +1,3 @@
+[Paddle](https://www.paddle.com/) is a merchant of record that acts to provide a payment infrastructure to thousands of software companies around the world.
+
+The Paddle Wrapper is a WebAssembly(Wasm) foreign data wrapper which allows you to read and write data from Paddle within your Postgres database.
diff --git a/apps/studio/static-data/integrations/queues/overview.md b/apps/studio/static-data/integrations/queues/overview.md
new file mode 100644
index 00000000000..09bebecd8c3
--- /dev/null
+++ b/apps/studio/static-data/integrations/queues/overview.md
@@ -0,0 +1 @@
+Queues uses the `pgmq` Postgres extension, which is a lightweight message queue like [AWS SQS](https://aws.amazon.com/sqs/) and [RSMQ](https://github.com/smrchy/rsmq) but on Postgres.
diff --git a/apps/studio/static-data/integrations/redis_wrapper/overview.md b/apps/studio/static-data/integrations/redis_wrapper/overview.md
new file mode 100644
index 00000000000..dc7bd959d3c
--- /dev/null
+++ b/apps/studio/static-data/integrations/redis_wrapper/overview.md
@@ -0,0 +1,3 @@
+[Redis](https://redis.io/) is an open-source in-memory storage, used as a distributed, in-memory key–value database, cache and message broker, with optional durability.
+
+The Redis Wrapper allows you to read data from Redis within your Postgres database.
diff --git a/apps/studio/static-data/integrations/s3_wrapper/overview.md b/apps/studio/static-data/integrations/s3_wrapper/overview.md
new file mode 100644
index 00000000000..b6952048470
--- /dev/null
+++ b/apps/studio/static-data/integrations/s3_wrapper/overview.md
@@ -0,0 +1,15 @@
+AWS S3 is an object storage service offering industry-leading scalability, data availability, security, and performance. It is read-only and supports below file formats:
+
+- CSV (with or without header line)
+- [JSON Lines](https://jsonlines.org/)
+- [Parquet](https://parquet.apache.org/)
+
+The S3 Wrapper also supports below compression algorithms:
+
+- gzip
+- bzip2
+- xz
+- zlib
+
+Note for CSV and JSONL files: currently all columns in S3 files must be defined in the foreign table and their types must be `text` type.
+Note for Parquet files: the whole Parquet file will be loaded into local memory if it is compressed, so keep the file size as small as possible.
diff --git a/apps/studio/static-data/integrations/snowflake_wrapper/overview.md b/apps/studio/static-data/integrations/snowflake_wrapper/overview.md
new file mode 100644
index 00000000000..b38a0db9b58
--- /dev/null
+++ b/apps/studio/static-data/integrations/snowflake_wrapper/overview.md
@@ -0,0 +1,3 @@
+[Snowflake](https://www.snowflake.com/) is a cloud-based data platform provided as a DaaS (Data-as-a-Service) solution with data storage and analytics service.
+
+The Snowflake Wrapper is a WebAssembly(Wasm) foreign data wrapper which allows you to read and write data from Snowflake within your Postgres database.
diff --git a/apps/studio/static-data/integrations/stripe_wrapper/overview.md b/apps/studio/static-data/integrations/stripe_wrapper/overview.md
new file mode 100644
index 00000000000..fd7aea7683f
--- /dev/null
+++ b/apps/studio/static-data/integrations/stripe_wrapper/overview.md
@@ -0,0 +1,3 @@
+[Stripe](https://stripe.com/) is an API driven payment processing and subscription management platform.
+
+The Stripe Wrapper is a foreign data wrapper which allows you to read and write data from Stripe within your Postgres database.
diff --git a/apps/studio/static-data/integrations/vault/overview.md b/apps/studio/static-data/integrations/vault/overview.md
new file mode 100644
index 00000000000..f2f0e8a7928
--- /dev/null
+++ b/apps/studio/static-data/integrations/vault/overview.md
@@ -0,0 +1,3 @@
+Vault is a Postgres extension and accompanying Supabase UI that makes it safe and easy to store encrypted secrets and other data in your database. This opens up a lot of possibilities to use Postgres in ways that go beyond what is available in a stock distribution.
+
+Under the hood, the Vault is a table of Secrets and Encryption Keys that are stored using Authenticated Encryption on disk. They are then available in decrypted form through a Postgres view so that the secrets can be used by applications from SQL. Because the secrets are stored on disk encrypted and authenticated, any backups or replication streams also preserve this encryption in a way that can't be decrypted or forged.
diff --git a/apps/studio/static-data/integrations/webhooks/overview.md b/apps/studio/static-data/integrations/webhooks/overview.md
new file mode 100644
index 00000000000..b7d1f308a90
--- /dev/null
+++ b/apps/studio/static-data/integrations/webhooks/overview.md
@@ -0,0 +1,3 @@
+Database Webhooks allow you to send real-time data from your database to another system whenever a table event occurs.
+
+You can hook into three table events: `INSERT`, `UPDATE`, and `DELETE`. All events are fired after a database row is changed.
diff --git a/apps/studio/styles/date-picker.scss b/apps/studio/styles/date-picker.scss
index f21c7c88557..7825357eb34 100644
--- a/apps/studio/styles/date-picker.scss
+++ b/apps/studio/styles/date-picker.scss
@@ -96,7 +96,7 @@
}
.react-datepicker__day--highlighted {
- @apply bg-brand-600 text-foreground-light;
+ @apply bg-overlay-hover text-foreground-light;
}
.react-datepicker__aria-live {
diff --git a/apps/studio/styles/main.scss b/apps/studio/styles/main.scss
index 76b53d65087..ad2f81cd43f 100644
--- a/apps/studio/styles/main.scss
+++ b/apps/studio/styles/main.scss
@@ -42,7 +42,7 @@ html,
body,
#__next,
.main {
- @apply bg-studio;
+ @apply bg-studio relative;
@apply text-foreground;
height: 100%;
padding: 0;
diff --git a/apps/www/app/api-v2/ticket-og/route.tsx b/apps/www/app/api-v2/ticket-og/route.tsx
index a041b7fcf61..e49db0dff72 100644
--- a/apps/www/app/api-v2/ticket-og/route.tsx
+++ b/apps/www/app/api-v2/ticket-og/route.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { ImageResponse } from '@vercel/og'
import { createClient } from '@supabase/supabase-js'
-import { themes } from '~/components/LaunchWeek/12/Ticket/ticketThemes'
+import { themes } from '~/components/LaunchWeek/13/Ticket/ticketThemes'
export const runtime = 'edge' // 'nodejs' is the default
export const dynamic = 'force-dynamic' // defaults to auto
@@ -15,21 +15,19 @@ const corsHeaders = {
const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL
-const STORAGE_URL = `${SUPABASE_URL}/storage/v1/object/public/images/launch-week/lw12`
+const STORAGE_URL = `${SUPABASE_URL}/storage/v1/object/public/images/launch-week/lw13`
// Load custom font
const FONT_URL = `${STORAGE_URL}/assets/font/CircularStd-Book.otf`
const MONO_FONT_URL = `${STORAGE_URL}/assets/font/SourceCodePro-Regular.ttf`
const font = fetch(new URL(FONT_URL, import.meta.url)).then((res) => res.arrayBuffer())
const mono_font = fetch(new URL(MONO_FONT_URL, import.meta.url)).then((res) => res.arrayBuffer())
-// const BUCKET_FOLDER_VERSION = 'v1'
const LW_TABLE = 'tickets'
const LW_MATERIALIZED_VIEW = 'tickets_view'
export async function GET(req: Request, res: Response) {
const url = new URL(req.url)
- console.log(process.env.NEXT_PUBLIC_SUPABASE_URL)
const username = url.searchParams.get('username') ?? url.searchParams.get('amp;username')
const assumePlatinum = url.searchParams.get('platinum') ?? url.searchParams.get('amp;platinum')
const userAgent = req.headers.get('user-agent')
@@ -47,14 +45,14 @@ export async function GET(req: Request, res: Response) {
await supabaseAdminClient
.from(LW_TABLE)
.update({ shared_on_twitter: 'now' })
- .eq('launch_week', 'lw12')
+ .eq('launch_week', 'lw13')
.eq('username', username)
.is('shared_on_twitter', null)
} else if (userAgent?.toLocaleLowerCase().includes('linkedin')) {
await supabaseAdminClient
.from(LW_TABLE)
.update({ shared_on_linkedin: 'now' })
- .eq('launch_week', 'lw12')
+ .eq('launch_week', 'lw13')
.eq('username', username)
.is('shared_on_linkedin', null)
}
@@ -63,9 +61,9 @@ export async function GET(req: Request, res: Response) {
const { data: user, error } = await supabaseAdminClient
.from(LW_MATERIALIZED_VIEW)
.select(
- 'id, name, ticket_number, shared_on_twitter, shared_on_linkedin, platinum, secret, role, company, location'
+ 'id, name, metadata, shared_on_twitter, shared_on_linkedin, platinum, secret, role, company, location'
)
- .eq('launch_week', 'lw12')
+ .eq('launch_week', 'lw13')
.eq('username', username)
.maybeSingle()
@@ -74,14 +72,14 @@ export async function GET(req: Request, res: Response) {
const {
name,
- ticket_number: ticketNumber,
secret,
platinum: isPlatinum,
+ metadata,
shared_on_twitter: sharedOnTwitter,
shared_on_linkedin: sharedOnLinkedIn,
} = user
- console.log(user)
+ const isDark = metadata.theme !== 'light'
const platinum = isPlatinum ?? (!!sharedOnTwitter && !!sharedOnLinkedIn) ?? false
if (assumePlatinum && !platinum)
@@ -90,65 +88,33 @@ export async function GET(req: Request, res: Response) {
// Generate image and upload to storage.
const ticketType = secret ? 'secret' : platinum ? 'platinum' : 'regular'
- const STYLING_CONFIG = {
- BACKGROUND: themes[ticketType].OG_BACKGROUND,
- FOREGROUND: themes[ticketType].TICKET_FOREGROUND,
- FOREGROUND_LIGHT: themes[ticketType].TICKET_FOREGROUND_LIGHT,
- TICKET_BORDER: themes[ticketType].TICKET_BORDER,
- TICKET_FOREGROUND: themes[ticketType].TICKET_FOREGROUND,
- TICKET_BACKGROUND: themes[ticketType].TICKET_BACKGROUND,
- TICKET_BACKGROUND_CODE: themes[ticketType].TICKET_BACKGROUND_CODE,
- TICKET_FOREGROUND_LIGHT: themes[ticketType].TICKET_FOREGROUND_LIGHT,
- BORDER: themes[ticketType].TICKET_BORDER,
- CODE_LINE_NUMBER: themes[ticketType].CODE_LINE_NUMBER,
- CODE_BASE: themes[ticketType].CODE_THEME['hljs'].color,
- CODE_HIGHLIGHT: themes[ticketType].CODE_HIGHLIGHT_BACKGROUND,
- CODE_FUNCTION: themes[ticketType].CODE_THEME['hljs'].color,
- CODE_VARIABLE: themes[ticketType].CODE_THEME['hljs'].color,
- CODE_METHOD: themes[ticketType].CODE_THEME['hljs'].color,
- CODE_EXPRESSION: themes[ticketType].CODE_THEME['hljs-keyword'].color,
- CODE_STRING: themes[ticketType].CODE_THEME['hljs-string'].color,
- CODE_NUMBER: themes[ticketType].CODE_THEME['hljs'].color,
- CODE_NULL: themes[ticketType].CODE_THEME['hljs'].color,
- JSON_KEY: themes[ticketType].CODE_THEME['hljs-attr'].color,
- }
+ const STYLING_CONFIG = (isDark?: boolean) => ({
+ TICKET_FOREGROUND: themes(isDark)[ticketType].TICKET_FOREGROUND,
+ })
const fontData = await font
const monoFontData = await mono_font
const OG_WIDTH = 1200
const OG_HEIGHT = 628
- const OG_PADDING_X = 60
- const OG_PADDING_Y = 60
- const TICKET_WIDTH = 550
- const TICKET_RATIO = 396 / 613
- const TICKET_HEIGHT = TICKET_WIDTH / TICKET_RATIO
- const TICKET_POS_TOP = OG_PADDING_Y
- const TICKET_POS_LEFT = 540
- const LOGO_WIDTH = 40
- const LOGO_RATIO = 436 / 449
+ const USERNAME_LEFT = 400
+ const USERNAME_BOTTOM = 100
+ const USERNAME_WIDTH = 400
const DISPLAY_NAME = name || username
- const FIRST_NAME = DISPLAY_NAME?.split(' ')[0]
- const BACKGROUND = {
+ const BACKGROUND = (isDark?: boolean) => ({
regular: {
- LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png`,
- BACKGROUND_GRID: `${STORAGE_URL}/assets/bg-dark.png?t=2024-07-26T11%3A13%3A36.534Z`,
+ LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png?v4`,
+ BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg-regular-${isDark ? 'dark' : 'light'}.png?v4`,
},
platinum: {
- LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png`,
- BACKGROUND_GRID: `${STORAGE_URL}/assets/bg-dark.png?t=2024-07-26T11%3A13%3A36.534Z`,
+ LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png?v4`,
+ BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg-platinum.png?v4`,
},
secret: {
- LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon-white.png`,
- BACKGROUND_GRID: `${STORAGE_URL}/assets/bg-light.png`,
+ LOGO: `${STORAGE_URL}/assets/supabase/supabase-logo-icon.png?v4`,
+ BACKGROUND_IMG: `${STORAGE_URL}/assets/ticket-og-bg-secret.png?v4`,
},
- }
-
- const lineNumberStyle = {
- paddingLeft: 24,
- width: 46,
- color: STYLING_CONFIG.CODE_LINE_NUMBER,
- }
+ })
const generatedTicketImage = new ImageResponse(
(
@@ -159,9 +125,8 @@ export async function GET(req: Request, res: Response) {
height: '628px',
position: 'relative',
fontFamily: '"Circular"',
- color: STYLING_CONFIG.FOREGROUND,
- backgroundColor: STYLING_CONFIG.BACKGROUND,
overflow: 'hidden',
+ color: STYLING_CONFIG(isDark).TICKET_FOREGROUND,
display: 'flex',
flexDirection: 'column',
padding: '60px',
@@ -170,348 +135,50 @@ export async function GET(req: Request, res: Response) {
>
{/* Background */}
-
- Launch Week 12
-
- Ticket
-
-
- {/* Request code snippet */}
-
-
- 1
- 2
- 3
- 4
- 5
-
-
-
- await {' '}
-
- supabase
-
-
-
- .
- from
- (
- 'tickets'
- )
-
-
- .
- select
- (
- '*'
- )
-
-
- .
- eq
- (
- 'username'
- ,
- '{username}'
- )
-
-
- .
- single
- (
- )
-
-
-
- {/* Response Json */}
-
-
- TICKET RESPONSE
-
-
-
- 1
- {
-
-
- 2
-
-
- "data"
-
- :
- {
-
-
-
-
- 3
-
-
- "name"
-
- :
-
- "{name}"
-
- ,
-
-
-
- 4
-
-
- "username"
-
- :
-
- "{username}"
-
- ,
-
-
-
- 6
-
-
- "ticket_number"
-
- :
-
- "{ticketNumber}"
-
- ,
-
-
-
- 7
-
-
- "role"
-
- :
- {user.role ? (
-
- "{user.role}"
-
- ) : (
-
- null
-
- )}
- ,
-
-
-
- 8
-
-
- "company"
-
- :
- {user.company ? (
-
- "{user.company}"
-
- ) : (
-
- null
-
- )}
- ,
-
-
-
- 9
-
-
- "location"
-
- :
- {user.location ? (
-
- "{user.location}"
-
- ) : (
-
- null
-
- )}
- ,
-
-
-
-
- 10
- },
-
-
- 11
-
-
- "error"
-
- :
-
- null
-
-
-
-
- 12
- }
-
-
-
-
-
-
-
-
-
-
- Join {FIRST_NAME} for
-
-
- Launch Week 12
-
-
- August 12-16 / 7AM PT
+ {DISPLAY_NAME}
@@ -546,7 +213,7 @@ export async function GET(req: Request, res: Response) {
// Upload image to storage.
const { error: storageError } = await supabaseAdminClient.storage
.from('images')
- .upload(`launch-week/lw12/og/${ticketType}/${username}.png`, generatedTicketImage.body!, {
+ .upload(`launch-week/lw13/og/${ticketType}/${username}.png`, generatedTicketImage.body!, {
contentType: 'image/png',
// cacheControl: `${60 * 60 * 24 * 7}`,
cacheControl: `0`,
diff --git a/apps/www/components/Events/EventListItem.tsx b/apps/www/components/Events/EventListItem.tsx
index 432f63ba301..8ff6c0bbf8e 100644
--- a/apps/www/components/Events/EventListItem.tsx
+++ b/apps/www/components/Events/EventListItem.tsx
@@ -36,12 +36,12 @@ const EventListItem = ({ event }: Props) => {
-
+
{event.title}
-
+
{event.categories && (
{event.categories.map(
@@ -61,10 +61,20 @@ const EventListItem = ({ event }: Props) => {
}
const EventDate: React.FC<{ event: PostTypes }> = ({ event }) => (
-
- {dayjs(event.date).tz(event.timezone).format('DD MMM YYYY')}
+
+ {event.type === 'event'
+ ? dayjs(event.date).format('DD MMM YYYY')
+ : dayjs(event.date).tz(event.timezone).format('DD MMM YYYY')}
{dayjs(event.date).tz(event.timezone).format('hA')}
+
+ {event.type === 'event'
+ ? dayjs(event.date).get('minutes') > 0
+ ? dayjs(event.date).format('h:mmA')
+ : dayjs(event.date).format('hA')
+ : dayjs(event.date).get('minutes') > 0
+ ? dayjs(event.date).tz(event.timezone).format('h:mmA')
+ : dayjs(event.date).tz(event.timezone).format('hA')}
+
diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx
index 64951f276a5..b8714b4edd7 100644
--- a/apps/www/components/Hero/Hero.tsx
+++ b/apps/www/components/Hero/Hero.tsx
@@ -3,9 +3,10 @@ import { useRouter } from 'next/router'
import { useTelemetryProps } from 'common/hooks/useTelemetryProps'
import gaEvents from '~/lib/gaEvents'
import Telemetry, { TelemetryEvent } from '~/lib/telemetry'
-
import { Button } from 'ui'
+
import SectionContainer from '~/components/Layouts/SectionContainer'
+import AnnouncementBadge from '~/components/Announcement/Badge'
const Hero = () => {
const router = useRouter()
@@ -22,6 +23,13 @@ const Hero = () => {
+
Build in a weekend
Scale to millions
diff --git a/apps/www/components/LaunchWeek/12/Ticket/LW12Game.tsx b/apps/www/components/LaunchWeek/12/Ticket/LW12Game.tsx
deleted file mode 100644
index 5a4d7a04feb..00000000000
--- a/apps/www/components/LaunchWeek/12/Ticket/LW12Game.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn } from 'ui'
-import { SITE_ORIGIN } from '~/lib/constants'
-import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
-import { VALID_KEYS } from '~/components/LaunchWeek/hooks/useLwGame'
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'
-
-const REGEXP_ONLY_CHARS = '^[a-zA-Z]+$'
-
-const COMPLIMENTS = [
- 'Congratulations!',
- 'You won!',
- 'Hurray!',
- 'Great job!',
- 'Nice job!',
- "That's right!",
-]
-
-interface Props {
- setIsGameMode: Dispatch>
-}
-
-const LWXGame = ({ setIsGameMode }: Props) => {
- const { supabase, userData: user } = useConfData()
- const phrase = process.env.NEXT_PUBLIC_LW_GAME_WORD ?? 'its_just_postgres'
- const inputRef = useRef(null)
- const winningPhrase = phrase?.split('_').map((word) => word.split(''))
- const phraseLength = phrase?.replaceAll('_', '').split('').length
- const [gameState, setGameState] = useState<'playing' | 'winner' | 'loading'>('playing')
- const [hasKeyDown, setHasKeyDown] = useState(false)
- const [value, setValue] = useState('')
- const hasWon = gameState === 'winner'
- const winningCompliment = useMemo(
- () => COMPLIMENTS[Math.floor(Math.random() * COMPLIMENTS.length)],
- []
- )
-
- function onKeyDown(event: KeyboardEvent) {
- const newKey = event.key.toLocaleLowerCase()
-
- if (!(event.metaKey || event.ctrlKey) && VALID_KEYS.includes(newKey)) {
- setHasKeyDown(true)
- }
-
- setTimeout(() => {
- setHasKeyDown(false)
- }, 100)
- }
-
- useEffect(() => {
- window.addEventListener('keydown', onKeyDown)
- return () => window.removeEventListener('keydown', onKeyDown)
- }, [onKeyDown])
-
- async function handleGithubSignIn() {
- const redirectTo = `${SITE_ORIGIN}/launch-week/${
- user.username ? '?referral=' + user.username : ''
- }`
-
- supabase?.auth.signInWithOAuth({
- provider: 'github',
- options: {
- redirectTo,
- },
- })
- }
- const handleClaimTicket = async (e: any) => {
- e.preventDefault()
-
- setGameState('loading')
-
- if (supabase) {
- if (user.id) {
- await supabase
- .from('tickets')
- .update({ game_won_at: new Date() })
- .eq('launch_week', 'lw12')
- .eq('username', user.username)
- .then((res) => {
- if (res.error) return console.log('error', res.error)
- setIsGameMode(false)
- })
-
- await fetch(`/api-v2/ticket-og?username=${user.username}&secret=true`)
- } else {
- localStorage.setItem('lw12_secret', 'true')
-
- handleGithubSignIn()
- }
- }
- }
-
- function handleIndexCount(word_idx: number, char_idx: number) {
- let index = -1
-
- for (let i = 0; i < word_idx + 1; i++) {
- const word = winningPhrase[i]
- for (let j = 0; j < word.length; j++) {
- if (i < word_idx || j <= char_idx) index++
- }
- }
-
- return index
- }
-
- if (gameState === 'loading')
- return (
-
- )
-
- return (
-
- )
-}
-
-export default LWXGame
diff --git a/apps/www/components/LaunchWeek/12/Ticket/Ticket.tsx b/apps/www/components/LaunchWeek/12/Ticket/Ticket.tsx
deleted file mode 100644
index 07f022ad6cf..00000000000
--- a/apps/www/components/LaunchWeek/12/Ticket/Ticket.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { codeBlock } from 'common-tags'
-import { CodeBlock } from 'ui'
-import { range } from 'lodash'
-import { Pencil, X } from 'lucide-react'
-import Tilt from 'vanilla-tilt'
-import { useParams } from 'common'
-
-import Panel from '~/components/Panel'
-import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
-import TicketCustomizationForm from './TicketCustomizationForm'
-import { themes as ticketThemes } from './ticketThemes'
-
-export default function Ticket() {
- const ticketRef = useRef(null)
- const { userData: user, showCustomizationForm, setShowCustomizationForm } = useConfData()
- const { platinum = false, secret: hasSecretTicket, ticket_number: ticketNumber, username } = user
- const params = useParams()
- const [responseTime, setResponseTime] = useState<{ start: number; end: number | undefined }>({
- start: performance.now(),
- end: undefined,
- })
- const sharePage = !!params.username
- const ticketType = hasSecretTicket ? 'secret' : platinum ? 'platinum' : 'regular'
- const TICKET_THEME = ticketThemes[ticketType]
-
- function handleCustomizeTicket() {
- setShowCustomizationForm && setShowCustomizationForm(!showCustomizationForm)
- }
-
- useEffect(() => {
- user && setResponseTime((prev) => ({ ...prev, end: performance.now() }))
- }, [user.id])
-
- useEffect(() => {
- if (ticketRef.current && !window.matchMedia('(pointer: coarse)').matches) {
- Tilt.init(ticketRef.current, {
- glare: true,
- max: 3,
- gyroscope: true,
- 'max-glare': 0.1,
- 'full-page-listening': true,
- })
- }
- }, [ticketRef])
-
- const code = codeBlock`await supabase
- .from('tickets')
- .select('*')
- .eq('launch_week', 'lw12')
- .eq('username', '${username}')
- .single()
-`
-
- const HAS_ROLE = true // user.role
- const HAS_COMPANY = true // user.company
- const HAS_LOCATION = true // user.location
-
- // Keep following indentation for proper json layout with conditionals
- const responseJson = codeBlock`
-{
- "data": {
- "name": "${user.name}",
- "username": "${username}",
- "ticket_number": "${ticketNumber}",
- "role": ${user.role ? `"${user.role}"` : 'null'},
- "company": ${user.company ? `"${user.company}"` : 'null'},
- "location": ${user.location ? `"${user.location}"` : 'null'},
- },
- "error": null
-}
-`
-
- function getLinesToHighlight() {
- let arr: any[] = range(0, 3)
- const STARTING_LINE = 3
-
- if (HAS_ROLE) arr.push(null)
- if (HAS_COMPANY) arr.push(null)
- if (HAS_LOCATION) arr.push(null)
-
- return arr.map((_, i) => i + STARTING_LINE)
- }
-
- const LINES_TO_HIGHLIGHT = getLinesToHighlight()
-
- const resTime = (responseTime.end! - responseTime.start).toFixed()
-
- return (
-
-
-
-
- Launch Week 12 Ticket
-
-
- {code}
-
-
-
-
- TICKET RESPONSE
-
- {user && (
-
- {responseJson}
-
- )}
- {/*
- {resTime}ms Response time
- */}
-
- {/* Edit hover button */}
- {!sharePage && (
- <>
-
- {!showCustomizationForm ?
:
}
-
- {!sharePage && (
-
- )}
-
-
-
-
- Share your ticket to increase your chances of winning a{' '}
-
- Wandrd backpack
- {' '}
- and other limited swag.
-
-
- {hasSecretTicket && Secret ticket }
- {hasPlatinumTicket && Platinum ticket }
-
- )
-}
diff --git a/apps/www/components/LaunchWeek/12/Ticket/TicketCustomizationForm.tsx b/apps/www/components/LaunchWeek/12/Ticket/TicketCustomizationForm.tsx
deleted file mode 100644
index 6b1b58e65f3..00000000000
--- a/apps/www/components/LaunchWeek/12/Ticket/TicketCustomizationForm.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Button, Input, cn } from 'ui'
-import { Check } from 'lucide-react'
-import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
-import { useBreakpoint, useDebounce } from 'common'
-import { useKey } from 'react-use'
-
-const TicketCustomizationForm = ({ className }: { className?: string }) => {
- const isMobile = useBreakpoint()
- const {
- supabase,
- userData: user,
- showCustomizationForm,
- setShowCustomizationForm,
- } = useConfData()
- const defaultFormValues = {
- role: user.role,
- company: user.company,
- location: user.location,
- }
- const [formData, setFormData] = useState(defaultFormValues)
- const [formState, setFormState] = useState<'idle' | 'saved' | 'saving' | 'error'>('idle')
- const IS_SAVING = formState === 'saving'
- const IS_SAVED = formState === 'saved'
- const HAS_ERROR = formState === 'error'
-
- useKey('Escape', () => setShowCustomizationForm && setShowCustomizationForm(false))
-
- const handleInputChange = (name: string, value: string | boolean) => {
- setFormData((prev) => ({ ...prev, [name]: value }))
- }
-
- const handleFormSubmit = async () => {
- setFormState('saving')
- const payload = formData
-
- if (supabase) {
- await supabase
- .from('tickets')
- .update(payload)
- .eq('launch_week', 'lw12')
- .eq('username', user.username)
- .then((res) => {
- if (res.error) return setFormState('error')
- setFormState('saved')
- setTimeout(() => {
- setFormState('idle')
- }, 1200)
- })
- }
- }
-
- const debouncedChangeHandler = useDebounce(handleFormSubmit, 1200)
-
- useEffect(() => {
- return () => setShowCustomizationForm && setShowCustomizationForm(false)
- }, [])
-
- return (
-
- )
-}
-
-export default TicketCustomizationForm
diff --git a/apps/www/components/LaunchWeek/12/Ticket/TicketHeader.tsx b/apps/www/components/LaunchWeek/12/Ticket/TicketHeader.tsx
deleted file mode 100644
index 1cbf1f371f4..00000000000
--- a/apps/www/components/LaunchWeek/12/Ticket/TicketHeader.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-
-interface Props {
- golden?: boolean
-}
-
-export default function TicketHeader({ golden = false }: Props) {
- return (
-
- Launch Week X
-
- )
-}
diff --git a/apps/www/components/LaunchWeek/12/Ticket/TicketProfile.tsx b/apps/www/components/LaunchWeek/12/Ticket/TicketProfile.tsx
deleted file mode 100644
index 4313d9338ad..00000000000
--- a/apps/www/components/LaunchWeek/12/Ticket/TicketProfile.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Image from 'next/image'
-import { cn } from 'ui'
-import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
-
-export default function TicketProfile({ className }: { className?: string }) {
- const { userData: user } = useConfData()
- const { username, name, metadata, platinum, secret: hasSecretTicket } = user
- const hasLightTicket = platinum
- const profileImg = `https://github.com/${username}.png?size=60`
-
- const hideAvatar = !!metadata?.hideAvatar
- const HAS_ROLE = !!metadata?.role
- const HAS_COMPANY = !!metadata?.company
- const HAS_NO_META = !HAS_ROLE && !HAS_COMPANY
-
- return (
-
-
- {!hideAvatar && profileImg && (
-
- )}
-
{name || username || 'Your Name'}
- {HAS_NO_META && username && (
-
- @{username}
-
- )}
-
- {HAS_ROLE && {metadata?.role} }
- {HAS_COMPANY && (
-
- {HAS_ROLE && at }
- {metadata?.company}
-
- )}
-
-
-
(null)
+ const [hoveredCells, setHoveredCells] = useState>(new Map())
+ const animationFrameRef = useRef()
+
+ // These states will be managed via ref as they're mutated within event listeners
+ const usersRef = useRef<{ [key: string]: User }>({})
+ const mousePositionRef = useRef()
+
+ const joinTimestampRef = useRef()
+ const [mousePosition, _setMousePosition] = useState()
+
+ const [isInitialStateSynced, setIsInitialStateSynced] = useState(false)
+ const [roomId, setRoomId] = useState(undefined)
+ const [users, setUsers] = useState<{ [key: string]: User }>({})
+
+ const setMousePosition = (coordinates: Coordinates) => {
+ // if (!mousePositionRef.current) return
+ mousePositionRef.current = coordinates
+ _setMousePosition(coordinates)
+ }
+
+ const mapInitialUsers = (userChannel: RealtimeChannel, roomId: string) => {
+ const state = userChannel.presenceState()
+ const _users = state[roomId]
+
+ if (!_users) return
+
+ if (_users) {
+ setUsers((existingUsers) => {
+ const updatedUsers = _users.reduce(
+ (acc: { [key: string]: User }, { user_id: userId }: any, index: number) => {
+ acc[userId] = existingUsers[userId] || {
+ x: 0,
+ y: 0,
+ }
+ return acc
+ },
+ {}
+ )
+ usersRef.current = updatedUsers
+ return updatedUsers
+ })
+ }
+ }
+
+ useEffect(() => {
+ let roomChannel: RealtimeChannel
+
+ if (!roomId) {
+ joinTimestampRef.current = performance.now()
+
+ /*
+ Client is joining 'rooms' channel to examine existing rooms and their users
+ and then the channel is removed once a room is selected
+ */
+ roomChannel = supabase?.channel('lw13_rooms')!
+
+ roomChannel
+ .on(REALTIME_LISTEN_TYPES.PRESENCE, { event: REALTIME_PRESENCE_LISTEN_EVENTS.SYNC }, () => {
+ let newRoomId
+ const state = roomChannel.presenceState()
+
+ // User will be assigned an existing room with the fewest users
+ if (!newRoomId) {
+ const [mostVacantRoomId, users] =
+ Object.entries(state).sort(([, a], [, b]) => a.length - b.length)[0] ?? []
+
+ if (users && users.length < MAX_ROOM_USERS) {
+ newRoomId = mostVacantRoomId
+ }
+ }
+
+ // Generate an id if no existing rooms are available
+ setRoomId(newRoomId ?? uuidv4())
+ })
+ .subscribe()
+ } else {
+ // When user has been placed in a room
+ roomChannel = supabase?.channel('lw13_rooms', { config: { presence: { key: roomId } } })!
+ roomChannel.on(
+ REALTIME_LISTEN_TYPES.PRESENCE,
+ { event: REALTIME_PRESENCE_LISTEN_EVENTS.SYNC },
+ () => {
+ setIsInitialStateSynced(true)
+ mapInitialUsers(roomChannel, roomId)
+ }
+ )
+ roomChannel.subscribe(async (status: `${REALTIME_SUBSCRIBE_STATES}`) => {
+ if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED)
+ await roomChannel.track({ user_id: userId })
+ })
+ }
+
+ // Must properly remove subscribed channel
+ return () => {
+ roomChannel && supabase?.removeChannel(roomChannel)
+ }
+ }, [supabase, roomId])
+
+ useEffect(() => {
+ // if (!roomId || !isInitialStateSynced) return
+
+ let messageChannel: RealtimeChannel
+ let setMouseEvent: (e: MouseEvent) => void = () => {}
+
+ messageChannel = supabase?.channel(`chat_messages:${roomId}`)!
+
+ // Listen for cursor positions from other users in the room
+ messageChannel.on(
+ REALTIME_LISTEN_TYPES.BROADCAST,
+ { event: 'POS' },
+ (payload: Payload<{ user_id: string } & Coordinates>) => {
+ setUsers((users) => {
+ const userId = payload!.payload!.user_id
+ const existingUser = users[userId]
+
+ if (existingUser) {
+ const x =
+ (payload?.payload?.x ?? 0) - X_THRESHOLD > window.innerWidth
+ ? window.innerWidth - X_THRESHOLD
+ : payload?.payload?.x
+ const y =
+ (payload?.payload?.y ?? 0 - Y_THRESHOLD) > window.innerHeight
+ ? window.innerHeight - Y_THRESHOLD
+ : payload?.payload?.y
+
+ users[userId] = { ...existingUser, ...{ x, y } }
+ users = cloneDeep(users)
+ }
+
+ return users
+ })
+ }
+ )
+
+ messageChannel?.subscribe((status: `${REALTIME_SUBSCRIBE_STATES}`) => {
+ // Lodash throttle will be removed once realtime-js client throttles on the channel level
+ const sendMouseBroadcast = throttle(({ x, y }) => {
+ messageChannel
+ .send({
+ type: 'broadcast',
+ event: 'POS',
+ payload: { user_id: userId, x, y },
+ })
+ .catch(() => {})
+ }, 1000 / MAX_EVENTS_PER_SECOND)
+
+ setMouseEvent = (e: MouseEvent) => {
+ const top = window.pageYOffset || document.documentElement.scrollTop
+ const [x, y] = [e.clientX, e.clientY - Y_THRESHOLD + top]
+ if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {
+ sendMouseBroadcast({ x, y })
+ }
+ setMousePosition({ x, y })
+ }
+
+ window.addEventListener('mousemove', setMouseEvent)
+ })
+
+ return () => {
+ window.removeEventListener('mousemove', setMouseEvent)
+ messageChannel && supabase?.removeChannel(messageChannel)
+ }
+ }, [roomId, isInitialStateSynced])
+
+ const setCellHovered = useCallback((key: string, isHovered: boolean, color: string) => {
+ setHoveredCells((prev) => {
+ const newState = new Map(prev)
+ if (isHovered) {
+ newState.set(key, { isHovered: true, fadeStartTime: null, color })
+ } else {
+ const existingCell = newState.get(key)
+ if (existingCell && existingCell.isHovered) {
+ newState.set(key, {
+ isHovered: false,
+ fadeStartTime: Date.now() + HOVER_DURATION,
+ color,
+ })
+ }
+ }
+
+ return newState
+ })
+ }, [])
+
+ const drawGrid = useCallback(
+ (ctx: CanvasRenderingContext2D, currentTime: number) => {
+ ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
+ ctx.lineWidth = 0.15
+ ctx.strokeStyle = INTERACTIVE_GRID_COLORS(isDarkTheme).GRID_STROKE
+
+ for (let x = 0; x < GRID_SIZE; x++) {
+ for (let y = 0; y < GRID_SIZE; y++) {
+ const cellX = x * CELL_SIZE
+ const cellY = y * CELL_SIZE
+
+ ctx.strokeRect(cellX, cellY, CELL_SIZE, CELL_SIZE)
+
+ const cellKey = `${x},${y}`
+ const cellState = hoveredCells.get(cellKey)
+
+ if (cellState) {
+ let opacity = 0.5
+ if (!cellState.isHovered && cellState.fadeStartTime) {
+ const fadeElapsed = currentTime - cellState.fadeStartTime
+ if (fadeElapsed >= 0) {
+ opacity = Math.max(0, 0.5 * (1 - fadeElapsed / FADE_DURATION))
+ if (opacity === 0) {
+ setHoveredCells((prev) => {
+ const newState = new Map(prev)
+ newState.delete(cellKey)
+ return newState
+ })
+ }
+ }
+ }
+ ctx.fillStyle = `rgba(${parseInt(cellState.color.slice(1, 3), 16)}, ${parseInt(cellState.color.slice(3, 5), 16)}, ${parseInt(cellState.color.slice(5, 7), 16)}, ${opacity})`
+ ctx.fillRect(cellX, cellY, CELL_SIZE, CELL_SIZE)
+ }
+ }
+ }
+ },
+ [hoveredCells, isDarkTheme]
+ )
+
+ const animate = useCallback(() => {
+ const canvas = canvasRef.current
+ if (!canvas) return
+
+ const ctx = canvas.getContext('2d')
+ if (!ctx) return
+
+ const currentTime = Date.now()
+ drawGrid(ctx, currentTime)
+
+ animationFrameRef.current = requestAnimationFrame(animate)
+ }, [drawGrid])
+
+ useEffect(() => {
+ animate()
+ return () => {
+ if (animationFrameRef.current) {
+ cancelAnimationFrame(animationFrameRef.current)
+ }
+ }
+ }, [animate])
+
+ const handleMouseMove = useCallback(
+ (e: React.MouseEvent) => {
+ handleUserTrail(e.nativeEvent.offsetX, e.nativeEvent.offsetY)
+ },
+ [hoveredCells, setCellHovered, isDarkTheme]
+ )
+
+ const handleUserTrail = (
+ xPos: number,
+ yPos: number,
+ color = INTERACTIVE_GRID_COLORS(isDarkTheme).CURRENT_USER_HOVER
+ ) => {
+ const x = Math.floor(xPos / CELL_SIZE)
+ const y = Math.floor(yPos / CELL_SIZE)
+
+ const cellKey = `${x},${y}`
+
+ if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE) {
+ setCellHovered(cellKey, true, color)
+
+ hoveredCells.forEach((_, key) => {
+ if (key !== cellKey) {
+ setCellHovered(key, false, color)
+ }
+ })
+ }
+ }
+
+ const handleMouseLeave = useCallback(() => {
+ hoveredCells.forEach((_, key) => {
+ setCellHovered(key, false, INTERACTIVE_GRID_COLORS(isDarkTheme).CURRENT_USER_HOVER)
+ })
+ }, [hoveredCells, setCellHovered, userData])
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/13/Multiplayer/CanvasSingleMode.tsx b/apps/www/components/LaunchWeek/13/Multiplayer/CanvasSingleMode.tsx
new file mode 100644
index 00000000000..0a586f0c2a1
--- /dev/null
+++ b/apps/www/components/LaunchWeek/13/Multiplayer/CanvasSingleMode.tsx
@@ -0,0 +1,219 @@
+'use client'
+
+import { useEffect, useRef, useState, useCallback } from 'react'
+import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
+import { v4 as uuidv4 } from 'uuid'
+import { useTheme } from 'next-themes'
+import Cursor from './Cursor'
+import { getColor } from './randomColor'
+import { Coordinates } from './types'
+import {
+ HOVER_DURATION,
+ CANVAS_WIDTH,
+ CANVAS_HEIGHT,
+ GRID_SIZE,
+ CELL_SIZE,
+ FADE_DURATION,
+ Y_THRESHOLD,
+} from './CanvasPartyMode'
+
+interface CellState {
+ isHovered: boolean
+ fadeStartTime: number | null
+ color: string
+}
+
+export default function InteractiveGridSingle() {
+ const { supabase, userData } = useConfData()
+ const { resolvedTheme } = useTheme()
+ const isDarkTheme = resolvedTheme?.includes('dark')!
+ const canvasRef = useRef(null)
+ const [hoveredCells, setHoveredCells] = useState>(new Map())
+ const [userColors, setUserColors] = useState>({})
+ const animationFrameRef = useRef()
+ const [mousePosition, _setMousePosition] = useState()
+ const mousePositionRef = useRef()
+
+ const currentUserIdRef = useRef(userData?.id || uuidv4())
+ const CURRENT_USER_ID = currentUserIdRef.current
+
+ const setMousePosition = (coordinates: Coordinates) => {
+ mousePositionRef.current = coordinates
+ _setMousePosition(coordinates)
+ }
+
+ const INTERACTIVE_GRID_COLORS = (isDark: boolean) => ({
+ GRID_STROKE: isDark ? '#242424' : '#EDEDED',
+ CURRENT_USER_HOVER: isDark ? '#242424' : '#d3d3d3',
+ })
+
+ const getUserColor = useCallback(
+ (userId: string | undefined) => {
+ if (!userId) {
+ return INTERACTIVE_GRID_COLORS(isDarkTheme).CURRENT_USER_HOVER // fallback color
+ }
+
+ if (userColors[userId]) {
+ return userColors[userId]
+ }
+
+ const colors = [INTERACTIVE_GRID_COLORS(isDarkTheme).CURRENT_USER_HOVER]
+ const color = colors[userId.charCodeAt(0) % colors.length]
+
+ setUserColors((prev) => ({ ...prev, [userId]: color }))
+ return color
+ },
+ [userColors]
+ )
+
+ const setCellHovered = useCallback((key: string, isHovered: boolean, color: string) => {
+ setHoveredCells((prev) => {
+ const newState = new Map(prev)
+ if (isHovered) {
+ newState.set(key, { isHovered: true, fadeStartTime: null, color })
+ } else {
+ const existingCell = newState.get(key)
+ if (existingCell && existingCell.isHovered) {
+ newState.set(key, {
+ isHovered: false,
+ fadeStartTime: Date.now() + HOVER_DURATION,
+ color,
+ })
+ }
+ }
+
+ return newState
+ })
+ }, [])
+
+ const drawGrid = useCallback(
+ (ctx: CanvasRenderingContext2D, currentTime: number) => {
+ ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
+ ctx.lineWidth = 0.15
+ ctx.strokeStyle = INTERACTIVE_GRID_COLORS(isDarkTheme).GRID_STROKE
+
+ for (let x = 0; x < GRID_SIZE; x++) {
+ for (let y = 0; y < GRID_SIZE; y++) {
+ const cellX = x * CELL_SIZE
+ const cellY = y * CELL_SIZE
+
+ ctx.strokeRect(cellX, cellY, CELL_SIZE, CELL_SIZE)
+
+ const cellKey = `${x},${y}`
+ const cellState = hoveredCells.get(cellKey)
+ if (cellState) {
+ let opacity = 0.5
+ if (!cellState.isHovered && cellState.fadeStartTime) {
+ const fadeElapsed = currentTime - cellState.fadeStartTime
+ if (fadeElapsed >= 0) {
+ opacity = Math.max(0, 0.5 * (1 - fadeElapsed / FADE_DURATION))
+ if (opacity === 0) {
+ setHoveredCells((prev) => {
+ const newState = new Map(prev)
+ newState.delete(cellKey)
+ return newState
+ })
+ }
+ }
+ }
+ ctx.fillStyle = `rgba(${parseInt(cellState.color.slice(1, 3), 16)}, ${parseInt(cellState.color.slice(3, 5), 16)}, ${parseInt(cellState.color.slice(5, 7), 16)}, ${opacity})`
+ ctx.fillRect(cellX, cellY, CELL_SIZE, CELL_SIZE)
+ }
+ }
+ }
+ },
+ [hoveredCells, getUserColor, isDarkTheme]
+ )
+
+ const animate = useCallback(() => {
+ const canvas = canvasRef.current
+ if (!canvas) return
+
+ const ctx = canvas.getContext('2d')
+ if (!ctx) return
+
+ const currentTime = Date.now()
+ drawGrid(ctx, currentTime)
+
+ animationFrameRef.current = requestAnimationFrame(animate)
+ }, [drawGrid])
+
+ useEffect(() => {
+ animate()
+ return () => {
+ if (animationFrameRef.current) {
+ cancelAnimationFrame(animationFrameRef.current)
+ }
+ }
+ }, [animate])
+
+ const handleMouseMove = useCallback(
+ (e: React.MouseEvent) => {
+ const x = Math.floor(e.nativeEvent.offsetX / CELL_SIZE)
+ const y = Math.floor(e.nativeEvent.offsetY / CELL_SIZE)
+ const cellKey = `${x},${y}`
+ const userColor = getUserColor(CURRENT_USER_ID)
+
+ if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE) {
+ setCellHovered(cellKey, true, userColor)
+
+ hoveredCells.forEach((_, key) => {
+ if (key !== cellKey) {
+ setCellHovered(key, false, userColor)
+ }
+ })
+ }
+ },
+ [hoveredCells, setCellHovered, getUserColor]
+ )
+
+ const handleMouseLeave = useCallback(() => {
+ hoveredCells.forEach((_, key) => {
+ setCellHovered(key, false, getUserColor(CURRENT_USER_ID))
+ })
+ }, [hoveredCells, setCellHovered, getUserColor, userData])
+
+ useEffect(() => {
+ let setMouseEvent: (e: MouseEvent) => void = () => {}
+
+ setMouseEvent = (e: MouseEvent) => {
+ const top = window.pageYOffset || document.documentElement.scrollTop
+ const [x, y] = [e.clientX, e.clientY - Y_THRESHOLD + top]
+ setMousePosition({ x, y })
+ }
+
+ window.addEventListener('mousemove', setMouseEvent)
+
+ return () => {
+ window.removeEventListener('mousemove', setMouseEvent)
+ }
+ }, [supabase])
+
+ return (
+
+
+ )
+}
+
+function onlyUnique(value: any, index: number, array: any[]) {
+ return array.indexOf(value) === index
+}
diff --git a/apps/www/components/LaunchWeek/13/Multiplayer/Chatbox.tsx b/apps/www/components/LaunchWeek/13/Multiplayer/Chatbox.tsx
new file mode 100644
index 00000000000..3c04542699c
--- /dev/null
+++ b/apps/www/components/LaunchWeek/13/Multiplayer/Chatbox.tsx
@@ -0,0 +1,47 @@
+// import { IconLoader } from '@supabase/ui'
+import { FC, RefObject } from 'react'
+import { Message } from './types'
+
+interface Props {
+ messages: Message[]
+ chatboxRef: RefObject
+ messagesInTransit: string[]
+ areMessagesFetched: boolean
+}
+
+const Chatbox: FC = ({ messages, chatboxRef, messagesInTransit, areMessagesFetched }) => {
+ return (
+
+
+ {!areMessagesFetched ? (
+
+ {/*
*/}
+
Loading messages
+
+ ) : messages.length === 0 && messagesInTransit.length === 0 ? (
+
+ Type anything to start chatting 🥳
+
+ ) : (
+
+ )}
+ {messages.map((message) => (
+
+ {message.message}
+
+ ))}
+ {messagesInTransit.map((message, idx: number) => (
+
+ {message}
+
+ ))}
+ {/*
*/}
+
+
= ({
+ x,
+ y,
+ color,
+ hue,
+ message,
+ isCurrentUser,
+ isTyping,
+ isCancelled,
+ isLocalClient,
+ onUpdateMessage = () => {},
+}) => {
+ const _isLocalClient = !x || !y
+ const inputRef = useRef() as any
+ const timeoutRef = useRef() as any
+ const chatBubbleRef = useRef() as any
+ const isMobile = useBreakpoint('sm')
+
+ const [isTouchDevice, setIsTouchDevice] = useState(false)
+ const [hideInput, setHideInput] = useState(false)
+ const [showMessageBubble, setShowMessageBubble] = useState(false)
+
+ useEffect(() => {
+ if (isTyping) {
+ setShowMessageBubble(true)
+ if (timeoutRef.current) clearTimeout(timeoutRef.current)
+
+ if (isLocalClient) {
+ if (inputRef.current) inputRef.current.focus()
+ setHideInput(false)
+ }
+ } else {
+ if (!message || isCancelled) {
+ setShowMessageBubble(false)
+ } else {
+ if (timeoutRef.current) clearTimeout(timeoutRef.current)
+ if (isLocalClient) setHideInput(true)
+ const timeoutId = setTimeout(() => {
+ setShowMessageBubble(false)
+ }, MAX_DURATION)
+ timeoutRef.current = timeoutId
+ }
+ }
+ }, [isLocalClient, isTyping, isCancelled, message, inputRef])
+
+ useEffect(() => {
+ // touchscreen
+ if (window.matchMedia('(pointer: coarse)').matches && isMobile) {
+ setIsTouchDevice(true)
+ }
+ }, [isMobile])
+
+ if (isCurrentUser && isTouchDevice) return null
+
+ return (
+ <>
+ {!_isLocalClient && (
+
+
+ )}
+
+
+ )
+}
+
+export default Cursor
diff --git a/apps/www/components/LaunchWeek/13/Multiplayer/randomColor.ts b/apps/www/components/LaunchWeek/13/Multiplayer/randomColor.ts
new file mode 100644
index 00000000000..c650cbcb2f7
--- /dev/null
+++ b/apps/www/components/LaunchWeek/13/Multiplayer/randomColor.ts
@@ -0,0 +1,32 @@
+import { sampleSize } from 'lodash'
+
+const colors = {
+ brand: {
+ bg: 'hsl(var(--brand-default))',
+ hue: 'hsl(var(--brand-500))',
+ },
+ gray: {
+ bg: 'hsl(var(--foreground-muted))',
+ hue: 'hsl(var(--background-surface-100))',
+ },
+}
+
+export const getRandomUniqueColor = (currentColors: string[]) => {
+ const colorNames = Object.values(colors).map((col) => col.bg)
+ const uniqueColors = colorNames.filter((color: string) => !currentColors.includes(color))
+ const uniqueColor = uniqueColors[Math.floor(Math.random() * uniqueColors.length)]
+ const uniqueColorSet = Object.values(colors).find((color) => color.bg === uniqueColor)
+ return uniqueColorSet || getRandomColor()
+}
+
+export const getRandomColors = (qty: number) => {
+ return sampleSize(Object.values(colors), qty)
+}
+
+export const getRandomColor = () => {
+ return Object.values(colors)[Math.floor(Math.random() * Object.values(colors).length)]
+}
+
+export const getColor = (color: 'brand' | 'gray') => {
+ return colors[color]
+}
diff --git a/apps/www/components/LaunchWeek/13/Multiplayer/types.ts b/apps/www/components/LaunchWeek/13/Multiplayer/types.ts
new file mode 100644
index 00000000000..d992d7a4ab0
--- /dev/null
+++ b/apps/www/components/LaunchWeek/13/Multiplayer/types.ts
@@ -0,0 +1,23 @@
+export interface Coordinates {
+ x: number | undefined
+ y: number | undefined
+}
+
+export interface Message {
+ id: number
+ user_id: string
+ message: string
+}
+
+export interface Payload {
+ type: string
+ event: string
+ payload?: T
+}
+
+export interface User extends Coordinates {
+ color: string
+ hue: string
+ isTyping?: boolean
+ message?: string
+}
diff --git a/apps/www/components/LaunchWeek/13/ThreeTicketCanvas.tsx b/apps/www/components/LaunchWeek/13/ThreeTicketCanvas.tsx
new file mode 100644
index 00000000000..41317552b9b
--- /dev/null
+++ b/apps/www/components/LaunchWeek/13/ThreeTicketCanvas.tsx
@@ -0,0 +1,550 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import { useTheme } from 'next-themes'
+import { cn, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'
+import { useKey } from 'react-use'
+import useConfData from '../hooks/use-conf-data'
+import useLwGame, { VALID_KEYS } from '../hooks/useLwGame'
+
+const ThreeTicketCanvas: React.FC<{
+ username: string
+ className?: string
+ ticketType?: 'regular' | 'platinum' | 'secret'
+ ticketPosition?: 'left' | 'right'
+ sharePage?: boolean
+}> = ({
+ username = 'Francesco Sansalvadore',
+ className,
+ ticketType = 'regular',
+ ticketPosition = 'right',
+ sharePage = false,
+}) => {
+ const { userData } = useConfData()
+ const { resolvedTheme } = useTheme()
+ const isDarkTheme = resolvedTheme?.includes('dark')!
+ const inputRef = useRef(null)
+ const canvasRef = useRef(null)
+ const ticketRef = useRef(null)
+ const animationFrameRef = useRef()
+ const targetRotation = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+ const targetScale = useRef(0)
+ const groupYRotation = useRef(0)
+ const isFlipped = useRef(false)
+ const dragStartX = useRef(null)
+ const dragDelta = useRef(0)
+ const isDragging = useRef(false)
+ const currentValue = useRef('')
+ const flipDirection = useRef(0)
+ const {
+ isGameMode,
+ setIsGameMode,
+ winningPhrase,
+ handleIndexCount,
+ setGameState,
+ value,
+ phraseLength,
+ REGEXP_ONLY_CHARS,
+ hasWon,
+ } = useLwGame(inputRef)
+
+ const MIN_CANVAS_HEIGHT = 600
+ const FLIP_DELTA = 20 // Swipe px threshold for flipping
+ const LINE_HEIGHT = 1.6
+ const SCALE_VARIATION_ON_INTERACTION = 0.025
+ const TICKET_FONT_PADDING_LEFT = -6.4
+ const DISPLAY_NAME = username?.split(' ').reverse() || []
+ const ALIGN_RIGHT = ticketPosition === 'right'
+ const IS_PLATINUM = ticketType === 'platinum'
+ const IS_SECRET = ticketType === 'secret'
+ const TEXT_Z_POSITION = 0
+ const FOOTER_CONTENT = [
+ {
+ text: 'LAUNCH WEEK 13',
+ position: { x: TICKET_FONT_PADDING_LEFT, y: -6.8, z: TEXT_Z_POSITION },
+ size: 0.63,
+ },
+ {
+ text: '2-6 DEC / 7AM PT',
+ position: { x: TICKET_FONT_PADDING_LEFT, y: -7.7, z: TEXT_Z_POSITION },
+ size: 0.55,
+ },
+ ]
+ const CONFIG = {
+ regular: {
+ ticketColor: isDarkTheme ? 0xf3f3f3 : 0x121212,
+ ticketForeground: isDarkTheme ? 0x171717 : 0xffffff,
+ },
+ platinum: {
+ ticketColor: isDarkTheme ? 0x9ea1a1 : 0x9ea1a1,
+ ticketForeground: 0x0f0f0f,
+ },
+ secret: {
+ ticketColor: isDarkTheme ? 0xe7a938 : 0xf2c66d,
+ ticketForeground: 0x0f0f0f,
+ },
+ }
+
+ const isDesktop = (width: number) => width > 1024
+ const getTicketScale = (width: number) => (isDesktop(width) ? 0.35 : 0.3)
+ const getTicketXPosition = (width: number, isRight: boolean) =>
+ isDesktop(width) ? (isRight ? 5 : -5) : 0
+
+ useKey('Escape', () => {
+ resetRotation()
+ })
+
+ // Reset handler with smooth transition
+ const resetRotation = () => {
+ targetRotation.current = { x: 0, y: 0 }
+ isFlipped.current = false
+ setIsGameMode(false)
+ }
+
+ useEffect(() => {
+ if (!canvasRef.current) return
+
+ let scale = getTicketScale(window.innerWidth)
+ targetScale.current = scale
+ const calculateDesktopWidth = () => window.innerWidth
+ const initialCanvasWidth = calculateDesktopWidth()
+ const initialCanvasHeight =
+ window.innerHeight < MIN_CANVAS_HEIGHT ? MIN_CANVAS_HEIGHT - 65 : window.innerHeight - 65
+ const ticketYIdleRotation = 0
+
+ // Initialize scene, camera, and renderer
+ const scene = new THREE.Scene()
+ const camera = new THREE.PerspectiveCamera(
+ 25,
+ initialCanvasWidth / initialCanvasHeight,
+ 0.1,
+ 1000
+ )
+ const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+ renderer.setSize(initialCanvasWidth, initialCanvasHeight)
+ renderer.setPixelRatio(window.devicePixelRatio)
+ renderer.shadowMap.enabled = true
+ canvasRef.current.appendChild(renderer.domElement)
+
+ // Camera setup
+ const cameraDistance = 30
+ camera.position.z = cameraDistance
+
+ // Rest of your existing setup code (loader, materials, etc.)
+ const gltfLoader = new GLTFLoader()
+
+ // Texture credits to Freepik: https://www.freepik.com/free-photo/golden-wall-background_1213228.htm
+ const metalTexture = new THREE.TextureLoader().load(
+ '/images/launchweek/13/ticket/metal-texture.jpg'
+ )
+ const goldTexture = new THREE.TextureLoader().load(
+ '/images/launchweek/13/ticket/gold-texture.jpg'
+ )
+
+ const metalMaterial = new THREE.MeshStandardMaterial({
+ color: CONFIG[ticketType].ticketColor,
+ map: IS_SECRET ? goldTexture : IS_PLATINUM ? metalTexture : undefined,
+ bumpMap: IS_SECRET ? goldTexture : IS_PLATINUM ? metalTexture : undefined,
+ metalnessMap: IS_SECRET ? goldTexture : metalTexture,
+ // roughnessMap: IS_SECRET ? goldTexture : metalTexture,
+ metalness: IS_SECRET ? 0.8 : IS_PLATINUM ? 0.8 : isDarkTheme ? 0.2 : 0.9,
+ roughness: IS_SECRET ? 0.12 : IS_PLATINUM ? 0.12 : isDarkTheme ? 0.2 : 0.5,
+ bumpScale: IS_SECRET ? 0.02 : IS_PLATINUM ? 0.0045 : undefined,
+ })
+
+ // Load Ticket model, fonts and textures
+ let ticket3DImport: THREE.Mesh
+ const ticketGroup = new THREE.Group()
+ const ticketScale = getTicketScale(window.innerWidth)
+ ticketGroup.scale.set(ticketScale, ticketScale, ticketScale)
+ ticketGroup.position.x = getTicketXPosition(window.innerWidth, ALIGN_RIGHT)
+
+ gltfLoader.load('/images/launchweek/13/ticket/3D-ticket.glb', (gltf) => {
+ ticket3DImport = gltf.scene.children[0] as THREE.Mesh
+ ticket3DImport.rotation.x = Math.PI * 0.5
+ ticket3DImport.traverse((child) => {
+ if (child) {
+ // @ts-ignore
+ child.material = metalMaterial
+ child.castShadow = true
+ child.receiveShadow = true
+ }
+ })
+
+ ticketGroup.add(ticket3DImport)
+ scene.add(ticketGroup)
+ ticketRef.current = ticket3DImport
+ camera.lookAt(ticket3DImport.position)
+ })
+
+ const textMaterial = new THREE.MeshStandardMaterial({
+ color: CONFIG[ticketType].ticketForeground,
+ metalness: 0.2,
+ roughness: 0.35,
+ })
+
+ // Load font and add text geometry
+ const fontLoader = new FontLoader()
+
+ // Load Inter font
+ fontLoader.load('/images/launchweek/13/ticket/Murecho_Regular.json', (font) => {
+ DISPLAY_NAME.map((text, index) => {
+ // Front
+ const textGeometry = new TextGeometry(text, {
+ font,
+ size: 1.2,
+ height: 0.2,
+ })
+ const textMesh = new THREE.Mesh(textGeometry, textMaterial)
+ textMesh.updateMatrix()
+ textMesh.position.set(
+ TICKET_FONT_PADDING_LEFT,
+ -5 + LINE_HEIGHT * (index + 1),
+ TEXT_Z_POSITION
+ )
+ textMesh.castShadow = true
+ ticketGroup.add(textMesh)
+ })
+
+ // Back
+ if (!sharePage) {
+ const backTextGeometry = new TextGeometry('Type the secret code', {
+ font,
+ size: 0.6,
+ height: 0.2,
+ })
+ const backTextMesh = new THREE.Mesh(backTextGeometry, textMaterial)
+ backTextMesh.updateMatrix()
+ backTextMesh.position.set(4.0, 2, -TEXT_Z_POSITION)
+ backTextMesh.rotation.y = Math.PI
+
+ backTextMesh.castShadow = true
+ ticketGroup.add(backTextMesh)
+ }
+ })
+
+ // Load mono font
+ fontLoader.load('/images/launchweek/13/ticket/SourceCodePro_Regular.json', (font) => {
+ // Front
+ FOOTER_CONTENT.map((line) => {
+ const textGeometry = new TextGeometry(line.text, {
+ font,
+ size: line.size,
+ height: 0.2,
+ })
+ const textMesh = new THREE.Mesh(textGeometry, textMaterial)
+ textMesh.updateMatrix()
+ textMesh.position.set(line.position.x, line.position.y, line.position.z)
+ textMesh.castShadow = true
+ ticketGroup.add(textMesh)
+ })
+
+ // Back
+ if (!sharePage) {
+ winningPhrase.flat().map((letter, index) => {
+ const letterGeometry = new TextGeometry(letter.toUpperCase(), {
+ font,
+ size: 2.2,
+ height: 0.2,
+ })
+ const letterMaterial = new THREE.MeshStandardMaterial({
+ color: CONFIG[ticketType].ticketForeground,
+ metalness: 0.2,
+ roughness: 0.35,
+ })
+ const backTextMesh = new THREE.Mesh(letterGeometry, letterMaterial)
+ backTextMesh.updateMatrix()
+ backTextMesh.position.set(3.9 - index * 1.8, -2, -TEXT_Z_POSITION)
+ backTextMesh.rotation.y = Math.PI
+ backTextMesh.name = `letter-${index}`
+ backTextMesh.material.transparent = true
+ backTextMesh.material.opacity = 0
+
+ ticketGroup.add(backTextMesh)
+ })
+ }
+ })
+
+ ticketGroup.updateMatrix()
+
+ // Environment Map
+ const envMapLoader = new THREE.TextureLoader()
+ envMapLoader.load('/images/launchweek/13/ticket/env-map.jpg', (texture) => {
+ texture.mapping = THREE.EquirectangularReflectionMapping
+ scene.environment = texture
+ metalMaterial.envMap = texture
+ metalMaterial.envMapIntensity = IS_SECRET
+ ? isDarkTheme
+ ? 1.4
+ : 0.9
+ : isDarkTheme
+ ? 2.8
+ : 0.75
+ })
+
+ // Lights
+ const ambientLight = new THREE.AmbientLight(
+ 0xffffff,
+ IS_SECRET ? (isDarkTheme ? 1.3 : 1.2) : IS_PLATINUM ? (isDarkTheme ? 1.7 : 3.2) : 2
+ )
+ scene.add(ambientLight)
+
+ const spotLight = new THREE.SpotLight(0xffffff, isDarkTheme ? 0.8 : 0.2)
+ spotLight.position.z = ticketGroup.position.z + 4
+ spotLight.position.x = ticketGroup.position.x + 10
+ spotLight.angle = (Math.PI / 2) * 0.5
+ spotLight.castShadow = true
+ spotLight.lookAt(ticketGroup.position)
+ scene.add(spotLight)
+
+ const getTicketScreenPosition = () => {
+ if (!ticketRef.current) return null
+
+ const vector = new THREE.Vector3()
+ ticketRef.current.getWorldPosition(vector)
+ vector.project(camera)
+
+ const x = (vector.x * 0.5 + 0.5) * initialCanvasWidth
+ const y = -(vector.y * 0.5 - 0.5) * initialCanvasHeight
+
+ return { x, y }
+ }
+
+ const handleKeyDown = () => {
+ currentValue.current.split('').map((_letter, index) => {
+ const letterToShow = ticketGroup.getObjectByName(`letter-${index}`)
+ letterToShow?.traverse((child) => {
+ if (child) {
+ // @ts-ignore
+ child.material.opacity = 1
+ }
+ })
+ })
+ }
+
+ const animate = () => {
+ // Smooth rotation
+ if (!isDragging.current) {
+ ticketGroup.rotation.x += (targetRotation.current.x - ticketGroup.rotation.x) * 0.18
+ ticketGroup.rotation.y +=
+ ticketYIdleRotation + (targetRotation.current.y - ticketGroup.rotation.y) * 0.18
+ }
+ if (ticketGroup.scale.x < targetScale.current) {
+ scale += 0.0025
+ } else if (ticketGroup.scale.x > targetScale.current) {
+ scale -= 0.0025
+ } else {
+ scale = targetScale.current
+ }
+
+ ticketGroup.scale.set(scale, scale, scale)
+ groupYRotation.current = ticketGroup.rotation.y
+
+ handleKeyDown()
+
+ renderer.render(scene, camera)
+ animationFrameRef.current = requestAnimationFrame(animate)
+ }
+
+ // Start animation
+ animate()
+
+ const handleMouseMove = (e: MouseEvent) => handlePointerMove(e.clientX, e.clientY)
+ const handleTouchMove = (e: TouchEvent) => {
+ const touch = e.touches[0]
+ handlePointerMove(touch.clientX, touch.clientY)
+ }
+ // Tilt and drag logic
+ const handlePointerMove = (clientX: number, clientY: number) => {
+ if (!canvasRef.current) return
+ if (isDragging.current) {
+ // Update drag delta
+ if (dragStartX.current !== null) {
+ dragDelta.current = clientX - dragStartX.current
+ ticketGroup.rotation.y = targetRotation.current.y + dragDelta.current * 0.01
+ }
+ } else {
+ // Get canvas bounds
+ const canvasRect = canvasRef.current.getBoundingClientRect()
+
+ // Calculate center of the canvas
+ const centerX = canvasRect.left + canvasRect.width / 2
+ const centerY = canvasRect.top + canvasRect.height / 2
+ const ticketPosition = getTicketScreenPosition() || { x: centerX, y: centerY }
+
+ // Calculate distance from cursor to center of ticket
+ const deltaX = clientX - (canvasRect.left + ticketPosition.x)
+ const deltaY = clientY - (canvasRect.top + ticketPosition.y)
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+
+ // Maximum distance for sensitivity calculation (diagonal of the canvas)
+ const maxDistance = Math.sqrt(
+ Math.pow(canvasRect.width / 2, 2) + Math.pow(canvasRect.height / 2, 2)
+ )
+
+ // Calculate sensitivity based on distance (inverse relationship)
+ const sensitivity = 0.002 * (1 - Math.min(distance / maxDistance, 1))
+
+ // Update target rotation with distance-based sensitivity
+ targetRotation.current.y =
+ deltaX * sensitivity +
+ (isFlipped.current ? (flipDirection.current < 0 ? -Math.PI : Math.PI) : 0)
+ targetRotation.current.x = deltaY * sensitivity * 0.3
+ }
+ }
+
+ const handleMouseDown = (e: MouseEvent) => handlePointerDown(e.clientX)
+ const handleTouchStart = (e: TouchEvent) => {
+ const touch = e.touches[0]
+ handlePointerDown(touch.clientX)
+ }
+ const handlePointerDown = (clientX: number) => {
+ isDragging.current = true
+ dragStartX.current = clientX
+ targetScale.current += SCALE_VARIATION_ON_INTERACTION
+ }
+
+ const handleMouseUp = () => handlePointerUp()
+ const handleTouchEnd = () => handlePointerUp()
+
+ const handlePointerUp = () => {
+ if (!isDragging.current) return
+ isDragging.current = false
+ targetScale.current -= SCALE_VARIATION_ON_INTERACTION
+
+ // Detect swipe gesture
+ if (Math.abs(dragDelta.current) > FLIP_DELTA) {
+ // Flip the ticket
+ isFlipped.current = !isFlipped.current
+ if (!userData.secret) setIsGameMode(isFlipped.current)
+ const sign = Math.sign(dragDelta.current)
+ flipDirection.current = sign
+ targetRotation.current.y += sign * Math.PI // Add full flip
+ } else {
+ // Reset rotation
+ ticketGroup.rotation.y = targetRotation.current.y
+ }
+
+ // Reset drag state
+ dragStartX.current = null
+ dragDelta.current = 0
+ }
+
+ // Handle window resize
+ const handleResize = () => {
+ const newWidth = calculateDesktopWidth()
+ ticketGroup.position.x = getTicketXPosition(window.innerWidth, ALIGN_RIGHT)
+ const tickeScale = getTicketScale(window.innerWidth)
+ ticketGroup.scale.set(tickeScale, tickeScale, tickeScale)
+ camera.aspect =
+ newWidth /
+ (window.innerHeight < MIN_CANVAS_HEIGHT ? MIN_CANVAS_HEIGHT - 65 : window.innerHeight - 65)
+ camera.updateProjectionMatrix()
+ renderer.setSize(
+ newWidth,
+ window.innerHeight < MIN_CANVAS_HEIGHT ? MIN_CANVAS_HEIGHT - 65 : window.innerHeight - 65
+ )
+ }
+
+ function onKeyDown(event: KeyboardEvent) {
+ if (isGameMode) return
+ const newKey = event.key.toLocaleLowerCase()
+
+ if (!(event.metaKey || event.ctrlKey) && VALID_KEYS.includes(newKey)) {
+ targetScale.current += SCALE_VARIATION_ON_INTERACTION
+ }
+
+ setTimeout(() => {
+ targetScale.current = getTicketScale(window.innerWidth)
+ }, 100)
+ }
+
+ // Event listeners
+ window.addEventListener('resize', handleResize)
+ window.addEventListener('mousedown', handleMouseDown)
+ window.addEventListener('mouseup', handleMouseUp)
+ window.addEventListener('mousemove', handleMouseMove)
+ // window.addEventListener('mouseout', resetRotation)
+ window.addEventListener('touchmove', handleTouchMove)
+ window.addEventListener('touchstart', handleTouchStart)
+ window.addEventListener('touchend', handleTouchEnd)
+ window.addEventListener('touchcancel', resetRotation)
+ window.addEventListener('keydown', onKeyDown)
+
+ // Cleanup
+ return () => {
+ window.removeEventListener('resize', handleResize)
+ window.removeEventListener('mousedown', handleMouseDown)
+ window.removeEventListener('mouseup', handleMouseUp)
+ window.removeEventListener('mousemove', handleMouseMove)
+ // window.removeEventListener('mouseout', resetRotation)
+ window.removeEventListener('touchmove', handleTouchMove)
+ window.removeEventListener('touchstart', handleTouchStart)
+ window.removeEventListener('touchend', handleTouchEnd)
+ window.removeEventListener('touchcancel', resetRotation)
+ window.removeEventListener('keydown', onKeyDown)
+
+ if (animationFrameRef.current) {
+ cancelAnimationFrame(animationFrameRef.current)
+ }
+ canvasRef.current?.removeChild(renderer.domElement)
+ renderer.dispose()
+ }
+ }, [username, isDarkTheme, ticketType])
+
+ useEffect(() => {
+ currentValue.current = value
+ }, [value])
+
+ return (
+
+