Add boolean type and Switch editor

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

@@ -8,11 +8,21 @@ import { BooleanCellRenderer } from './BooleanCellRenderer';
 
 type Props = React.ComponentProps<typeof BooleanCellRenderer>;
 
+/**
+ * Mock @grafana/ui for Component to heck bgColor and color for cell
+ */
+jest.mock('@grafana/ui', () => ({
+  ...jest.requireActual('@grafana/ui'),
+  Icon: (props: any) => {
+    return <span {...props}>{props.name}</span>;
+  },
+}));
+
 describe('BooleanCellRenderer', () => {
   /**
    * Selectors
    */
-  const getSelectors = getJestSelectors(TEST_IDS.booleanCellRenderer);
+  const getSelectors = getJestSelectors(TEST_IDS.booleanCellRenderer, ['icon']);
   const selectors = getSelectors(screen);
 
   /**
@@ -22,10 +32,23 @@ describe('BooleanCellRenderer', () => {
     return <BooleanCellRenderer value={jest.fn()} {...(props as any)} />;
   };
 
-  it('Should render value', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('Should render false value', () => {
     render(getComponent({ value: false }));
+    expect(selectors.icon(false, 'circle')).toBeInTheDocument();
+  });
+
+  it('Should render true value', () => {
+    render(getComponent({ value: true, bgColor: '#000000' }));
+    expect(selectors.icon(false, 'check-circle')).toBeInTheDocument();
+  });
 
-    expect(selectors.root()).toBeInTheDocument();
-    expect(selectors.root()).toBeDisabled();
+  it('Should render value with contrast color', () => {
+    render(getComponent({ value: true, bgColor: '#E02F44' }));
+    expect(selectors.icon(false, 'check-circle')).toBeInTheDocument();
+    expect(selectors.icon(false, 'check-circle')).toHaveStyle({ color: 'rgb(255, 255, 255)' });
   });
 });

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

@@ -1,4 +1,4 @@
-import { InlineSwitch } from '@grafana/ui';
+import { Icon, useTheme2 } from '@grafana/ui';
 import React from 'react';
 
 import { TEST_IDS } from '@/constants';
@@ -13,13 +13,35 @@ interface Props {
    * @type {boolean}
    */
   value: boolean;
+
+  /**
+   * Bg Color
+   *
+   * @type {string}
+   */
+  bgColor?: string;
 }
 
 /**
  * Boolean Cell Renderer
  * @param value
+ * @param bgColor
  * @constructor
  */
-export const BooleanCellRenderer: React.FC<Props> = ({ value }) => {
-  return <InlineSwitch disabled value={value} transparent={true} {...TEST_IDS.booleanCellRenderer.root.apply()} />;
+export const BooleanCellRenderer: React.FC<Props> = ({ value, bgColor }) => {
+  /**
+   * Theme
+   */
+  const theme = useTheme2();
+
+  return (
+    <Icon
+      {...TEST_IDS.booleanCellRenderer.icon.apply(value ? 'check-circle' : 'circle')}
+      name={value ? 'check-circle' : 'circle'}
+      size="lg"
+      style={{
+        color: bgColor ? theme.colors.getContrastText(bgColor) : 'inherit',
+      }}
+    />
+  );
 };

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

@@ -46,7 +46,7 @@ export const CellRenderer: React.FC<Props> = ({ renderValue, column, bgColor, ro
       return <LayoutCellRenderer value={String(rawValue)} row={row} />;
     }
     case CellType.BOOLEAN: {
-      return <BooleanCellRenderer value={renderValue() as boolean} />;
+      return <BooleanCellRenderer value={renderValue() as boolean} bgColor={bgColor} />;
     }
     default: {
       return <DefaultCellRenderer value={rawValue} field={field} config={config} bgColor={bgColor} />;

src/constants.ts

@@ -120,7 +120,7 @@ export const TEST_IDS = {
     root: createSelector('data-testid layout-cell-renderer'),
   },
   booleanCellRenderer: {
-    root: createSelector('data-testid boolean-cell-renderer'),
+    icon: createSelector((name: unknown) => String(name), 'data-testid'),
   },
   aggregatedCellRenderer: {
     root: createSelector('data-testid aggregated-cell-renderer'),