ref: Migrate useUpdateOktaConfig to TSQ V5 (#3697)

Author: nicholas-codecov

src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx

@@ -5,6 +5,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
 import { z } from 'zod'
 
+import { Provider } from 'shared/api/helpers'
 import Banner from 'ui/Banner'
 import BannerContent from 'ui/Banner/BannerContent'
 import Button from 'ui/Button'
@@ -13,7 +14,7 @@ import Icon from 'ui/Icon'
 import TextInput from 'ui/TextInput'
 import Toggle from 'ui/Toggle'
 
-import { useUpdateOktaConfig } from '../hooks'
+import { useUpdateOktaConfig } from '../hooks/useUpdateOktaConfig'
 import { OktaConfigQueryOpts } from '../queries/OktaConfigQueryOpts'
 
 const FormSchema = z.object({
@@ -24,7 +25,7 @@ const FormSchema = z.object({
 
 type FormValues = z.infer<typeof FormSchema>
 interface URLParams {
-  provider: string
+  provider: Provider
   owner: string
 }
 

src/pages/AccountSettings/tabs/OktaAccess/hooks/index.ts

@@ -1,4 +1,3 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import {
   QueryClientProvider as QueryClientProviderV5,
   QueryClient as QueryClientV5,
@@ -19,9 +18,6 @@ import {
 vi.mock('services/toastNotification')
 const mockedToastNotification = useAddNotification as Mock
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-})
 const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
@@ -30,11 +26,9 @@ const wrapper =
   (initialEntries = '/gh/codecov'): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
     <QueryClientProviderV5 client={queryClientV5}>
-      <QueryClientProvider client={queryClient}>
-        <MemoryRouter initialEntries={[initialEntries]}>
-          <Route path="/:provider/:owner">{children}</Route>
-        </MemoryRouter>
-      </QueryClientProvider>
+      <MemoryRouter initialEntries={[initialEntries]}>
+        <Route path="/:provider/:owner">{children}</Route>
+      </MemoryRouter>
     </QueryClientProviderV5>
   )
 
@@ -57,7 +51,6 @@ beforeAll(() => {
 })
 
 afterEach(() => {
-  queryClient.clear()
   queryClientV5.clear()
   server.resetHandlers()
 })

src/pages/AccountSettings/tabs/OktaAccess/hooks/useUpdateOktaConfig.test.tsx

@@ -1,59 +1,53 @@
-import { useMutation } from '@tanstack/react-query'
-import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5'
+import {
+  useMutation as useMutationV5,
+  useQueryClient as useQueryClientV5,
+} from '@tanstack/react-queryV5'
 import z from 'zod'
 
 import { useAddNotification } from 'services/toastNotification'
 import Api from 'shared/api'
-import { NetworkErrorObject } from 'shared/api/helpers'
+import { Provider, rejectNetworkError } from 'shared/api/helpers'
 import A from 'ui/A'
 
 import { OktaConfigQueryOpts } from '../queries/OktaConfigQueryOpts'
 
 const TOAST_DURATION = 10000
 
 const query = `
-  mutation SaveOktaConfig($input: SaveOktaConfigInput!) {
-    saveOktaConfig(input: $input) {
-      error {
-        __typename
-        ... on UnauthorizedError {
-          message
-          __typename
-        }
-        ... on ValidationError {
-          message
-          __typename
-        }
-        ... on UnauthenticatedError {
-          __typename
-          message
-        }
+mutation SaveOktaConfig($input: SaveOktaConfigInput!) {
+  saveOktaConfig(input: $input) {
+    error {
+      __typename
+      ... on UnauthorizedError {
+        message
+      }
+      ... on ValidationError {
+        message
+      }
+      ... on UnauthenticatedError {
+        message
       }
     }
   }
-`
+}`
+
+const ErrorUnionSchema = z.discriminatedUnion('__typename', [
+  z.object({
+    __typename: z.literal('UnauthorizedError'),
+    message: z.string(),
+  }),
+  z.object({
+    __typename: z.literal('ValidationError'),
+    message: z.string(),
+  }),
+  z.object({
+    __typename: z.literal('UnauthenticatedError'),
+    message: z.string(),
+  }),
+])
 
 const ResponseSchema = z.object({
-  saveOktaConfig: z
-    .object({
-      error: z
-        .union([
-          z.object({
-            __typename: z.literal('UnauthorizedError'),
-            message: z.string(),
-          }),
-          z.object({
-            __typename: z.literal('ValidationError'),
-            message: z.string(),
-          }),
-          z.object({
-            __typename: z.literal('UnauthenticatedError'),
-            message: z.string(),
-          }),
-        ])
-        .nullable(),
-    })
-    .nullable(),
+  saveOktaConfig: z.object({ error: ErrorUnionSchema.nullable() }).nullable(),
 })
 
 export const SaveOktaConfigMessage = () => (
@@ -67,7 +61,7 @@ export const SaveOktaConfigMessage = () => (
 )
 
 interface URLParams {
-  provider: string
+  provider: Provider
   owner: string
 }
 
@@ -83,7 +77,7 @@ export const useUpdateOktaConfig = ({ provider, owner }: URLParams) => {
   const addToast = useAddNotification()
   const queryClientV5 = useQueryClientV5()
 
-  return useMutation({
+  return useMutationV5({
     mutationFn: ({
       clientId,
       clientSecret,
@@ -110,26 +104,21 @@ export const useUpdateOktaConfig = ({ provider, owner }: URLParams) => {
     onSuccess: ({ data }) => {
       const parsedData = ResponseSchema.safeParse(data)
       if (!parsedData.success) {
-        return Promise.reject({
+        return rejectNetworkError({
           status: 404,
           data: {},
           dev: 'useUpdateOktaConfig - 404 failed to parse',
-        } satisfies NetworkErrorObject)
+          error: parsedData.error,
+        })
       }
 
       const error = parsedData.data.saveOktaConfig?.error
       if (error) {
-        if (
-          error.__typename === 'ValidationError' ||
-          error.__typename === 'UnauthorizedError' ||
-          error.__typename === 'UnauthenticatedError'
-        ) {
-          addToast({
-            type: 'error',
-            text: <SaveOktaConfigMessage />,
-            disappearAfter: TOAST_DURATION,
-          })
-        }
+        addToast({
+          type: 'error',
+          text: <SaveOktaConfigMessage />,
+          disappearAfter: TOAST_DURATION,
+        })
       } else {
         addToast({
           type: 'success',