From dc29fb7cb508a98aaa6606da718a8c57cdee74e2 Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Wed, 22 Nov 2023 10:14:11 +0100 Subject: [PATCH] [Log Explorer] Update minimum height for JSON doc view (#171553) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📓 Summary Closes #171485 This fix guarantees the JSON doc view will always get a minimum space independently of the available space, to avoid the current scenario where a scrollable flyout does not reserve enough space for the JSON tab content tobe displayed (see recording in the related issue). https://github.com/elastic/kibana/assets/34506779/2c539047-32cd-4213-bc6f-3062de151426 --------- Co-authored-by: Marco Antonio Ghiani --- .../doc_viewer_source/get_height.test.tsx | 13 ++++++++++--- .../components/doc_viewer_source/get_height.tsx | 4 ++-- .../public/components/doc_viewer_source/source.tsx | 2 ++ 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.test.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.test.tsx index fc8f7498f6efc..6c6ae2852e053 100644 --- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.test.tsx +++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.test.tsx @@ -12,13 +12,13 @@ import { getHeight } from './get_height'; describe('getHeight', () => { Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 500 }); - const getMonacoMock = (lineCount: number) => { + const getMonacoMock = (lineCount: number, top: number = 200) => { return { getDomNode: jest.fn(() => { return { getBoundingClientRect: jest.fn(() => { return { - top: 200, + top, }; }), }; @@ -29,10 +29,17 @@ describe('getHeight', () => { } as unknown as monaco.editor.IStandaloneCodeEditor; }; test('when using document explorer, returning the available height in the flyout', () => { + const monacoMock = getMonacoMock(500, 0); + + const height = getHeight(monacoMock, true); + expect(height).toBe(475); + }); + + test('when using document explorer, returning the available height in the flyout has a minimun guarenteed height', () => { const monacoMock = getMonacoMock(500); const height = getHeight(monacoMock, true); - expect(height).toBe(275); + expect(height).toBe(400); }); test('when using classic table, its displayed inline without scrolling', () => { diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.tsx index 0dcabc8ae951d..dbab289018a63 100644 --- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.tsx +++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ import { monaco } from '@kbn/monaco'; -import { MARGIN_BOTTOM, MAX_LINES_CLASSIC_TABLE } from './source'; +import { MARGIN_BOTTOM, MAX_LINES_CLASSIC_TABLE, MIN_HEIGHT } from './source'; export function getHeight(editor: monaco.editor.IStandaloneCodeEditor, useDocExplorer: boolean) { const editorElement = editor?.getDomNode(); @@ -28,5 +28,5 @@ export function getHeight(editor: monaco.editor.IStandaloneCodeEditor, useDocExp lineCount > MAX_LINES_CLASSIC_TABLE ? MAX_LINES_CLASSIC_TABLE : lineCount; result = editor.getTopForLineNumber(displayedLineCount + 1) + lineHeight; } - return result > 0 ? result : 0; + return Math.max(result, MIN_HEIGHT); } diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/source.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/source.tsx index 26c771e405be8..140fbd6e08cb0 100644 --- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/source.tsx +++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/source.tsx @@ -36,6 +36,8 @@ interface SourceViewerProps { export const MAX_LINES_CLASSIC_TABLE = 500; // Displayed margin of the code editor to the window bottom when rendered in the document explorer flyout export const MARGIN_BOTTOM = 25; +// Minimum height for the source content to guarantee minimum space when the flyout is scrollable. +export const MIN_HEIGHT = 400; export const DocViewerSource = ({ id,