[8.x] [Console] Fix actions menu scrolling issue (#200018) (#200330)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Console] Fix actions menu scrolling issue
(#200018)](#200018)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Ignacio
Rivas","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-17T11:44:07Z","message":"[Console]
Fix actions menu scrolling issue
(#200018)","sha":"0ed82309e22a7fc8ac067c1dbf2c378735f86855","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Console","Team:Kibana
Management","release_note:skip","v9.0.0","backport:prev-minor"],"title":"[Console]
Fix actions menu scrolling
issue","number":200018,"url":"https://github.com/elastic/kibana/pull/200018","mergeCommit":{"message":"[Console]
Fix actions menu scrolling issue
(#200018)","sha":"0ed82309e22a7fc8ac067c1dbf2c378735f86855"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200018","number":200018,"mergeCommit":{"message":"[Console]
Fix actions menu scrolling issue
(#200018)","sha":"0ed82309e22a7fc8ac067c1dbf2c378735f86855"}}]}]
BACKPORT-->

Co-authored-by: Ignacio Rivas <[email protected]>

src/plugins/console/public/application/containers/editor/monaco_editor_actions_provider.ts

@@ -132,12 +132,19 @@ export class MonacoEditorActionsProvider {
         visibility: 'hidden',
       });
     } else {
-      // if a request is selected, the actions buttons are placed at lineNumberOffset - scrollOffset
-      const offset = this.editor.getTopForLineNumber(lineNumber) - this.editor.getScrollTop();
+      const lineTop = this.editor.getTopForLineNumber(lineNumber);
+      const scrollTop = this.editor.getScrollTop();
+      const offset = lineTop - scrollTop;
+
+      // Ensure offset is never less than or equal to zero, moving it down
+      // by 1 px if needed.
+      const adjustedOffset = offset <= 0 ? 1 : offset;
+
       this.setEditorActionsCss({
         visibility: 'visible',
-        //  Move position down by 1 px so that the action buttons panel doesn't cover the top border of the selected block
-        top: offset + 1,
+        // Move position down by 1 px so that the action buttons panel doesn't
+        // cover the top border of the selected block.
+        top: adjustedOffset + 1,
       });
     }
   }

test/functional/apps/console/_console.ts

@@ -216,6 +216,48 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
+    it('should show actions menu when the first line of the request is not in the viewport', async () => {
+      await PageObjects.console.clearEditorText();
+      await PageObjects.console.enterText(`PUT _ingest/pipeline/testme
+        {
+          "processors": [
+            {
+              "inference": {
+                "model_id": "azure_openai_embeddings",
+                "input_output": {
+                  "input_field": "body_content",
+                  "output_field": "body_content_vector"
+                },
+                "if": "ctx?.body_content!=null",
+                "ignore_failure": true,
+                 "on_failure": [
+                  {
+                    "append": {
+                      "field": "_source._ingest.inference_errors",
+                      "allow_duplicates": false,
+                      "value": [
+                        {
+                          "message": "...",
+                          "pipeline": "ml-inference-search-edf-azureopenai-embeddings",
+                          "timestamp": "{{{ _ingest.timestamp }}}"
+                        }
+                      ]
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+      }`);
+
+      // Reduce the height of the browser window so that the first line of the request is not in the viewport
+      await browser.setWindowSize(1300, 500);
+      expect(await PageObjects.console.isPlayButtonVisible()).to.be(true);
+
+      // Reset it back to the original height
+      await browser.setWindowSize(1300, 1100);
+    });
+
     it('Shows OK when status code is 200 but body is empty', async () => {
       await PageObjects.console.clearEditorText();
 

test/functional/page_objects/console_page.ts

@@ -217,6 +217,10 @@ export class ConsolePageObject extends FtrService {
     await this.testSubjects.click('sendRequestButton');
   }
 
+  public async isPlayButtonVisible() {
+    return await this.testSubjects.exists('sendRequestButton');
+  }
+
   public async clickCopyOutput() {
     await this.testSubjects.click('copyOutputButton');
   }