Followup to improved readonly UI: add Toast notifcations

[telamonian]

I'm following up on my previous comment with another mockup. The first combines 1 and 2 to provide an approach that might be familiar from Notebook while having an (albeit small) icon indication in the tab as added support.

With toast notifications moving forward in #689, I think this could be a good opportunity to remind users a notebook is read-only if they try to save. I could see this being potentially annoying if it repeats, but since toasts last 10 seconds at most I think it could work if it seems like there should be an additional reminder of read-only status.

Originally posted by @isabela-pf in #7980 (comment)

[telamonian]

I'm splitting @isabela-pf's Toast-on-attempted-save UI proposal (described above) out from #7980 into a fresh issue here. The easy way to do this would be to incorporate an already existing quality Snackbar/Toast component, such as these fine examples:

• material-ui Snackbar
  • looks good
  • super flexible
  • con: have to bring in the large mui package, though in theory tree-shaking should mitigate this
• light-toast
  • small (5 kb as per bundlephobia)
  • con: smallish user base

[vidartf]

I think this is the oldest issue tracking toasts: #689

[vidartf]

Someone also mentioned this: https://github.com/jupyterlab-contrib/jupyterlab_toastify

[fcollonval]

Copying here the discussion summary from the weekly meeting:

• Original toast issue: Create proper notification system and area - Toast Notifications #689
• Max would like to add an existing quality Toast implementation to jlab: #12827
• eg two reasonable choices of Toast component:
  • material-ui Snackbar
    • looks good
    • super flexible
    • con: have to bring in the large mui package, though in theory tree-shaking should mitigate this
      • @ajbozarth has been using material-ui snackbar in elyra, and likes it
  • light-toast
    • small (5 kb as per bundlephobia)
    • con: smallish user base
  • In jupyterlab-toastify, react-toastify is used.
• Recently we had a vote adopting fastui as a component library
  - Note that FAST UI is not the same as Microsoft's FAST design system

[fcollonval]

Additional comments:

• FAST Design does not provide a default notification UI. And I support Max that implementing our own is not straighforward.
• jupyterlab_toastify was created to bring an abstracted third-party library for the UI; I think the pattern should be kept to ease maintenance/evolution.
• The material-ui Snackbar is for me missing an easy-to-use API to create toast of a specific type, to dismiss them programmatically and to have a toast following a running task (ability to update it); but this is by essence as the goal of the library is to provide nice customizable components rather that usage oriented API.

What people are using (feel free to update the list):

• Material-UI Snackbar:
  • Elyra
  • jupyterlab-git
• jupyterlab-toastify:
  • gator
  • jupyterlab-tour
  • jupyterlab-comments