F #5422: Removes redundant tooltip on VM state (#2042)

src/fireedge/src/client/components/Status/Circle.js

@@ -13,59 +13,61 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-/* eslint-disable jsdoc/require-jsdoc */
-import { memo } from 'react'
+import { memo, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
-import { Tooltip, Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
+import { SvgIcon, Tooltip, Typography } from '@mui/material'
 
-const useStyles = makeStyles({
-  circle: ({ color }) => ({
-    color,
-    fill: 'currentColor',
-    verticalAlign: 'middle',
-    pointerEvents: 'auto',
-  }),
-})
+// ----------------------------------------
+// Circle SVG
+// ----------------------------------------
+
+const Circle = forwardRef(({ size, color, ...props }, ref) => (
+  <SvgIcon
+    {...props}
+    ref={ref}
+    viewBox="0 0 100 100"
+    sx={{
+      color,
+      width: size,
+      height: size,
+      fill: 'currentColor',
+      verticalAlign: 'middle',
+      pointerEvents: 'auto',
+    }}
+  >
+    <circle cx="50" cy="50" r="50" />
+  </SvgIcon>
+))
+
+Circle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+Circle.displayName = 'Circle'
+
+// ----------------------------------------
+// Status Circle component
+// ----------------------------------------
 
 const StatusCircle = memo(
-  ({ color, tooltip, size }) => {
-    const classes = useStyles({ color })
-
-    return (
+  ({ color, tooltip, size = 12 }) =>
+    tooltip ? (
       <Tooltip
         arrow
         placement="right-end"
         title={<Typography variant="subtitle2">{tooltip}</Typography>}
       >
-        <svg
-          viewBox="0 0 100 100"
-          version="1.1"
-          width={size}
-          height={size}
-          aria-hidden="true"
-          className={classes.circle}
-        >
-          <circle cx="50" cy="50" r="50" />
-        </svg>
+        <Circle color={color} size={size} />
       </Tooltip>
-    )
-  },
+    ) : (
+      <Circle color={color} size={size} />
+    ),
   (prev, next) => prev.color === next.color && prev.tooltip === next.tooltip
 )
 
-StatusCircle.propTypes = {
-  tooltip: PropTypes.string,
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-}
-
-StatusCircle.defaultProps = {
-  tooltip: undefined,
-  color: undefined,
-  size: 12,
-}
+StatusCircle.propTypes = { tooltip: PropTypes.string, ...Circle.propTypes }
 
 StatusCircle.displayName = 'StatusCircle'
 

src/fireedge/src/client/components/Tabs/Vm/Info/information.js

@@ -88,7 +88,7 @@ const InformationPanel = ({ vm = {}, actions }) => {
       name: T.State,
       value: (
         <Stack direction="row" alignItems="center" gap={1}>
-          <StatusCircle color={stateColor} tooltip={stateName} />
+          <StatusCircle color={stateColor} />
           <StatusChip dataCy="state" text={stateName} stateColor={stateColor} />
         </Stack>
       ),