console icon indicating copy to clipboard operation
console copied to clipboard

refactor: misc optimizations and ux improvements to secrets editing

Open rohan-chaturvedi opened this issue 6 months ago • 0 comments

:mag: Overview

The current secrets editing experience has several and ux and implementation issues:

  • Secret 'create' and 'edit' actions are done client-side and can be reviewed before deploy, but 'delete' actions are instantly applied to the server. This behavior is inconsistent and unintuitive
  • The highlight coloring for secrets that have been edited is not informative enough. There is no distinction between new secrets and edited secrets, and only secret keys are colored
  • The 'deploy' process is extremely inefficient:
    • Each secret create or edit is an individual mutation
    • Each mutation refetches secrets on completion
    • The code to handle all these promises is unncessarily complex as a result
  • There is no loading spinner when deploying a large number (5+) changes in a single action

:bulb: Proposed Changes

  • Make secret deletes behave identically to edit and create actions, i.e client side first, and applied server-side only on clicking "deploy"
  • Process all changes in a single "deploy" action together:
    • Bulk create all new secrets
    • Bulk edit all updated secrets
    • Bulk delete all deleted secrets
    • Refetch secrets from the server only once, after the bulk operation is complete
  • Improve the UI indication of which secrets are created, edited or deleted before clicking "deploy"
  • Add a loading spinner for the "deploy" action

:framed_picture: Screenshots or Demo

https://github.com/user-attachments/assets/7e7ba8b0-7041-470a-9112-9e4ea864bd84

:memo: Release Notes

  • Several optimizations and UX improvements to editing and deploying secret changes

:dart: Reviewer Focus

  • Verify that all secret crud operations are saved correctly
  • Check that all secret updates are processed in a single mutation

:green_heart: Did You...

  • [x] Ensure linting passes (code style checks)? ~~- [ ] Update dependencies and lockfiles (if required)~~
  • [x] Regenerate graphql schema and types (if required)
  • [x] Verify the app builds locally?
  • [ ] Manually test the changes on different browsers/devices?

rohan-chaturvedi avatar Aug 11 '24 11:08 rohan-chaturvedi