M #~: Refactor status chips component

src/fireedge/src/client/components/Cards/DatastoreCard.js

@@ -51,7 +51,7 @@ const DatastoreCard = memo(
             <Typography title={NAME} noWrap component='span'>
               {NAME}
             </Typography>
-            <StatusChip stateColor={'#c6c6c6'}>{type.name}</StatusChip>
+            <StatusChip stateColor={'#c6c6c6'} text={type.name} />
           </span>
         }
         subheader={`#${ID}`}

src/fireedge/src/client/components/Cards/HostCard.js

@@ -56,7 +56,7 @@ const HostCard = memo(
             <Typography title={NAME} noWrap component='span'>
               {NAME}
             </Typography>
-            <StatusChip stateColor={'#c6c6c6'}>{mad}</StatusChip>
+            <StatusChip stateColor={'#c6c6c6'} text={mad} />
           </span>
         }
         subheader={`#${ID}`}

src/fireedge/src/client/components/Cards/SelectCard/SelectCard.js

@@ -28,6 +28,7 @@ const SelectCard = memo(({
   isSelected,
   mediaProps,
   observerOff,
+  skeletonHeight,
   stylesProps,
   subheader,
   title
@@ -129,7 +130,7 @@ const SelectCard = memo(({
         <Skeleton
           variant="rect"
           width="100%"
-          height={140}
+          height={skeletonHeight}
         />
       )}
     </ConditionalWrap>
@@ -182,7 +183,8 @@ SelectCard.propTypes = {
     PropTypes.string
   ]),
   dataCy: PropTypes.string,
-  disableFilterImage: PropTypes.bool
+  disableFilterImage: PropTypes.bool,
+  skeletonHeight: PropTypes.number
 }
 
 SelectCard.defaultProps = {
@@ -202,7 +204,8 @@ SelectCard.defaultProps = {
   observerOff: false,
   stylesProps: undefined,
   subheader: undefined,
-  title: undefined
+  title: undefined,
+  skeletonHeight: 140
 }
 
 SelectCard.displayName = 'SelectCard'

src/fireedge/src/client/components/Cards/VirtualMachineCard.js

@@ -16,6 +16,7 @@ const VirtualMachineCard = memo(
         action={actions?.map(action =>
           <Action key={action?.cy} {...action} />
         )}
+        skeletonHeight={75}
         dataCy={`vm-${ID}`}
         handleClick={handleClick}
         icon={(

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

@@ -21,29 +21,28 @@ const useStyles = makeStyles(theme => {
   }
 })
 
-const StatusChip = memo(({ stateColor, children }) => {
+const StatusChip = memo(({ stateColor, text }) => {
   const classes = useStyles({ stateColor })
 
   return (
     <Typography component="span" className={classes.root}>
-      {children}
+      {text}
     </Typography>
   )
 },
-(prev, next) => prev.stateColor === next.stateColor
+(prev, next) =>
+  prev.stateColor === next.stateColor &&
+  prev.text === next.text
 )
 
 StatusChip.propTypes = {
   stateColor: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.node
-  ])
+  text: PropTypes.string
 }
 
 StatusChip.defaultProps = {
   stateColor: undefined,
-  children: ''
+  text: ''
 }
 
 StatusChip.displayName = 'StatusChip'

src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/info.js

@@ -54,9 +54,7 @@ const InfoTab = memo(({ info }) => {
             </ListItem>
             <ListItem>
               <Typography>{Tr(T.State)}</Typography>
-              <StatusChip stateColor={stateInfo?.color}>
-                {stateInfo?.name}
-              </StatusChip>
+              <StatusChip stateColor={stateInfo?.color} text={stateInfo?.name} />
             </ListItem>
             <ListItem>
               <Typography>{Tr(T.ReadyStatusGate)}</Typography>

src/fireedge/src/client/containers/Provisions/DialogInfo/info.js

@@ -65,9 +65,7 @@ const Info = memo(({ data = {} }) => {
             </ListItem>
             <ListItem>
               <Typography>{Tr(T.State)}</Typography>
-              <StatusChip stateColor={stateInfo?.color}>
-                {stateInfo?.name}
-              </StatusChip>
+              <StatusChip stateColor={stateInfo?.color} text={stateInfo?.name} />
             </ListItem>
           </List>
         </Paper>

src/fireedge/src/client/containers/TestApi/index.js

@@ -50,7 +50,7 @@ const TestApi = () => {
           >
             <MenuItem value="">{Tr(T.None)}</MenuItem>
             {useMemo(() =>
-              Object.keys(Commands)?.map(
+              Object.keys(Commands)?.sort().map(
                 commandName => (
                   <MenuItem
                     key={`selector-request-${commandName}`}