[Discover] Redesign for the grid, panels and sidebar v1

examples/unified_field_list_examples/public/field_list_sidebar.tsx

@@ -33,6 +33,8 @@ const getCreationOptions: UnifiedFieldListSidebarContainerProps['getCreationOpti
     originatingApp: PLUGIN_ID,
     localStorageKeyPrefix: 'examples',
     timeRangeUpdatesType: 'timefilter',
+    compressed: true,
+    showSidebarToggleButton: true,
     disablePopularFields: true,
   };
 };

packages/kbn-dom-drag-drop/src/drag_drop.test.tsx

@@ -119,6 +119,28 @@ describe('DragDrop', () => {
     });
   });
 
+  test('dragstart sets dragClassName as expected', async () => {
+    const dndDispatch = jest.fn();
+    const component = mount(
+      <ChildDragDropProvider value={[{ ...defaultContextState, dragging: undefined }, dndDispatch]}>
+        <DragDrop value={value} draggable={true} order={[2, 0, 1, 0]} dragClassName="dragTest">
+          <button>Hi!</button>
+        </DragDrop>
+      </ChildDragDropProvider>
+    );
+    const dragDrop = component.find('[data-test-subj="testDragDrop"]').at(0);
+
+    expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeNull();
+    dragDrop.simulate('dragstart', { dataTransfer });
+    expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeDefined();
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeNull();
+  });
+
   test('drop resets all the things', async () => {
     const preventDefault = jest.fn();
     const stopPropagation = jest.fn();

packages/kbn-dom-drag-drop/src/drag_drop.tsx

@@ -42,6 +42,10 @@ interface BaseProps {
    * The CSS class(es) for the root element.
    */
   className?: string;
+  /**
+   * CSS class to apply when the item is being dragged
+   */
+  dragClassName?: string;
 
   /**
    * The event handler that fires when an item
@@ -212,6 +216,7 @@ const removeSelection = () => {
 const DragInner = memo(function DragInner({
   dataTestSubj,
   className,
+  dragClassName,
   value,
   children,
   dndDispatch,
@@ -305,6 +310,18 @@ const DragInner = memo(function DragInner({
       // so we know we have DraggableProps if we reach this code.
       if (e && 'dataTransfer' in e) {
         e.dataTransfer.setData('text', value.humanData.label);
+
+        // Apply an optional class to the element being dragged so the ghost
+        // can be styled. We must add it to the actual element for a single
+        // frame before removing it so the ghost picks up the styling.
+        const current = e.currentTarget;
+
+        if (dragClassName && !current.classList.contains(dragClassName)) {
+          current.classList.add(dragClassName);
+          requestAnimationFrame(() => {
+            current.classList.remove(dragClassName);
+          });
+        }
       }
 
       // Chrome causes issues if you try to render from within a

packages/kbn-unified-data-table/src/components/data_table.scss

@@ -3,32 +3,6 @@
   max-width: 100%;
   height: 100%;
   overflow: hidden;
-  border-radius: $euiBorderRadius;
-
-  .euiDataGrid__controls {
-    border: none;
-    border-bottom: $euiBorderThin;
-  }
-
-  .euiDataGridRowCell.euiDataGridRowCell--firstColumn {
-    border-left: none;
-    padding: 0;
-  }
-
-  .euiDataGridRowCell.euiDataGridRowCell--lastColumn {
-    border-right: none;
-  }
-
-  .unifiedDataTable__table .euiDataGridRowCell:first-of-type,
-  .unifiedDataTable__table .euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell:first-of-type {
-    border-left: none;
-    border-right: none;
-  }
-
-  .euiDataGridRowCell:last-of-type,
-  .euiDataGridHeaderCell:last-of-type {
-    border-right: none;
-  }
 }
 
 .unifiedDataTable__cellValue {
@@ -57,6 +31,29 @@
   flex-direction: column;
   flex-wrap: nowrap;
   height: 100%;
+
+  .euiDataGrid__content {
+    background: transparent;
+  }
+
+  .euiDataGrid__controls {
+    border-top: $euiBorderThin;
+  }
+
+  .euiDataGrid--headerUnderline .euiDataGridHeaderCell {
+    border-bottom: $euiBorderThin;
+  }
+
+  .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='openDetails'],
+  .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='select'] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+    background-color: tintOrShade($euiColorLightShade, 50%, 0);
+  }
 }
 
 .unifiedDataTable__table {
@@ -65,14 +62,6 @@
   min-height: 0;
 }
 
-.unifiedDataTable__footer {
-  flex-shrink: 0;
-  background-color: $euiColorLightShade;
-  padding: $euiSize / 2 $euiSize;
-  margin-top: $euiSize / 4;
-  text-align: center;
-}
-
 .unifiedDataTable__flyoutHeader {
   white-space: nowrap;
 }
@@ -118,7 +107,35 @@
   @include euiTextTruncate;
 }
 
+.unifiedDataTable__rowControl {
+  // fine-tuning the vertical alignment with the text for any row height setting
+  margin-top: -3px;
+  .euiDataGridRowCell__truncate & { // "Single line" row height setting
+    margin-top: 0;
+  }
+}
+
+.unifiedDataTable__descriptionList {
+  // force the content truncation when "Single line" row height setting is active
+  .euiDataGridRowCell__truncate & {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+.unifiedDataTable__descriptionListTitle {
+  margin-inline: 0 0;
+  padding-inline: 0;
+  background: transparent;
+  font-weight: $euiFontWeightBold;
+}
+
 .unifiedDataTable__descriptionListDescription {
+  margin-inline: $euiSizeS $euiSizeS;
+  padding-inline: 0;
   word-break: break-all;
   white-space: normal;
 

packages/kbn-unified-data-table/src/components/data_table_columns.test.tsx

@@ -218,7 +218,7 @@ describe('Data table columns', function () {
             </div>,
             "displayAsText": "timestamp",
             "id": "timestamp",
-            "initialWidth": 210,
+            "initialWidth": 212,
             "isSortable": true,
             "schema": "datetime",
             "visibleCellActions": undefined,
@@ -406,7 +406,7 @@ describe('Data table columns', function () {
             </div>,
             "displayAsText": "timestamp",
             "id": "timestamp",
-            "initialWidth": 210,
+            "initialWidth": 212,
             "isSortable": true,
             "schema": "datetime",
             "visibleCellActions": undefined,

packages/kbn-unified-data-table/src/components/data_table_columns.tsx

@@ -30,7 +30,7 @@ import { buildEditFieldButton } from './build_edit_field_button';
 
 const openDetails = {
   id: 'openDetails',
-  width: 24,
+  width: 26,
   headerCellRender: () => (
     <EuiScreenReaderOnly>
       <span>

packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx

@@ -15,14 +15,19 @@ import {
   EuiCopy,
   EuiDataGridCellValueElementProps,
   EuiPopover,
+  EuiFlexGroup,
+  EuiFlexItem,
+  useEuiTheme,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { euiDarkVars as themeDark, euiLightVars as themeLight } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import { UnifiedDataTableContext } from '../table_context';
 
 export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueElementProps) => {
+  const { euiTheme } = useEuiTheme();
   const { selectedDocs, expanded, rows, isDarkMode, setSelectedDocs } =
     useContext(UnifiedDataTableContext);
   const doc = useMemo(() => rows[rowIndex], [rows, rowIndex]);
@@ -46,20 +51,33 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   }, [expanded, doc, setCellProps, isDarkMode]);
 
   return (
-    <EuiCheckbox
-      id={doc.id}
-      aria-label={toggleDocumentSelectionLabel}
-      checked={checked}
-      data-test-subj={`dscGridSelectDoc-${doc.id}`}
-      onChange={() => {
-        if (checked) {
-          const newSelection = selectedDocs.filter((docId) => docId !== doc.id);
-          setSelectedDocs(newSelection);
-        } else {
-          setSelectedDocs([...selectedDocs, doc.id]);
-        }
-      }}
-    />
+    <EuiFlexGroup
+      responsive={false}
+      direction="column"
+      justifyContent="center"
+      className="unifiedDataTable__rowControl"
+      css={css`
+        padding-block: ${euiTheme.size.xs}; // to have the same height as "openDetails" control
+        padding-left: ${euiTheme.size.xs}; // space between controls
+      `}
+    >
+      <EuiFlexItem grow={false}>
+        <EuiCheckbox
+          id={doc.id}
+          aria-label={toggleDocumentSelectionLabel}
+          checked={checked}
+          data-test-subj={`dscGridSelectDoc-${doc.id}`}
+          onChange={() => {
+            if (checked) {
+              const newSelection = selectedDocs.filter((docId) => docId !== doc.id);
+              setSelectedDocs(newSelection);
+            } else {
+              setSelectedDocs([...selectedDocs, doc.id]);
+            }
+          }}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 

packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx

@@ -62,23 +62,25 @@ export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   }
 
   return (
-    <EuiToolTip content={buttonLabel} delay="long" ref={toolTipRef}>
-      <EuiButtonIcon
-        id={rowIndex === 0 ? tourStep : undefined}
-        size="xs"
-        iconSize="s"
-        aria-label={buttonLabel}
-        data-test-subj={testSubj}
-        onClick={() => {
-          const nextHit = isCurrentRowExpanded ? undefined : current;
-          toolTipRef.current?.hideToolTip();
-          setPressed(Boolean(nextHit));
-          setExpanded?.(nextHit);
-        }}
-        color={isCurrentRowExpanded ? 'primary' : 'text'}
-        iconType={isCurrentRowExpanded ? 'minimize' : 'expand'}
-        isSelected={isCurrentRowExpanded}
-      />
-    </EuiToolTip>
+    <div className="unifiedDataTable__rowControl">
+      <EuiToolTip content={buttonLabel} delay="long" ref={toolTipRef}>
+        <EuiButtonIcon
+          id={rowIndex === 0 ? tourStep : undefined}
+          size="xs"
+          iconSize="s"
+          aria-label={buttonLabel}
+          data-test-subj={testSubj}
+          onClick={() => {
+            const nextHit = isCurrentRowExpanded ? undefined : current;
+            toolTipRef.current?.hideToolTip();
+            setPressed(Boolean(nextHit));
+            setExpanded?.(nextHit);
+          }}
+          color={isCurrentRowExpanded ? 'primary' : 'text'}
+          iconType={isCurrentRowExpanded ? 'minimize' : 'expand'}
+          isSelected={isCurrentRowExpanded}
+        />
+      </EuiToolTip>
+    </div>
   );
 };

packages/kbn-unified-data-table/src/constants.ts

@@ -13,15 +13,17 @@ export const MAX_LOADED_GRID_ROWS = 10000;
 export const ROWS_PER_PAGE_OPTIONS = [10, 25, 50, DEFAULT_ROWS_PER_PAGE, 250, 500];
 
 export const defaultMonacoEditorWidth = 370;
-export const defaultTimeColumnWidth = 210;
+export const defaultTimeColumnWidth = 212;
 export const kibanaJSON = 'kibana-json';
 
-export const GRID_STYLE = {
-  border: 'all',
+export const GRID_STYLE: EuiDataGridStyle = {
+  border: 'horizontal',
   fontSize: 's',
-  cellPadding: 's',
-  rowHover: 'none',
-} as EuiDataGridStyle;
+  cellPadding: 'l',
+  rowHover: 'highlight',
+  header: 'underline',
+  stripes: true,
+};
 
 export const toolbarVisibility = {
   showColumnSelector: {