PanelChrome: Allow panel to be dragged if set as draggable from the outside (#61698)

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -27,7 +27,8 @@ export interface PanelChromeProps {
   titleItems?: ReactNode[];
   menu?: ReactElement | (() => ReactElement);
   /** dragClass, hoverHeader not yet implemented */
-  // dragClass?: string;
+  dragClass?: string;
+  dragClassCancel?: string;
   hoverHeader?: boolean;
   loadingState?: LoadingState;
   /**
@@ -69,6 +70,8 @@ export function PanelChrome({
   statusMessage,
   statusMessageOnClick,
   leftItems,
+  dragClass,
+  dragClassCancel,
 }: PanelChromeProps) {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
@@ -91,6 +94,7 @@ export function PanelChrome({
 
   const headerStyles: CSSProperties = {
     height: headerHeight,
+    cursor: dragClass ? 'move' : 'auto',
   };
 
   const itemStyles: CSSProperties = {
@@ -107,17 +111,17 @@ export function PanelChrome({
         {loadingState === LoadingState.Loading ? <LoadingBar width={'28%'} height={'2px'} /> : null}
       </div>
 
-      <div className={styles.headerContainer} style={headerStyles} data-testid="header-container">
+      <div className={cx(styles.headerContainer, dragClass)} style={headerStyles} data-testid="header-container">
         {title && (
           <h6 title={title} className={styles.title}>
             {title}
           </h6>
         )}
 
-        <PanelDescription description={description} />
+        <PanelDescription description={description} className={dragClassCancel} />
 
         {titleItems.length > 0 && (
-          <div className={styles.titleItems} data-testid="title-items-container">
+          <div className={cx(styles.titleItems, dragClassCancel)} data-testid="title-items-container">
             {titleItems.map((item) => item)}
           </div>
         )}
@@ -139,7 +143,7 @@ export function PanelChrome({
                 icon="ellipsis-v"
                 narrow
                 data-testid="panel-menu-button"
-                className={cx(styles.menuItem, 'menu-icon')}
+                className={cx(styles.menuItem, dragClassCancel, 'menu-icon')}
               />
             </Dropdown>
           )}
@@ -148,7 +152,11 @@ export function PanelChrome({
         </div>
 
         {statusMessage && (
-          <PanelStatus className={styles.errorContainer} message={statusMessage} onClick={statusMessageOnClick} />
+          <PanelStatus
+            className={cx(styles.errorContainer, dragClassCancel)}
+            message={statusMessage}
+            onClick={statusMessageOnClick}
+          />
         )}
       </div>
 

packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React from 'react';
 
 import { Icon } from '../Icon/Icon';
@@ -8,9 +8,10 @@ import { TitleItem } from './TitleItem';
 
 interface Props {
   description: string | (() => string);
+  className?: string;
 }
 
-export function PanelDescription({ description }: Props) {
+export function PanelDescription({ description, className }: Props) {
   const styles = getStyles();
 
   const getDescriptionContent = (): JSX.Element => {
@@ -26,7 +27,7 @@ export function PanelDescription({ description }: Props) {
 
   return description !== '' ? (
     <Tooltip interactive content={getDescriptionContent}>
-      <TitleItem className={styles.description}>
+      <TitleItem className={cx(className, styles.description)}>
         <Icon name="info-circle" size="lg" title="description" />
       </TitleItem>
     </Tooltip>

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -240,6 +240,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
                   cols={GRID_COLUMN_COUNT}
                   rowHeight={GRID_CELL_HEIGHT}
                   draggableHandle=".grid-drag-handle"
+                  draggableCancel=".grid-drag-cancel"
                   layout={this.buildLayout()}
                   onDragStop={this.onDragStop}
                   onResize={this.onResize}

public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx

@@ -636,6 +636,8 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     const title = panel.getDisplayTitle();
     const padding: PanelPadding = plugin.noPadding ? 'none' : 'md';
 
+    const dragClass = !(isViewing || isEditing) ? 'grid-drag-handle' : '';
+
     const titleItems = [
       <PanelHeaderTitleItems
         key="title-items"
@@ -674,6 +676,8 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
           description={!!panel.description ? this.onShowPanelDescription : undefined}
           titleItems={titleItems}
           menu={menu}
+          dragClass={dragClass}
+          dragClassCancel="grid-drag-cancel"
           padding={padding}
         >
           {(innerWidth, innerHeight) => (