feat(ApplicationDetail): implement ArgoCD Application Detail view

- New component: src/components/ApplicationDetail.tsx
  - Route: /argocd/applications/:name
  - Header: app name, health/sync badges, project, namespace, target revision, repo URL
  - Resource Tree: table of Application.status.resources[] with kind, name, namespace, health, sync
  - Sync History: table of Application.status.history[] (last 10) with revision, deployedAt, initiatedBy
  - Events: K8s events via fieldSelector=involvedObject.name={appName}
- Updated src/components/ApplicationsList.tsx: App Name column links to detail view
- Updated src/index.tsx: added ApplicationDetail route
- Unit tests: 11 tests covering pure functions and component smoke tests

Co-Authored-By: Paperclip <noreply@paperclip.ing>

src/__tests__/ApplicationDetail.test.tsx

@@ -0,0 +1,300 @@
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { MemoryRouter, Route } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import ApplicationDetail from "../components/ApplicationDetail";
+
+// --- Pure function unit tests ---
+
+function formatTimestamp(iso: string): string {
+  try {
+    const date = new Date(iso);
+    if (isNaN(date.getTime())) return "—";
+    return date.toLocaleString();
+  } catch {
+    return "—";
+  }
+}
+
+function formatRevision(revision: string): string {
+  if (!revision) return "—";
+  if (revision.length <= 8) return revision;
+  return revision.slice(0, 8);
+}
+
+describe("formatTimestamp", () => {
+  it("returns formatted date for valid ISO string", () => {
+    const result = formatTimestamp("2024-06-01T10:00:00Z");
+    expect(result).not.toBe("—");
+  });
+
+  it("returns em dash for empty string", () => {
+    expect(formatTimestamp("")).toBe("—");
+  });
+
+  it("returns em dash for invalid date", () => {
+    expect(formatTimestamp("not-a-date")).toBe("—");
+  });
+});
+
+describe("formatRevision", () => {
+  it("returns em dash for empty string", () => {
+    expect(formatRevision("")).toBe("—");
+  });
+
+  it("returns revision as-is if 8 chars or fewer", () => {
+    expect(formatRevision("abc")).toBe("abc");
+    expect(formatRevision("12345678")).toBe("12345678");
+  });
+
+  it("truncates revision to 8 chars if longer", () => {
+    expect(formatRevision("1234567890abcdef")).toBe("12345678");
+  });
+});
+
+// --- Component smoke tests ---
+
+// Mock Headlamp lib
+vi.mock("@kinvolk/headlamp-plugin/lib", () => ({
+  ApiProxy: { request: vi.fn() },
+}));
+
+// Mock CommonComponents
+vi.mock("@kinvolk/headlamp-plugin/lib/CommonComponents", () => ({
+  SectionBox: ({
+    children,
+    title,
+  }: {
+    children?: React.ReactNode;
+    title?: string;
+  }) => (
+    <div data-testid="section-box" data-title={title}>
+      {children}
+    </div>
+  ),
+  SectionHeader: ({ title }: { title: string }) => (
+    <div data-testid="section-header">{title}</div>
+  ),
+  StatusLabel: ({
+    status,
+    children,
+  }: {
+    status: string;
+    children?: React.ReactNode;
+  }) => (
+    <span data-testid="status-label" data-status={status}>
+      {children}
+    </span>
+  ),
+  SimpleTable: ({
+    columns,
+    data,
+    emptyMessage,
+  }: {
+    columns: Array<{
+      label: string;
+      getter: (row: unknown) => React.ReactNode;
+    }>;
+    data: unknown[];
+    emptyMessage?: string;
+  }) =>
+    data.length === 0 ? (
+      <div data-testid="simple-table-empty">{emptyMessage}</div>
+    ) : (
+      <table data-testid="simple-table">
+        <thead>
+          <tr>
+            {columns.map((col) => (
+              <th key={col.label}>{col.label}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, i) => (
+            <tr key={i}>
+              {columns.map((col) => (
+                <td key={col.label}>{col.getter(row)}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    ),
+}));
+
+function renderWithRouter(
+  ui: React.ReactElement,
+  initialEntry = "/argocd/applications/test-app"
+) {
+  return render(
+    <MemoryRouter initialEntries={[initialEntry]}>
+      <Route path="/argocd/applications/:name">{ui}</Route>
+    </MemoryRouter>
+  );
+}
+
+describe("ApplicationDetail component", () => {
+  it("renders loading state initially", async () => {
+    vi.mocked(ApiProxy.request).mockImplementation(
+      () => new Promise(() => {}) // never resolves — keeps loading
+    );
+
+    renderWithRouter(<ApplicationDetail />);
+    expect(screen.getByTestId("application-detail-loading")).toHaveTextContent(
+      "Loading application details"
+    );
+  });
+
+  it("renders error state when API fails", async () => {
+    vi.mocked(ApiProxy.request).mockRejectedValue(
+      new Error("connection refused")
+    );
+
+    renderWithRouter(<ApplicationDetail />);
+
+    await vi.waitFor(() => {
+      expect(
+        screen.getByTestId("application-detail-error")
+      ).toBeInTheDocument();
+    });
+
+    // fetchApplication catches the error and returns null, which sets "Application not found"
+    expect(screen.getByText(/Application not found/)).toBeInTheDocument();
+  });
+
+  it("renders application detail when API succeeds", async () => {
+    const mockApp = {
+      metadata: { name: "test-app", namespace: "argocd" },
+      spec: {
+        project: "default",
+        sourceRepoURL: "https://github.com/example/repo",
+        targetRevision: "v1.0.0",
+      },
+      status: {
+        health: { status: "Healthy" },
+        sync: { status: "Synced" },
+        resources: [
+          {
+            kind: "Deployment",
+            name: "example-app",
+            namespace: "default",
+            health: { status: "Healthy" },
+            status: "Synced",
+          },
+        ],
+        history: [
+          {
+            dexKey: "2024-06-01T10:00:00Z",
+            id: 1,
+            revision: "v1.0.0",
+            triggeredBy: "admin",
+          },
+        ],
+      },
+    };
+
+    vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
+      if (path.includes("/events")) {
+        return Promise.resolve({ items: [] });
+      }
+      return Promise.resolve(mockApp);
+    });
+
+    renderWithRouter(<ApplicationDetail />);
+
+    await vi.waitFor(() => {
+      expect(
+        screen.getByTestId("application-detail-header")
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("ArgoCD — test-app")).toBeInTheDocument();
+  });
+
+  it("renders resource tree with resources", async () => {
+    const mockApp = {
+      metadata: { name: "test-app", namespace: "argocd" },
+      spec: {
+        project: "default",
+        sourceRepoURL: "https://github.com/example/repo",
+        targetRevision: "v1.0.0",
+      },
+      status: {
+        health: { status: "Healthy" },
+        sync: { status: "Synced" },
+        resources: [
+          {
+            kind: "Deployment",
+            name: "example-app",
+            namespace: "default",
+            health: { status: "Healthy" },
+            status: "Synced",
+          },
+          {
+            kind: "Service",
+            name: "example-svc",
+            namespace: "default",
+            health: { status: "Healthy" },
+            status: "Synced",
+          },
+        ],
+        history: [],
+      },
+    };
+
+    vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
+      if (path.includes("/events")) {
+        return Promise.resolve({ items: [] });
+      }
+      return Promise.resolve(mockApp);
+    });
+
+    renderWithRouter(<ApplicationDetail />);
+
+    await vi.waitFor(() => {
+      expect(screen.getByTestId("simple-table")).toBeInTheDocument();
+    });
+
+    // Resource tree should show 2 data rows (plus 1 header row)
+    const tables = screen.getAllByTestId("simple-table");
+    expect(tables.length).toBeGreaterThan(0);
+  });
+
+  it("renders sync history", async () => {
+    const mockApp = {
+      metadata: { name: "test-app", namespace: "argocd" },
+      spec: {
+        project: "default",
+        sourceRepoURL: "https://github.com/example/repo",
+        targetRevision: "v1.0.0",
+      },
+      status: {
+        health: { status: "Healthy" },
+        sync: { status: "Synced" },
+        resources: [],
+        history: [
+          {
+            dexKey: "2024-06-01T10:00:00Z",
+            id: 1,
+            revision: "v1.0.0",
+            triggeredBy: "admin",
+          },
+        ],
+      },
+    };
+
+    vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
+      if (path.includes("/events")) {
+        return Promise.resolve({ items: [] });
+      }
+      return Promise.resolve(mockApp);
+    });
+
+    renderWithRouter(<ApplicationDetail />);
+
+    await vi.waitFor(() => {
+      expect(screen.getByTestId("simple-table")).toBeInTheDocument();
+    });
+  });
+});

src/components/ApplicationDetail.tsx

@@ -0,0 +1,375 @@
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import {
+  SectionBox,
+  SectionHeader,
+  SimpleTable,
+  StatusLabel,
+} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import {
+  ArgoCDApplication,
+  ArgoCDHealthStatus,
+  ArgoCDSyncStatus,
+} from "../api/argocd";
+import { healthStatusToColor, syncStatusToColor } from "./ApplicationsList";
+
+// --- Types ---
+
+interface ResourceRow {
+  kind: string;
+  name: string;
+  namespace: string;
+  healthStatus: ArgoCDHealthStatus | "Unknown";
+  syncStatus: ArgoCDSyncStatus | "Unknown";
+}
+
+interface SyncHistoryRow {
+  revision: string;
+  deployedAt: string;
+  initiatedBy: string;
+  status: "Success" | "Failed" | "Unknown";
+}
+
+interface K8sEvent {
+  metadata: {
+    name: string;
+    namespace: string;
+    creationTimestamp: string;
+  };
+  type: string;
+  reason: string;
+  message: string;
+  involvedObject: {
+    name: string;
+    kind: string;
+  };
+  source: {
+    component: string;
+  };
+}
+
+// --- Helpers ---
+
+function healthStatusToLabel(status: ArgoCDHealthStatus | "Unknown"): string {
+  return status === "Unknown" ? "Unknown" : status;
+}
+
+function formatTimestamp(iso: string): string {
+  try {
+    const date = new Date(iso);
+    if (isNaN(date.getTime())) return "—";
+    return date.toLocaleString();
+  } catch {
+    return "—";
+  }
+}
+
+function formatRevision(revision: string): string {
+  if (!revision) return "—";
+  if (revision.length <= 8) return revision;
+  return revision.slice(0, 8);
+}
+
+// --- API ---
+
+const ARGOCD_API_PATH =
+  "/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications";
+
+async function fetchApplication(
+  name: string
+): Promise<ArgoCDApplication | null> {
+  try {
+    const response = (await ApiProxy.request(
+      `${ARGOCD_API_PATH}/${name}`
+    )) as ArgoCDApplication;
+    return response;
+  } catch {
+    return null;
+  }
+}
+
+async function fetchApplicationEvents(
+  namespace: string,
+  appName: string
+): Promise<K8sEvent[]> {
+  try {
+    const fieldSelector = encodeURIComponent(`involvedObject.name=${appName}`);
+    const response = (await ApiProxy.request(
+      `/api/v1/namespaces/${namespace}/events?fieldSelector=${fieldSelector}`
+    )) as { items: K8sEvent[] };
+    return response.items ?? [];
+  } catch {
+    return [];
+  }
+}
+
+// --- Component ---
+
+export default function ApplicationDetail() {
+  const { name } = useParams<{ name: string }>();
+  const [application, setApplication] = useState<ArgoCDApplication | null>(
+    null
+  );
+  const [events, setEvents] = useState<K8sEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!name) return;
+
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    fetchApplication(name)
+      .then((app) => {
+        if (cancelled) return;
+        if (!app) {
+          setError("Application not found");
+          setLoading(false);
+          return;
+        }
+        setApplication(app);
+        setLoading(false);
+
+        // Fetch events in parallel
+        const namespace = app.metadata?.namespace ?? "argocd";
+        fetchApplicationEvents(namespace, name).then((evts) => {
+          if (!cancelled) setEvents(evts);
+        });
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [name]);
+
+  if (loading) {
+    return (
+      <>
+        <SectionHeader title="Application Detail" />
+        <SectionBox>
+          <div data-testid="application-detail-loading">
+            Loading application details...
+          </div>
+        </SectionBox>
+      </>
+    );
+  }
+
+  if (error || !application) {
+    return (
+      <>
+        <SectionHeader title="Application Detail" />
+        <SectionBox>
+          <div data-testid="application-detail-error">
+            <StatusLabel status="error">
+              {error ?? "Application not found"}
+            </StatusLabel>
+          </div>
+        </SectionBox>
+      </>
+    );
+  }
+
+  const healthStatus =
+    (application.status?.health?.status as ArgoCDHealthStatus) ?? "Unknown";
+  const syncStatus =
+    (application.status?.sync?.status as ArgoCDSyncStatus) ?? "Unknown";
+  const targetRevision = application.spec?.targetRevision ?? "—";
+  const repoURL = application.spec?.sourceRepoURL ?? "—";
+  const project = application.spec?.project ?? "—";
+  const namespace = application.metadata?.namespace ?? "—";
+
+  // Build resource rows
+  const resourceRows: ResourceRow[] = (application.status?.resources ?? []).map(
+    (res) => ({
+      kind: res.kind ?? "Unknown",
+      name: res.name ?? "unknown",
+      namespace: res.namespace ?? "—",
+      healthStatus: (res.health?.status as ArgoCDHealthStatus) ?? "Unknown",
+      syncStatus: (res.status as ArgoCDSyncStatus) ?? "Unknown",
+    })
+  );
+
+  // Build sync history rows (last 10)
+  const historyRows: SyncHistoryRow[] = (application.status?.history ?? [])
+    .slice(-10)
+    .map((entry) => ({
+      revision: formatRevision(entry.revision),
+      deployedAt: formatTimestamp(entry.dexKey),
+      initiatedBy: entry.triggeredBy ?? "automated",
+      status: entry.id !== undefined ? "Success" : "Unknown",
+    }));
+
+  const resourceColumns = [
+    {
+      label: "Kind",
+      getter: (row: ResourceRow) => row.kind,
+    },
+    {
+      label: "Name",
+      getter: (row: ResourceRow) => row.name,
+    },
+    {
+      label: "Namespace",
+      getter: (row: ResourceRow) => row.namespace,
+    },
+    {
+      label: "Health",
+      getter: (row: ResourceRow) => (
+        <StatusLabel status={healthStatusToColor(row.healthStatus)}>
+          {healthStatusToLabel(row.healthStatus)}
+        </StatusLabel>
+      ),
+    },
+    {
+      label: "Sync",
+      getter: (row: ResourceRow) => (
+        <StatusLabel status={syncStatusToColor(row.syncStatus)}>
+          {row.syncStatus}
+        </StatusLabel>
+      ),
+    },
+  ];
+
+  const historyColumns = [
+    {
+      label: "Revision",
+      getter: (row: SyncHistoryRow) => row.revision,
+    },
+    {
+      label: "Deployed At",
+      getter: (row: SyncHistoryRow) => row.deployedAt,
+    },
+    {
+      label: "Initiated By",
+      getter: (row: SyncHistoryRow) => row.initiatedBy,
+    },
+    {
+      label: "Status",
+      getter: (row: SyncHistoryRow) => (
+        <StatusLabel status={row.status === "Success" ? "success" : "warning"}>
+          {row.status}
+        </StatusLabel>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <SectionHeader title={`ArgoCD — ${name}`} />
+      <SectionBox>
+        {/* Header metadata */}
+        <div data-testid="application-detail-header">
+          <StatusLabel status={healthStatusToColor(healthStatus)}>
+            {healthStatusToLabel(healthStatus)}
+          </StatusLabel>{" "}
+          <StatusLabel status={syncStatusToColor(syncStatus)}>
+            {syncStatus}
+          </StatusLabel>
+          <table>
+            <tbody>
+              <tr>
+                <td>
+                  <strong>Project:</strong>
+                </td>
+                <td>{project}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Namespace:</strong>
+                </td>
+                <td>{namespace}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Target Revision:</strong>
+                </td>
+                <td>{targetRevision}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Repository:</strong>
+                </td>
+                <td>{repoURL}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </SectionBox>
+
+      {/* Resource Tree */}
+      <SectionBox title="Resource Tree">
+        {resourceRows.length === 0 ? (
+          <div data-testid="resource-tree-empty">
+            No resources managed by this application.
+          </div>
+        ) : (
+          <SimpleTable
+            columns={resourceColumns}
+            data={resourceRows}
+            emptyMessage="No resources found."
+          />
+        )}
+      </SectionBox>
+
+      {/* Sync History */}
+      <SectionBox title="Sync History">
+        {historyRows.length === 0 ? (
+          <div data-testid="sync-history-empty">No sync history available.</div>
+        ) : (
+          <SimpleTable
+            columns={historyColumns}
+            data={historyRows}
+            emptyMessage="No sync history found."
+          />
+        )}
+      </SectionBox>
+
+      {/* Events */}
+      <SectionBox title="Events">
+        {events.length === 0 ? (
+          <div data-testid="events-empty">
+            No events found for this application.
+          </div>
+        ) : (
+          <SimpleTable
+            columns={[
+              {
+                label: "Type",
+                getter: (row: K8sEvent) => row.type,
+              },
+              {
+                label: "Reason",
+                getter: (row: K8sEvent) => row.reason,
+              },
+              {
+                label: "Message",
+                getter: (row: K8sEvent) => row.message,
+              },
+              {
+                label: "Source",
+                getter: (row: K8sEvent) => row.source?.component ?? "—",
+              },
+              {
+                label: "Age",
+                getter: (row: K8sEvent) =>
+                  formatTimestamp(row.metadata?.creationTimestamp ?? ""),
+              },
+            ]}
+            data={events}
+            emptyMessage="No events found."
+          />
+        )}
+      </SectionBox>
+    </>
+  );
+}

src/components/ApplicationsList.tsx

@@ -11,7 +11,7 @@ import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import React, { useEffect, useMemo, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
 
 // --- Types ---
@@ -165,7 +165,9 @@ export default function ApplicationsList() {
   const columns = [
     {
       label: "App Name",
-      getter: (row: ApplicationRow) => row.name,
+      getter: (row: ApplicationRow) => (
+        <Link to={`/argocd/applications/${row.name}`}>{row.name}</Link>
+      ),
     },
     {
       label: "Namespace",

src/index.tsx

@@ -7,6 +7,7 @@ import {
   StatusLabel,
 } from "@kinvolk/headlamp-plugin/lib/CommonComponents";
 import React from "react";
+import ApplicationDetail from "./components/ApplicationDetail";
 import ApplicationsList from "./components/ApplicationsList";
 
 // --- Error boundary for plugin components ---
@@ -68,3 +69,14 @@ registerRoute({
     </ArgoCDErrorBoundary>
   ),
 });
+
+registerRoute({
+  path: "/argocd/applications/:name",
+  sidebar: "argocd-overview",
+  name: "argocd-application-detail",
+  component: () => (
+    <ArgoCDErrorBoundary>
+      <ApplicationDetail />
+    </ArgoCDErrorBoundary>
+  ),
+});