From d3f828c9bcc8a6ccc084e2a7e25afeb232d3580a Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Thu, 23 Jun 2022 12:52:53 +0200
Subject: [PATCH] M #~: Refactor chip component (#2174)

---
 .../src/client/components/Status/Chip.js      | 62 +++++++++----------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/fireedge/src/client/components/Status/Chip.js b/src/fireedge/src/client/components/Status/Chip.js
index 00592200da..aa4dc358d1 100644
--- a/src/fireedge/src/client/components/Status/Chip.js
+++ b/src/fireedge/src/client/components/Status/Chip.js
@@ -26,41 +26,39 @@ const callAll =
   (...args) =>
     fns.forEach((fn) => fn && fn?.(...args))
 
-const Chip = styled(Typography)(
-  ({ theme: { palette }, state = 'debug', ownerState }) => {
-    const { dark = state } = palette[state] ?? {}
+const Chip = styled(Typography)(({ theme: { palette }, ownerState }) => {
+  const { dark = ownerState.state } = palette[ownerState.state] ?? {}
 
-    const isWhite = ownerState.forceWhiteColor
-    const bgColor = alpha(dark, palette.mode === SCHEMES.DARK ? 0.5 : 0.2)
-    const color = isWhite ? palette.common.white : palette.text.primary
-    const iconColor = isWhite ? palette.getContrastText(color) : dark
+  const isWhite = ownerState.forceWhiteColor
+  const bgColor = alpha(dark, palette.mode === SCHEMES.DARK ? 0.5 : 0.2)
+  const color = isWhite ? palette.common.white : palette.text.primary
+  const iconColor = isWhite ? palette.getContrastText(color) : dark
 
-    return {
-      color,
-      backgroundColor: bgColor,
-      padding: ownerState.hasIcon ? '0.1rem 0.5rem' : '0.25rem 0.5rem',
-      cursor: 'default',
-      userSelect: 'none',
-      ...(ownerState.hasIcon && {
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '0.5em',
-        '& > .icon': {
-          cursor: 'pointer',
-          color,
-          '&:hover': { color: iconColor },
-        },
-      }),
-      ...(ownerState.clickable && {
-        WebkitTapHighlightColor: 'transparent',
+  return {
+    color,
+    backgroundColor: bgColor,
+    padding: ownerState.hasIcon ? '0.1rem 0.5rem' : '0.25rem 0.5rem',
+    cursor: 'default',
+    userSelect: 'none',
+    ...(ownerState.hasIcon && {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.5em',
+      '& > .icon': {
         cursor: 'pointer',
-        '&:hover, &:focus': {
-          backgroundColor: alpha(bgColor, 0.3),
-        },
-      }),
-    }
+        color,
+        '&:hover': { color: iconColor },
+      },
+    }),
+    ...(ownerState.clickable && {
+      WebkitTapHighlightColor: 'transparent',
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        backgroundColor: alpha(bgColor, 0.3),
+      },
+    }),
   }
-)
+})
 
 const StatusChip = memo(
   ({
@@ -79,6 +77,7 @@ const StatusChip = memo(
       forceWhiteColor,
       hasIcon: clipboard || onDelete ? 'true' : undefined,
       clickable: !!onClick,
+      state: stateColor || 'debug',
     }
 
     const handleCopy = useCallback(
@@ -113,7 +112,6 @@ const StatusChip = memo(
         variant="overline"
         lineHeight="normal"
         borderRadius="0.5em"
-        state={stateColor}
         ownerState={ownerState}
         onClick={callAll(handleClick, clipboard && handleCopy)}
         data-cy={dataCy}