From a03f897cd524e31f826a0b165592055c86264f2d Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Tue, 21 Jan 2025 13:25:33 -0600
Subject: [PATCH] Table: Fix viz suggestions (#99335)

---
 packages/grafana-ui/src/components/Table/Table.tsx    |  9 ++++++---
 .../grafana-ui/src/components/Table/utils.test.ts     | 11 +++++++----
 packages/grafana-ui/src/components/Table/utils.ts     | 10 +++-------
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 2d8a040dc65..7aafd46b6df 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react-table';
 import { VariableSizeList } from 'react-window';
 
-import { FieldType, ReducerID, getRowUniqueId, getFieldMatcher } from '@grafana/data';
+import { FieldType, ReducerID, getRowUniqueId, getFieldMatcher, Field } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { TableCellHeight } from '@grafana/schema';
 
@@ -308,9 +308,12 @@ export const Table = memo((props: Props) => {
   // Try to determine the longet field
   // TODO: do we wrap only one field?
   // What if there are multiple fields with long text?
-  const longestField = guessLongestField(fieldConfig, data);
+  let longestField: Field | undefined = undefined;
   let textWrapField = undefined;
-  if (fieldConfig !== undefined) {
+
+  if (fieldConfig) {
+    longestField = guessLongestField(fieldConfig, data);
+
     data.fields.forEach((field) => {
       fieldConfig.overrides.forEach((override) => {
         const matcher = getFieldMatcher(override.matcher);
diff --git a/packages/grafana-ui/src/components/Table/utils.test.ts b/packages/grafana-ui/src/components/Table/utils.test.ts
index 16869f40cd1..ca12996a1ca 100644
--- a/packages/grafana-ui/src/components/Table/utils.test.ts
+++ b/packages/grafana-ui/src/components/Table/utils.test.ts
@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
 import { Row } from 'react-table';
 
-import { Field, FieldType, MutableDataFrame, SelectableValue } from '@grafana/data';
+import { Field, FieldConfigSource, FieldType, MutableDataFrame, SelectableValue } from '@grafana/data';
 
 import {
   calculateUniqueFieldValues,
@@ -548,7 +548,7 @@ describe('Table utils', () => {
     // FLAKY TEST - https://drone.grafana.net/grafana/grafana/201232/1/5
     it.skip('should guess the longest field correctly if there are few records', () => {
       const data = getWrappableData(10);
-      const config = {
+      const config: FieldConfigSource = {
         defaults: {
           custom: {
             cellOptions: {
@@ -556,6 +556,7 @@ describe('Table utils', () => {
             },
           },
         },
+        overrides: [],
       };
 
       const longestField = guessLongestField(config, data);
@@ -564,7 +565,7 @@ describe('Table utils', () => {
 
     it('should guess the longest field correctly if there are many records', () => {
       const data = getWrappableData(1000);
-      const config = {
+      const config: FieldConfigSource = {
         defaults: {
           custom: {
             cellOptions: {
@@ -572,6 +573,7 @@ describe('Table utils', () => {
             },
           },
         },
+        overrides: [],
       };
 
       const longestField = guessLongestField(config, data);
@@ -580,7 +582,7 @@ describe('Table utils', () => {
 
     it('should return undefined if there is no data', () => {
       const data = getData();
-      const config = {
+      const config: FieldConfigSource = {
         defaults: {
           custom: {
             cellOptions: {
@@ -588,6 +590,7 @@ describe('Table utils', () => {
             },
           },
         },
+        overrides: [],
       };
 
       const longestField = guessLongestField(config, data);
diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts
index 8a419210ecc..07c13c203ef 100644
--- a/packages/grafana-ui/src/components/Table/utils.ts
+++ b/packages/grafana-ui/src/components/Table/utils.ts
@@ -9,6 +9,7 @@ import {
   DisplayValue,
   DisplayValueAlignmentFactors,
   Field,
+  FieldConfigSource,
   fieldReducers,
   FieldType,
   formattedValueToString,
@@ -713,19 +714,14 @@ export function guessTextBoundingBox(
  * To do this we either select a single record if there aren't many records
  * or we select records at random and sample their size.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function guessLongestField(fieldConfig: any, data: DataFrame) {
+export function guessLongestField(fieldConfig: FieldConfigSource, data: DataFrame) {
   let longestField = undefined;
   const SAMPLE_SIZE = 3;
 
   // If the default field option is set to allow text wrapping
   // we determine the field to wrap text with here and then
   // pass it to the RowsList
-  if (
-    fieldConfig !== undefined &&
-    fieldConfig.defaults.custom !== undefined &&
-    fieldConfig.defaults.custom.cellOptions.wrapText
-  ) {
+  if (fieldConfig.defaults.custom?.cellOptions?.wrapText) {
     const stringFields = data.fields.filter((field: Field) => field.type === FieldType.string);
 
     if (stringFields.length >= 1 && stringFields[0].values.length > 0) {