Canvas: Add support for selecting the button variant (#74782)

public/app/features/canvas/elements/button.tsx

@@ -6,18 +6,21 @@ import { Button } from '@grafana/ui';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
 import { APIEditor, APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/element/APIEditor';
+import { ButtonStyleConfig, ButtonStyleEditor } from 'app/plugins/panel/canvas/editor/element/ButtonStyleEditor';
 import { HttpRequestMethod } from 'app/plugins/panel/canvas/panelcfg.gen';
 
-import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element';
+import { CanvasElementItem, CanvasElementProps } from '../element';
 
 interface ButtonData {
   text?: string;
   api?: APIEditorConfig;
+  style?: ButtonStyleConfig;
 }
 
 interface ButtonConfig {
   text?: TextDimensionConfig;
   api?: APIEditorConfig;
+  style?: ButtonStyleConfig;
 }
 
 export const defaultApiConfig: APIEditorConfig = {
@@ -27,6 +30,10 @@ export const defaultApiConfig: APIEditorConfig = {
   contentType: 'application/json',
 };
 
+export const defaultStyleConfig: ButtonStyleConfig = {
+  variant: 'primary',
+};
+
 class ButtonDisplay extends PureComponent<CanvasElementProps<ButtonConfig, ButtonData>> {
   render() {
     const { data } = this.props;
@@ -37,7 +44,7 @@ class ButtonDisplay extends PureComponent<CanvasElementProps<ButtonConfig, Butto
     };
 
     return (
-      <Button type="submit" onClick={onClick} style={{ background: defaultBgColor }}>
+      <Button type="submit" variant={data?.style?.variant} onClick={onClick}>
         {data?.text}
       </Button>
     );
@@ -65,6 +72,7 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
         fixed: 'Button',
       },
       api: defaultApiConfig,
+      style: defaultStyleConfig,
     },
     background: {
       color: {
@@ -95,6 +103,7 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
     const data: ButtonData = {
       text: cfg?.text ? ctx.getText(cfg.text).value() : '',
       api: getCfgApi(),
+      style: cfg?.style ?? defaultStyleConfig,
     };
 
     return data;
@@ -111,6 +120,13 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
         name: 'Text',
         editor: TextDimensionEditor,
       })
+      .addCustomEditor({
+        category,
+        id: 'styleSelector',
+        path: 'config.style',
+        name: 'Style',
+        editor: ButtonStyleEditor,
+      })
       .addCustomEditor({
         category,
         id: 'apiSelector',

public/app/plugins/panel/canvas/editor/element/APIEditor.tsx

@@ -91,7 +91,7 @@ const contentTypeOptions: SelectableValue[] = [
 ];
 
 export function APIEditor({ value, context, onChange }: Props) {
-  const LABEL_WIDTH = 9;
+  const LABEL_WIDTH = 13;
 
   if (!value) {
     value = defaultApiConfig;
@@ -185,16 +185,17 @@ export function APIEditor({ value, context, onChange }: Props) {
       </InlineFieldRow>
       {value?.method === HttpRequestMethod.POST && (
         <>
-          <Field label="Content-Type">
-            <Select
-              minMenuHeight={200}
-              options={contentTypeOptions}
-              allowCustomValue={true}
-              formatCreateLabel={formatCreateLabel}
-              value={value?.contentType}
-              onChange={onContentTypeChange}
-            />
-          </Field>
+          <InlineFieldRow>
+            <InlineField label="Content-Type" labelWidth={LABEL_WIDTH} grow={true}>
+              <Select
+                options={contentTypeOptions}
+                allowCustomValue={true}
+                formatCreateLabel={formatCreateLabel}
+                value={value?.contentType}
+                onChange={onContentTypeChange}
+              />
+            </InlineField>
+          </InlineFieldRow>
           {value?.contentType && (
             <Field label="Payload">
               <StringValueEditor

public/app/plugins/panel/canvas/editor/element/ButtonStyleEditor.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+
+import { SelectableValue, StandardEditorProps } from '@grafana/data';
+import { ButtonVariant, InlineField, InlineFieldRow, Select } from '@grafana/ui';
+import { defaultStyleConfig } from 'app/features/canvas/elements/button';
+
+export interface ButtonStyleConfig {
+  variant: ButtonVariant;
+}
+
+type Props = StandardEditorProps<ButtonStyleConfig>;
+
+const variantOptions: SelectableValue[] = [
+  { label: 'primary', value: 'primary' },
+  { label: 'secondary', value: 'secondary' },
+  { label: 'success', value: 'success' },
+  { label: 'destructive', value: 'destructive' },
+];
+
+export const ButtonStyleEditor = ({ value, onChange }: Props) => {
+  if (!value) {
+    value = defaultStyleConfig;
+  }
+
+  const onVariantChange = useCallback(
+    (variant: SelectableValue<ButtonVariant>) => {
+      onChange({
+        ...value,
+        variant: variant?.value ?? defaultStyleConfig.variant,
+      });
+    },
+    [onChange, value]
+  );
+
+  return (
+    <>
+      <InlineFieldRow>
+        <InlineField label="Variant" grow={true}>
+          <Select options={variantOptions} value={value?.variant} onChange={onVariantChange} />
+        </InlineField>
+      </InlineFieldRow>
+    </>
+  );
+};