feat: add feature flag

Author: srindom

FEATURE_FLAG_DEBUG.md

@@ -0,0 +1,66 @@
+# Debugging Feature Flags
+
+## Steps to Enable the Feature Flag
+
+### Option 1: Environment Variable (Highest Priority)
+```bash
+export MEDUSA_FF_VIEW_CONFIGURATIONS=true
+npm run dev
+```
+
+### Option 2: medusa-config.js
+```javascript
+module.exports = {
+  projectConfig: {
+    // ... other config
+  },
+  featureFlags: {
+    view_configurations: true
+  }
+}
+```
+
+**Note**: Make sure `featureFlags` is at the root level, not inside `projectConfig`.
+
+## Debugging Steps
+
+1. **Test the feature flag directly**:
+   ```bash
+   curl http://localhost:9000/admin/test-feature-flag
+   ```
+   This will show:
+   - Current flag value
+   - Environment variable value
+   - All loaded flags
+
+2. **Check feature flags API**:
+   ```bash
+   curl http://localhost:9000/admin/feature-flags \
+     -H "Authorization: Bearer YOUR_TOKEN"
+   ```
+
+3. **Browser Console**:
+   - Open browser dev tools
+   - Navigate to Orders page
+   - Check console for:
+     - "Feature flags loaded: ..."
+     - "view_configurations flag: ..."
+     - "Checking feature flag view_configurations: ..."
+
+## Common Issues
+
+1. **Config not loading**: Make sure to restart the server after changing medusa-config.js
+2. **Cache issues**: Clear browser cache or open in incognito mode
+3. **Wrong config format**: Ensure featureFlags is at root level, not nested
+
+## Verification
+
+When the flag is enabled:
+- `/admin/view-configurations` endpoints should return data (not 404)
+- Orders page should show view selector dropdown
+- Console should show "view_configurations flag: true"
+
+When the flag is disabled:
+- `/admin/view-configurations` endpoints should return 404
+- Orders page should show legacy table
+- Console should show "view_configurations flag: false"

packages/admin/dashboard/src/components/data-table/data-table.tsx

@@ -25,6 +25,7 @@ import { useQueryParams } from "../../hooks/use-query-params"
 import { ActionMenu } from "../common/action-menu"
 import { ViewConfiguration } from "../../providers/view-configuration-provider"
 import { ViewSelector } from "../table/view-selector"
+import { useFeatureFlag } from "../../providers/feature-flag-provider"
 
 type DataTableActionProps = {
   label: string
@@ -130,6 +131,11 @@ export const DataTable = <TData,>({
   currentColumns,
 }: DataTableProps<TData>) => {
   const { t } = useTranslation()
+  const isViewConfigEnabled = useFeatureFlag("view_configurations")
+
+  // If view config is disabled, don't use column visibility features
+  const effectiveEnableColumnVisibility = isViewConfigEnabled && enableColumnVisibility
+  const effectiveEnableViewSelector = isViewConfigEnabled && enableViewSelector
 
   const enableFiltering = filters && filters.length > 0
   const enableCommands = commands && commands.length > 0
@@ -314,13 +320,13 @@ export const DataTable = <TData,>({
       : undefined,
     rowSelection,
     isLoading,
-    columnVisibility: enableColumnVisibility
+    columnVisibility: effectiveEnableColumnVisibility
       ? {
           state: columnVisibility,
           onColumnVisibilityChange: handleColumnVisibilityChange,
         }
       : undefined,
-    columnOrder: columnOrder && onColumnOrderChange
+    columnOrder: effectiveEnableColumnVisibility && columnOrder && onColumnOrderChange
       ? {
           state: columnOrder,
           onColumnOrderChange: onColumnOrderChange,
@@ -359,8 +365,8 @@ export const DataTable = <TData,>({
             {enableSorting && (
               <Primitive.SortingMenu tooltip={t("filters.sortLabel")} />
             )}
-            {enableColumnVisibility && <Primitive.ColumnVisibilityMenu />}
-            {enableViewSelector && entity && (
+            {effectiveEnableColumnVisibility && <Primitive.ColumnVisibilityMenu />}
+            {effectiveEnableViewSelector && entity && (
               <ViewSelector 
                 entity={entity} 
                 onViewChange={onViewChange} 
@@ -387,8 +393,8 @@ export const DataTable = <TData,>({
             {enableSorting && (
               <Primitive.SortingMenu tooltip={t("filters.sortLabel")} />
             )}
-            {enableColumnVisibility && <Primitive.ColumnVisibilityMenu />}
-            {enableViewSelector && entity && (
+            {effectiveEnableColumnVisibility && <Primitive.ColumnVisibilityMenu />}
+            {effectiveEnableViewSelector && entity && (
               <ViewSelector 
                 entity={entity} 
                 onViewChange={onViewChange} 

packages/admin/dashboard/src/components/table/data-table/data-table.tsx

@@ -12,7 +12,6 @@ interface DataTableProps<TData>
   pageSize: number
   queryObject?: Record<string, any>
   noRecords?: Pick<NoResultsProps, "title" | "message">
-  enableColumnVisibility?: boolean
 }
 
 // Maybe we should use the memoized version of DataTableRoot
@@ -39,11 +38,6 @@ export const _DataTable = <TData,>({
   noHeader = false,
   layout = "fit",
   noRecords: noRecordsProps = {},
-  enableColumnVisibility = false,
-  enableViewSelector = false,
-  entity,
-  onViewChange,
-  currentColumns,
 }: DataTableProps<TData>) => {
   if (isLoading) {
     return (
@@ -85,12 +79,6 @@ export const _DataTable = <TData,>({
         orderBy={orderBy}
         filters={filters}
         prefix={prefix}
-        table={table}
-        enableColumnVisibility={enableColumnVisibility}
-        enableViewSelector={enableViewSelector}
-        entity={entity}
-        onViewChange={onViewChange}
-        currentColumns={currentColumns}
       />
       <DataTableRoot
         table={table}

packages/admin/dashboard/src/hooks/api/feature-flags.tsx

@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+
+export type FeatureFlags = {
+  view_configurations?: boolean
+  [key: string]: boolean | undefined
+}
+
+export const useFeatureFlags = () => {
+  return useQuery<FeatureFlags>({
+    queryKey: ["admin", "feature-flags"],
+    queryFn: async () => {
+      const response = await sdk.client.fetch<{ feature_flags: FeatureFlags }>("/admin/feature-flags", {
+        method: "GET",
+      })
+      
+      return response.feature_flags
+    },
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    cacheTime: 10 * 60 * 1000, // Keep in cache for 10 minutes
+  })
+}

packages/admin/dashboard/src/providers/feature-flag-provider/index.tsx

@@ -0,0 +1,58 @@
+import React, { createContext, useContext } from "react"
+import { useFeatureFlags, FeatureFlags } from "../../hooks/api/feature-flags"
+
+interface FeatureFlagContextValue {
+  flags: FeatureFlags
+  isLoading: boolean
+  isFeatureEnabled: (flag: keyof FeatureFlags) => boolean
+}
+
+const FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null)
+
+export const useFeatureFlag = (flag: keyof FeatureFlags): boolean => {
+  const context = useContext(FeatureFlagContext)
+  if (!context) {
+    // If no context, assume feature is disabled
+    return false
+  }
+  return context.isFeatureEnabled(flag)
+}
+
+export const useFeatureFlagContext = () => {
+  const context = useContext(FeatureFlagContext)
+  if (!context) {
+    throw new Error("useFeatureFlagContext must be used within FeatureFlagProvider")
+  }
+  return context
+}
+
+interface FeatureFlagProviderProps {
+  children: React.ReactNode
+}
+
+export const FeatureFlagProvider: React.FC<FeatureFlagProviderProps> = ({ children }) => {
+  const { data: flags = {}, isLoading, error } = useFeatureFlags()
+
+  // Debug logging
+  React.useEffect(() => {
+    if (!isLoading) {
+      console.log("Feature flags loaded:", flags)
+      console.log("view_configurations flag:", flags.view_configurations)
+    }
+    if (error) {
+      console.error("Error loading feature flags:", error)
+    }
+  }, [flags, isLoading, error])
+
+  const isFeatureEnabled = (flag: keyof FeatureFlags): boolean => {
+    const enabled = flags[flag] === true
+    console.log(`Checking feature flag ${flag}:`, enabled)
+    return enabled
+  }
+
+  return (
+    <FeatureFlagContext.Provider value={{ flags, isLoading, isFeatureEnabled }}>
+      {children}
+    </FeatureFlagContext.Provider>
+  )
+}

packages/admin/dashboard/src/providers/providers.tsx

@@ -9,6 +9,7 @@ import { ExtensionProvider } from "./extension-provider"
 import { I18nProvider } from "./i18n-provider"
 import { ThemeProvider } from "./theme-provider"
 import { ViewConfigurationProvider } from "./view-configuration-provider"
+import { FeatureFlagProvider } from "./feature-flag-provider"
 
 type ProvidersProps = PropsWithChildren<{
   api: DashboardApp["api"]
@@ -21,11 +22,13 @@ export const Providers = ({ api, children }: ProvidersProps) => {
         <HelmetProvider>
           <QueryClientProvider client={queryClient}>
             <ThemeProvider>
-              <ViewConfigurationProvider>
-                <I18n />
-                <I18nProvider>{children}</I18nProvider>
-                <Toaster />
-              </ViewConfigurationProvider>
+              <FeatureFlagProvider>
+                <ViewConfigurationProvider>
+                  <I18n />
+                  <I18nProvider>{children}</I18nProvider>
+                  <Toaster />
+                </ViewConfigurationProvider>
+              </FeatureFlagProvider>
             </ThemeProvider>
           </QueryClientProvider>
         </HelmetProvider>

packages/admin/dashboard/src/providers/view-configuration-provider/view-configuration-provider.tsx

@@ -2,16 +2,23 @@ import { PropsWithChildren, useCallback, useRef, useState } from "react"
 import { ViewConfigurationContext, ViewConfiguration } from "./view-configuration-context"
 import { sdk } from "../../lib/client"
 import { toast } from "@medusajs/ui"
+import { useFeatureFlag } from "../feature-flag-provider"
 
 export const ViewConfigurationProvider = ({ children }: PropsWithChildren) => {
   const [viewConfigurations] = useState<Map<string, ViewConfiguration[]>>(new Map())
   const [activeViews] = useState<Map<string, ViewConfiguration>>(new Map())
   const [isLoading] = useState<Map<string, boolean>>(new Map())
+  const isViewConfigEnabled = useFeatureFlag("view_configurations")
 
   // Use ref to track ongoing requests to prevent duplicate fetches
   const fetchingRef = useRef<Map<string, Promise<ViewConfiguration[]>>>(new Map())
 
   const getViewConfigurations = useCallback(async (entity: string): Promise<ViewConfiguration[]> => {
+    // Return empty array if feature is disabled
+    if (!isViewConfigEnabled) {
+      return []
+    }
+    
     // Check cache first
     if (viewConfigurations.has(entity)) {
       return viewConfigurations.get(entity)!
@@ -44,9 +51,14 @@ export const ViewConfigurationProvider = ({ children }: PropsWithChildren) => {
 
     fetchingRef.current.set(entity, fetchPromise)
     return fetchPromise
-  }, [viewConfigurations, isLoading])
+  }, [viewConfigurations, isLoading, isViewConfigEnabled])
 
   const getActiveView = useCallback(async (entity: string): Promise<ViewConfiguration | null> => {
+    // Return null if feature is disabled
+    if (!isViewConfigEnabled) {
+      return null
+    }
+    
     // Check cache first
     if (activeViews.has(entity)) {
       return activeViews.get(entity)
@@ -63,9 +75,14 @@ export const ViewConfigurationProvider = ({ children }: PropsWithChildren) => {
       console.error("Failed to fetch active view configuration:", error)
       return null
     }
-  }, [activeViews])
+  }, [activeViews, isViewConfigEnabled])
 
   const setActiveView = useCallback(async (entity: string, viewConfigurationId: string) => {
+    // Do nothing if feature is disabled
+    if (!isViewConfigEnabled) {
+      return
+    }
+    
     try {
       await sdk.admin.viewConfiguration.setActive({
         entity,
@@ -82,11 +99,16 @@ export const ViewConfigurationProvider = ({ children }: PropsWithChildren) => {
       console.error("Failed to set active view configuration:", error)
       toast.error("Failed to set active view")
     }
-  }, [activeViews, getViewConfigurations])
+  }, [activeViews, getViewConfigurations, isViewConfigEnabled])
 
   const createViewConfiguration = useCallback(async (
     config: Omit<ViewConfiguration, "id" | "created_at" | "updated_at">
   ): Promise<ViewConfiguration> => {
+    // Throw error if feature is disabled
+    if (!isViewConfigEnabled) {
+      throw new Error("View configurations feature is not enabled")
+    }
+    
     try {
       const response = await sdk.admin.viewConfiguration.create(config)
       const newConfig = response.view_configuration
@@ -101,12 +123,17 @@ export const ViewConfigurationProvider = ({ children }: PropsWithChildren) => {
       toast.error(errorMessage)
       throw error
     }
-  }, [viewConfigurations])
+  }, [viewConfigurations, isViewConfigEnabled])
 
   const updateViewConfiguration = useCallback(async (
     id: string, 
     config: Partial<ViewConfiguration>
   ): Promise<ViewConfiguration> => {
+    // Throw error if feature is disabled
+    if (!isViewConfigEnabled) {
+      throw new Error("View configurations feature is not enabled")
+    }
+    
     try {
       const response = await sdk.admin.viewConfiguration.update(id, config)
       const updatedConfig = response.view_configuration
@@ -128,9 +155,14 @@ export const ViewConfigurationProvider = ({ children }: PropsWithChildren) => {
       toast.error(errorMessage)
       throw error
     }
-  }, [viewConfigurations, activeViews])
+  }, [viewConfigurations, activeViews, isViewConfigEnabled])
 
   const deleteViewConfiguration = useCallback(async (id: string) => {
+    // Throw error if feature is disabled
+    if (!isViewConfigEnabled) {
+      throw new Error("View configurations feature is not enabled")
+    }
+    
     try {
       // First get the config to know which entity to invalidate
       const configs = Array.from(viewConfigurations.values()).flat()
@@ -152,7 +184,7 @@ export const ViewConfigurationProvider = ({ children }: PropsWithChildren) => {
       toast.error("Failed to delete view")
       throw error
     }
-  }, [viewConfigurations, activeViews])
+  }, [viewConfigurations, activeViews, isViewConfigEnabled])
 
   const invalidateCache = useCallback((entity: string) => {
     viewConfigurations.delete(entity)