web: add copy actions in Node/Deployment detail dialogs#109
Conversation
Add small copy buttons for Name and ID in Node and Deployment detail dialogs to improve operator ergonomics. UI-only change; no backend or global request behavior modified. Signed-off-by: ddc-baiye <dongdong.chen@bluedotai.cn>
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
Summary of ChangesHello @ddc-baiye, I'm Gemini Code Assist1! 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 introduces a quality-of-life improvement for operators by integrating "Copy Name" and "Copy ID" actions directly into the Node and Deployment detail dialogs. This feature streamlines the process of retrieving and utilizing critical identifiers, making the user interface more efficient without altering any underlying system behavior. Highlights
Using Gemini Code AssistThe 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
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 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
|
kubeedge-bot
added
the
size/M
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a useful "Copy Name" and "Copy ID" feature to the Node and Deployment detail dialogs, improving user experience. The implementation is straightforward. My review focuses on a critical import issue that will break the build, and suggestions to improve error handling and code duplication in the new copy handlers. Addressing these points will make the new feature more robust and maintainable.
| import { Pod } from '@/types/pod'; | ||
| import YAMLViewerDialog from '../YAMLViewerDialog'; | ||
| import { useAlert } from '@/hook/useAlert'; | ||
| import { copyToClipboard } from '@/helper/util'; |
There was a problem hiding this comment.
The copyToClipboard function is imported from @/helper/util, but it doesn't appear to be exported from modules/web/src/helper/util.ts. This will cause a build failure. Please ensure this utility function is correctly implemented and exported from the specified file.
| import React, { useState } from 'react'; | ||
| import { Box, Button, Dialog, DialogTitle, DialogContent, DialogActions, Typography } from '@mui/material'; | ||
| import { useAlert } from '@/hook/useAlert'; | ||
| import { copyToClipboard } from '@/helper/util'; |
There was a problem hiding this comment.
The copyToClipboard function is imported from @/helper/util, but it doesn't appear to be exported from modules/web/src/helper/util.ts. This will cause a build failure. Please ensure this utility function is correctly implemented and exported from the specified file.
| function DeploymentDetailDialog({ open, onClose, data, pods }: DeploymentDetailDialogProps) { | ||
| const [tab, setTab] = React.useState(0); | ||
| const [yamlDialogOpen, setYamlDialogOpen] = React.useState(false); | ||
| const { success } = useAlert(); |
There was a problem hiding this comment.
To provide feedback to the user when a copy action fails, you should also retrieve the error function from useAlert. This will be used in the error handling for the copy functions.
| const { success } = useAlert(); | |
| const { success, error } = useAlert(); |
| const handleCopyName = async () => { | ||
| if (data?.metadata?.name) { | ||
| await copyToClipboard(String(data.metadata.name)); | ||
| success('Copied name'); | ||
| } | ||
| }; | ||
|
|
||
| const handleCopyUID = async () => { | ||
| if (data?.metadata?.uid) { | ||
| await copyToClipboard(String(data.metadata.uid)); | ||
| success('Copied ID'); | ||
| } | ||
| }; |
There was a problem hiding this comment.
The handleCopyName and handleCopyUID functions lack error handling for the copyToClipboard async operation, which can lead to unhandled promise rejections. Also, the String() conversion is unnecessary.
This suggestion adds try...catch blocks for robust error handling. For further improvement, consider refactoring these two similar functions into a single generic handler to reduce code duplication.
const handleCopyName = async () => {
if (data?.metadata?.name) {
try {
await copyToClipboard(data.metadata.name);
success('Copied name');
} catch (err) {
console.error('Failed to copy name:', err);
error('Failed to copy name');
}
}
};
const handleCopyUID = async () => {
if (data?.metadata?.uid) {
try {
await copyToClipboard(data.metadata.uid);
success('Copied ID');
} catch (err) {
console.error('Failed to copy ID:', err);
error('Failed to copy ID');
}
}
};
| export function NodeDetailDialog({ open, onClose, data }: NodeDetailDialogProps) { | ||
| const [yamlDialogOpen, setYamlDialogOpen] = useState(false); | ||
| const theme = useTheme(); | ||
| const { success } = useAlert(); |
There was a problem hiding this comment.
To provide feedback to the user when a copy action fails, you should also retrieve the error function from useAlert. This will be used in the error handling for the copy functions.
| const { success } = useAlert(); | |
| const { success, error } = useAlert(); |
| const handleCopyName = async () => { | ||
| if (data?.metadata?.name) { | ||
| await copyToClipboard(String(data.metadata.name)); | ||
| success('Copied name'); | ||
| } | ||
| }; | ||
|
|
||
| const handleCopyUID = async () => { | ||
| if (data?.metadata?.uid) { | ||
| await copyToClipboard(String(data.metadata.uid)); | ||
| success('Copied ID'); | ||
| } | ||
| }; |
There was a problem hiding this comment.
The handleCopyName and handleCopyUID functions lack error handling for the copyToClipboard async operation, which can lead to unhandled promise rejections. Also, the String() conversion is unnecessary.
This suggestion adds try...catch blocks for robust error handling. For further improvement, consider refactoring these two similar functions into a single generic handler to reduce code duplication.
const handleCopyName = async () => {
if (data?.metadata?.name) {
try {
await copyToClipboard(data.metadata.name);
success('Copied name');
} catch (err) {
console.error('Failed to copy name:', err);
error('Failed to copy name');
}
}
};
const handleCopyUID = async () => {
if (data?.metadata?.uid) {
try {
await copyToClipboard(data.metadata.uid);
success('Copied ID');
} catch (err) {
console.error('Failed to copy ID:', err);
error('Failed to copy ID');
}
}
};
Signed-off-by: ddc-baiye <dongdong.chen@bluedotai.cn>
Signed-off-by: ddc-baiye <dongdong.chen@bluedotai.cn>
ddc-baiye
force-pushed
the
feat/detail-copy-actions
branch
from
74c4988 to
6588a2a
Compare
2 participants
Type
What this PR does / why we need it
Special notes for your reviewer
Which issue(s) this PR fixes
Release note