From 39cc19b5fbdbc5d657148048aec679279fbd53f3 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 21 Nov 2024 10:05:43 +1000
Subject: [PATCH] remove publication examples and empty state copy

---
 .../Publications/SinglePublication.tsx        | 16 ++++++---------
 .../pages/project/[ref]/realtime/events.tsx   | 20 ++++++++++++-------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Publications/SinglePublication.tsx b/apps/studio/components/interfaces/Database/Publications/SinglePublication.tsx
index 1d8fba98024..068edd7d418 100644
--- a/apps/studio/components/interfaces/Database/Publications/SinglePublication.tsx
+++ b/apps/studio/components/interfaces/Database/Publications/SinglePublication.tsx
@@ -16,7 +16,6 @@ import { AlertCircle } from 'lucide-react'
 interface PublicationEvent {
   event: string
   key: string
-  example: string
 }
 
 interface SinglePublicationViewProps {
@@ -50,10 +49,10 @@ const SinglePublicationView = ({ publicationName }: SinglePublicationViewProps)
   const isPermissionsLoaded = usePermissionsLoaded()
 
   const publicationEvents: PublicationEvent[] = [
-    { event: 'Insert', key: 'publish_insert', example: 'Adding a new todo "Buy groceries"' },
-    { event: 'Update', key: 'publish_update', example: 'Marking a todo as completed' },
-    { event: 'Delete', key: 'publish_delete', example: 'Deleting the "Buy groceries" todo' },
-    { event: 'Truncate', key: 'publish_truncate', example: 'Clearing all todos from the table' },
+    { event: 'Insert', key: 'publish_insert' },
+    { event: 'Update', key: 'publish_update' },
+    { event: 'Delete', key: 'publish_delete' },
+    { event: 'Truncate', key: 'publish_truncate' },
   ]
 
   const [toggleListenEventValue, setToggleListenEventValue] = useState<{
@@ -89,7 +88,6 @@ const SinglePublicationView = ({ publicationName }: SinglePublicationViewProps)
       <Table
         head={[
           <Table.th key="header.event">Event Type</Table.th>,
-          <Table.th key="header.example">Example</Table.th>,
           <Table.th key="header.status">
             <span className="sr-only">Enabled</span>
           </Table.th>,
@@ -101,8 +99,7 @@ const SinglePublicationView = ({ publicationName }: SinglePublicationViewProps)
                 key={i}
                 index={i}
                 columns={[
-                  { key: 'event', width: '25%' },
-                  { key: 'example', width: '50%' },
+                  { key: 'event', width: '50%' },
                   { key: 'status', isToggle: true, align: 'end' },
                 ]}
               />
@@ -111,7 +108,6 @@ const SinglePublicationView = ({ publicationName }: SinglePublicationViewProps)
             publicationEvents.map((event) => (
               <Table.tr key={event.key} className="border-t">
                 <Table.td className="px-4 py-3">{event.event}</Table.td>
-                <Table.td className="px-4 py-3">{event.example}</Table.td>
                 <Table.td>
                   <div className="flex justify-end gap-2">
                     <Toggle
@@ -132,7 +128,7 @@ const SinglePublicationView = ({ publicationName }: SinglePublicationViewProps)
             ))
           ) : (
             <Table.tr>
-              <Table.td colSpan={3}>No publication found</Table.td>
+              <Table.td colSpan={2}>No publication found</Table.td>
             </Table.tr>
           )
         }
diff --git a/apps/studio/pages/project/[ref]/realtime/events.tsx b/apps/studio/pages/project/[ref]/realtime/events.tsx
index bbc8100b8e8..97d238bced4 100644
--- a/apps/studio/pages/project/[ref]/realtime/events.tsx
+++ b/apps/studio/pages/project/[ref]/realtime/events.tsx
@@ -13,12 +13,13 @@ import type { NextPageWithLayout } from 'types'
 import SinglePublicationView from 'components/interfaces/Database/Publications/SinglePublication'
 import { Loading } from 'components/ui/Loading'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import Link from 'next/link'
 
 // [Joshen] Technically, best that we have these as separate URLs
 // makes it easier to manage state, but foresee that this page might
 // be consolidated somewhere else eventually for better UX
 
-const DatabasePublications: NextPageWithLayout = () => {
+const RealtimeEventFiltering: NextPageWithLayout = () => {
   const { project } = useProjectContext()
 
   const { data, isLoading } = useDatabasePublicationsQuery(
@@ -50,7 +51,10 @@ const DatabasePublications: NextPageWithLayout = () => {
         <div className="col-span-12">
           <div className="space-y-10">
             <div>
-              <FormHeader title="Events" description="Select which database events to be broadcasted" />
+              <FormHeader
+                title="Event filtering"
+                description="Select which database events to be broadcasted"
+              />
               <SinglePublicationView publicationName={'supabase_realtime'} />
             </div>
             <div>
@@ -67,20 +71,22 @@ const DatabasePublications: NextPageWithLayout = () => {
   ) : (
     <div className="storage-container flex flex-grow">
       <ProductEmptyState
-        title="Realtime is disabled"
+        title="Custom configuration detected"
         infoButtonLabel="About realtime"
         infoButtonUrl="https://supabase.com/docs/guides/realtime"
       >
         <p className="text-foreground-light text-sm">
-          Send and receive messages to connected clients.
+          The <code>supabase_realtime</code> publication cannot be found. Go to{' '}
+          <Link href={`/project/${project?.ref}/database/publications`}>database publications</Link>{' '}
+          to manage realtime events on custom publications.
         </p>
       </ProductEmptyState>
     </div>
   )
 }
 
-DatabasePublications.getLayout = (page) => (
-  <RealtimeLayout title="Publications">{page}</RealtimeLayout>
+RealtimeEventFiltering.getLayout = (page) => (
+  <RealtimeLayout title="Event filtering">{page}</RealtimeLayout>
 )
 
-export default DatabasePublications
+export default RealtimeEventFiltering