feat(kubernetes): implement Lens Desktop v5 feature-parity UI
Complete overhaul of the Kubernetes management page from a basic config
panel into a full Lens-style IDE shell with 26 resource types, real-time
data, and a comprehensive test suite.
Layout & navigation:
- Rewrite KubernetesPage as a Lens v5-style shell: collapsible sidebar
(Workloads / Services & Networking / Config & Storage / Access Control /
Cluster), top hotbar with cluster+namespace selectors, Ctrl+K command
palette
- All 26 resource types now accessible via sidebar navigation (previously 5)
New resource types (Rust + TypeScript + React):
- StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges
- 4 new Tauri commands registered in generate_handler![]
Component implementations (replacing stubs with real IPC):
- Terminal: full xterm.js with multi-tab sessions and exec_pod IPC
- YamlEditor: Monaco editor with YAML syntax highlighting
- MetricsChart: recharts LineChart/BarChart
- ClusterOverview: live node/pod/deployment/namespace counts
- ClusterDetails: real kubeconfig + node data
- PodDetail, DeploymentDetail, ServiceDetail, ConfigMapDetail, SecretDetail:
all connected to real IPC data, zero hardcoded values
- CreateResourceModal, EditResourceModal: wired to createResourceCmd /
editResourceCmd
- RbacViewer: live data from 4 RBAC IPC commands
- RbacEditor: create roles/cluster-roles via YAML editor
- CommandPalette: 12 real navigation commands, keyboard nav
Dependencies added: xterm@5, xterm-addon-fit, xterm-addon-web-links,
@monaco-editor/react@4, recharts@2
Tooling:
- Replace eslint-plugin-react (incompatible with ESLint 10) with
@eslint-react/eslint-plugin; fix eslint.config.js for flat config
- Fix pre-existing hoisting lint errors in Security.tsx, PortForwardForm.tsx
- Fix eventBus.ts: replace all `any` generics with `unknown`
Tests: 251 passing across 35 test files (was 94/19)
- 16 new test files covering all new and fixed components (TDD)
- npx tsc --noEmit: 0 errors
- cargo clippy -- -D warnings: 0 warnings
- cargo fmt --check: passes
- eslint src/ --max-warnings 0: 0 issues
2026-06-07 21:41:28 +00:00
|
|
|
import React from "react";
|
|
|
|
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
|
|
|
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
|
|
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
|
|
|
import { PodDetail } from "@/components/Kubernetes/PodDetail";
|
|
|
|
|
import type { PodInfo } from "@/lib/tauriCommands";
|
|
|
|
|
|
|
|
|
|
vi.mock("@tauri-apps/api/core");
|
|
|
|
|
|
|
|
|
|
type MockedInvoke = typeof invoke & {
|
|
|
|
|
mockResolvedValue: (v: unknown) => void;
|
|
|
|
|
mockRejectedValue: (e: Error) => void;
|
|
|
|
|
mockImplementation: (fn: (cmd: string) => Promise<unknown>) => void;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const mockInvoke = invoke as MockedInvoke;
|
|
|
|
|
|
|
|
|
|
const mockPod: PodInfo = {
|
|
|
|
|
name: "nginx-abc123",
|
2026-06-09 02:56:56 +00:00
|
|
|
namespace: "default",
|
feat(kubernetes): implement Lens Desktop v5 feature-parity UI
Complete overhaul of the Kubernetes management page from a basic config
panel into a full Lens-style IDE shell with 26 resource types, real-time
data, and a comprehensive test suite.
Layout & navigation:
- Rewrite KubernetesPage as a Lens v5-style shell: collapsible sidebar
(Workloads / Services & Networking / Config & Storage / Access Control /
Cluster), top hotbar with cluster+namespace selectors, Ctrl+K command
palette
- All 26 resource types now accessible via sidebar navigation (previously 5)
New resource types (Rust + TypeScript + React):
- StorageClasses, NetworkPolicies, ResourceQuotas, LimitRanges
- 4 new Tauri commands registered in generate_handler![]
Component implementations (replacing stubs with real IPC):
- Terminal: full xterm.js with multi-tab sessions and exec_pod IPC
- YamlEditor: Monaco editor with YAML syntax highlighting
- MetricsChart: recharts LineChart/BarChart
- ClusterOverview: live node/pod/deployment/namespace counts
- ClusterDetails: real kubeconfig + node data
- PodDetail, DeploymentDetail, ServiceDetail, ConfigMapDetail, SecretDetail:
all connected to real IPC data, zero hardcoded values
- CreateResourceModal, EditResourceModal: wired to createResourceCmd /
editResourceCmd
- RbacViewer: live data from 4 RBAC IPC commands
- RbacEditor: create roles/cluster-roles via YAML editor
- CommandPalette: 12 real navigation commands, keyboard nav
Dependencies added: xterm@5, xterm-addon-fit, xterm-addon-web-links,
@monaco-editor/react@4, recharts@2
Tooling:
- Replace eslint-plugin-react (incompatible with ESLint 10) with
@eslint-react/eslint-plugin; fix eslint.config.js for flat config
- Fix pre-existing hoisting lint errors in Security.tsx, PortForwardForm.tsx
- Fix eventBus.ts: replace all `any` generics with `unknown`
Tests: 251 passing across 35 test files (was 94/19)
- 16 new test files covering all new and fixed components (TDD)
- npx tsc --noEmit: 0 errors
- cargo clippy -- -D warnings: 0 warnings
- cargo fmt --check: passes
- eslint src/ --max-warnings 0: 0 issues
2026-06-07 21:41:28 +00:00
|
|
|
status: "Running",
|
|
|
|
|
ready: "2/2",
|
|
|
|
|
age: "3h",
|
|
|
|
|
containers: ["nginx", "sidecar"],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
describe("PodDetail", () => {
|
|
|
|
|
beforeEach(() => {
|
|
|
|
|
vi.clearAllMocks();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("renders without crashing when given a PodInfo prop", () => {
|
|
|
|
|
render(
|
|
|
|
|
<PodDetail
|
|
|
|
|
clusterId="cluster-1"
|
|
|
|
|
namespace="default"
|
|
|
|
|
pod={mockPod}
|
|
|
|
|
onClose={() => {}}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
// heading shows pod name
|
|
|
|
|
expect(screen.getByRole("heading", { name: /pod: nginx-abc123/i })).toBeDefined();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("shows pod name in heading", () => {
|
|
|
|
|
render(
|
|
|
|
|
<PodDetail
|
|
|
|
|
clusterId="cluster-1"
|
|
|
|
|
namespace="default"
|
|
|
|
|
pod={mockPod}
|
|
|
|
|
onClose={() => {}}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
expect(screen.getByRole("heading", { name: /pod: nginx-abc123/i })).toBeDefined();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("shows pod namespace in metadata", () => {
|
|
|
|
|
render(
|
|
|
|
|
<PodDetail
|
|
|
|
|
clusterId="cluster-1"
|
|
|
|
|
namespace="default"
|
|
|
|
|
pod={mockPod}
|
|
|
|
|
onClose={() => {}}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
// badge shows namespace
|
|
|
|
|
const badges = screen.getAllByText("default");
|
|
|
|
|
expect(badges.length).toBeGreaterThan(0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("renders container names from pod.containers", () => {
|
|
|
|
|
render(
|
|
|
|
|
<PodDetail
|
|
|
|
|
clusterId="cluster-1"
|
|
|
|
|
namespace="default"
|
|
|
|
|
pod={mockPod}
|
|
|
|
|
onClose={() => {}}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
// containers appear in the Containers table (and possibly in the dropdown)
|
|
|
|
|
const nginxCells = screen.getAllByText("nginx");
|
|
|
|
|
expect(nginxCells.length).toBeGreaterThan(0);
|
|
|
|
|
const sidecarCells = screen.getAllByText("sidecar");
|
|
|
|
|
expect(sidecarCells.length).toBeGreaterThan(0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("shows loading state during log fetch when logs tab clicked", async () => {
|
|
|
|
|
mockInvoke.mockImplementation(() => new Promise(() => {}));
|
|
|
|
|
|
|
|
|
|
render(
|
|
|
|
|
<PodDetail
|
|
|
|
|
clusterId="cluster-1"
|
|
|
|
|
namespace="default"
|
|
|
|
|
pod={mockPod}
|
|
|
|
|
onClose={() => {}}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const logsTab = screen.getByRole("button", { name: /^logs$/i });
|
|
|
|
|
fireEvent.click(logsTab);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("logs-loading")).toBeDefined();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("fetches logs via get_pod_logs IPC when logs tab clicked", async () => {
|
|
|
|
|
mockInvoke.mockImplementation((cmd: string) => {
|
|
|
|
|
if (cmd === "get_pod_logs") {
|
|
|
|
|
return Promise.resolve({ logs: "INFO Starting up\nINFO Ready" });
|
|
|
|
|
}
|
|
|
|
|
return Promise.resolve(undefined);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
render(
|
|
|
|
|
<PodDetail
|
|
|
|
|
clusterId="cluster-1"
|
|
|
|
|
namespace="default"
|
|
|
|
|
pod={mockPod}
|
|
|
|
|
onClose={() => {}}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const logsTab = screen.getByRole("button", { name: /^logs$/i });
|
|
|
|
|
fireEvent.click(logsTab);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(mockInvoke).toHaveBeenCalledWith("get_pod_logs", {
|
|
|
|
|
clusterId: "cluster-1",
|
|
|
|
|
namespace: "default",
|
|
|
|
|
podName: "nginx-abc123",
|
|
|
|
|
containerName: "nginx",
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("shows error when log fetch fails", async () => {
|
|
|
|
|
mockInvoke.mockImplementation((cmd: string) => {
|
|
|
|
|
if (cmd === "get_pod_logs") {
|
|
|
|
|
return Promise.reject(new Error("Connection refused"));
|
|
|
|
|
}
|
|
|
|
|
return Promise.resolve(undefined);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
render(
|
|
|
|
|
<PodDetail
|
|
|
|
|
clusterId="cluster-1"
|
|
|
|
|
namespace="default"
|
|
|
|
|
pod={mockPod}
|
|
|
|
|
onClose={() => {}}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const logsTab = screen.getByRole("button", { name: /^logs$/i });
|
|
|
|
|
fireEvent.click(logsTab);
|
|
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
|
expect(screen.getByTestId("logs-error")).toBeDefined();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|