Canvas: Button element (alpha) (#57491)

.betterer.results

@@ -7519,8 +7519,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
     ],
     "public/app/plugins/panel/canvas/utils.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/plugins/panel/dashlist/module.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]

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

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 
+import { PluginState } from '@grafana/data/src';
 import { Button } from '@grafana/ui';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
@@ -39,6 +40,7 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
   id: 'button',
   name: 'Button',
   description: 'Button',
+  state: PluginState.alpha,
 
   display: ButtonDisplay,
 

public/app/features/canvas/registry.ts

@@ -25,7 +25,7 @@ export const defaultElementItems = [
   iconItem,
 ];
 
-const advancedElementItems = [buttonItem, windTurbineItem, droneTopItem, droneFrontItem, droneSideItem];
+export const advancedElementItems = [buttonItem, windTurbineItem, droneTopItem, droneFrontItem, droneSideItem];
 
 export const canvasElementRegistry = new Registry<CanvasElementItem>(() => [
   ...defaultElementItems,

public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx

@@ -141,7 +141,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
     }
   };
 
-  const typeOptions = getElementTypes(settings.scene.shouldShowAdvancedTypes);
+  const typeOptions = getElementTypes(settings.scene.shouldShowAdvancedTypes).options;
 
   return (
     <>

public/app/plugins/panel/canvas/editor/elementEditor.tsx

@@ -63,8 +63,8 @@ export function getElementEditor(opts: CanvasEditorOptions): NestedPanelOptions<
     // Dynamically fill the selected element
     build: (builder, context) => {
       const { options } = opts.element;
-      const current = options?.type ? [options.type] : [DEFAULT_CANVAS_ELEMENT_CONFIG.type];
-      const layerTypes = getElementTypes(opts.scene.shouldShowAdvancedTypes, current);
+      const current = options?.type ? options.type : DEFAULT_CANVAS_ELEMENT_CONFIG.type;
+      const layerTypes = getElementTypes(opts.scene.shouldShowAdvancedTypes, current).options;
 
       const isUnsupported =
         !opts.scene.shouldShowAdvancedTypes && !defaultElementItems.filter((item) => item.id === options?.type).length;

public/app/plugins/panel/canvas/utils.ts

@@ -1,7 +1,8 @@
-import { AppEvents } from '@grafana/data/src';
+import { AppEvents, PluginState, SelectableValue } from '@grafana/data';
+import { hasAlphaPanels } from 'app/core/config';
 
 import appEvents from '../../../core/app_events';
-import { CanvasElementItem, canvasElementRegistry, defaultElementItems } from '../../../features/canvas';
+import { advancedElementItems, CanvasElementItem, defaultElementItems } from '../../../features/canvas';
 import { ElementState } from '../../../features/canvas/runtime/element';
 import { FrameState } from '../../../features/canvas/runtime/frame';
 import { Scene, SelectionParams } from '../../../features/canvas/runtime/scene';
@@ -25,13 +26,46 @@ export function doSelect(scene: Scene, element: ElementState | FrameState) {
   }
 }
 
-export function getElementTypes(
-  shouldShowAdvancedTypes: boolean | undefined,
-  current: string[] | undefined = undefined
-) {
-  return shouldShowAdvancedTypes
-    ? canvasElementRegistry.selectOptions(current, (elementItem) => elementItem.id !== 'button').options
-    : canvasElementRegistry.selectOptions(current, (elementItem: CanvasElementItem<any, any>) => {
-        return !!defaultElementItems.filter((item) => item.id === elementItem.id).length;
-      }).options;
+export function getElementTypes(shouldShowAdvancedTypes: boolean | undefined, current?: string): RegistrySelectInfo {
+  if (shouldShowAdvancedTypes) {
+    return getElementTypesOptions([...defaultElementItems, ...advancedElementItems], current);
+  }
+
+  return getElementTypesOptions([...defaultElementItems], current);
+}
+
+interface RegistrySelectInfo {
+  options: Array<SelectableValue<string>>;
+  current: Array<SelectableValue<string>>;
+}
+
+export function getElementTypesOptions(
+  items: Array<CanvasElementItem<any>>,
+  current: string | undefined
+): RegistrySelectInfo {
+  const selectables: RegistrySelectInfo = { options: [], current: [] };
+  const alpha: Array<SelectableValue<string>> = [];
+
+  for (const item of items) {
+    const option: SelectableValue<string> = { label: item.name, value: item.id, description: item.description };
+    if (item.state === PluginState.alpha) {
+      if (!hasAlphaPanels) {
+        continue;
+      }
+      option.label = `${item.name} (Alpha)`;
+      alpha.push(option);
+    } else {
+      selectables.options.push(option);
+    }
+
+    if (item.id === current) {
+      selectables.current.push(option);
+    }
+  }
+
+  for (const a of alpha) {
+    selectables.options.push(a);
+  }
+
+  return selectables;
 }