Make automated topLevelNavItems use built-in pages & nav improvements

consistent-type-assertions.txt

@@ -10,7 +10,6 @@ src/collections/Users/components/InviteUser.tsx
 src/collections/Users/components/InviteUserDrawer.tsx
 src/collections/Users/components/inviteUserAction.ts
 src/collections/Users/components/resendInviteActions.ts
-src/components/Header/utils.ts
 src/endpoints/seed/upsert.ts
 src/globals/Diagnostics/actions/revalidateCache.ts
 src/utilities/removeNonDeterministicKeys.ts

src/collections/BuiltInPages/index.ts

@@ -22,12 +22,16 @@ export const BuiltInPages: CollectionConfig<'pages'> = {
     },
     read: byTenantRole('read', 'builtInPages'),
     update: byGlobalRole('update', 'builtInPages'),
-    delete: byGlobalRole('delete', 'builtInPages'),
+    delete: ({ req }) => {
+      if (!byGlobalRole('delete', 'builtInPages')({ req })) return false
+      return { isInNav: { not_equals: true } }
+    },
   },
   admin: {
     group: 'Content',
     useAsTitle: 'title',
     baseListFilter: filterByTenant,
+    defaultColumns: ['title', 'url', 'tenant'],
   },
   fields: [
     titleField(),
@@ -37,6 +41,15 @@ export const BuiltInPages: CollectionConfig<'pages'> = {
       type: 'text',
       required: true,
     },
+    {
+      name: 'isInNav',
+      type: 'checkbox',
+      defaultValue: false,
+      admin: {
+        hidden: true,
+        description: 'Pages used in navigation cannot be deleted to prevent broken links.',
+      },
+    },
     tenantField(),
     contentHashField(),
   ],

src/collections/Navigations/fields/itemsField.ts

@@ -1,9 +1,9 @@
 import { navLink } from '@/fields/navLink'
 import { merge } from 'lodash-es'
-import { ArrayField, FieldHook } from 'payload'
+import { ArrayField, Condition, FieldHook } from 'payload'
 
-// Condition: show field only when item has sub-items (accordion/section mode)
-const hasSubItems = (_data: unknown, siblingData: Record<string, unknown>) =>
+// Conditions: show/hide fields based on whether item has sub-items (accordion/section mode)
+const hasSubItems: Condition = (_, siblingData) =>
   Array.isArray(siblingData?.items) && siblingData.items.length > 0
 
 // Copy link.label to standalone label when sub-items are added,
@@ -35,10 +35,12 @@ const clearLinkWhenHasSubItems: FieldHook = ({ siblingData, value }) => {
 export const itemsField = ({
   label,
   description,
+  hasSubNavItems = true,
   overrides = {},
 }: {
   label: string
   description?: string
+  hasSubNavItems?: boolean
   overrides?: Partial<ArrayField>
 }): ArrayField =>
   merge(
@@ -50,36 +52,45 @@ export const itemsField = ({
         description,
       },
       fields: [
-        {
-          name: 'label',
-          type: 'text',
-          required: true,
-          admin: {
-            description: 'Label for this nav section (shown when item has sub-items)',
-            condition: hasSubItems,
-          },
-          hooks: {
-            beforeChange: [clearLabelWhenItemHasNoSubItems],
-          },
-        },
+        ...(hasSubNavItems
+          ? [
+              {
+                name: 'label',
+                type: 'text',
+                required: true,
+                admin: {
+                  description: 'Label for this nav section (shown when item has sub-items)',
+                  condition: hasSubItems,
+                },
+                hooks: {
+                  beforeChange: [clearLabelWhenItemHasNoSubItems],
+                },
+              },
+            ]
+          : []),
         {
           ...navLink,
           admin: {
             ...navLink.admin,
-            condition: (data: unknown, siblingData: Record<string, unknown>) =>
-              !hasSubItems(data, siblingData),
+            condition: hasSubNavItems
+              ? (...args: Parameters<Condition>) => !hasSubItems(...args)
+              : undefined,
           },
           hooks: {
             // navLink.hooks contains clearIrrelevantLinkValues; we add our cleanup hook
             beforeChange: [...(navLink.hooks?.beforeChange ?? []), clearLinkWhenHasSubItems],
           },
         },
-        {
-          name: 'items',
-          type: 'array',
-          label: 'Sub Nav Items',
-          fields: [navLink],
-        },
+        ...(hasSubNavItems
+          ? [
+              {
+                name: 'items',
+                type: 'array',
+                label: 'Sub Nav Items',
+                fields: [navLink],
+              },
+            ]
+          : []),
       ],
     },
     overrides,

src/collections/Navigations/fields/topLevelNavTab.ts

@@ -1,31 +1,70 @@
+import { hasSuperAdminPermissions } from '@/access/hasSuperAdminPermissions'
+import { navLink } from '@/fields/navLink'
 import { Field, Tab, toWords } from 'payload'
 import { itemsField } from './itemsField'
 
 export const topLevelNavTab = ({
   name,
   description,
   hasConfigurableNavItems = true,
+  hasReadOnlyLink = false,
+  hasReadOnlyNavItems = false,
   hasEnabledToggle = true,
   enabledToggleDescription = 'If hidden, pages with links in this nav item will not be accessible at their navigation-nested URLs.',
 }: {
   name: string
   description?: string
   hasConfigurableNavItems?: boolean
+  hasReadOnlyLink?: boolean
+  hasReadOnlyNavItems?: boolean
   hasEnabledToggle?: boolean
   enabledToggleDescription?: string
 }): Tab => {
   let fields: Field[] = [
     itemsField({
       label: `${toWords(name)} Nav Items`,
       description: `Dropdown items under ${toWords(name)}`,
+      hasSubNavItems: !hasReadOnlyNavItems,
       overrides: {
+        ...(hasReadOnlyNavItems ? { access: { update: hasSuperAdminPermissions } } : {}),
         admin: {
-          hidden: !hasConfigurableNavItems,
+          hidden: !hasConfigurableNavItems && !hasReadOnlyNavItems,
         },
       },
     }),
   ]
 
+  if (hasReadOnlyLink) {
+    fields = [
+      {
+        ...navLink,
+        access: {
+          update: hasSuperAdminPermissions,
+        },
+      },
+      ...fields,
+    ]
+  }
+
+  if (description) {
+    const descriptionField: Field = {
+      type: 'ui',
+      name: `${name}Description`,
+      admin: {
+        components: {
+          Field: {
+            path: '@/components/BannerDescription#BannerDescription',
+            clientProps: {
+              message: description,
+              type: 'info',
+            },
+          },
+        },
+      },
+    }
+    fields = [descriptionField, ...fields]
+  }
+
   if (hasEnabledToggle) {
     const enabledToggleField: Field = {
       type: 'group',
@@ -48,8 +87,8 @@ export const topLevelNavTab = ({
 
   return {
     name,
-    description,
-    virtual: !hasConfigurableNavItems && !hasEnabledToggle,
+    virtual:
+      !hasConfigurableNavItems && !hasReadOnlyNavItems && !hasEnabledToggle && !hasReadOnlyLink,
     fields,
   }
 }

src/collections/Navigations/index.tsx

@@ -41,12 +41,15 @@ export const Navigations: CollectionConfig = {
           name: 'forecasts',
           description: 'This nav dropdown is autofilled with your forecast zones.',
           hasConfigurableNavItems: false,
+          hasReadOnlyLink: true,
+          hasReadOnlyNavItems: true,
           hasEnabledToggle: false,
         }),
         topLevelNavTab({
           name: 'observations',
           description: 'This nav dropdown is autofilled with the default observations links.',
           hasConfigurableNavItems: false,
+          hasReadOnlyNavItems: true,
           hasEnabledToggle: false,
         }),
         topLevelNavTab({
@@ -60,6 +63,7 @@ export const Navigations: CollectionConfig = {
           description:
             'This nav item navigates to your blog landing page and does not have any dropdown items.',
           hasConfigurableNavItems: false,
+          hasReadOnlyLink: true,
           enabledToggleDescription:
             'If hidden from the nav, the blog landing page will still be accessible to visitors for filtered blog lists.',
         }),
@@ -68,27 +72,48 @@ export const Navigations: CollectionConfig = {
           description:
             'This nav item navigates to your events landing page and does not have any dropdown items.',
           hasConfigurableNavItems: false,
+          hasReadOnlyLink: true,
           enabledToggleDescription:
             'If hidden from the nav, the events landing page will still be accessible to visitors for filtered event lists.',
         }),
         topLevelNavTab({ name: 'about' }),
         topLevelNavTab({ name: 'support' }),
         {
           name: 'donate',
-          description: 'This nav item is styled as a button.',
           fields: [
             {
               type: 'group',
               name: 'options',
+              label: '',
               fields: [
                 {
                   type: 'checkbox',
                   defaultValue: true,
                   name: 'enabled',
+                  label: 'Show Button in Navigation',
+                  admin: {
+                    description: 'If hidden, the button will not appear in the nav.',
+                  },
                 },
               ],
             },
-            navLink,
+            {
+              ...navLink,
+              label: '',
+              admin: {
+                ...navLink.admin,
+                components: {
+                  ...navLink.admin?.components,
+                  Description: {
+                    path: '@/components/BannerDescription#BannerDescription',
+                    clientProps: {
+                      message: 'This nav item is styled as a button.',
+                      type: 'info',
+                    },
+                  },
+                },
+              },
+            },
           ],
         },
       ],

src/collections/Tenants/components/TenantSlugField.tsx

@@ -1,12 +1,29 @@
 import type { SelectFieldServerComponent } from 'payload'
 
-import { SelectField } from '@payloadcms/ui'
+import { SelectField, SelectInput } from '@payloadcms/ui'
 
 export const TenantSlugField: SelectFieldServerComponent = async ({
   clientField,
+  data,
   field,
   payload,
 }) => {
+  // Slug is immutable after creation
+  if (data?.id) {
+    return (
+      <SelectInput
+        name={field.name}
+        path={field.name}
+        label={clientField.label}
+        options={(clientField.options ?? []).map((o) =>
+          typeof o === 'string' ? { label: o, value: o } : o,
+        )}
+        value={data.slug}
+        readOnly
+      />
+    )
+  }
+
   const { docs } = await payload.find({
     collection: 'tenants',
     limit: 0,

src/components/BannerDescription/index.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { Banner } from '@payloadcms/ui'
+import { AlertCircle, CheckCircle, Info, MessageSquare } from 'lucide-react'
+
+type BannerDescriptionProps = {
+  message: string
+  type?: 'default' | 'error' | 'info' | 'success'
+  [key: string]: unknown
+}
+
+const icons: Record<NonNullable<BannerDescriptionProps['type']>, React.ReactNode> = {
+  default: <MessageSquare size={18} />,
+  error: <AlertCircle size={18} />,
+  info: <Info size={18} />,
+  success: <CheckCircle size={18} />,
+}
+
+export const BannerDescription = ({ message, type = 'default' }: BannerDescriptionProps) => {
+  if (!message) return null
+
+  return (
+    <Banner alignIcon="left" icon={icons[type]} type={type} className="w-fit gap-2 items-center">
+      {message}
+    </Banner>
+  )
+}