Variant was not properly saved

As reported by #34 `undefined` is not saved in Grafana - so the panel was not properly working after saving/reloading it.

This commit fixes this.

src/ButtonPanel.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Button, IconName } from '@grafana/ui';
+import { Button, IconName, ButtonVariant } from '@grafana/ui';
 import { PanelProps } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 import { ButtonPanelOptions, ButtonPanelState } from 'types';
@@ -131,7 +131,7 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
       }
     };
     const customStyle = () => {
-      if (this.props.options.variant === undefined) {
+      if (this.props.options.variant === 'custom') {
         return {
           // Resaet Grafana defaults
           background: 'none',
@@ -144,6 +144,13 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
         return {};
       }
     };
+    const variant = () : ButtonVariant | undefined => {
+      if (this.props.options.variant === 'custom') {
+        return undefined;
+      } else {
+        return this.props.options.variant as ButtonVariant;
+      }
+    }
     const buttonText = () => {
       return interpolateVariables(this.props.options.text);
     };
@@ -155,7 +162,7 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
     return (
       <div className={getOrientation()}>
         <Button
-          variant={this.props.options.variant}
+          variant={variant()}
           title={this.state.response}
           size="lg"
           className={apiStateClassName()}

src/module.ts

@@ -104,7 +104,7 @@ export const plugin = new PanelPlugin<ButtonPanelOptions>(ButtonPanel).setPanelO
             label: 'Link',
           },
           {
-            value: undefined,
+            value: 'custom',
             label: 'Custom',
           },
         ],
@@ -118,7 +118,7 @@ export const plugin = new PanelPlugin<ButtonPanelOptions>(ButtonPanel).setPanelO
       settings: {
         disableNamedColors: true,
       },
-      showIf: config => config.variant === undefined,
+      showIf: config => config.variant == 'custom',
     })
     .addColorPicker({
       path: 'backgroundColor',
@@ -127,7 +127,7 @@ export const plugin = new PanelPlugin<ButtonPanelOptions>(ButtonPanel).setPanelO
       settings: {
         disableNamedColors: true,
       },
-      showIf: config => config.variant === undefined,
+      showIf: config => config.variant == 'custom',
     })
     .addRadio({
       path: 'orientation',

src/types.ts

@@ -15,7 +15,7 @@ export interface ButtonPanelOptions {
   params: Array<[string, string]>;
 
   text: string;
-  variant: ButtonVariant | undefined;
+  variant: ButtonVariant | 'custom';
   foregroundColor?: string;
   backgroundColor?: string;
   icon?: IconName;