From f80db5984d74b0e2203d0f7a09ed5ee59d9a39a8 Mon Sep 17 00:00:00 2001
From: Kerry Gallagher <k.gallagher.05@gmail.com>
Date: Thu, 25 Jun 2020 10:49:18 +0100
Subject: [PATCH] Move horizontal button popover menu to a shared components so
 log rate table can use it

---
 .../horizontal_box_button_with_popover.tsx    | 89 +++++++++++++++++++
 .../log_entry_actions_column.tsx              | 53 ++++-------
 2 files changed, 106 insertions(+), 36 deletions(-)
 create mode 100644 x-pack/plugins/infra/public/components/horizontal_box_button_with_popover.tsx

diff --git a/x-pack/plugins/infra/public/components/horizontal_box_button_with_popover.tsx b/x-pack/plugins/infra/public/components/horizontal_box_button_with_popover.tsx
new file mode 100644
index 000000000000..251a82416dbb
--- /dev/null
+++ b/x-pack/plugins/infra/public/components/horizontal_box_button_with_popover.tsx
@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useCallback, useState } from 'react';
+import {
+  EuiButtonIcon,
+  ButtonSize,
+  EuiPopover,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+} from '@elastic/eui';
+import { euiStyled } from '../../../observability/public';
+
+interface Props {
+  buttonSize?: ButtonSize;
+  ariaLabel?: string;
+  onMenuOpen?: () => void;
+  onMenuClose?: () => void;
+  menuItems: Array<{
+    key: string;
+    label: string;
+    onClick: () => void;
+  }>;
+}
+
+export const HorizontalBoxButtonWithPopoverMenu: React.FC<Props> = ({
+  buttonSize,
+  ariaLabel,
+  onMenuOpen,
+  onMenuClose,
+  menuItems,
+}) => {
+  const [isOpen, setOpenState] = useState(false);
+
+  const handleOpenMenu = useCallback(() => {
+    setOpenState(true);
+    if (onMenuOpen) {
+      onMenuOpen();
+    }
+  }, [setOpenState, onMenuOpen]);
+
+  const handleCloseMenu = useCallback(() => {
+    setOpenState(false);
+    if (onMenuClose) {
+      onMenuClose();
+    }
+  }, [setOpenState, onMenuClose]);
+
+  const button = (
+    <ButtonWrapper>
+      <EuiButtonIcon
+        aria-label={ariaLabel}
+        color="ghost"
+        iconType="boxesHorizontal"
+        onClick={handleOpenMenu}
+        size={buttonSize}
+      />
+    </ButtonWrapper>
+  );
+
+  const items = menuItems.map((item) => {
+    return (
+      <EuiContextMenuItem
+        key={item.key}
+        onClick={() => {
+          handleCloseMenu();
+          item.onClick();
+        }}
+      >
+        {item.label}
+      </EuiContextMenuItem>
+    );
+  });
+  return (
+    <EuiPopover closePopover={handleCloseMenu} isOpen={isOpen} button={button} ownFocus={true}>
+      <EuiContextMenuPanel items={items} />
+    </EuiPopover>
+  );
+};
+
+const ButtonWrapper = euiStyled.div`
+  background: ${(props) => props.theme.eui.euiColorPrimary};
+  border-radius: 50%;
+  padding: 4px;
+  transform: translateY(-6px);
+`;
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx
index e27de7fd6b5a..1d79abe11af3 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_actions_column.tsx
@@ -5,11 +5,10 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiButtonIcon, EuiPopover, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
 import { LogEntryColumnContent } from './log_entry_column';
 import { euiStyled } from '../../../../../observability/public';
+import { HorizontalBoxButtonWithPopoverMenu } from '../../horizontal_box_button_with_popover';
 
 interface LogEntryActionsColumnProps {
   isHovered: boolean;
@@ -59,43 +58,32 @@ export const LogEntryActionsColumn: React.FC<LogEntryActionsColumnProps> = ({
     onViewLogInContext?.();
   }, [onCloseMenu, onViewLogInContext]);
 
-  const button = (
-    <ButtonWrapper>
-      <EuiButtonIcon
-        aria-label={MENU_LABEL}
-        color="ghost"
-        iconType="boxesHorizontal"
-        onClick={onOpenMenu}
-      />
-    </ButtonWrapper>
-  );
-
   const items = [
-    <EuiContextMenuItem key="log_details" onClick={handleClickViewDetails}>
-      {LOG_DETAILS_LABEL}
-    </EuiContextMenuItem>,
+    {
+      key: 'log_details',
+      onClick: handleClickViewDetails,
+      label: LOG_DETAILS_LABEL,
+    },
   ];
 
   if (onViewLogInContext !== undefined) {
-    items.push(
-      <EuiContextMenuItem key="view_in_context" onClick={handleClickViewInContext}>
-        {LOG_VIEW_IN_CONTEXT_LABEL}
-      </EuiContextMenuItem>
-    );
+    items.push({
+      key: 'view_in_context',
+      onClick: handleClickViewInContext,
+      label: LOG_VIEW_IN_CONTEXT_LABEL,
+    });
   }
 
   return (
     <ActionsColumnContent>
       {isHovered || isMenuOpen ? (
         <AbsoluteWrapper>
-          <EuiPopover
-            closePopover={onCloseMenu}
-            isOpen={isMenuOpen}
-            button={button}
-            ownFocus={true}
-          >
-            <EuiContextMenuPanel items={items} />
-          </EuiPopover>
+          <HorizontalBoxButtonWithPopoverMenu
+            onMenuOpen={onOpenMenu}
+            onMenuClose={onCloseMenu}
+            ariaLabel={MENU_LABEL}
+            menuItems={items}
+          />
         </AbsoluteWrapper>
       ) : null}
     </ActionsColumnContent>
@@ -107,13 +95,6 @@ const ActionsColumnContent = euiStyled(LogEntryColumnContent)`
   user-select: none;
 `;
 
-const ButtonWrapper = euiStyled.div`
-  background: ${(props) => props.theme.eui.euiColorPrimary};
-  border-radius: 50%;
-  padding: 4px;
-  transform: translateY(-6px);
-`;
-
 // this prevents the button from influencing the line height
 const AbsoluteWrapper = euiStyled.div`
   position: absolute;