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/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,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>

packages/admin/dashboard/src/routes/orders/order-list/components/order-list-table/configurable-order-list-table.tsx

@@ -0,0 +1,19 @@
+import { Container, Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+export const ConfigurableOrderListTable = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{t("orders.domain")}</Heading>
+      </div>
+      <div className="px-6 py-4">
+        <p className="text-ui-fg-muted">
+          View configurations feature is enabled. Full implementation coming soon.
+        </p>
+      </div>
+    </Container>
+  )
+}

packages/admin/dashboard/src/routes/orders/order-list/components/order-list-table/order-list-table.tsx

@@ -8,6 +8,8 @@ import { useOrderTableColumns } from "../../../../../hooks/table/columns/use-ord
 import { useOrderTableFilters } from "../../../../../hooks/table/filters/use-order-table-filters"
 import { useOrderTableQuery } from "../../../../../hooks/table/query/use-order-table-query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
+import { ConfigurableOrderListTable } from "./configurable-order-list-table"
 
 import { DEFAULT_FIELDS } from "../../const"
 
@@ -15,6 +17,13 @@ const PAGE_SIZE = 20
 
 export const OrderListTable = () => {
   const { t } = useTranslation()
+  const isViewConfigEnabled = useFeatureFlag("view_configurations")
+
+  // If feature flag is enabled, use the new configurable table
+  if (isViewConfigEnabled) {
+    return <ConfigurableOrderListTable />
+  }
+
   const { searchParams, raw } = useOrderTableQuery({
     pageSize: PAGE_SIZE,
   })