Updating Commit Changes

Signed-off-by: Elizabeth Stranack <elstranack@expediagroup.com>

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)
 //

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}`}

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>

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>

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,

packages/core-components/src/hooks/useHover.ts

@@ -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;
-};

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>
     );
   };