Merge pull request #1803 from yunchipang/fix/handle-non-string-uuid

Fix: Ensure UUIDTag Component Handles Non-String UUID Values Safely

Author: dadiorchen

src/components/common/UUIDTag.cy.js

@@ -0,0 +1,24 @@
+import UUIDTag from './UUIDTag';
+
+describe('UUIDTag', () => {
+  beforeEach(() => {
+    cy.viewport(500, 500);
+  });
+
+  it('renders correctly with a valid UUID string', () => {
+    const testId = '12345678';
+    cy.mount(<UUIDTag uuid={testId} />);
+    cy.contains('1234...5678').should('exist');
+  });
+
+  it('handles non-string UUID values gracefully', () => {
+    const testIdNonString = 12345678;
+    cy.mount(<UUIDTag uuid={testIdNonString} />);
+    cy.contains('1234...5678').should('exist');
+  });
+
+  it('displays a fallback for undefined UUID', () => {
+    cy.mount(<UUIDTag uuid={undefined} />);
+    cy.contains('...').should('exist');
+  });
+});

src/components/common/UUIDTag.js

@@ -2,12 +2,14 @@ import { Box, Tooltip, Typography } from '@mui/material';
 import { useClipboard } from 'hooks/globalHooks';
 
 function UUIDTag({ uuid, sx }) {
-  const formattedId = `${uuid.slice(0, 4)}...${uuid.slice(
-    uuid.length - 4,
-    uuid.length,
+  const id = typeof uuid === 'string' ? uuid : String(uuid || '');
+
+  const formattedId = `${id.slice(0, 4)}...${id.slice(
+    id.length - 4,
+    id.length,
   )}`;
 
-  const { onCopy, hasCopied } = useClipboard(uuid);
+  const { onCopy, hasCopied } = useClipboard(id);
 
   const title = (
     <>