wp-calypso icon indicating copy to clipboard operation
wp-calypso copied to clipboard

refactor(sftp-card): tsx, styled to scss, removed unused classNames, fixed checkbox padding, fixed cleaning up of the password

Open nightnei opened this issue 4 months ago • 2 comments

Related to https://github.com/Automattic/wp-calypso/issues/95435

Proposed Changes

With this PR we are fixing the gap for Enable SSH access for this site checkbox. And also I decided to improve a few things:

  1. Rewrite sftp-card component to tsx
  2. Moved styled-css to .scss, for consistency with most of the component in Calypso
  3. Removed a bunch of unused classNames
  4. Fixed cleaning up of the password (thanks TSX for highlighting it). I know that in Calypso we don't force to use tsx, but I advocate everybody to do it. 4-th point is good example, during rewriting it I faced a bug. It wasn't critical, but still. 4.1 We provided 3 arguments instead of 2 - the function expects siteId, username, but we provide siteId, currentUserId, username. 4.2 Cleaning up process was incorrect - we invoked destroy function immediately during render process, instead of on unmounting. We can see that intention was to return it, but by mistake it was immediately invoked.

Testing Instructions

Main issues

  1. Have an Atomic site.
  2. Look for it in wordpress.com/sites.
  3. Click "Server Settings".
  4. Click "Create credentials".
  5. Turn on the "Enable SSH access for this site" toggle.
  6. Assert that checbox and input are not stacked
BEFORE AFTER
Screenshot 2024-10-17 at 15 17 04 Screenshot 2024-10-17 at 15 17 26

Refactor

  1. Smoke test that everything looks and works the same way as before
  2. TRy to reset password -> Open another tab (e.g. "Staging Site") -> Come back to "Server Settings" -> Assert that you see "Reset password" button

nightnei avatar Oct 17 '24 14:10 nightnei