From d3b550c230ccf9118880865e97b5d640c20afbf1 Mon Sep 17 00:00:00 2001 From: Sergej-Vlasov <37613182+Sergej-Vlasov@users.noreply.github.com> Date: Mon, 3 Mar 2025 10:49:32 +0000 Subject: [PATCH] Dashboards: Redesign edit pane of dashboard and viz panels (#101437) * adjust options pane category component and shared logic * redesign dashboard edit pane * clean up * redesign viz panel edit panes * address comments * updated i18n * clean up * address comments --- .../edit-pane/DashboardEditableElement.tsx | 24 ++-- .../edit-pane/EditPaneHeader.tsx | 57 ++++++++ .../edit-pane/ElementEditPane.tsx | 2 + .../MultiSelectedVizPanelsEditableElement.tsx | 40 +++--- .../edit-pane/VizPanelEditableElement.tsx | 136 +++++++++++------- .../DashboardLayoutSelector.tsx | 7 +- .../scene/types/EditableDashboardElement.ts | 10 ++ .../MultiSelectedEditableDashboardElement.ts | 10 ++ .../PanelEditor/OptionsPaneCategory.tsx | 42 ++++-- .../OptionsPaneCategoryDescriptor.tsx | 1 + public/locales/en-US/grafana.json | 19 ++- public/locales/pseudo-LOCALE/grafana.json | 19 ++- 12 files changed, 252 insertions(+), 115 deletions(-) create mode 100644 public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx index 77255075393..ae3085bc055 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx +++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx @@ -6,7 +6,7 @@ import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor'; import { DashboardScene } from '../scene/DashboardScene'; -import { useLayoutCategory } from '../scene/layouts-shared/DashboardLayoutSelector'; +import { DashboardLayoutSelector } from '../scene/layouts-shared/DashboardLayoutSelector'; import { EditableDashboardElement, EditableDashboardElementInfo } from '../scene/types/EditableDashboardElement'; export class DashboardEditableElement implements EditableDashboardElement { @@ -28,29 +28,29 @@ export class DashboardEditableElement implements EditableDashboardElement { return new OptionsPaneCategoryDescriptor({ title: t('dashboard.options.title', 'Dashboard options'), id: 'dashboard-options', - isOpenDefault: true, + isOpenable: false, }) .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.options.title-option', 'Title'), - render: function renderTitle() { - return ; - }, + render: () => , }) ) .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.options.description', 'Description'), - render: function renderTitle() { - return ; - }, + render: () => , + }) + ) + .addItem( + new OptionsPaneItemDescriptor({ + title: t('dashboard.layout.common.layout', 'Layout'), + render: () => , }) ); - }, [dashboard]); + }, [body, dashboard]); - const layoutCategory = useLayoutCategory(body); - - return [dashboardOptions, layoutCategory]; + return [dashboardOptions]; } } diff --git a/public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx b/public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx new file mode 100644 index 00000000000..653daf384f2 --- /dev/null +++ b/public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx @@ -0,0 +1,57 @@ +import { Dropdown, Button, IconButton, Menu, Stack, Icon } from '@grafana/ui'; +import { t } from 'app/core/internationalization'; + +interface EditPaneHeaderProps { + title: string; + onDelete?: () => void; + onCopy?: () => void; + onDuplicate?: () => void; +} + +export const EditPaneHeader = ({ title, onDelete, onCopy, onDuplicate }: EditPaneHeaderProps) => { + const addCopyOrDuplicate = onCopy || onDuplicate; + return ( + + {title} + + {addCopyOrDuplicate ? ( + }> + + + ) : null} + + + + + ); +}; + +type MenuItemsProps = { + onCopy?: () => void; + onDuplicate?: () => void; +}; + +const MenuItems = ({ onCopy, onDuplicate }: MenuItemsProps) => { + return ( + + {onCopy ? : null} + {onDuplicate ? ( + + ) : null} + + ); +}; diff --git a/public/app/features/dashboard-scene/edit-pane/ElementEditPane.tsx b/public/app/features/dashboard-scene/edit-pane/ElementEditPane.tsx index 47cd84ade4b..01b9a3f2398 100644 --- a/public/app/features/dashboard-scene/edit-pane/ElementEditPane.tsx +++ b/public/app/features/dashboard-scene/edit-pane/ElementEditPane.tsx @@ -24,6 +24,8 @@ export function ElementEditPane({ element }: Props) { title={elementInfo.name} isOpenDefault={true} className={styles.noBorderTop} + renderTitle={element.renderTitle} + isOpenable={element.isOpenable} >
{element.renderActions()}
diff --git a/public/app/features/dashboard-scene/edit-pane/MultiSelectedVizPanelsEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/MultiSelectedVizPanelsEditableElement.tsx index afa29772adc..3e6a7fa98ae 100644 --- a/public/app/features/dashboard-scene/edit-pane/MultiSelectedVizPanelsEditableElement.tsx +++ b/public/app/features/dashboard-scene/edit-pane/MultiSelectedVizPanelsEditableElement.tsx @@ -1,14 +1,15 @@ -import { ReactNode } from 'react'; import { v4 as uuidv4 } from 'uuid'; import { VizPanel } from '@grafana/scenes'; -import { Button, Stack, Text } from '@grafana/ui'; -import { t, Trans } from 'app/core/internationalization'; +import { t } from 'app/core/internationalization'; +import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; import { EditableDashboardElementInfo } from '../scene/types/EditableDashboardElement'; import { MultiSelectedEditableDashboardElement } from '../scene/types/MultiSelectedEditableDashboardElement'; import { dashboardSceneGraph } from '../utils/dashboardSceneGraph'; +import { EditPaneHeader } from './EditPaneHeader'; + export class MultiSelectedVizPanelsEditableElement implements MultiSelectedEditableDashboardElement { public readonly isMultiSelectedEditableDashboardElement = true; public readonly key: string; @@ -21,23 +22,22 @@ export class MultiSelectedVizPanelsEditableElement implements MultiSelectedEdita return { name: t('dashboard.edit-pane.elements.panels', 'Panels'), typeId: 'panels', icon: 'folder' }; } - renderActions(): ReactNode { - return ( - - - - No. of panels selected: {{ length }} - - - - -