fix(ui): resolve module resolution and TypeScript errors

Co-Authored-By: Dan Lynch <[email protected]>

Author: devin-ai-integration[bot]

packages/ui/next.config.js

@@ -1,7 +1,17 @@
 /** @type {import('next').NextConfig} */
+const path = require('path');
+
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  transpilePackages: ['kubernetesjs'],
+  webpack: (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      kubernetesjs: path.resolve(__dirname, '../../kubernetesjs')
+    };
+    return config;
+  },
 }
 
 module.exports = nextConfig

packages/ui/src/components/namespace-selector.tsx

@@ -32,7 +32,7 @@ export function NamespaceSelector() {
           query: {}
         });
 
-        const namespaceNames = response.items?.map(ns => ns.metadata.name) || [];
+        const namespaceNames = response.items?.map((ns: any) => ns.metadata.name) || [];
         setNamespaces(namespaceNames);
       } catch (error) {
         console.error("Failed to fetch namespaces:", error);
@@ -67,7 +67,7 @@ export function NamespaceSelector() {
               <CommandItem
                 key={ns}
                 value={ns}
-                onSelect={(currentValue) => {
+                onSelect={(currentValue: string) => {
                   setNamespace(currentValue);
                   setOpen(false);
                 }}

packages/ui/src/hooks/use-kubernetes.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState, useEffect, createContext, useContext } from "react";
-import { KubernetesClient } from "kubernetesjs";
+import React, { useState, useEffect, createContext, useContext } from "react";
+import type { KubernetesClient } from "kubernetesjs";
 import { getKubernetesClient, getCurrentNamespace } from "@/lib/kubernetes";
 
 interface KubernetesContextType {
@@ -15,9 +15,9 @@ interface KubernetesContextType {
 const KubernetesContext = createContext<KubernetesContextType | undefined>(undefined);
 
 export function KubernetesProvider({ children }: { children: React.ReactNode }) {
-  const [client] = useState<KubernetesClient>(() => getKubernetesClient());
-  const [namespace, setNamespace] = useState<string>(getCurrentNamespace());
-  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [client] = useState(() => getKubernetesClient());
+  const [namespace, setNamespace] = useState(getCurrentNamespace());
+  const [isConnected, setIsConnected] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -35,18 +35,18 @@ export function KubernetesProvider({ children }: { children: React.ReactNode })
     checkConnection();
   }, [client]);
 
-  return (
-    <KubernetesContext.Provider
-      value={{
+  return React.createElement(
+    KubernetesContext.Provider,
+    {
+      value: {
         client,
         namespace,
         setNamespace,
         isConnected,
-        error,
-      }}
-    >
-      {children}
-    </KubernetesContext.Provider>
+        error
+      }
+    },
+    children
   );
 }
 

packages/ui/src/types/kubernetesjs.d.ts

@@ -0,0 +1,25 @@
+declare module 'kubernetesjs' {
+  export interface KubernetesClient {
+    getCoreV1APIResources(options: any): Promise<any>;
+    listCoreV1Namespace(options: any): Promise<any>;
+    listCoreV1NamespacedPod(options: any): Promise<any>;
+    listAppsV1NamespacedDeployment(options: any): Promise<any>;
+    listCoreV1NamespacedService(options: any): Promise<any>;
+    readNamespacedPodLog(options: any): Promise<any>;
+    createAppsV1NamespacedDeployment(options: any): Promise<any>;
+    createCoreV1NamespacedService(options: any): Promise<any>;
+    patchNamespacedDeployment(options: any): Promise<any>;
+    deleteNamespacedPod(options: any): Promise<any>;
+    deleteNamespacedDeployment(options: any): Promise<any>;
+    deleteNamespacedService(options: any): Promise<any>;
+  }
+
+  export interface KubernetesClientOptions {
+    basePath?: string;
+    restEndpoint?: string;
+  }
+
+  export class KubernetesClient {
+    constructor(options?: KubernetesClientOptions);
+  }
+}