[Notebook] Various visual issues with Notebook navigation

[ozyx]

Summary

A few visual issues with naming sections or pages in any Notebook (including other notebook types).

Expected vs Current Behavior

Current: Section / Page names are truncated while renaming. This is more apparent with a reduced screen width.
Expected: Section / Page names should not be truncated while input is active.

Screen.Recording.2022-06-29.at.4.11.45.PM.mov

Current: Hitting 'enter' while renaming a section or page adds a newline instead of confirming entry. Note that the newline is added before the text and not after.
Expected: Hitting 'enter' should confirm the rename and not add a newline. Question for @charlesh88: Should newlines be able to be added to section/page names with another key combo such as Shift+Enter?

Screen.Recording.2022-06-29.at.4.14.15.PM.mov

Current: If only one section or page exists in the Notebook, renaming that section or page results in a "blank" that cannot be renamed until context is switched or the section or page is deleted.
Expected: After removing the last remaining section or page, the Notebook must always add in a new section or page titled with the correct default value ('Unnamed Section/Page').

Screen.Recording.2022-06-29.at.4.15.57.PM.mov

Clicking on a section or page to navigate to it immediately puts the name into edit mode, but doesn't assign the correct CSS class for the contenteditable span element. This makes using the nav pane to view pages a very bad experience, and adds a bunch of risk that a section or page may be accidentally renamed.

Instead, the user should only be able to edit a previously selected section or page. So to rename a non-selected section or page, they must select it, then click it again.

This mimics how file renaming works in many computer operating systems. This is how it used to work and how it should work now.

Steps to Reproduce

See videos above.

Environment

Version: 2.0.5
Build Date: Wed Jun 29 2022 12:58:29 GMT-0700 (Pacific Daylight Time)
Revision: e8df2bd
Branch: release/2.0.5

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?
• Does this have an impact on Performance?

Additional Information

Problems may have been introduced with changes made in 9fbb695.

[charlesh88]

Current: Hitting 'enter' while renaming a section or page adds a newline instead of confirming entry. Note that the newline is added before the text and not after. Expected: Hitting 'enter' should confirm the rename and not add a newline. Question for @charlesh88: Should newlines be able to be added to section/page names with another key combo such as Shift+Enter?

No, section/page names should not support line breaks in any form.

Also, I was not able to duplicate problem 3 above locally.

[charlesh88]

This behavior has a pretty significant impact on the usage of the Notebook, which is getting a lot of visibility. @akhenry We should fix this.

[unlikelyzero]

Will need to pick this up for testing in next release

[akhenry]

Verified Fixed.

[rukmini-bose]

Verified Testathon 9/12

Issues 1-4 seem to have been fixed.

[jvigliotta]

Verified Fixed - Testathon 9/12/22 all steps