[Discover] Update tabs styles. Better placement for callouts. Fix for…

… the legacy table.
elastic · Oct 17, 2023 · 1c0cad1 · 1c0cad1
1 parent c6329f7
commit 1c0cad1
Show file tree

Hide file tree

Showing 10 changed files with 508 additions and 313 deletions.
diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -54,10 +54,6 @@
   .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
     background-color: tintOrShade($euiColorLightShade, 50%, 0);
   }
-
-  .euiDataGrid__scrollOverlay .euiDataGrid__scrollBarOverlayRight {
-    background-color: transparent; // otherwise the grid scrollbar border visually conflicts with the grid toolbar controls
-  }
 }
 
 .unifiedDataTable__table {

diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
@@ -200,8 +200,9 @@ export function DataTableDocumentToolbarBtn({
           <EuiFlexGroup responsive={false} direction="row" alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>
               <FormattedMessage
-                id="unifiedDataTable.selectedDocumentsButtonLabel"
-                defaultMessage="Selected documents"
+                id="unifiedDataTable.selectedRowsButtonLabel"
+                defaultMessage="Selected"
+                description="Selected documents"
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
@@ -13,6 +13,7 @@ import {
   EuiScreenReaderOnly,
   EuiSpacer,
   EuiText,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
@@ -38,6 +39,8 @@ import {
   SHOW_MULTIFIELDS,
   SORT_DEFAULT_ORDER_SETTING,
 } from '@kbn/discover-utils';
+import { i18n } from '@kbn/i18n';
+import useObservable from 'react-use/lib/useObservable';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { DiscoverGrid } from '../../../../components/discover_grid';
 import { getDefaultRowsPerPage } from '../../../../../common/constants';
@@ -60,6 +63,8 @@ import { DiscoverGridFlyout } from '../../../../components/discover_grid_flyout'
 import { getRenderCustomToolbarWithViewModeToggle } from '../../../../components/discover_grid/render_custom_toolbar';
 import { useSavedSearchInitial } from '../../services/discover_state_provider';
 import { useFetchMoreRecords } from './use_fetch_more_records';
+import { ErrorCallout } from '../../../../components/common/error_callout';
+import { SelectedVSAvailableCallout } from './selected_vs_available_callout';
 
 const containerStyles = css`
   position: relative;
@@ -243,20 +248,96 @@ function DiscoverDocumentsComponent({
     [dataView, onAddColumn, onAddFilter, onRemoveColumn, query, savedSearch.id, setExpandedDoc]
   );
 
+  const dataState = useDataState(stateContainer.dataState.data$.main$);
+  const documents = useObservable(stateContainer.dataState.data$.documents$);
+
+  const callouts = useMemo(
+    () => (
+      <>
+        {dataState.error && (
+          <ErrorCallout
+            title={i18n.translate('discover.documentsErrorTitle', {
+              defaultMessage: 'Search error',
+            })}
+            error={dataState.error}
+            inline
+            data-test-subj="discoverMainError"
+          />
+        )}
+        <SelectedVSAvailableCallout
+          isPlainRecord={isTextBasedQuery}
+          textBasedQueryColumns={documents?.textBasedQueryColumns}
+          selectedColumns={currentColumns}
+        />
+        {!!documentState.interceptedWarnings?.length && (
+          <SearchResponseWarnings
+            variant="callout"
+            interceptedWarnings={documentState.interceptedWarnings}
+            data-test-subj="dscInterceptedWarningsCallout"
+          />
+        )}
+      </>
+    ),
+    [
+      dataState.error,
+      isTextBasedQuery,
+      currentColumns,
+      documents?.textBasedQueryColumns,
+      documentState.interceptedWarnings,
+    ]
+  );
+
+  const gridAnnouncementCallout = useMemo(() => {
+    if (hideAnnouncements || isLegacy) {
+      return null;
+    }
+
+    return !isTextBasedQuery ? (
+      <DiscoverTourProvider isPlainRecord={isTextBasedQuery}>
+        <DocumentExplorerUpdateCallout />
+      </DiscoverTourProvider>
+    ) : null;
+  }, [hideAnnouncements, isLegacy, isTextBasedQuery]);
+
+  const loadingIndicator = useMemo(
+    () =>
+      isDataLoading ? (
+        <EuiProgress
+          data-test-subj="discoverDataGridUpdating"
+          size="xs"
+          color="accent"
+          position="absolute"
+          css={progressStyle}
+        />
+      ) : null,
+    [isDataLoading]
+  );
+
   const renderCustomToolbar = useMemo(
-    () => getRenderCustomToolbarWithViewModeToggle(viewModeToggle),
-    [viewModeToggle]
+    () =>
+      getRenderCustomToolbarWithViewModeToggle(
+        viewModeToggle,
+        <>
+          {callouts}
+          {gridAnnouncementCallout}
+          {loadingIndicator}
+        </>
+      ),
+    [viewModeToggle, callouts, gridAnnouncementCallout, loadingIndicator]
   );
 
   if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) {
     return (
-      <div className="dscDocuments__loading">
-        <EuiText size="xs" color="subdued">
-          <EuiLoadingSpinner />
-          <EuiSpacer size="s" />
-          <FormattedMessage id="discover.loadingDocuments" defaultMessage="Loading documents" />
-        </EuiText>
-      </div>
+      <>
+        <EuiHorizontalRule />
+        <div className="dscDocuments__loading">
+          <EuiText size="xs" color="subdued">
+            <EuiLoadingSpinner />
+            <EuiSpacer size="s" />
+            <FormattedMessage id="discover.loadingDocuments" defaultMessage="Loading documents" />
+          </EuiText>
+        </div>
+      </>
     );
   }
 
@@ -267,42 +348,39 @@ function DiscoverDocumentsComponent({
           <FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" />
         </h2>
       </EuiScreenReaderOnly>
-      {!!documentState.interceptedWarnings?.length && (
-        <SearchResponseWarnings
-          variant="callout"
-          interceptedWarnings={documentState.interceptedWarnings}
-          data-test-subj="dscInterceptedWarningsCallout"
-        />
-      )}
-      {isLegacy && rows && rows.length > 0 && (
+      {isLegacy && (
         <>
-          {!hideAnnouncements && <DocumentExplorerCallout />}
-          <DocTableInfiniteMemoized
-            columns={currentColumns}
-            dataView={dataView}
-            rows={rows}
-            sort={sort || []}
-            isLoading={isDataLoading}
-            searchDescription={savedSearch.description}
-            sharedItemTitle={savedSearch.title}
-            isPlainRecord={isTextBasedQuery}
-            onAddColumn={onAddColumn}
-            onFilter={onAddFilter as DocViewFilterFn}
-            onMoveColumn={onMoveColumn}
-            onRemoveColumn={onRemoveColumn}
-            onSort={!isTextBasedQuery ? onSort : undefined}
-            useNewFieldsApi={useNewFieldsApi}
-            dataTestSubj="discoverDocTable"
-          />
+          <EuiFlexItem grow={false}>{viewModeToggle}</EuiFlexItem>
+          <div className="dscTable__legacyDocsTab">
+            {callouts}
+            {rows && rows.length > 0 && (
+              <>
+                {!hideAnnouncements && <DocumentExplorerCallout />}
+                <DocTableInfiniteMemoized
+                  columns={currentColumns}
+                  dataView={dataView}
+                  rows={rows}
+                  sort={sort || []}
+                  isLoading={isDataLoading}
+                  searchDescription={savedSearch.description}
+                  sharedItemTitle={savedSearch.title}
+                  isPlainRecord={isTextBasedQuery}
+                  onAddColumn={onAddColumn}
+                  onFilter={onAddFilter as DocViewFilterFn}
+                  onMoveColumn={onMoveColumn}
+                  onRemoveColumn={onRemoveColumn}
+                  onSort={!isTextBasedQuery ? onSort : undefined}
+                  useNewFieldsApi={useNewFieldsApi}
+                  dataTestSubj="discoverDocTable"
+                />
+              </>
+            )}
+            {loadingIndicator}
+          </div>
         </>
       )}
       {!isLegacy && (
         <>
-          {!hideAnnouncements && !isTextBasedQuery && (
-            <DiscoverTourProvider isPlainRecord={isTextBasedQuery}>
-              <DocumentExplorerUpdateCallout />
-            </DiscoverTourProvider>
-          )}
           <div className="unifiedDataTable">
             <CellActionsProvider
               getTriggerCompatibleActions={uiActions.getTriggerCompatibleActions}
@@ -354,15 +432,6 @@ function DiscoverDocumentsComponent({
           </div>
         </>
       )}
-      {isDataLoading && (
-        <EuiProgress
-          data-test-subj="discoverDataGridUpdating"
-          size="xs"
-          color="accent"
-          position="absolute"
-          css={progressStyle}
-        />
-      )}
     </EuiFlexItem>
   );
 }

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss
@@ -53,10 +53,6 @@ discover-app {
   position: relative;
   overflow: hidden;
   height: 100%;
-
-  .euiDataGrid__controls {
-    border-top: none;
-  }
 }
 
 .dscPageContent--centered {
@@ -73,6 +69,10 @@ discover-app {
   min-height: 0;
 }
 
+.dscTable__legacyDocsTab {
+  position: relative; // for placing a loading indicator correctly
+}
+
 .dscDocuments__loading {
   display: flex;
   flex-direction: column;

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx b/src/plugins/discover/public/application/main/components/layout/discover_main_content.tsx
@@ -8,8 +8,7 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { DragDrop, type DropType, DropOverlayWrapper } from '@kbn/dom-drag-drop';
-import useObservable from 'react-use/lib/useObservable';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
@@ -21,9 +20,6 @@ import { DiscoverStateContainer } from '../../services/discover_state';
 import { FieldStatisticsTab } from '../field_stats_table';
 import { DiscoverDocuments } from './discover_documents';
 import { DOCUMENTS_VIEW_CLICK, FIELD_STATISTICS_VIEW_CLICK } from '../field_stats_table/constants';
-import { ErrorCallout } from '../../../../components/common/error_callout';
-import { useDataState } from '../../hooks/use_data_state';
-import { SelectedVSAvailableCallout } from './selected_vs_available_callout';
 
 const DROP_PROPS = {
   value: {
@@ -76,13 +72,13 @@ export const DiscoverMainContent = ({
     [trackUiMetric, stateContainer]
   );
 
-  const dataState = useDataState(stateContainer.dataState.data$.main$);
-  const documents = useObservable(stateContainer.dataState.data$.documents$);
   const isDropAllowed = Boolean(onDropFieldToTable);
 
-  const viewModeToggle = !isPlainRecord ? (
-    <DocumentViewModeToggle viewMode={viewMode} setDiscoverViewMode={setDiscoverViewMode} />
-  ) : undefined;
+  const viewModeToggle = useMemo(() => {
+    return !isPlainRecord ? (
+      <DocumentViewModeToggle viewMode={viewMode} setDiscoverViewMode={setDiscoverViewMode} />
+    ) : undefined;
+  }, [viewMode, setDiscoverViewMode, isPlainRecord]);
 
   return (
     <DragDrop
@@ -100,25 +96,6 @@ export const DiscoverMainContent = ({
           responsive={false}
           data-test-subj="dscMainContent"
         >
-          {viewMode === VIEW_MODE.AGGREGATED_LEVEL && (
-            <EuiFlexItem grow={false}>{viewModeToggle}</EuiFlexItem>
-          )}
-          {dataState.error && (
-            <ErrorCallout
-              title={i18n.translate('discover.documentsErrorTitle', {
-                defaultMessage: 'Search error',
-              })}
-              error={dataState.error}
-              inline
-              data-test-subj="discoverMainError"
-            />
-          )}
-          <SelectedVSAvailableCallout
-            isPlainRecord={isPlainRecord}
-            textBasedQueryColumns={documents?.textBasedQueryColumns}
-            selectedColumns={columns}
-          />
-
           {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? (
             <DiscoverDocuments
               viewModeToggle={viewModeToggle}
@@ -128,13 +105,16 @@ export const DiscoverMainContent = ({
               onFieldEdited={!isPlainRecord ? onFieldEdited : undefined}
             />
           ) : (
-            <FieldStatisticsTab
-              dataView={dataView}
-              columns={columns}
-              stateContainer={stateContainer}
-              onAddFilter={!isPlainRecord ? onAddFilter : undefined}
-              trackUiMetric={trackUiMetric}
-            />
+            <>
+              <EuiFlexItem grow={false}>{viewModeToggle}</EuiFlexItem>
+              <FieldStatisticsTab
+                dataView={dataView}
+                columns={columns}
+                stateContainer={stateContainer}
+                onAddFilter={!isPlainRecord ? onAddFilter : undefined}
+                trackUiMetric={trackUiMetric}
+              />
+            </>
           )}
         </EuiFlexGroup>
       </DropOverlayWrapper>