v0.0.20: Remove debug logging, clean up custom ListView

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "payload-feature-flags",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "payload-feature-flags",
-      "version": "0.0.16",
+      "version": "0.0.19",
       "license": "MIT",
       "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtr-dev/payload-feature-flags",
-  "version": "0.0.16",
+  "version": "0.0.20",
   "description": "Feature flags plugin for Payload CMS - manage feature toggles, A/B tests, and gradual rollouts",
   "license": "MIT",
   "type": "module",

src/index.ts

@@ -34,6 +34,11 @@ export type PayloadFeatureFlagsConfig = {
    * Override collection configuration
    */
   collectionOverrides?: CollectionOverrides
+  /**
+   * Enable custom list view for feature flags
+   * @default false
+   */
+  enableCustomListView?: boolean
 }
 
 export const payloadFeatureFlags =
@@ -44,6 +49,7 @@ export const payloadFeatureFlags =
       defaultValue = false,
       enableRollouts = true,
       enableVariants = true,
+      enableCustomListView = false,
       collectionOverrides,
     } = pluginOptions
 
@@ -163,6 +169,15 @@ export const payloadFeatureFlags =
         useAsTitle: 'name',
         group: 'Configuration',
         description: 'Manage feature flags for your application',
+        components: enableCustomListView ? {
+          ...collectionOverrides?.admin?.components,
+          views: {
+            ...collectionOverrides?.admin?.components?.views,
+            list: {
+              Component: '@xtr-dev/payload-feature-flags/views#FeatureFlagsView'
+            }
+          }
+        } : collectionOverrides?.admin?.components || {},
         ...(collectionOverrides?.admin || {}),
       },
       fields,

src/views/FeatureFlagsClient.tsx

@@ -1,4 +1,6 @@
 'use client'
+import React from 'react'
+import type { ListViewClientProps } from 'payload'
 import { useState, useEffect, useCallback, useMemo, memo } from 'react'
 import {
   useConfig,
@@ -236,7 +238,7 @@ const FeatureFlagsClientComponent = ({
           color: styles.text,
           margin: '0 0 0.5rem 0'
         }}>
-          Feature Flags Dashboard
+          Feature Flags
         </h1>
         <p style={{
           color: styles.textMuted,

src/views/FeatureFlagsView.tsx

@@ -1,19 +1,13 @@
-import type { AdminViewServerProps } from 'payload'
+import React from 'react'
-import { DefaultTemplate } from '@payloadcms/next/templates'
+import type { ListViewServerProps } from 'payload'
-import { Gutter } from '@payloadcms/ui'
 import FeatureFlagsClient from './FeatureFlagsClient.js'
 import type { FeatureFlag } from '../types/index.js'
 
-async function fetchInitialFlags(payload: any, searchParams?: Record<string, any>): Promise<FeatureFlag[]> {
+async function fetchInitialFlags(payload: any, collectionSlug: string): Promise<FeatureFlag[]> {
   try {
-    const limit = Math.min(1000, parseInt(searchParams?.limit as string) || 100)
-    const page = Math.max(1, parseInt(searchParams?.page as string) || 1)
-    const collectionSlug = searchParams?.collectionSlug as string || 'feature-flags'
-
     const result = await payload.find({
       collection: collectionSlug,
-      limit,
+      limit: 1000,
-      page,
       sort: 'name',
     })
 
@@ -24,30 +18,12 @@ async function fetchInitialFlags(payload: any, searchParams?: Record<string, any
   }
 }
 
-export default async function FeatureFlagsView({
+export default async function FeatureFlagsView(props: ListViewServerProps) {
-  initPageResult,
+  const { collectionConfig, user, permissions, payload } = props
-  params,
-  searchParams,
-}: AdminViewServerProps) {
-  const {
-    req: { user },
-    permissions,
-  } = initPageResult
 
   // Security check: User must be logged in
   if (!user) {
     return (
-      <DefaultTemplate
-        i18n={initPageResult.req.i18n}
-        locale={initPageResult.locale}
-        params={params}
-        payload={initPageResult.req.payload}
-        permissions={initPageResult.permissions}
-        searchParams={searchParams}
-        user={undefined}
-        visibleEntities={initPageResult.visibleEntities}
-      >
-        <Gutter>
       <div style={{
         padding: '2rem',
         textAlign: 'center',
@@ -78,27 +54,13 @@ export default async function FeatureFlagsView({
           Go to Login
         </a>
       </div>
-        </Gutter>
-      </DefaultTemplate>
     )
   }
 
-  // Security check: User must have permissions to access feature-flags collection
+  // Security check: User must have permissions to access the collection
-  const collectionSlug = searchParams?.collectionSlug as string || 'feature-flags'
+  const canReadFeatureFlags = permissions?.collections?.[collectionConfig.slug]?.read
-  const canReadFeatureFlags = permissions?.collections?.[collectionSlug]?.read
   if (!canReadFeatureFlags) {
     return (
-      <DefaultTemplate
-        i18n={initPageResult.req.i18n}
-        locale={initPageResult.locale}
-        params={params}
-        payload={initPageResult.req.payload}
-        permissions={initPageResult.permissions}
-        searchParams={searchParams}
-        user={initPageResult.req.user || undefined}
-        visibleEntities={initPageResult.visibleEntities}
-      >
-        <Gutter>
       <div style={{
         padding: '2rem',
         textAlign: 'center',
@@ -115,40 +77,24 @@ export default async function FeatureFlagsView({
           You don't have permission to access the Feature Flags Dashboard.
         </p>
         <p style={{ fontSize: '0.875rem', color: 'var(--theme-warning-600)' }}>
-              Contact your administrator to request access to the feature-flags collection.
+          Contact your administrator to request access to the {collectionConfig.slug} collection.
         </p>
       </div>
-        </Gutter>
-      </DefaultTemplate>
     )
   }
 
   // Fetch initial data server-side (only if user has access)
-  const initialFlags = await fetchInitialFlags(initPageResult.req.payload, searchParams)
+  const initialFlags = await fetchInitialFlags(payload, collectionConfig.slug)
 
-  // Check if user can update feature flags (use already defined collection slug)
+  // Check if user can update feature flags
-  const canUpdateFeatureFlags = permissions?.collections?.[collectionSlug]?.update || false
+  const canUpdateFeatureFlags = permissions?.collections?.[collectionConfig.slug]?.update || false
 
-  // Use DefaultTemplate with proper props structure from initPageResult
   return (
-    <DefaultTemplate
-      i18n={initPageResult.req.i18n}
-      locale={initPageResult.locale}
-      params={params}
-      payload={initPageResult.req.payload}
-      permissions={initPageResult.permissions}
-      searchParams={searchParams}
-      user={initPageResult.req.user || undefined}
-      visibleEntities={initPageResult.visibleEntities}
-    >
-      <Gutter>
     <FeatureFlagsClient
       initialFlags={initialFlags}
       canUpdate={canUpdateFeatureFlags}
-          maxFlags={parseInt(searchParams?.maxFlags as string) || 100}
+      maxFlags={100}
-          collectionSlug={collectionSlug}
+      collectionSlug={collectionConfig.slug}
     />
-      </Gutter>
-    </DefaultTemplate>
   )
 }