POC for revised RLS page (#29401)

* POC for revised RLS page

* nudge colours

* Nudges

* Colour nudge

apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx

@@ -58,13 +58,16 @@ const PolicyRow = ({
             <Badge color="yellow">Applies to anonymous users</Badge>
           ) : null}
         </div>
-        <div className="flex items-center gap-x-1">
-          <p className="text-foreground-light text-sm">Applied to:</p>
-          {policy.roles.slice(0, 3).map((role, i) => (
-            <code key={`policy-${role}-${i}`} className="text-foreground-light text-xs">
-              {role}
-            </code>
-          ))}
+        <div className="flex items-center gap-x-1 ml-[60px]">
+          <div className="text-foreground-lighter text-sm">
+            Applied to:
+            {policy.roles.slice(0, 3).map((role, i) => (
+              <code key={`policy-${role}-${i}`} className="text-foreground-light text-xs">
+                {role}
+              </code>
+            ))}{' '}
+            role
+          </div>
           {policy.roles.length > 3 && (
             <Tooltip_Shadcn_>
               <TooltipTrigger_Shadcn_ asChild>

apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx

@@ -1,7 +1,7 @@
 import type { PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
-import { Lock } from 'lucide-react'
+import { Lock, Unlock } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
@@ -36,7 +36,16 @@ const PolicyTableRowHeader = ({
   return (
     <div id={table.id.toString()} className="flex w-full items-center justify-between">
       <div className="flex gap-x-4 text-left">
-        <Link href={`/project/${ref}/editor/${table.id}`}>
+        <Link href={`/project/${ref}/editor/${table.id}`} className="flex items-center gap-x-2">
+          {table.rls_enabled ? (
+            <div className="flex items-center gap-x-1 text-xs">
+              <Lock size={14} strokeWidth={2} className="text-brand" />
+            </div>
+          ) : (
+            <div className="flex items-center gap-x-1 text-xs">
+              <Unlock size={14} strokeWidth={2} className="text-warning-600" />
+            </div>
+          )}
           <h4 className="m-0">{table.name}</h4>
         </Link>
         <div className="flex items-center gap-x-2">
@@ -47,9 +56,6 @@ const PolicyTableRowHeader = ({
               </span>
             </Badge>
           )}
-          <Badge variant={table.rls_enabled ? 'brand' : 'warning'}>
-            {table.rls_enabled ? 'Row Level Security enabled' : 'Row Level Security disabled'}
-          </Badge>
         </div>
       </div>
       {!isTableLocked && (

apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx

@@ -1,11 +1,11 @@
 import type { PostgresPolicy, PostgresTable } from '@supabase/postgres-meta'
 import { noop } from 'lodash'
-import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { WarningIcon } from 'ui'
 import Panel from 'components/ui/Panel'
 import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
+import { Info } from 'lucide-react'
+import { cn, Tooltip_Shadcn_, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_ } from 'ui'
 import PolicyRow from './PolicyRow'
 import PolicyTableRowHeader from './PolicyTableRowHeader'
 
@@ -47,38 +47,34 @@ const PolicyTableRow = ({
         />
       }
     >
-      {(!table.rls_enabled || policies.length === 0) && (
-        <div className="px-6 py-4 flex flex-col gap-y-3">
-          {table.rls_enabled && policies.length === 0 && (
-            <Alert_Shadcn_>
-              <WarningIcon />
-              <AlertTitle_Shadcn_>
-                Row Level Security is enabled for this table, but no policies are set
-              </AlertTitle_Shadcn_>
-              <AlertDescription_Shadcn_>
-                Select queries may return 0 results.
-              </AlertDescription_Shadcn_>
-            </Alert_Shadcn_>
-          )}
-          {!table.rls_enabled && !isLocked && (
-            <Alert_Shadcn_ variant="warning">
-              <WarningIcon />
-              <AlertTitle_Shadcn_>
-                Warning: Row Level Security is disabled. Your table is publicly readable and
-                writable.
-              </AlertTitle_Shadcn_>
-              <AlertDescription_Shadcn_>
-                Anyone with the project's anonymous key can modify or delete your data. Enable RLS
-                and create access policies to keep your data secure.
-              </AlertDescription_Shadcn_>
-            </Alert_Shadcn_>
-          )}
-          {policies.length === 0 && (
-            <p className="text-foreground-light text-sm">No policies created yet</p>
+      {!table.rls_enabled && !isLocked && (
+        <div
+          className={cn(
+            'dark:bg-alternative-200 bg-surface-200 px-6 py-2 text-xs flex items-center gap-2',
+            policies.length === 0 ? '' : 'border-b'
           )}
+        >
+          <div className="w-1.5 h-1.5 bg-warning-600 rounded-full" />
+          <span className="font-bold text-warning-600">Warning:</span>{' '}
+          <span className="text-foreground-light">
+            Row Level Security is disabled. Your table is publicly readable and writable.
+          </span>
+          <Tooltip_Shadcn_>
+            <TooltipTrigger_Shadcn_ asChild>
+              <Info className="w-3 h-3" />
+            </TooltipTrigger_Shadcn_>
+            <TooltipContent_Shadcn_ className="w-[400px]">
+              Anyone with the project's anonymous key can modify or delete your data. Enable RLS and
+              create access policies to keep your data secure.
+            </TooltipContent_Shadcn_>
+          </Tooltip_Shadcn_>
+        </div>
+      )}
+      {policies.length === 0 && (
+        <div className="px-6 py-4 flex flex-col gap-y-3">
+          <p className="text-foreground-lighter text-sm">No policies created yet</p>
         </div>
       )}
-
       {policies?.map((policy) => (
         <PolicyRow
           key={policy.id}