From c40c5abb804d6baa4c6e25dc7ee091995dc8ee56 Mon Sep 17 00:00:00 2001
From: yunchipang <yunchipang@gmail.com>
Date: Mon, 28 Oct 2024 18:53:47 -0700
Subject: [PATCH 1/2] fix: handle non-string values in UUIDTag

---
 src/components/common/UUIDTag.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/common/UUIDTag.js b/src/components/common/UUIDTag.js
index aef50fa5a..7e7d7d050 100644
--- a/src/components/common/UUIDTag.js
+++ b/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 = (
     <>

From d20091784b9f25b70363582b7091c20239d7d2e1 Mon Sep 17 00:00:00 2001
From: yunchipang <yunchipang@gmail.com>
Date: Mon, 28 Oct 2024 20:03:18 -0700
Subject: [PATCH 2/2] test: add component test for UUIDTag

---
 src/components/common/UUIDTag.cy.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/common/UUIDTag.cy.js

diff --git a/src/components/common/UUIDTag.cy.js b/src/components/common/UUIDTag.cy.js
new file mode 100644
index 000000000..aab68a6f8
--- /dev/null
+++ b/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');
+  });
+});