Update CLI legacy switch to ButtonGroup (#74)

* Update CLI legacy switch to ButtonGroup

* Fix tests

Author: mikhail-vl

src/redis-cli-panel/components/redis-cli-panel/redis-cli-panel.test.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import React from 'react';
 import { Observable } from 'rxjs';
 import { LoadingState, PanelData } from '@grafana/data';
-import { Button } from '@grafana/ui';
-import { Help } from '../../constants';
+import { Button, RadioButtonGroup } from '@grafana/ui';
+import { Help, ResponseMode } from '../../constants';
 import { PanelOptions } from '../../types';
-import { RedisCLIPanel } from './redis-cli-panel';
 import { CLITextArea } from '../auto-scrolling-text-area';
+import { RedisCLIPanel } from './redis-cli-panel';
 
 /**
  * Override
@@ -513,6 +513,45 @@ describe('RedisCLIPanel', () => {
     });
   });
 
+  describe('Options', () => {
+    /**
+     * Response Mode
+     */
+    describe('ResponseMode', () => {
+      it('Should apply options value and change', () => {
+        const options = {};
+        const wrapper = shallow(
+          <RedisCLIPanel
+            {...additionalProps}
+            width={width}
+            height={height}
+            data={data}
+            onOptionsChange={onOptionsChangeMock}
+            replaceVariables={replaceVariablesMock}
+            options={options}
+          />
+        );
+        const testedComponent = wrapper.find(RadioButtonGroup);
+        expect(testedComponent.prop('value')).toEqual(ResponseMode.CLI);
+
+        testedComponent.simulate('change');
+        expect(onOptionsChangeMock).not.toHaveBeenCalled();
+
+        testedComponent.simulate('change', ResponseMode.RAW);
+        expect(onOptionsChangeMock).toHaveBeenCalledWith({
+          ...options,
+          raw: true,
+        });
+
+        testedComponent.simulate('change', ResponseMode.CLI);
+        expect(onOptionsChangeMock).toHaveBeenCalledWith({
+          ...options,
+          raw: false,
+        });
+      });
+    });
+  });
+
   afterAll(() => {
     jest.resetAllMocks();
   });

src/redis-cli-panel/components/redis-cli-panel/redis-cli-panel.tsx

@@ -4,17 +4,12 @@ import { map as map$, switchMap as switchMap$ } from 'rxjs/operators';
 import { css, cx } from '@emotion/css';
 import { DataFrame, DataQueryRequest, DataQueryResponse, PanelProps } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
-import { Button, LegacyForms, useTheme2 } from '@grafana/ui';
-import { Help } from '../../constants';
+import { Button, RadioButtonGroup, useTheme2 } from '@grafana/ui';
+import { Help, ResponseMode, ResponseModeOptions } from '../../constants';
 import { Styles } from '../../styles';
 import { HelpCommand, PanelOptions, RedisQuery } from '../../types';
 import { CLITextArea } from '../auto-scrolling-text-area';
 
-/**
- * Legacy Forms
- */
-const { Switch } = LegacyForms;
-
 /**
  * Redis CLI Panel
  */
@@ -26,7 +21,7 @@ export const RedisCLIPanel: React.FC<PanelProps<PanelOptions>> = ({
   onOptionsChange,
   replaceVariables,
 }) => {
-  const { query, raw, output, help } = options;
+  const { query, output, help } = options;
   const styles = Styles(useTheme2());
 
   /**
@@ -107,6 +102,21 @@ export const RedisCLIPanel: React.FC<PanelProps<PanelOptions>> = ({
     onOptionsChange({ ...options, output: `${output ? `${output}\n` : ''}${result}`, query: '' });
   };
 
+  /**
+   * Change view mode
+   * @param event
+   */
+  const onChangeResponseMode = (event?: ResponseMode) => {
+    if (event === undefined) {
+      return;
+    }
+
+    onOptionsChange({
+      ...options,
+      raw: event === ResponseMode.RAW ? true : false,
+    });
+  };
+
   /**
    * Run Query
    *
@@ -197,14 +207,11 @@ export const RedisCLIPanel: React.FC<PanelProps<PanelOptions>> = ({
           value={query}
         />
 
-        <Switch
-          label="Raw"
-          labelClass="width-4"
-          tooltip="If checked, use raw formatting for replies."
-          checked={raw || false}
-          onChange={(event: any) => {
-            onOptionsChange({ ...options, raw: event.currentTarget.checked });
-          }}
+        <RadioButtonGroup
+          className={cx(styles.cli)}
+          value={options.raw ? ResponseMode.RAW : ResponseMode.CLI}
+          options={ResponseModeOptions}
+          onChange={onChangeResponseMode}
         />
 
         <Button

src/redis-cli-panel/constants.ts

@@ -23,3 +23,25 @@ export const Help: { [key: string]: HelpCommand } = {
   ...RedisSearchHelp,
   ...RedisTimeSeriesHelp,
 };
+
+/**
+ * Response Modes
+ */
+export enum ResponseMode {
+  CLI = 'CLI',
+  RAW = 'Raw',
+}
+
+/**
+ * Response Mode options
+ */
+export const ResponseModeOptions = [
+  {
+    label: 'CLI',
+    value: ResponseMode.CLI,
+  },
+  {
+    label: 'Raw',
+    value: ResponseMode.RAW,
+  },
+];

src/redis-cli-panel/styles.ts

@@ -45,5 +45,8 @@ export const Styles = (theme: GrafanaTheme2) => {
       right: 0;
       margin-right: 12px;
     `,
+    cli: css`
+      margin-right: 4px;
+    `,
   };
 };