Canvas: Button element (alpha) (#57491)

This commit is contained in:
Adela Almasan 2022-10-23 19:39:10 -05:00 committed by GitHub
parent 6e3de8d016
commit 73c215ae41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 52 additions and 17 deletions

View File

@ -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"]

View File

@ -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,

View File

@ -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,

View File

@ -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 (
<>

View File

@ -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;

View File

@ -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;
}