Table: Allow FieldType.other containing arrays to use Pills (#111205)

packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.test.tsx

@@ -102,6 +102,52 @@ describe('PillCell', () => {
       );
     });
 
+    it('FieldType.other with array', () => {
+      const field = fieldWithValues([['value1', 'value2', 'value3']]);
+      field.type = FieldType.other;
+      expectHTML(
+        render(
+          <PillCell getTextColorForBackground={getTextColorForBackground} field={field} rowIdx={0} theme={theme} />
+        ),
+        `
+        <span style="background-color: rgb(63, 43, 91); color: rgb(247, 248, 250);">value1</span>
+        <span style="background-color: rgb(252, 226, 222); color: rgb(32, 34, 38);">value2</span>
+        <span style="background-color: rgb(81, 149, 206); color: rgb(247, 248, 250);">value3</span>
+        `
+      );
+    });
+
+    it('FieldType.other with array with some null values', () => {
+      const field = fieldWithValues([['value1', null, 'value2', undefined, 'value3']]);
+      field.type = FieldType.other;
+      expectHTML(
+        render(
+          <PillCell getTextColorForBackground={getTextColorForBackground} field={field} rowIdx={0} theme={theme} />
+        ),
+        `
+        <span style="background-color: rgb(63, 43, 91); color: rgb(247, 248, 250);">value1</span>
+        <span style="background-color: rgb(252, 226, 222); color: rgb(32, 34, 38);">value2</span>
+        <span style="background-color: rgb(81, 149, 206); color: rgb(247, 248, 250);">value3</span>
+        `
+      );
+    });
+
+    it('FieldType.other with non-array', () => {
+      const field = fieldWithValues([{ value1: true, value2: false, value3: 42 }]);
+      field.type = FieldType.other;
+      expectHTML(
+        render(
+          <PillCell
+            getTextColorForBackground={getTextColorForBackground}
+            field={fieldWithValues([])}
+            rowIdx={0}
+            theme={theme}
+          />
+        ),
+        ''
+      );
+    });
+
     it('non-string values', () => {
       expectHTML(
         render(

packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.tsx

@@ -65,6 +65,10 @@ export function inferPills(rawValue: TableCellValue): unknown[] {
     return [];
   }
 
+  if (Array.isArray(rawValue)) {
+    return rawValue.filter((v) => v != null).map((v) => String(v).trim());
+  }
+
   const value = String(rawValue);
 
   if (value[0] === '[') {

packages/grafana-ui/src/components/Table/TableNG/Cells/renderers.tsx

@@ -118,7 +118,9 @@ const CELL_REGISTRY: Record<TableCellOptions['type'], CellRegistryEntry> = {
       />
     )),
     getStyles: getPillStyles,
-    testField: (field: Field) => field.type === FieldType.string,
+    testField: (field: Field) =>
+      field.type === FieldType.string ||
+      (field.type === FieldType.other && field.values.some((val) => Array.isArray(val))),
   },
   [TableCellDisplayMode.Markdown]: {
     // eslint-disable-next-line react/display-name