[DATA GRID] Avoid schema detection on columns which already have a schema

CHANGELOG.md

@@ -3,6 +3,10 @@
 - Added `badge` prop and new styles `EuiHeaderAlert` ([#2506](https://github.com/elastic/eui/pull/2506))
 - Added `disabled` prop to the `EuiCheckboxGroup` definition ([#2545](https://github.com/elastic/eui/pull/2545))
 
+**Bug fixes**
+
+- Fixed `EuiDataGrid` schema detection on already defined column schemas ([#2550](https://github.com/elastic/eui/pull/2550))
+
 ## [`16.0.1`](https://github.com/elastic/eui/tree/v16.0.1)
 
 **Bug fixes**

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

@@ -66,7 +66,7 @@ export const DataGridSchemaExample = {
             </EuiCode>{' '}
             to each matching cell.
           </p>
-          <h4>Defining expansio</h4>
+          <h4>Defining expansiom</h4>
           <p>
             Likewise, you can inject custom content into any of the popovers a
             cell expands into. Add <EuiCode>popoverContents</EuiCode> functions

src/components/datagrid/data_grid.tsx

@@ -413,13 +413,27 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
 
   const [inMemoryValues, onCellRender] = useInMemoryValues(inMemory, rowCount);
 
+  const definedColumnSchemas = useMemo(() => {
+    return columns.reduce<{ [key: string]: string }>(
+      (definedColumnSchemas, { id, schema }) => {
+        if (schema != null) {
+          definedColumnSchemas[id] = schema;
+        }
+        return definedColumnSchemas;
+      },
+      {}
+    );
+  }, [columns]);
+
   const allSchemaDetectors = useMemo(
     () => [...providedSchemaDetectors, ...(schemaDetectors || [])],
     [schemaDetectors]
   );
   const detectedSchema = useDetectSchema(
+    inMemory,
     inMemoryValues,
     allSchemaDetectors,
+    definedColumnSchemas,
     inMemory != null
   );
   const mergedSchema = getMergedSchema(detectedSchema, columns);
@@ -431,7 +445,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   const columnSorting = useColumnSorting(
     orderedVisibleColumns,
     sorting,
-    detectedSchema,
+    mergedSchema,
     allSchemaDetectors
   );
   const [styleSelector, gridStyles] = useStyleSelector(gridStyleWithDefaults);

src/components/datagrid/data_grid_schema.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, ReactNode } from 'react';
 import {
   EuiDataGridColumn,
+  EuiDataGridInMemory,
   EuiDataGridInMemoryValues,
 } from './data_grid_types';
 
@@ -254,8 +255,10 @@ function scoreValueBySchemaType(
 const MINIMUM_SCORE_MATCH = 0.5;
 
 export function useDetectSchema(
+  inMemory: EuiDataGridInMemory | undefined,
   inMemoryValues: EuiDataGridInMemoryValues,
   schemaDetectors: EuiDataGridSchemaDetector[] | undefined,
+  definedColumnSchemas: { [key: string]: string },
   autoDetectSchema: boolean
 ) {
   const schema = useMemo(() => {
@@ -271,13 +274,19 @@ export function useDetectSchema(
     // for each row, score each value by each detector and put the results on `columnSchemas`
     const rowIndices = Object.keys(inMemoryValues);
 
+    const columnIdsWithDefinedSchemas = new Set<string>([
+      ...((inMemory && inMemory.skipColumns) || []),
+      ...Object.keys(definedColumnSchemas),
+    ]);
+
     for (let i = 0; i < rowIndices.length; i++) {
       const rowIndex = rowIndices[i];
       const rowData = inMemoryValues[rowIndex];
       const columnIds = Object.keys(rowData);
 
       for (let j = 0; j < columnIds.length; j++) {
         const columnId = columnIds[j];
+        if (columnIdsWithDefinedSchemas.has(columnId)) continue;
 
         const schemaColumn = (columnSchemas[columnId] =
           columnSchemas[columnId] || {});