From 7fdac4510f0c0477c24c8fb494ed358d8391310e Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty <ashik9591@gmail.com>
Date: Sun, 1 Mar 2020 08:21:59 +0530
Subject: [PATCH] Added isSortable to Datagrid columns (#2952)

* Added isSorting to data_grid_types

* do not display column in filter if isSortable is false

* added isSorted = false in docs

* update in changelog

* Added isSortable flag to EuiDataGridSchemaDetector

* Fixed empty sortable columns popover

* Removed unwanted return

* Fixes in empty sortable popover

* Added isSortable in data grid test
---
 CHANGELOG.md                                 |  1 +
 src-docs/src/views/datagrid/datagrid.js      |  1 +
 src/components/datagrid/column_sorting.tsx   | 12 +++++++++---
 src/components/datagrid/data_grid.test.tsx   |  1 +
 src/components/datagrid/data_grid_schema.tsx |  9 +++++++++
 src/components/datagrid/data_grid_types.ts   |  4 ++++
 6 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e70017473dd..30caf76152a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `isSortable` props to `EuiDataGridColumn` and `EuiDataGridSchemaDetector` to mark them as un-sortable ([#2952](https://github.com/elastic/eui/pull/2952))
 - Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896))
 - Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934))
 - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919))
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 67a438cc830..62864d99fce 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -55,6 +55,7 @@ const columns = [
   },
   {
     id: 'phone',
+    isSortable: false,
   },
   {
     id: 'version',
diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
index d38536088b6..8f9724194c6 100644
--- a/src/components/datagrid/column_sorting.tsx
+++ b/src/components/datagrid/column_sorting.tsx
@@ -96,6 +96,12 @@ export const useColumnSorting = (
 
   const numberOfSortedFields = sorting.columns.length;
 
+  const inactiveSortableColumns = inactiveColumns.filter(({ id, isSortable }) =>
+    schema.hasOwnProperty(id) && schema[id].columnType != null
+      ? getDetailsForSchema(schemaDetectors, schema[id].columnType).isSortable
+      : isSortable !== false
+  );
+
   const columnSorting = (
     <EuiPopover
       data-test-subj="dataGridColumnSortingPopover"
@@ -158,14 +164,14 @@ export const useColumnSorting = (
           </p>
         </EuiText>
       )}
-      {(inactiveColumns.length > 0 || sorting.columns.length > 0) && (
+      {(inactiveSortableColumns.length > 0 || sorting.columns.length > 0) && (
         <EuiPopoverFooter>
           <EuiFlexGroup
             gutterSize="m"
             justifyContent="spaceBetween"
             responsive={false}>
             <EuiFlexItem grow={false}>
-              {inactiveColumns.length > 0 && (
+              {inactiveSortableColumns.length > 0 && (
                 <EuiPopover
                   data-test-subj="dataGridColumnSortingPopoverColumnSelection"
                   isOpen={avilableColumnsisOpen}
@@ -195,7 +201,7 @@ export const useColumnSorting = (
                       <div
                         className="euiDataGridColumnSorting__fieldList"
                         role="listbox">
-                        {inactiveColumns.map(({ id }) => (
+                        {inactiveSortableColumns.map(({ id }) => (
                           <button
                             key={id}
                             className="euiDataGridColumnSorting__field"
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index fbb0687a8e0..c0f5ba6864f 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -916,6 +916,7 @@ Array [
                 color: 'primary',
                 sortTextAsc: 'a-z',
                 sortTextDesc: 'z-a',
+                isSortable: true,
               },
             ]}
             inMemory={{ level: 'pagination' }}
diff --git a/src/components/datagrid/data_grid_schema.tsx b/src/components/datagrid/data_grid_schema.tsx
index 9672dfecbb8..38945dfd370 100644
--- a/src/components/datagrid/data_grid_schema.tsx
+++ b/src/components/datagrid/data_grid_schema.tsx
@@ -39,6 +39,10 @@ export interface EuiDataGridSchemaDetector {
    * Text for how to represent a descending sort of this data type, e.g. 'Z -> A'
    */
   sortTextDesc: ReactNode;
+  /**
+   * Whether this column is sortable
+   */
+  isSortable: boolean;
 }
 
 const numericChars = new Set([
@@ -83,6 +87,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="False-True"
       />
     ),
+    isSortable: true,
   },
   {
     type: 'currency',
@@ -124,6 +129,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="High-Low"
       />
     ),
+    isSortable: true,
   },
   {
     type: 'datetime',
@@ -156,6 +162,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
     sortTextDesc: (
       <EuiI18n token="euiDataGridSchema.dateSortTextDesc" default="Old-New" />
     ),
+    isSortable: true,
   },
   {
     type: 'numeric',
@@ -196,6 +203,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="High-Low"
       />
     ),
+    isSortable: true,
   },
   {
     type: 'json',
@@ -230,6 +238,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="Large-Small"
       />
     ),
+    isSortable: true,
   },
 ];
 
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 7a97f44e852..58b5165095e 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -45,6 +45,10 @@ export interface EuiDataGridColumn {
    * Initial width (in pixels) of the column
    */
   initialWidth?: number;
+  /**
+   * Whether this column is sortable
+   */
+  isSortable?: boolean;
 }
 
 export interface EuiDataGridColumnVisibility {