From 94f2aed97fb333e13cf01ac00ca87d5c9213477d Mon Sep 17 00:00:00 2001
From: suomiy <suomiy@gmail.com>
Date: Thu, 22 Aug 2019 11:20:18 +0200
Subject: [PATCH] shared: PopoverStatus - support active icon and showing
 popover without header

---
 .../src/components/status/PopoverStatus.tsx   | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/console-shared/src/components/status/PopoverStatus.tsx b/frontend/packages/console-shared/src/components/status/PopoverStatus.tsx
index d79a0ae9ead..d2c6129ad67 100644
--- a/frontend/packages/console-shared/src/components/status/PopoverStatus.tsx
+++ b/frontend/packages/console-shared/src/components/status/PopoverStatus.tsx
@@ -2,16 +2,41 @@ import * as React from 'react';
 import { Button, Popover, PopoverPosition } from '@patternfly/react-core';
 import StatusIconAndText from './StatusIconAndText';
 
-const PopoverStatus: React.FC<React.ComponentProps<typeof StatusIconAndText>> = ({
+type PopoverStatusProps = React.ComponentProps<typeof StatusIconAndText> & {
+  activeIcon?: React.ReactElement;
+  hideHeader?: boolean;
+};
+
+const PopoverStatus: React.FC<PopoverStatusProps> = ({
   title,
+  hideHeader,
+  icon,
+  activeIcon,
   children,
   ...other
-}) => (
-  <Popover position={PopoverPosition.right} headerContent={title} bodyContent={children}>
-    <Button variant="link" isInline>
-      <StatusIconAndText {...other} title={title} />
-    </Button>
-  </Popover>
-);
+}) => {
+  const [isActive, setActive] = React.useState(false);
+  const onHide = React.useCallback(() => setActive(false), [setActive]);
+  const onShow = React.useCallback(() => setActive(true), [setActive]);
+
+  return (
+    <Popover
+      position={PopoverPosition.right}
+      headerContent={hideHeader ? null : title}
+      bodyContent={children}
+      aria-label={title}
+      onHide={onHide}
+      onShow={onShow}
+    >
+      <Button variant="link" isInline>
+        <StatusIconAndText
+          {...other}
+          title={title}
+          icon={isActive && activeIcon ? activeIcon : icon}
+        />
+      </Button>
+    </Popover>
+  );
+};
 
 export default PopoverStatus;