refactor: [M3-6258] - React Query for SSH Keys

[bnussman-akamai]

Description 📝

• Uses React Query for SSH Keys
• API paginates http://localhost:3000/profile/keys
• Adds ability for users to edit the label of their ssh keys
  • The API has had this functionality, we just didn't implement it
• This was a lot more difficult than expected because SSH keys are used on Linode creation flows

How to test 🧪

• Test all actions possible on http://localhost:3000/profile/keys
• Test the following with at least one SSH Key on your account and please perform these actions as *both a normal user and as a restricted user
  • Test Creating a Linode with an SSH Key
  • Test rebuilding a Linode from an Image with an SSH Key
  • Test rebuilding a Linode from a Stackscript with an SSH Key

[dwiley-akamai]

Going to take a deeper look later today or sometime tomorrow but left a couple of small comments

[dwiley-akamai]

• I tried rebuilding with an Image & SSH key and with a StackScript & SSH key but ran into a Service unavailable [1.10] API error earlier, so I will circle back around to testing that.

• If you edit an SSH key, clear out the label, and click "Save", the error persists if you close the drawer and go back to edit it. It also persists across different SSH keys (i.e., if you get up to the error on one, then you exit that drawer and go to edit another key, the error will show up there too)

[cpathipa]

Not able to run the app locally.

[cpathipa]

Thanks for adding test coverage!

[cpathipa]

nit-picky: We could decouple this ActionsPanel and define it upper level.
Note: For naming convention, we could follow existing pattern.

  const Actions = (
    <ActionsPanel>
      <Button buttonType="secondary" onClick={onClose} data-qa-cancel-delete>
        Cancel
      </Button>
      <Button
        buttonType="primary"
        onClick={onDelete}
        loading={isLoading}
        data-qa-confirm-delete
      >
        Delete
      </Button>
    </ActionsPanel>
  );

  return (
    <ConfirmationDialog
      open={open}
      onClose={onClose}
      title="Delete SSH Key"
      error={error?.[0].reason}
      actions={Actions}
    >
      <Typography>Are you sure you want to delete SSH key {label}?</Typography>
    </ConfirmationDialog>
  );
};

[bnussman-akamai]

@cpathipa You may need to run rm -rf node_modules/.vite from the repo's root to clear the vite cache. The app runs fine for me.

[cpathipa]

@bnussman-akamai FYI - A few files have conflicts that should be resolved.

[dwiley-akamai]

The edit --> empty label interaction is still a bit off from what I'd expect; in this clip, I clear the label, try to save, get the error, and close the drawer. But when I re-open the drawer, although the error is cleared, the label field itself is still empty (instead of having the current label):

Edit "Label" field interaction

Screen.Recording.2023-03-24.at.3.12.55.PM.mov

Aside from that, looks like something odd is going on for restricted users in the "SSH Keys" table in the Linode Create and Rebuild flows?

[hkhalil-akamai]

Only seeing one minor regression...

[hkhalil-akamai]

Really great clean-up/refactoring; unit tests are a plus

[bnussman-akamai]

Very helpful feedback, thank you @dwiley-akamai. Should all be addressed in 5d25bf3

[dwiley-akamai]

Looks good, thanks for addressing that feedback! 🚀