[pull] master from supabase:master

.github/CODEOWNERS

@@ -2,7 +2,7 @@
 /packages/shared-data/pricing.ts @roryw10 @supabase/billing
 /packages/shared-data/plans.ts @roryw10 @supabase/billing
 /packages/common/telemetry-constants.ts @supabase/growth-eng
-/packages/pg-meta @supabase/postgres
+/packages/pg-meta @supabase/postgres @avallete
 
 /apps/studio/ @supabase/Dashboard
 

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx

@@ -28,10 +28,13 @@ export const useFeaturePreviewContext = () => useContext(FeaturePreviewContext)
 
 export const FeaturePreviewContextProvider = ({ children }: PropsWithChildren<{}>) => {
   const { hasLoaded } = useContext(FeatureFlagContext)
+  const securityNotificationsFlag = useFlag('securityNotifications')
 
   // [Joshen] Similar logic to feature flagging previews, we can use flags to default opt in previews
   const isDefaultOptIn = (feature: (typeof FEATURE_PREVIEWS)[number]) => {
     switch (feature.key) {
+      case LOCAL_STORAGE_KEYS.UI_PREVIEW_SECURITY_NOTIFICATIONS:
+        return securityNotificationsFlag
       default:
         return false
     }
@@ -116,7 +119,6 @@ export const useFeaturePreviewModal = () => {
   const gitlessBranchingEnabled = useFlag('gitlessBranching')
   const advisorRulesEnabled = useFlag('advisorRules')
   const isUnifiedLogsPreviewAvailable = useFlag('unifiedLogs')
-  const isSecurityNotificationsAvailable = useFlag('securityNotifications')
 
   const selectedFeatureKeyFromQuery = featurePreviewModal?.trim() ?? null
   const showFeaturePreviewModal = selectedFeatureKeyFromQuery !== null
@@ -131,18 +133,11 @@ export const useFeaturePreviewModal = () => {
           return advisorRulesEnabled
         case 'supabase-ui-preview-unified-logs':
           return isUnifiedLogsPreviewAvailable
-        case 'security-notifications':
-          return isSecurityNotificationsAvailable
         default:
           return true
       }
     },
-    [
-      gitlessBranchingEnabled,
-      advisorRulesEnabled,
-      isUnifiedLogsPreviewAvailable,
-      isSecurityNotificationsAvailable,
-    ]
+    [gitlessBranchingEnabled, advisorRulesEnabled, isUnifiedLogsPreviewAvailable]
   )
 
   const selectedFeatureKey = (

apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx

@@ -10,7 +10,6 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  cn,
 } from 'ui'
 
 import { INTERNAL_SCHEMAS, useIsProtectedSchema } from 'hooks/useProtectedSchemas'
@@ -71,20 +70,17 @@ export const ProtectedSchemaWarning = ({
 
   return (
     <Admonition
-      showIcon={false}
+      showIcon={size === 'sm' ? false : true}
       type="note"
       title={
         size === 'sm' ? `Viewing protected schema` : `Viewing ${entity} from a protected schema`
       }
-      className={cn(
-        '[&>div>p]:prose [&>div>p]:max-w-full [&>div>p]:!leading-normal',
-        size === 'sm' ? '[&>div>p]:text-xs' : '[&>div>p]:text-sm'
-      )}
+      className="[&_p]:!m-0"
     >
       {reason === 'fdw' && fdwType === 'iceberg' ? (
         <p>
-          The <code className="text-xs">{schema}</code> schema is used by Supabase to connect to
-          analytics buckets and is read-only through the dashboard.
+          The <code className="text-code-inline">{schema}</code> schema is used by Supabase to
+          connect to analytics buckets and is read-only through the dashboard.
         </p>
       ) : reason === 'fdw' && fdwType === 's3_vectors' ? (
         <p>
@@ -94,8 +90,8 @@ export const ProtectedSchemaWarning = ({
       ) : (
         <>
           <p className="mb-2">
-            The <code className="text-xs">{schema}</code> schema is managed by Supabase and is
-            read-only through the dashboard.
+            The <code className="text-code-inline">{schema}</code> schema is managed by Supabase and
+            is read-only through the dashboard.
           </p>
           <Dialog open={showModal} onOpenChange={setShowModal}>
             <DialogTrigger asChild>

apps/studio/components/interfaces/Database/Tables/TableList.tsx

@@ -11,7 +11,6 @@ import {
   MoreVertical,
   Plus,
   Search,
-  Table2,
   Trash,
   X,
 } from 'lucide-react'
@@ -24,6 +23,7 @@ import { LOAD_TAB_FROM_CACHE_PARAM } from 'components/grid/SupabaseGrid.utils'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
+import { EntityTypeIcon } from 'components/ui/EntityTypeIcon'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
@@ -60,7 +60,6 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-  cn,
 } from 'ui'
 import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning'
 import { formatAllEntities } from './Tables.utils'
@@ -206,11 +205,14 @@ export const TableList = ({
     isSuccessTables && isSuccessViews && isSuccessMaterializedViews && isSuccessForeignTables
 
   const formatTooltipText = (entityType: string) => {
-    return Object.entries(ENTITY_TYPE)
-      .find(([, value]) => value === entityType)?.[0]
-      ?.toLowerCase()
-      ?.split('_')
-      ?.join(' ')
+    const text =
+      Object.entries(ENTITY_TYPE)
+        .find(([, value]) => value === entityType)?.[0]
+        ?.toLowerCase()
+        ?.split('_')
+        ?.join(' ') || ''
+    // Return sentence case (capitalize first letter only)
+    return text.charAt(0).toUpperCase() + text.slice(1)
   }
 
   return (
@@ -383,40 +385,14 @@ export const TableList = ({
                       <TableRow key={x.id}>
                         <TableCell className="!pl-5 !pr-1">
                           <Tooltip>
-                            <TooltipTrigger asChild>
-                              {x.type === ENTITY_TYPE.TABLE ? (
-                                <Table2
-                                  size={15}
-                                  strokeWidth={1.5}
-                                  className="text-foreground-lighter"
-                                />
-                              ) : x.type === ENTITY_TYPE.VIEW ? (
-                                <Eye
-                                  size={15}
-                                  strokeWidth={1.5}
-                                  className="text-foreground-lighter"
-                                />
-                              ) : (
-                                <div
-                                  className={cn(
-                                    'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
-                                    x.type === ENTITY_TYPE.FOREIGN_TABLE &&
-                                      'text-yellow-900 bg-yellow-500',
-                                    x.type === ENTITY_TYPE.MATERIALIZED_VIEW &&
-                                      'text-purple-1000 bg-purple-500'
-                                    // [Alaister]: tables endpoint doesn't distinguish between tables and partitioned tables
-                                    // once we update the endpoint to include partitioned tables, we can uncomment this
-                                    // x.type === ENTITY_TYPE.PARTITIONED_TABLE &&
-                                    //   'text-foreground-light bg-border-stronger'
-                                  )}
-                                >
-                                  {Object.entries(ENTITY_TYPE)
-                                    .find(([, value]) => value === x.type)?.[0]?.[0]
-                                    ?.toUpperCase()}
-                                </div>
-                              )}
+                            <TooltipTrigger className="cursor-default">
+                              {/* [Alaister]: EntityTypeIcon supports PARTITIONED_TABLE, but formatAllEntities
+                                  doesn't distinguish between tables and partitioned tables yet.
+                                  Once the endpoint/formatAllEntities is updated to include partitioned tables,
+                                  EntityTypeIcon will automatically style them correctly. */}
+                              <EntityTypeIcon type={x.type} />
                             </TooltipTrigger>
-                            <TooltipContent side="bottom" className="capitalize">
+                            <TooltipContent side="bottom">
                               {formatTooltipText(x.type)}
                             </TooltipContent>
                           </Tooltip>

apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx

@@ -122,11 +122,14 @@ const EntityListItem = ({
   ).hasLint
 
   const formatTooltipText = (entityType: string) => {
-    return Object.entries(ENTITY_TYPE)
-      .find(([, value]) => value === entityType)?.[0]
-      ?.toLowerCase()
-      ?.split('_')
-      ?.join(' ')
+    const text =
+      Object.entries(ENTITY_TYPE)
+        .find(([, value]) => value === entityType)?.[0]
+        ?.toLowerCase()
+        ?.split('_')
+        ?.join(' ') || ''
+    // Return sentence case (capitalize first letter only)
+    return text.charAt(0).toUpperCase() + text.slice(1)
   }
 
   const exportTableAsCSV = async () => {

apps/studio/components/ui/EntityTypeIcon.tsx

@@ -67,7 +67,8 @@ export const EntityTypeIcon = ({
     <div
       className={cn(
         'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
-        type === ENTITY_TYPE.FOREIGN_TABLE && 'text-yellow-900 bg-yellow-500',
+        type === ENTITY_TYPE.FOREIGN_TABLE &&
+          'text-warning-600/80 dark:text-yellow-900 bg-yellow-500',
         type === ENTITY_TYPE.MATERIALIZED_VIEW && 'text-purple-1000 bg-purple-500',
         type === ENTITY_TYPE.PARTITIONED_TABLE && 'text-foreground-light bg-border-stronger'
       )}

apps/studio/styles/typography.scss

@@ -78,4 +78,8 @@
   .text-link-table-cell {
     @apply truncate cursor-pointer underline underline-offset-4 decoration-foreground-muted/50 hover:decoration-foreground-lighter/80 transition-colors duration-100;
   }
+
+  .text-code-inline {
+    @apply break-all text-xs tracking-tight bg-surface-200 border border-muted rounded-md px-1 py-0.5 text-foreground font-medium;
+  }
 }