Skip to content

Frontend: Components: Added separate component to display Env Variables#4413

Open
mudit06mah wants to merge 1 commit intokubernetes-sigs:mainfrom
mudit06mah:envVar
Open

Frontend: Components: Added separate component to display Env Variables#4413
mudit06mah wants to merge 1 commit intokubernetes-sigs:mainfrom
mudit06mah:envVar

Conversation

@mudit06mah
Copy link
Contributor

@mudit06mah mudit06mah commented Jan 21, 2026

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:

  • Created new component file EnvVarGrid.tsx
  • Created new storybook file: EnvVarGrid.stories.tsx
  • Added function: EnvVarGrid() to display secrets like Secret Key, Config Map Key, etc.

Screenshot:

image

@k8s-ci-robot k8s-ci-robot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. labels Jan 21, 2026
@mudit06mah
Copy link
Contributor Author

This PR passes all tests and is ready to be merged.

@mudit06mah
Copy link
Contributor Author

It appears I was unaware of i18n translations, the PR should be ready to merge now:
image

I apologize for the overlook.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 EnvVarGrid component 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.

@mudit06mah
Copy link
Contributor Author

@illume I have made all the changes instructed by copilot and changed the commit message as well, this PR should be ready to merge :)

Copy link
Contributor

@illume illume left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

@mudit06mah
Copy link
Contributor Author

@illume @sniok I have made all the changes made by copilot and the maintainers, updated the commit message and PR description appropriately, Can you please review this again?

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

@illume illume left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making the changes.

Please check the new open comments?

@mudit06mah
Copy link
Contributor Author

@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?

@mudit06mah mudit06mah requested a review from illume January 30, 2026 06:45
@mudit06mah mudit06mah force-pushed the envVar branch 3 times, most recently from 8c55180 to 7413ff5 Compare January 30, 2026 08:48
@k8s-ci-robot k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 3, 2026
@k8s-ci-robot k8s-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 3, 2026
@mudit06mah
Copy link
Contributor Author

@illume @sniok Can you please review this again?

@mudit06mah mudit06mah changed the title Frontend: Components: Added seperate component to display Env Variables Frontend: Components: Added separate component to display Env Variables Feb 4, 2026
@mudit06mah
Copy link
Contributor Author

@illume @sniok Can you please review this? 👾

Copy link
Contributor

@illume illume left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 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?

@k8s-ci-robot
Copy link
Contributor

[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

Details Needs approval from an approver in each of these files:

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

@k8s-ci-robot k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Feb 10, 2026
@illume
Copy link
Contributor

illume commented Feb 12, 2026

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/XL Denotes a PR that changes 500-999 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature to show/hide value of secret

4 participants