-
Notifications
You must be signed in to change notification settings - Fork 367
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: [M3-7191] - Missing primary and secondary action button labels in Delete SSH Key dialog and Clone Domain drawer #9726
Conversation
…lone Domain drawer
@@ -26,6 +26,7 @@ const DeleteSSHKeyDialog = ({ id, label, onClose, open }: Props) => { | |||
<ActionsPanel | |||
primaryButtonProps={{ | |||
'data-testid': 'confirm-delete', | |||
label: 'Delete', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was the actual fix for the bug reported in the ticket.
@@ -10,7 +10,7 @@ import { Box, BoxProps } from '../Box'; | |||
interface ActionButtonsProps extends ButtonProps { | |||
'data-node-idx'?: number; | |||
'data-testid'?: string; | |||
label?: string; | |||
label: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This prop was optional, which is what allowed the bug to exist in the first place. We shouldn't allow unlabeled buttons.
When I made label
required, it led to an error at the one other place in the app where an action button was missing a label: the Clone Domain Drawer and its secondary button, Cancel
. This was another bug, with an existing but unlabeled and therefore invisible-seeming button.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very nice 👍
Tested the following:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great fixes, confirmed button labels are back. ✅
And agree a label should never be optional. Even if actually optional in a component, for accessibility purposes it should be required with an additional prop to visually hide it if need be.
@@ -10,7 +10,7 @@ import { Box, BoxProps } from '../Box'; | |||
interface ActionButtonsProps extends ButtonProps { | |||
'data-node-idx'?: number; | |||
'data-testid'?: string; | |||
label?: string; | |||
label: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very nice 👍
expect(props.onClose).toBeCalled(); | ||
}); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉
Description 📝
This PR aimed to fix a bug with a missing button label in the Delete SSH Key dialog and ended up fixing another related bug in the Clone Domain drawer.
Major Changes 🔄
Delete
label to the primary action button in the SSH key delete dialoglabel
a required, not an optional, prop forActionButtonProps
Cancel
button appears invisible in the Clone Domain drawer because it was also missing a labelDeleteSSHKeyDialog
component and updates unit test forActionPanel
component.Preview 📷
Screen.Recording.2023-09-27.at.7.39.33.AM.mov
Screen.Recording.2023-09-27.at.7.40.11.AM.mov
How to test 🧪
Add an SSH Key
.Create Domain
.yarn dev
Delete
.Cancel
button and click it to close the drawer, but it is otherwise invisible.Delete
button is labeled accordingly.Cancel
button is visible and clicking it closes the drawer.