components over time display name instead of id

src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx

@@ -43,13 +43,15 @@ const mockedComponentMeasurements = {
       __typename: 'Repository',
       components: [
         {
+          componentId: 'components1_id',
           name: 'components1',
           percentCovered: 93.26,
           percentChange: -1.56,
           lastUploaded: '2021-09-30T00:00:00Z',
           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,

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.spec.tsx

@@ -60,6 +60,7 @@ describe('DeleteComponentModal', () => {
       render(
         <DeleteComponentModal
           componentId="component-123"
+          name="componentName"
           closeModal={jest.fn()}
           isOpen
         />,
@@ -74,14 +75,15 @@ describe('DeleteComponentModal', () => {
       )
       expect(messagePartTwo).toBeInTheDocument()
 
-      const componentId = await screen.findAllByText(/component-123/)
+      const componentId = await screen.findAllByText(/componentName/)
       expect(componentId).toHaveLength(3)
     })
 
     it('renders delete and cancel buttons', async () => {
       render(
         <DeleteComponentModal
           componentId="component-123"
+          name="componentName"
           closeModal={jest.fn()}
           isOpen
         />,
@@ -101,14 +103,15 @@ describe('DeleteComponentModal', () => {
       render(
         <DeleteComponentModal
           componentId="component-123"
+          name="componentName"
           closeModal={jest.fn()}
           isOpen
         />,
         {
           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
         />,

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/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/hooks/useRepoComponentsTable.spec.tsx

@@ -82,13 +82,15 @@ const mockedComponentMeasurements = {
       components: [
         {
           name: 'component1',
+          componentId: 'component1Id',
           percentCovered: 93.26,
           percentChange: 1.65,
           lastUploaded: null,
           measurements: [],
         },
         {
           name: 'component2',
+          componentId: 'component2Id',
           percentCovered: 91.74,
           percentChange: 2.65,
           lastUploaded: null,
@@ -111,13 +113,15 @@ const mockEmptyComponentMeasurements = {
 const componentsData = [
   {
     name: 'component1',
+    componentId: 'component1Id',
     percentCovered: 93.26,
     percentChange: 1.65,
     measurements: [],
     lastUploaded: null,
   },
   {
     name: 'component2',
+    componentId: 'component2Id',
     percentCovered: 91.74,
     percentChange: 2.65,
     measurements: [],

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,

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