Skip to content

Commit

Permalink
[ES|QL] Expands the height of the history and document sections (#193453
Browse files Browse the repository at this point in the history 
)

## Summary

Allows to expand the history / inline docs container.


![meow](https://github.com/user-attachments/assets/dadbb583-83e0-43cf-8354-a945a4fcd4fc)


### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>
  • Loading branch information
@stratoula @kibanamachine @ryankeairns
3 people authored Sep 24, 2024
1 parent 6db2fe6 commit 04a4942
Show file tree
Hide file tree
Showing 11 changed files with 191 additions and 75 deletions.
18 changes: 13 additions & 5 deletions packages/kbn-esql-editor/src/editor_footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,11 @@ interface EditorFooterProps {
updateQuery: (qs: string) => void;
isHistoryOpen: boolean;
setIsHistoryOpen: (status: boolean) => void;
isLanguageComponentOpen: boolean;
setIsLanguageComponentOpen: (status: boolean) => void;
measuredContainerWidth: number;
resizableContainerButton?: JSX.Element;
resizableContainerHeight: number;
hideRunQueryText?: boolean;
editorIsInline?: boolean;
isSpaceReduced?: boolean;
Expand All @@ -73,8 +77,12 @@ export const EditorFooter = memo(function EditorFooter({
editorIsInline,
isSpaceReduced,
hideTimeFilterInfo,
resizableContainerButton,
resizableContainerHeight,
isHistoryOpen,
setIsHistoryOpen,
isLanguageComponentOpen,
setIsLanguageComponentOpen,
hideQueryHistory,
isInCompactMode,
displayDocumentationAsFlyout,
Expand All @@ -84,7 +92,6 @@ export const EditorFooter = memo(function EditorFooter({
const kibana = useKibana<ESQLEditorDeps>();
const { docLinks } = kibana.services;
const [isErrorPopoverOpen, setIsErrorPopoverOpen] = useState(false);
const [isLanguageComponentOpen, setIsLanguageComponentOpen] = useState(false);
const [isWarningPopoverOpen, setIsWarningPopoverOpen] = useState(false);

const onUpdateAndSubmit = useCallback(
Expand All @@ -104,12 +111,12 @@ export const EditorFooter = memo(function EditorFooter({
const toggleHistoryComponent = useCallback(() => {
setIsHistoryOpen(!isHistoryOpen);
setIsLanguageComponentOpen(false);
}, [isHistoryOpen, setIsHistoryOpen]);
}, [isHistoryOpen, setIsHistoryOpen, setIsLanguageComponentOpen]);

const toggleLanguageComponent = useCallback(async () => {
setIsLanguageComponentOpen(!isLanguageComponentOpen);
setIsHistoryOpen(false);
}, [isLanguageComponentOpen, setIsHistoryOpen]);
}, [isLanguageComponentOpen, setIsHistoryOpen, setIsLanguageComponentOpen]);

const limit = useMemo(() => getLimitFromESQLQuery(code), [code]);

Expand Down Expand Up @@ -307,15 +314,16 @@ export const EditorFooter = memo(function EditorFooter({
containerCSS={styles.historyContainer}
onUpdateAndSubmit={onUpdateAndSubmit}
containerWidth={measuredContainerWidth}
isInCompactMode={isInCompactMode}
height={resizableContainerHeight}
/>
</EuiFlexItem>
)}
{isLanguageComponentOpen && editorIsInline && (
<EuiFlexItem grow={false}>
<LanguageDocumentationInline searchInDescription />
<LanguageDocumentationInline searchInDescription height={resizableContainerHeight} />
</EuiFlexItem>
)}
{resizableContainerButton}
</EuiFlexGroup>
);
});
9 changes: 3 additions & 6 deletions packages/kbn-esql-editor/src/editor_footer/query_history.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,6 @@ import { css, Interpolation, Theme } from '@emotion/react';
import { type QueryHistoryItem, getHistoryItems } from '../history_local_storage';
import { getReducedSpaceStyling, swapArrayElements } from './query_history_helpers';

const CONTAINER_MAX_HEIGHT_EXPANDED = 190;
const CONTAINER_MAX_HEIGHT_COMPACT = 250;

export function QueryHistoryAction({
toggleHistory,
isHistoryOpen,
Expand Down Expand Up @@ -206,12 +203,12 @@ export function QueryHistory({
containerCSS,
containerWidth,
onUpdateAndSubmit,
isInCompactMode,
height,
}: {
containerCSS: Interpolation<Theme>;
containerWidth: number;
onUpdateAndSubmit: (qs: string) => void;
isInCompactMode?: boolean;
height: number;
}) {
const theme = useEuiTheme();
const scrollBarStyles = euiScrollBarStyles(theme);
Expand Down Expand Up @@ -309,7 +306,7 @@ export function QueryHistory({
}
border-bottom-left-radius: ${euiTheme.border.radius.medium};
border-top-left-radius: ${euiTheme.border.radius.medium};
max-height: ${isInCompactMode ? CONTAINER_MAX_HEIGHT_COMPACT : CONTAINER_MAX_HEIGHT_EXPANDED}px;
max-height: ${height}px;
overflow-y: auto;
${scrollBarStyles}
${extraStyling}
Expand Down
8 changes: 7 additions & 1 deletion packages/kbn-esql-editor/src/esql_editor.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ export const EDITOR_INITIAL_HEIGHT = 80;
export const EDITOR_INITIAL_HEIGHT_INLINE_EDITING = 140;
export const EDITOR_MIN_HEIGHT = 40;
export const EDITOR_MAX_HEIGHT = 400;
// resizeable container initial height
// the resizable container is the container that holds the history component or the inline docs
// they are never open simultaneously
export const RESIZABLE_CONTAINER_INITIAL_HEIGHT = 190;

export const esqlEditorStyles = (
euiTheme: EuiThemeComputed,
Expand All @@ -23,7 +27,9 @@ export const esqlEditorStyles = (
editorIsInline: boolean,
hasOutline: boolean
) => {
const bottomContainerBorderColor = hasErrors ? euiTheme.colors.danger : euiTheme.colors.primary;
const bottomContainerBorderColor = hasErrors
? euiTheme.colors.danger
: euiTheme.colors.lightestShade;

return {
editorContainer: {
Expand Down
131 changes: 80 additions & 51 deletions packages/kbn-esql-editor/src/esql_editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,22 @@ import {
parseErrors,
parseWarning,
useDebounceWithOptions,
onKeyDownResizeHandler,
onMouseDownResizeHandler,
type MonacoMessage,
} from './helpers';
import { addQueriesToCache } from './history_local_storage';
import { ResizableButton } from './resizable_button';
import {
EDITOR_INITIAL_HEIGHT,
EDITOR_INITIAL_HEIGHT_INLINE_EDITING,
EDITOR_MAX_HEIGHT,
EDITOR_MIN_HEIGHT,
RESIZABLE_CONTAINER_INITIAL_HEIGHT,
esqlEditorStyles,
} from './esql_editor.styles';
import type { ESQLEditorProps, ESQLEditorDeps } from './types';

import './overwrite.scss';

const KEYCODE_ARROW_UP = 38;
const KEYCODE_ARROW_DOWN = 40;

// for editor width smaller than this value we want to start hiding some text
const BREAKPOINT_WIDTH = 540;

Expand Down Expand Up @@ -101,13 +99,19 @@ export const ESQLEditor = memo(function ESQLEditor({
const [editorHeight, setEditorHeight] = useState(
editorIsInline ? EDITOR_INITIAL_HEIGHT_INLINE_EDITING : EDITOR_INITIAL_HEIGHT
);
// the resizable container is the container that holds the history component or the inline docs
// they are never open simultaneously
const [resizableContainerHeight, setResizableContainerHeight] = useState(
RESIZABLE_CONTAINER_INITIAL_HEIGHT
);
const [popoverPosition, setPopoverPosition] = useState<{ top?: number; left?: number }>({});
const [timePickerDate, setTimePickerDate] = useState(moment());
const [measuredEditorWidth, setMeasuredEditorWidth] = useState(0);

const isSpaceReduced = Boolean(editorIsInline) && measuredEditorWidth < BREAKPOINT_WIDTH;

const [isHistoryOpen, setIsHistoryOpen] = useState(false);
const [isLanguageComponentOpen, setIsLanguageComponentOpen] = useState(false);
const [isCodeEditorExpandedFocused, setIsCodeEditorExpandedFocused] = useState(false);
const [isQueryLoading, setIsQueryLoading] = useState(true);
const [abortController, setAbortController] = useState(new AbortController());
Expand All @@ -129,7 +133,6 @@ export const ESQLEditor = memo(function ESQLEditor({
warnings: [],
});
const hideHistoryComponent = hideQueryHistory;

const onQueryUpdate = useCallback(
(value: string) => {
onTextLangQueryChange({ esql: value } as AggregateQuery);
Expand Down Expand Up @@ -248,52 +251,57 @@ export const ESQLEditor = memo(function ESQLEditor({
const editor1 = useRef<monaco.editor.IStandaloneCodeEditor>();
const containerRef = useRef<HTMLElement>(null);

// When the editor is on full size mode, the user can resize the height of the editor.
const onMouseDownResizeHandler = useCallback<
React.ComponentProps<typeof ResizableButton>['onMouseDownResizeHandler']
>(
(mouseDownEvent) => {
function isMouseEvent(e: React.TouchEvent | React.MouseEvent): e is React.MouseEvent {
return e && 'pageY' in e;
}
const startSize = editorHeight;
const startPosition = isMouseEvent(mouseDownEvent)
? mouseDownEvent?.pageY
: mouseDownEvent?.touches[0].pageY;

function onMouseMove(mouseMoveEvent: MouseEvent) {
const height = startSize - startPosition + mouseMoveEvent.pageY;
const validatedHeight = Math.min(Math.max(height, EDITOR_MIN_HEIGHT), EDITOR_MAX_HEIGHT);
setEditorHeight(validatedHeight);
}
function onMouseUp() {
document.body.removeEventListener('mousemove', onMouseMove);
}

document.body.addEventListener('mousemove', onMouseMove);
document.body.addEventListener('mouseup', onMouseUp, { once: true });
const onMouseDownResize = useCallback(
(
mouseDownEvent,
firstPanelHeight,
setFirstPanelHeight,
secondPanelHeight,
setSecondPanelHeight
) => {
onMouseDownResizeHandler(
mouseDownEvent,
firstPanelHeight,
setFirstPanelHeight,
secondPanelHeight,
setSecondPanelHeight
);
},
[editorHeight]
[]
);

const onKeyDownResizeHandler = useCallback<
React.ComponentProps<typeof ResizableButton>['onKeyDownResizeHandler']
>(
(keyDownEvent) => {
let height = editorHeight;
if (
keyDownEvent.keyCode === KEYCODE_ARROW_UP ||
keyDownEvent.keyCode === KEYCODE_ARROW_DOWN
) {
const step = keyDownEvent.keyCode === KEYCODE_ARROW_UP ? -10 : 10;
height = height + step;
const validatedHeight = Math.min(Math.max(height, EDITOR_MIN_HEIGHT), EDITOR_MAX_HEIGHT);
setEditorHeight(validatedHeight);
}
const onKeyDownResize = useCallback(
(
keyDownEvent,
firstPanelHeight,
setFirstPanelHeight,
secondPanelHeight,
setSecondPanelHeight
) => {
onKeyDownResizeHandler(
keyDownEvent,
firstPanelHeight,
setFirstPanelHeight,
secondPanelHeight,
setSecondPanelHeight
);
},
[editorHeight]
[]
);

const resizableContainerButton = useMemo(() => {
return (
<ResizableButton
onMouseDownResizeHandler={(mouseDownEvent) =>
onMouseDownResize(mouseDownEvent, editorHeight, setEditorHeight, undefined, undefined)
}
onKeyDownResizeHandler={(keyDownEvent) =>
onKeyDownResize(keyDownEvent, editorHeight, setEditorHeight, undefined, undefined)
}
/>
);
}, [onMouseDownResize, editorHeight, onKeyDownResize]);

const onEditorFocus = useCallback(() => {
setIsCodeEditorExpandedFocused(true);
showSuggestionsIfEmptyQuery();
Expand Down Expand Up @@ -718,6 +726,28 @@ export const ESQLEditor = memo(function ESQLEditor({
</div>
</EuiOutsideClickDetector>
</EuiFlexGroup>
{(isHistoryOpen || (isLanguageComponentOpen && editorIsInline)) && (
<ResizableButton
onMouseDownResizeHandler={(mouseDownEvent) => {
onMouseDownResize(
mouseDownEvent,
editorHeight,
setEditorHeight,
resizableContainerHeight,
setResizableContainerHeight
);
}}
onKeyDownResizeHandler={(keyDownEvent) =>
onKeyDownResize(
keyDownEvent,
editorHeight,
setEditorHeight,
resizableContainerHeight,
setResizableContainerHeight
)
}
/>
)}
<EditorFooter
lines={editorModel.current?.getLineCount() || 1}
styles={{
Expand All @@ -736,15 +766,14 @@ export const ESQLEditor = memo(function ESQLEditor({
{...editorMessages}
isHistoryOpen={isHistoryOpen}
setIsHistoryOpen={toggleHistory}
isLanguageComponentOpen={isLanguageComponentOpen}
setIsLanguageComponentOpen={setIsLanguageComponentOpen}
measuredContainerWidth={measuredEditorWidth}
hideQueryHistory={hideHistoryComponent}
resizableContainerButton={resizableContainerButton}
resizableContainerHeight={resizableContainerHeight}
displayDocumentationAsFlyout={displayDocumentationAsFlyout}
/>
<ResizableButton
onMouseDownResizeHandler={onMouseDownResizeHandler}
onKeyDownResizeHandler={onKeyDownResizeHandler}
editorIsInline={editorIsInline}
/>
{createPortal(
Object.keys(popoverPosition).length !== 0 && popoverPosition.constructor === Object && (
<div
Expand Down
Loading

0 comments on commit 04a4942

Please sign in to comment.