update realtime and storage policies (supabase#38229)

* update realtime and storage policies

* Small refactors

* Tiny fix

* Fix typo

---------

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

Author: SaxonF

apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx

@@ -8,7 +8,7 @@ interface PolicyNameProps {
 
 const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
   return (
-    <div className="flex flex-col md:flew-row gap-4 md:gap-12">
+    <div className="flex flex-col md:flex-row gap-4 md:gap-12">
       <div className="flex md:w-1/3 flex-col space-y-2">
         <label className="text-base text-foreground-light" htmlFor="policy-name">
           Policy name

apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx

@@ -34,7 +34,7 @@ const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps)
   })
 
   return (
-    <div className="flex flex-col md:flew-row gap-4 md:gap-12">
+    <div className="flex flex-col md:flex-row gap-4 md:gap-12">
       <div className="flex md:w-1/3 flex-col space-y-2">
         <label className="text-foreground-light text-base" htmlFor="policy-name">
           Target roles

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

@@ -10,13 +10,13 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import {
   Button,
-  TableRow,
-  TableCell,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  TableCell,
+  TableRow,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -27,12 +27,12 @@ interface PolicyRowProps {
   policy: PostgresPolicy
   onSelectEditPolicy: (policy: PostgresPolicy) => void
   onSelectDeletePolicy: (policy: PostgresPolicy) => void
-  isLocked: boolean
+  isLocked?: boolean
 }
 
-const PolicyRow = ({
+export const PolicyRow = ({
   policy,
-  isLocked: isLockedDefault,
+  isLocked: isLockedDefault = false,
   onSelectEditPolicy = noop,
   onSelectDeletePolicy = noop,
 }: PolicyRowProps) => {
@@ -169,5 +169,3 @@ const PolicyRow = ({
     </TableRow>
   )
 }
-
-export default PolicyRow

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

@@ -26,7 +26,7 @@ interface PolicyTableRowHeaderProps {
   onSelectCreatePolicy: () => void
 }
 
-const PolicyTableRowHeader = ({
+export const PolicyTableRowHeader = ({
   table,
   isLocked,
   onSelectToggleRLS = noop,
@@ -134,5 +134,3 @@ const PolicyTableRowHeader = ({
     </div>
   )
 }
-
-export default PolicyTableRowHeader

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

@@ -20,8 +20,8 @@ import {
   TableRow,
 } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
-import PolicyRow from './PolicyRow'
-import PolicyTableRowHeader from './PolicyTableRowHeader'
+import { PolicyRow } from './PolicyRow'
+import { PolicyTableRowHeader } from './PolicyTableRowHeader'
 
 export interface PolicyTableRowProps {
   table: {

apps/studio/components/interfaces/Realtime/Policies.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react'
 import { Policies } from 'components/interfaces/Auth/Policies/Policies'
 import { PolicyEditorPanel } from 'components/interfaces/Auth/Policies/PolicyEditorPanel'
 import AlertError from 'components/ui/AlertError'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
@@ -30,34 +29,26 @@ export const RealtimePolicies = () => {
   const filteredTables = (tables ?? []).filter((table) => table.name === 'messages')
 
   return (
-    <div className="flex min-h-full w-full flex-col p-4 gap-y-4">
-      <FormHeader
-        className="!mb-0"
-        title="Realtime policies"
-        description="You can use RLS policies to control access to Realtime Channels"
-      />
-
+    <>
       {isLoading && <GenericSkeletonLoader />}
 
       {isError && <AlertError error={error} subject="Failed to retrieve tables" />}
 
       {isSuccess && (
-        <div className="space-y-4">
-          <Policies
-            schema="realtime"
-            tables={filteredTables}
-            hasTables
-            isLocked={false}
-            onSelectCreatePolicy={() => {
-              setSelectedPolicyToEdit(undefined)
-              setShowPolicyEditor(true)
-            }}
-            onSelectEditPolicy={(policy) => {
-              setSelectedPolicyToEdit(policy)
-              setShowPolicyEditor(true)
-            }}
-          />
-        </div>
+        <Policies
+          schema="realtime"
+          tables={filteredTables}
+          hasTables
+          isLocked={false}
+          onSelectCreatePolicy={() => {
+            setSelectedPolicyToEdit(undefined)
+            setShowPolicyEditor(true)
+          }}
+          onSelectEditPolicy={(policy) => {
+            setSelectedPolicyToEdit(policy)
+            setShowPolicyEditor(true)
+          }}
+        />
       )}
 
       <PolicyEditorPanel
@@ -68,6 +59,6 @@ export const RealtimePolicies = () => {
         onSelectCancel={() => setShowPolicyEditor(false)}
         authContext="realtime"
       />
-    </div>
+    </>
   )
 }

apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx

@@ -18,7 +18,7 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { Loader } from 'lucide-react'
 import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
 import { formatPoliciesForStorage } from '../Storage.utils'
-import StoragePoliciesBucketRow from './StoragePoliciesBucketRow'
+import { StoragePoliciesBucketRow } from './StoragePoliciesBucketRow'
 import StoragePoliciesEditPolicyModal from './StoragePoliciesEditPolicyModal'
 import StoragePoliciesPlaceholder from './StoragePoliciesPlaceholder'
 

apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx

@@ -1,108 +1,86 @@
-import Panel from 'components/ui/Panel'
-import { isEmpty } from 'lodash'
-import { Archive, Edit, MoreVertical, Trash } from 'lucide-react'
+import { PostgresPolicy } from '@supabase/postgres-meta'
+import { noop } from 'lodash'
+import { Archive } from 'lucide-react'
+
+import { PolicyRow } from 'components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow'
+import { Bucket } from 'data/storage/buckets-query'
 import {
   Badge,
   Button,
   Card,
   CardContent,
   CardHeader,
   CardTitle,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from 'ui'
 
-interface PolicyRowProps {
-  policy: any
-  table: any
-  bucketName: string
-  onSelectPolicyEdit: (p: any, s: string, t: any) => void
-  onSelectPolicyDelete: (s: string) => void
+interface StoragePoliciesBucketRowProps {
+  table: string
+  label: string
+  bucket?: Bucket
+  policies: PostgresPolicy[]
+  onSelectPolicyAdd: (bucketName: string, table: string) => void
+  onSelectPolicyEdit: (policy: PostgresPolicy, bucketName: string, table: string) => void
+  onSelectPolicyDelete: (policy: PostgresPolicy) => void
 }
 
-const PolicyRow = ({
-  policy,
-  table,
-  bucketName,
-  onSelectPolicyEdit = () => {},
-  onSelectPolicyDelete = () => {},
-}: PolicyRowProps) => {
-  const { name, command } = policy
-  return (
-    <CardContent className="group flex justify-between gap-2 border-b border-overlay py-4">
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
-        <div className="font-mono text-xs text-foreground-lighter">{command}</div>
-        <div className="flex flex-col gap-2 lg:flex-row">
-          <span className="truncate text-sm text-foreground">{name}</span>
-        </div>
-      </div>
-      <DropdownMenu>
-        <DropdownMenuTrigger>
-          <Button type="default" className="px-1.5" icon={<MoreVertical />} />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent side="bottom" align="end">
-          <DropdownMenuItem
-            className="gap-x-2"
-            onClick={() => onSelectPolicyEdit(policy, bucketName, table)}
-          >
-            <Edit size={14} />
-            <p>Edit</p>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem className="gap-x-2" onClick={() => onSelectPolicyDelete(policy)}>
-            <Trash size={14} />
-            <p>Delete</p>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </CardContent>
-  )
-}
-
-const StoragePoliciesBucketRow = ({
+export const StoragePoliciesBucketRow = ({
   table = '',
   label = '',
-  bucket = {},
+  bucket,
   policies = [],
-  onSelectPolicyAdd = () => {},
-  onSelectPolicyEdit = () => {},
-  onSelectPolicyDelete = () => {},
-}: any) => {
+  onSelectPolicyAdd = noop,
+  onSelectPolicyEdit = noop,
+  onSelectPolicyDelete = noop,
+}: StoragePoliciesBucketRowProps) => {
   return (
     <Card>
       <CardHeader className="flex flex-row w-full items-center justify-between gap-0 space-y-0">
         <div className="flex items-center gap-3">
           <Archive className="text-foreground-light" size={16} strokeWidth={1.5} />
           <CardTitle>{label}</CardTitle>
-          {bucket.public && <Badge variant="warning">Public</Badge>}
+          {bucket?.public && <Badge variant="warning">Public</Badge>}
         </div>
-        <Button type="outline" onClick={() => onSelectPolicyAdd(bucket.name, table)}>
-          New policy
-        </Button>
+        {!!bucket && (
+          <Button type="outline" onClick={() => onSelectPolicyAdd(bucket.name, table)}>
+            New policy
+          </Button>
+        )}
       </CardHeader>
       {policies.length === 0 ? (
         <CardContent>
           <p className="text-sm text-foreground-lighter">No policies created yet</p>
         </CardContent>
       ) : (
-        <div>
-          {policies.map((policy: any) => (
-            <PolicyRow
-              key={policy.name}
-              policy={policy}
-              table={table}
-              bucketName={bucket.name}
-              onSelectPolicyEdit={onSelectPolicyEdit}
-              onSelectPolicyDelete={onSelectPolicyDelete}
-            />
-          ))}
-        </div>
+        <CardContent className="p-0">
+          <Table className="table-fixed">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[40%]">Name</TableHead>
+                <TableHead className="w-[20%]">Command</TableHead>
+                <TableHead className="w-[30%]">Applied to</TableHead>
+                <TableHead className="w-0 text-right">
+                  <span className="sr-only">Actions</span>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {policies.map((policy) => (
+                <PolicyRow
+                  key={policy.id ?? policy.name}
+                  policy={policy}
+                  onSelectEditPolicy={(p) => onSelectPolicyEdit(p, bucket?.name ?? '', table)}
+                  onSelectDeletePolicy={onSelectPolicyDelete}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
       )}
     </Card>
   )
 }
-
-export default StoragePoliciesBucketRow

apps/studio/pages/project/[ref]/realtime/policies.tsx

@@ -2,15 +2,35 @@ import { RealtimePolicies } from 'components/interfaces/Realtime/Policies'
 import type { NextPageWithLayout } from 'types'
 
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
 import RealtimeLayout from 'components/layouts/RealtimeLayout/RealtimeLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
+import { DocsButton } from 'components/ui/DocsButton'
 
 const RealtimePoliciesPage: NextPageWithLayout = () => {
-  return <RealtimePolicies />
+  return (
+    <ScaffoldContainer size="full">
+      <ScaffoldSection isFullWidth>
+        <RealtimePolicies />
+      </ScaffoldSection>
+    </ScaffoldContainer>
+  )
 }
 
 RealtimePoliciesPage.getLayout = (page) => (
   <DefaultLayout>
-    <RealtimeLayout title="Policies">{page}</RealtimeLayout>
+    <RealtimeLayout title="Policies">
+      <PageLayout
+        title="Policies"
+        subtitle="Control access to your realtime channels"
+        primaryActions={
+          <DocsButton href="https://supabase.com/docs/guides/realtime/authorization" />
+        }
+        size="large"
+      >
+        {page}
+      </PageLayout>
+    </RealtimeLayout>
   </DefaultLayout>
 )