Scenes: Add 'Import from library' functionality (#83498)

* wip * tests + refactor ad panel func * Add row functionality * update row state only when there are children * Add new row + copy paste panels * Add library panel functionality * tests * PR mods * reafctor + tests * reafctor * fix test * refactor * fix bug on cancelling lib widget * dashboard now saves with lib panel widget * add lib panels widget works in rows as well * split add lib panel func to another PR * Add library panel functionality * refactor * take panelKey into account when getting next panel id in dashboard * fix tests
2025-02-25 18:55:37 -06:00 · 2024-02-28 16:41:12 +02:00
parent 393b12f49f
commit 04539ffccb
10 changed files with 578 additions and 1 deletions
--- a/public/app/features/dashboard-scene/scene/AddLibraryPanelWidget.tsx
+++ b/public/app/features/dashboard-scene/scene/AddLibraryPanelWidget.tsx
@@ -0,0 +1,169 @@
+import { css, cx, keyframes } from '@emotion/css';
+import React from 'react';
+import tinycolor from 'tinycolor2';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import {
+  SceneComponentProps,
+  SceneGridItem,
+  SceneGridLayout,
+  SceneGridRow,
+  SceneObjectBase,
+  SceneObjectState,
+} from '@grafana/scenes';
+import { LibraryPanel } from '@grafana/schema';
+import { IconButton, useStyles2 } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
+import {
+  LibraryPanelsSearch,
+  LibraryPanelsSearchVariant,
+} from 'app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch';
+
+import { getDashboardSceneFor } from '../utils/utils';
+
+import { DashboardScene } from './DashboardScene';
+import { LibraryVizPanel } from './LibraryVizPanel';
+
+export interface AddLibraryPanelWidgetState extends SceneObjectState {
+  key: string;
+}
+
+export class AddLibraryPanelWidget extends SceneObjectBase<AddLibraryPanelWidgetState> {
+  public constructor(state: AddLibraryPanelWidgetState) {
+    super({
+      ...state,
+    });
+  }
+
+  private get _dashboard(): DashboardScene {
+    return getDashboardSceneFor(this);
+  }
+
+  public getDashboard(): DashboardScene {
+    return this._dashboard;
+  }
+
+  public onCancelAddPanel = (evt: React.MouseEvent<HTMLButtonElement>) => {
+    evt.preventDefault();
+
+    if (!(this._dashboard.state.body instanceof SceneGridLayout)) {
+      throw new Error('Trying to remove the library panel widget in a layout that is not SceneGridLayout');
+    }
+
+    const sceneGridLayout = this._dashboard.state.body;
+    const children = [];
+
+    for (const child of sceneGridLayout.state.children) {
+      if (child.state.key !== this.parent?.state.key) {
+        children.push(child);
+      }
+
+      if (child instanceof SceneGridRow) {
+        const rowChildren = [];
+
+        for (const rowChild of child.state.children) {
+          if (rowChild instanceof SceneGridItem && rowChild.state.key !== this.parent?.state.key) {
+            rowChildren.push(rowChild);
+          }
+        }
+
+        child.setState({ children: rowChildren });
+      }
+    }
+
+    sceneGridLayout.setState({ children });
+  };
+
+  public onAddLibraryPanel = (panelInfo: LibraryPanel) => {
+    if (!(this._dashboard.state.body instanceof SceneGridLayout)) {
+      throw new Error('Trying to add a library panel in a layout that is not SceneGridLayout');
+    }
+
+    const body = new LibraryVizPanel({
+      title: 'Panel Title',
+      uid: panelInfo.uid,
+      name: panelInfo.name,
+      panelKey: this.state.key,
+    });
+
+    if (this.parent instanceof SceneGridItem) {
+      this.parent.setState({ body });
+    }
+  };
+
+  static Component = ({ model }: SceneComponentProps<AddLibraryPanelWidget>) => {
+    const dashboard = model.getDashboard();
+    const styles = useStyles2(getStyles);
+
+    return (
+      <div className={styles.wrapper}>
+        <div className={cx('panel-container', styles.callToAction)}>
+          <div className={cx(styles.headerRow, `grid-drag-handle-${dashboard.state.body.state.key}`)}>
+            <span>
+              <Trans i18nKey="library-panel.add-widget.title">Add panel from panel library</Trans>
+            </span>
+            <div className="flex-grow-1" />
+            <IconButton
+              aria-label="Close 'Add Panel' widget"
+              name="times"
+              onClick={model.onCancelAddPanel}
+              tooltip="Close widget"
+            />
+          </div>
+          <LibraryPanelsSearch
+            onClick={model.onAddLibraryPanel}
+            variant={LibraryPanelsSearchVariant.Tight}
+            showPanelFilter
+          />
+        </div>
+      </div>
+    );
+  };
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  const pulsate = keyframes({
+    '0%': {
+      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
+    },
+    '50%': {
+      boxShadow: `0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${tinycolor(theme.colors.primary.main)
+        .darken(20)
+        .toHexString()}`,
+    },
+    '100%': {
+      boxShadow: `0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px  ${theme.colors.primary.main}`,
+    },
+  });
+
+  return {
+    // wrapper is used to make sure box-shadow animation isn't cut off in dashboard page
+    wrapper: css({
+      height: '100%',
+      paddingTop: `${theme.spacing(0.5)}`,
+    }),
+    headerRow: css({
+      display: 'flex',
+      alignItems: 'center',
+      height: '38px',
+      flexShrink: 0,
+      width: '100%',
+      fontSize: theme.typography.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
+      paddingLeft: `${theme.spacing(1)}`,
+      transition: 'background-color 0.1s ease-in-out',
+      cursor: 'move',
+
+      '&:hover': {
+        background: `${theme.colors.background.secondary}`,
+      },
+    }),
+    callToAction: css({
+      overflow: 'hidden',
+      outline: '2px dotted transparent',
+      outlineOffset: '2px',
+      boxShadow: '0 0 0 2px black, 0 0 0px 4px #1f60c4',
+      animation: `${pulsate} 2s ease infinite`,
+    }),
+  };
+};