Skip to content
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

mjac0bs
Copy link
Contributor

@mjac0bs mjac0bs commented Sep 27, 2023

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 🔄

  • Adds the missing Delete label to the primary action button in the SSH key delete dialog
  • Makes label a required, not an optional, prop for ActionButtonProps
  • Inadvertently fixes another bug, where the Cancel button appears invisible in the Clone Domain drawer because it was also missing a label
  • Adds unit test for DeleteSSHKeyDialog component and updates unit test for ActionPanel component.

Preview 📷

Before After
image image
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 🧪

  1. How to setup test environment?
  • If you do not already have an SSH key on your account, you will need to create one via Profile > Add an SSH Key.
  • If you do not already have a domain on your account, you will need to create one via Domains > Create Domain.
  • Checkout this PR.
  • yarn dev
  1. How to reproduce the issue (if applicable)?
  • Go to https://cloud.linode.com/profile/keys.
  • Click on the Delete action for your SSH key.
  • Observe that the Delete SSH Key dialog will pop up, but it is missing a button label for the primary action button Delete.
  • Go to https://cloud.linode.com/domains.
  • Click on the Clone action for your existing domain.
  • Observe in the Clone drawer that the user can hover over the area of the secondary action Cancel button and click it to close the drawer, but it is otherwise invisible.
  1. How to verify changes?
  • Go to http://localhost:3000/profile/keys.
  • Click on the Delete action for your SSH key.
  • Observe that the Delete SSH Key dialog will pop up, and the Delete button is labeled accordingly.
  • Go to http://localhost:3000/domains.
  • Click on the Clone action for your existing domain.
  • Observe in the Clone drawer that a labeled Cancel button is visible and clicking it closes the drawer.
  1. How to run Unit or E2E tests?
yarn test DeleteSSHKeyDialog.test.tsx ActionPanel.test.tsx

@mjac0bs mjac0bs added the Bug Fixes for regressions or bugs label Sep 27, 2023
@mjac0bs mjac0bs self-assigned this Sep 27, 2023
@mjac0bs mjac0bs changed the title fix: [M3-7191] - Missing 'Delete' button label in SSH key delete dialog fix: [M3-7191] - Missing primary and secondary action button labels in Delete SSH Key dialog and Clone Domain drawer Sep 27, 2023
@@ -26,6 +26,7 @@ const DeleteSSHKeyDialog = ({ id, label, onClose, open }: Props) => {
<ActionsPanel
primaryButtonProps={{
'data-testid': 'confirm-delete',
label: 'Delete',
Copy link
Contributor Author

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;
Copy link
Contributor Author

@mjac0bs mjac0bs Sep 27, 2023

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.

Copy link
Contributor

Choose a reason for hiding this comment

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

Good work!

Copy link
Contributor

Choose a reason for hiding this comment

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

Very nice 👍

@mjac0bs mjac0bs marked this pull request as ready for review September 27, 2023 15:13
@mjac0bs mjac0bs requested a review from a team as a code owner September 27, 2023 15:13
@mjac0bs mjac0bs requested review from abailly-akamai and tyler-akamai and removed request for a team September 27, 2023 15:13
@tyler-akamai
Copy link
Contributor

tyler-akamai commented Sep 27, 2023

Tested the following:

  • The Delete SSH Key dialog pops up, and the Delete button is labeled accordingly
  • The Domain Clone drawer has a Cancel button and clicking it closes the drawer
  • DeleteSSHKeyDialog.test.tsx and ActionPanel.test.tsx passes

Copy link
Contributor

@abailly-akamai abailly-akamai left a 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;
Copy link
Contributor

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();
});
});
});
Copy link
Contributor

Choose a reason for hiding this comment

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

🎉

@mjac0bs mjac0bs merged commit 100b7d8 into linode:develop Sep 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Fixes for regressions or bugs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants