From 13e306bbfbdc9d648c7a7ea8d894e9d3ef3db9a3 Mon Sep 17 00:00:00 2001 From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com> Date: Mon, 24 Oct 2022 13:00:38 -0500 Subject: [PATCH] Canvas: Button element (alpha) (#57491) (#57557) (cherry picked from commit 73c215ae410ddc793cf815c53256fb880eeeb76d) --- .betterer.results | 3 +- .../app/features/canvas/elements/button.tsx | 2 + public/app/features/canvas/registry.ts | 2 +- .../canvas/editor/TreeNavigationEditor.tsx | 2 +- .../panel/canvas/editor/elementEditor.tsx | 4 +- public/app/plugins/panel/canvas/utils.ts | 56 +++++++++++++++---- 6 files changed, 52 insertions(+), 17 deletions(-) diff --git a/.betterer.results b/.betterer.results index adfead33213..f6aa2cc6c61 100644 --- a/.betterer.results +++ b/.betterer.results @@ -7851,8 +7851,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"] diff --git a/public/app/features/canvas/elements/button.tsx b/public/app/features/canvas/elements/button.tsx index 0be89ccbb23..88ad205b211 100644 --- a/public/app/features/canvas/elements/button.tsx +++ b/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 = { id: 'button', name: 'Button', description: 'Button', + state: PluginState.alpha, display: ButtonDisplay, diff --git a/public/app/features/canvas/registry.ts b/public/app/features/canvas/registry.ts index b65c26bd4e0..e6abfd9ba74 100644 --- a/public/app/features/canvas/registry.ts +++ b/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(() => [ ...defaultElementItems, diff --git a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx index 953790ceda4..ee77fed08af 100644 --- a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx @@ -141,7 +141,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps diff --git a/public/app/plugins/panel/canvas/editor/elementEditor.tsx b/public/app/plugins/panel/canvas/editor/elementEditor.tsx index 18aa5a5dc0f..78935c85039 100644 --- a/public/app/plugins/panel/canvas/editor/elementEditor.tsx +++ b/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; diff --git a/public/app/plugins/panel/canvas/utils.ts b/public/app/plugins/panel/canvas/utils.ts index 079d79de59e..85b0a0443ae 100644 --- a/public/app/plugins/panel/canvas/utils.ts +++ b/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) => { - 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>; + current: Array>; +} + +export function getElementTypesOptions( + items: Array>, + current: string | undefined +): RegistrySelectInfo { + const selectables: RegistrySelectInfo = { options: [], current: [] }; + const alpha: Array> = []; + + for (const item of items) { + const option: SelectableValue = { 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; }