Merge pull request #7 from davismcphee/davis-redesign-grid-toolbar

Replace resize handle with border, and small UI touchups
jughosta · Oct 19, 2023 · 22e9000 · 22e9000
2 parents 1651c8a + f636952
commit 22e9000
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 58 deletions.
diff --git a/packages/kbn-resizable-layout/src/panels_resizable.tsx b/packages/kbn-resizable-layout/src/panels_resizable.tsx
@@ -64,6 +64,17 @@ export const PanelsResizable = ({
     () => setResizeWithPortalsHackIsResizing(false),
     []
   );
+  const baseButtonCss = css`
+    background-color: transparent !important;
+    gap: 0 !important;
+
+    &:not(:hover):not(:focus) {
+      &:before,
+      &:after {
+        width: 0;
+      }
+    }
+  `;
   const defaultButtonCss = css`
     z-index: 3;
   `;
@@ -207,9 +218,10 @@ export const PanelsResizable = ({
           </EuiResizablePanel>
           <EuiResizableButton
             className={resizeButtonClassName}
-            css={
-              resizeWithPortalsHackIsResizing ? resizeWithPortalsHackButtonCss : defaultButtonCss
-            }
+            css={[
+              baseButtonCss,
+              resizeWithPortalsHackIsResizing ? resizeWithPortalsHackButtonCss : defaultButtonCss,
+            ]}
             data-test-subj={`${dataTestSubj}ResizableButton`}
           />
           <EuiResizablePanel

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,6 +54,10 @@
   .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/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
@@ -13,7 +13,6 @@ import {
   EuiScreenReaderOnly,
   EuiSpacer,
   EuiText,
-  EuiHorizontalRule,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
@@ -330,16 +329,13 @@ function DiscoverDocumentsComponent({
 
   if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) {
     return (
-      <>
-        <EuiHorizontalRule />
-        <div className="dscDocuments__loading">
-          <EuiText size="xs" color="subdued">
-            <EuiLoadingSpinner />
-            <EuiSpacer size="s" />
-            <FormattedMessage id="discover.loadingDocuments" defaultMessage="Loading documents" />
-          </EuiText>
-        </div>
-      </>
+      <div className="dscDocuments__loading">
+        <EuiText size="xs" color="subdued">
+          <EuiLoadingSpinner />
+          <EuiSpacer size="s" />
+          <FormattedMessage id="discover.loadingDocuments" defaultMessage="Loading documents" />
+        </EuiText>
+      </div>
     );
   }
 

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
@@ -32,16 +32,6 @@ discover-app {
   height: 100%;
 }
 
-.dscSidebarResizeButton {
-  background-color: transparent !important;
-
-  &:not(:hover):not(:focus) {
-    &:before, &:after {
-      width: 0;
-    }
-  }
-}
-
 .dscPageContent__wrapper {
   overflow: hidden; // Ensures horizontal scroll of table
   display: flex;

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
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import { DragDrop, type DropType, DropOverlayWrapper } from '@kbn/dom-drag-drop';
 import React, { useCallback, useMemo } from 'react';
 import { DataView } from '@kbn/data-views-plugin/common';
@@ -20,6 +20,7 @@ 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 { useAppStateSelector } from '../../services/discover_app_state_container';
 
 const DROP_PROPS = {
   value: {
@@ -80,6 +81,8 @@ export const DiscoverMainContent = ({
     ) : undefined;
   }, [viewMode, setDiscoverViewMode, isPlainRecord]);
 
+  const showChart = useAppStateSelector((state) => !state.hideChart);
+
   return (
     <DragDrop
       draggable={false}
@@ -96,6 +99,7 @@ export const DiscoverMainContent = ({
           responsive={false}
           data-test-subj="dscMainContent"
         >
+          {showChart && <EuiHorizontalRule margin="none" />}
           {viewMode === VIEW_MODE.DOCUMENT_LEVEL ? (
             <DiscoverDocuments
               viewModeToggle={viewModeToggle}

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx
@@ -71,7 +71,6 @@ export const DiscoverResizableLayout = ({
         minFlexPanelSize={minMainPanelWidth}
         fixedPanel={<OutPortal node={sidebarPanelNode} />}
         flexPanel={<OutPortal node={mainPanelNode} />}
-        resizeButtonClassName="dscSidebarResizeButton"
         data-test-subj="discoverLayout"
         onFixedPanelSizeChange={setSidebarWidth}
       />

diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss
@@ -1,6 +1,5 @@
 .dscGridToolbar {
   padding: $euiSizeS;
-  border-bottom: $euiBorderThin;
 }
 
 .dscGridToolbarControlButton .euiDataGrid__controlBtn {
@@ -33,7 +32,7 @@
 }
 
 .dscGridToolbarControlGroup {
-  border: $euiBorderThin;
+  box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor;
   border-radius: $euiBorderRadiusSmall;
   display: inline-flex;
   align-items: stretch;
@@ -57,10 +56,6 @@
   }
 }
 
-.dscGridToolbar .euiTabs {
-  transform: translateY(9px);
-}
-
 .dscGridToolbarBottom {
   position: relative; // for placing a loading indicator correctly
 }
diff --git a/src/plugins/discover/public/components/doc_table/_doc_table.scss b/src/plugins/discover/public/components/doc_table/_doc_table.scss
@@ -4,6 +4,7 @@
 // stylelint-disable selector-no-qualifying-type
 .kbnDocTableWrapper {
   @include euiScrollBar;
+  @include euiOverflowShadow;
   overflow: auto;
   display: flex;
   flex: 1 1 100%;

diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx
@@ -26,9 +26,13 @@ export const DocumentViewModeToggle = ({
   const isLegacy = useMemo(() => uiSettings.get(DOC_TABLE_LEGACY), [uiSettings]);
   const includesNormalTabsStyle = viewMode === VIEW_MODE.AGGREGATED_LEVEL || isLegacy;
 
+  const tabsPadding = includesNormalTabsStyle ? euiTheme.size.s : 0;
   const tabsCss = css`
-    padding: 0 ${includesNormalTabsStyle ? euiTheme.size.s : 0};
-    margin-top: ${includesNormalTabsStyle ? '17px' : 0};
+    padding: ${tabsPadding} ${tabsPadding} 0 ${tabsPadding};
+
+    .euiTab__content {
+      line-height: ${euiTheme.size.xl};
+    }
   `;
 
   const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false;
@@ -38,24 +42,17 @@ export const DocumentViewModeToggle = ({
   }
 
   return (
-    <EuiTabs
-      size="m"
-      css={tabsCss}
-      data-test-subj="dscViewModeToggle"
-      bottomBorder={includesNormalTabsStyle}
-    >
+    <EuiTabs size="m" css={tabsCss} data-test-subj="dscViewModeToggle" bottomBorder={false}>
       <EuiTab
         isSelected={viewMode === VIEW_MODE.DOCUMENT_LEVEL}
         onClick={() => setDiscoverViewMode(VIEW_MODE.DOCUMENT_LEVEL)}
-        className="dscViewModeToggle__tab"
         data-test-subj="dscViewModeDocumentButton"
       >
         <FormattedMessage id="discover.viewModes.document.label" defaultMessage="Documents" />
       </EuiTab>
       <EuiTab
         isSelected={viewMode === VIEW_MODE.AGGREGATED_LEVEL}
         onClick={() => setDiscoverViewMode(VIEW_MODE.AGGREGATED_LEVEL)}
-        className="dscViewModeToggle__tab"
         data-test-subj="dscViewModeFieldStatsButton"
       >
         <FormattedMessage

diff --git a/src/plugins/discover/public/embeddable/saved_search_embeddable_base.tsx b/src/plugins/discover/public/embeddable/saved_search_embeddable_base.tsx
@@ -45,23 +45,26 @@ export const SavedSearchEmbeddableBase: React.FC<SavedSearchEmbeddableBaseProps>
       data-test-subj={dataTestSubj}
     >
       {isLoading && <EuiProgress size="xs" color="accent" position="absolute" />}
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup
-          justifyContent="flexEnd"
-          alignItems="center"
-          gutterSize="xs"
-          responsive={false}
-          wrap={true}
-        >
-          {Boolean(prepend) && <EuiFlexItem grow={false}>{prepend}</EuiFlexItem>}
 
-          {!!totalHitCount && (
-            <EuiFlexItem grow={false} data-test-subj="toolBarTotalDocsText">
-              <TotalDocuments totalHitCount={totalHitCount} />
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </EuiFlexItem>
+      {(prepend || totalHitCount) && (
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup
+            justifyContent="flexEnd"
+            alignItems="center"
+            gutterSize="xs"
+            responsive={false}
+            wrap={true}
+          >
+            {Boolean(prepend) && <EuiFlexItem grow={false}>{prepend}</EuiFlexItem>}
+
+            {!!totalHitCount && (
+              <EuiFlexItem grow={false} data-test-subj="toolBarTotalDocsText">
+                <TotalDocuments totalHitCount={totalHitCount} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      )}
 
       <EuiFlexItem style={{ minHeight: 0 }}>{children}</EuiFlexItem>