feat(ApplicationsList): implement ArgoCD Applications List view

Implement the Applications List view for headlamp-argocd-plugin (PRI-189).

- Add src/components/ApplicationsList.tsx with table of all ArgoCD Applications
  showing: app name, namespace, project, health status, sync status,
  target revision, and last synced time
- Health/sync status badges using ArgoCD color conventions
- Filter controls: health dropdown, sync dropdown, project dropdown
- Friendly "ArgoCD not detected" error state when ArgoCD is unreachable
- Add src/api/argocd.ts with ArgoCD API types (Application, ApplicationsList)
- Add unit tests in src/__tests__/ApplicationsList.test.tsx:
  - Pure function tests for healthStatusToColor and syncStatusToColor
  - Filter logic unit tests
  - Component smoke tests (loading, error, data, empty states)
- Replace stub view in src/index.tsx with ApplicationsList component

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Test User
2026-04-21 20:39:25 +00:00
parent e09e0c0398
commit 04f149cdaa
5 changed files with 756 additions and 14 deletions
+2 -13
View File
@@ -7,6 +7,7 @@ import {
StatusLabel,
} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
import React from "react";
import ApplicationsList from "./components/ApplicationsList";
// --- Error boundary for plugin components ---
@@ -36,18 +37,6 @@ class ArgoCDErrorBoundary extends React.Component<
}
}
// --- Stub Applications List View ---
function ArgoCDStubView() {
return (
<SectionBox title="ArgoCD Applications">
<StatusLabel status="info">
Plugin scaffold features coming soon.
</StatusLabel>
</SectionBox>
);
}
// --- Sidebar entry ---
registerSidebarEntry({
@@ -75,7 +64,7 @@ registerRoute({
exact: true,
component: () => (
<ArgoCDErrorBoundary>
<ArgoCDStubView />
<ApplicationsList />
</ArgoCDErrorBoundary>
),
});