use language manager and query enhancement editor to render editor UI

Signed-off-by: abbyhu2000 <[email protected]>
abbyhu2000 · Aug 21, 2024 · 9385d53 · 9385d53
1 parent 1d0d137
commit 9385d53
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 247 deletions.
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
@@ -62,6 +62,7 @@ import {
 } from '../common';
 
 import { FilterLabel } from './ui';
+export { createEditor, DefaultInput, DQLBody, SingleLineInput } from './ui';
 
 import {
   generateFilters,

diff --git a/src/plugins/data/public/query/query_string/language_manager/language_manager.ts b/src/plugins/data/public/query/query_string/language_manager/language_manager.ts
@@ -5,7 +5,7 @@
 
 import { BehaviorSubject } from 'rxjs';
 import { QueryEnhancement, UiEnhancements } from '../../../ui/types';
-import { QueryEditorExtensionConfig } from '../../../ui';
+import { createEditor, DQLBody, QueryEditorExtensionConfig, SingleLineInput } from '../../../ui';
 import { ConfigSchema } from '../../../../config';
 import { DataStorage, setOverrides as setFieldOverrides } from '../../../../common';
 
@@ -39,6 +39,10 @@ export class LanguageManager {
     this.queryEditorExtensionMap = {};
   }
 
+  public createDefaultQueryEditor() {
+    return createEditor(SingleLineInput, SingleLineInput, DQLBody);
+  }
+
   public __enhance = (enhancements: UiEnhancements) => {
     if (!enhancements) return;
     if (enhancements.query && enhancements.query.language) {
@@ -130,10 +134,10 @@ export class LanguageManager {
   setUiOverridesByUserQueryLanguage(language: string) {
     const queryEnhancement = this.queryEnhancements.get(language);
     if (queryEnhancement) {
-      const { fields = {}, showDocLinks } = queryEnhancement;
-      this.setUiOverrides({ fields, showDocLinks });
+      const { fields = {} } = queryEnhancement;
+      this.setUiOverrides({ fields });
     } else {
-      this.setUiOverrides({ fields: undefined, showDocLinks: undefined });
+      this.setUiOverrides({ fields: undefined });
     }
   }
 

diff --git a/src/plugins/data/public/query/query_string/query_string_manager.ts b/src/plugins/data/public/query/query_string/query_string_manager.ts
@@ -35,7 +35,6 @@ import { DataStorage, Query, SimpleDataSet, TimeRange, UI_SETTINGS } from '../..
 import { createHistory, QueryHistory } from './query_history';
 import { LanguageManager } from './language_manager/language_manager';
 import { ConfigSchema } from '../../../config';
-import { SearchService } from '../../search/search_service';
 
 export class QueryStringManager {
   private query$: BehaviorSubject<Query>;

diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts
@@ -28,14 +28,7 @@
  * under the License.
  */
 
-export {
-  UiEnhancements,
-  IUiStart,
-  IUiSetup,
-  createSettings,
-  Settings,
-  DataSettings,
-} from './types';
+export { UiEnhancements, IUiStart, IUiSetup } from './types';
 export { IndexPatternSelectProps } from './index_pattern_select';
 export { FilterLabel } from './filter_bar';
 export { QueryStringInput, QueryStringInputProps } from './query_string_input';
@@ -46,6 +39,10 @@ export {
   QueryEditorExtensions,
   QueryEditorExtensionDependencies,
   QueryEditorExtensionConfig,
+  createEditor,
+  DefaultInput,
+  DQLBody,
+  SingleLineInput,
 } from './query_editor';
 export { SearchBar, SearchBarProps, StatefulSearchBarProps } from './search_bar';
 export { SuggestionsComponent } from './typeahead';

diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
@@ -27,7 +27,7 @@ interface DefaultInputProps extends React.JSX.IntrinsicAttributes {
   provideCompletionItems: monaco.languages.CompletionItemProvider['provideCompletionItems'];
 }
 
-const DefaultInput: React.FC<DefaultInputProps> = ({
+export const DefaultInput: React.FC<DefaultInputProps> = ({
   languageId,
   value,
   onChange,
@@ -95,5 +95,3 @@ const FooterItem: React.FC<{ item: FooterItem | string }> = ({ item }) => {
     </EuiText>
   );
 };
-
-export const createDefaultEditor = createEditor(SingleLineInput, null, DefaultInput);
diff --git a/src/plugins/data/public/ui/query_editor/editors/dql_editor/index.tsx b/src/plugins/data/public/ui/query_editor/editors/dql_editor/index.tsx
@@ -4,12 +4,9 @@
  */
 
 import React from 'react';
-import { createEditor, SingleLineInput } from '../shared';
 
 interface DQLBodyProps extends React.JSX.IntrinsicAttributes {
   filterBar?: any;
 }
 
-const DQLBody: React.FC<DQLBodyProps> = ({ filterBar }) => <div>{filterBar}</div>;
-
-export const createDQLEditor = createEditor(SingleLineInput, SingleLineInput, DQLBody);
+export const DQLBody: React.FC<DQLBodyProps> = ({ filterBar }) => <div>{filterBar}</div>;
diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
@@ -27,7 +27,7 @@ export interface Editor<TCollapsed, TExpanded, TBody> {
   Body: BodyComponent<TBody>;
 }
 
-interface EditorInstance<TCollapsed, TExpanded, TBody> {
+export interface EditorInstance<TCollapsed, TExpanded, TBody> {
   TopBar: {
     Collapsed: () => React.ReactElement;
     Expanded: (() => React.ReactElement) | null;

diff --git a/src/plugins/data/public/ui/query_editor/index.tsx b/src/plugins/data/public/ui/query_editor/index.tsx
@@ -30,3 +30,5 @@ export {
   QueryEditorExtensionDependencies,
   QueryEditorExtensionConfig,
 } from './query_editor_extensions';
+
+export { createEditor, DefaultInput, DQLBody, SingleLineInput } from './editors';
diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -17,9 +17,8 @@ import { QueryLanguageSelector } from './language_selector';
 import { QueryEditorExtensions } from './query_editor_extensions';
 import { QueryEditorBtnCollapse } from './query_editor_btn_collapse';
 import { SimpleDataSet } from '../../../common';
-import { createDQLEditor, createDefaultEditor } from './editors';
 import { getQueryService, getIndexPatterns } from '../../services';
-import { DataSettings } from '..';
+import { DataSettings } from '../../query/query_string/language_manager/language_manager';
 
 const LANGUAGE_ID_SQL = 'SQL';
 monaco.languages.register({ id: LANGUAGE_ID_SQL });
@@ -206,15 +205,16 @@ export default class QueryEditorUI extends Component<Props, State> {
     };
     this.languageManager.updateSettings(newSettings);
 
-    const dateRangeEnhancement = enhancement?.searchBar?.dateRange;
-    const dateRange = dateRangeEnhancement
-      ? {
-          from: dateRangeEnhancement.initialFrom!,
-          to: dateRangeEnhancement.initialTo!,
-        }
-      : undefined;
-    this.onChange(newQuery, dateRange);
-    this.onSubmit(newQuery, dateRange);
+    // TODO: confirm if this is needed
+    // const dateRangeEnhancement = enhancement?.searchBar?.dateRange;
+    // const dateRange = dateRangeEnhancement
+    //   ? {
+    //       from: dateRangeEnhancement.initialFrom!,
+    //       to: dateRangeEnhancement.initialTo!,
+    //     }
+    //   : undefined;
+    this.onChange(newQuery);
+    this.onSubmit(newQuery);
   };
 
   private initPersistedLog = () => {
@@ -303,9 +303,6 @@ export default class QueryEditorUI extends Component<Props, State> {
   public render() {
     const className = classNames(this.props.className);
 
-    const useQueryEditor =
-      this.props.query.language !== 'kuery' && this.props.query.language !== 'lucene';
-
     const languageSelector = (
       <QueryLanguageSelector
         language={this.props.query.language}
@@ -368,19 +365,36 @@ export default class QueryEditorUI extends Component<Props, State> {
       provideCompletionItems: this.provideCompletionItems,
     };
 
-    const languageEditor = useQueryEditor
-      ? createDefaultEditor(singleLineInputProps, {}, defaultInputProps)
-      : createDQLEditor(singleLineInputProps, singleLineInputProps, {
+    const languageEditor = this.languageManager.getQueryEnhancements(this.props.query.language)
+      ?.editor;
+
+    const defaultLanguageEditor = this.languageManager.createDefaultQueryEditor();
+
+    // const languageEditor = useQueryEditor
+    // ? createDefaultEditor(singleLineInputProps, {}, defaultInputProps)
+    // : createDQLEditor(singleLineInputProps, singleLineInputProps, {
+    //     filterBar: this.props.filterBar,
+    //   });
+
+    const TopBar = languageEditor
+      ? languageEditor(singleLineInputProps, {}, defaultInputProps).TopBar
+      : defaultLanguageEditor(singleLineInputProps, singleLineInputProps, {
           filterBar: this.props.filterBar,
-        });
+        }).TopBar;
+
+    const Body = languageEditor
+      ? languageEditor(singleLineInputProps, {}, defaultInputProps).Body
+      : defaultLanguageEditor(singleLineInputProps, singleLineInputProps, {
+          filterBar: this.props.filterBar,
+        }).Body;
 
     return (
       <div
         className={classNames(
           className,
           'osdQueryEditor',
           this.state.isCollapsed ? 'collapsed' : 'expanded',
-          !languageEditor.TopBar.Expanded && 'emptyExpanded'
+          !TopBar.Expanded && 'emptyExpanded'
         )}
       >
         <div
@@ -394,9 +408,7 @@ export default class QueryEditorUI extends Component<Props, State> {
           />
           <div ref={this.props.dataSetContainerRef} className="osdQueryEditor__dataSetPicker" />
           <div className="osdQueryEditor__input">
-            {this.state.isCollapsed
-              ? languageEditor.TopBar.Collapsed()
-              : languageEditor.TopBar.Expanded && languageEditor.TopBar.Expanded()}
+            {this.state.isCollapsed ? TopBar.Collapsed() : TopBar.Expanded && TopBar.Expanded()}
           </div>
           {languageSelector}
           {this.props.queryActions}
@@ -405,173 +417,7 @@ export default class QueryEditorUI extends Component<Props, State> {
           ref={this.headerRef}
           className={classNames('osdQueryEditor__header', this.props.headerClassName)}
         />
-        {!this.state.isCollapsed && (
-          <div className="osdQueryEditor__body">{languageEditor.Body()}</div>
-        )}
-
-        {/*  <EuiFlexGroup gutterSize="xs" direction="column">
-           <EuiFlexItem grow={false}>
-             <EuiFlexGroup gutterSize="xs" alignItems="center" className={`${className}__wrapper`}>
-               <EuiFlexItem className={`${className}__collapseWrapper`}>
-                 <QueryEditorBtnCollapse
-                   onClick={() => this.setState({ isCollapsed: !this.state.isCollapsed })}
-                   isCollapsed={!this.state.isCollapsed}
-                 />
-               </EuiFlexItem>
-               <EuiFlexItem className={`${className}__dataSetWrapper`}>
-                 <div ref={this.props.dataSetContainerRef} />
-               </EuiFlexItem>
-               <EuiFlexItem grow={true}>
-                 <EuiFlexGroup
-                   gutterSize="none"
-                   className={
-                     !useQueryEditor
-                       ? 'euiFormControlLayout euiFormControlLayout--group osdQueryEditor__editorAndSelectorWrapper'
-                       : ''
-                   }
-                 >
-                   {(this.state.isCollapsed || !useQueryEditor) && (
-                     <EuiFlexItem grow={9}>
-                       <div className="single-line-editor-wrapper">
-                         <CodeEditor
-                           height={40} // Adjusted to match lineHeight for a single line
-                           languageId={this.props.query.language}
-                           value={this.getQueryString()}
-                           onChange={this.onSingleLineInputChange}
-                           editorDidMount={this.singleLineEditorDidMount}
-                           options={{
-                             lineNumbers: 'off', // Disabled line numbers
-                             lineHeight: 40,
-                             fontSize: 14,
-                             fontFamily: 'Roboto Mono',
-                             minimap: {
-                               enabled: false,
-                             },
-                             scrollBeyondLastLine: false,
-                             wordWrap: 'off', // Disabled word wrapping
-                             wrappingIndent: 'none', // No indent since wrapping is off
-                             folding: false,
-                             glyphMargin: false,
-                             lineDecorationsWidth: 0,
-                             scrollbar: {
-                               vertical: 'hidden',
-                             },
-                             overviewRulerLanes: 0,
-                             hideCursorInOverviewRuler: true,
-                             cursorStyle: 'line',
-                             wordBasedSuggestions: false,
-                           }}
-                           suggestionProvider={{
-                             provideCompletionItems: this.provideCompletionItems,
-                           }}
-                           languageConfiguration={{
-                             language: LANGUAGE_ID_KUERY,
-                             autoClosingPairs: [
-                               {
-                                 open: '(',
-                                 close: ')',
-                               },
-                               {
-                                 open: '"',
-                                 close: '"',
-                               },
-                             ],
-                           }}
-                         />
-                       </div>
-                     </EuiFlexItem>
-                   )}
-                   {!useQueryEditor && (
-                     <EuiFlexItem grow={false}>
-                       <QueryLanguageSelector
-                         language={this.props.query.language}
-                         anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
-                         onSelectLanguage={this.onSelectLanguage}
-                         appName={this.services.appName}
-                       />
-                     </EuiFlexItem>
-                   )}
-                 </EuiFlexGroup>
-               </EuiFlexItem>
-               <EuiFlexItem
-                 className={`${className}__prependWrapper${
-                   !this.state.isCollapsed && useQueryEditor ? '' : '-isCollapsed'
-                 }`}
-               >
-                 {this.props.prepend}
-               </EuiFlexItem>
-             </EuiFlexGroup>
-           </EuiFlexItem>
-
-           <EuiFlexItem onClick={this.onClickInput} grow={true}>
-             {!this.state.isCollapsed && useQueryEditor && (
-               <CodeEditor
-                 height={70}
-                 languageId={this.props.query.language}
-                 value={this.getQueryString()}
-                 onChange={this.onInputChange}
-                 editorDidMount={this.editorDidMount}
-                 options={{
-                   lineNumbers: 'on',
-                   lineHeight: 24,
-                   fontSize: 14,
-                   fontFamily: 'Roboto Mono',
-                   minimap: {
-                     enabled: false,
-                   },
-                   scrollBeyondLastLine: false,
-                   wordWrap: 'on',
-                   wrappingIndent: 'indent',
-                   lineDecorationsWidth: 0,
-                   lineNumbersMinChars: 2,
-                   wordBasedSuggestions: false,
-                 }}
-                 suggestionProvider={{
-                   provideCompletionItems: this.provideCompletionItems,
-                 }}
-                 languageConfiguration={{
-                   language: LANGUAGE_ID_KUERY,
-                   autoClosingPairs: [
-                     {
-                       open: '(',
-                       close: ')',
-                     },
-                     {
-                       open: '"',
-                       close: '"',
-                     },
-                   ],
-                 }}
-               />
-             )}
-
-             <div
-               className={
-                 !this.state.isCollapsed && useQueryEditor
-                   ? footerClassName
-                   : 'osdQueryEditorFooter-isHidden'
-               }
-             >
-               <EuiFlexGroup gutterSize="s" responsive={false}>
-                 <EuiFlexItem grow={false}>{languageSelector}</EuiFlexItem>
-
-                 <EuiFlexItem grow={false}>
-                   {this.state.lineCount} {this.state.lineCount === 1 ? 'line' : 'lines'}
-                 </EuiFlexItem>
-                 <EuiFlexItem grow={false}>
-                   {typeof this.props.indexPatterns?.[0] !== 'string' &&
-                     '@' + this.props.indexPatterns?.[0].timeFieldName}
-                 </EuiFlexItem>
-               </EuiFlexGroup>
-             </div>
-           </EuiFlexItem>
-
-           {!this.state.isCollapsed && (
-             <EuiFlexItem grow={false}>
-               <div className="osdQueryEditor__filterBarWrapper">{this.props.filterBar}</div>
-             </EuiFlexItem>
-           )}
-         </EuiFlexGroup> */}
+        {!this.state.isCollapsed && <div className="osdQueryEditor__body">{Body()}</div>}
         {this.renderQueryEditorExtensions()}
       </div>
     );