[Discover-Next] conditionally render selector

When selecting a specific language, the data source selector disappears and relies completely on the query editor when enhancements are enabled. If toggled on and then off, everything is working properly. opensearch-project#7046 Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
kavilla · Jun 19, 2024 · 6362894 · 6362894
1 parent a4aa682
commit 6362894
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "start": "scripts/use_node scripts/opensearch_dashboards --dev",
     "start:docker": "scripts/use_node scripts/opensearch_dashboards --dev --opensearch.hosts=$OPENSEARCH_HOSTS --opensearch.ignoreVersionMismatch=true --server.host=$SERVER_HOST",
     "start:security": "scripts/use_node scripts/opensearch_dashboards --dev --security",
+    "start:enhancements": "scripts/use_node scripts/opensearch_dashboards --dev --data.enhancements.enabled=true --uiSettings.overrides['query:enhancements:enabled']=true --uiSettings.overrides['query:dataSource:readOnly']=false",
     "debug": "scripts/use_node --nolazy --inspect scripts/opensearch_dashboards --dev",
     "debug-break": "scripts/use_node --nolazy --inspect-brk scripts/opensearch_dashboards --dev",
     "lint": "yarn run lint:es && yarn run lint:style",

diff --git a/src/plugins/data/common/data_frames/types.ts b/src/plugins/data/common/data_frames/types.ts
@@ -98,6 +98,6 @@ export interface IDataFrameResponse extends SearchResponse<any> {
   took: number;
 }
 
-export interface IDataFrameError {
+export interface IDataFrameError extends IDataFrameResponse {
   error: Error;
 }
diff --git a/src/plugins/data/common/search/search_source/search_source.ts b/src/plugins/data/common/search/search_source/search_source.ts
@@ -123,7 +123,7 @@ export const searchSourceRequiredUiSettings = [
   UI_SETTINGS.QUERY_STRING_OPTIONS,
   UI_SETTINGS.SEARCH_INCLUDE_FROZEN,
   UI_SETTINGS.SORT_OPTIONS,
-  UI_SETTINGS.DATAFRAME_HYDRATION_STRATEGY,
+  UI_SETTINGS.QUERY_DATAFRAME_HYDRATION_STRATEGY,
 ];
 
 export interface SearchSourceDependencies extends FetchHandlers {

diff --git a/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx b/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx
@@ -23,7 +23,7 @@ interface IDataSelectorRefresherProps {
 export const DataSelectorRefresher: React.FC<IDataSelectorRefresherProps> = React.memo(
   ({ tooltipText, onRefresh, buttonProps, toolTipProps }) => {
     return (
-      <EuiText size="s">
+      <EuiText size="s" className="sourceRefreshText">
         <EuiToolTip
           position="right"
           content={i18n.translate('data.datasource.selector.refreshDataSources', {
@@ -34,10 +34,10 @@ export const DataSelectorRefresher: React.FC<IDataSelectorRefresherProps> = Reac
           {...toolTipProps}
         >
           <EuiButtonIcon
-            size="s"
             onClick={onRefresh}
             iconType="refresh"
             aria-label="sourceRefresh"
+            className="sourceRefreshButton"
             data-test-subj="sourceRefreshButton"
             {...buttonProps}
           />

diff --git a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
@@ -162,6 +162,7 @@ export const DataSourceSelectable = ({
   return (
     <EuiComboBox
       {...comboBoxProps}
+      className="dataExplorerDSSelect"
       data-test-subj="dataExplorerDSSelect"
       placeholder={i18n.translate('data.datasource.selectADatasource', {
         defaultMessage: DATA_SELECTOR_DEFAULT_PLACEHOLDER,

diff --git a/src/plugins/data/public/ui/query_editor/_language_selector.scss b/src/plugins/data/public/ui/query_editor/_language_selector.scss
@@ -3,12 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 .languageSelector {
-  max-width: 140px;
-  height: 100%;
-
-  &:first-child {
-    div:first-child {
-      height: 100%;
-    }
-  }
+  min-width: 140px;
+  border-bottom: $euiBorderThin !important;
 }
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -15,6 +15,28 @@
   // overflow: auto;
 }
 
+.osdQueryEditor__languageWrapper {
+  :first-child {
+    box-shadow: none !important;
+    height: 100%;
+    border-radius: 0;
+  }
+}
+
+.osdQueryEditor__dataSourceWrapper {
+  .dataExplorerDSSelect {
+    border-bottom: $euiBorderThin !important;
+
+    div:is([class$="--group"]) {
+      padding: 0 !important;
+    }
+
+    .sourceRefreshText {
+      max-height: 40px;
+    }
+  }
+}
+
 @include euiBreakpoint("xs", "s") {
   .osdQueryEditor--withDatePicker {
     > :first-child {

diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx
@@ -74,6 +74,7 @@ export const QueryLanguageSelector = (props: Props) => {
 
   return (
     <EuiComboBox
+      fullWidth
       className="languageSelector"
       data-test-subj="languageSelector"
       options={languageOptions}

diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -16,7 +16,7 @@ import {
 import { QuerySuggestion } from '../../autocomplete';
 import { fromUser, getQueryLog, PersistedLog, toUser } from '../../query';
 import { SuggestionsListSize } from '../typeahead/suggestions_component';
-import { DataSettings, QueryEnhancement } from '../types';
+import { DataSettings } from '../types';
 import { fetchIndexPatterns } from './fetch_index_patterns';
 import { QueryLanguageSelector } from './language_selector';
 
@@ -50,7 +50,7 @@ interface Props extends QueryEditorProps {
 }
 
 interface State {
-  queryEnhancements: Map<string, QueryEnhancement>;
+  isDataSourcesVisible: boolean;
   isSuggestionsVisible: boolean;
   index: number | null;
   suggestions: QuerySuggestion[];
@@ -75,7 +75,7 @@ const KEY_CODES = {
 // eslint-disable-next-line import/no-default-export
 export default class QueryEditorUI extends Component<Props, State> {
   public state: State = {
-    queryEnhancements: new Map(),
+    isDataSourcesVisible: true,
     isSuggestionsVisible: false,
     index: null,
     suggestions: [],
@@ -167,16 +167,16 @@ export default class QueryEditorUI extends Component<Props, State> {
       language,
     };
 
-    const fields = this.props.settings.getQueryEnhancements(newQuery.language)?.fields;
+    const enhancement = this.props.settings.getQueryEnhancements(newQuery.language);
+    const fields = enhancement?.fields;
     const newSettings: DataSettings = {
       userQueryLanguage: newQuery.language,
       userQueryString: newQuery.query,
       ...(fields && { uiOverrides: { fields } }),
     };
     this.props.settings?.updateSettings(newSettings);
 
-    const dateRangeEnhancement = this.props.settings.getQueryEnhancements(language)?.searchBar
-      ?.dateRange;
+    const dateRangeEnhancement = enhancement?.searchBar?.dateRange;
     const dateRange = dateRangeEnhancement
       ? {
           from: dateRangeEnhancement.initialFrom!,
@@ -185,6 +185,7 @@ export default class QueryEditorUI extends Component<Props, State> {
       : undefined;
     this.onChange(newQuery, dateRange);
     this.onSubmit(newQuery, dateRange);
+    this.setState({ isDataSourcesVisible: enhancement?.searchBar?.showDataSourceSelector ?? true });
   };
 
   private initPersistedLog = () => {
@@ -194,6 +195,15 @@ export default class QueryEditorUI extends Component<Props, State> {
       : getQueryLog(uiSettings, storage, appName, this.props.query.language);
   };
 
+  private initDataSourcesVisibility = () => {
+    if (this.componentIsUnmounting) return;
+
+    const isDataSourcesVisible =
+      this.props.settings.getQueryEnhancements(this.props.query.language)?.searchBar
+        ?.showDataSourceSelector ?? true;
+    this.setState({ isDataSourcesVisible });
+  };
+
   public onMouseEnterSuggestion = (index: number) => {
     this.setState({ index });
   };
@@ -208,6 +218,7 @@ export default class QueryEditorUI extends Component<Props, State> {
 
     this.initPersistedLog();
     // this.fetchIndexPatterns().then(this.updateSuggestions);
+    this.initDataSourcesVisibility();
     this.handleListUpdate();
 
     window.addEventListener('scroll', this.handleListUpdate, {
@@ -257,23 +268,21 @@ export default class QueryEditorUI extends Component<Props, State> {
       <div className={className}>
         <EuiFlexGroup gutterSize="xs" direction="column">
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="xs">
+            <EuiFlexGroup gutterSize="xs" alignItems="center" className={`${className}__wrapper`}>
               <EuiFlexItem grow={false}>{this.props.prepend}</EuiFlexItem>
-              <EuiFlexItem>
-                <EuiFlexGroup gutterSize="xs">
-                  <EuiFlexItem grow={false}>
-                    <div ref={this.props.containerRef} />
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={true}>
-                    <QueryLanguageSelector
-                      language={this.props.query.language}
-                      anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
-                      onSelectLanguage={this.onSelectLanguage}
-                      appName={this.services.appName}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
+              <EuiFlexItem grow={false} className={`${className}__languageWrapper`}>
+                <QueryLanguageSelector
+                  language={this.props.query.language}
+                  anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
+                  onSelectLanguage={this.onSelectLanguage}
+                  appName={this.services.appName}
+                />
               </EuiFlexItem>
+              {this.state.isDataSourcesVisible && (
+                <EuiFlexItem grow={false} className={`${className}__dataSourceWrapper`}>
+                  <div ref={this.props.containerRef} />
+                </EuiFlexItem>
+              )}
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem onClick={this.onClickInput} grow={true}>
@@ -294,6 +303,7 @@ export default class QueryEditorUI extends Component<Props, State> {
                 scrollBeyondLastLine: false,
                 wordWrap: 'on',
                 wrappingIndent: 'indent',
+                selectionHighlight: false,
               }}
             />
           </EuiFlexItem>

diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
@@ -244,6 +244,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
           onSubmit={onInputSubmit}
           getQueryStringInitialValue={getQueryStringInitialValue}
           persistedLog={persistedLog}
+          className="osdQueryEditor"
           dataTestSubj={props.dataTestSubj}
           queryEditorHeaderRef={queryEditorHeaderRef}
         />

diff --git a/src/plugins/data/public/ui/types.ts b/src/plugins/data/public/ui/types.ts
@@ -19,6 +19,7 @@ export interface QueryEnhancement {
   // Leave blank to support all data sources
   // supportedDataSourceTypes?: Record<string, GenericDataSource>;
   searchBar?: {
+    showDataSourceSelector?: boolean;
     showQueryInput?: boolean;
     showFilterBar?: boolean;
     showDatePicker?: boolean;