Enhance ObjectDisplay and StateTag components for improved state representation

- Integrated StateTag into ObjectDisplay to display the object's state conditionally.
- Updated gap handling in ObjectDisplay to account for both color and state properties.
- Modified StateTag to include a new 'showTag' prop for conditional rendering of the tag, enhancing flexibility in state display.

src/components/Dashboard/common/ObjectDisplay.jsx

@@ -9,6 +9,7 @@ import { AuthContext } from '../context/AuthContext'
 import merge from 'lodash/merge'
 import IdDisplay from './IdDisplay'
 import SpotlightTooltip from './SpotlightTooltip'
+import StateTag from './StateTag'
 
 const { Text, Link } = Typography
 
@@ -255,7 +256,7 @@ const ObjectDisplay = ({
       className='object-display-tag'
     >
       <Flex
-        gap={objectData?.color ? 'small' : '5px'}
+        gap={objectData?.color || objectData?.state ? 'small' : '5px'}
         align='center'
         style={{ minWidth: 0, height: '24px' }}
       >
@@ -267,6 +268,13 @@ const ObjectDisplay = ({
               style={{ marginBottom: '1.5px' }}
             />
           ) : null}
+          {objectData?.state ? (
+            <StateTag
+              state={objectData?.state.type}
+              showTag={false}
+              style={{ marginBottom: '1.5px' }}
+            />
+          ) : null}
           <div style={{ minWidth: 0 }}>
             {renderNameDisplay()}
 

src/components/Dashboard/common/StateTag.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import { Badge, Flex, Tag } from 'antd'
 import { useMemo } from 'react'
 
-const StateTag = ({ state, showBadge = true, style = {} }) => {
+const StateTag = ({ state, showBadge = true, showTag = true, style = {} }) => {
   const { badgeStatus, badgeText } = useMemo(() => {
     let status = 'default'
     let text = 'Unknown'
@@ -196,6 +196,10 @@ const StateTag = ({ state, showBadge = true, style = {} }) => {
     badgeProps = { color: badgeStatus }
   }
 
+  if (showTag == false) {
+    return <Badge {...badgeProps} style={{ ...style }} />
+  }
+
   return (
     <Tag color={badgeStatus} style={{ marginRight: 0, ...style }}>
       <Flex gap={6}>
@@ -209,7 +213,8 @@ const StateTag = ({ state, showBadge = true, style = {} }) => {
 StateTag.propTypes = {
   state: PropTypes.string,
   showBadge: PropTypes.bool,
-  style: PropTypes.object
+  style: PropTypes.object,
+  showTag: PropTypes.bool
 }
 
 export default StateTag