Merge pull request #10 from xtr-dev/dev

Dev

package-lock.json

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

package.json

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

src/exports/client.ts

@@ -7,5 +7,4 @@ export {
   useRolloutCheck,
   withFeatureFlag,
   type FeatureFlag,
-  type FeatureFlagOptions,
 } from '../hooks/client.js'

src/hooks/client.ts

@@ -1,5 +1,6 @@
 'use client'
-import React, { useCallback, useEffect, useState, useRef } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useConfig } from '@payloadcms/ui'
 
 export interface FeatureFlag {
   name: string
@@ -13,78 +14,34 @@ export interface FeatureFlag {
   metadata?: any
 }
 
-export interface FeatureFlagOptions {
-  serverURL?: string
-  apiPath?: string
-  collectionSlug?: string
-}
-
-// Helper to get config from options or defaults
-function getConfig(options?: FeatureFlagOptions) {
-  // Check if serverURL is explicitly provided
-  if (options?.serverURL) {
-    return {
-      serverURL: options.serverURL,
-      apiPath: options.apiPath || '/api',
-      collectionSlug: options.collectionSlug || 'feature-flags'
-    }
-  }
-
-  // In browser environment, use window.location.origin
-  if (typeof window !== 'undefined') {
-    return {
-      serverURL: window.location.origin,
-      apiPath: options?.apiPath || '/api',
-      collectionSlug: options?.collectionSlug || 'feature-flags'
-    }
-  }
-
-  // During SSR or in non-browser environments, use relative URL
-  // This will work for same-origin requests
-  return {
-    serverURL: '',
-    apiPath: options?.apiPath || '/api',
-    collectionSlug: options?.collectionSlug || 'feature-flags'
-  }
-}
-
 /**
  * Hook to fetch all active feature flags from the API
  */
 export function useFeatureFlags(
-  initialFlags: Partial<FeatureFlag>[],
-  options?: FeatureFlagOptions
+  initialFlags: Partial<FeatureFlag>[]
 ): {
   flags: Partial<FeatureFlag>[]
   loading: boolean
   error: string | null
   refetch: () => Promise<void>
 } {
-  const { serverURL, apiPath, collectionSlug } = getConfig(options)
+  const { config } = useConfig()
   const [flags, setFlags] = useState<Partial<FeatureFlag>[]>(initialFlags)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  // Use ref to store initialFlags to avoid re-creating fetchFlags on every render
-  const initialFlagsRef = useRef(initialFlags)
-
-  // Update ref when initialFlags changes (but won't trigger re-fetch)
-  useEffect(() => {
-    initialFlagsRef.current = initialFlags
-  }, [initialFlags])
-
   const fetchFlags = useCallback(async () => {
     try {
       setLoading(true)
       setError(null)
 
       // Use Payload's native collection API
-      const names = initialFlagsRef.current.map(f => f.name).filter(Boolean)
+      const names = initialFlags.map(f => f.name).filter(Boolean)
       const query = names.length > 0
         ? `?where[name][in]=${names.join(',')}&limit=1000`
         : '?limit=1000'
 
-      const response = await fetch(`${serverURL}${apiPath}/${collectionSlug}${query}`)
+      const response = await fetch(`${config.serverURL}${config.routes.api}/feature-flags${query}`)
 
       if (!response.ok) {
         throw new Error(`Failed to fetch feature flags: ${response.statusText}`)
@@ -107,7 +64,7 @@ export function useFeatureFlags(
       }
 
       // Sort flags based on the order of names in initialFlags
-      const sortedFlags = initialFlagsRef.current.map(initialFlag => {
+      const sortedFlags = initialFlags.map(initialFlag => {
         const fetchedFlag = fetchedFlagsMap.get(initialFlag.name!)
         // Use fetched flag if available, otherwise keep the initial flag
         return fetchedFlag || initialFlag
@@ -120,7 +77,7 @@ export function useFeatureFlags(
     } finally {
       setLoading(false)
     }
-  }, [serverURL, apiPath, collectionSlug]) // Remove initialFlags from dependencies
+  }, [config.serverURL, config.routes.api, initialFlags])
 
   useEffect(() => {
     void fetchFlags()
@@ -132,16 +89,13 @@ export function useFeatureFlags(
 /**
  * Hook to check if a specific feature flag is enabled
  */
-export function useFeatureFlag(
-  flagName: string,
-  options?: FeatureFlagOptions
-): {
+export function useFeatureFlag(flagName: string): {
   isEnabled: boolean
   flag: Partial<FeatureFlag> | null
   loading: boolean
   error: string | null
 } {
-  const { flags, loading, error } = useFeatureFlags([{ name: flagName }], options)
+  const { flags, loading, error } = useFeatureFlags([{ name: flagName }])
 
   const flag = flags.find(f => f.name === flagName) || null
   const isEnabled = flag?.enabled || false
@@ -152,16 +106,13 @@ export function useFeatureFlag(
 /**
  * Hook to fetch a specific feature flag from the API
  */
-export function useSpecificFeatureFlag(
-  flagName: string,
-  options?: FeatureFlagOptions
-): {
+export function useSpecificFeatureFlag(flagName: string): {
   flag: FeatureFlag | null
   loading: boolean
   error: string | null
   refetch: () => Promise<void>
 } {
-  const { serverURL, apiPath, collectionSlug } = getConfig(options)
+  const { config } = useConfig()
   const [flag, setFlag] = useState<FeatureFlag | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -173,7 +124,7 @@ export function useSpecificFeatureFlag(
 
       // Use Payload's native collection API with query filter
       const response = await fetch(
-        `${serverURL}${apiPath}/${collectionSlug}?where[name][equals]=${flagName}&limit=1`
+        `${config.serverURL}${config.routes.api}/feature-flags?where[name][equals]=${flagName}&limit=1`
       )
 
       if (!response.ok) {
@@ -202,7 +153,7 @@ export function useSpecificFeatureFlag(
     } finally {
       setLoading(false)
     }
-  }, [serverURL, apiPath, collectionSlug, flagName])
+  }, [config.serverURL, config.routes.api, flagName])
 
   useEffect(() => {
     void fetchFlag()
@@ -216,15 +167,14 @@ export function useSpecificFeatureFlag(
  */
 export function useVariantSelection(
   flagName: string,
-  userId: string,
-  options?: FeatureFlagOptions
+  userId: string
 ): {
   variant: string | null
   flag: FeatureFlag | null
   loading: boolean
   error: string | null
 } {
-  const { flag, loading, error } = useSpecificFeatureFlag(flagName, options)
+  const { flag, loading, error } = useSpecificFeatureFlag(flagName)
 
   const variant = flag?.enabled && flag.variants
     ? selectVariantForUser(userId, flag.variants)
@@ -238,15 +188,14 @@ export function useVariantSelection(
  */
 export function useRolloutCheck(
   flagName: string,
-  userId: string,
-  options?: FeatureFlagOptions
+  userId: string
 ): {
   isInRollout: boolean
   flag: FeatureFlag | null
   loading: boolean
   error: string | null
 } {
-  const { flag, loading, error } = useSpecificFeatureFlag(flagName, options)
+  const { flag, loading, error } = useSpecificFeatureFlag(flagName)
 
   const isInRollout = flag?.enabled
     ? checkUserInRollout(userId, flag.rolloutPercentage || 100)
@@ -304,14 +253,13 @@ function checkUserInRollout(userId: string, percentage: number): boolean {
  */
 export function withFeatureFlag<P extends Record<string, any>>(
   flagName: string,
-  FallbackComponent?: React.ComponentType<P>,
-  options?: FeatureFlagOptions
+  FallbackComponent?: React.ComponentType<P>
 ) {
   return function FeatureFlagWrapper(
     WrappedComponent: React.ComponentType<P>
   ): React.ComponentType<P> {
     return function WithFeatureFlagComponent(props: P): React.ReactElement | null {
-      const { isEnabled, loading } = useFeatureFlag(flagName, options)
+      const { isEnabled, loading } = useFeatureFlag(flagName)
 
       if (loading) {
         return null // or a loading spinner

src/index.ts

@@ -34,11 +34,6 @@ export type PayloadFeatureFlagsConfig = {
    * Override collection configuration
    */
   collectionOverrides?: CollectionOverrides
-  /**
-   * Enable custom list view for feature flags
-   * @default false
-   */
-  enableCustomListView?: boolean
 }
 
 export const payloadFeatureFlags =
@@ -49,7 +44,6 @@ export const payloadFeatureFlags =
       defaultValue = false,
       enableRollouts = true,
       enableVariants = true,
-      enableCustomListView = false,
       collectionOverrides,
     } = pluginOptions
 
@@ -169,15 +163,6 @@ 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,6 +1,4 @@
 'use client'
-import React from 'react'
-import type { ListViewClientProps } from 'payload'
 import { useState, useEffect, useCallback, useMemo, memo } from 'react'
 import {
   useConfig,
@@ -238,7 +236,7 @@ const FeatureFlagsClientComponent = ({
           color: styles.text,
           margin: '0 0 0.5rem 0'
         }}>
-          Feature Flags
+          Feature Flags Dashboard
         </h1>
         <p style={{
           color: styles.textMuted,
@@ -666,4 +664,4 @@ const FeatureFlagsClientComponent = ({
 }
 
 export const FeatureFlagsClient = memo(FeatureFlagsClientComponent)
-export default FeatureFlagsClient
+export default FeatureFlagsClient

src/views/FeatureFlagsView.tsx

@@ -1,13 +1,19 @@
-import React from 'react'
-import type { ListViewServerProps } from 'payload'
+import type { AdminViewServerProps } from 'payload'
+import { DefaultTemplate } from '@payloadcms/next/templates'
+import { Gutter } from '@payloadcms/ui'
 import FeatureFlagsClient from './FeatureFlagsClient.js'
 import type { FeatureFlag } from '../types/index.js'
 
-async function fetchInitialFlags(payload: any, collectionSlug: string): Promise<FeatureFlag[]> {
+async function fetchInitialFlags(payload: any, searchParams?: Record<string, any>): 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: 1000,
+      limit,
+      page,
       sort: 'name',
     })
 
@@ -18,83 +24,131 @@ async function fetchInitialFlags(payload: any, collectionSlug: string): Promise<
   }
 }
 
-export default async function FeatureFlagsView(props: ListViewServerProps) {
-  const { collectionConfig, user, permissions, payload } = props
+export default async function FeatureFlagsView({
+  initPageResult,
+  params,
+  searchParams,
+}: AdminViewServerProps) {
+  const {
+    req: { user },
+    permissions,
+  } = initPageResult
 
   // Security check: User must be logged in
   if (!user) {
     return (
-      <div style={{
-        padding: '2rem',
-        textAlign: 'center',
-        color: 'var(--theme-error-500)',
-        backgroundColor: 'var(--theme-error-50)',
-        border: '1px solid var(--theme-error-200)',
-        borderRadius: '0.5rem',
-        margin: '2rem 0'
-      }}>
-        <h2 style={{ marginBottom: '1rem', color: 'var(--theme-error-600)' }}>
-          Authentication Required
-        </h2>
-        <p style={{ marginBottom: '1rem' }}>
-          You must be logged in to view the Feature Flags Dashboard.
-        </p>
-        <a
-          href="/admin/login"
-          style={{
-            display: 'inline-block',
-            padding: '0.75rem 1.5rem',
-            backgroundColor: 'var(--theme-error-500)',
-            color: 'white',
-            textDecoration: 'none',
-            borderRadius: '0.375rem',
-            fontWeight: '500'
-          }}
-        >
-          Go to Login
-        </a>
-      </div>
+      <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',
+            color: 'var(--theme-error-500)',
+            backgroundColor: 'var(--theme-error-50)',
+            border: '1px solid var(--theme-error-200)',
+            borderRadius: '0.5rem',
+            margin: '2rem 0'
+          }}>
+            <h2 style={{ marginBottom: '1rem', color: 'var(--theme-error-600)' }}>
+              Authentication Required
+            </h2>
+            <p style={{ marginBottom: '1rem' }}>
+              You must be logged in to view the Feature Flags Dashboard.
+            </p>
+            <a
+              href="/admin/login"
+              style={{
+                display: 'inline-block',
+                padding: '0.75rem 1.5rem',
+                backgroundColor: 'var(--theme-error-500)',
+                color: 'white',
+                textDecoration: 'none',
+                borderRadius: '0.375rem',
+                fontWeight: '500'
+              }}
+            >
+              Go to Login
+            </a>
+          </div>
+        </Gutter>
+      </DefaultTemplate>
     )
   }
 
-  // Security check: User must have permissions to access the collection
-  const canReadFeatureFlags = permissions?.collections?.[collectionConfig.slug]?.read
+  // Security check: User must have permissions to access feature-flags collection
+  const collectionSlug = searchParams?.collectionSlug as string || 'feature-flags'
+  const canReadFeatureFlags = permissions?.collections?.[collectionSlug]?.read
   if (!canReadFeatureFlags) {
     return (
-      <div style={{
-        padding: '2rem',
-        textAlign: 'center',
-        color: 'var(--theme-warning-600)',
-        backgroundColor: 'var(--theme-warning-50)',
-        border: '1px solid var(--theme-warning-200)',
-        borderRadius: '0.5rem',
-        margin: '2rem 0'
-      }}>
-        <h2 style={{ marginBottom: '1rem', color: 'var(--theme-warning-700)' }}>
-          Access Denied
-        </h2>
-        <p style={{ marginBottom: '1rem' }}>
-          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 {collectionConfig.slug} collection.
-        </p>
-      </div>
+      <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',
+            color: 'var(--theme-warning-600)',
+            backgroundColor: 'var(--theme-warning-50)',
+            border: '1px solid var(--theme-warning-200)',
+            borderRadius: '0.5rem',
+            margin: '2rem 0'
+          }}>
+            <h2 style={{ marginBottom: '1rem', color: 'var(--theme-warning-700)' }}>
+              Access Denied
+            </h2>
+            <p style={{ marginBottom: '1rem' }}>
+              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.
+            </p>
+          </div>
+        </Gutter>
+      </DefaultTemplate>
     )
   }
 
   // Fetch initial data server-side (only if user has access)
-  const initialFlags = await fetchInitialFlags(payload, collectionConfig.slug)
+  const initialFlags = await fetchInitialFlags(initPageResult.req.payload, searchParams)
 
-  // Check if user can update feature flags
-  const canUpdateFeatureFlags = permissions?.collections?.[collectionConfig.slug]?.update || false
+  // Check if user can update feature flags (use already defined collection slug)
+  const canUpdateFeatureFlags = permissions?.collections?.[collectionSlug]?.update || false
 
+  // Use DefaultTemplate with proper props structure from initPageResult
   return (
-    <FeatureFlagsClient
-      initialFlags={initialFlags}
-      canUpdate={canUpdateFeatureFlags}
-      maxFlags={100}
-      collectionSlug={collectionConfig.slug}
-    />
+    <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}
+          collectionSlug={collectionSlug}
+        />
+      </Gutter>
+    </DefaultTemplate>
   )
 }