chore: Reorder database links (#22835)

* chore: move column priv

* update docs

* Minor fixes for column privileges. Add an explanation alert.

* Add a right icon to productMenuItem component.

* Rename the database replication into publications.

* Change the order for the database menu.

* Fix various links to db publications.

* Remove duplicate entry.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -609,10 +609,6 @@ export const auth = {
         { name: 'Managing User Data', url: '/guides/auth/managing-user-data' },
         { name: 'Multi-Factor Authentication', url: '/guides/auth/auth-mfa' },
         { name: 'Row Level Security', url: '/guides/auth/row-level-security' },
-        {
-          name: 'Column Level Security',
-          url: '/guides/auth/column-level-security',
-        },
         {
           name: 'Custom Claims & RBAC',
           url: '/guides/auth/custom-claims-and-role-based-access-control-rbac',
@@ -775,6 +771,10 @@ export const database: NavMenuConstant = {
           name: 'Superuser Access and Unsupported Operations',
           url: '/guides/database/postgres/roles-superuser',
         },
+        {
+          name: 'Column level privileges',
+          url: '/guides/database/postgres/column-level-privileges',
+        },
       ],
     },
     {

apps/docs/content/guides/auth/auth-helpers/remix.mdx

@@ -771,7 +771,7 @@ export default function Index() {
 
 </Tabs>
 
-> Ensure you have [enabled replication](https://supabase.com/dashboard/project/_/database/replication) on the table you are subscribing to.
+> Ensure you have [enabled replication](https://supabase.com/dashboard/project/_/database/publications) on the table you are subscribing to.
 
 ## Migration guide
 

apps/docs/content/guides/auth/column-level-security.mdx → apps/docs/content/guides/database/postgres/column-level-security.mdx

@@ -76,7 +76,7 @@ This time, we are revoking the column-level `UPDATE` privilege of the `title` co
 
 ## Manage column privileges in the Dashboard
 
-You can view and edit the privileges in the [Supabase Studio](https://supabase.com/dashboard/project/_/auth/column-privileges).
+You can view and edit the privileges in the [Supabase Studio](https://supabase.com/dashboard/project/_/database/column-privileges).
 
 ![Column level privileges](/docs/img/guides/privileges/column-level-privileges-2.png)
 

apps/docs/content/guides/database/replication.mdx

@@ -14,7 +14,7 @@ Replication is done through _publications_, a method of choosing which changes t
 ## Manage publications in the dashboard
 
 1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
-2. Click on **Replication** in the sidebar.
+2. Click on **Publications** in the sidebar.
 3. Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
 4. Control which tables broadcast changes by selecting **Source** and toggling each table.
 

apps/docs/content/guides/platform/going-into-prod.mdx

@@ -17,7 +17,7 @@ After developing your project and deciding it's Production Ready, you should run
   - [Learn more about RLS](/docs/guides/auth/row-level-security).
 - Enable replication on tables containing sensitive data by enabling Row Level Security (RLS) and setting row security policies:
   - Go to the Authentication > Policies page in the Supabase Dashboard to enable RLS and create security policies.
-  - Go to the Database > Replication page in the Supabase Dashboard to manage replication tables.
+  - Go to the Database > Publications page in the Supabase Dashboard to manage replication tables.
 - Turn on [SSL Enforcement](/docs/guides/platform/ssl-enforcement)
 - Enable [Network Restrictions](/docs/guides/platform/network-restrictions) for your database.
 - Enable 2FA on GitHub. Since your GitHub account gives you administrative rights to your Supabase project, you should protect it with a strong password and 2FA using a U2F key or a TOTP app.

apps/docs/content/guides/platform/migrating-and-upgrading-projects.mdx

@@ -200,7 +200,7 @@ supabase db diff --linked --schema auth,storage > changes.sql
 
 ### Enable publication on tables
 
-Replication for Realtime is disabled for all tables in your new project. On the [Replication](https://supabase.com/dashboard/project/_/database/replication) page in the Dashboard, select your new project and enable replication for tables that were enabled in your old project.
+Replication for Realtime is disabled for all tables in your new project. On the [Publications](https://supabase.com/dashboard/project/_/database/publications) page in the Dashboard, select your new project and enable replication for tables that were enabled in your old project.
 
 ### Migrate storage objects
 

apps/docs/content/guides/realtime.mdx

@@ -25,7 +25,7 @@ By default Realtime is disabled on your database. Let's turn on Realtime for a `
  <TabPanel id="dashboard" label="Dashboard">
 
 1.  Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
-2.  Click on **Replication** in the sidebar.
+2.  Click on **Publications** in the sidebar.
 3.  Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
 4.  Control which tables broadcast changes by selecting **Source** and toggling each table.
 

apps/docs/content/guides/realtime/postgres-changes.mdx

@@ -89,7 +89,7 @@ In this example we'll set up a database table, secure it with Row Level Security
 
     <StepHikeCompact.Details title="Enable Postgres replication">
 
-      Go to your project's [Replication settings](https://supabase.com/dashboard/project/_/database/replication), and under `supabase_realtime`, toggle on the tables you want to listen to.
+      Go to your project's [Publications settings](https://supabase.com/dashboard/project/_/database/publications), and under `supabase_realtime`, toggle on the tables you want to listen to.
 
     </StepHikeCompact.Details>
 

apps/studio/components/interfaces/App/FeaturePreview/CLSPreview.tsx

@@ -44,7 +44,7 @@ const CLSPreview = () => {
           <li>
             <Markdown
               className="text-foreground-light"
-              content={`Grant access to a new UI for granting and/or revoking column-level privileges [here](/project/${ref}/auth/column-privileges).`}
+              content={`Grant access to a new UI for granting and/or revoking column-level privileges [here](/project/${ref}/database/column-privileges).`}
             />
           </li>
         </ul>

apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx

@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
 import { useState } from 'react'
 import toast from 'react-hot-toast'
-import { Button, IconAlertCircle, IconSearch, Input, Modal, Toggle } from 'ui'
+import { Button, IconAlertCircle, IconSearch, Input, Toggle } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
@@ -91,7 +91,7 @@ const PublicationsList = ({ onSelectPublication = noop }: PublicationsListProps)
             <div className="w-[500px]">
               <InformationBox
                 icon={<IconAlertCircle className="text-foreground-light" strokeWidth={2} />}
-                title="You need additional permissions to update database replications"
+                title="You need additional permissions to update database publications"
               />
             </div>
           )}

apps/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.constants.ts

@@ -456,7 +456,7 @@ const DATABASE_PERMISSIONS = {
       },
     },
     {
-      description: 'Can read database replications',
+      description: 'Can read database publications',
       permissions: {
         owner: true,
         admin: true,
@@ -466,7 +466,7 @@ const DATABASE_PERMISSIONS = {
       },
     },
     {
-      description: 'Can update database replications',
+      description: 'Can update database publications',
       permissions: {
         owner: true,
         admin: true,

apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx

@@ -73,9 +73,9 @@ const NoResultAlert = ({
                 <p className="text-foreground">Listen to a table for changes</p>
                 <p className="text-foreground-lighter text-xs">Tables must have realtime enabled</p>
               </div>
-              <Link href={`/project/${ref}/database/replication`} target="_blank" rel="noreferrer">
+              <Link href={`/project/${ref}/database/publications`} target="_blank" rel="noreferrer">
                 <Button type="default" iconRight={<IconExternalLink />}>
-                  Replication settings
+                  Publications settings
                 </Button>
               </Link>
             </div>

apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx

@@ -6,19 +6,19 @@ import { Lock, MousePointer2, PlusCircle } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
 import toast from 'react-hot-toast'
-import { Button, Modal, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_ } from 'ui'
+import { Button, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_ } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import APIDocsButton from 'components/ui/APIDocsButton'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
 import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
 import { useDatabasePublicationUpdateMutation } from 'data/database-publications/database-publications-update-mutation'
 import { useTableUpdateMutation } from 'data/tables/table-update-mutation'
 import { useCheckPermissions, useIsFeatureEnabled } from 'hooks'
-import { RoleImpersonationPopover } from '../RoleImpersonationSelector'
 import { EXCLUDED_SCHEMAS } from 'lib/constants/schemas'
+import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { RoleImpersonationPopover } from '../RoleImpersonationSelector'
 
 export interface GridHeaderActionsProps {
   table: PostgresTable
@@ -284,8 +284,8 @@ const GridHeaderActions = ({ table, isViewSelected, isTableSelected }: GridHeade
           {!isRealtimeEnabled && (
             <p className="text-sm">
               You may also select which events to broadcast to subscribers on the{' '}
-              <Link href={`/project/${ref}/database/replication`} className="text-brand">
-                database replication
+              <Link href={`/project/${ref}/database/publications`} className="text-brand">
+                database publications
               </Link>{' '}
               settings.
             </p>

apps/studio/components/layouts/AuthLayout/AuthLayout.tsx

@@ -6,14 +6,16 @@ import { useIsColumnLevelPrivilegesEnabled } from 'components/interfaces/App/Fea
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { useAuthConfigPrefetch } from 'data/auth/auth-config-query'
 import { withAuth } from 'hooks'
+import Link from 'next/link'
+import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
 import { ProjectLayout } from '../'
 import { generateAuthMenu } from './AuthLayout.utils'
 
 export interface AuthLayoutProps {
   title?: string
 }
 
-const AuthLayout = ({ title, children }: PropsWithChildren<AuthLayoutProps>) => {
+const AuthProductMenu = () => {
   const { ref: projectRef = 'default' } = useParams()
   const columnLevelPrivileges = useIsColumnLevelPrivilegesEnabled()
 
@@ -22,16 +24,36 @@ const AuthLayout = ({ title, children }: PropsWithChildren<AuthLayoutProps>) =>
   const router = useRouter()
   const page = router.pathname.split('/')[4]
 
+  return (
+    <>
+      <ProductMenu page={page} menu={generateAuthMenu(projectRef)} />
+      {columnLevelPrivileges && (
+        <div className="px-3">
+          <Alert_Shadcn_>
+            <AlertTitle_Shadcn_ className="text-sm">
+              Column Privileges has been shifted
+            </AlertTitle_Shadcn_>
+            <AlertDescription_Shadcn_ className="text-xs">
+              <p className="mb-2">It can now be found in the menu under the database section.</p>
+              <Button asChild type="default" size="tiny">
+                <Link href={`/project/${projectRef}/database/column-privileges`}>
+                  Head over to Database
+                </Link>
+              </Button>
+            </AlertDescription_Shadcn_>
+          </Alert_Shadcn_>
+        </div>
+      )}
+    </>
+  )
+}
+
+const AuthLayout = ({ title, children }: PropsWithChildren<AuthLayoutProps>) => {
   return (
     <ProjectLayout
       title={title || 'Authentication'}
       product="Authentication"
-      productMenu={
-        <ProductMenu
-          page={page}
-          menu={generateAuthMenu(projectRef ?? 'default', { columnLevelPrivileges })}
-        />
-      }
+      productMenu={<AuthProductMenu />}
       isBlocking={false}
     >
       <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">

apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts

@@ -1,10 +1,7 @@
 import type { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
 import { IS_PLATFORM } from 'lib/constants'
 
-export const generateAuthMenu = (
-  ref: string,
-  options: { columnLevelPrivileges?: boolean } = {}
-): ProductMenuGroup[] => {
+export const generateAuthMenu = (ref: string): ProductMenuGroup[] => {
   return [
     {
       title: 'Manage',
@@ -19,17 +16,6 @@ export const generateAuthMenu = (
           url: `/project/${ref}/auth/policies`,
           items: [],
         },
-        ...(options?.columnLevelPrivileges
-          ? [
-              {
-                name: 'Column Privileges',
-                key: 'column-privileges',
-                url: `/project/${ref}/auth/column-privileges`,
-                items: [],
-                label: 'ALPHA',
-              },
-            ]
-          : []),
         ...(IS_PLATFORM
           ? [
               {

apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx

@@ -1,18 +1,21 @@
 import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'
 
+import { useIsColumnLevelPrivilegesEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useSelectedProject, withAuth } from 'hooks'
+import Link from 'next/link'
+import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui'
 import { ProjectLayout } from '../'
 import { generateDatabaseMenu } from './DatabaseMenu.utils'
 
 export interface DatabaseLayoutProps {
   title?: string
 }
 
-const DatabaseLayout = ({ children }: PropsWithChildren<DatabaseLayoutProps>) => {
+const DatabaseProductMenu = () => {
   const project = useSelectedProject()
 
   const router = useRouter()
@@ -26,18 +29,40 @@ const DatabaseLayout = ({ children }: PropsWithChildren<DatabaseLayoutProps>) =>
 
   const pgNetExtensionExists = (data ?? []).find((ext) => ext.name === 'pg_net') !== undefined
   const pitrEnabled = addons?.selected_addons.find((addon) => addon.type === 'pitr') !== undefined
+  const columnLevelPrivileges = useIsColumnLevelPrivilegesEnabled()
+
+  return (
+    <>
+      <ProductMenu
+        page={page}
+        menu={generateDatabaseMenu(project, {
+          pgNetExtensionExists,
+          pitrEnabled,
+          columnLevelPrivileges,
+        })}
+      />
+      <div className="px-3">
+        <Alert_Shadcn_>
+          <AlertTitle_Shadcn_ className="text-sm">
+            Replication section has been renamed
+          </AlertTitle_Shadcn_>
+          <AlertDescription_Shadcn_ className="text-xs">
+            <p className="mb-2">
+              It can be now found under{' '}
+              <Link href={`/project/${project?.ref}/database/publications`} className="underline">
+                Publications
+              </Link>
+            </p>
+          </AlertDescription_Shadcn_>
+        </Alert_Shadcn_>
+      </div>
+    </>
+  )
+}
 
+const DatabaseLayout = ({ children }: PropsWithChildren<DatabaseLayoutProps>) => {
   return (
-    <ProjectLayout
-      product="Database"
-      productMenu={
-        <ProductMenu
-          page={page}
-          menu={generateDatabaseMenu(project, { pgNetExtensionExists, pitrEnabled })}
-        />
-      }
-      isBlocking={false}
-    >
+    <ProjectLayout product="Database" productMenu={<DatabaseProductMenu />} isBlocking={false}>
       <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">
         {children}
       </main>