Add delete component measurements hook

src/services/deleteComponentMeasurements/index.ts

@@ -0,0 +1 @@
+export * from './useDeleteComponentMeasurements'

src/services/deleteComponentMeasurements/useDeleteComponentMeasurements.spec.tsx

@@ -0,0 +1,140 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import { useAddNotification } from 'services/toastNotification'
+
+import { useDeleteComponentMeasurements } from './useDeleteComponentMeasurements'
+
+jest.mock('services/toastNotification')
+
+const server = setupServer()
+
+beforeAll(() => server.listen())
+afterEach(() => {
+  server.resetHandlers()
+  queryClient.clear()
+})
+afterAll(() => server.close())
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const ownerUsername = 'codecov'
+const repoName = 'gazebo'
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter
+    initialEntries={[`/gh/${ownerUsername}/${repoName}/components`]}
+  >
+    <Route path="/:provider/:owner/:repo/components">
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </Route>
+  </MemoryRouter>
+)
+
+describe('useDeleteComponentMeasurements', () => {
+  function setup(data = {}, triggerError = false) {
+    const mutate = jest.fn()
+    server.use(
+      graphql.mutation('deleteComponentMeasurements', (req, res, ctx) => {
+        mutate(req.variables)
+        if (triggerError) {
+          return res(ctx.status(500), ctx.data(data))
+        } else {
+          return res(ctx.status(200), ctx.data(data))
+        }
+      })
+    )
+
+    const addNotification = jest.fn()
+
+    //@ts-ignore
+    useAddNotification.mockReturnValue(addNotification)
+
+    return { addNotification, mutate }
+  }
+
+  describe('when called without an error', () => {
+    describe('When mutation is a success', () => {
+      it('returns successful response', async () => {
+        const { mutate } = setup({
+          deleteComponentMeasurements: {
+            ownerUsername,
+            repoName,
+            componentId: 'component-123',
+          },
+        })
+        const { result } = renderHook(() => useDeleteComponentMeasurements(), {
+          wrapper,
+        })
+        result.current.mutate({ componentId: 'component-123' })
+
+        await waitFor(() => expect(result.current.isSuccess).toBeTruthy())
+        await waitFor(() =>
+          expect(mutate).toHaveBeenCalledWith({
+            input: {
+              componentId: 'component-123',
+              ownerUsername: 'codecov',
+              repoName: 'gazebo',
+            },
+          })
+        )
+      })
+    })
+  })
+
+  describe('when called with a validation error', () => {
+    describe('When mutation is a success w/ a validation error', () => {
+      it('adds an error notification', async () => {
+        const mockData = {
+          deleteComponentMeasurements: {
+            error: {
+              __typename: 'ValidationError',
+            },
+          },
+        }
+        const { addNotification } = setup(mockData)
+        const { result } = renderHook(() => useDeleteComponentMeasurements(), {
+          wrapper,
+        })
+        result.current.mutate({ componentId: 'random-component-123' })
+
+        await waitFor(() =>
+          expect(addNotification).toHaveBeenCalledWith({
+            type: 'error',
+            text: 'There was an error deleting your component measurements',
+          })
+        )
+      })
+    })
+
+    describe('When mutation is not successful', () => {
+      it('adds an error notification', async () => {
+        const mockData = {
+          deleteComponentMeasurements: {
+            error: {
+              __typename: 'ValidationError',
+            },
+          },
+        }
+        const triggerError = true
+        const { addNotification } = setup(mockData, triggerError)
+        const { result } = renderHook(() => useDeleteComponentMeasurements(), {
+          wrapper,
+        })
+        result.current.mutate({ componentId: 'random-component-123' })
+
+        await waitFor(() =>
+          expect(addNotification).toHaveBeenCalledWith({
+            type: 'error',
+            text: 'There was an error deleting your component measurements',
+          })
+        )
+      })
+    })
+  })
+})

src/services/deleteComponentMeasurements/useDeleteComponentMeasurements.ts

@@ -0,0 +1,64 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'react-router-dom'
+
+import { useAddNotification } from 'services/toastNotification'
+import Api from 'shared/api'
+
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+}
+
+interface StarTrialMutationArgs {
+  componentId: string
+}
+
+export function useDeleteComponentMeasurements() {
+  const { provider, owner, repo } = useParams<URLParams>()
+  const queryClient = useQueryClient()
+  const addToast = useAddNotification()
+
+  return useMutation({
+    mutationFn: ({ componentId }: StarTrialMutationArgs) => {
+      const query = `
+        mutation deleteComponentMeasurements(
+          $input: DeleteComponentMeasurementsInput!
+        ) {
+          deleteComponentMeasurements(input: $input) {
+            error {
+              __typename
+            }
+          }
+        }
+      `
+      const variables = {
+        input: { ownerUsername: owner, repoName: repo, componentId },
+      }
+      return Api.graphqlMutation({
+        provider,
+        query,
+        variables,
+        mutationPath: 'deleteComponentMeasurements',
+      })
+    },
+    onSuccess: ({ data }) => {
+      const error = data?.deleteComponentMeasurements?.error?.__typename
+      if (error) {
+        // TODO: adjust backend to provide a message so we can tailor the message here
+        addToast({
+          type: 'error',
+          text: 'There was an error deleting your component measurements',
+        })
+      } else {
+        queryClient.invalidateQueries(['RepoFlags'])
+      }
+    },
+    onError: (e) => {
+      addToast({
+        type: 'error',
+        text: 'There was an error deleting your component measurements',
+      })
+    },
+  })
+}