Frontend: Components: Added separate component to display Env Variables#4413
Frontend: Components: Added separate component to display Env Variables#4413mudit06mah wants to merge 1 commit intokubernetes-sigs:mainfrom
Conversation
|
This PR passes all tests and is ready to be merged. |
There was a problem hiding this comment.
Pull request overview
This PR introduces a new EnvVarGrid component for displaying environment variables in Kubernetes resources, specifically to improve the presentation of secrets and ConfigMap references. This is a partial implementation toward addressing issue #4356, which requests show/hide functionality for secret values similar to OpenLens.
Changes:
- Added
EnvVarGridcomponent to render environment variables with different types (plain values, Secret references, ConfigMap references, FieldRef, and ResourceFieldRef) - Added clickable links to Secrets for better navigation
- Added translation keys for "Show all environment variables" and "Show fewer" buttons with pluralization support across multiple locales
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/common/Resource/EnvVarDisplay.tsx | New component that renders environment variables with support for different value types and expandable/collapsible lists |
| frontend/src/components/common/Resource/EnvVarDisplay.stories.tsx | Storybook stories demonstrating the component with plain values, complex references, and many variables |
| frontend/src/components/common/Resource/index.tsx | Export the new EnvVarDisplay module |
| frontend/src/components/common/Resource/index.test.ts | Added 'EnvVarDisplay' to the list of expected exports for validation |
| frontend/src/i18n/locales/*/translation.json | Added translation keys for environment variable display ("Show all environment variables" and "Show fewer") across 12 locales |
| frontend/src/plugin/snapshots/pluginLib.snapshot | Updated plugin library snapshot to include EnvVarGrid export |
| frontend/src/components/common/Resource/snapshots/*.storyshot | Snapshot files for the EnvVarDisplay component stories (includes duplicate EnvDisplay.* files) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...tend/src/components/common/Resource/__snapshots__/EnvVarGrid.ManyVariables.stories.storyshot
Show resolved
Hide resolved
.../src/components/common/Resource/__snapshots__/EnvVarGrid.ComplexReferences.stories.storyshot
Show resolved
Hide resolved
frontend/src/components/common/Resource/__snapshots__/EnvVarGrid.PlainValues.stories.storyshot
Show resolved
Hide resolved
|
@illume I have made all the changes instructed by copilot and changed the commit message as well, this PR should be ready to merge :) |
illume
left a comment
There was a problem hiding this comment.
Thanks for this 🎉
Can you please update the PR description to show the summary.
Also, you say it partially fixes this? Can you please leave a description of what part is not fixed? (A partial fix is fine, just interested)
There's a couple of convos unresolved... can you please take a look at these?
frontend/src/components/common/Resource/__snapshots__/EnvVarGrid.PlainValues.stories.storyshot
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 20 out of 20 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
illume
left a comment
There was a problem hiding this comment.
Thanks for making the changes.
Please check the new open comments?
|
@illume I have made all the changes mentioned by you and copilot, and also added story book cases for missing name, Can you please review this again? |
8c55180 to
7413ff5
Compare
illume
left a comment
There was a problem hiding this comment.
🎉 thanks!
… a lot for doing all those changes. It’s looking good now.
Can you please ask in the headlamp channel on the kubernetes slack for someone else to review / test?
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: illume, mudit06mah The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
@mudit06mah this would be a bit easier to review with the summary section in the PR description filled out. Also with the “steps to test “ added. |

Summary:
This PR adds/fixes [feature/bug] by [brief description of what the change does].
Related Issue:
Partially Fixes #4356: (PR does not add an icon to hide/show the secrets inside the pod details section itself,without going to the secrets page).
Changes:
EnvVarGrid.tsxEnvVarGrid.stories.tsxEnvVarGrid()to display secrets like Secret Key, Config Map Key, etc.Screenshot: