fix: Make the padlock red if the entity is insecure in the Table Editor (supabase#37604)

* Make the padlock red.

* Update based on feedback in thread

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: ivasilov

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

@@ -1,5 +1,5 @@
 import saveAs from 'file-saver'
-import { Clipboard, Copy, Download, Edit, Lock, MoreHorizontal, Trash, Unlock } from 'lucide-react'
+import { Clipboard, Copy, Download, Edit, Lock, MoreHorizontal, Trash } from 'lucide-react'
 import Link from 'next/link'
 import Papa from 'papaparse'
 import { toast } from 'sonner'
@@ -29,6 +29,7 @@ import { formatSql } from 'lib/formatSql'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { createTabId, useTabsStateSnapshot } from 'state/tabs'
 import {
+  Badge,
   cn,
   copyToClipboard,
   DropdownMenu,
@@ -251,28 +252,26 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
         </Tooltip>
         <div
           className={cn(
-            'truncate',
-            'overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
+            'truncate overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
             isActive && 'text-foreground'
           )}
         >
           <span
             className={cn(
               isActive ? 'text-foreground' : 'text-foreground-light group-hover:text-foreground',
-              'text-sm',
-              'transition',
-              'truncate'
+              'text-sm transition truncate'
             )}
           >
             {entity.name}
           </span>
-          <EntityTooltipTrigger
-            entity={entity}
-            isActive={isActive}
-            tableHasLints={tableHasLints}
-            viewHasLints={viewHasLints}
-            materializedViewHasLints={materializedViewHasLints}
-          />
+          <div>
+            <EntityTooltipTrigger
+              entity={entity}
+              tableHasLints={tableHasLints}
+              viewHasLints={viewHasLints}
+              materializedViewHasLints={materializedViewHasLints}
+            />
+          </div>
         </div>
 
         {canEdit && (
@@ -425,37 +424,36 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
 
 const EntityTooltipTrigger = ({
   entity,
-  isActive,
   tableHasLints,
   viewHasLints,
   materializedViewHasLints,
 }: {
   entity: Entity
-  isActive: boolean
   tableHasLints: boolean
   viewHasLints: boolean
   materializedViewHasLints: boolean
 }) => {
   let tooltipContent = ''
+  const accessWarning = 'Data is publicly accessible via API'
 
   switch (entity.type) {
     case ENTITY_TYPE.TABLE:
       if (tableHasLints) {
-        tooltipContent = 'RLS disabled'
+        tooltipContent = `${accessWarning} as RLS is disabled`
       }
       break
     case ENTITY_TYPE.VIEW:
       if (viewHasLints) {
-        tooltipContent = 'Security definer view'
+        tooltipContent = `${accessWarning} as this is a Security definer view`
       }
       break
     case ENTITY_TYPE.MATERIALIZED_VIEW:
       if (materializedViewHasLints) {
-        tooltipContent = 'Security definer view'
+        tooltipContent = `${accessWarning} Security definer view`
       }
       break
     case ENTITY_TYPE.FOREIGN_TABLE:
-      tooltipContent = 'RLS is not enforced on foreign tables'
+      tooltipContent = `${accessWarning} as RLS via is not enforced on foreign tables`
       break
     default:
       break
@@ -465,13 +463,9 @@ const EntityTooltipTrigger = ({
     return (
       <Tooltip disableHoverableContent={true}>
         <TooltipTrigger className="min-w-4">
-          <Unlock
-            size={14}
-            strokeWidth={2}
-            className={cn('min-w-4', isActive ? 'text-warning-600' : 'text-warning-500')}
-          />
+          <Badge variant="destructive">Unrestricted</Badge>
         </TooltipTrigger>
-        <TooltipContent side="bottom">
+        <TooltipContent side="bottom" className="max-w-44 text-center">
           <span>{tooltipContent}</span>
         </TooltipContent>
       </Tooltip>