[ES|QL] Edits query in the dashboard

packages/kbn-text-based-editor/src/editor_footer.tsx

@@ -19,6 +19,8 @@ import {
   EuiPopoverTitle,
   EuiDescriptionList,
   EuiDescriptionListDescription,
+  EuiButton,
+  useEuiTheme,
 } from '@elastic/eui';
 import { Interpolation, Theme, css } from '@emotion/react';
 import { css as classNameCss } from '@emotion/css';
@@ -60,12 +62,14 @@ export function ErrorsWarningsPopover({
   type,
   setIsPopoverOpen,
   onErrorClick,
+  isSpaceReduced,
 }: {
   isPopoverOpen: boolean;
   items: MonacoError[];
   type: 'error' | 'warning';
   setIsPopoverOpen: (flag: boolean) => void;
   onErrorClick: (error: MonacoError) => void;
+  isSpaceReduced?: boolean;
 }) {
   const strings = getConstsByType(type, items.length);
   return (
@@ -90,7 +94,7 @@ export function ErrorsWarningsPopover({
                   setIsPopoverOpen(!isPopoverOpen);
                 }}
               >
-                <p>{strings.message}</p>
+                <p>{isSpaceReduced ? items.length : strings.message}</p>
               </EuiText>
             }
             ownFocus={false}
@@ -151,8 +155,11 @@ interface EditorFooterProps {
   warning?: MonacoError[];
   detectTimestamp: boolean;
   onErrorClick: (error: MonacoError) => void;
-  refreshErrors: () => void;
+  runQuery: () => void;
   hideRunQueryText?: boolean;
+  disableSubmitAction?: boolean;
+  editorIsInline?: boolean;
+  isSpaceReduced?: boolean;
 }
 
 export const EditorFooter = memo(function EditorFooter({
@@ -162,10 +169,15 @@ export const EditorFooter = memo(function EditorFooter({
   warning,
   detectTimestamp,
   onErrorClick,
-  refreshErrors,
+  runQuery,
   hideRunQueryText,
+  disableSubmitAction,
+  editorIsInline,
+  isSpaceReduced,
 }: EditorFooterProps) {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
   return (
     <EuiFlexGroup
       gutterSize="s"
@@ -176,24 +188,6 @@ export const EditorFooter = memo(function EditorFooter({
     >
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
-          {errors && errors.length > 0 && (
-            <ErrorsWarningsPopover
-              isPopoverOpen={isPopoverOpen}
-              items={errors}
-              type="error"
-              setIsPopoverOpen={setIsPopoverOpen}
-              onErrorClick={onErrorClick}
-            />
-          )}
-          {warning && warning.length > 0 && (
-            <ErrorsWarningsPopover
-              isPopoverOpen={isPopoverOpen}
-              items={warning}
-              type="warning"
-              setIsPopoverOpen={setIsPopoverOpen}
-              onErrorClick={onErrorClick}
-            />
-          )}
           <EuiFlexItem grow={false} style={{ marginRight: '8px' }}>
             <EuiText size="xs" color="subdued" data-test-subj="TextBasedLangEditor-footer-lines">
               <p>
@@ -206,30 +200,49 @@ export const EditorFooter = memo(function EditorFooter({
           </EuiFlexItem>
           <EuiFlexItem grow={false} style={{ marginRight: '16px' }}>
             <EuiFlexGroup gutterSize="xs" responsive={false} alignItems="center">
-              <EuiFlexItem grow={false}>
-                <EuiIcon type="calendar" color="subdued" size="s" />
-              </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiText size="xs" color="subdued" data-test-subj="TextBasedLangEditor-date-info">
                   <p>
-                    {detectTimestamp
+                    {isSpaceReduced
+                      ? '@timestamp'
+                      : detectTimestamp
                       ? i18n.translate(
                           'textBasedEditor.query.textBasedLanguagesEditor.timestampDetected',
                           {
-                            defaultMessage: '@timestamp detected',
+                            defaultMessage: '@timestamp found',
                           }
                         )
                       : i18n.translate(
                           'textBasedEditor.query.textBasedLanguagesEditor.timestampNotDetected',
                           {
-                            defaultMessage: '@timestamp not detected',
+                            defaultMessage: '@timestamp not found',
                           }
                         )}
                   </p>
                 </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
+          {errors && errors.length > 0 && (
+            <ErrorsWarningsPopover
+              isPopoverOpen={isPopoverOpen}
+              items={errors}
+              type="error"
+              setIsPopoverOpen={setIsPopoverOpen}
+              onErrorClick={onErrorClick}
+              isSpaceReduced={isSpaceReduced}
+            />
+          )}
+          {warning && warning.length > 0 && (
+            <ErrorsWarningsPopover
+              isPopoverOpen={isPopoverOpen}
+              items={warning}
+              type="warning"
+              setIsPopoverOpen={setIsPopoverOpen}
+              onErrorClick={onErrorClick}
+              isSpaceReduced={isSpaceReduced}
+            />
+          )}
         </EuiFlexGroup>
       </EuiFlexItem>
       {!hideRunQueryText && (
@@ -255,6 +268,53 @@ export const EditorFooter = memo(function EditorFooter({
           </EuiFlexGroup>
         </EuiFlexItem>
       )}
+      {Boolean(editorIsInline) && (
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            color="text"
+            size="s"
+            fill
+            onClick={runQuery}
+            isDisabled={Boolean(disableSubmitAction)}
+            data-test-subj="TextBasedLangEditor-run-query-button"
+            minWidth={isSpaceReduced ? false : undefined}
+          >
+            <EuiFlexGroup
+              gutterSize="xs"
+              responsive={false}
+              alignItems="center"
+              justifyContent="spaceBetween"
+            >
+              <EuiFlexItem grow={false}>
+                {isSpaceReduced
+                  ? i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.run', {
+                      defaultMessage: 'Run',
+                    })
+                  : i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.runQuery', {
+                      defaultMessage: 'Run query',
+                    })}
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText
+                  size="xs"
+                  css={css`
+                    border: 1px solid
+                      ${Boolean(disableSubmitAction)
+                        ? euiTheme.colors.disabled
+                        : euiTheme.colors.emptyShade};
+                    padding: 0 ${euiTheme.size.xs};
+                    font-size: ${euiTheme.size.s};
+                    margin-left: ${euiTheme.size.xs};
+                    border-radius: ${euiTheme.size.xs};
+                  `}
+                >
+                  {COMMAND_KEY}⏎
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiButton>
+        </EuiFlexItem>
+      )}
     </EuiFlexGroup>
   );
 });

packages/kbn-text-based-editor/src/resizable_button.tsx

@@ -13,11 +13,13 @@ import { css } from '@emotion/react';
 export function ResizableButton({
   onMouseDownResizeHandler,
   onKeyDownResizeHandler,
+  editorIsInline,
 }: {
   onMouseDownResizeHandler: (
     mouseDownEvent: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent
   ) => void;
   onKeyDownResizeHandler: (keyDownEvernt: React.KeyboardEvent) => void;
+  editorIsInline?: boolean;
 }) {
   return (
     <EuiResizableButton
@@ -26,7 +28,7 @@ export function ResizableButton({
       onKeyDown={onKeyDownResizeHandler}
       onTouchStart={onMouseDownResizeHandler}
       css={css`
-        position: absolute;
+        position: ${editorIsInline ? 'relative' : 'absolute'};
         bottom: 0;
         left: 0;
         right: 0;

packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts

@@ -20,7 +20,8 @@ export const textBasedLanguagedEditorStyles = (
   hasErrors: boolean,
   hasWarning: boolean,
   isCodeEditorExpandedFocused: boolean,
-  hasReference: boolean
+  hasReference: boolean,
+  editorIsInline: boolean
 ) => {
   let position = isCompactFocused ? ('absolute' as 'absolute') : ('relative' as 'relative'); // cast string to type 'relative' | 'absolute'
   if (isCodeEditorExpanded) {
@@ -33,6 +34,8 @@ export const textBasedLanguagedEditorStyles = (
       zIndex: isCompactFocused ? 4 : 0,
       height: `${editorHeight}px`,
       border: isCompactFocused ? euiTheme.border.thin : 'none',
+      borderLeft: editorIsInline || !isCompactFocused ? 'none' : euiTheme.border.thin,
+      borderRight: editorIsInline || !isCompactFocused ? 'none' : euiTheme.border.thin,
       borderTopLeftRadius: isCodeEditorExpanded ? 0 : '6px',
       borderBottom: isCodeEditorExpanded
         ? 'none'
@@ -66,6 +69,8 @@ export const textBasedLanguagedEditorStyles = (
     },
     bottomContainer: {
       border: euiTheme.border.thin,
+      borderLeft: editorIsInline ? 'none' : euiTheme.border.thin,
+      borderRight: editorIsInline ? 'none' : euiTheme.border.thin,
       borderTop:
         isCodeEditorExpanded && !isCodeEditorExpandedFocused
           ? hasErrors
@@ -75,29 +80,29 @@ export const textBasedLanguagedEditorStyles = (
       backgroundColor: euiTheme.colors.lightestShade,
       paddingLeft: euiTheme.size.base,
       paddingRight: euiTheme.size.base,
-      paddingTop: euiTheme.size.xs,
-      paddingBottom: euiTheme.size.xs,
+      paddingTop: editorIsInline ? '7px' : euiTheme.size.xs,
+      paddingBottom: editorIsInline ? '7px' : euiTheme.size.xs,
       width: 'calc(100% + 2px)',
       position: 'relative' as 'relative', // cast string to type 'relative',
       marginTop: 0,
       marginLeft: 0,
       marginBottom: 0,
-      borderBottomLeftRadius: '6px',
-      borderBottomRightRadius: '6px',
+      borderBottomLeftRadius: editorIsInline ? 0 : '6px',
+      borderBottomRightRadius: editorIsInline ? 0 : '6px',
     },
     topContainer: {
-      border: euiTheme.border.thin,
-      borderTopLeftRadius: '6px',
-      borderTopRightRadius: '6px',
+      border: editorIsInline ? 'none' : euiTheme.border.thin,
+      borderTopLeftRadius: editorIsInline ? 0 : '6px',
+      borderTopRightRadius: editorIsInline ? 0 : '6px',
       backgroundColor: euiTheme.colors.lightestShade,
       paddingLeft: euiTheme.size.base,
       paddingRight: euiTheme.size.base,
-      paddingTop: euiTheme.size.xs,
-      paddingBottom: euiTheme.size.xs,
+      paddingTop: editorIsInline ? euiTheme.size.s : euiTheme.size.xs,
+      paddingBottom: editorIsInline ? euiTheme.size.s : euiTheme.size.xs,
       width: 'calc(100% + 2px)',
       position: 'relative' as 'relative', // cast string to type 'relative',
       marginLeft: 0,
-      marginTop: euiTheme.size.s,
+      marginTop: editorIsInline ? 0 : euiTheme.size.s,
     },
     dragResizeContainer: {
       width: '100%',

packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx

@@ -84,7 +84,7 @@ describe('TextBasedLanguagesEditor', () => {
     });
   });
 
-  it('should  render the date info with no @timestamp detected', async () => {
+  it('should  render the date info with no @timestamp found', async () => {
     const newProps = {
       ...props,
       isCodeEditorExpanded: true,
@@ -93,11 +93,11 @@ describe('TextBasedLanguagesEditor', () => {
       const component = mount(renderTextBasedLanguagesEditorComponent({ ...newProps }));
       expect(
         component.find('[data-test-subj="TextBasedLangEditor-date-info"]').at(0).text()
-      ).toStrictEqual('@timestamp not detected');
+      ).toStrictEqual('@timestamp not found');
     });
   });
 
-  it('should render the date info with @timestamp detected if detectTimestamp is true', async () => {
+  it('should render the date info with @timestamp found if detectTimestamp is true', async () => {
     const newProps = {
       ...props,
       isCodeEditorExpanded: true,
@@ -107,7 +107,7 @@ describe('TextBasedLanguagesEditor', () => {
       const component = mount(renderTextBasedLanguagesEditorComponent({ ...newProps }));
       expect(
         component.find('[data-test-subj="TextBasedLangEditor-date-info"]').at(0).text()
-      ).toStrictEqual('@timestamp detected');
+      ).toStrictEqual('@timestamp found');
     });
   });
 
@@ -265,4 +265,24 @@ describe('TextBasedLanguagesEditor', () => {
       expect(component.find('[data-test-subj="TextBasedLangEditor-run-query"]').length).toBe(0);
     });
   });
+
+  it('should render correctly if editorIsInline prop is set to true', async () => {
+    const onTextLangQuerySubmit = jest.fn();
+    const newProps = {
+      ...props,
+      isCodeEditorExpanded: true,
+      hideRunQueryText: true,
+      editorIsInline: true,
+      onTextLangQuerySubmit,
+    };
+    await act(async () => {
+      const component = mount(renderTextBasedLanguagesEditorComponent({ ...newProps }));
+      expect(component.find('[data-test-subj="TextBasedLangEditor-run-query"]').length).toBe(0);
+      expect(
+        component.find('[data-test-subj="TextBasedLangEditor-run-query-button"]').length
+      ).not.toBe(1);
+      findTestSubject(component, 'TextBasedLangEditor-run-query-button').simulate('click');
+      expect(onTextLangQuerySubmit).toHaveBeenCalled();
+    });
+  });
 });