components over time display name instead of id

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}
       />

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>

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(),