From 0dcba0952e723d8cf75450dc14bc67016592abe4 Mon Sep 17 00:00:00 2001
From: Alexa V <239999+axelavargas@users.noreply.github.com>
Date: Thu, 10 Aug 2023 15:17:56 +0200
Subject: [PATCH] Dashboards: PanelChrome -  remove untitled placeholder and
 add border when panel is transparent (#73150)

---
 .../components/PanelChrome/HoverWidget.tsx    |  7 ------
 .../components/PanelChrome/PanelChrome.tsx    | 24 +++++++++++++------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx b/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx
index 0d22c26a13a..2bfe7ef5e20 100644
--- a/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx
@@ -48,7 +48,6 @@ export function HoverWidget({ menu, title, dragClass, children, offset = -32, on
           <Icon name="expand-arrows" className={styles.draggableIcon} />
         </div>
       )}
-      {!title && <h6 className={cx(styles.untitled, { [styles.draggable]: !!dragClass }, dragClass)}>Untitled</h6>}
       {children}
       {menu && (
         <PanelMenu
@@ -103,12 +102,6 @@ function getStyles(theme: GrafanaTheme2) {
         background: theme.colors.secondary.main,
       },
     }),
-    untitled: css({
-      color: theme.colors.text.disabled,
-      fontStyle: 'italic',
-      padding: theme.spacing(0, 1),
-      marginBottom: 0,
-    }),
     draggableIcon: css({
       transform: 'rotate(45deg)',
       color: theme.colors.text.secondary,
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 79f795875a7..7cfce1b8f0d 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -122,6 +122,7 @@ export function PanelChrome({
 
   // hover menu is only shown on hover when not on touch devices
   const showOnHoverClass = 'show-on-hover';
+  const isPanelTransparent = displayMode === 'transparent';
 
   const headerHeight = getHeaderHeight(theme, hasHeader);
   const { contentStyle, innerWidth, innerHeight } = getContentStyle(
@@ -139,11 +140,6 @@ export function PanelChrome({
   };
 
   const containerStyles: CSSProperties = { width, height: isOpen ? height : headerHeight };
-  if (displayMode === 'transparent') {
-    containerStyles.backgroundColor = 'transparent';
-    containerStyles.border = 'none';
-  }
-
   const [ref, { width: loadingBarWidth }] = useMeasure<HTMLDivElement>();
 
   /** Old property name now maps to actions */
@@ -214,8 +210,13 @@ export function PanelChrome({
 
   return (
     // tabIndex={0} is needed for keyboard accessibility in the plot area
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    <div className={styles.container} style={containerStyles} data-testid={testid} tabIndex={0} ref={ref}>
+    <div
+      className={cx(styles.container, { [styles.transparentContainer]: isPanelTransparent })}
+      style={containerStyles}
+      data-testid={testid}
+      tabIndex={0} //eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+      ref={ref}
+    >
       <div className={styles.loadingBarContainer}>
         {loadingState === LoadingState.Loading ? (
           <LoadingBar width={loadingBarWidth} ariaLabel="Panel loading bar" />
@@ -361,6 +362,15 @@ const getStyles = (theme: GrafanaTheme2) => {
         },
       },
     }),
+    transparentContainer: css({
+      label: 'panel-transparent-container',
+      backgroundColor: 'transparent',
+      border: '1px solid transparent',
+      boxSizing: 'border-box',
+      '&:hover': {
+        border: `1px solid ${borderColor}`,
+      },
+    }),
     loadingBarContainer: css({
       label: 'panel-loading-bar-container',
       position: 'absolute',