Fixed data grid break on invalid schema (#2955)

* Fixed data grid break on invalid schema * Added changes to changelog * Fixed order of isSortable and schemaDetail
elastic · Mar 2, 2020 · 72ee607 · 72ee607
1 parent 7fdac45
commit 72ee607
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 
 **Bug fixes**
 
+- Fixed `EuiDataGrid` breaking if invalid schema passed ([#2955](https://github.com/elastic/eui/pull/2955))
 - Fixed `EuiTitle` not rendering child classes ([#2925](https://github.com/elastic/eui/pull/2925))
 - Extended `div` element in `EuiFlyout` type ([#2914](https://github.com/elastic/eui/pull/2914))
 - Fixed popover positioning service to be more lenient when positioning 0-width or 0-height content ([#2948](https://github.com/elastic/eui/pull/2948))

diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
@@ -96,10 +96,22 @@ export const useColumnSorting = (
 
   const numberOfSortedFields = sorting.columns.length;
 
-  const inactiveSortableColumns = inactiveColumns.filter(({ id, isSortable }) =>
+  const schemaDetails = (id: string | number) =>
     schema.hasOwnProperty(id) && schema[id].columnType != null
-      ? getDetailsForSchema(schemaDetectors, schema[id].columnType).isSortable
-      : isSortable !== false
+      ? getDetailsForSchema(schemaDetectors, schema[id].columnType)
+      : null;
+
+  const inactiveSortableColumns = inactiveColumns.filter(
+    ({ id, isSortable }) => {
+      const schemaDetail = schemaDetails(id);
+      let sortable = true;
+      if (isSortable != null) {
+        sortable = isSortable;
+      } else if (schemaDetail != null) {
+        sortable = schemaDetail.isSortable;
+      }
+      return sortable;
+    }
   );
 
   const columnSorting = (
@@ -221,17 +233,15 @@ export const useColumnSorting = (
                               <EuiFlexItem grow={false}>
                                 <EuiToken
                                   iconType={
-                                    schema.hasOwnProperty(id) &&
-                                    schema[id].columnType != null
+                                    schemaDetails(id) != null
                                       ? getDetailsForSchema(
                                           schemaDetectors,
                                           schema[id].columnType
                                         ).icon
                                       : 'tokenString'
                                   }
                                   color={
-                                    schema.hasOwnProperty(id) &&
-                                    schema[id].columnType != null
+                                    schemaDetails(id) != null
                                       ? getDetailsForSchema(
                                           schemaDetectors,
                                           schema[id].columnType

diff --git a/src/components/datagrid/column_sorting_draggable.tsx b/src/components/datagrid/column_sorting_draggable.tsx
@@ -26,16 +26,21 @@ export interface EuiDataGridColumnSortingDraggableProps {
 export const EuiDataGridColumnSortingDraggable: FunctionComponent<
   EuiDataGridColumnSortingDraggableProps
 > = ({ id, direction, index, sorting, schema, schemaDetectors, ...rest }) => {
+  const schemaDetails =
+    schema.hasOwnProperty(id) && schema[id].columnType != null
+      ? getDetailsForSchema(schemaDetectors, schema[id].columnType)
+      : null;
+
   const textSortAsc =
-    schema.hasOwnProperty(id) && schema[id].columnType != null ? (
-      getDetailsForSchema(schemaDetectors, schema[id].columnType).sortTextAsc
+    schemaDetails != null ? (
+      schemaDetails.sortTextAsc
     ) : (
       <EuiI18n token="euiColumnSortingDraggable.defaultSortAsc" default="A-Z" />
     );
 
   const textSortDesc =
-    schema.hasOwnProperty(id) && schema[id].columnType != null ? (
-      getDetailsForSchema(schemaDetectors, schema[id].columnType).sortTextDesc
+    schemaDetails != null ? (
+      schemaDetails.sortTextDesc
     ) : (
       <EuiI18n
         token="euiColumnSortingDraggable.defaultSortDesc"
@@ -108,21 +113,9 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent<
 
             <EuiFlexItem grow={false}>
               <EuiToken
-                color={
-                  schema.hasOwnProperty(id) && schema[id].columnType != null
-                    ? getDetailsForSchema(
-                        schemaDetectors,
-                        schema[id].columnType
-                      ).color
-                    : undefined
-                }
+                color={schemaDetails != null ? schemaDetails.color : undefined}
                 iconType={
-                  schema.hasOwnProperty(id) && schema[id].columnType != null
-                    ? getDetailsForSchema(
-                        schemaDetectors,
-                        schema[id].columnType
-                      ).icon
-                    : 'tokenString'
+                  schemaDetails != null ? schemaDetails.icon : 'tokenString'
                 }
               />
             </EuiFlexItem>