eyJzdWIiOiIwMDAxIiwibmFtZSI6IlNhbSBWaW1lcyIsImlhdCI6MTUxNjIzOTAyMiwiZXhwIjoxNTE4MjM5MDIyfQ contains our original payload:
+## Using custom or third-party JWTs
-```js
-{
- "sub": "0001",
- "name": "Sam Vimes",
- "iat": 1516239022,
- "exp": 1518239022
-}
-```
+
+
+
+
+| Action | Accepted JWT signatures | Description |
+| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Create a new key | Current key only, new key has not created any JWTs yet. | When you initially create a key, after choosing the signing algorithm or importing a private key you already have, it starts out in the standby state. If using an asymmetric key (RSA, Elliptic Curve) its public key will be available in the discovery endpoint. Supabase Auth does not use this key to create new JWTs. |
+| Rotate keys | Both keys in the rotation. | Rotation only changes the key used by Supabase Auth to create new JWTs, but the trust relationship with both keys remains. |
+| Revoke key | Only from the current key. | Once all regularly valid JWTs have expired (or sooner) revoke the previously used key to revoke trust in it. |
+| Move to standby from revoked | Current and previously revoked key. | If you've made a mistake or need more time to adjust your application, you can move a revoked key to standby. Follow up with a rotation to ensure Auth starts using the originally revoked key again to make new JWTs. |
+| Move to standby from previously used | Both keys. | This only prepares the key from the last rotation to be used by Auth to make new JWTs with it. |
+| Delete key | - | Permanently destroys the private key or shared secret of a key, so it will not be possible to re-use or rotate again into it. |
+
+### Public key discovery and caching
+
+When your signing keys use an asymmetric algorithm based on [public-key cryptography](https://en.wikipedia.org/wiki/Public-key_cryptography) Supabase Auth exposes the public key in the JSON Web Key Set discovery endpoint, for anyone to see. This is an important security feature allowing you to rotate and revoke keys without needing to deploy new versions of your app's backend infrastructure.
+
+Access the currently trusted signing keys at the following endpoint:
+
+```http
+GET https://project-id.supabase.co/auth/v1/.well-known/jwks.json
+```
+
+Note that this is secure as public keys are irreversible and can only be used to verify the signature of JSON Web Tokens, but not create new ones.
+
+This discovery endpoint is cached by Supabase's edge servers for 10 minutes. Furthermore the Supabase client libraries may cache the keys in memory for an additional 10 minutes. Your application may be using different caching behavior if you're not relying only on the Supabase client library.
+
+This multi-level cache is a trade-off allowing fast JWT verification without placing the Auth server in the hot path of your application, increasing its reliability and performance.
+
+Importantly Supabase products **do not rely on this cache**, so stronger security guarantees are provided especially when keys are revoked. If your application only uses [Row Level Security](/docs/guides/database/postgres/row-level-security) policies and does not have any other backend components (such as APIs, Edge Functions, servers, etc.) key rotation and revocation are instantaneous.
+
+Finally this multi-level cache is cleared every 20 minutes, or longer if you have a custom setup. Consider the following problems that may arise due to it:
+
+- **Urgent key revocation.** If you are in a security incident where a signing key must be urgently revoked, due to the multi-level cache your application components may still trust and authenticate JWTs signed with the revoked key. Supabase products (Auth, Data API, Storage, Realtime) **do not rely on this cache and revocation is instantaneous.** Should this be an issue for you, ensure you've built a cache busting mechanism as part of your app's backend infrastructure.
+- **Quick key creation and rotation.** If you're migrating away from the legacy JWT secret or when only using the `supabase.auth.getClaims()` method this case is handled for you automatically. If you're verifying JWTs on your own, without the help of the Supabase client library, ensure that **all caches in your app** have picked up the newly created standby key before proceeding to rotation.
+
+## Choosing the right signing algorithm
+
+To strike the right balance between performance, security and ease-of-use, JWT signing keys are based on capabilities available in the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API).
+
+| Algorithm | JWT `alg` | Information |
+| ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [NIST P-256 Curve](https://en.wikipedia.org/wiki/Elliptic-curve_cryptography)
+
+A newly created key starts off as standby, before being rotated into in use (becoming the current key) while the existing current key becomes previously used.
+
+At any point you can move a key from the previously used or revoked states back to being a standby key, and rotate to it. This gives you the confidence to revert back to an older key if you identify problems with the rotation, such as forgetting to update a component of your application that is relying on a specific key (for example, the legacy JWT secret).
+
+Each action on a key is reversible (except permanent deletion).
+
+
+
+(Asymmetric) | `ES256` | Elliptic Curves are a faster alternative than RSA, while providing comparable security. Especially important for Auth use cases is the fact that signatures using the P-256 curve are significantly shorter than those created by RSA, which reduces data transfer sizes and helps in managing cookie size. Web Crypto and most other cryptography libraries and runtimes support this curve. | +| [RSA 2048](https://en.wikipedia.org/wiki/RSA_cryptosystem)
(Asymmetric) | `RS256` | RSA is the oldest and most widely supported public-key cryptosystem in use. While being easy to code by hand, it can be significantly slower than elliptic curves in certain aspects. We recommend using the P-256 elliptic curve instead. | +| [Ed25519 Curve](https://en.wikipedia.org/wiki/EdDSA#Ed25519)
(Asymmetric) | `EdDSA` | Coming soon. This algorithm is based on a different elliptic curve cryptosystem developed in the open, unlike the P-256 curve. Web Crypto or other crypto libraries may not support it in all runtimes, making it difficult to work with. | +| [HMAC with shared secret](https://en.wikipedia.org/wiki/HMAC)
(Symmetric) | `HS256` | **Not recommended for production applications.** A shared secret uses a message authentication code to verify the authenticity of a JSON Web Token. This requires that both the creator of the JWT (Auth) and the system verifying the JWT know the secret. As there is no public key counterpart, revoking this key might require deploying changes to your app's backend infrastructure. | + +
+
+Now, that you have created your Analytics Bucket, you can start [connecting to it](/docs/guides/storage/analytics/connecting-to-analytics-bucket) with Iceberg clients like PyIceberg or Apache Spark.
diff --git a/apps/docs/content/guides/storage/analytics/introduction.mdx b/apps/docs/content/guides/storage/analytics/introduction.mdx
new file mode 100644
index 00000000000..0f4249efe97
--- /dev/null
+++ b/apps/docs/content/guides/storage/analytics/introduction.mdx
@@ -0,0 +1,24 @@
+---
+title: 'Analytics Buckets'
+subtitle: ''
+---
+
+This table is empty
-- Add rows to your table to get started. -
-
- {
+ {tableEntityType === ENTITY_TYPE.FOREIGN_TABLE ? (
+
+ )}
+
+ ) : (
+ + This table is a foreign table. Add data to the connected source to get + started. +
+
- }
-
+
diff --git a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
index 2800dcda2d8..1a0eaa02a9e 100644
--- a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
+++ b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
@@ -1,5 +1,6 @@
-import { MoreVertical } from 'lucide-react'
+import { APIKeysData } from 'data/api-keys/api-keys-query'
import { motion } from 'framer-motion'
+import { MoreVertical } from 'lucide-react'
import {
Button,
DropdownMenu,
@@ -10,7 +11,6 @@ import {
} from 'ui'
import { APIKeyDeleteDialog } from './APIKeyDeleteDialog'
import { ApiKeyPill } from './ApiKeyPill'
-import { APIKeysData } from 'data/api-keys/api-keys-query'
export const APIKeyRow = ({
apiKey,
@@ -34,14 +34,25 @@ export const APIKeyRow = ({
mass: 1,
}}
>
- {apiKey.name}
+
+
- {apiKey.description || '/'}
- {lastSeen?.timestamp ?? '/'}
+
+
+
diff --git a/apps/studio/components/interfaces/APIKeys/APIKeysTable.tsx b/apps/studio/components/interfaces/APIKeys/APIKeysTable.tsx
deleted file mode 100644
index 49aa3a94a97..00000000000
--- a/apps/studio/components/interfaces/APIKeys/APIKeysTable.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AnimatePresence } from 'framer-motion'
-
-import { APIKeysData } from 'data/api-keys/api-keys-query'
-import { APIKeyRow } from './APIKeyRow'
-
-const APIKeysTable = ({
- apiKeys,
-}: {
- apiKeys: Extract[]
-}) => {
- return (
-
-
-
-
- )
-}
-
-export default APIKeysTable
diff --git a/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx b/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx
index 6024d017720..28d24040b1d 100644
--- a/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx
+++ b/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx
@@ -1,10 +1,10 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useQueryClient } from '@tanstack/react-query'
import { AnimatePresence, motion } from 'framer-motion'
import { Eye } from 'lucide-react'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
import { InputVariants } from '@ui/components/shadcn/ui/input'
import { useParams } from 'common'
import CopyButton from 'components/ui/CopyButton'
@@ -35,7 +35,6 @@ export function ApiKeyPill({
// It fetches the fully revealed API key when needed
const {
data,
- isLoading: isLoadingApiKey,
error,
refetch: refetchApiKey,
} = useAPIKeyIdQuery(
@@ -106,7 +105,6 @@ export function ApiKeyPill({
// States for disabling buttons/showing tooltips
const isRestricted = isSecret && !canManageSecretKeys
- const isLoading = isLoadingPermission
return (
<>
@@ -118,7 +116,7 @@ export function ApiKeyPill({
isSecret ? 'overflow-hidden' : '',
show ? 'ring-1 ring-foreground-lighter ring-opacity-50' : 'ring-0 ring-opacity-0',
'transition-all',
- 'max-w-[340px]',
+ 'max-w-[100px] sm:max-w-[140px] md:max-w-[180px] lg:max-w-[340px]',
'cursor-text',
'relative'
)}
diff --git a/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx b/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx
index 99627770315..179df09b662 100644
--- a/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx
+++ b/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx
@@ -1,12 +1,14 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useMemo } from 'react'
+
import { InputVariants } from '@ui/components/shadcn/ui/input'
import { useParams } from 'common'
import CopyButton from 'components/ui/CopyButton'
import { FormHeader } from 'components/ui/Forms/FormHeader'
import { useAPIKeysQuery } from 'data/api-keys/api-keys-query'
import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
-import { useMemo } from 'react'
import { cn, EyeOffIcon, Input_Shadcn_, Skeleton, WarningIcon } from 'ui'
+
// to add in later with follow up PR
// import CreatePublishableAPIKeyDialog from './CreatePublishableAPIKeyDialog'
// to add in later with follow up PR
@@ -38,7 +40,7 @@ export const PublishableAPIKeys = () => {
description="This key is safe to use in a browser if you have enabled Row Level Security (RLS) for your tables and configured policies."
/>
+ {apiKey.name}
+
+
+ {apiKey.description || No description}
+
+
+ {lastSeen?.timestamp ?? Never used}
+
+
- setSelectedBranchToDelete(undefined)}
- onConfirm={() => onConfirmDeleteBranch()}
- loading={isDeleting}
- title="Delete branch"
- confirmLabel="Delete branch"
- confirmPlaceholder="Type in name of branch"
- confirmString={selectedBranchToDelete?.name ?? ''}
- alert={{ title: 'You cannot recover this branch once deleted' }}
- text={
- <>
- This will delete your database preview branch{' '}
- {selectedBranchToDelete?.name}.
-
- }
- />
-
- onConfirmDisableBranching()}
- onCancel={() => setShowDisableBranching(false)}
- alert={{
- title: 'This action cannot be undone',
- description:
- 'All database preview branches will be removed upon disabling branching. You may still re-enable branching again thereafter, but your existing preview branches will not be restored.',
- }}
- >
-
-
- )
-}
-
-export default BranchManagement
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
index dc7c142d066..57f3f3d0c0c 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
@@ -1,47 +1,13 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
import dayjs from 'dayjs'
-import {
- ArrowRight,
- Clock,
- ExternalLink,
- GitPullRequest,
- Github,
- Infinity,
- MoreVertical,
- Pencil,
- RefreshCw,
- Shield,
- Trash2,
-} from 'lucide-react'
-import Link from 'next/link'
-import { PropsWithChildren, ReactNode, useState } from 'react'
-import { useInView } from 'react-intersection-observer'
-import { toast } from 'sonner'
+import { Github } from 'lucide-react'
+import { useRouter } from 'next/router'
+import { PropsWithChildren, ReactNode } from 'react'
-import { useParams } from 'common'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
-import { useBranchQuery } from 'data/branches/branch-query'
-import { useBranchResetMutation } from 'data/branches/branch-reset-mutation'
-import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
import type { Branch } from 'data/branches/branches-query'
-import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { useFlag } from 'hooks/ui/useFlag'
-import {
- Badge,
- Button,
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from 'ui'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import BranchStatusBadge from './BranchStatusBadge'
-import { EditBranchModal } from './EditBranchModal'
-import WorkflowLogs from './WorkflowLogs'
+import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { WorkflowLogs } from './WorkflowLogs'
interface BranchManagementSectionProps {
header: string | ReactNode
@@ -54,11 +20,13 @@ export const BranchManagementSection = ({
children,
}: PropsWithChildren) => {
return (
-
+
API Key
-
- Description
-
-
+
+
Last Seen
+
+
+
+ )
+ }
+
return (
<>
{
+ const { ref } = useParams()
+ const router = useRouter()
+ const routeCategory = router.pathname.split('/').pop()
+
+ const [open, setOpen] = useState(false)
+
+ const { mutate: createRule, isLoading: isCreating } = useLintRuleCreateMutation({
+ onSuccess: (_, vars) => {
+ const ruleLint = vars.exception.lint_name
+ const ruleLintMeta = lintInfoMap.find((x) => x.name === ruleLint)
+ toast.success(`Successfully disabled the "${ruleLintMeta?.title}" rule`)
+
+ if (ruleLintMeta) {
+ if (!!routeCategory && routeCategory !== ruleLintMeta.category) {
+ router.push(
+ `/project/${ref}/advisors/rules/${ruleLintMeta.category}?lint=${ruleLintMeta.name}`
+ )
+ }
+ }
+ setOpen(false)
+ },
+ })
+
+ const onCreateRule = () => {
+ if (!ref) return console.error('Project ref is required')
+
+ createRule({
+ projectRef: ref,
+ exception: {
+ is_disabled: true,
+ lint_category: undefined,
+ lint_name: lint.name,
+ assigned_to: undefined,
+ },
+ })
+ }
+
+ return (
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Advisors/EnableRuleModal.tsx b/apps/studio/components/interfaces/Advisors/EnableRuleModal.tsx
new file mode 100644
index 00000000000..c744e3d632b
--- /dev/null
+++ b/apps/studio/components/interfaces/Advisors/EnableRuleModal.tsx
@@ -0,0 +1,71 @@
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+import { useParams } from 'common'
+import { useLintRuleDeleteMutation } from 'data/lint/delete-lint-rule-mutation'
+import { LintException } from 'data/lint/lint-rules-query'
+import {
+ Button,
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogSection,
+ DialogSectionSeparator,
+ DialogTitle,
+ DialogTrigger,
+} from 'ui'
+import { LintInfo } from '../Linter/Linter.constants'
+
+interface EnableRuleModalProps {
+ lint: LintInfo
+ rule: LintException
+}
+
+export const EnableRuleModal = ({ lint, rule }: EnableRuleModalProps) => {
+ const { ref } = useParams()
+ const router = useRouter()
+
+ const [open, setOpen] = useState(false)
+
+ const { mutate: deleteRule, isLoading: isDeleting } = useLintRuleDeleteMutation({
+ onSuccess: () => {
+ toast.success(`Successfully enabled the "${lint.title}" rule`)
+ setOpen(false)
+ },
+ })
+
+ const onDeleteRule = () => {
+ if (!ref) return console.error('Project ref is required')
+ deleteRule({ projectRef: ref, ids: [rule.id] })
+ }
+
+ return (
+
+ )
+}
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/AdvisorRulesPreview.tsx b/apps/studio/components/interfaces/App/FeaturePreview/AdvisorRulesPreview.tsx
new file mode 100644
index 00000000000..42dc1d41ad5
--- /dev/null
+++ b/apps/studio/components/interfaces/App/FeaturePreview/AdvisorRulesPreview.tsx
@@ -0,0 +1,45 @@
+import Image from 'next/image'
+
+import { useParams } from 'common'
+import { InlineLink } from 'components/ui/InlineLink'
+import { BASE_PATH } from 'lib/constants'
+import { useIsRealtimeSettingsEnabled } from './FeaturePreviewContext'
+
+export const AdvisorRulesPreview = () => {
+ const { ref } = useParams()
+ const isRealtimeSettingsEnabled = useIsRealtimeSettingsEnabled()
+
+ return (
+ {
size="xlarge"
className="!max-w-4xl"
header="Dashboard feature previews"
- visible={snap.showFeaturePreviewModal}
- onCancel={handleCloseFeaturePreviewModal}
+ visible={showFeaturePreviewModal}
+ onCancel={closeFeaturePreviewModal}
>
{FEATURE_PREVIEWS.length > 0 ? (
{allFeaturePreviews
- .filter((feature) => isReleasedToPublic(feature))
+ .filter((feature) => isFeaturePreviewReleasedToPublic(feature))
.map((feature) => {
const isEnabled = flags[feature.key] ?? false
return (
- {FEATURE_PREVIEW_KEY_TO_CONTENT[selectedFeatureKey]}
+ {FEATURE_PREVIEW_KEY_TO_CONTENT[selectedFeature.key]}
) : (
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/UnifiedLogsPreview.tsx b/apps/studio/components/interfaces/App/FeaturePreview/UnifiedLogsPreview.tsx
new file mode 100644
index 00000000000..981d98ad42e
--- /dev/null
+++ b/apps/studio/components/interfaces/App/FeaturePreview/UnifiedLogsPreview.tsx
@@ -0,0 +1,36 @@
+import { useParams } from 'common'
+import { InlineLink } from 'components/ui/InlineLink'
+import { BASE_PATH } from 'lib/constants'
+import Image from 'next/image'
+
+export const UnifiedLogsPreview = () => {
+ const { ref } = useParams()
+
+ return (
+ ()
-
- const canReadBranches = useCheckPermissions(PermissionAction.READ, 'preview_branches')
- const canCreateBranches = useCheckPermissions(PermissionAction.CREATE, 'preview_branches', {
- resource: { is_default: false },
- })
-
- const {
- data: connections,
- error: connectionsError,
- isLoading: isLoadingConnections,
- isSuccess: isSuccessConnections,
- isError: isErrorConnections,
- } = useGitHubConnectionsQuery({
- organizationId: selectedOrg?.id,
- })
-
- const {
- data: branches,
- error: branchesError,
- isLoading: isLoadingBranches,
- isError: isErrorBranches,
- isSuccess: isSuccessBranches,
- } = useBranchesQuery({ projectRef })
- const [[mainBranch], previewBranchesUnsorted] = partition(branches, (branch) => branch.is_default)
- const previewBranches = previewBranchesUnsorted.sort((a, b) =>
- new Date(a.updated_at) < new Date(b.updated_at) ? 1 : -1
- )
- const branchesWithPRs = previewBranches.filter((branch) => branch.pr_number !== undefined)
- const branchesReadyForReview = previewBranches.filter(
- (branch) => branch.review_requested_at !== undefined && branch.review_requested_at !== null
- )
-
- const currentBranch = branches?.find((branch) => branch.project_ref === ref)
- const isCurrentBranchReadyForReview =
- currentBranch?.review_requested_at !== undefined && currentBranch?.review_requested_at !== null
-
- const githubConnection = connections?.find((connection) => connection.project.ref === projectRef)
- const repo = githubConnection?.repository.name ?? ''
-
- const isError = isErrorConnections || isErrorBranches
- const isLoading = isLoadingConnections || isLoadingBranches
- const isSuccess = isSuccessConnections && isSuccessBranches
-
- const { mutate: deleteBranch, isLoading: isDeleting } = useBranchDeleteMutation({
- onSuccess: () => {
- if (selectedBranchToDelete?.project_ref === ref) {
- toast.success(
- 'Successfully deleted branch. You are now currently on the main branch of your project.'
- )
- router.push(`/project/${projectRef}/branches`)
- } else {
- toast.success('Successfully deleted branch')
- }
- setSelectedBranchToDelete(undefined)
- },
- })
-
- const { mutate: disableBranching, isLoading: isDisabling } = useBranchesDisableMutation({
- onSuccess: () => {
- toast.success('Successfully disabled branching for project')
- setShowDisableBranching(false)
- },
- })
-
- const { mutate: updateBranch, isLoading: isUpdating } = useBranchUpdateMutation({
- onError: () => {
- toast.error(`Failed to update the branch`)
- },
- })
-
- const handleMarkBranchForReview = (branch: Branch) => {
- if (branch.id && projectRef) {
- updateBranch(
- {
- id: branch.id,
- projectRef,
- requestReview: true,
- },
- {
- onSuccess: () => {
- toast.success('Branch marked as ready for review')
- router.push(`/project/${branch.project_ref}/merge`)
- },
- }
- )
- }
- }
-
- const generateCreatePullRequestURL = (branch?: string) => {
- if (githubConnection === undefined) return 'https://github.com'
-
- return branch !== undefined
- ? `https://github.com/${githubConnection.repository.name}/compare/${mainBranch?.git_branch}...${branch}`
- : `https://github.com/${githubConnection.repository.name}/compare`
- }
-
- const onConfirmDeleteBranch = () => {
- if (selectedBranchToDelete == undefined) return console.error('No branch selected')
- if (projectRef == undefined) return console.error('Project ref is required')
- deleteBranch({ id: selectedBranchToDelete?.id, projectRef })
- }
-
- const onConfirmDisableBranching = () => {
- if (projectRef == undefined) return console.error('Project ref is required')
- if (!previewBranches) return console.error('No branches available')
- disableBranching({ projectRef, branchIds: previewBranches?.map((branch) => branch.id) })
- }
-
- return (
- <>
-
-
-
-
-
-
-
Publishable key
@@ -91,7 +93,8 @@ function ApiKeyInput() {
// The default publisahble key will always be the first one
const apiKey = publishableApiKeys[0]
- const baseClasses = 'flex-1 grow gap-1 rounded-full min-w-[32em]'
+ const baseClasses =
+ 'flex-1 grow gap-1 rounded-full min-w-0 max-w-[200px] sm:max-w-[300px] md:max-w-[400px] lg:min-w-[24rem]'
const size = 'tiny'
if (isApiKeysLoading || isPermissionsLoading) {
diff --git a/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx b/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx
index 16a6a60e9fb..5f6c6e1b83f 100644
--- a/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx
+++ b/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx
@@ -112,10 +112,8 @@ export const SecretAPIKeys = () => {
@@ -59,7 +61,7 @@ export const PublishableAPIKeys = () => {
) : (
- Publishable key can be safely shared in public
+ The publishable key can be safely shared publicly
)}
+ {lint.icon}
+
+
+ {lint.title}
+ {rules.length > 0 && Disabled }
+
+
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/Branching2Preview.tsx b/apps/studio/components/interfaces/App/FeaturePreview/Branching2Preview.tsx
new file mode 100644
index 00000000000..88911c2d4b0
--- /dev/null
+++ b/apps/studio/components/interfaces/App/FeaturePreview/Branching2Preview.tsx
@@ -0,0 +1,64 @@
+import Image from 'next/image'
+
+import { InlineLink } from 'components/ui/InlineLink'
+import { BASE_PATH } from 'lib/constants'
+
+export const Branching2Preview = () => {
+ return (
+ + Disable specific Advisor categories or rules to prevent them from showing up in Advisor + reports or email notifications. This could be useful for rules that might not be applicable + to your project. +
+
+
+ Enabling this preview will:
+-
+
-
+ Allow you to disable advisor rules for your project from the{' '}
+
+ Advisors section. + +
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx
index 2db32d6c747..4433c5b3895 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx
@@ -1,6 +1,20 @@
import { LOCAL_STORAGE_KEYS } from 'common'
export const FEATURE_PREVIEWS = [
+ {
+ key: LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS,
+ name: 'New Logs Interface',
+ discussionsUrl: 'https://github.com/orgs/supabase/discussions/37234',
+ isNew: true,
+ isPlatformOnly: true,
+ },
+ {
+ key: LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0,
+ name: 'Branching 2.0',
+ discussionsUrl: 'https://github.com/orgs/supabase/discussions/branching-2-0',
+ isNew: true,
+ isPlatformOnly: true,
+ },
{
key: LOCAL_STORAGE_KEYS.UI_PREVIEW_REALTIME_SETTINGS,
name: 'Realtime settings',
@@ -8,6 +22,13 @@ export const FEATURE_PREVIEWS = [
isNew: true,
isPlatformOnly: true,
},
+ {
+ key: LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES,
+ name: 'Disable Advisor rules',
+ discussionsUrl: undefined,
+ isNew: true,
+ isPlatformOnly: true,
+ },
{
key: LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR,
name: 'Directly edit database entities',
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
index 01ed929dc86..0ab0b040922 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
@@ -1,7 +1,17 @@
import { noop } from 'lodash'
-import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
+import { useQueryState } from 'nuqs'
+import {
+ PropsWithChildren,
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react'
import { FeatureFlagContext, LOCAL_STORAGE_KEYS } from 'common'
+import { useFlag, useIsRealtimeSettingsFFEnabled } from 'hooks/ui/useFlag'
import { EMPTY_OBJ } from 'lib/void'
import { FEATURE_PREVIEWS } from './FeaturePreview.constants'
@@ -80,7 +90,111 @@ export const useIsInlineEditorEnabled = () => {
return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR]
}
+export const useUnifiedLogsPreview = () => {
+ const { flags, onUpdateFlag } = useFeaturePreviewContext()
+ const isEnabled = flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]
+ const enable = () => onUpdateFlag(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS, true)
+ const disable = () => onUpdateFlag(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS, false)
+ return { isEnabled, enable, disable }
+}
+
export const useIsRealtimeSettingsEnabled = () => {
const { flags } = useFeaturePreviewContext()
return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_REALTIME_SETTINGS]
}
+
+export const useIsBranching2Enabled = () => {
+ const { flags } = useFeaturePreviewContext()
+ return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]
+}
+
+export const useIsAdvisorRulesEnabled = () => {
+ const { flags } = useFeaturePreviewContext()
+ return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES]
+}
+
+export const useFeaturePreviewModal = () => {
+ const [featurePreviewModal, setFeaturePreviewModal] = useQueryState('featurePreviewModal')
+
+ const isRealtimeSettingsEnabled = useIsRealtimeSettingsFFEnabled()
+ const gitlessBranchingEnabled = useFlag('gitlessBranching')
+ const advisorRulesEnabled = useFlag('advisorRules')
+ const isUnifiedLogsPreviewAvailable = useFlag('unifiedLogs')
+
+ const selectedFeatureKeyFromQuery = featurePreviewModal?.trim() ?? null
+ const showFeaturePreviewModal = selectedFeatureKeyFromQuery !== null
+
+ // [Joshen] Use this if we want to feature flag previews
+ const isFeaturePreviewReleasedToPublic = useCallback(
+ (feature: (typeof FEATURE_PREVIEWS)[number]) => {
+ switch (feature.key) {
+ case 'supabase-ui-realtime-settings':
+ return isRealtimeSettingsEnabled
+ case 'supabase-ui-branching-2-0':
+ return gitlessBranchingEnabled
+ case 'supabase-ui-advisor-rules':
+ return advisorRulesEnabled
+ case 'supabase-ui-preview-unified-logs':
+ return isUnifiedLogsPreviewAvailable
+ default:
+ return true
+ }
+ },
+ [
+ isRealtimeSettingsEnabled,
+ gitlessBranchingEnabled,
+ advisorRulesEnabled,
+ isUnifiedLogsPreviewAvailable,
+ ]
+ )
+
+ const selectedFeatureKey = (
+ !selectedFeatureKeyFromQuery
+ ? FEATURE_PREVIEWS.filter((feature) => isFeaturePreviewReleasedToPublic(feature))[0].key
+ : selectedFeatureKeyFromQuery
+ ) as (typeof FEATURE_PREVIEWS)[number]['key']
+
+ const selectFeaturePreview = useCallback(
+ (featureKey: (typeof FEATURE_PREVIEWS)[number]['key']) => {
+ setFeaturePreviewModal(featureKey)
+ },
+ [setFeaturePreviewModal]
+ )
+
+ const openFeaturePreviewModal = useCallback(() => {
+ selectFeaturePreview(selectedFeatureKey)
+ }, [selectFeaturePreview, selectedFeatureKey])
+
+ const closeFeaturePreviewModal = useCallback(() => {
+ setFeaturePreviewModal(null)
+ }, [setFeaturePreviewModal])
+
+ const toggleFeaturePreviewModal = useCallback(() => {
+ if (showFeaturePreviewModal) {
+ closeFeaturePreviewModal()
+ } else {
+ openFeaturePreviewModal()
+ }
+ }, [showFeaturePreviewModal, openFeaturePreviewModal, closeFeaturePreviewModal])
+
+ return useMemo(
+ () => ({
+ showFeaturePreviewModal,
+ selectedFeatureKey,
+ selectFeaturePreview,
+ openFeaturePreviewModal,
+ closeFeaturePreviewModal,
+ toggleFeaturePreviewModal,
+ isFeaturePreviewReleasedToPublic,
+ }),
+ [
+ showFeaturePreviewModal,
+ selectedFeatureKey,
+ selectFeaturePreview,
+ openFeaturePreviewModal,
+ closeFeaturePreviewModal,
+ toggleFeaturePreviewModal,
+ isFeaturePreviewReleasedToPublic,
+ ]
+ )
+}
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
index 477392fa4f6..ba83954fe4b 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -5,52 +5,46 @@ import { ReactNode } from 'react'
import { LOCAL_STORAGE_KEYS, useParams } from 'common'
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import { useIsRealtimeSettingsFFEnabled } from 'hooks/ui/useFlag'
import { IS_PLATFORM } from 'lib/constants'
-import { useAppStateSnapshot } from 'state/app-state'
import { Badge, Button, Modal, ScrollArea, cn } from 'ui'
+import { AdvisorRulesPreview } from './AdvisorRulesPreview'
import { APISidePanelPreview } from './APISidePanelPreview'
+import { Branching2Preview } from './Branching2Preview'
import { CLSPreview } from './CLSPreview'
import { FEATURE_PREVIEWS } from './FeaturePreview.constants'
-import { useFeaturePreviewContext } from './FeaturePreviewContext'
+import { useFeaturePreviewContext, useFeaturePreviewModal } from './FeaturePreviewContext'
import { InlineEditorPreview } from './InlineEditorPreview'
import { RealtimeSettingsPreview } from './RealtimeSettingsPreview'
+import { UnifiedLogsPreview } from './UnifiedLogsPreview'
const FEATURE_PREVIEW_KEY_TO_CONTENT: {
[key: string]: ReactNode
} = {
+ [LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]:
+ Branching 2.0 introduces a new workflow for managing database branches without having to use
+ Git. Create branches, review changes and merge back into production all through the
+ dashboard. Read the below limitations and our{' '}
+
+
+
+ Limitations:
+-
+
- Custom roles created through the dashboard are not captured on branch creation. +
-
+ Only
publicschema changes are supported right now. +
+ - Extensions are not included in the diff process +
-
+ Branches can only be merged to
main; merging between preview branches is + not supported. +
+ -
+ If your branch is out of date, you can pull in latest changes from
main, + but keep in mind that all functions will be overwritten. +
+ -
+ Deleting functions must be done manually on
main. +
+ - Migration conflicts must be manually resolved on the preview branch. +
-
+ If you have run migrations on
main, new branches will be created from + existing migrations instead of a full schema dump. +
+
+
+ Enabling this preview will:
+-
+
- Enable the new Branching 2.0 workflow for your project. +
- + Allow you to create, manage, and merge database branches with improved UI and features. + +
- Access new merge request and deployment management tools. +
snap.setSelectedFeaturePreview(feature.key)}
+ onClick={() => selectFeaturePreview(feature.key)}
className={cn(
'flex items-center space-x-3 p-4 border-b cursor-pointer bg transition',
- selectedFeatureKey === feature.key ? 'bg-surface-300' : 'bg-surface-100'
+ selectedFeature.key === feature.key ? 'bg-surface-300' : 'bg-surface-100'
)}
>
{isEnabled ? (
@@ -130,7 +120,7 @@ const FeaturePreviewModal = () => {
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
index cbb8fea06b1..01849b8ae84 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
@@ -2,7 +2,7 @@ import { isEmpty, noop } from 'lodash'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
-import { useAppStateSnapshot } from 'state/app-state'
+import { useFeaturePreviewModal } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { Modal } from 'ui'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { POLICY_MODAL_VIEWS } from '../Policies.constants'
@@ -47,7 +47,7 @@ const PolicyEditorModal = ({
onUpdatePolicy,
onSaveSuccess = noop,
}: PolicyEditorModalProps) => {
- const snap = useAppStateSnapshot()
+ const { toggleFeaturePreviewModal } = useFeaturePreviewModal()
const newPolicyTemplate: PolicyFormField = {
schema,
@@ -95,7 +95,7 @@ const PolicyEditorModal = ({
const onSelectBackFromTemplates = () => setView(previousView)
const onToggleFeaturePreviewModal = () => {
- snap.setShowFeaturePreviewModal(!snap.showFeaturePreviewModal)
+ toggleFeaturePreviewModal()
onSelectCancel()
}
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
deleted file mode 100644
index c8637b7f443..00000000000
--- a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
+++ /dev/null
@@ -1,440 +0,0 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { partition } from 'lodash'
-import { GitMerge, MessageCircle } from 'lucide-react'
-import { useRouter } from 'next/router'
-import { useState } from 'react'
-import { toast } from 'sonner'
-
-import { useParams } from 'common'
-import { GitHubStatus } from 'components/interfaces/Settings/Integrations/GithubIntegration/GitHubStatus'
-import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
-import AlertError from 'components/ui/AlertError'
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { DocsButton } from 'components/ui/DocsButton'
-import NoPermission from 'components/ui/NoPermission'
-import { useBranchDeleteMutation } from 'data/branches/branch-delete-mutation'
-import { useBranchesDisableMutation } from 'data/branches/branches-disable-mutation'
-import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
-import { Branch, useBranchesQuery } from 'data/branches/branches-query'
-import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-query'
-import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import { useSelectedProject } from 'hooks/misc/useSelectedProject'
-import { useFlag } from 'hooks/ui/useFlag'
-import { useUrlState } from 'hooks/ui/useUrlState'
-import { useAppStateSnapshot } from 'state/app-state'
-import { Button } from 'ui'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
-import { BranchLoader, BranchManagementSection, BranchRow } from './BranchPanels'
-import { BranchSelector } from './BranchSelector'
-import { PreviewBranchesEmptyState, PullRequestsEmptyState } from './EmptyStates'
-import { Overview } from './Overview'
-import { ReviewRow } from './ReviewRow'
-
-type Tab = 'overview' | 'prs' | 'branches'
-
-const BranchManagement = () => {
- const router = useRouter()
- const { ref } = useParams()
- const project = useSelectedProject()
- const selectedOrg = useSelectedOrganization()
- const gitlessBranching = useFlag('gitlessBranching')
-
- const hasBranchEnabled = project?.is_branch_enabled
-
- const isBranch = project?.parent_project_ref !== undefined
- const projectRef =
- project !== undefined ? (isBranch ? project.parent_project_ref : ref) : undefined
-
- const [urlParams, setParams] = useUrlState<{ tab: Tab }>()
- const tab = urlParams.tab ?? 'overview'
- const setTab = (tab: Tab) => setParams({ tab })
-
- const snap = useAppStateSnapshot()
-
- const [showDisableBranching, setShowDisableBranching] = useState(false)
- const [selectedBranchToDelete, setSelectedBranchToDelete] = useState+ Experience our enhanced logs interface with improved filtering, real-time updates, and a + unified view across all your services. Built for better performance and easier debugging. +
+
+
+ Enabling this preview will:
+-
+
-
+ Replace the current logs interface on the{' '}
+
logs page with a unified view +
+ - Provide enhanced filtering capabilities and real-time log streaming +
- Improve performance with optimized data loading and virtualization +
- Offer a more modern interface with better search and navigation +
-
- {isLoadingBranches && snap.setShowCreateBranchModal(true)}
- />
- )}
- {isSuccessBranches &&
- previewBranches.map((branch) => {
- return (
- setSelectedBranchToDelete(branch)}
- />
- )
- })}
-
- )}
-
- )}
-
- )}
-
- Branches
- -
- setTab('branches')}
- onSelectCreateBranch={() => snap.setShowCreateBranchModal(true)}
- onSelectDeleteBranch={setSelectedBranchToDelete}
- generateCreatePullRequestURL={generateCreatePullRequestURL}
- showProductionBranch={hasBranchEnabled}
- />
- )}
- {tab === 'prs' && (
-
- {branchesWithPRs.length > 0 ? (
- branchesWithPRs.map((branch) => {
- return (
- setSelectedBranchToDelete(branch)}
- />
- )
- })
- ) : (
- 0}
- githubConnection={githubConnection}
- gitlessBranching={gitlessBranching}
- />
- )}
-
-
- )}
- {tab === 'branches' && (
-
-
-
- {!canReadBranches ? (
-
-
-
-
-
-
- }
- >
-
- Branching Feedback
-
-
- snap.setShowCreateBranchModal(true)}
- tooltip={{
- content: {
- side: 'bottom',
- text: !canCreateBranches
- ? 'You need additional permissions to create branches'
- : undefined,
- },
- }}
- >
- Create branch
-
-
-
- {gitlessBranching && (
-
-
- {branchesReadyForReview.length} branches ready for review
-
-
- }
- >
- {isBranch && !isCurrentBranchReadyForReview && currentBranch && (
-
-
- )}
- {branchesReadyForReview.length > 0 ? (
- branchesReadyForReview.map((branch) => {
- return
-
-
-
-
-
- No branches are currently ready for review
-
- )}
-
- )}
- Before you disable branching, consider:
--
-
- Your project no longer requires database previews. -
- - None of your database previews are currently being used in any app. - -
-
+
+
)
@@ -93,344 +61,78 @@ export const BranchLoader = () => {
interface BranchRowProps {
repo: string
+ label?: string | ReactNode
branch: Branch
- isMain?: boolean
- generateCreatePullRequestURL?: (branchName?: string) => string
- onSelectDeleteBranch: () => void
+ rowLink?: string
+ external?: boolean
+ rowActions?: ReactNode
}
export const BranchRow = ({
branch,
- isMain = false,
+ label,
repo,
- generateCreatePullRequestURL,
- onSelectDeleteBranch,
+ rowLink,
+ external = false,
+ rowActions,
}: BranchRowProps) => {
- const { ref: projectRef } = useParams()
- const isActive = projectRef === branch?.project_ref
- const gitlessBranching = useFlag('gitlessBranching')
-
- const canDeleteBranches = useCheckPermissions(PermissionAction.DELETE, 'preview_branches')
- const canUpdateBranches = useCheckPermissions(PermissionAction.UPDATE, 'preview_branches')
+ const router = useRouter()
+ const page = router.pathname.split('/').pop()
const daysFromNow = dayjs().diff(dayjs(branch.updated_at), 'day')
const formattedTimeFromNow = dayjs(branch.updated_at).fromNow()
const formattedUpdatedAt = dayjs(branch.updated_at).format('DD MMM YYYY, HH:mm:ss (ZZ)')
- const createPullRequestURL =
- generateCreatePullRequestURL?.(branch.git_branch) ?? 'https://github.com'
+ const navigateUrl = rowLink ?? `/project/${branch.project_ref}`
- const { ref, inView } = useInView()
- const { data } = useBranchQuery(
- { projectRef, id: branch.id },
- {
- enabled: inView,
- refetchInterval(data) {
- if (data?.status !== 'ACTIVE_HEALTHY') {
- return 1000 * 3 // 3 seconds
- }
-
- return false
- },
+ const handleRowClick = () => {
+ if (external) {
+ window.open(navigateUrl, '_blank', 'noopener noreferrer')
+ } else {
+ router.push(navigateUrl)
}
- )
-
- const isBranchActiveHealthy = data?.status === 'ACTIVE_HEALTHY'
-
- const [showConfirmResetModal, setShowConfirmResetModal] = useState(false)
- const [showBranchModeSwitch, setShowBranchModeSwitch] = useState(false)
- const [showEditBranchModal, setShowEditBranchModal] = useState(false)
-
- const { mutate: updateBranch, isLoading: isUpdating } = useBranchUpdateMutation({
- onSuccess() {
- toast.success('Successfully updated branch')
- setShowBranchModeSwitch(false)
- },
- })
-
- const onUpdateBranchPersistentMode = () => {
- if (projectRef == undefined) return console.error('Project ref is required')
- updateBranch({ id: branch.id, projectRef, persistent: !branch.persistent })
- }
-
- const { mutate: resetBranch, isLoading: isResetting } = useBranchResetMutation({
- onSuccess() {
- toast.success('Success! Please allow a few seconds for the branch to reset.')
- setShowConfirmResetModal(false)
- },
- })
-
- function onConfirmReset() {
- if (!projectRef) throw new Error('Invalid project reference')
- resetBranch({ id: branch.id, projectRef })
}
return (
-
{typeof header === 'string' ? {header} : header}
- {children}
+
+ {children}
+
{footer !== undefined && {footer}
}
+ (null)
@@ -46,16 +48,26 @@ export const BranchSelector = ({
return (
- }
+ type={type}
disabled={disabled || availableBranches.length === 0 || isUpdating}
- icon={
-
+
diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
index 92a6a77db2f..93c82251740 100644
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -1,16 +1,19 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { useQueryClient } from '@tanstack/react-query'
-import { useParams } from 'common'
-import { DollarSign, Github, GitMerge, Loader2, Merge } from 'lucide-react'
+import { DollarSign, GitMerge, Github, Loader2 } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
+import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import * as z from 'zod'
+import { useParams } from 'common'
+import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { BranchingPITRNotice } from 'components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice'
import AlertError from 'components/ui/AlertError'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
import UpgradeToPro from 'components/ui/UpgradeToPro'
import { useBranchCreateMutation } from 'data/branches/branch-create-mutation'
@@ -21,7 +24,6 @@ import { projectKeys } from 'data/projects/keys'
import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { useSelectedProject } from 'hooks/misc/useSelectedProject'
-import { useFlag } from 'hooks/ui/useFlag'
import { BASE_PATH, IS_PLATFORM } from 'lib/constants'
import { useAppStateSnapshot } from 'state/app-state'
import {
@@ -42,7 +44,8 @@ import {
cn,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { useRouter } from 'next/router'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
export const CreateBranchModal = () => {
const { ref } = useParams()
@@ -50,7 +53,7 @@ export const CreateBranchModal = () => {
const queryClient = useQueryClient()
const projectDetails = useSelectedProject()
const selectedOrg = useSelectedOrganization()
- const gitlessBranching = useFlag('gitlessBranching')
+ const gitlessBranching = useIsBranching2Enabled()
const { showCreateBranchModal, setShowCreateBranchModal } = useAppStateSnapshot()
const organization = useSelectedOrganization()
@@ -94,6 +97,8 @@ export const CreateBranchModal = () => {
},
})
+ const canCreateBranch = useCheckPermissions(PermissionAction.CREATE, 'preview_branches')
+
const githubConnection = connections?.find((connection) => connection.project.ref === projectRef)
// Fetch production/default branch to inspect git_branch linkage
@@ -148,6 +153,14 @@ export const CreateBranchModal = () => {
})
const canSubmit = !isCreating && !isChecking
+ const isDisabled =
+ !isSuccessConnections ||
+ isCreating ||
+ !canSubmit ||
+ isChecking ||
+ (!gitlessBranching && !githubConnection) ||
+ promptProPlanUpgrade ||
+ !canCreateBranch
const onSubmit = (data: z.infer) => {
if (!projectRef) return console.error('Project ref is required')
@@ -197,6 +210,7 @@ export const CreateBranchModal = () => {
{
+ setShowEditBranchModal(false)}
- />
)
}
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx b/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
index 3c9b4c277c1..9714d8e5e06 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
@@ -1,9 +1,9 @@
-import { Check, Plus, Shield } from 'lucide-react'
+import { Check, GitMerge, Shield } from 'lucide-react'
import { useState } from 'react'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import { Branch } from 'data/branches/branches-query'
import {
- Button,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
@@ -21,6 +21,7 @@ interface BranchSelectorProps {
onBranchSelected?: (branch: Branch) => void
disabled?: boolean
isUpdating?: boolean
+ type?: 'primary' | 'outline'
}
export const BranchSelector = ({
@@ -28,6 +29,7 @@ export const BranchSelector = ({
onBranchSelected,
disabled = false,
isUpdating = false,
+ type = 'primary',
}: BranchSelectorProps) => {
const [open, setOpen] = useState(false)
const [selectedBranch, setSelectedBranch] = useState
+ {branch.git_branch && (
+
+
+
+ )}
+
+
+
+ {((page === 'branches' && !branch.is_default) || page === 'merge-requests') && (
+
+ {page === 'branches' && !branch.is_default && 'Switch to branch'}
+ {page === 'merge-requests' && 'View merge request'}
+
+ )}
+
+
+ {label || branch.name}
+
+
- Current }
-
- {daysFromNow > 1 ? `Updated on ${formattedUpdatedAt}` : `Updated ${formattedTimeFromNow}`}
+
- {isMain ? (
-
-
-
- {repo && (
- }>
-
- View Repository
-
-
- )}
-
-
- } className="px-1" />
-
-
- {repo ? (
-
-
- Change production branch
-
-
- ) : (
-
-
- setShowEditBranchModal(true)}
- onClick={() => setShowEditBranchModal(true)}
- >
-
-
- {(!canUpdateBranches || !isBranchActiveHealthy) && (
-
- {!canUpdateBranches
- ? 'You need additional permissions to edit branches'
- : 'Branch is still initializing. Please wait for the branch to become healthy before editing.'}
-
- )}
-
- )}
-
-
-
- ) : (
-
- {branch.git_branch && branch.pr_number === undefined ? (
- }>
-
- Create Pull Request
-
-
- ) : branch.pr_number !== undefined ? (
-
-
- } className="px-1" />
-
-
-
-
- setShowConfirmResetModal(true)}
- onClick={() => setShowConfirmResetModal(true)}
- disabled={isResetting || !isBranchActiveHealthy}
- >
-
-
- {!isBranchActiveHealthy && (
-
- Branch is still initializing. Please wait for the branch to become healthy
- before resetting
-
- )}
-
-
-
- setShowBranchModeSwitch(true)}
- onClick={() => setShowBranchModeSwitch(true)}
- disabled={!isBranchActiveHealthy}
- >
- {branch.persistent ? (
- <>
-
-
- {!isBranchActiveHealthy && (
-
- Branch is still initializing. Please wait for the branch to become healthy
- before switching modes
-
- )}
-
- {gitlessBranching && (
-
-
- setShowEditBranchModal(true)}
- onClick={() => setShowEditBranchModal(true)}
- >
-
-
- {(!canUpdateBranches || !isBranchActiveHealthy) && (
-
- {!canUpdateBranches
- ? 'You need additional permissions to edit branches'
- : 'Branch is still initializing. Please wait for the branch to become healthy before editing.'}
-
- )}
-
- )}
-
-
-
- onSelectDeleteBranch?.()}
- onClick={() => onSelectDeleteBranch?.()}
- >
-
-
- {!canDeleteBranches && (
-
- You need additional permissions to delete branches
-
- )}
-
-
-
-
- {
- setShowConfirmResetModal(false)
- }}
- onConfirm={onConfirmReset}
- >
-
-
- {
- setShowBranchModeSwitch(false)
- }}
- onConfirm={onUpdateBranchPersistentMode}
- >
-
-
- )}
-
-
-
- ) : null}
- - Are you sure you want to reset the "{branch.name}" branch? All data will be deleted. -
-
- Are you sure you want to switch the branch "{branch.name}" to{' '}
- {branch.persistent ? 'ephemeral' : 'persistent'} mode?
-
-
- {branch.persistent
- ? 'Ephemeral branches will be deleted once the underlying PR closes.'
- : 'Persistent branches will remain active even after the underlying PR is closed.'}
-
-
-
+
+ }
+ className="mt-0"
+ onClick={() => {
+ if (!diffContent) return
+ const now = new Date()
+ const pad = (n: number) => n.toString().padStart(2, '0')
+ const timestamp =
+ now.getFullYear().toString() +
+ pad(now.getMonth() + 1) +
+ pad(now.getDate()) +
+ pad(now.getHours()) +
+ pad(now.getMinutes()) +
+ pad(now.getSeconds())
+ const filename = `${timestamp}_migration.sql`
+ const blob = new Blob([diffContent], { type: 'text/plain;charset=utf-8;' })
+ const url = window.URL.createObjectURL(blob)
+ const a = document.createElement('a')
+ a.href = url
+ a.setAttribute('download', filename)
+ document.body.appendChild(a)
+ a.click()
+ document.body.removeChild(a)
+ window.URL.revokeObjectURL(url)
+ toast.success('Migration file downloaded!')
+ }}
+ >
+ Download as migration
+
- Preview branches are billed $0.01344 per hour -
+Branches are billed $0.01344 per hour
This cost will continue for as long as the branch has not been removed.
@@ -367,22 +379,24 @@ export const CreateBranchModal = () => { > Cancel - + diff --git a/apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx b/apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx index 3b116c90e79..4748365eeaa 100644 --- a/apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx +++ b/apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx @@ -1,6 +1,7 @@ import Link from 'next/link' -import { CircleAlert, Database, Wind } from 'lucide-react' -import { Card, CardContent, CardHeader, CardTitle, Skeleton } from 'ui' +import { CircleAlert, Database, Download, Wind } from 'lucide-react' +import { Card, CardContent, CardHeader, CardTitle, Skeleton, Button } from 'ui' +import { toast } from 'sonner' import DiffViewer from 'components/ui/DiffViewer' @@ -45,7 +46,7 @@ const DatabaseDiffPanel = ({ return (-
- {fileInfos.map((fileInfo) => (
-
- -