From db51e963de5cd362cd52d24462b33c237c8f8514 Mon Sep 17 00:00:00 2001
From: Alexa V <239999+axelavargas@users.noreply.github.com>
Date: Mon, 23 Jan 2023 10:38:38 +0000
Subject: [PATCH] PanelChrome: Allow panel to be dragged if set as draggable
 from the outside (#61698)

---
 .../components/PanelChrome/PanelChrome.tsx    | 20 +++++++++++++------
 .../PanelChrome/PanelDescription.tsx          |  7 ++++---
 .../dashboard/dashgrid/DashboardGrid.tsx      |  1 +
 .../dashboard/dashgrid/PanelStateWrapper.tsx  |  4 ++++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 7434e9da348..9f91c0cc315 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/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>
 
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx
index 33b7d876bfe..4f7a74dc7e3 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx
+++ b/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>
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 02a2204fbb7..37646ea43a9 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/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}
diff --git a/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx b/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx
index bd84355854a..f7602d50dac 100644
--- a/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx
+++ b/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) => (