feat: Add Argo CD Application detail view, Sync/Refresh via Kubernetes API

[Joshna907]

Summary

This PR adds a detail page, Sync and Refresh actions, the official Argo CD sidebar icon, and proper route navigation. All mutations use the Kubernetes API directly — no Argo CD REST API or session tokens needed.

Why Kubernetes API instead of the Argo CD REST API?

Headlamp plugins route all API calls through the Kubernetes apiserver service proxy. This means the Argo CD REST API is unreachable from a plugin:

• The Authorization: Bearer header is consumed by the apiserver for its own auth and never forwarded to argocd-server.
• The Cookie header is a forbidden header — the browser strips it before the request leaves.
• Headlamp's Electron renderer has document.cookie disabled, so cookies can't be set programmatically either.

All three auth channels fail, so the Argo CD session token can never reach argocd-server. Instead, this plugin drives Argo CD the Kubernetes-native way:

• Sync — Patches the Application's .operation field via application/merge-patch+json. The Argo CD application-controller watches this field and runs the sync, exactly as the Argo CD CLI does.
• Refresh — Sets the argocd.argoproj.io/refresh annotation. The controller reconciles the app against its Git source when it sees this annotation.

No Argo CD API authentication is needed — the user's existing cluster RBAC governs access. This is the same approach used by the Flux plugin (annotation patches) and Microsoft's vscode-aks-tools (kubectl-based, never REST API).

Changes

Added

• src/components/applications/Detail.tsx — Application detail view using Headlamp's DetailsGrid. Displays project, source repo, target revision, path, destination, sync status, and health status as color-coded badges. Includes Kubernetes events via withEvents.

Changed

• src/resources/application.ts — Added static get detailsRoute() so name links in the list view navigate to the detail page instead of falling back to Home.
• src/index.tsx — Registered the detail route, added the official Argo CD octopus logo as an offline Iconify icon via addIcon() (CSP-safe, no external fetch), changed sidebar icon from generic mdi:application-cog to branded simple-icons:argo.
• src/components/applications/List.tsx — Added Sync and Refresh as row actions using Headlamp's ActionButton and actions prop. Both call Kubernetes API merge-patch functions from argoClient.ts and show toast notifications via notistack on success/failure.
• package.json — Bumped version to 0.1.1.

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

[Copilot]

Pull request overview

This PR enhances the argocd Headlamp plugin by adding an Application detail page and list row actions (Sync/Refresh) implemented via Kubernetes API patches, plus improving navigation and branding with the official Argo CD sidebar icon.

Changes:

• Added an Application detail view route/page and wired detailsRoute so name links navigate correctly.
• Added Sync/Refresh row actions that patch the Application CR via the Kubernetes API (no Argo CD REST/session auth).
• Registered the Argo CD icon for offline rendering and bumped the plugin version.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
argocd/src/resources/application.ts	Adds detailsRoute to match the registered detail route.
argocd/src/index.tsx	Registers offline icon, list + detail routes, and updates sidebar icon.
argocd/src/index.test.tsx	Updates mocks and assertions for new route + icon registration.
argocd/src/components/applications/List.tsx	Adds Sync/Refresh actions and toast notifications for mutations.
argocd/src/components/applications/Detail.tsx	New Application detail view using DetailsGrid and status badges.
argocd/src/api/argoClient.ts	New Kubernetes API merge-patch helpers for sync/refresh.
argocd/package.json	Version bump to 0.1.1.
argocd/package-lock.json	Updates lock metadata to match the 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.

[Tatsinnit]

Review Feedback

Thank you for this. I have some questions and suggestions that would help strengthen this further.

Questions & Clarifications

1. Error Handling & RBAC

• How are RBAC permission errors communicated to users? If someone lacks applications.argoproj.io patch permissions, what message do they see?
• What happens if sync is triggered while another sync is in progress? Does the API return an error, or is it silently queued?
• Suggestion: Document required Kubernetes permissions somewhere (PR description, plugin README, or code comments)

2. Test Coverage

Could you clarify:

• Are there unit tests for syncApplication() and refreshApplication() functions?
• Do tests cover error scenarios (403 Forbidden, network timeouts, invalid Application state)?
• A brief test coverage note in the PR would be helpful

3. Documentation

Consider updating:

• Plugin README with the new detail view and actions
• Required RBAC permissions for users
• Any behavioral differences compared to using Argo CD UI directly

4. Edge Cases

• Refresh annotation lifecycle: Does argocd.argoproj.io/refresh auto-cleanup after reconciliation, or does it need manual removal?
• Sync operation cleanup: After sync completes, does the .operation field require cleanup, or is it controller-managed?
• Concurrent operations: How does the system handle multiple users syncing the same application simultaneously?

5. Semantic Versioning

The bump 0.1.0 → 0.1.1 suggests a patch, but this adds significant features (detail view + actions). Consider 0.2.0 per semver conventions for new functionality.

6. UX - Loading States

Do the Sync/Refresh buttons show loading indicators during API calls? This would prevent accidental double-clicks and improve user feedback.

💡Code Suggestions

Loading State Management (List.tsx)

Consider adding explicit loading state to prevent double-clicks:

const [isSyncing, setIsSyncing] = useState<string | null>(null); // Track by app name/namespace

const handleSync = async (app: Application) => {
  const appKey = `${app.metadata.namespace}/${app.metadata.name}`;
  if (isSyncing === appKey) return; // Prevent double-click
  
  setIsSyncing(appKey);
  try {
    await syncApplication(app);
    enqueueSnackbar(`Sync initiated for ${app.metadata.name}`, { variant: 'success' });
  } catch (error) {
    enqueueSnackbar(`Sync failed: ${error.message}`, { variant: 'error' });
  } finally {
    setIsSyncing(null);
  }
};

RBAC Error Handling (argoClient.ts)

Enhance error messages for permission issues:

try {
  await apiClient.patch(/* ... */);
} catch (error) {
  if (error.statusCode === 403) {
    throw new Error(
      `Insufficient permissions to sync Application. ` +
      `Required: applications.argoproj.io [update, patch] in namespace ${namespace}`
    );
  }
  throw error;
}

✅ Recommended Before Merge

1. Clarify test coverage for the API client functions
2. Document RBAC requirements (in README or PR description)
3. Consider semantic versioning question (0.1.1 vs 0.2.0)
4. Note any known limitations (e.g., "operation status polling not implemented")

[Copilot]

Pull request overview

Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• argocd/package-lock.json: Generated file

[Joshna907]

ptal @illume @Tatsinnit now

[itvi-1234]

I think we should take a look at the commit messages , not including fixes for previous commits in the same PR. The last couple of commits fall within that. Instead they should be added to the previous commit. This is so that when people review commit by commit they can understand it better. Otherwise they might be like "oh I spot a bug here, and here are some paragraphs explaining it"... then several commits later... "oh, they fixed it."

[Copilot]

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• argocd/package-lock.json: Generated file

[ashu8912]

Added a few nits and comments

[Joshna907]

Added a few nits and comments

Ptal @ashu8912 @illume it is ready to get merged ig ?