@ibdop/platform-kit 1.0.10 → 1.0.11

package/src/hooks/useFeatures.ts

@@ -0,0 +1,445 @@
+/**
+ * Hook for working with feature toggles
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useShellAuth } from './useShellAuth'
+import type {
+  FeatureToggleInfo,
+  FeaturesResponse,
+  FeatureToggleAdmin,
+  FeatureAdminResponse,
+  FeatureCreateRequest,
+  FeatureUpdateRequest,
+  MicrofrontendWithFeatures,
+  MicrofrontendsFeaturesResponse,
+} from '../types'
+
+/**
+ * Result of useFeatures hook
+ */
+export interface UseFeaturesResult {
+  features: FeatureToggleInfo[]
+  totalCount: number
+  userRoles: string[]
+  isLoading: boolean
+  error: string | null
+  refetch: () => Promise<void>
+  isFeatureEnabled: (featureName: string) => boolean
+  getFeaturesByMf: (mfName: string) => FeatureToggleInfo[]
+}
+
+/**
+ * Hook to get feature toggles for the current user
+ * 
+ * @example
+ * ```typescript
+ * import { useFeatures } from '@ib-dop/platform-kit'
+ * 
+ * function FeatureFlagComponent() {
+ *   const { features, isFeatureEnabled, isLoading } = useFeatures()
+ * 
+ *   if (isLoading) return <Spinner />
+ * 
+ *   return (
+ *     <div>
+ *       {isFeatureEnabled('new-dashboard') && <NewDashboard />}
+ *       {!isFeatureEnabled('new-dashboard') && <OldDashboard />}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useFeatures(): UseFeaturesResult {
+  const auth = useShellAuth()
+  const [features, setFeatures] = useState<FeatureToggleInfo[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [userRoles, setUserRoles] = useState<string[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchFeatures = useCallback(async () => {
+    if (!auth.isAuthenticated) {
+      console.debug('[useFeatures] Not authenticated')
+      setIsLoading(false)
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      const token = auth.user?.access_token
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`
+      }
+
+      const response = await fetch('/api/features', { headers })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const result: FeaturesResponse = await response.json()
+      setFeatures(result.features || [])
+      setTotalCount(result.totalCount || 0)
+      setUserRoles(result.userRoles || [])
+    } catch (err) {
+      console.debug('Features fetch error:', err)
+      setError(err instanceof Error ? err.message : String(err))
+      setFeatures([])
+      setUserRoles([])
+    } finally {
+      setIsLoading(false)
+    }
+  }, [auth.isAuthenticated, auth.user?.access_token])
+
+  useEffect(() => {
+    fetchFeatures()
+  }, [fetchFeatures])
+
+  const isFeatureEnabled = useCallback(
+    (featureName: string): boolean => {
+      const feature = features.find((f) => f.name === featureName)
+      return feature?.userEnabled ?? false
+    },
+    [features]
+  )
+
+  const getFeaturesByMf = useCallback(
+    (mfName: string): FeatureToggleInfo[] => {
+      return features.filter((f) => f.mfDependencies?.includes(mfName))
+    },
+    [features]
+  )
+
+  return {
+    features,
+    totalCount,
+    userRoles,
+    isLoading,
+    error,
+    refetch: fetchFeatures,
+    isFeatureEnabled,
+    getFeaturesByMf,
+  }
+}
+
+/**
+ * Result of useFeatureAdmin hook
+ */
+export interface UseFeatureAdminResult {
+  features: FeatureToggleAdmin[]
+  microfrontends: string[]
+  isAdmin: boolean
+  isLoading: boolean
+  error: string | null
+  refetch: () => Promise<void>
+  createFeature: (feature: FeatureCreateRequest) => Promise<boolean>
+  updateFeature: (name: string, feature: FeatureUpdateRequest) => Promise<boolean>
+  toggleFeature: (name: string, enabled: boolean) => Promise<boolean>
+  deleteFeature: (name: string) => Promise<boolean>
+}
+
+/**
+ * Hook for admin operations with feature toggles
+ * 
+ * @example
+ * ```typescript
+ * import { useFeatureAdmin } from '@ib-dop/platform-kit'
+ * 
+ * function AdminPanel() {
+ *   const { 
+ *     features, 
+ *     isAdmin, 
+ *     isLoading,
+ *     toggleFeature 
+ *   } = useFeatureAdmin()
+ * 
+ *   if (isLoading) return <Spinner />
+ *   if (!isAdmin) return <AccessDenied />
+ * 
+ *   return (
+ *     <table>
+ *       {features.map(f => (
+ *         <tr key={f.name}>
+ *           <td>{f.name}</td>
+ *           <td>{f.enabled ? 'ON' : 'OFF'}</td>
+ *           <button onClick={() => toggleFeature(f.name, !f.enabled)}>
+ *             Toggle
+ *           </button>
+ *         </tr>
+ *       ))}
+ *     </table>
+ *   )
+ * }
+ * ```
+ */
+export function useFeatureAdmin(): UseFeatureAdminResult {
+  const auth = useShellAuth()
+  const [features, setFeatures] = useState<FeatureToggleAdmin[]>([])
+  const [microfrontends, setMicrofrontends] = useState<string[]>([])
+  const [isAdmin, setIsAdmin] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchFeatures = useCallback(async () => {
+    if (!auth.isAuthenticated) {
+      console.debug('[useFeatureAdmin] Not authenticated')
+      setIsLoading(false)
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      const token = auth.user?.access_token
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`
+      }
+
+      const response = await fetch('/api/features/admin', { headers })
+
+      if (!response.ok) {
+        if (response.status === 403) {
+          console.warn('[useFeatureAdmin] 403 Forbidden - checking if token has admin role')
+          setIsAdmin(false)
+          setFeatures([])
+          setMicrofrontends([])
+          setIsLoading(false)
+          return
+        }
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const result: FeatureAdminResponse = await response.json()
+      setFeatures(result.featureToggles || [])
+      setMicrofrontends(result.microfrontends || [])
+      setIsAdmin(result.isAdmin || false)
+    } catch (err) {
+      console.debug('FeatureAdmin fetch error:', err)
+      setFeatures([])
+      setMicrofrontends([])
+      setIsAdmin(false)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [auth.isAuthenticated, auth.user?.access_token])
+
+  const createFeature = useCallback(
+    async (feature: FeatureCreateRequest): Promise<boolean> => {
+      try {
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+        }
+        const token = auth.user?.access_token
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const response = await fetch('/api/features/admin', {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(feature),
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `HTTP ${response.status}`)
+        }
+
+        await fetchFeatures()
+        return true
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+        return false
+      }
+    },
+    [fetchFeatures]
+  )
+
+  const updateFeature = useCallback(
+    async (name: string, feature: FeatureUpdateRequest): Promise<boolean> => {
+      try {
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+        }
+        const token = auth.user?.access_token
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const response = await fetch(`/api/features/admin/${encodeURIComponent(name)}`, {
+          method: 'PUT',
+          headers,
+          body: JSON.stringify(feature),
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `HTTP ${response.status}`)
+        }
+
+        await fetchFeatures()
+        return true
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+        return false
+      }
+    },
+    [fetchFeatures]
+  )
+
+  const toggleFeature = useCallback(
+    async (name: string, enabled: boolean): Promise<boolean> => {
+      try {
+        const headers: Record<string, string> = {}
+        const token = auth.user?.access_token
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const response = await fetch(
+          `/api/features/admin/${encodeURIComponent(name)}/toggle?enabled=${enabled}`,
+          {
+            method: 'POST',
+            headers,
+          }
+        )
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `HTTP ${response.status}`)
+        }
+
+        await fetchFeatures()
+        return true
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+        return false
+      }
+    },
+    [fetchFeatures]
+  )
+
+  const deleteFeature = useCallback(
+    async (name: string): Promise<boolean> => {
+      try {
+        const headers: Record<string, string> = {}
+        const token = auth.user?.access_token
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const response = await fetch(`/api/features/admin/${encodeURIComponent(name)}`, {
+          method: 'DELETE',
+          headers,
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `HTTP ${response.status}`)
+        }
+
+        await fetchFeatures()
+        return true
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+        return false
+      }
+    },
+    [fetchFeatures]
+  )
+
+  useEffect(() => {
+    fetchFeatures()
+  }, [fetchFeatures])
+
+  return {
+    features,
+    microfrontends,
+    isAdmin,
+    isLoading,
+    error,
+    refetch: fetchFeatures,
+    createFeature,
+    updateFeature,
+    toggleFeature,
+    deleteFeature,
+  }
+}
+
+/**
+ * Hook to get microfrontends with their features
+ */
+export interface UseMicrofrontendsFeaturesResult {
+  microfrontends: MicrofrontendWithFeatures[]
+  totalCount: number
+  isLoading: boolean
+  error: string | null
+  refetch: () => Promise<void>
+}
+
+export function useMicrofrontendsFeatures(): UseMicrofrontendsFeaturesResult {
+  const auth = useShellAuth()
+  const [microfrontends, setMicrofrontends] = useState<MicrofrontendWithFeatures[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchData = useCallback(async () => {
+    if (!auth.isAuthenticated) {
+      setIsLoading(false)
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      const token = auth.user?.access_token
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`
+      }
+
+      const response = await fetch('/api/features/microfrontends', { headers })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const result: MicrofrontendsFeaturesResponse = await response.json()
+      setMicrofrontends(result.microfrontends || [])
+      setTotalCount(result.totalCount || 0)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setIsLoading(false)
+    }
+  }, [auth.isAuthenticated, auth.user?.access_token])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  return {
+    microfrontends,
+    totalCount,
+    isLoading,
+    error,
+    refetch: fetchData,
+  }
+}

package/src/types/index.ts

@@ -225,3 +225,102 @@ export type MfeNameSource =
   | 'sessionStorage.mf-config'
   | 'import.meta.env.VITE_MFE_NAME'
   | 'import.meta.env.MFE_NAME'
+
+// ==================== Feature Types ====================
+
+/**
+ * Feature toggle for a user
+ */
+export interface FeatureToggleInfo {
+  name: string
+  enabled: boolean
+  description?: string
+  roles?: string[]
+  percentage?: number
+  microfrontends?: string[]
+  userEnabled: boolean
+  mfDependencies?: string[]
+}
+
+/**
+ * Response from /api/features endpoint
+ */
+export interface FeaturesResponse {
+  features: FeatureToggleInfo[]
+  totalCount: number
+  userRoles: string[]
+}
+
+/**
+ * Admin feature toggle (full info)
+ */
+export interface FeatureToggleAdmin {
+  name: string
+  enabled: boolean
+  description: string
+  roles: string[]
+  percentage: number
+  microfrontends: string[]
+  mfDependencies: string[]
+}
+
+/**
+ * Admin response from /api/features/admin endpoint
+ */
+export interface FeatureAdminResponse {
+  featureToggles: FeatureToggleAdmin[]
+  isAdmin: boolean
+  microfrontends: string[]
+  totalCount: number
+}
+
+/**
+ * Feature creation request
+ */
+export interface FeatureCreateRequest {
+  name: string
+  enabled?: boolean
+  description?: string
+  roles?: string[]
+  percentage?: number
+  microfrontends?: string[]
+}
+
+/**
+ * Feature update request
+ */
+export interface FeatureUpdateRequest {
+  enabled?: boolean
+  description?: string
+  roles?: string[]
+  percentage?: number
+  microfrontends?: string[]
+}
+
+/**
+ * Microfrontend with its features
+ */
+export interface MicrofrontendWithFeatures {
+  name: string
+  description?: string
+  featureToggles: string[]
+  features: FeatureInfo[]
+}
+
+/**
+ * Feature info for a microfrontend
+ */
+export interface FeatureInfo {
+  name: string
+  enabled: boolean
+  global: boolean
+  required: boolean
+}
+
+/**
+ * Response from /api/features/microfrontends endpoint
+ */
+export interface MicrofrontendsFeaturesResponse {
+  microfrontends: MicrofrontendWithFeatures[]
+  totalCount: number
+}