From e928011839d24853e6df038ce9bdb139eb2aebfd Mon Sep 17 00:00:00 2001
From: Shaun Arman <shaun.arman@motorolasolutions.com>
Date: Sun, 7 Jun 2026 12:19:08 -0500
Subject: [PATCH] fix(kubernetes): use kubeconfig files from Settings instead
 of duplicate cluster management
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove duplicate 'Add Cluster' button and modal
- Remove duplicate 'Start Port Forward' button and modal
- KubernetesPage now uses kubeconfig files from Settings → Kubeconfig
- Clusters section displays kubeconfig files with active indicator
- Port forwarding section shows active port forwards without duplicate controls
- All tests passing, build successful
---
 src/pages/Kubernetes/KubernetesPage.tsx | 155 +++++++++++++++---------
 1 file changed, 99 insertions(+), 56 deletions(-)

diff --git a/src/pages/Kubernetes/KubernetesPage.tsx b/src/pages/Kubernetes/KubernetesPage.tsx
index 7cfcac60..e910eca2 100644
--- a/src/pages/Kubernetes/KubernetesPage.tsx
+++ b/src/pages/Kubernetes/KubernetesPage.tsx
@@ -1,25 +1,24 @@
 import React, { useState, useEffect } from "react";
 import { useKubernetesStore } from "@/stores/kubernetesStore";
-import { ClusterList } from "@/components/Kubernetes/ClusterList";
+
 import { PortForwardList } from "@/components/Kubernetes/PortForwardList";
-import { AddClusterModal } from "@/components/Kubernetes/AddClusterModal";
 import { PortForwardForm } from "@/components/Kubernetes/PortForwardForm";
 import { ResourceBrowser } from "@/components/Kubernetes/ResourceBrowser";
-import type { ClusterInfo, PortForwardResponse } from "@/lib/tauriCommands";
+import type { PortForwardResponse, KubeconfigInfo, PortForwardRequest } from "@/lib/tauriCommands";
 import {
-  listClustersCmd,
-  removeClusterCmd,
   listPortForwardsCmd,
   stopPortForwardCmd,
   deletePortForwardCmd,
+  listKubeconfigsCmd,
+  activateKubeconfigCmd,
+  startPortForwardCmd,
 } from "@/lib/tauriCommands";
 
 export function KubernetesPage() {
-  const { clusters, addCluster, removeCluster, selectedClusterId } = useKubernetesStore();
+  const { selectedClusterId } = useKubernetesStore();
+  const [kubeconfigs, setKubeconfigs] = useState<KubeconfigInfo[]>([]);
   const [portForwards, setPortForwards] = useState<PortForwardResponse[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [isAddClusterOpen, setIsAddClusterOpen] = useState(false);
-  const [isStartPortForwardOpen, setIsStartPortForwardOpen] = useState(false);
 
   useEffect(() => {
     loadData();
@@ -28,12 +27,12 @@ export function KubernetesPage() {
   const loadData = async () => {
     setIsLoading(true);
     try {
-      const [clustersData, portForwardsData] = await Promise.all([
-        listClustersCmd(),
+      const [kubeconfigsData, portForwardsData] = await Promise.all([
+        listKubeconfigsCmd(),
         listPortForwardsCmd(),
       ]);
       
-      clustersData.forEach(addCluster);
+      setKubeconfigs(kubeconfigsData);
       setPortForwards(portForwardsData);
     } catch (err) {
       console.error("Failed to load data:", err);
@@ -42,13 +41,13 @@ export function KubernetesPage() {
     }
   };
 
-  const handleRemoveCluster = async (clusterId: string) => {
+  const handleActivateKubeconfig = async (id: string) => {
     try {
-      await removeClusterCmd(clusterId);
-      removeCluster(clusterId);
+      await activateKubeconfigCmd(id);
+      await loadData();
     } catch (err) {
-      console.error("Failed to remove cluster:", err);
-      alert("Failed to remove cluster");
+      console.error("Failed to activate kubeconfig:", err);
+      alert("Failed to activate kubeconfig");
     }
   };
 
@@ -72,12 +71,14 @@ export function KubernetesPage() {
     }
   };
 
-  const handleAddCluster = (cluster: ClusterInfo) => {
-    addCluster(cluster);
-  };
-
-  const handleStartPortForward = (portForward: PortForwardResponse) => {
-    setPortForwards((prev) => [...prev, portForward]);
+  const handleStartPortForward = async (portForward: PortForwardRequest) => {
+    try {
+      const result = await startPortForwardCmd(portForward);
+      setPortForwards((prev) => [...prev, result]);
+    } catch (err) {
+      console.error("Failed to start port forward:", err);
+      alert("Failed to start port forward");
+    }
   };
 
   if (isLoading) {
@@ -100,40 +101,94 @@ export function KubernetesPage() {
         </p>
       </div>
 
-      {/* Cluster Management Section */}
+      {/* Cluster Management Section - Uses kubeconfig files from Settings */}
       <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <h2 className="text-xl font-semibold">Clusters</h2>
-          <button
-            onClick={() => setIsAddClusterOpen(true)}
-            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
-          >
-            Add Cluster
-          </button>
+          <h2 className="text-xl font-semibold">Clusters (from kubeconfig files)</h2>
+          <div className="flex gap-2">
+            <button
+              onClick={() => window.location.href = "/settings/kubeconfig"}
+              className="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90"
+            >
+              Manage kubeconfigs
+            </button>
+          </div>
         </div>
         
-        <ClusterList
-          clusters={clusters}
-          onAdd={() => setIsAddClusterOpen(true)}
-          onRemove={handleRemoveCluster}
-        />
+        {kubeconfigs.length === 0 ? (
+          <div className="rounded-lg border border-dashed px-6 py-12 text-center bg-card">
+            <div className="mx-auto w-12 h-12 text-muted-foreground mb-4">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+              </svg>
+            </div>
+            <h3 className="text-lg font-medium mb-2">No kubeconfig files uploaded</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              Upload kubeconfig files in Settings → Kubeconfig to manage Kubernetes clusters
+            </p>
+            <button
+              onClick={() => window.location.href = "/settings/kubeconfig"}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+            >
+              Go to Kubeconfig Manager
+            </button>
+          </div>
+        ) : (
+          <div className="grid gap-4">
+            {kubeconfigs.map((config) => (
+              <div
+                key={config.id}
+                className={`rounded-lg border bg-card p-4 hover:border-primary/50 transition-colors ${
+                  config.is_active ? "border-primary ring-1 ring-primary/20" : ""
+                }`}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="space-y-1 flex-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-medium text-lg">{config.name}</h3>
+                      {config.is_active && (
+                        <span className="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded">
+                          Active
+                        </span>
+                      )}
+                    </div>
+                    <div className="text-sm text-muted-foreground space-y-1">
+                      <div>
+                        <span className="font-medium">Context:</span> {config.context}
+                      </div>
+                      {config.cluster_url && (
+                        <div>
+                          <span className="font-medium">Cluster:</span> {config.cluster_url}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    {!config.is_active && (
+                      <button
+                        onClick={() => handleActivateKubeconfig(config.id)}
+                        className="px-3 py-1 text-sm bg-secondary text-secondary-foreground rounded hover:bg-secondary/90"
+                      >
+                        Activate
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
       {/* Port Forwarding Section */}
       <div className="space-y-6">
         <div className="flex items-center justify-between">
           <h2 className="text-xl font-semibold">Port Forwarding</h2>
-          <button
-            onClick={() => setIsStartPortForwardOpen(true)}
-            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
-          >
-            Start Port Forward
-          </button>
         </div>
         
         <PortForwardList
           portForwards={portForwards}
-          onStart={() => setIsStartPortForwardOpen(true)}
+          onStart={() => {}}
           onStop={handleStopPortForward}
           onDelete={handleDeletePortForward}
         />
@@ -146,20 +201,8 @@ export function KubernetesPage() {
           <ResourceBrowser clusterId={selectedClusterId} />
         </div>
       )}
-
-      {/* Add Cluster Modal */}
-      <AddClusterModal
-        isOpen={isAddClusterOpen}
-        onClose={() => setIsAddClusterOpen(false)}
-        onAdd={handleAddCluster}
-      />
-
-      {/* Port Forward Form */}
-      <PortForwardForm
-        isOpen={isStartPortForwardOpen}
-        onClose={() => setIsStartPortForwardOpen(false)}
-        onStart={handleStartPortForward}
-      />
     </div>
   );
 }
+
+