chore(studio): clearer foreign tables (supabase#40411)

dnywh · web-flow · commit bf8641ad334f · 2025-11-13T21:24:46.000+11:00
* clean up admonition

* legible foreign entity type on light mode

* entity icon instances with tooltip
diff --git a/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx b/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>
diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/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>
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/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 () => {
diff --git a/apps/studio/components/ui/EntityTypeIcon.tsx b/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'
       )}
diff --git a/apps/studio/styles/typography.scss b/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;
+  }
 }

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