Fix No data selected appearance (#8668)

Also: * Fix some React errors Signed-off-by: Miki <miki@amazon.com>
opensearch-project · Oct 19, 2024 · 7da5443 · 7da5443
1 parent a7414f0
commit 7da5443
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 56 deletions.
diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -88,8 +88,7 @@ const FilterOptionsUI = (props: Props) => {
   const uiSettings = opensearchDashboards.services.uiSettings;
   const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
   const useNewHeader = Boolean(uiSettings!.get(UI_SETTINGS.NEW_HOME_PAGE));
-  const [indexPattern] = props.indexPatterns;
-  const index = indexPattern && indexPattern.id;
+  const index = Array.isArray(props.indexPatterns) ? props.indexPatterns[0]?.id : undefined;
   const newFilter = buildEmptyFilter(isPinned, index);
 
   const togglePopover = () => {

diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
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
@@ -77,14 +77,22 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
             gutterSize="none"
             className="defaultEditor__footerRow"
           >
-            {footerItems.start?.map((item) => (
-              <EuiFlexItem grow={false} className="defaultEditor__footerItem">
+            {footerItems.start?.map((item, idx) => (
+              <EuiFlexItem
+                key={`defaultEditor__footerItem-start-${idx}`}
+                grow={false}
+                className="defaultEditor__footerItem"
+              >
                 {item}
               </EuiFlexItem>
             ))}
             <EuiFlexItem grow />
-            {footerItems.end?.map((item) => (
-              <EuiFlexItem grow={false} className="defaultEditor__footerItem">
+            {footerItems.end?.map((item, idx) => (
+              <EuiFlexItem
+                key={`defaultEditor__footerItem-end-${idx}`}
+                grow={false}
+                className="defaultEditor__footerItem"
+              >
                 {item}
               </EuiFlexItem>
             ))}

diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx
@@ -111,7 +111,6 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
       button={
         <EuiSmallButtonEmpty
           iconSide="right"
-          iconSize="s"
           onClick={onButtonClick}
           className="languageSelector__button"
           iconType="arrowDown"

diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -224,7 +224,8 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     const showDatePicker = this.props.showDatePicker || this.props.showAutoRefreshOnly;
     // TODO: MQL showQueryEditor should be a prop of it's own but using showQueryInput for now
     const showQueryEditor =
-      this.props.showQueryInput && this.props.indexPatterns && this.state.query;
+      (this.props.showQueryInput && this.props.indexPatterns && this.state.query) ||
+      this.props.datasetSelectorRef?.current;
     return this.props.showQueryBar && (showDatePicker || showQueryEditor);
   }
 

diff --git a/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.scss b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.scss
@@ -4,12 +4,8 @@
  */
 
 .discoverNoIndexPatterns-centerPanel {
-  height: 100%;
   width: 100%;
 
-  // Push the centralized child up, just like ouiOverlayMask
-  padding-bottom: 10vh;
-
   & > * {
     @include euiLegibilityMaxWidth(100%);
   }

diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
 import { DiscoverTable } from './discover_table';
@@ -143,41 +143,47 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
         showSaveQuery={showSaveQuery}
       />
 
-      {!indexPattern && <DiscoverNoIndexPatterns />}
-      <>
-        {fetchState.status === ResultStatus.NO_RESULTS && (
-          <DiscoverNoResults
-            queryString={data.query.queryString}
-            query={data.query.queryString.getQuery()}
-            savedQuery={data.query.savedQueries}
-            timeFieldName={timeField}
-          />
-        )}
-        {fetchState.status === ResultStatus.ERROR && (
-          <DiscoverNoResults
-            queryString={data.query.queryString}
-            query={data.query.queryString.getQuery()}
-            savedQuery={data.query.savedQueries}
-            timeFieldName={timeField}
-          />
-        )}
-        {fetchState.status === ResultStatus.UNINITIALIZED && (
-          <DiscoverUninitialized onRefresh={() => refetch$.next()} />
-        )}
-        {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
-        {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && (
-          <>
-            <MemoizedDiscoverChartContainer {...fetchState} />
-            <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
-          </>
-        )}
-        {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && (
-          <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
-            <MemoizedDiscoverChartContainer {...fetchState} />
-            <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
-          </EuiPanel>
-        )}
-      </>
+      {indexPattern ? (
+        <>
+          {fetchState.status === ResultStatus.NO_RESULTS && (
+            <DiscoverNoResults
+              queryString={data.query.queryString}
+              query={data.query.queryString.getQuery()}
+              savedQuery={data.query.savedQueries}
+              timeFieldName={timeField}
+            />
+          )}
+          {fetchState.status === ResultStatus.ERROR && (
+            <DiscoverNoResults
+              queryString={data.query.queryString}
+              query={data.query.queryString.getQuery()}
+              savedQuery={data.query.savedQueries}
+              timeFieldName={timeField}
+            />
+          )}
+          {fetchState.status === ResultStatus.UNINITIALIZED && (
+            <DiscoverUninitialized onRefresh={() => refetch$.next()} />
+          )}
+          {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
+          {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && (
+            <>
+              <MemoizedDiscoverChartContainer {...fetchState} />
+              <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+            </>
+          )}
+          {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && (
+            <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
+              <MemoizedDiscoverChartContainer {...fetchState} />
+              <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+            </EuiPanel>
+          )}
+        </>
+      ) : (
+        <>
+          <EuiSpacer size="xxl" />
+          <DiscoverNoIndexPatterns />
+        </>
+      )}
     </EuiPanel>
   );
 }

diff --git a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
@@ -171,6 +171,7 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
         groupActions={showActionsInGroup}
         screenTitle={screenTitle}
         queryStatus={queryStatus}
+        showQueryBar={!!opts?.optionalRef?.datasetSelectorRef}
       />
     </>
   );