From aa956f56caaaa5346eecf98cbff12d2203923ff4 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 18 Dec 2024 00:23:47 -0500
Subject: [PATCH] Add missing dependency

---
 .../presentation_panel_hover_actions.tsx      | 69 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 3 deletions(-)

diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx
index ffec5ef94a184..b89798652d545 100644
--- a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx
+++ b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx
@@ -122,8 +122,14 @@ export const PresentationPanelHoverActions = ({
 
   const { euiTheme } = useEuiTheme();
 
-  const EDIT_MODE_OUTLINE = useMemo(()=> `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`,[euiTheme.border.width.thin, euiTheme.colors.borderBaseFormsControl]);
-  const VIEW_MODE_OUTLINE = useMemo(()=> `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,[euiTheme.border.width.thin, euiTheme.colors.borderBasePlain]);
+  const EDIT_MODE_OUTLINE = useMemo(
+    () => `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`,
+    [euiTheme.border.width.thin, euiTheme.colors.borderBaseFormsControl]
+  );
+  const VIEW_MODE_OUTLINE = useMemo(
+    () => `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,
+    [euiTheme.border.width.thin, euiTheme.colors.borderBasePlain]
+  );
 
   const ALL_ROUNDED_CORNERS = `
   border-radius: ${euiTheme.border.radius.medium};
@@ -471,11 +477,68 @@ export const PresentationPanelHoverActions = ({
         />
       </button>
     ),
-    [setDragHandle]
+    [setDragHandle, euiTheme.size.xs]
   );
 
   const hasHoverActions = quickActionElements.length || contextMenuPanels.lastIndexOf.length;
 
+  const presentationPanelHoverActionsAnchorStyles = useMemo(
+    () => `
+        border-radius: ${euiTheme.border.radius.medium};
+        position: relative;
+        height: 100%;
+
+        .embPanel {
+          ${
+            showBorder
+              ? `
+              outline: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE};
+            `
+              : ''
+          }
+        }
+
+        .embPanel__hoverActions {
+          opacity: 0;
+          padding: calc(${euiTheme.size.xs} - 1px);
+          display: flex;
+          flex-wrap: nowrap;
+
+          background-color: ${euiTheme.colors.backgroundBasePlain};
+          height: ${euiTheme.size.xl};
+
+          pointer-events: all; // Re-enable pointer-events for hover actions
+        }
+
+        &:hover,
+        &:focus-within,
+        &.embPanel__hoverActionsAnchor--lockHoverActions {
+          .embPanel {
+            outline: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE};
+            z-index: ${euiTheme.levels.menu};
+          }
+          .embPanel__hoverActionsWrapper {
+            z-index: ${euiTheme.levels.toast};
+            top: -${euiTheme.size.xl};
+
+            .embPanel__hoverActions {
+              opacity: 1;
+            }
+          }
+        }
+      `,
+    [
+      euiTheme.border.radius.medium,
+      euiTheme.size.xs,
+      EDIT_MODE_OUTLINE,
+      VIEW_MODE_OUTLINE,
+      euiTheme.colors.backgroundBasePlain,
+      euiTheme.size.xl,
+      euiTheme.levels.menu,
+      euiTheme.levels.toast,
+    ]
+  );
+
   return (
     <div
       onMouseOver={updateCombineHoverActions}