Allow DataGrid's columns popover to optionally not allow hiding and/o…

…r reordering (#2993) * Added customization functionality to EuiDataGrid's toolbarVisibility.showColumnSelector * design updates * docs improved * Updated columns localization text to allow moving numeric value; added toolbar visibility control to docs * Changelog & prop docs Co-authored-by: Dave Snider <dave.snider@gmail.com>
elastic · Mar 12, 2020 · 9ce5f85 · 9ce5f85
1 parent 4959d2f
commit 9ce5f85
Show file tree

Hide file tree

Showing 10 changed files with 286 additions and 136 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Added RGB format support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850))
 - Added alpha channel (opacity) support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850))
 - Added `useResizeObserver` hook ([#2991](https://github.com/elastic/eui/pull/2991))
+- Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993))
 
 **Bug Fixes**
 

diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js
@@ -30,6 +30,7 @@ import {
   DataGridColumnVisibility,
   DataGridPopoverContent,
   DataGridControlColumn,
+  DataGridToolBarVisibilityColumnSelectorOptions,
 } from './props';
 
 const gridSnippet = `
@@ -351,6 +352,7 @@ export const DataGridExample = {
         EuiDataGridSchemaDetector: DataGridSchemaDetector,
         EuiDataGridStyle: DataGridStyle,
         EuiDataGridToolbarVisibilityOptions: DataGridToolbarVisibilityOptions,
+        EuiDataGridToolBarVisibilityColumnSelectorOptions: DataGridToolBarVisibilityColumnSelectorOptions,
         EuiDataGridPopoverContent: DataGridPopoverContent,
       },
       demo: (

diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js
@@ -37,10 +37,11 @@ const gridSnippet = `<EuiDataGrid
   ]}
   // This can work as a shape.
   toolbarVisibility={{
-    showColumnSelector: false
     showStyleSelector: false
     showSortSelector: false
     showFullScreenSelector: false
+    // showColumnSelector also takes an object, check the prop docs.
+    showColumnSelector: false
     additionalControls: (
       <Fragment>
         <EuiButtonEmpty

diff --git a/src-docs/src/views/datagrid/props.tsx b/src-docs/src/views/datagrid/props.tsx
@@ -9,6 +9,7 @@ import {
   EuiDataGridColumnVisibility,
   EuiDataGridPopoverContentProps,
   EuiDataGridControlColumn,
+  EuiDataGridToolBarVisibilityColumnSelectorOptions,
 } from '../../../../src/components/datagrid/data_grid_types';
 import { EuiDataGridCellValueElementProps } from '../../../../src/components/datagrid/data_grid_cell';
 import { EuiDataGridSchemaDetector } from '../../../../src/components/datagrid/data_grid_schema';
@@ -54,3 +55,7 @@ export const DataGridPopoverContent: FunctionComponent<
 export const DataGridControlColumn: FunctionComponent<
   EuiDataGridControlColumn
 > = () => <div />;
+
+export const DataGridToolBarVisibilityColumnSelectorOptions: FunctionComponent<
+  EuiDataGridToolBarVisibilityColumnSelectorOptions
+> = () => <div />;
diff --git a/src-docs/src/views/datagrid/styling.js b/src-docs/src/views/datagrid/styling.js
@@ -167,6 +167,28 @@ export default class DataGrid extends Component {
       },
     ];
 
+    this.allowHideColumnsOptions = [
+      {
+        id: 'true',
+        label: 'True',
+      },
+      {
+        id: 'false',
+        label: 'False',
+      },
+    ];
+
+    this.allowOrderingColumnsOptions = [
+      {
+        id: 'true',
+        label: 'True',
+      },
+      {
+        id: 'false',
+        label: 'False',
+      },
+    ];
+
     this.showFullScreenSelectorOptions = [
       {
         id: 'true',
@@ -212,6 +234,8 @@ export default class DataGrid extends Component {
       showSortSelector: true,
       showStyleSelector: true,
       showColumnSelector: true,
+      allowHideColumns: true,
+      allowOrderingColumns: true,
       showFullScreenSelector: true,
       showToolbar: true,
       toolbarPropTypeIsBoolean: true,
@@ -279,6 +303,18 @@ export default class DataGrid extends Component {
     });
   };
 
+  onAllowHideColumnsChange = optionId => {
+    this.setState({
+      allowHideColumns: optionId === 'true',
+    });
+  };
+
+  onAllowOrderingColumnsChange = optionId => {
+    this.setState({
+      allowOrderingColumns: optionId === 'true',
+    });
+  };
+
   onShowFullScreenSelectorChange = optionId => {
     this.setState({
       showFullScreenSelector: optionId === 'true',
@@ -356,8 +392,20 @@ export default class DataGrid extends Component {
       </EuiButton>
     );
 
+    let showColumnSelector = this.state.showColumnSelector;
+    if (
+      this.state.showColumnSelector === true &&
+      (this.state.allowHideColumns === false ||
+        this.state.allowOrderingColumns === false)
+    ) {
+      showColumnSelector = {
+        allowHide: this.state.allowHideColumns,
+        allowReorder: this.state.allowOrderingColumns,
+      };
+    }
+
     const toolbarVisibilityOptions = {
-      showColumnSelector: this.state.showColumnSelector,
+      showColumnSelector: showColumnSelector,
       showStyleSelector: this.state.showStyleSelector,
       showSortSelector: this.state.showSortSelector,
       showFullScreenSelector: this.state.showFullScreenSelector,
@@ -459,7 +507,7 @@ export default class DataGrid extends Component {
               anchorPosition="rightUp"
               zIndex={2}
               closePopover={this.closeToolbarPopover.bind(this)}>
-              <div style={{ width: 300 }}>
+              <div style={{ width: 400 }}>
                 <EuiFormRow
                   display="columnCompressed"
                   label="toolbarVisibility prop">
@@ -474,19 +522,6 @@ export default class DataGrid extends Component {
                 </EuiFormRow>
                 {this.state.toolbarPropTypeIsBoolean === false ? (
                   <Fragment>
-                    <EuiFormRow
-                      display="columnCompressed"
-                      label="Show column selector">
-                      <EuiButtonGroup
-                        isFullWidth
-                        buttonSize="compressed"
-                        legend="Border"
-                        options={this.showColumnSelectorOptions}
-                        idSelected={this.state.showColumnSelector.toString()}
-                        onChange={this.onShowColumnSelectorChange}
-                      />
-                    </EuiFormRow>
-
                     <EuiFormRow
                       display="columnCompressed"
                       label="Show style selector">
@@ -525,6 +560,49 @@ export default class DataGrid extends Component {
                         onChange={this.onShowFullScreenSelectorChange}
                       />
                     </EuiFormRow>
+
+                    <EuiFormRow
+                      display="columnCompressed"
+                      label="Show column selector">
+                      <EuiButtonGroup
+                        isFullWidth
+                        buttonSize="compressed"
+                        legend="Border"
+                        options={this.showColumnSelectorOptions}
+                        idSelected={this.state.showColumnSelector.toString()}
+                        onChange={this.onShowColumnSelectorChange}
+                      />
+                    </EuiFormRow>
+                    {this.state.showColumnSelector && (
+                      <>
+                        <EuiFormRow
+                          display="columnCompressed"
+                          label="Allow hiding columns"
+                          style={{ marginLeft: 32 }}>
+                          <EuiButtonGroup
+                            isFullWidth
+                            buttonSize="compressed"
+                            legend="Border"
+                            options={this.allowHideColumnsOptions}
+                            idSelected={this.state.allowHideColumns.toString()}
+                            onChange={this.onAllowHideColumnsChange}
+                          />
+                        </EuiFormRow>
+                        <EuiFormRow
+                          display="columnCompressed"
+                          label="Allow ordering columns"
+                          style={{ marginLeft: 32 }}>
+                          <EuiButtonGroup
+                            isFullWidth
+                            buttonSize="compressed"
+                            legend="Border"
+                            options={this.allowOrderingColumnsOptions}
+                            idSelected={this.state.allowOrderingColumns.toString()}
+                            onChange={this.onAllowOrderingColumnsChange}
+                          />
+                        </EuiFormRow>
+                      </>
+                    )}
                   </Fragment>
                 ) : (
                   <EuiFormRow display="columnCompressed" label="Show toolbar">

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -191,12 +191,12 @@ Array [
                 <div
                   aria-hidden="true"
                   class="euiButtonEmpty__icon"
-                  data-euiicon-type="eyeClosed"
+                  data-euiicon-type="listAdd"
                 />
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Hide fields
+                  Columns
                 </span>
               </span>
             </button>
@@ -713,12 +713,12 @@ Array [
                 <div
                   aria-hidden="true"
                   class="euiButtonEmpty__icon"
-                  data-euiicon-type="eyeClosed"
+                  data-euiicon-type="listAdd"
                 />
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Hide fields
+                  Columns
                 </span>
               </span>
             </button>
@@ -1430,12 +1430,12 @@ Array [
                 <div
                   aria-hidden="true"
                   class="euiButtonEmpty__icon"
-                  data-euiicon-type="eyeClosed"
+                  data-euiicon-type="listAdd"
                 />
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Hide fields
+                  Columns
                 </span>
               </span>
             </button>
@@ -1951,12 +1951,12 @@ Array [
                 <div
                   aria-hidden="true"
                   class="euiButtonEmpty__icon"
-                  data-euiicon-type="eyeClosed"
+                  data-euiicon-type="listAdd"
                 />
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  Hide fields
+                  Columns
                 </span>
               </span>
             </button>

diff --git a/src/components/datagrid/_data_grid_column_selector.scss b/src/components/datagrid/_data_grid_column_selector.scss
@@ -15,6 +15,10 @@
   margin: 0 (-$euiSizeS);
 }
 
+.euiDataGridColumnSelector__itemLabel {
+  @include euiFontSizeXS;
+}
+
 .euiDataGridColumnSelectorPopover {
   // Hack because the fixed positions of drag and drop don't work inside of transformed elements
   // sass-lint:disable-block no-important