Add normalize for boolean type (#198)

* add normalize for boolean type

* Update CHANGELOG.md

---------

Co-authored-by: Mikhail Volkov <[email protected]>

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Updated wrap column text by word (#195)
 - Updated packages for Code Editor (#194)
+- Added normalize for boolean type (#198)
 
 ## 1.9.0 (2024-12-01)
 

src/components/Table/components/CellRenderer/components/BooleanCellRenderer/BooleanCellRenderer.tsx

@@ -1,7 +1,8 @@
 import { Icon, useTheme2 } from '@grafana/ui';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { TEST_IDS } from '@/constants';
+import { normalizeBooleanCellValue } from '@/utils';
 
 /**
  * Properties
@@ -34,10 +35,15 @@ export const BooleanCellRenderer: React.FC<Props> = ({ value, bgColor }) => {
    */
   const theme = useTheme2();
 
+  /**
+   * Normalized value
+   */
+  const normalizedValue = useMemo(() => normalizeBooleanCellValue(value), [value]);
+
   return (
     <Icon
       {...TEST_IDS.booleanCellRenderer.root.apply()}
-      name={value ? 'check-circle' : 'circle'}
+      name={normalizedValue ? 'check-circle' : 'circle'}
       size="lg"
       style={{
         color: bgColor ? theme.colors.getContrastText(bgColor) : 'inherit',

src/utils/table.test.ts

@@ -12,13 +12,15 @@ import {
 
 import {
   columnFilter,
+  convertStringValueToBoolean,
   convertTableToDataFrame,
   createColumnAccessorFn,
   getFilterWithNewType,
   getFooterCell,
   getSupportedFilterTypesForVariable,
   getVariableColumnFilters,
   mergeColumnFilters,
+  normalizeBooleanCellValue,
 } from './table';
 import {
   createColumnConfig,
@@ -1235,4 +1237,39 @@ describe('Table utils', () => {
       expect(createColumnAccessorFn('comment.info.name')({ 'comment.info.name': 'hello' })).toEqual('hello');
     });
   });
+
+  /**
+   * convertStringValueToBoolean
+   */
+  describe('convertStringValueToBoolean', () => {
+    it.each([
+      ['true', true],
+      ['yes', true],
+      ['1', true],
+      ['false', false],
+      ['no', false],
+      ['random', false],
+      ['', false],
+      ['0', false],
+    ])('Should return value as boolean', (input, expected) => {
+      expect(convertStringValueToBoolean(input)).toBe(expected);
+    });
+  });
+
+  /**
+   * normalizeBooleanCellValue
+   */
+  describe('normalizeBooleanCellValue', () => {
+    it.each([
+      [true, true],
+      [false, false],
+      ['true', true],
+      ['false', false],
+      ['random', false],
+      [null, false],
+      ['fals', false],
+    ])('Should convert value to boolean', (value, expected) => {
+      expect(normalizeBooleanCellValue(value)).toBe(expected);
+    });
+  });
 });

src/utils/table.ts

@@ -478,3 +478,39 @@ export const convertTableToDataFrame = <TData>(table: TableInstance<TData>): Dat
  */
 export const createColumnAccessorFn = (accessorKey: string) => (row: unknown) =>
   (row as Record<string, unknown>)[accessorKey];
+
+/**
+ * Convert available string value to boolean
+ */
+export const convertStringValueToBoolean = (value: string): boolean => {
+  switch (value) {
+    case 'true':
+    case 'yes':
+    case '1': {
+      return true;
+    }
+    case 'false':
+    case 'no':
+    case '1': {
+      return false;
+    }
+    default: {
+      return false;
+    }
+  }
+};
+
+/**
+ * normalize Boolean Cell Value
+ */
+export const normalizeBooleanCellValue = (value: unknown): boolean => {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    return convertStringValueToBoolean(value);
+  }
+
+  return false;
+};