Migrate UI hooks to @kubernetesjs/react

ui/app/providers.tsx

@@ -1,15 +1,20 @@
 'use client'
 
-import { KubernetesProvider } from '@/contexts/KubernetesContext'
+import { KubernetesProvider } from '../k8s/context'
+import { NamespaceProvider } from '@/contexts/NamespaceContext'
 
 interface ProvidersProps {
   children: React.ReactNode
 }
 
 export function Providers({ children }: ProvidersProps) {
   return (
-    <KubernetesProvider>
-      {children}
+    <KubernetesProvider initialConfig={{
+      restEndpoint: '/api/k8s'
+    }}>
+      <NamespaceProvider>
+        {children}
+      </NamespaceProvider>
     </KubernetesProvider>
   )
 }

ui/components/dashboard-layout.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { NamespaceSwitcher } from '@/components/namespace-switcher'
-import { useKubernetes } from '@/hooks'
+import { useKubernetes } from '../k8s/context'
 import {
   Package,
   Server,
@@ -38,8 +38,7 @@ interface DashboardLayoutProps {
 export function DashboardLayout({ children }: DashboardLayoutProps) {
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const pathname = usePathname()
-  const { config } = useKubernetes()
-
+  const { config } = useKubernetes();
   // Find active section based on pathname
   const activeSection = navigationItems.find(item => item.href === pathname)?.label || 'Overview'
 

ui/components/namespace-switcher.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useKubernetes, useNamespaces } from '@/hooks'
+import { useNamespaces } from '@/hooks'
+import { usePreferredNamespace } from '@/contexts/NamespaceContext'
 import {
   Select,
   SelectContent,
@@ -13,7 +14,7 @@ import { RefreshCw } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 
 export function NamespaceSwitcher() {
-  const { namespace, setNamespace } = useKubernetes()
+  const { namespace, setNamespace } = usePreferredNamespace()
   const { data, isLoading, error, refetch } = useNamespaces()
 
   const namespaces = data?.items?.map(item => item.metadata?.name).filter(Boolean) || []

ui/components/resources/pods.tsx

@@ -17,7 +17,8 @@ import {
   XCircle
 } from 'lucide-react'
 import { type Pod as K8sPod } from 'kubernetesjs'
-import { usePods, useDeletePod, usePodLogs, useKubernetes } from '@/hooks'
+import { usePods, useDeletePod, usePodLogs } from '@/hooks'
+import { usePreferredNamespace } from '@/contexts/NamespaceContext'
 
 interface Pod {
   name: string
@@ -34,7 +35,7 @@ export function PodsView() {
   const [selectedPod, setSelectedPod] = useState<Pod | null>(null)
 
   // Use TanStack Query hooks
-  const { namespace } = useKubernetes()
+  const { namespace } = usePreferredNamespace()
   const { data, isLoading, error, refetch } = usePods()
   const deletePodMutation = useDeletePod()
 

ui/components/templates/template-dialog.tsx

@@ -15,7 +15,8 @@ import { Label } from '@/components/ui/label'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Loader2, CheckCircle, XCircle } from 'lucide-react'
 import { type Deployment, type Service } from 'kubernetesjs'
-import { useKubernetes } from '@/hooks'
+import { useKubernetes } from '../../k8s/context'
+import { usePreferredNamespace } from '@/contexts/NamespaceContext'
 
 interface Template {
   id: string
@@ -36,7 +37,8 @@ interface TemplateDialogProps {
 }
 
 export function TemplateDialog({ template, open, onOpenChange }: TemplateDialogProps) {
-  const { client: k8sClient, namespace: contextNamespace } = useKubernetes()
+  const { client: k8sClient } = useKubernetes()
+  const { namespace: contextNamespace } = usePreferredNamespace()
 
   // Deploy template function
   const deployTemplate = async (params: {

ui/contexts/NamespaceContext.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import React, { createContext, useContext, useState } from 'react'
+
+interface NamespaceContextValue {
+  namespace: string
+  setNamespace: (ns: string) => void
+}
+
+const NamespaceContext = createContext<NamespaceContextValue | undefined>(undefined)
+
+interface NamespaceProviderProps {
+  children: React.ReactNode
+  initialNamespace?: string
+}
+
+export function NamespaceProvider({ children, initialNamespace = 'default' }: NamespaceProviderProps) {
+  const [namespace, setNamespace] = useState<string>(initialNamespace)
+
+  return (
+    <NamespaceContext.Provider value={{ namespace, setNamespace }}>
+      {children}
+    </NamespaceContext.Provider>
+  )
+}
+
+export function usePreferredNamespace(): NamespaceContextValue {
+  const ctx = useContext(NamespaceContext)
+  if (!ctx) throw new Error('usePreferredNamespace must be used within a NamespaceProvider')
+  return ctx
+}

ui/hooks/index.ts

@@ -7,6 +7,3 @@ export * from './useConfigMaps'
 export * from './usePods'
 export * from './useDaemonSets'
 export * from './useReplicaSets'
-
-// Re-export context hook
-export { useKubernetes } from '../contexts/KubernetesContext'

ui/hooks/useConfigMaps.ts

@@ -1,111 +1,102 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { useKubernetes } from '../contexts/KubernetesContext'
+import {
+  useListCoreV1ConfigMapForAllNamespacesQuery,
+  useListCoreV1NamespacedConfigMapQuery,
+  useReadCoreV1NamespacedConfigMapQuery,
+  useCreateCoreV1NamespacedConfigMap,
+  useReplaceCoreV1NamespacedConfigMap,
+  useDeleteCoreV1NamespacedConfigMap,
+} from '../k8s/index'
+import { usePreferredNamespace } from '../contexts/NamespaceContext'
 import type { ConfigMap, ConfigMapList } from 'kubernetesjs'
 
 // Query keys
 const CONFIGMAPS_KEY = ['configmaps'] as const
 
 export function useConfigMaps(namespace?: string) {
-  const { client, namespace: defaultNamespace } = useKubernetes()
+  const { namespace: defaultNamespace } = usePreferredNamespace()
   const ns = namespace || defaultNamespace
 
-  return useQuery<ConfigMapList, Error>({
-    queryKey: [...CONFIGMAPS_KEY, ns],
-    queryFn: async () => {
-      if (ns === '_all') {
-        const result = await client.listCoreV1ConfigMapForAllNamespaces({
-          query: {},
-        })
-        return result
-      } else {
-        const result = await client.listCoreV1NamespacedConfigMap({
-          path: { namespace: ns },
-          query: {},
-        })
-        return result
-      }
-    },
-    refetchOnMount: 'always',
-    staleTime: 0,
-  })
+  if (ns === '_all') {
+    return useListCoreV1ConfigMapForAllNamespacesQuery({ query: {}, path: {} })
+  }
+  return useListCoreV1NamespacedConfigMapQuery({ path: { namespace: ns }, query: {} })
 }
 
 export function useConfigMap(name: string, namespace?: string) {
-  const { client, namespace: defaultNamespace } = useKubernetes()
+  const { namespace: defaultNamespace } = usePreferredNamespace()
   const ns = namespace || defaultNamespace
 
-  return useQuery<ConfigMap, Error>({
-    queryKey: [...CONFIGMAPS_KEY, ns, name],
-    queryFn: async () => {
-      const result = await client.readCoreV1NamespacedConfigMap({
-        path: { namespace: ns, name },
-        query: {},
-      })
-      return result
-    },
-    enabled: !!name,
-    refetchOnMount: 'always',
-    staleTime: 0,
-  })
+  return useReadCoreV1NamespacedConfigMapQuery({ path: { namespace: ns, name }, query: {} })
 }
 
 export function useCreateConfigMap() {
-  const { client, namespace: defaultNamespace } = useKubernetes()
-  const queryClient = useQueryClient()
-
-  return useMutation<ConfigMap, Error, { configMap: ConfigMap; namespace?: string }>({
-    mutationFn: async ({ configMap, namespace }) => {
-      const ns = namespace || defaultNamespace
-      const result = await client.createCoreV1NamespacedConfigMap({
-        path: { namespace: ns },
-        query: {},
-        body: configMap,
-      })
-      return result
-    },
-    onSuccess: (_, variables) => {
-      const ns = variables.namespace || defaultNamespace
-      queryClient.invalidateQueries({ queryKey: [...CONFIGMAPS_KEY, ns] })
-    },
-  })
+  const { namespace: defaultNamespace } = usePreferredNamespace()
+  const base = useCreateCoreV1NamespacedConfigMap()
+  return {
+    ...base,
+    mutate: (
+      { configMap, namespace }: { configMap: ConfigMap; namespace?: string },
+      opts?: Parameters<typeof base.mutate>[1]
+    ) =>
+      base.mutate(
+        { path: { namespace: namespace || defaultNamespace }, query: {}, body: configMap },
+        opts
+      ),
+    mutateAsync: (
+      { configMap, namespace }: { configMap: ConfigMap; namespace?: string },
+      opts?: Parameters<typeof base.mutateAsync>[1]
+    ) =>
+      base.mutateAsync(
+        { path: { namespace: namespace || defaultNamespace }, query: {}, body: configMap },
+        opts
+      ),
+  }
 }
 
 export function useUpdateConfigMap() {
-  const { client, namespace: defaultNamespace } = useKubernetes()
-  const queryClient = useQueryClient()
-
-  return useMutation<ConfigMap, Error, { name: string; configMap: ConfigMap; namespace?: string }>({
-    mutationFn: async ({ name, configMap, namespace }) => {
-      const ns = namespace || defaultNamespace
-      const result = await client.replaceCoreV1NamespacedConfigMap({
-        path: { namespace: ns, name },
-        query: {},
-        body: configMap,
-      })
-      return result
-    },
-    onSuccess: (_, variables) => {
-      const ns = variables.namespace || defaultNamespace
-      queryClient.invalidateQueries({ queryKey: [...CONFIGMAPS_KEY, ns] })
-    },
-  })
+  const { namespace: defaultNamespace } = usePreferredNamespace()
+  const base = useReplaceCoreV1NamespacedConfigMap()
+  return {
+    ...base,
+    mutate: (
+      { name, configMap, namespace }: { name: string; configMap: ConfigMap; namespace?: string },
+      opts?: Parameters<typeof base.mutate>[1]
+    ) =>
+      base.mutate(
+        { path: { namespace: namespace || defaultNamespace, name }, query: {}, body: configMap },
+        opts
+      ),
+    mutateAsync: (
+      { name, configMap, namespace }: { name: string; configMap: ConfigMap; namespace?: string },
+      opts?: Parameters<typeof base.mutateAsync>[1]
+    ) =>
+      base.mutateAsync(
+        { path: { namespace: namespace || defaultNamespace, name }, query: {}, body: configMap },
+        opts
+      ),
+  }
 }
 
 export function useDeleteConfigMap() {
-  const { client, namespace: defaultNamespace } = useKubernetes()
-  const queryClient = useQueryClient()
-
-  return useMutation<void, Error, { name: string; namespace?: string }>({
-    mutationFn: async ({ name, namespace }) => {
-      const ns = namespace || defaultNamespace
-      await client.deleteCoreV1NamespacedConfigMap({
-        path: { namespace: ns, name },
-        query: {},
-      })
-    },
-    onSuccess: (_, variables) => {
-      const ns = variables.namespace || defaultNamespace
-      queryClient.invalidateQueries({ queryKey: [...CONFIGMAPS_KEY, ns] })
-    },
-  })
+  const { namespace: defaultNamespace } = usePreferredNamespace()
+  const base = useDeleteCoreV1NamespacedConfigMap()
+  return {
+    ...base,
+    mutate: (
+      { name, namespace }: { name: string; namespace?: string },
+      opts?: Parameters<typeof base.mutate>[1]
+    ) =>
+      base.mutate(
+        { path: { namespace: namespace || defaultNamespace, name }, query: {} },
+        opts
+      ),
+    mutateAsync: (
+      { name, namespace }: { name: string; namespace?: string },
+      opts?: Parameters<typeof base.mutateAsync>[1]
+    ) =>
+      base.mutateAsync(
+        { path: { namespace: namespace || defaultNamespace, name }, query: {} },
+        opts
+      ),
+  }
 }