From c372012abcf71299087974400ff340843feb694e Mon Sep 17 00:00:00 2001 From: Bogdan Matei Date: Wed, 2 Apr 2025 20:18:16 +0300 Subject: [PATCH] Dynamic Dashboards: Replace add pane with add dropdown (#103301) --- .../edit-pane/DashboardAddPane.tsx | 105 ------------------ .../edit-pane/DashboardEditPane.tsx | 21 +--- .../actions/DashboardAddButton.tsx | 56 ++++++++-- public/locales/en-US/grafana.json | 33 ++---- 4 files changed, 56 insertions(+), 159 deletions(-) delete mode 100644 public/app/features/dashboard-scene/edit-pane/DashboardAddPane.tsx diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardAddPane.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardAddPane.tsx deleted file mode 100644 index 1edf168e6de..00000000000 --- a/public/app/features/dashboard-scene/edit-pane/DashboardAddPane.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { css } from '@emotion/css'; - -import { GrafanaTheme2 } from '@grafana/data'; -import { selectors } from '@grafana/e2e-selectors'; -import { Box, Card, Icon, IconButton, IconName, useStyles2 } from '@grafana/ui'; -import { t } from 'app/core/internationalization'; - -import { DashboardInteractions } from '../utils/interactions'; -import { getDashboardSceneFor } from '../utils/utils'; - -import { DashboardEditPane } from './DashboardEditPane'; - -export interface Props { - editPane: DashboardEditPane; -} - -interface CardConfig { - icon: IconName; - heading: string; - title: string; - testId: string; - onClick: () => void; - hide?: boolean; -} - -export function DashboardAddPane({ editPane }: Props) { - const styles = useStyles2(getStyles); - const dashboard = getDashboardSceneFor(editPane); - - const cards: CardConfig[] = [ - { - icon: 'graph-bar', - heading: t('dashboard.edit-pane.add.panel.heading', 'Panel'), - title: t('dashboard.edit-pane.add.panel.title', 'A container for visualizations and other content'), - testId: selectors.components.PageToolbar.itemButton('add_visualization'), - onClick: () => dashboard.onCreateNewPanel(), - }, - { - icon: 'import', - heading: t('dashboard.edit-pane.add.lib-panel.heading', 'Library panel'), - title: t( - 'dashboard.edit-pane.add.lib-panel.title', - 'Library panels allow you share and reuse panels between dashboards' - ), - testId: selectors.pages.AddDashboard.itemButton('Add new panel from panel library menu item'), - onClick: () => { - dashboard.onShowAddLibraryPanelDrawer(); - DashboardInteractions.toolbarAddButtonClicked({ item: 'add_library_panel' }); - }, - }, - { - icon: 'list-ul', - heading: t('dashboard.edit-pane.add.row.heading', 'Row'), - title: t('dashboard.edit-pane.add.row.title', 'A group of panels with an optional header'), - testId: selectors.components.PageToolbar.itemButton('add_row'), - onClick: () => dashboard.onCreateNewRow(), - }, - { - icon: 'layer-group', - heading: t('dashboard.edit-pane.add.tab.heading', 'Tab'), - title: t('dashboard.edit-pane.add.tab.title', 'Break up your dashboard into different horizontal tabs'), - testId: selectors.components.PageToolbar.itemButton('add_tab'), - onClick: () => dashboard.onCreateNewTab(), - }, - ]; - - return ( - <> -
- editPane.toggleAddPane()} - aria-label={t('dashboard-scene.dashboard-add-pane.aria-label-close-add-pane', 'Close add pane')} - /> - {t('dashboard.edit-pane.add.title', 'Add element')} -
- - {cards.map(({ icon, heading, title, testId, onClick, hide }) => - hide ? null : ( - - {heading} - - - - - ) - )} - - - ); -} - -const getStyles = (theme: GrafanaTheme2) => ({ - header: css({ - display: 'flex', - alignItems: 'center', - padding: theme.spacing(1, 2), - gap: theme.spacing(1), - borderBottom: `1px solid ${theme.colors.border.weak}`, - }), - figure: css({ - pointerEvents: 'none', - }), -}); diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx index d1f88d9922b..c8393493ef2 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx +++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx @@ -21,7 +21,6 @@ import { t, Trans } from 'app/core/internationalization'; import { isInCloneChain } from '../utils/clone'; import { getDashboardSceneFor } from '../utils/utils'; -import { DashboardAddPane } from './DashboardAddPane'; import { DashboardOutline } from './DashboardOutline'; import { ElementEditPane } from './ElementEditPane'; import { ElementSelection } from './ElementSelection'; @@ -31,7 +30,6 @@ import { useEditableElement } from './useEditableElement'; export interface DashboardEditPaneState extends SceneObjectState { selection?: ElementSelection; selectionContext: ElementSelectionContextState; - showAddPane?: boolean; } export class DashboardEditPane extends SceneObjectBase { @@ -103,10 +101,6 @@ export class DashboardEditPane extends SceneObjectBase { return this.state.selection?.getSelection(); } - public toggleAddPane() { - this.setState({ showAddPane: !this.state.showAddPane }); - } - public selectObject(obj: SceneObject, id: string, { multi, force }: ElementSelectionOnSelectOptions = {}) { if (!force) { if (multi) { @@ -132,7 +126,6 @@ export class DashboardEditPane extends SceneObjectBase { ...this.state.selectionContext, selected, }, - showAddPane: false, }); } @@ -173,10 +166,6 @@ export class DashboardEditPane extends SceneObjectBase { private newObjectAddedToCanvas(obj: SceneObject) { this.selectObject(obj, obj.state.key!); - - if (this.state.showAddPane) { - this.setState({ showAddPane: false }); - } } } @@ -206,7 +195,7 @@ export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleColla } }, [editPane, isCollapsed]); - const { selection, showAddPane } = useSceneObjectState(editPane, { shouldActivateOrKeepAlive: true }); + const { selection } = useSceneObjectState(editPane, { shouldActivateOrKeepAlive: true }); const styles = useStyles2(getStyles); const editableElement = useEditableElement(selection, editPane); const selectedObject = selection?.getFirstObject(); @@ -266,14 +255,6 @@ export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleColla splitter.secondaryProps.style.minHeight = 'unset'; } - if (showAddPane) { - return ( -
- -
- ); - } - return (
diff --git a/public/app/features/dashboard-scene/scene/new-toolbar/actions/DashboardAddButton.tsx b/public/app/features/dashboard-scene/scene/new-toolbar/actions/DashboardAddButton.tsx index 41104d28c31..db6df0067d9 100644 --- a/public/app/features/dashboard-scene/scene/new-toolbar/actions/DashboardAddButton.tsx +++ b/public/app/features/dashboard-scene/scene/new-toolbar/actions/DashboardAddButton.tsx @@ -1,21 +1,55 @@ import { selectors } from '@grafana/e2e-selectors'; -import { Button } from '@grafana/ui'; +import { Button, Dropdown, Menu } from '@grafana/ui'; import { t, Trans } from 'app/core/internationalization'; +import { DashboardInteractions } from '../../../utils/interactions'; import { ToolbarActionProps } from '../types'; export function DashboardAddButton({ dashboard }: ToolbarActionProps) { return ( - + + ); } diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index eb74f4a20b1..672a329ba3b 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -1517,25 +1517,6 @@ } }, "edit-pane": { - "add": { - "lib-panel": { - "heading": "Library panel", - "title": "Library panels allow you share and reuse panels between dashboards" - }, - "panel": { - "heading": "Panel", - "title": "A container for visualizations and other content" - }, - "row": { - "heading": "Row", - "title": "A group of panels with an optional header" - }, - "tab": { - "heading": "Tab", - "title": "Break up your dashboard into different horizontal tabs" - }, - "title": "Add element" - }, "elements": { "dashboard": "Dashboard", "objects": "Objects", @@ -1695,7 +1676,16 @@ "toolbar": { "add": "Add", "add-new": { - "tooltip": "Add panels and other elements" + "button": { + "label": "Add", + "tooltip": "Add panels and other elements" + }, + "menu": { + "lib-panel": "Library panel", + "panel": "Panel", + "row": "Row", + "tab": "Tab" + } }, "alert-rules": "Alert rules", "back-to-dashboard": "Back to dashboard", @@ -1904,9 +1894,6 @@ "custom-options": "Custom options", "selection-options": "Selection options" }, - "dashboard-add-pane": { - "aria-label-close-add-pane": "Close add pane" - }, "dashboard-edit-pane-renderer": { "outline": "Outline" },