Fix Notebook enter key 6354 (#6365)

* Closes #6354 Notebook Enter key adds new lines
- Removed enter key handlers from Vue component.
- Added "Save" button.
* entry must be selected before editing
* focus on newly created entry
* Closes #6354 Notebook Enter key adds new lines
- Removed enter key handlers from Vue component.
- Added "Save" button.
* do not allow edit unless entry is selected
* remove css for disabled cass

---------

Co-authored-by: David Tsay <david.e.tsay@nasa.gov>

e2e/helper/notebookUtils.js

@@ -32,9 +32,8 @@ async function enterTextEntry(page, text) {
     await page.locator(NOTEBOOK_DROP_AREA).click();
 
     // enter text
-    await page.locator('div.c-ne__text').click();
+    await page.locator('[aria-label="Notebook Entry"].is-selected div.c-ne__text').fill(text);
-    await page.locator('div.c-ne__text').fill(text);
+    await commitEntry(page);
-    await page.locator('div.c-ne__text').press('Enter');
 }
 
 /**
@@ -51,6 +50,15 @@ async function dragAndDropEmbed(page, notebookObject) {
     await page.click('button[title="Show selected item in tree"]');
     // Drag and drop the SWG into the notebook
     await page.dragAndDrop(`text=${swg.name}`, NOTEBOOK_DROP_AREA);
+    await commitEntry(page);
+}
+
+/**
+ * @private
+ * @param {import('@playwright/test').Page} page
+ */
+async function commitEntry(page) {
+    await page.locator('.c-ne__save-button > button').click();
 }
 
 // eslint-disable-next-line no-undef

e2e/tests/functional/plugins/notebook/tags.e2e.spec.js

@@ -25,7 +25,8 @@ This test suite is dedicated to tests which verify form functionality.
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
+const nbUtils = require('../../../../helper/notebookUtils');
 
 /**
   * Creates a notebook object and adds an entry.
@@ -39,12 +40,7 @@ async function createNotebookAndEntry(page, iterations = 1) {
     const notebook = createDomainObjectWithDefaults(page, { type: 'Notebook' });
 
     for (let iteration = 0; iteration < iterations; iteration++) {
-        // Create an entry
+        await nbUtils.enterTextEntry(page, `Entry ${iteration}`);
-        await page.locator('text=To start a new entry, click here or drag and drop any object').click();
-        const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = ${iteration}`;
-        await page.locator(entryLocator).click();
-        await page.locator(entryLocator).fill(`Entry ${iteration}`);
-        await page.locator(entryLocator).press('Enter');
     }
 
     return notebook;
@@ -57,7 +53,7 @@ async function createNotebookAndEntry(page, iterations = 1) {
   */
 async function createNotebookEntryAndTags(page, iterations = 1) {
     const notebook = await createNotebookAndEntry(page, iterations);
-    await page.locator('text=Annotations').click();
+    await selectInspectorTab(page, 'Annotations');
 
     for (let iteration = 0; iteration < iterations; iteration++) {
         // Hover and click "Add Tag" button
@@ -88,7 +84,10 @@ test.describe('Tagging in Notebooks @addInit', () => {
     test('Can load tags', async ({ page }) => {
         await createNotebookAndEntry(page);
 
-        await page.locator('text=Annotations').click();
+        // TODO can be removed with fix for https://github.com/nasa/openmct/issues/6411
+        await page.locator('[aria-label="Notebook Entry"].is-selected div.c-ne__text').click();
+
+        await selectInspectorTab(page, 'Annotations');
 
         await page.locator('button:has-text("Add Tag")').click();
 
@@ -247,8 +246,10 @@ test.describe('Tagging in Notebooks @addInit', () => {
     test('Can cancel adding a tag', async ({ page }) => {
         await createNotebookAndEntry(page);
 
-        // Click on Annotations tab
+        // TODO can be removed with fix for https://github.com/nasa/openmct/issues/6411
-        await page.locator('.c-inspector__tab', { hasText: "Annotations" }).click();
+        await page.locator('[aria-label="Notebook Entry"].is-selected div.c-ne__text').click();
+
+        await selectInspectorTab(page, 'Annotations');
 
         // Click on the "Add Tag" button
         await page.locator('button:has-text("Add Tag")').click();

src/plugins/notebook/components/Notebook.vue

@@ -791,6 +791,7 @@ export default {
             this.updateDefaultNotebook(notebookStorage);
             const id = await addNotebookEntry(this.openmct, this.domainObject, notebookStorage, embed);
             this.focusEntryId = id;
+            this.selectedEntryId = id;
             this.filterAndSortEntries();
         },
         orientationChange() {

src/plugins/notebook/components/NotebookEntry.vue

@@ -25,7 +25,10 @@
 <div
     class="c-notebook__entry c-ne has-local-controls"
     aria-label="Notebook Entry"
-    :class="{ 'locked': isLocked, 'is-selected': isSelectedEntry }"
+    :class="{ 'locked': isLocked,
+              'is-selected': isSelectedEntry,
+              'is-editing' : editMode
+    }"
     @dragover="changeCursor"
     @drop.capture="cancelEditMode"
     @drop.prevent="dropOnEntry"
@@ -80,12 +83,17 @@
                     v-bind.prop="formattedText"
                     @mouseover="checkEditability($event)"
                     @mouseleave="canEdit = true"
+                    @mousedown="preventFocusIfNotSelected($event)"
                     @focus="editingEntry()"
                     @blur="updateEntryValue($event)"
-                    @keydown.enter.exact.prevent
-                    @keyup.enter.exact.prevent="forceBlur($event)"
                 >
                 </div>
+                <div
+                    v-if="editMode"
+                    class="c-ne__save-button"
+                >
+                    <button class="c-button c-button--major icon-check"></button>
+                </div>
             </template>
 
             <template v-else>
@@ -454,6 +462,13 @@ export default {
 
             this.$emit('updateEntry', this.entry);
         },
+        preventFocusIfNotSelected($event) {
+            if (!this.isSelectedEntry) {
+                $event.preventDefault();
+                // blur the previous focused entry if clicking on non selected entry input
+                document.activeElement.blur();
+            }
+        },
         editingEntry() {
             this.editMode = true;
             this.$emit('editingEntry');

src/styles/notebook.scss

@@ -283,11 +283,11 @@
     @include discreteItem();
     display: flex;
     padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
-    
+
     &:hover {
         background: rgba($colorBodyFg, 0.2);
     }
-    
+
     &.is-selected {
         background: rgba($colorKey, 0.3);
     }
@@ -389,6 +389,17 @@
         white-space: pre-wrap;
     }
 
+    &__save-button {
+        display: flex;
+        justify-content: flex-end;
+
+        .c-button {
+            $lrP: 15px;
+            padding-left: $lrP;
+            padding-right: $lrP;
+        }
+    }
+
     &__section-and-page {
         // Shown when c-ne within search results
         background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
@@ -491,7 +502,7 @@
     }
     &__actions-menu {
         width: 55vh;
-        max-width: 500px; 
+        max-width: 500px;
         height: 130px;
         z-index: 70;
         [class*="__icon"] {
@@ -500,7 +511,7 @@
             height: 4vh;
         }
         [class*="__item-description"] {
-            min-width: 200px;         
+            min-width: 200px;
         }
     }