From c00c0a283e2ca3a29639100bf0c83f35f6339bd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 20 Mar 2023 16:37:58 +0100
Subject: [PATCH] TablePanel: Switch to radio buttons for some cell options
 (#65000)

* TablePanel: Switch to radio buttons for the cell option

* Fixes issue with no default mode handling for colored background
---
 .../src/components/Table/DefaultCell.tsx       |  6 ++++--
 .../table/cells/BarGaugeCellOptionsEditor.tsx  | 18 +++++++++++++-----
 .../cells/ColorBackgroundCellOptionsEditor.tsx | 14 +++++++++-----
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
index 60181560309..6f5a87988d3 100644
--- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx
+++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
@@ -77,10 +77,12 @@ function getCellStyle(
   if (cellOptions.type === TableCellDisplayMode.ColorText) {
     textColor = displayValue.color;
   } else if (cellOptions.type === TableCellDisplayMode.ColorBackground) {
-    if (cellOptions.mode === TableCellBackgroundDisplayMode.Basic) {
+    const mode = cellOptions.mode ?? TableCellBackgroundDisplayMode.Gradient;
+
+    if (mode === TableCellBackgroundDisplayMode.Basic) {
       textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
       bgColor = tinycolor(displayValue.color).toRgbString();
-    } else if (cellOptions.mode === TableCellBackgroundDisplayMode.Gradient) {
+    } else if (mode === TableCellBackgroundDisplayMode.Gradient) {
       const bgColor2 = tinycolor(displayValue.color)
         .darken(10 * darkeningFactor)
         .spin(5);
diff --git a/public/app/plugins/panel/table/cells/BarGaugeCellOptionsEditor.tsx b/public/app/plugins/panel/table/cells/BarGaugeCellOptionsEditor.tsx
index 6465e7284c6..02797d3bf6d 100644
--- a/public/app/plugins/panel/table/cells/BarGaugeCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/cells/BarGaugeCellOptionsEditor.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
 import { BarGaugeDisplayMode, BarGaugeValueMode, TableBarGaugeCellOptions } from '@grafana/schema';
-import { Field, RadioButtonGroup, Select } from '@grafana/ui';
+import { Field, RadioButtonGroup } from '@grafana/ui';
 
 import { TableCellEditorProps } from '../TableCellOptionEditor';
 
@@ -11,8 +11,8 @@ type Props = TableCellEditorProps<TableBarGaugeCellOptions>;
 
 export function BarGaugeCellOptionsEditor({ cellOptions, onChange }: Props) {
   // Set the display mode on change
-  const onCellOptionsChange = (v: SelectableValue) => {
-    cellOptions.mode = v.value;
+  const onCellOptionsChange = (v: BarGaugeDisplayMode) => {
+    cellOptions.mode = v;
     onChange(cellOptions);
   };
 
@@ -24,10 +24,18 @@ export function BarGaugeCellOptionsEditor({ cellOptions, onChange }: Props) {
   return (
     <Stack direction="column" gap={0}>
       <Field label="Gauge display mode">
-        <Select value={cellOptions?.mode} onChange={onCellOptionsChange} options={barGaugeOpts} />
+        <RadioButtonGroup
+          value={cellOptions?.mode ?? BarGaugeDisplayMode.Gradient}
+          onChange={onCellOptionsChange}
+          options={barGaugeOpts}
+        />
       </Field>
       <Field label="Value display">
-        <RadioButtonGroup value={cellOptions?.valueDisplayMode} onChange={onValueModeChange} options={valueModes} />
+        <RadioButtonGroup
+          value={cellOptions?.valueDisplayMode ?? BarGaugeValueMode.Text}
+          onChange={onValueModeChange}
+          options={valueModes}
+        />
       </Field>
     </Stack>
   );
diff --git a/public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx b/public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx
index 1b794902bdf..26bb955edf6 100644
--- a/public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { TableCellBackgroundDisplayMode, TableColoredBackgroundCellOptions } from '@grafana/schema';
-import { Select, Field } from '@grafana/ui';
+import { Field, RadioButtonGroup } from '@grafana/ui';
 
 import { TableCellEditorProps } from '../TableCellOptionEditor';
 
-const colorBackgroundOpts: SelectableValue[] = [
+const colorBackgroundOpts: Array<SelectableValue<TableCellBackgroundDisplayMode>> = [
   { value: TableCellBackgroundDisplayMode.Basic, label: 'Basic' },
   { value: TableCellBackgroundDisplayMode.Gradient, label: 'Gradient' },
 ];
@@ -16,14 +16,18 @@ export const ColorBackgroundCellOptionsEditor = ({
   onChange,
 }: TableCellEditorProps<TableColoredBackgroundCellOptions>) => {
   // Set the display mode on change
-  const onCellOptionsChange = (v: SelectableValue) => {
-    cellOptions.mode = v.value;
+  const onCellOptionsChange = (v: TableCellBackgroundDisplayMode) => {
+    cellOptions.mode = v;
     onChange(cellOptions);
   };
 
   return (
     <Field label="Background display mode">
-      <Select value={cellOptions?.mode} onChange={onCellOptionsChange} options={colorBackgroundOpts} />
+      <RadioButtonGroup
+        value={cellOptions?.mode ?? TableCellBackgroundDisplayMode.Gradient}
+        onChange={onCellOptionsChange}
+        options={colorBackgroundOpts}
+      />
     </Field>
   );
 };