From 0c9b790650ee4d273293f1a81e41d214591c1d8d Mon Sep 17 00:00:00 2001
From: Dennis Huebner <dennis.huebner@gmail.com>
Date: Wed, 16 Oct 2024 16:24:23 +0200
Subject: [PATCH] Notebook: Escaping code completion pop-up disables cell edit
 mode

---
 .github/workflows/playwright.yml              |  2 +-
 .../src/tests/theia-notebook-editor.test.ts   | 33 +++++++++++++++++++
 .../playwright/src/theia-monaco-editor.ts     | 13 ++++++++
 .../playwright/src/theia-notebook-cell.ts     |  8 +++++
 .../notebook-cell-actions-contribution.ts     |  2 +-
 5 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 536b87c786875..96be450becff5 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -67,4 +67,4 @@ jobs:
           path: |
             examples/playwright/test-results/
             examples/playwright/playwright-report/
-          retention-days: 2
+          retention-days: 7
diff --git a/examples/playwright/src/tests/theia-notebook-editor.test.ts b/examples/playwright/src/tests/theia-notebook-editor.test.ts
index 29b77f594479d..2f03112565c8e 100644
--- a/examples/playwright/src/tests/theia-notebook-editor.test.ts
+++ b/examples/playwright/src/tests/theia-notebook-editor.test.ts
@@ -188,6 +188,39 @@ test.describe('Theia Notebook Cell interaction', () => {
         expect(await cell.executionCount()).toBe('3');
     });
 
+    test('Check arrow up and down works', async () => {
+        const cell = await firstCell(editor);
+        await editor.addCodeCell();
+        const secondCell = (await editor.cells())[1];
+        // second cell is selected after creation
+        expect(await secondCell.isSelected()).toBe(true);
+        // select cell above
+        await editor.page.keyboard.type('second cell');
+        await secondCell.editor.page.keyboard.press('ArrowUp');
+        expect(await cell.isSelected()).toBe(true);
+
+        // select cell below
+        await cell.app.page.keyboard.press('ArrowDown');
+        expect(await secondCell.isSelected()).toBe(true);
+    });
+
+    test('Check arrow-up/arrow-down/escape with code completion', async () => {
+        const cell = await firstCell(editor);
+        await editor.addCodeCell();
+        await cell.addEditorText('print("Test code completion")\n');
+
+        await editor.page.keyboard.press('Control+Space'); // call CC (suggestWidgetVisible=true)
+        await editor.page.keyboard.press('Escape');  // close CC
+        // check the same cell still selected and not lose the edit mode
+        expect(await cell.editor.isFocused()).toBe(true);
+
+        await editor.page.keyboard.press('Control+Space'); // call CC (suggestWidgetVisible=true)
+        await editor.page.keyboard.press('ArrowDown'); // select next entry in CC list
+        await editor.page.keyboard.press('Enter'); // apply completion
+        // check the same cell still selected and not the second one due to 'ArrowDown' being pressed
+        expect(await cell.isSelected()).toBe(true);
+
+    });
 });
 
 async function firstCell(editor: TheiaNotebookEditor): Promise<TheiaNotebookCell> {
diff --git a/examples/playwright/src/theia-monaco-editor.ts b/examples/playwright/src/theia-monaco-editor.ts
index 7e290df0509e5..7cfbf4b492b65 100644
--- a/examples/playwright/src/theia-monaco-editor.ts
+++ b/examples/playwright/src/theia-monaco-editor.ts
@@ -104,6 +104,19 @@ export class TheiaMonacoEditor extends TheiaPageObject {
         await this.page.keyboard.type(text);
     }
 
+    /**
+     * @returns `true` if the editor is focused, `false` otherwise.
+     */
+    async isFocused(): Promise<boolean> {
+        const viewElement = await this.viewElement();
+        const monacoEditor = await viewElement?.$('div.monaco-editor');
+        if (!monacoEditor) {
+            throw new Error('Couldn\'t retrieve monaco editor element.');
+        }
+        const editorClass = await monacoEditor.getAttribute('class');
+        return editorClass?.includes('focused') ?? false;
+    }
+
     protected replaceEditorSymbolsWithSpace(content: string): string | Promise<string | undefined> {
         // [ ] &nbsp; => \u00a0 -- NO-BREAK SPACE
         // [·] &middot; => \u00b7 -- MIDDLE DOT
diff --git a/examples/playwright/src/theia-notebook-cell.ts b/examples/playwright/src/theia-notebook-cell.ts
index 22859950f63fd..290791e242e37 100644
--- a/examples/playwright/src/theia-notebook-cell.ts
+++ b/examples/playwright/src/theia-notebook-cell.ts
@@ -177,6 +177,14 @@ export class TheiaNotebookCell extends TheiaPageObject {
         return text?.substring(1, text.length - 1);
     }
 
+    /**
+     * @returns `true` if the cell is selected (blue vertical line), `false` otherwise.
+     */
+    async isSelected(): Promise<boolean> {
+        const markerClass = await this.locator.locator('div.theia-notebook-cell-marker').getAttribute('class');
+        return markerClass?.includes('theia-notebook-cell-marker-selected') ?? false;
+    }
+
     /**
      * @returns The output text of the cell.
      */
diff --git a/packages/notebook/src/browser/contributions/notebook-cell-actions-contribution.ts b/packages/notebook/src/browser/contributions/notebook-cell-actions-contribution.ts
index 87d656cb7cb44..38c50a753c21a 100644
--- a/packages/notebook/src/browser/contributions/notebook-cell-actions-contribution.ts
+++ b/packages/notebook/src/browser/contributions/notebook-cell-actions-contribution.ts
@@ -516,7 +516,7 @@ export class NotebookCellActionContribution implements MenuContribution, Command
             {
                 command: NotebookCellCommands.STOP_EDIT_COMMAND.id,
                 keybinding: 'esc',
-                when: `editorTextFocus && ${NOTEBOOK_EDITOR_FOCUSED}`,
+                when: `editorTextFocus && ${NOTEBOOK_EDITOR_FOCUSED} && !suggestWidgetVisible`,
             },
             {
                 command: NotebookCellCommands.EXECUTE_SINGLE_CELL_COMMAND.id,