argocd: Add CRD guard, RBAC-aware actions, AppProject views, and enhanced Application detail

[Joshna907]

Summary

This PR adds a CRD detection guard, RBAC-aware Sync/Refresh buttons, enhanced Application detail sections, shared operation hooks, multi-source Application support, and AppProject list/detail views.

Why CRD Detection Guard?

On clusters where Argo CD is not installed, the sidebar entries should not appear. This follows the exact same pattern used by the Flux plugin — a module-level cache with a 30s TTL checks for argoproj.io CRDs via K8s.ResourceClasses.CustomResourceDefinition.apiList(). If no CRDs are found, the sidebar children are hidden via registerSidebarEntryFilter.

Why RBAC-aware buttons?

Previously, users without patch permission on applications.argoproj.io would see Sync/Refresh buttons but get 403 errors when clicking them. Now both buttons are wrapped with Headlamp's AuthVisible component — they only render when the user has patch permission. This is the same approach used by the Volcano and Kyverno plugins.

Changes

Added

• src/hooks/useArgoOperation.ts — Shared operation hook with loading state and snackbar feedback. useArgoOperation for the detail view (single loading state), useArgoOperationMap for the list view (per-app loading state keyed by namespace/name).
• src/resources/appproject.ts — ArgoAppProject KubeObject class for the AppProject CRD with typed getters for destinations, source repos, roles, and cluster resource whitelist.
• src/components/appprojects/List.tsx — AppProject list view using ResourceListView with columns for description, source repos count, and destinations count.
• src/components/appprojects/Detail.tsx — AppProject detail view using DetailsGrid with extra sections for Source Repositories, Destinations, Cluster Resource Whitelist, and Roles.
• src/components/applications/Detail.tsx — Application detail view with Managed Resources table, Sync Policy section, and Conditions table as extraSections.
• src/components/applications/statusHelpers.ts — Sync and health status to StatusLabel badge mapping.
• src/api/argoClient.ts — Kubernetes-native sync (merge-patch .operation) and refresh (annotation patch) functions.
• src/api/argoClient.test.ts — Unit tests for sync and refresh API functions (8 tests).

Changed

• src/resources/application.ts — Extended with SourceSpec, ManagedResource, ArgoCondition interfaces, syncPolicy field, multi-source support (spec.sources[]), and convenience getters.
• src/index.tsx — Added CRD detection guard via registerSidebarEntryFilter, registered detail route, AppProject routes and sidebar entry, added official Argo CD logo icon via addIcon().
• src/components/applications/List.tsx — Replaced inline handlers with useArgoOperationMap hook, wrapped action buttons with AuthVisible, shows "N sources" for multi-source apps.
• src/index.test.tsx — Updated mocks for registerSidebarEntryFilter, Utils, K8s.ResourceClasses, AuthVisible, ConditionsTable. Added assertions for AppProject routes, sidebar entry, and CRD filter registration.
• README.md — Updated with new features and RBAC permissions documentation.

Screenshots

Steps to Test

1. Have a running Kubernetes cluster with Argo CD installed and Headlamp accessible.
2. Apply the mock CRD and test data if needed:

   kubectl apply -f test-files/deploy/crd.yaml
   

3. Navigate to Argo CD → Applications — verify Sync/Refresh buttons appear (or are hidden if user lacks patch permission).
4. Click into an Application — verify Managed Resources table, Sync Policy section, and Conditions table render.
5. Navigate to Argo CD → Projects — verify AppProject list and detail views.
6. On a cluster without Argo CD CRDs, verify the sidebar entries are hidden.

[Copilot]

Pull request overview

This PR expands the Argo CD Headlamp plugin with safer visibility/UX behavior (CRD guard + RBAC-aware actions) and substantially richer UI surfaces for Argo CD resources (Application detail enhancements and new AppProject list/detail views).

Changes:

• Add CRD-based sidebar filtering and register new routes (Application detail + AppProject list/detail) with an offline Argo CD icon.
• Introduce shared operation hooks plus Kubernetes-native sync/refresh APIs (with snackbar feedback and unit tests).
• Extend ArgoApplication resource modeling (multi-source support, sync policy, managed resources, conditions) and render these in enhanced list/detail views.

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
argocd/src/resources/appproject.ts	Adds an AppProject KubeObject wrapper with typed spec helpers for the new views.
argocd/src/resources/application.ts	Extends Application typing and adds getters for multi-source, sync policy, resources, and conditions.
argocd/src/index.tsx	Registers CRD sidebar guard, Argo icon, and new routes/sidebar entries.
argocd/src/index.test.tsx	Updates plugin registration tests/mocks for sidebar filter, routes, and icon registration.
argocd/src/hooks/useArgoOperation.ts	Adds reusable operation hooks used by list/detail actions (loading + snackbar).
argocd/src/components/appprojects/List.tsx	Introduces AppProject list view via ResourceListView.
argocd/src/components/appprojects/Detail.tsx	Introduces AppProject detail view with extra sections (repos/destinations/roles/whitelist).
argocd/src/components/applications/statusHelpers.ts	Centralizes health/sync status → StatusLabel severity mapping.
argocd/src/components/applications/List.tsx	Adds RBAC-aware sync/refresh actions and multi-source display in the list view.
argocd/src/components/applications/Detail.tsx	Adds Application detail route UI with actions plus managed resources/sync policy/conditions sections.
argocd/src/api/argoClient.ts	Implements Kubernetes-native sync/refresh via merge-patch to Application resources.
argocd/src/api/argoClient.test.ts	Adds unit tests for sync/refresh behavior and RBAC-friendly error handling.
argocd/README.md	Documents features, behavior differences vs Argo UI, and required RBAC permissions.
argocd/package.json	Bumps plugin version to 0.2.0.
argocd/package-lock.json	Updates lockfile metadata to match the new package name/version.

Files not reviewed (1)

• argocd/package-lock.json: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Joshna907]

ptal @illume @ashu8912

[Copilot]

Pull request overview

Copilot reviewed 14 out of 15 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• argocd/package-lock.json: Generated file

[illume]

Please check the commit message format.
"argocd: Components:" doesn't show where the change is for example.
If it changes "argocd/src/components/applications/Detail.tsx" it should probably have "applications/Detail:" in there.

It's ok if you write the commit messages with AI, just please check them first before review.

Try and make sure each commit passes the checks? Rather than fix issues in later commits, please try and fix them in the commit where the issue happens.

[Copilot]

Pull request overview

Copilot reviewed 14 out of 15 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• argocd/package-lock.json: Generated file

[illume]

Thanks for this.

I left a few requests for documentation? Once these are documented I can review more fully.

[Copilot]

Pull request overview

Copilot reviewed 14 out of 15 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• argocd/package-lock.json: Generated file

[Copilot]

Pull request overview

Copilot reviewed 14 out of 15 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• argocd/package-lock.json: Generated file

Comments suppressed due to low confidence (1)

argocd/src/resources/appproject.ts:18

• @kinvolk/headlamp-plugin/lib/k8s/cluster is a virtual module that doesn’t resolve under Vitest (see the comment in application.ts). Because index.test.tsx imports ./index (which imports the AppProject components/resources), this import will break tests at module-load time. Use the same K8s.cluster import pattern as application.ts so the existing @kinvolk/headlamp-plugin/lib mock applies in tests.

import { KubeObject, KubeObjectInterface } from '@kinvolk/headlamp-plugin/lib/k8s/cluster';
import { argocdApiVersion } from './application';

[illume]

Please check the failing CI job?

[Joshna907]

Please check the failing CI job?

Fixed it ptal @illume

[illume]

🎉 thanks!

[Copilot]

Pull request overview

Copilot reviewed 14 out of 15 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• argocd/package-lock.json: Generated file