[DATA GRID] EuiGridToolBar toolbar is now configurable through props

src-docs/src/views/datagrid/datagrid.js

@@ -238,6 +238,10 @@ export default () => {
         renderCellValue={renderCellValue}
         {...inMemoryProps}
         sorting={{ columns: sortingColumns, onSort }}
+        toolbarDisplay={{
+          showFullscrenSelector: false,
+          showSortSelector: true,
+        }}
         pagination={{
           ...pagination,
           pageSizeOptions: [10, 25, 50, 100],

src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -178,6 +178,7 @@ Array [
     >
       <div
         class="euiDataGrid__controls"
+        data-test-sub="dataGridControls"
       >
         <div
           class="euiPopover euiPopover--anchorDownLeft"
@@ -188,6 +189,7 @@ Array [
           >
             <button
               class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiDataGrid__controlBtn"
+              data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
               <span
@@ -220,6 +222,7 @@ Array [
           >
             <button
               class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiDataGrid__controlBtn"
+              data-test-subj="dataGridStyleSelectorButton"
               type="button"
             >
               <span
@@ -245,6 +248,7 @@ Array [
         </div>
         <button
           class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiDataGrid__controlBtn testClass1 testClass2"
+          data-test-subj="dataGridFullScrenButton"
           type="button"
         >
           <span
@@ -705,6 +709,7 @@ Array [
     >
       <div
         class="euiDataGrid__controls"
+        data-test-sub="dataGridControls"
       >
         <div
           class="euiPopover euiPopover--anchorDownLeft"
@@ -715,6 +720,7 @@ Array [
           >
             <button
               class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiDataGrid__controlBtn"
+              data-test-subj="dataGridColumnSelectorButton"
               type="button"
             >
               <span
@@ -747,6 +753,7 @@ Array [
           >
             <button
               class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiDataGrid__controlBtn"
+              data-test-subj="dataGridStyleSelectorButton"
               type="button"
             >
               <span
@@ -772,6 +779,7 @@ Array [
         </div>
         <button
           class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiDataGrid__controlBtn testClass1 testClass2"
+          data-test-subj="dataGridFullScrenButton"
           type="button"
         >
           <span

src/components/datagrid/column_selector.tsx

@@ -93,6 +93,7 @@ export const useColumnSelector = (
               iconType="eyeClosed"
               color="text"
               className={controlBtnClasses}
+              data-test-subj="dataGridColumnSelectorButton"
               onClick={() => setIsOpen(!isOpen)}>
               {numberOfHiddenFields > 0
                 ? `${numberOfHiddenFields} ${buttonActive}`

src/components/datagrid/column_sorting.tsx

@@ -112,6 +112,7 @@ export const useColumnSorting = (
               iconType="sortable"
               color="text"
               className={controlBtnClasses}
+              data-test-subj="dataGridColumnSortingButton"
               onClick={() => setIsOpen(!isOpen)}>
               {numberOfSortedFields > 0
                 ? `${numberOfSortedFields} ${buttonActive}`

src/components/datagrid/data_grid.test.tsx

@@ -614,6 +614,54 @@ Array [
       ).toBe(2);
     });
 
+    it('can hide the toolbar', () => {
+      const component = mount(
+        <EuiDataGrid
+          {...requiredProps}
+          columns={[{ id: 'A' }, { id: 'B' }]}
+          columnVisibility={{
+            visibleColumns: ['A', 'B'],
+            setVisibleColumns: () => {},
+          }}
+          toolbarDisplay={false}
+          rowCount={1}
+          renderCellValue={() => 'value'}
+        />
+      );
+
+      // The toolbar should not show
+      expect(findTestSubject(component, 'dataGridControls').length).toBe(0);
+
+      // Check for false / true and unset values
+      component.setProps({
+        toolbarDisplay: {
+          showFullscrenSelector: false,
+          showSortSelector: false,
+          showStyleSelector: true,
+        },
+      });
+
+      // fullscreen selector
+      expect(findTestSubject(component, 'dataGridFullScrenButton').length).toBe(
+        0
+      );
+
+      // sort selector
+      expect(
+        findTestSubject(component, 'dataGridColumnSortingButton').length
+      ).toBe(0);
+
+      // style selector
+      expect(
+        findTestSubject(component, 'dataGridStyleSelectorButton').length
+      ).toBe(1);
+
+      // column selector
+      expect(
+        findTestSubject(component, 'dataGridColumnSelectorButton').length
+      ).toBe(1);
+    });
+
     describe('schema datatype classnames', () => {
       it('applies classnames from explicit datatypes', () => {
         const component = mount(

src/components/datagrid/data_grid.tsx

@@ -29,6 +29,7 @@ import {
   EuiDataGridStyleRowHover,
   EuiDataGridExpansionFormatters,
   EuiDataGridColumnVisibility,
+  EuiDataGridTooBarDisplayOptions,
 } from './data_grid_types';
 import { EuiDataGridCellProps } from './data_grid_cell';
 // @ts-ignore-next-line
@@ -64,6 +65,7 @@ type CommonGridProps = CommonProps &
     rowCount: number;
     renderCellValue: EuiDataGridCellProps['renderCellValue'];
     gridStyle?: EuiDataGridStyle;
+    toolbarDisplay?: boolean | EuiDataGridTooBarDisplayOptions;
     inMemory?: EuiDataGridInMemory;
     /**
      * Set to `null` to disable pagination
@@ -189,16 +191,16 @@ function useColumnWidths(): [
 }
 
 function useOnResize(
-  setShowGridControls: (showGridControls: boolean) => void,
+  setHasRoomForGridControls: (hasRoomForGridControls: boolean) => void,
   isFullScreen: boolean
 ) {
   return useCallback(
     ({ width }: { width: number }) => {
-      setShowGridControls(
+      setHasRoomForGridControls(
         width > MINIMUM_WIDTH_FOR_GRID_CONTROLS || isFullScreen
       );
     },
-    [setShowGridControls, isFullScreen]
+    [setHasRoomForGridControls, isFullScreen]
   );
 }
 
@@ -280,7 +282,7 @@ function createKeyDownHandler(
 
 export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   const [isFullScreen, setIsFullScreen] = useState(false);
-  const [showGridControls, setShowGridControls] = useState(true);
+  const [hasRoomForGridControls, setHasRoomForGridControls] = useState(true);
   const [focusedCell, setFocusedCell] = useState<[number, number] | null>(null);
   const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
   const [interactiveCellId] = useState(htmlIdGenerator()());
@@ -328,9 +330,9 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   const [columnWidths, setColumnWidth] = useColumnWidths();
 
   // enables/disables grid controls based on available width
-  const onResize = useOnResize(nextShowGridControls => {
-    if (nextShowGridControls !== showGridControls) {
-      setShowGridControls(nextShowGridControls);
+  const onResize = useOnResize(nextHasRoomForGridControls => {
+    if (nextHasRoomForGridControls !== hasRoomForGridControls) {
+      setHasRoomForGridControls(nextHasRoomForGridControls);
     }
   }, isFullScreen);
 
@@ -353,6 +355,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
     renderCellValue,
     className,
     gridStyle,
+    toolbarDisplay = true,
     pagination,
     sorting,
     inMemory,
@@ -417,12 +420,41 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
     className
   );
 
+  // By default the toolbar appears
+  const showToolbar = !!toolbarDisplay;
+
+  // Typegaurd to see if toolbarDisplay has a certain boolean property assigned
+  // If not, just set it to true and assume it's OK to show
+  function checkOrDefaultToolBarDiplayOptions(
+    arg: EuiDataGridProps['toolbarDisplay'],
+    option: keyof EuiDataGridTooBarDisplayOptions
+  ): boolean {
+    if (arg === undefined) {
+      return true;
+    } else if (typeof arg === 'boolean') {
+      return arg as boolean;
+    } else if (
+      (arg as EuiDataGridTooBarDisplayOptions).hasOwnProperty(option)
+    ) {
+      return arg[option]!;
+    } else {
+      return true;
+    }
+  }
+
   // These grid controls will only show when there is room. Check the resize observer callback
+  // They can also be optionally turned off individually by using toolbarDisplay
   const gridControls = (
     <Fragment>
-      {columnSelector}
-      {styleSelector}
-      {columnSorting}
+      {checkOrDefaultToolBarDiplayOptions(toolbarDisplay, 'showColumnSelector')
+        ? columnSelector
+        : null}
+      {checkOrDefaultToolBarDiplayOptions(toolbarDisplay, 'showStyleSelector')
+        ? styleSelector
+        : null}
+      {checkOrDefaultToolBarDiplayOptions(toolbarDisplay, 'showSortSelector')
+        ? columnSorting
+        : null}
     </Fragment>
   );
 
@@ -450,32 +482,46 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   const realizedFocusedCell: [number, number] =
     focusedCell || (headerIsInteractive ? [0, -1] : [0, 0]);
 
+  const fullScreenSelector = (
+    <EuiI18n
+      tokens={[
+        'euiDataGrid.fullScreenButton',
+        'euiDataGrid.fullScreenButtonActive',
+      ]}
+      defaults={['Full screen', 'Exit full screen']}>
+      {([fullScreenButton, fullScreenButtonActive]: ReactChild[]) => (
+        <EuiButtonEmpty
+          size="xs"
+          iconType="fullScreen"
+          color="text"
+          className={controlBtnClasses}
+          data-test-subj="dataGridFullScrenButton"
+          onClick={() => setIsFullScreen(!isFullScreen)}>
+          {isFullScreen ? fullScreenButtonActive : fullScreenButton}
+        </EuiButtonEmpty>
+      )}
+    </EuiI18n>
+  );
+
   return (
     <EuiFocusTrap disabled={!isFullScreen} style={{ height: '100%' }}>
       <div
         className={classes}
         onKeyDown={handleGridKeyDown}
         ref={setContainerRef}>
-        <div className="euiDataGrid__controls">
-          {showGridControls ? gridControls : null}
-          <EuiI18n
-            tokens={[
-              'euiDataGrid.fullScreenButton',
-              'euiDataGrid.fullScreenButtonActive',
-            ]}
-            defaults={['Full screen', 'Exit full screen']}>
-            {([fullScreenButton, fullScreenButtonActive]: ReactChild[]) => (
-              <EuiButtonEmpty
-                size="xs"
-                iconType="fullScreen"
-                color="text"
-                className={controlBtnClasses}
-                onClick={() => setIsFullScreen(!isFullScreen)}>
-                {isFullScreen ? fullScreenButtonActive : fullScreenButton}
-              </EuiButtonEmpty>
-            )}
-          </EuiI18n>
-        </div>
+        {showToolbar ? (
+          <div
+            className="euiDataGrid__controls"
+            data-test-sub="dataGridControls">
+            {hasRoomForGridControls ? gridControls : null}
+            {checkOrDefaultToolBarDiplayOptions(
+              toolbarDisplay,
+              'showFullscrenSelector'
+            )
+              ? fullScreenSelector
+              : null}
+          </div>
+        ) : null}
         <EuiResizeObserver onResize={onResize}>
           {resizeRef => (
             <div

src/components/datagrid/data_grid_types.ts

@@ -33,6 +33,13 @@ export interface EuiDataGridStyle {
   cellPadding?: EuiDataGridStyleCellPaddings;
 }
 
+export interface EuiDataGridTooBarDisplayOptions {
+  showColumnSelector?: boolean;
+  showStyleSelector?: boolean;
+  showSortSelector?: boolean;
+  showFullscrenSelector?: boolean;
+}
+
 // ideally this would use a generic to enforce `pageSize` exists in `pageSizeOptions`,
 // but TypeScript's default understanding of an array is number[] unless `as const` is used
 // which defeats the generic's purpose & functionality as it would check for `number` in `number[]`

src/components/datagrid/style_selector.tsx

@@ -69,6 +69,7 @@ export const useStyleSelector = (
           iconType="tableDensityExpanded"
           className="euiDataGrid__controlBtn"
           color="text"
+          data-test-subj="dataGridStyleSelectorButton"
           onClick={() => setIsOpen(!isOpen)}>
           <EuiI18n token="euiStyleSelector.buttonText" default="Density" />
         </EuiButtonEmpty>