Skip to content

notebooks: Add notepad enable/disable button and CTA

Administrator requested to merge fkling/notepad-button into main

Created by: fkling

This adds a button to the notebook list page for enabling/disabling the notepad. The first time the notepad is enabled a CTA is shown with a bit of context.

A couple of notes:

  • The CTA will be shown until the user has enabled notepad for the first time
  • Before the illustration was available, I refactored the SearchStack component (will rename in follow up PR to reflect the current reality) so that I could use it in the CTA. Even though that's not necessary anymore, I like this structure because all external dependencies are now passed into SearchStack.
  • I decided to always render the notepad when it's enabled for two reasons:
    • Primarily so that the user has some feedback that something is happening when the enable the notepad.
    • It's now easy to disable and we'll probably make that even easier in the future (be allowing disabling from the notepad itself)

https://user-images.githubusercontent.com/179026/163394983-d654b2eb-8cae-4aa4-bad9-599dab23d36c.mp4

Test plan

Manually tested.

  1. Go to /notebooks
  2. Click "Enable notepad" button
  3. A CTA modal should appear
  4. Pressing cancel should close the modal
  5. Clicking "Enable notepad" button again should show the CTA again
  6. Clicking "Enable notepad" in the modal should close it, the button text should update to "Disable notepad" and the notepad should appear.
  7. Clicking "Disable notepad" should change the button text to "Enable notepad" and the notepad should disappear.
  8. Clicking "Enable notepad" should change the button text to "Disable notepad" and the notepad should appear without showing the CTA modal again.

App preview:

Check out the client app preview documentation to learn more.

Merge request reports