feat: view config feature flag (#13171)

* feat: add view_configurations feature flag

  - Add feature flag provider and hooks to admin dashboard
  - Add backend API endpoint for feature flags
  - Create view_configurations feature flag (disabled by default)
  - Update order list table to use legacy version when flag is disabled
  - Can be enabled with MEDUSA_FF_VIEW_CONFIGURATIONS=true env var

* fix: naming

* fix: feature flags unauthenticated

* fix: add test

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

@@ -0,0 +1,46 @@
+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()
+
+  const isFeatureEnabled = (flag: keyof FeatureFlags): boolean => {
+    const enabled = flags[flag] === true
+    return enabled
+  }
+
+  return (
+    <FeatureFlagContext.Provider value={{ flags, isLoading, isFeatureEnabled }}>
+      {children}
+    </FeatureFlagContext.Provider>
+  )
+}

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

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