From b15fa496047e797dd68c543b948cef88abfcacb6 Mon Sep 17 00:00:00 2001
From: JerrySentry <jerry.feng@sentry.io>
Date: Tue, 7 May 2024 12:51:35 -0400
Subject: [PATCH 1/2] components over time display name instead of id

---
 .../ComponentsTable/ComponentsTable.tsx       | 14 ++++++++++++--
 .../DeleteComponentModal.tsx                  | 19 ++++++++++++-------
 src/services/repo/useRepoComponents.tsx       |  2 ++
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx
index 5dc6d10033..4c70ad435a 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx
@@ -124,12 +124,14 @@ function createTableData({
 
   const data = tableData?.map(
     ({
+      componentId,
       name,
       percentCovered,
       percentChange,
       measurements,
       lastUploaded,
     }: {
+      componentId: string
       name: string
       percentCovered: number | null
       percentChange: number | null
@@ -180,7 +182,13 @@ function createTableData({
         <div className="flex items-center justify-center">
           <button
             data-testid="delete-component"
-            onClick={() => setModalInfo({ componentId: name, showModal: true })}
+            onClick={() =>
+              setModalInfo({
+                componentId: componentId,
+                name: name,
+                showModal: true,
+              })
+            }
             className="text-ds-gray-tertiary hover:text-ds-gray-senary"
             aria-label={'delete ' + name}
           >
@@ -308,6 +316,7 @@ function ComponentsTable() {
   const { data: repoConfigData } = useRepoConfig({ provider, owner, repo })
   const [modalInfo, setModalInfo] = useState({
     componentId: null,
+    name: null,
     showModal: false,
   })
   const [sorting, setSorting] = useState<SortingState>([
@@ -332,8 +341,9 @@ function ComponentsTable() {
     <>
       <DeleteComponentModal
         componentId={modalInfo?.componentId || ''}
+        name={modalInfo?.name || ''}
         closeModal={() => {
-          setModalInfo({ componentId: null, showModal: false })
+          setModalInfo({ componentId: null, name: null, showModal: false })
         }}
         isOpen={modalInfo?.showModal}
       />
diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.tsx
index 5ec3862f65..cbe4b9afef 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.tsx
@@ -5,10 +5,16 @@ import Modal from 'ui/Modal'
 type Props = {
   isOpen: boolean
   componentId?: string
+  name?: string
   closeModal: () => void
 }
 
-const DeleteComponentModal = ({ isOpen, closeModal, componentId }: Props) => {
+const DeleteComponentModal = ({
+  isOpen,
+  closeModal,
+  componentId,
+  name,
+}: Props) => {
   const { mutate } = useDeleteComponentMeasurements()
 
   return (
@@ -18,22 +24,21 @@ const DeleteComponentModal = ({ isOpen, closeModal, componentId }: Props) => {
       hasCloseButton={true}
       size="small"
       title={
-        <span data-testid={`remove-${componentId}`} className="text-lg">
-          Remove <span className="italic">{componentId}</span>
+        <span data-testid={`remove-${name}`} className="text-lg">
+          Remove <span className="italic">{name}</span>
         </span>
       }
       body={
         <div>
           <p>
             This will remove the historical data of{' '}
-            <span className="font-semibold italic">{componentId}</span>{' '}
-            component in the app and we can’t retrieve the data.
+            <span className="font-semibold italic">{name}</span> component in
+            the app and we can’t retrieve the data.
           </p>
           <br></br>
           <p>
             <span className="font-semibold">Action required:</span> You’ll need
-            to remove{' '}
-            <span className="font-semibold italic">{componentId}</span>{' '}
+            to remove <span className="font-semibold italic">{name}</span>{' '}
             component in your yaml file otherwise you’ll still see it in this
             table.
           </p>
diff --git a/src/services/repo/useRepoComponents.tsx b/src/services/repo/useRepoComponents.tsx
index 36561c2237..b3a2f5e2e2 100644
--- a/src/services/repo/useRepoComponents.tsx
+++ b/src/services/repo/useRepoComponents.tsx
@@ -33,6 +33,7 @@ query ComponentMeasurements(
           before: $before
           branch: $branch
         ) {
+          componentId
           name
           percentCovered
           percentChange
@@ -48,6 +49,7 @@ query ComponentMeasurements(
 `
 
 export const ComponentEdgeSchema = z.object({
+  componentId: z.string(),
   name: z.string(),
   percentCovered: z.number().nullable(),
   percentChange: z.number().nullable(),

From 681f0d76bf61eb50e3b1e24c0a066087e95ee68f Mon Sep 17 00:00:00 2001
From: JerrySentry <jerry.feng@sentry.io>
Date: Tue, 7 May 2024 13:54:16 -0400
Subject: [PATCH 2/2] update tests

---
 .../subroute/ComponentsTable/ComponentsTable.spec.tsx    | 4 ++++
 .../DeleteComponentModal/DeleteComponentModal.spec.tsx   | 9 +++++++--
 .../hooks/useRepoComponentsTable.spec.tsx                | 4 ++++
 src/services/repo/useRepoComponents.spec.tsx             | 2 ++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx
index ad7fb9dc11..a33d490314 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx
@@ -43,6 +43,7 @@ const mockedComponentMeasurements = {
       __typename: 'Repository',
       components: [
         {
+          componentId: 'components1_id',
           name: 'components1',
           percentCovered: 93.26,
           percentChange: -1.56,
@@ -50,6 +51,7 @@ const mockedComponentMeasurements = {
           measurements: [{ avg: 51.78 }, { avg: 93.356 }],
         },
         {
+          componentId: 'components2_id',
           name: 'component2',
           percentCovered: 91.74,
           percentChange: null,
@@ -58,6 +60,7 @@ const mockedComponentMeasurements = {
         },
 
         {
+          componentId: 'testtest_id',
           name: 'testtest',
           percentCovered: 1.0,
           percentChange: 1.0,
@@ -76,6 +79,7 @@ const mockNoReportsUploadedMeasurements = {
       components: [
         {
           name: 'components1',
+          componentId: 'components1_id',
           percentCovered: null,
           percentChange: null,
           lastUploaded: null,
diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.spec.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.spec.tsx
index 49802145b2..c376d51270 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.spec.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.spec.tsx
@@ -60,6 +60,7 @@ describe('DeleteComponentModal', () => {
       render(
         <DeleteComponentModal
           componentId="component-123"
+          name="componentName"
           closeModal={jest.fn()}
           isOpen
         />,
@@ -74,7 +75,7 @@ describe('DeleteComponentModal', () => {
       )
       expect(messagePartTwo).toBeInTheDocument()
 
-      const componentId = await screen.findAllByText(/component-123/)
+      const componentId = await screen.findAllByText(/componentName/)
       expect(componentId).toHaveLength(3)
     })
 
@@ -82,6 +83,7 @@ describe('DeleteComponentModal', () => {
       render(
         <DeleteComponentModal
           componentId="component-123"
+          name="componentName"
           closeModal={jest.fn()}
           isOpen
         />,
@@ -101,6 +103,7 @@ describe('DeleteComponentModal', () => {
       render(
         <DeleteComponentModal
           componentId="component-123"
+          name="componentName"
           closeModal={jest.fn()}
           isOpen
         />,
@@ -108,7 +111,7 @@ describe('DeleteComponentModal', () => {
           wrapper,
         }
       )
-      const title = await screen.findByTestId(/remove-component-123/)
+      const title = await screen.findByTestId(/remove-componentName/)
       expect(title).toBeInTheDocument()
     })
   })
@@ -120,6 +123,7 @@ describe('DeleteComponentModal', () => {
       render(
         <DeleteComponentModal
           componentId="component-123"
+          name="componentName"
           closeModal={closeModal}
           isOpen
         />,
@@ -143,6 +147,7 @@ describe('DeleteComponentModal', () => {
       render(
         <DeleteComponentModal
           componentId="component-123"
+          name="componentName"
           closeModal={closeModal}
           isOpen
         />,
diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/hooks/useRepoComponentsTable.spec.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/hooks/useRepoComponentsTable.spec.tsx
index 7f22d67453..b2bc8879eb 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/hooks/useRepoComponentsTable.spec.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/hooks/useRepoComponentsTable.spec.tsx
@@ -82,6 +82,7 @@ const mockedComponentMeasurements = {
       components: [
         {
           name: 'component1',
+          componentId: 'component1Id',
           percentCovered: 93.26,
           percentChange: 1.65,
           lastUploaded: null,
@@ -89,6 +90,7 @@ const mockedComponentMeasurements = {
         },
         {
           name: 'component2',
+          componentId: 'component2Id',
           percentCovered: 91.74,
           percentChange: 2.65,
           lastUploaded: null,
@@ -111,6 +113,7 @@ const mockEmptyComponentMeasurements = {
 const componentsData = [
   {
     name: 'component1',
+    componentId: 'component1Id',
     percentCovered: 93.26,
     percentChange: 1.65,
     measurements: [],
@@ -118,6 +121,7 @@ const componentsData = [
   },
   {
     name: 'component2',
+    componentId: 'component2Id',
     percentCovered: 91.74,
     percentChange: 2.65,
     measurements: [],
diff --git a/src/services/repo/useRepoComponents.spec.tsx b/src/services/repo/useRepoComponents.spec.tsx
index 097434faf1..c99dab0a97 100644
--- a/src/services/repo/useRepoComponents.spec.tsx
+++ b/src/services/repo/useRepoComponents.spec.tsx
@@ -33,6 +33,7 @@ afterAll(() => server.close())
 const expectedData = [
   {
     name: 'component1',
+    componentId: 'component1Id',
     percentCovered: 93.26,
     percentChange: 1.65,
     lastUploaded: '2021-09-30T00:00:00Z',
@@ -45,6 +46,7 @@ const expectedData = [
   },
   {
     name: 'component2',
+    componentId: 'component2Id',
     percentCovered: 92.72,
     percentChange: 1.58,
     lastUploaded: null,