web: add full-screen toggle to YAML viewer dialog

[ddc-baiye]

Type
/kind feature

What this PR does / why we need it
Introduces a full-screen toggle in the YAML viewer dialog to improve readability of large manifests. This helps operators review and copy content more comfortably without changing existing data flow or backend behavior.

Special notes for your reviewer
UI-only change in YAML viewer; no backend or global request/middleware behavior is modified. Scope limited to modules/web/src/component/Dialog/YAMLViewerDialog/index.tsx.

Which issue(s) this PR fixes
NONE

Does this PR introduce a user-facing change?

Add a full-screen toggle to the YAML viewer dialog for better readability.

[kubeedge-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
To complete the pull request process, please assign shelley-baoyue after the PR has been reviewed.
You can assign the PR to them by writing /assign @shelley-baoyue in a comment when ready.

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

[gemini-code-assist]

Summary of Changes

Hello @ddc-baiye, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request implements a new full-screen toggle functionality for the YAML viewer dialog. The primary goal is to significantly improve the user experience when dealing with extensive YAML configurations by providing an expanded view, making it easier to read and interact with the content. This is a front-end only enhancement, ensuring no impact on the application's core logic or data handling.

Highlights

• Full-Screen Toggle: Introduced a full-screen toggle feature within the YAML viewer dialog to enhance readability for large manifests.
• Improved User Experience: This change allows operators to review and copy content more comfortably without altering existing data flow or backend behavior.
• UI-Only Change: The modification is strictly limited to the UI component YAMLViewerDialog/index.tsx and does not affect any backend logic or global request/middleware behavior.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a useful full-screen toggle feature to the YAML viewer dialog, enhancing usability for large manifests. The implementation is clean and directly addresses the goal. I have a couple of suggestions to further improve the code. One is a performance optimization to memoize the YAML conversion, preventing unnecessary recalculations. The other is a maintainability improvement to replace a magic number in the height calculation with a named constant, making the code clearer and more robust against future UI changes.

[gemini-code-assist]

To improve performance, it's a good practice to memoize the result of stringify using React.useMemo. This prevents re-running the potentially expensive stringification process on every component render, such as when toggling the full-screen mode. This is especially beneficial for large YAML content.

Suggested change

	const yamlText = stringify(props?.content);
	const yamlText = React.useMemo(() => stringify(props?.content), [props?.content]);

[gemini-code-assist]

The value 160px is a magic number, which can make the code difficult to understand and maintain. It's presumably calculated from the heights of the dialog title, actions, and content padding. Using a named constant instead would improve readability and make it easier to adjust if the dialog's layout changes.

For example, you could define a constant at the top of the component:

const FULL_SCREEN_VERTICAL_OFFSET = 160; // Combined height for DialogTitle, DialogActions, and paddings

And then use it in the sx prop:

height: fullScreen ? `calc(100vh - ${FULL_SCREEN_VERTICAL_OFFSET}px)` : '400px'

[ghosind]

/lgtm
cc @Shelley-BaoYue

[ghosind]

/lgtm
cc @Shelley-BaoYue

[kubeedge-bot]

New changes are detected. LGTM label has been removed.