Enhance IdDisplay component with reference and plainCode props

- Added reference prop to allow custom display of IDs.
- Introduced plainCode prop to toggle between code and text display styles.
- Updated rendering logic to accommodate new props for improved flexibility in ID presentation.

src/components/Dashboard/common/IdDisplay.jsx

@@ -11,6 +11,8 @@ const { Text, Link } = Typography
 
 const IdDisplay = ({
   id,
+  reference = null,
+  plainCode = false,
   type,
   showCopy = true,
   longId = true,
@@ -44,23 +46,37 @@ const IdDisplay = ({
     displayId = prefix + ':' + id.toString().slice(-6)
   }
 
+  if (reference) {
+    displayId = prefix + ':' + reference
+  }
+
   return (
     <Flex
-      align={'end'}
+      align={'center'}
       className='iddisplay'
       style={{ minWidth: '0px', width: '100%' }}
     >
       {(() => {
-        const textElement = (
+        var textElement = (
-          <Text
+          <code
-            code
-            ellipsis
             style={showCopy ? { marginRight: 6, minWidth: '0px' } : undefined}
           >
             {displayId}
-          </Text>
+          </code>
         )
 
+        if (plainCode == false) {
+          textElement = (
+            <Text
+              code
+              ellipsis
+              style={showCopy ? { marginRight: 6, minWidth: '0px' } : undefined}
+            >
+              {displayId}
+            </Text>
+          )
+        }
+
         // If hyperlink is enabled
         if (showHyperlink && hyperlink != null) {
           const linkElement = (
@@ -128,9 +144,11 @@ const IdDisplay = ({
 IdDisplay.propTypes = {
   id: PropTypes.string,
   type: PropTypes.string,
+  reference: PropTypes.string,
   showCopy: PropTypes.bool,
   longId: PropTypes.bool,
   showHyperlink: PropTypes.bool,
+  plainCode: PropTypes.bool,
   showSpotlight: PropTypes.bool
 }