frontend: Container env vars: show secret value for secretKeyRef

[pavitar-rana]

Summary

This PR replaces the per-resource watcher pattern (SecretFetcher / ConfigMapFetcher using Secret.useGet / ConfigMap.useGet) with a fetch-only approach using useQueries from @tanstack/react-query.

The previous implementation created one WebSocket watch per secret and per configmap, which could quickly exhaust browser connection limits (~6 per origin) for Pods referencing many Secrets/ConfigMaps.

---

Related Issue

Fixes #4555

---

Changes

Added useResourcesFetchOnly hook

• Fetches Secrets and ConfigMaps by name in parallel using:
  • useQueries
  • clusterFetch
• No WebSocket watchers are created.
• React Query handles:
  • Deduplication
  • Caching (staleTime: 30s)
• Returns Map<string, FetchedResource>
  • Drop-in replacement for the previous state-based pattern.

---

Updated ContainerEnvironmentVariables

• Replaced:
  • useState
  • SecretFetcher / ConfigMapFetcher component pattern
• Now uses useResourcesFetchOnly
• Hooks are called before early return to satisfy React Rules of Hooks
• Render now consists only of:

  <InnerTable />

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: pavitar-rana
Once this PR has been reviewed and has the lgtm label, please assign sniok for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[Copilot]

Pull request overview

This PR refactors the container environment variables display to fix issue #4555, where secret values from valueFrom.secretKeyRef were incorrectly showing the key name instead of the actual decoded secret value. The previous implementation used Secret.useGet / ConfigMap.useGet which created one WebSocket watcher per resource, potentially exhausting browser connection limits (typically 6 per origin) when pods reference many Secrets/ConfigMaps.

Changes:

• Replaced per-resource WebSocket watchers with fetch-only HTTP requests using React Query's useQueries
• Added useResourcesFetchOnly hook that fetches Secrets and ConfigMaps in parallel without establishing WebSocket connections
• Simplified ContainerEnvironmentVariables component by removing state management and callback patterns in favor of direct hook calls

---

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

[Copilot]

The dependency array contains a spread of results.map(r => r.data), which creates a new array on every render. This causes the useMemo to recompute on every render, defeating its purpose. Consider using a different approach such as:

1. Use the combine option in useQueries to transform the results directly (similar to the pattern in useKubeObjectList.ts)
2. Or, track individual result data items by adding each result.data to the dependency array without spreading, though this is verbose
3. Or, use a custom deep comparison function

The current implementation with the eslint-disable comment suggests this was an intentional workaround, but it's worth reconsidering for performance.

[illume]

This seems valid.

[Copilot]

The type cast container as KubeContainer is unnecessary and potentially misleading. The function extractEnvVarReferences already uses optional chaining (container?.env, container?.envFrom) to handle undefined containers safely. The type declaration for container in EnvironmentVariablesProps already indicates it can be undefined (container?: KubeContainer), so the cast doesn't add type safety and could hide issues.

Consider removing the type cast and letting TypeScript use the natural type.

Suggested change

	const references = extractEnvVarReferences(container as KubeContainer);
	const references = extractEnvVarReferences(container);

[illume]

Worth a look. Usually it is a good idea to avoid using as because generally it hides bugs. Sometimes you need to handle the cases it brings up.

In rare cases it can be there’s a reason the types don’t work or the types are wrong and as can work around that. If this is one of those cases please add a comment there explaining the issue. Then someone later can get to it.

[illume]

Looking good. There’s two minor review comments there, but otherwise it looks good IMHO.

Thanks for that.