Cleanup styling and pre-work for data source selecotr (#6888)

Some clean ups related to the styling still working on making the data source selector piece. Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
opensearch-project · Jun 3, 2024 · 5b180dc · 5b180dc
1 parent 05d399a
commit 5b180dc
Show file tree

Hide file tree

Showing 16 changed files with 95 additions and 4,533 deletions.
diff --git a/plugins-extra/.gitignore b/plugins-extra/.gitignore
@@ -1,2 +1,2 @@
-target
+/target
 /build
diff --git a/plugins-extra/query_enhancements/target/public/.osd-optimizer-cache b/plugins-extra/query_enhancements/target/public/.osd-optimizer-cache
diff --git a/plugins-extra/query_enhancements/target/public/queryEnhancements.plugin.js b/plugins-extra/query_enhancements/target/public/queryEnhancements.plugin.js
diff --git a/plugins-extra/query_enhancements/target/public/queryEnhancements.plugin.js.map b/plugins-extra/query_enhancements/target/public/queryEnhancements.plugin.js.map
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
@@ -114,7 +114,7 @@ const consolidateDataSourceGroups = (
 /**
  * @experimental This component is experimental and might change in future releases.
  */
-export const DataSourceSelectable = ({
+export const DataSourceSelectable: React.FC<DataSourceSelectableProps> = ({
   dataSources, // list of all available datasource connections.
   dataSourceOptionList, // combo box renderable option list derived from dataSources
   selectedSources, // current selected datasource in the form of [{ label: xxx, value: xxx }]

diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
@@ -439,6 +439,7 @@ export {
   QueryStringInputProps,
   // for BWC, keeping the old name
   IUiStart as DataPublicPluginStartUi,
+  IUiSetup as DataPublicPluginSetupUi,
 } from './ui';
 
 /**

diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -1,7 +1,6 @@
 // SASSTODO: Probably not the right file for this selector, but temporary until the files get re-organized
 .globalQueryBar {
   padding: 0 $euiSizeS $euiSizeS $euiSizeS;
-  height: 160px;
 }
 
 .globalQueryBar:first-child {

diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts
@@ -28,7 +28,14 @@
  * under the License.
  */
 
-export { UiEnhancements, IUiStart, createSettings, Settings, DataSettings } from './types';
+export {
+  UiEnhancements,
+  IUiStart,
+  IUiSetup,
+  createSettings,
+  Settings,
+  DataSettings,
+} from './types';
 export { IndexPatternSelectProps } from './index_pattern_select';
 export { FilterLabel } from './filter_bar';
 export { QueryStringInput, QueryStringInputProps } from './query_string_input';

diff --git a/src/plugins/data/public/ui/mocks.ts b/src/plugins/data/public/ui/mocks.ts
@@ -37,6 +37,7 @@ function createStartContract(isEnhancementsEnabled: boolean = false): jest.Mocke
     IndexPatternSelect: jest.fn(),
     SearchBar: jest.fn(),
     Settings: new SettingsMock(createMockStorage(), queryEnhancements),
+    setDataSourceSelectMountPoint: jest.fn(),
   };
 }
 

diff --git a/src/plugins/data/public/ui/query_editor/index.tsx b/src/plugins/data/public/ui/query_editor/index.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { withOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import type { QueryEditorTopRowProps } from './query_editor_top_row';
-import type { QueryStringInputProps } from './query_editor';
+import type { QueryEditorProps } from './query_editor';
 
 const Fallback = () => <div />;
 
@@ -17,10 +17,10 @@ export const QueryEditorTopRow = (props: QueryEditorTopRowProps) => (
   </React.Suspense>
 );
 
-const LazyQueryStringInputUI = withOpenSearchDashboards(React.lazy(() => import('./query_editor')));
-export const QueryStringInput = (props: QueryStringInputProps) => (
+const LazyQueryEditorUI = withOpenSearchDashboards(React.lazy(() => import('./query_editor')));
+export const QueryEditor = (props: QueryEditorProps) => (
   <React.Suspense fallback={<Fallback />}>
-    <LazyQueryStringInputUI {...props} />
+    <LazyQueryEditorUI {...props} />
   </React.Suspense>
 );
-export type { QueryStringInputProps };
+export type { QueryEditorProps };
diff --git a/src/plugins/data/public/ui/query_editor/language_switcher.tsx b/src/plugins/data/public/ui/query_editor/language_switcher.tsx
@@ -53,7 +53,7 @@ export function QueryLanguageSwitcher(props: Props) {
         !enhancement.supportedAppNames.includes(props.appName)
       )
         return;
-      languageOptions.push(mapExternalLanguageToOptions(enhancement.language));
+      languageOptions.unshift(mapExternalLanguageToOptions(enhancement.language));
     });
   }
 

diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -34,11 +34,12 @@ import { SuggestionsListSize } from '../typeahead/suggestions_component';
 import { Settings } from '..';
 import { DataSettings, QueryEnhancement } from '../types';
 
-export interface QueryStringInputProps {
+export interface QueryEditorProps {
   indexPatterns: Array<IIndexPattern | string>;
   query: Query;
   isEnhancementsEnabled?: boolean;
   queryEnhancements?: Map<string, QueryEnhancement>;
+  containerRef?: React.RefObject<HTMLDivElement>;
   settings?: Settings;
   disableAutoFocus?: boolean;
   screenTitle?: string;
@@ -58,7 +59,7 @@ export interface QueryStringInputProps {
   isInvalid?: boolean;
 }
 
-interface Props extends QueryStringInputProps {
+interface Props extends QueryEditorProps {
   opensearchDashboards: OpenSearchDashboardsReactContextValue<IDataPluginServices>;
 }
 
@@ -88,7 +89,7 @@ const KEY_CODES = {
 // Needed for React.lazy
 // TODO: MQL export this and let people extended this
 // eslint-disable-next-line import/no-default-export
-export default class QueryStringInputUI extends Component<Props, State> {
+export default class QueryEditorUI extends Component<Props, State> {
   public state: State = {
     isSuggestionsVisible: false,
     index: null,
@@ -497,20 +498,11 @@ export default class QueryStringInputUI extends Component<Props, State> {
         {!!this.props.isEnhancementsEnabled && (
           <EuiFlexGroup gutterSize="xs" direction="column">
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup>
-                <EuiFlexItem>{this.props.prepend}</EuiFlexItem>
-                {/* <EuiFlexItem>
-                  <DataSourceSelectable
-                    dataSources={activeDataSources}
-                    dataSourceOptionList={dataSourceOptionList}
-                    setDataSourceOptionList={setDataSourceOptionList}
-                    onDataSourceSelect={handleSourceSelection}
-                    selectedSources={selectedSources}
-                    onGetDataSetError={handleGetDataSetError}
-                    onRefresh={memorizedReload}
-                    fullWidth
-                  />
-                </EuiFlexItem> */}
+              <EuiFlexGroup gutterSize="s">
+                <EuiFlexItem grow={false}>{this.props.prepend}</EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <div />
+                </EuiFlexItem>
                 <EuiFlexItem>
                   <QueryLanguageSwitcher
                     language={this.props.query.language}
@@ -524,13 +516,14 @@ export default class QueryStringInputUI extends Component<Props, State> {
             <EuiFlexItem grow={true}>
               <CodeEditor
                 height={70}
-                languageId="json"
+                languageId="markdown"
                 value={this.getQueryString()}
                 onChange={() => {}}
                 options={{
-                  readOnly: true,
                   lineNumbers: 'on',
+                  lineHeight: 20,
                   fontSize: 12,
+                  fontFamily: 'Roboto Mono',
                   minimap: {
                     enabled: false,
                   },

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
@@ -21,19 +21,20 @@ import {
   useOpenSearchDashboards,
   withOpenSearchDashboards,
 } from '../../../../opensearch_dashboards_react/public';
-import QueryStringInputUI from './query_editor';
+import QueryEditortUI from './query_editor';
 import { UI_SETTINGS } from '../../../common';
 import { PersistedLog, fromUser, getQueryLog } from '../../query';
 import { NoDataPopover } from './no_data_popover';
 import { QueryEnhancement, Settings } from '../types';
 
-const QueryStringInput = withOpenSearchDashboards(QueryStringInputUI);
+const QueryEditor = withOpenSearchDashboards(QueryEditortUI);
 
 // @internal
 export interface QueryEditorTopRowProps {
   query?: Query;
   isEnhancementsEnabled?: boolean;
   queryEnhancements?: Map<string, QueryEnhancement>;
+  containerRef?: React.RefObject<HTMLDivElement>;
   settings?: Settings;
   onSubmit: (payload: { dateRange: TimeRange; query?: Query }) => void;
   onChange: (payload: { dateRange: TimeRange; query?: Query }) => void;
@@ -53,6 +54,7 @@ export interface QueryEditorTopRowProps {
   showAutoRefreshOnly?: boolean;
   onRefreshChange?: (options: { isPaused: boolean; refreshInterval: number }) => void;
   customSubmitButton?: any;
+  filterBar?: any;
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
   indicateNoData?: boolean;
@@ -220,13 +222,14 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     if (!shouldRenderQueryEditor()) return;
     return (
       <EuiFlexItem>
-        <QueryStringInput
+        <QueryEditor
           disableAutoFocus={props.disableAutoFocus}
           indexPatterns={props.indexPatterns!}
           prepend={props.prepend}
           query={parsedQuery}
           isEnhancementsEnabled={props.isEnhancementsEnabled}
           queryEnhancements={props.queryEnhancements}
+          containerRef={props.containerRef}
           settings={props.settings}
           screenTitle={props.screenTitle}
           onChange={onQueryChange}
@@ -358,11 +361,17 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
       className={classes}
       responsive={!!props.showDatePicker}
       gutterSize="s"
+      direction="column"
       justifyContent="flexEnd"
     >
       {renderQueryEditor()}
-      {renderSharingMetaFields()}
-      <EuiFlexItem grow={false}>{renderUpdateButton()}</EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFlexGroup responsive={false} gutterSize="none">
+          <EuiFlexItem grow={false}>{props.filterBar}</EuiFlexItem>
+          <EuiFlexItem>{renderSharingMetaFields()}</EuiFlexItem>
+          <EuiFlexItem grow={false}>{renderUpdateButton()}</EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 }

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -216,7 +216,6 @@ export function createSearchBar({
           query={query}
           isEnhancementsEnabled={isEnhancementsEnabled}
           queryEnhancements={queryEnhancements}
-          settings={settings}
           onFiltersUpdated={defaultFiltersUpdated(data.query)}
           onRefreshChange={defaultOnRefreshChange(data.query)}
           savedQuery={savedQuery}

diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -84,6 +84,7 @@ export interface SearchBarOwnProps {
   isEnhancementsEnabled?: boolean;
   queryEnhancements?: Map<string, QueryEnhancement>;
   settings?: Settings;
+  containerRef?: React.RefObject<HTMLDivElement>;
   // Show when user has privileges to save
   showSaveQuery?: boolean;
   savedQuery?: SavedQuery;
@@ -447,6 +448,36 @@ class SearchBarUI extends Component<SearchBarProps, State> {
       );
     }
 
+    let filterBar;
+    if (this.shouldRenderFilterBar()) {
+      const filterGroupClasses = classNames('globalFilterGroup__wrapper', {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'globalFilterGroup__wrapper-isVisible': this.state.isFiltersVisible,
+      });
+      filterBar = (
+        <div
+          id="GlobalFilterGroup"
+          ref={(node) => {
+            this.filterBarWrapperRef = node;
+          }}
+          className={filterGroupClasses}
+        >
+          <div
+            ref={(node) => {
+              this.filterBarRef = node;
+            }}
+          >
+            <FilterBar
+              className="globalFilterGroup__filterBar"
+              filters={this.props.filters!}
+              onFiltersUpdated={this.props.onFiltersUpdated}
+              indexPatterns={this.props.indexPatterns!}
+            />
+          </div>
+        </div>
+      );
+    }
+
     let queryEditor;
     if (this.shouldRenderQueryEditor()) {
       // TODO: MQL make this default query bar top row but this.props.queryEnhancements.get(language) can pass a component
@@ -455,6 +486,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           timeHistory={this.props.timeHistory}
           isEnhancementsEnabled={this.props.isEnhancementsEnabled}
           queryEnhancements={this.props.queryEnhancements}
+          containerRef={this.props.containerRef}
           settings={this.props.settings}
           query={this.state.query}
           screenTitle={this.props.screenTitle}
@@ -476,47 +508,18 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           customSubmitButton={
             this.props.customSubmitButton ? this.props.customSubmitButton : undefined
           }
+          filterBar={filterBar}
           dataTestSubj={this.props.dataTestSubj}
           indicateNoData={this.props.indicateNoData}
         />
       );
     }
 
-    let filterBar;
-    if (this.shouldRenderFilterBar()) {
-      const filterGroupClasses = classNames('globalFilterGroup__wrapper', {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        'globalFilterGroup__wrapper-isVisible': this.state.isFiltersVisible,
-      });
-      filterBar = (
-        <div
-          id="GlobalFilterGroup"
-          ref={(node) => {
-            this.filterBarWrapperRef = node;
-          }}
-          className={filterGroupClasses}
-        >
-          <div
-            ref={(node) => {
-              this.filterBarRef = node;
-            }}
-          >
-            <FilterBar
-              className="globalFilterGroup__filterBar"
-              filters={this.props.filters!}
-              onFiltersUpdated={this.props.onFiltersUpdated}
-              indexPatterns={this.props.indexPatterns!}
-            />
-          </div>
-        </div>
-      );
-    }
-
     return (
       <div className="globalQueryBar" data-test-subj="globalQueryBar">
         {queryBar}
         {queryEditor}
-        {filterBar}
+        {!!!this.props.isEnhancementsEnabled && filterBar}
 
         {this.state.showSaveQueryModal ? (
           <SaveQueryForm

diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -22,7 +22,7 @@ export const Sidebar: FC = ({ children }) => {
 
   const {
     services: {
-      data: { indexPatterns, dataSources },
+      data: { indexPatterns, dataSources, ui },
       notifications: { toasts },
       application,
     },
@@ -102,6 +102,21 @@ export const Sidebar: FC = ({ children }) => {
     dataSources.dataSourceService.reload();
   }, [dataSources.dataSourceService]);
 
+  const dataSourceSelectorRef = React.createRef();
+
+  const dataSourceSelector = (
+    <DataSourceSelectable
+      dataSources={activeDataSources}
+      dataSourceOptionList={dataSourceOptionList}
+      setDataSourceOptionList={setDataSourceOptionList}
+      onDataSourceSelect={handleSourceSelection}
+      selectedSources={selectedSources}
+      onGetDataSetError={handleGetDataSetError}
+      onRefresh={memorizedReload}
+      fullWidth
+    />
+  );
+
   return (
     <EuiPageSideBar className="deSidebar" sticky>
       <EuiSplitPanel.Outer
@@ -116,16 +131,7 @@ export const Sidebar: FC = ({ children }) => {
           color="transparent"
           className="deSidebar_dataSource"
         >
-          <DataSourceSelectable
-            dataSources={activeDataSources}
-            dataSourceOptionList={dataSourceOptionList}
-            setDataSourceOptionList={setDataSourceOptionList}
-            onDataSourceSelect={handleSourceSelection}
-            selectedSources={selectedSources}
-            onGetDataSetError={handleGetDataSetError}
-            onRefresh={memorizedReload}
-            fullWidth
-          />
+          {!!ui.isEnhancementsEnabled && dataSourceSelector}
         </EuiSplitPanel.Inner>
         <EuiSplitPanel.Inner paddingSize="none" color="transparent" className="eui-yScroll">
           {children}