From 064e750a503613d6fea810323ba19971a50a3657 Mon Sep 17 00:00:00 2001
From: elstranack <elstranack@homeaway.com>
Date: Fri, 7 Jan 2022 08:17:47 -0800
Subject: [PATCH 01/10] Adding hover message and an info icon.

Signed-off-by: elstranack <elstranack@homeaway.com>
---
 .changeset/swift-carpets-yawn.md              |  5 ++
 .../src/components/ProgressBars/Gauge.tsx     | 28 ++++++--
 .../ProgressBars/GaugeCard.stories.tsx        | 68 +++++++++++++++++++
 .../src/components/ProgressBars/GaugeCard.tsx | 19 +++++-
 packages/core-components/src/hooks/index.ts   |  1 +
 .../core-components/src/hooks/useHover.ts     | 42 ++++++++++++
 .../src/layout/InfoCard/InfoCard.tsx          | 32 ++++++++-
 7 files changed, 185 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/swift-carpets-yawn.md
 create mode 100644 packages/core-components/src/hooks/useHover.ts

diff --git a/.changeset/swift-carpets-yawn.md b/.changeset/swift-carpets-yawn.md
new file mode 100644
index 0000000000..d242b3cf81
--- /dev/null
+++ b/.changeset/swift-carpets-yawn.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Adding hover message to the Gauge and an info icon to the GaugeCard.
diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 0336ebc990..bb91358133 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -17,7 +17,8 @@
 import { BackstagePalette, BackstageTheme } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
-import React from 'react';
+import { useHover } from '../../hooks';
+import React, { ReactNode } from 'react';
 
 /** @public */
 export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
@@ -37,6 +38,15 @@ const useStyles = makeStyles<BackstageTheme>(
       fontWeight: 'bold',
       color: theme.palette.textContrast,
     },
+    hoveringMessageCompliant: {
+      fontSize: 13,
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      position: 'absolute',
+      wordBreak: 'break-all',
+      display: 'inline-block',
+    },
     circle: {
       width: '80%',
       transform: 'translate(10%, 0)',
@@ -53,6 +63,7 @@ export type GaugeProps = {
   inverse?: boolean;
   unit?: string;
   max?: number;
+  hoverMessage?: ReactNode;
   getColor?: GaugePropsGetColor;
 };
 
@@ -104,10 +115,11 @@ export const getProgressColor: GaugePropsGetColor = ({
  */
 
 export function Gauge(props: GaugeProps) {
+  const [hoverRef, isHovering] = useHover() as any;
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
   const { palette } = useTheme<BackstageTheme>();
-  const { value, fractional, inverse, unit, max } = {
+  const { value, fractional, inverse, unit, max, hoverMessage } = {
     ...defaultGaugeProps,
     ...props,
   };
@@ -116,7 +128,7 @@ export function Gauge(props: GaugeProps) {
   const asActual = max !== 100 ? Math.round(value) : asPercentage;
 
   return (
-    <div className={classes.root}>
+    <div ref={hoverRef} className={classes.root}>
       <Circle
         strokeLinecap="butt"
         percent={asPercentage}
@@ -125,9 +137,13 @@ export function Gauge(props: GaugeProps) {
         strokeColor={getColor({ palette, value: asActual, inverse, max })}
         className={classes.circle}
       />
-      <div className={classes.overlay}>
-        {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
-      </div>
+      {hoverMessage && isHovering ? (
+        <div className={classes.hoveringMessageCompliant}>{hoverMessage}</div>
+      ) : (
+        <div className={classes.overlay}>
+          {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
index 64a6cc1b16..5ce96310b1 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -118,3 +118,71 @@ export const StaticColor = () => (
     </Grid>
   </Wrapper>
 );
+
+export const InfoMessage = () => (
+  <Wrapper>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.3}
+        iconInfoMessage="Info Message"
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.57}
+        iconInfoMessage="Info Message"
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.89}
+        iconInfoMessage="Info Message"
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        inverse
+        progress={0.2}
+        iconInfoMessage="Info Message"
+      />
+    </Grid>
+  </Wrapper>
+);
+
+export const HoverMessage = () => (
+  <Wrapper>
+    <Grid item>
+      <GaugeCard title="Progress" progress={0.3} hoverMessage="Hover Message" />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        progress={0.57}
+        hoverMessage="Hover Message"
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        progress={0.89}
+        hoverMessage="Hover Message"
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        inverse
+        progress={0.2}
+        hoverMessage="Hover Message"
+      />
+    </Grid>
+  </Wrapper>
+);
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index 9e6c19ebfe..745c37d480 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -15,7 +15,7 @@
  */
 
 import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { BottomLinkProps } from '../../layout/BottomLink';
 import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
 import { Gauge, GaugePropsGetColor } from './Gauge';
@@ -26,6 +26,8 @@ type Props = {
   variant?: InfoCardVariants;
   /** Progress in % specified as decimal, e.g. "0.23" */
   progress: number;
+  hoverMessage?: ReactNode;
+  iconInfoMessage?: string;
   inverse?: boolean;
   deepLink?: BottomLinkProps;
   getColor?: GaugePropsGetColor;
@@ -52,11 +54,21 @@ const useStyles = makeStyles(
  */
 export function GaugeCard(props: Props) {
   const classes = useStyles(props);
-  const { title, subheader, progress, inverse, deepLink, variant, getColor } =
-    props;
+  const {
+    title,
+    subheader,
+    progress,
+    inverse,
+    deepLink,
+    hoverMessage,
+    iconInfoMessage,
+    variant,
+    getColor,
+  } = props;
 
   const gaugeProps = {
     inverse,
+    hoverMessage,
     getColor,
     value: progress,
   };
@@ -68,6 +80,7 @@ export function GaugeCard(props: Props) {
         subheader={subheader}
         deepLink={deepLink}
         variant={variant}
+        iconInfoMessage={iconInfoMessage}
       >
         <Gauge {...gaugeProps} />
       </InfoCard>
diff --git a/packages/core-components/src/hooks/index.ts b/packages/core-components/src/hooks/index.ts
index 07e585bf27..afaf68e7d9 100644
--- a/packages/core-components/src/hooks/index.ts
+++ b/packages/core-components/src/hooks/index.ts
@@ -16,6 +16,7 @@
 
 export { useQueryParamState } from './useQueryParamState';
 export { useSupportConfig } from './useSupportConfig';
+export { useHover } from './useHover';
 export type {
   SupportConfig,
   SupportItem,
diff --git a/packages/core-components/src/hooks/useHover.ts b/packages/core-components/src/hooks/useHover.ts
new file mode 100644
index 0000000000..478f1fb4e3
--- /dev/null
+++ b/packages/core-components/src/hooks/useHover.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useRef, useState } from 'react';
+
+export const useHover = () => {
+  const [value, setValue] = useState(false);
+
+  const ref = useRef(null);
+  const handleMouseOver = () => setValue(true);
+  const handleMouseOut = () => setValue(false);
+
+  useEffect(() => {
+    const node = ref.current as any;
+    if (node) {
+      node.addEventListener('mouseenter', handleMouseOver) as any;
+      node.addEventListener('mouseleave', handleMouseOut) as any;
+
+      return () => {
+        node.removeEventListener('mouseenter', handleMouseOver);
+        node.removeEventListener('mouseleave', handleMouseOut);
+      };
+    }
+    return () => {
+      setValue(false);
+    };
+  }, [ref]);
+
+  return [ref, value];
+};
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index f1e67904f1..70ffd2e0cd 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -24,6 +24,8 @@ import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
 import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
+import Info from '@material-ui/icons/Info';
+import Tooltip from '@material-ui/core/Tooltip';
 
 /** @public */
 export type InfoCardClassKey =
@@ -55,6 +57,15 @@ const useStyles = makeStyles(
     headerAvatar: {},
     headerAction: {},
     headerContent: {},
+    leftIcon: {
+      float: 'right',
+    },
+    tooltip: {
+      fontSize: 14,
+    },
+    subheader: {
+      float: 'left',
+    },
   }),
   { name: 'BackstageInfoCard' },
 );
@@ -134,6 +145,7 @@ type Props = {
   children?: ReactNode;
   headerStyle?: object;
   headerProps?: CardHeaderProps;
+  iconInfoMessage?: ReactNode;
   action?: ReactNode;
   actionsClassName?: string;
   actions?: ReactNode;
@@ -162,6 +174,7 @@ export function InfoCard(props: Props): JSX.Element {
     children,
     headerStyle,
     headerProps,
+    iconInfoMessage,
     action,
     actionsClassName,
     actions,
@@ -194,6 +207,23 @@ export function InfoCard(props: Props): JSX.Element {
     });
   }
 
+  const cardSubTitle = () => {
+    return (
+      <div className={classes.headerSubheader}>
+        {subheader && <div className={classes.subheader}>{subheader}</div>}
+        {iconInfoMessage && (
+          <Tooltip
+            title={iconInfoMessage}
+            arrow
+            classes={{ tooltip: classes.tooltip }}
+          >
+            <Info className={classes.leftIcon} />
+          </Tooltip>
+        )}
+      </div>
+    );
+  };
+
   const errProps: ErrorBoundaryProps =
     errorBoundaryProps || (slackChannel ? { slackChannel } : {});
 
@@ -211,7 +241,7 @@ export function InfoCard(props: Props): JSX.Element {
               content: classes.headerContent,
             }}
             title={title}
-            subheader={subheader}
+            subheader={cardSubTitle()}
             action={action}
             style={{ ...headerStyle }}
             titleTypographyProps={titleTypographyProps}

From 7f9270117a3c5e4a72f60bd2210a5c5f9c0a5759 Mon Sep 17 00:00:00 2001
From: elstranack <elstranack@homeaway.com>
Date: Thu, 13 Jan 2022 13:59:12 -0800
Subject: [PATCH 02/10] Removing the any and updating the api:report

Signed-off-by: elstranack <elstranack@homeaway.com>
---
 packages/core-components/api-report.md            | 15 +++++++++++----
 .../src/components/ProgressBars/Gauge.tsx         | 11 ++++++-----
 packages/core-components/src/hooks/useHover.ts    |  7 +++----
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index d8aef17007..43daf01d5a 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -37,6 +37,7 @@ import { default as React_2 } from 'react';
 import * as React_3 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { RefObject } from 'react';
 import { SessionApi } from '@backstage/core-plugin-api';
 import { SignInPageProps } from '@backstage/core-plugin-api';
 import { SparklinesLineProps } from 'react-sparklines';
@@ -392,6 +393,7 @@ export type GaugeProps = {
   inverse?: boolean;
   unit?: string;
   max?: number;
+  hoverMessage?: ReactNode;
   getColor?: GaugePropsGetColor;
 };
 
@@ -922,6 +924,7 @@ export const SidebarDivider: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1029,7 +1032,6 @@ export const SidebarDivider: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1284,6 +1286,7 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1391,7 +1394,6 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1559,6 +1561,7 @@ export const SidebarSpace: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1666,7 +1669,6 @@ export const SidebarSpace: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1833,6 +1835,7 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1940,7 +1943,6 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -2409,6 +2411,11 @@ export function useContent(): {
   contentRef: React_2.MutableRefObject<HTMLElement | null> | undefined;
 };
 
+// Warning: (ae-missing-release-tag) "useHover" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const useHover: (ref: RefObject<HTMLInputElement>) => boolean;
+
 // Warning: (ae-forgotten-export) The symbol "SetQueryParams" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "useQueryParamState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index bb91358133..a2f725ecf0 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -18,7 +18,7 @@ import { BackstagePalette, BackstageTheme } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
 import { useHover } from '../../hooks';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject, useRef } from 'react';
 
 /** @public */
 export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
@@ -38,11 +38,11 @@ const useStyles = makeStyles<BackstageTheme>(
       fontWeight: 'bold',
       color: theme.palette.textContrast,
     },
-    hoveringMessageCompliant: {
+    hoveringMessage: {
       fontSize: 13,
       top: '50%',
       left: '50%',
-      transform: 'translate(-50%, -50%)',
+      transform: 'translate(-55%, -50%)',
       position: 'absolute',
       wordBreak: 'break-all',
       display: 'inline-block',
@@ -115,7 +115,8 @@ export const getProgressColor: GaugePropsGetColor = ({
  */
 
 export function Gauge(props: GaugeProps) {
-  const [hoverRef, isHovering] = useHover() as any;
+  const hoverRef = useRef() as RefObject<HTMLInputElement>;
+  const isHovering = useHover(hoverRef);
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
   const { palette } = useTheme<BackstageTheme>();
@@ -138,7 +139,7 @@ export function Gauge(props: GaugeProps) {
         className={classes.circle}
       />
       {hoverMessage && isHovering ? (
-        <div className={classes.hoveringMessageCompliant}>{hoverMessage}</div>
+        <div className={classes.hoveringMessage}>{hoverMessage}</div>
       ) : (
         <div className={classes.overlay}>
           {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
diff --git a/packages/core-components/src/hooks/useHover.ts b/packages/core-components/src/hooks/useHover.ts
index 478f1fb4e3..7ce3e8b5b8 100644
--- a/packages/core-components/src/hooks/useHover.ts
+++ b/packages/core-components/src/hooks/useHover.ts
@@ -13,12 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, RefObject, useState } from 'react';
 
-export const useHover = () => {
+export const useHover = (ref: RefObject<HTMLInputElement> ) => {
   const [value, setValue] = useState(false);
 
-  const ref = useRef(null);
   const handleMouseOver = () => setValue(true);
   const handleMouseOut = () => setValue(false);
 
@@ -38,5 +37,5 @@ export const useHover = () => {
     };
   }, [ref]);
 
-  return [ref, value];
+  return value;
 };

From bff82c9ed2708c9e092ee6d49125df320ff87ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Wed, 19 Jan 2022 13:21:49 +0100
Subject: [PATCH 03/10] fixup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 packages/core-components/api-report.md         | 8 ++++----
 packages/core-components/src/hooks/useHover.ts | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 43daf01d5a..efdbddb979 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -924,7 +924,6 @@ export const SidebarDivider: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
-    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1032,6 +1031,7 @@ export const SidebarDivider: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
+    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1286,7 +1286,6 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
-    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1394,6 +1393,7 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
+    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1561,7 +1561,6 @@ export const SidebarSpace: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
-    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1669,6 +1668,7 @@ export const SidebarSpace: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
+    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1835,7 +1835,6 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
-    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1943,6 +1942,7 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
+    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
diff --git a/packages/core-components/src/hooks/useHover.ts b/packages/core-components/src/hooks/useHover.ts
index 7ce3e8b5b8..4c5602c77c 100644
--- a/packages/core-components/src/hooks/useHover.ts
+++ b/packages/core-components/src/hooks/useHover.ts
@@ -15,7 +15,7 @@
  */
 import { useEffect, RefObject, useState } from 'react';
 
-export const useHover = (ref: RefObject<HTMLInputElement> ) => {
+export const useHover = (ref: RefObject<HTMLInputElement>) => {
   const [value, setValue] = useState(false);
 
   const handleMouseOver = () => setValue(true);

From 2a3f792f9e7dbba618b90bbf67654b8b6416e920 Mon Sep 17 00:00:00 2001
From: Elizabeth Stranack <elstranack@expediagroup.com>
Date: Thu, 20 Jan 2022 14:01:39 -0800
Subject: [PATCH 04/10] Updating Commit Changes

Signed-off-by: Elizabeth Stranack <elstranack@expediagroup.com>
---
 packages/core-components/api-report.md        | 23 +++++-----
 .../src/components/ProgressBars/Gauge.tsx     | 45 ++++++++++++++-----
 .../ProgressBars/GaugeCard.stories.tsx        | 42 ++++++++++-------
 .../src/components/ProgressBars/GaugeCard.tsx | 12 ++---
 packages/core-components/src/hooks/index.ts   |  1 -
 .../core-components/src/hooks/useHover.ts     | 41 -----------------
 .../src/layout/InfoCard/InfoCard.tsx          | 22 ++-------
 7 files changed, 80 insertions(+), 106 deletions(-)
 delete mode 100644 packages/core-components/src/hooks/useHover.ts

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index efdbddb979..3743c1d16d 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -37,7 +37,6 @@ import { default as React_2 } from 'react';
 import * as React_3 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
-import { RefObject } from 'react';
 import { SessionApi } from '@backstage/core-plugin-api';
 import { SignInPageProps } from '@backstage/core-plugin-api';
 import { SparklinesLineProps } from 'react-sparklines';
@@ -384,7 +383,12 @@ export function GaugeCard(props: Props_10): JSX.Element;
 export type GaugeCardClassKey = 'root';
 
 // @public (undocumented)
-export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
+export type GaugeClassKey =
+  | 'root'
+  | 'overlay'
+  | 'description'
+  | 'circle'
+  | 'colorUnknown';
 
 // @public (undocumented)
 export type GaugeProps = {
@@ -393,7 +397,7 @@ export type GaugeProps = {
   inverse?: boolean;
   unit?: string;
   max?: number;
-  hoverMessage?: ReactNode;
+  description?: ReactNode;
   getColor?: GaugePropsGetColor;
 };
 
@@ -924,6 +928,7 @@ export const SidebarDivider: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1031,7 +1036,6 @@ export const SidebarDivider: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1286,6 +1290,7 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1393,7 +1398,6 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1561,6 +1565,7 @@ export const SidebarSpace: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1668,7 +1673,6 @@ export const SidebarSpace: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1835,6 +1839,7 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
+    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1942,7 +1947,6 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
-    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -2411,11 +2415,6 @@ export function useContent(): {
   contentRef: React_2.MutableRefObject<HTMLElement | null> | undefined;
 };
 
-// Warning: (ae-missing-release-tag) "useHover" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export const useHover: (ref: RefObject<HTMLInputElement>) => boolean;
-
 // Warning: (ae-forgotten-export) The symbol "SetQueryParams" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "useQueryParamState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index a2f725ecf0..f71756f946 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -17,11 +17,15 @@
 import { BackstagePalette, BackstageTheme } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
-import { useHover } from '../../hooks';
-import React, { ReactNode, RefObject, useRef } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 
 /** @public */
-export type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
+export type GaugeClassKey =
+  | 'root'
+  | 'overlay'
+  | 'description'
+  | 'circle'
+  | 'colorUnknown';
 
 const useStyles = makeStyles<BackstageTheme>(
   theme => ({
@@ -38,8 +42,8 @@ const useStyles = makeStyles<BackstageTheme>(
       fontWeight: 'bold',
       color: theme.palette.textContrast,
     },
-    hoveringMessage: {
-      fontSize: 13,
+    description: {
+      fontSize: '100%',
       top: '50%',
       left: '50%',
       transform: 'translate(-55%, -50%)',
@@ -63,7 +67,7 @@ export type GaugeProps = {
   inverse?: boolean;
   unit?: string;
   max?: number;
-  hoverMessage?: ReactNode;
+  description?: ReactNode;
   getColor?: GaugePropsGetColor;
 };
 
@@ -115,12 +119,11 @@ export const getProgressColor: GaugePropsGetColor = ({
  */
 
 export function Gauge(props: GaugeProps) {
-  const hoverRef = useRef() as RefObject<HTMLInputElement>;
-  const isHovering = useHover(hoverRef);
+  const hoverRef = useRef<HTMLDivElement>(null);
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
   const { palette } = useTheme<BackstageTheme>();
-  const { value, fractional, inverse, unit, max, hoverMessage } = {
+  const { value, fractional, inverse, unit, max, description } = {
     ...defaultGaugeProps,
     ...props,
   };
@@ -128,6 +131,26 @@ export function Gauge(props: GaugeProps) {
   const asPercentage = fractional ? Math.round(value * max) : value;
   const asActual = max !== 100 ? Math.round(value) : asPercentage;
 
+  const [isHovering, setValue] = useState(false);
+  const handleMouseOver = () => setValue(true);
+  const handleMouseOut = () => setValue(false);
+
+  useEffect(() => {
+    const node = hoverRef.current;
+    if (node) {
+      node.addEventListener('mouseenter', handleMouseOver);
+      node.addEventListener('mouseleave', handleMouseOut);
+
+      return () => {
+        node.removeEventListener('mouseenter', handleMouseOver);
+        node.removeEventListener('mouseleave', handleMouseOut);
+      };
+    }
+    return () => {
+      setValue(false);
+    };
+  });
+
   return (
     <div ref={hoverRef} className={classes.root}>
       <Circle
@@ -138,8 +161,8 @@ export function Gauge(props: GaugeProps) {
         strokeColor={getColor({ palette, value: asActual, inverse, max })}
         className={classes.circle}
       />
-      {hoverMessage && isHovering ? (
-        <div className={classes.hoveringMessage}>{hoverMessage}</div>
+      {description && isHovering ? (
+        <div className={classes.description}>{description}</div>
       ) : (
         <div className={classes.overlay}>
           {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
index 5ce96310b1..08c7813643 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -18,6 +18,8 @@ import React, { PropsWithChildren } from 'react';
 import { GaugeCard } from './GaugeCard';
 import Grid from '@material-ui/core/Grid';
 import { MemoryRouter } from 'react-router';
+import Tooltip from '@material-ui/core/Tooltip';
+import Info from '@material-ui/icons/Info';
 
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
 
@@ -126,7 +128,11 @@ export const InfoMessage = () => (
         title="Progress"
         subheader="With a subheader"
         progress={0.3}
-        iconInfoMessage="Info Message"
+        icon={
+          <Tooltip title="Info Message" arrow>
+            <Info style={{ float: 'right' }} />
+          </Tooltip>
+        }
       />
     </Grid>
     <Grid item>
@@ -134,7 +140,11 @@ export const InfoMessage = () => (
         title="Progress"
         subheader="With a subheader"
         progress={0.57}
-        iconInfoMessage="Info Message"
+        icon={
+          <Tooltip title="Info Message" arrow>
+            <Info style={{ float: 'right' }} />
+          </Tooltip>
+        }
       />
     </Grid>
     <Grid item>
@@ -142,7 +152,11 @@ export const InfoMessage = () => (
         title="Progress"
         subheader="With a subheader"
         progress={0.89}
-        iconInfoMessage="Info Message"
+        icon={
+          <Tooltip title="Info Message" arrow>
+            <Info style={{ float: 'right' }} />
+          </Tooltip>
+        }
       />
     </Grid>
     <Grid item>
@@ -151,7 +165,11 @@ export const InfoMessage = () => (
         subheader="With a subheader"
         inverse
         progress={0.2}
-        iconInfoMessage="Info Message"
+        icon={
+          <Tooltip title="Info Message" arrow>
+            <Info style={{ float: 'right' }} />
+          </Tooltip>
+        }
       />
     </Grid>
   </Wrapper>
@@ -160,28 +178,20 @@ export const InfoMessage = () => (
 export const HoverMessage = () => (
   <Wrapper>
     <Grid item>
-      <GaugeCard title="Progress" progress={0.3} hoverMessage="Hover Message" />
+      <GaugeCard title="Progress" progress={0.3} description="Hover Message" />
     </Grid>
     <Grid item>
-      <GaugeCard
-        title="Progress"
-        progress={0.57}
-        hoverMessage="Hover Message"
-      />
+      <GaugeCard title="Progress" progress={0.57} description="Hover Message" />
     </Grid>
     <Grid item>
-      <GaugeCard
-        title="Progress"
-        progress={0.89}
-        hoverMessage="Hover Message"
-      />
+      <GaugeCard title="Progress" progress={0.89} description="Hover Message" />
     </Grid>
     <Grid item>
       <GaugeCard
         title="Progress"
         inverse
         progress={0.2}
-        hoverMessage="Hover Message"
+        description="Hover Message"
       />
     </Grid>
   </Wrapper>
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index 745c37d480..1114890523 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -26,8 +26,8 @@ type Props = {
   variant?: InfoCardVariants;
   /** Progress in % specified as decimal, e.g. "0.23" */
   progress: number;
-  hoverMessage?: ReactNode;
-  iconInfoMessage?: string;
+  description?: ReactNode;
+  icon?: ReactNode;
   inverse?: boolean;
   deepLink?: BottomLinkProps;
   getColor?: GaugePropsGetColor;
@@ -60,15 +60,15 @@ export function GaugeCard(props: Props) {
     progress,
     inverse,
     deepLink,
-    hoverMessage,
-    iconInfoMessage,
+    description,
+    icon,
     variant,
     getColor,
   } = props;
 
   const gaugeProps = {
     inverse,
-    hoverMessage,
+    description,
     getColor,
     value: progress,
   };
@@ -80,7 +80,7 @@ export function GaugeCard(props: Props) {
         subheader={subheader}
         deepLink={deepLink}
         variant={variant}
-        iconInfoMessage={iconInfoMessage}
+        icon={icon}
       >
         <Gauge {...gaugeProps} />
       </InfoCard>
diff --git a/packages/core-components/src/hooks/index.ts b/packages/core-components/src/hooks/index.ts
index afaf68e7d9..07e585bf27 100644
--- a/packages/core-components/src/hooks/index.ts
+++ b/packages/core-components/src/hooks/index.ts
@@ -16,7 +16,6 @@
 
 export { useQueryParamState } from './useQueryParamState';
 export { useSupportConfig } from './useSupportConfig';
-export { useHover } from './useHover';
 export type {
   SupportConfig,
   SupportItem,
diff --git a/packages/core-components/src/hooks/useHover.ts b/packages/core-components/src/hooks/useHover.ts
deleted file mode 100644
index 4c5602c77c..0000000000
--- a/packages/core-components/src/hooks/useHover.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { useEffect, RefObject, useState } from 'react';
-
-export const useHover = (ref: RefObject<HTMLInputElement>) => {
-  const [value, setValue] = useState(false);
-
-  const handleMouseOver = () => setValue(true);
-  const handleMouseOut = () => setValue(false);
-
-  useEffect(() => {
-    const node = ref.current as any;
-    if (node) {
-      node.addEventListener('mouseenter', handleMouseOver) as any;
-      node.addEventListener('mouseleave', handleMouseOut) as any;
-
-      return () => {
-        node.removeEventListener('mouseenter', handleMouseOver);
-        node.removeEventListener('mouseleave', handleMouseOut);
-      };
-    }
-    return () => {
-      setValue(false);
-    };
-  }, [ref]);
-
-  return value;
-};
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 70ffd2e0cd..5c52e28543 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -24,8 +24,6 @@ import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
 import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
-import Info from '@material-ui/icons/Info';
-import Tooltip from '@material-ui/core/Tooltip';
 
 /** @public */
 export type InfoCardClassKey =
@@ -57,12 +55,6 @@ const useStyles = makeStyles(
     headerAvatar: {},
     headerAction: {},
     headerContent: {},
-    leftIcon: {
-      float: 'right',
-    },
-    tooltip: {
-      fontSize: 14,
-    },
     subheader: {
       float: 'left',
     },
@@ -145,7 +137,7 @@ type Props = {
   children?: ReactNode;
   headerStyle?: object;
   headerProps?: CardHeaderProps;
-  iconInfoMessage?: ReactNode;
+  icon?: ReactNode;
   action?: ReactNode;
   actionsClassName?: string;
   actions?: ReactNode;
@@ -174,7 +166,7 @@ export function InfoCard(props: Props): JSX.Element {
     children,
     headerStyle,
     headerProps,
-    iconInfoMessage,
+    icon,
     action,
     actionsClassName,
     actions,
@@ -211,15 +203,7 @@ export function InfoCard(props: Props): JSX.Element {
     return (
       <div className={classes.headerSubheader}>
         {subheader && <div className={classes.subheader}>{subheader}</div>}
-        {iconInfoMessage && (
-          <Tooltip
-            title={iconInfoMessage}
-            arrow
-            classes={{ tooltip: classes.tooltip }}
-          >
-            <Info className={classes.leftIcon} />
-          </Tooltip>
-        )}
+        {icon && icon}
       </div>
     );
   };

From 4444fa4050b9243613a76eb133d3f3ebf8113af3 Mon Sep 17 00:00:00 2001
From: Elizabeth Stranack <elstranack@expediagroup.com>
Date: Mon, 24 Jan 2022 10:41:19 -0800
Subject: [PATCH 05/10] Fixing code request changes

Signed-off-by: Elizabeth Stranack <elstranack@expediagroup.com>
---
 .../src/components/ProgressBars/Gauge.tsx     | 22 ++++++++++---------
 .../src/layout/InfoCard/InfoCard.tsx          |  4 ++--
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index f71756f946..89e384a452 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -16,8 +16,9 @@
 
 import { BackstagePalette, BackstageTheme } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { isNull } from 'lodash';
 import { Circle } from 'rc-progress';
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 
 /** @public */
 export type GaugeClassKey =
@@ -46,7 +47,7 @@ const useStyles = makeStyles<BackstageTheme>(
       fontSize: '100%',
       top: '50%',
       left: '50%',
-      transform: 'translate(-55%, -50%)',
+      transform: 'translate(-50%, -50%)',
       position: 'absolute',
       wordBreak: 'break-all',
       display: 'inline-block',
@@ -119,7 +120,8 @@ export const getProgressColor: GaugePropsGetColor = ({
  */
 
 export function Gauge(props: GaugeProps) {
-  const hoverRef = useRef<HTMLDivElement>(null);
+  // const hoverRef = useRef<HTMLDivElement>(null);
+  const [hoverRef, setHoverRef] = useState<HTMLDivElement | null>(null);
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
   const { palette } = useTheme<BackstageTheme>();
@@ -131,13 +133,13 @@ export function Gauge(props: GaugeProps) {
   const asPercentage = fractional ? Math.round(value * max) : value;
   const asActual = max !== 100 ? Math.round(value) : asPercentage;
 
-  const [isHovering, setValue] = useState(false);
-  const handleMouseOver = () => setValue(true);
-  const handleMouseOut = () => setValue(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const handleMouseOver = () => setIsHovering(true);
+  const handleMouseOut = () => setIsHovering(false);
 
   useEffect(() => {
-    const node = hoverRef.current;
-    if (node) {
+    const node = hoverRef;
+    if (node && !isNull(isHovering)) {
       node.addEventListener('mouseenter', handleMouseOver);
       node.addEventListener('mouseleave', handleMouseOut);
 
@@ -147,12 +149,12 @@ export function Gauge(props: GaugeProps) {
       };
     }
     return () => {
-      setValue(false);
+      setIsHovering(false);
     };
   });
 
   return (
-    <div ref={hoverRef} className={classes.root}>
+    <div ref={setHoverRef} className={classes.root}>
       <Circle
         strokeLinecap="butt"
         percent={asPercentage}
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 5c52e28543..256d60cfa2 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -56,7 +56,7 @@ const useStyles = makeStyles(
     headerAction: {},
     headerContent: {},
     subheader: {
-      float: 'left',
+      display: 'flex',
     },
   }),
   { name: 'BackstageInfoCard' },
@@ -203,7 +203,7 @@ export function InfoCard(props: Props): JSX.Element {
     return (
       <div className={classes.headerSubheader}>
         {subheader && <div className={classes.subheader}>{subheader}</div>}
-        {icon && icon}
+        {icon}
       </div>
     );
   };

From 75b0d21e89fc94bf1885e7c8bfd435dd5fdd289d Mon Sep 17 00:00:00 2001
From: Elizabeth Stranack <elstranack@expediagroup.com>
Date: Mon, 24 Jan 2022 11:17:43 -0800
Subject: [PATCH 06/10] Checking if description is set to use the Hover
 functionality

Signed-off-by: Elizabeth Stranack <elstranack@expediagroup.com>
---
 packages/core-components/src/components/ProgressBars/Gauge.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 89e384a452..2750f26c48 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -16,7 +16,6 @@
 
 import { BackstagePalette, BackstageTheme } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
-import { isNull } from 'lodash';
 import { Circle } from 'rc-progress';
 import React, { ReactNode, useEffect, useState } from 'react';
 
@@ -139,7 +138,7 @@ export function Gauge(props: GaugeProps) {
 
   useEffect(() => {
     const node = hoverRef;
-    if (node && !isNull(isHovering)) {
+    if (node && description) {
       node.addEventListener('mouseenter', handleMouseOver);
       node.addEventListener('mouseleave', handleMouseOut);
 

From d249d6742df094a70e82e692f180e5d8644b98c8 Mon Sep 17 00:00:00 2001
From: Elizabeth Stranack <elstranack@expediagroup.com>
Date: Tue, 25 Jan 2022 08:41:20 -0800
Subject: [PATCH 07/10] Removing comment

Signed-off-by: Elizabeth Stranack <elstranack@expediagroup.com>
---
 packages/core-components/src/components/ProgressBars/Gauge.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 2750f26c48..297e4961ce 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -119,7 +119,6 @@ export const getProgressColor: GaugePropsGetColor = ({
  */
 
 export function Gauge(props: GaugeProps) {
-  // const hoverRef = useRef<HTMLDivElement>(null);
   const [hoverRef, setHoverRef] = useState<HTMLDivElement | null>(null);
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);

From 957d7210e604a822420e61d05d74efe7016d8ddc Mon Sep 17 00:00:00 2001
From: Elizabeth Stranack <elstranack@expediagroup.com>
Date: Tue, 25 Jan 2022 12:40:26 -0800
Subject: [PATCH 08/10] Adding dependencies the hook

Signed-off-by: Elizabeth Stranack <elstranack@expediagroup.com>
---
 .../core-components/src/components/ProgressBars/Gauge.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 297e4961ce..11f977b387 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -132,11 +132,11 @@ export function Gauge(props: GaugeProps) {
   const asActual = max !== 100 ? Math.round(value) : asPercentage;
 
   const [isHovering, setIsHovering] = useState(false);
-  const handleMouseOver = () => setIsHovering(true);
-  const handleMouseOut = () => setIsHovering(false);
 
   useEffect(() => {
     const node = hoverRef;
+    const handleMouseOver = () => setIsHovering(true);
+    const handleMouseOut = () => setIsHovering(false);
     if (node && description) {
       node.addEventListener('mouseenter', handleMouseOver);
       node.addEventListener('mouseleave', handleMouseOut);
@@ -149,7 +149,7 @@ export function Gauge(props: GaugeProps) {
     return () => {
       setIsHovering(false);
     };
-  });
+  }, [description, hoverRef]);
 
   return (
     <div ref={setHoverRef} className={classes.root}>

From 5321d7b553bf6996378d273523e4d4d52cef85a9 Mon Sep 17 00:00:00 2001
From: Elizabeth Stranack <elstranack@expediagroup.com>
Date: Fri, 28 Jan 2022 14:53:34 -0800
Subject: [PATCH 09/10] Updating api-report

Signed-off-by: Elizabeth Stranack <elstranack@expediagroup.com>
---
 packages/core-components/api-report.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 3743c1d16d..4770e645f9 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -928,7 +928,6 @@ export const SidebarDivider: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
-    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1036,6 +1035,7 @@ export const SidebarDivider: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
+    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1290,7 +1290,6 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
-    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1398,6 +1397,7 @@ export const SidebarScrollWrapper: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
+    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1565,7 +1565,6 @@ export const SidebarSpace: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
-    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1673,6 +1672,7 @@ export const SidebarSpace: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
+    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'
@@ -1839,7 +1839,6 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'contentEditable'
     | 'inputMode'
     | 'tabIndex'
-    | 'onError'
     | 'defaultChecked'
     | 'defaultValue'
     | 'suppressContentEditableWarning'
@@ -1947,6 +1946,7 @@ export const SidebarSpacer: React_2.ComponentType<
     | 'onInvalidCapture'
     | 'onLoad'
     | 'onLoadCapture'
+    | 'onError'
     | 'onErrorCapture'
     | 'onKeyDown'
     | 'onKeyDownCapture'

From c8acc4ae4030eaa57a028984350d2afd657bc22c Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Thu, 3 Feb 2022 09:54:07 +0100
Subject: [PATCH 10/10] chore: fix test

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 plugins/git-release-manager/src/features/Features.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/git-release-manager/src/features/Features.test.tsx b/plugins/git-release-manager/src/features/Features.test.tsx
index 28bd9b6310..8f9e3544f2 100644
--- a/plugins/git-release-manager/src/features/Features.test.tsx
+++ b/plugins/git-release-manager/src/features/Features.test.tsx
@@ -55,7 +55,7 @@ describe('Features', () => {
 
     expect(getByTestId(TEST_IDS.info.info)).toMatchInlineSnapshot(`
       <div
-        class="MuiBox-root MuiBox-root-9"
+        class="MuiBox-root MuiBox-root-10"
         data-testid="grm--info"
       >
         <h6