chore: Migrate orgUploadToken to ts

src/pages/AccountSettings/tabs/OrgUploadToken/GenerateOrgUploadToken.jsx → src/pages/AccountSettings/tabs/OrgUploadToken/GenerateOrgUploadToken.tsx

@@ -7,8 +7,12 @@ import Icon from 'ui/Icon'
 
 import useGenerateOrgUploadToken from './useGenerateOrgUploadToken'
 
+interface URLParams {
+  owner: string
+}
+
 function GenerateOrgUploadToken() {
-  const { owner } = useParams()
+  const { owner } = useParams<URLParams>()
   const { regenerateToken, isLoading } = useGenerateOrgUploadToken()
   const isAdmin = useIsCurrentUserAnAdmin({ owner })
 
@@ -33,11 +37,12 @@ function GenerateOrgUploadToken() {
       </div>
       {!isAdmin && (
         <div className="flex gap-1">
-          <Icon name="information-circle" size="sm" />
+          <Icon name="informationCircle" size="sm" />
           Only organization admins can regenerate this token.
         </div>
       )}
       <div className="flex gap-1">
+        {/* @ts-expect-error error until convert A to ts */}
         <A to={{ pageName: 'orgUploadTokenDoc' }}>Learn more</A>
         <p>how to generate and use the global upload token.</p>
       </div>

src/pages/AccountSettings/tabs/OrgUploadToken/OrgUploadToken.test.jsx → src/pages/AccountSettings/tabs/OrgUploadToken/OrgUploadToken.test.tsx

@@ -29,7 +29,7 @@ const queryClient = new QueryClient({
   },
 })
 
-const wrapper = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/account/gh/codecov/orgUploadToken']}>
     <QueryClientProvider client={queryClient}>
       <Route path="/account/:provider/:owner/orgUploadToken">
@@ -46,26 +46,31 @@ beforeAll(() => {
 afterEach(() => {
   queryClient.clear()
   server.resetHandlers()
+  vi.clearAllMocks()
 })
 
 afterAll(() => {
   server.close()
 })
 
+type SetupOptions = {
+  orgUploadToken?: string | null
+  error?: string | null
+  isAdmin?: boolean
+}
+
 describe('OrgUploadToken', () => {
-  function setup(
-    { orgUploadToken = null, error = null, isAdmin = true } = {
-      orgUploadToken: null,
-      error: null,
-      isAdmin: true,
-    }
-  ) {
+  function setup({
+    orgUploadToken = null,
+    error = null,
+    isAdmin = true,
+  }: SetupOptions = {}) {
     const user = userEvent.setup()
     const mutate = vi.fn()
     const addNotification = vi.fn()
-    useFlags.mockReturnValue({ tokenlessSection: true })
+    vi.mocked(useFlags).mockReturnValue({ tokenlessSection: true })
 
-    useAddNotification.mockReturnValue(addNotification)
+    vi.mocked(useAddNotification).mockReturnValue(addNotification)
 
     server.use(
       graphql.query('DetailOwner', () => {
@@ -93,9 +98,11 @@ describe('OrgUploadToken', () => {
           data: {
             regenerateOrgUploadToken: {
               orgUploadToken,
-              error: {
-                __typename: error,
-              },
+              ...(error && {
+                error: {
+                  __typename: error,
+                },
+              }),
             },
           },
         })
@@ -163,7 +170,7 @@ describe('OrgUploadToken', () => {
 
   describe('when user clicks on Generate button', () => {
     it('calls the mutation', async () => {
-      const { mutate, user } = setup()
+      const { mutate, user } = setup({ orgUploadToken: 'token' })
 
       render(<OrgUploadToken />, { wrapper })
 
@@ -177,7 +184,7 @@ describe('OrgUploadToken', () => {
       it('calls the mutation', async () => {
         const { user, mutate } = setup({
           orgUploadToken: '',
-          error: 'Authentication Error',
+          error: 'UnauthenticatedError',
           isAdmin: true,
         })
         render(<OrgUploadToken />, { wrapper })
@@ -190,10 +197,10 @@ describe('OrgUploadToken', () => {
         await waitFor(() => expect(mutate).toHaveBeenCalled())
       })
 
-      it('adds an error notification', async () => {
+      it.only('adds an error notification', async () => {
         const { addNotification, user } = setup({
           orgUploadToken: '',
-          error: 'Authentication Error',
+          error: 'UnauthenticatedError',
           isAdmin: true,
         })
         const { rerender } = render(<OrgUploadToken />, { wrapper })
@@ -203,12 +210,12 @@ describe('OrgUploadToken', () => {
 
         await user.click(genBtn)
 
-        rerender()
+        rerender(<OrgUploadToken />)
 
         await waitFor(() =>
           expect(addNotification).toHaveBeenCalledWith({
             type: 'error',
-            text: 'Authentication Error',
+            text: 'UnauthenticatedError',
           })
         )
       })
@@ -299,7 +306,7 @@ describe('OrgUploadToken', () => {
 
       const show = await screen.findAllByText('Show')
       expect(show[1]).toBeInTheDocument()
-      await user.click(show[1])
+      await user.click(show[1]!)
 
       const token1 = await screen.findByText('CODECOV_TOKEN=token')
       expect(token1).toBeInTheDocument()

src/pages/AccountSettings/tabs/OrgUploadToken/OrgUploadToken.jsx → src/pages/AccountSettings/tabs/OrgUploadToken/OrgUploadToken.tsx

@@ -11,8 +11,13 @@ import RegenerateOrgUploadToken from './RegenerateOrgUploadToken'
 
 const TokenlessSection = lazy(() => import('./TokenlessSection'))
 
+interface URLParams {
+  provider: string
+  owner: string
+}
+
 function OrgUploadToken() {
-  const { provider, owner } = useParams()
+  const { provider, owner } = useParams<URLParams>()
   const { data: orgUploadToken } = useOrgUploadToken({ provider, owner })
   const { tokenlessSection: tokenlessSectionFlag } = useFlags({
     tokenlessSection: false,
@@ -23,6 +28,7 @@ function OrgUploadToken() {
       <div className="flex gap-1">
         <h1 className="text-lg font-semibold">Global upload token</h1>
         <div className="mt-2 text-xs">
+          {/* @ts-expect-error error until we can convert A component to ts */}
           <A to={{ pageName: 'orgUploadTokenDoc' }}>learn more</A>
         </div>
       </div>

src/pages/AccountSettings/tabs/OrgUploadToken/RegenerateOrgUploadToken.jsx → src/pages/AccountSettings/tabs/OrgUploadToken/RegenerateOrgUploadToken.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
@@ -15,9 +14,11 @@ const TokenFormatEnum = Object.freeze({
   SECOND_FORMAT: 'CODECOV_TOKEN=',
 })
 
-const UploadToken = ({ token, format }) => {
+const UploadToken = ({ token, format }: { token: string; format: string }) => {
   const [hideClipboard, setHideClipboard] = useState(true)
-  const encodedToken = hideClipboard && format + token.replace(/[^w-]|/g, 'x')
+  const encodedToken = hideClipboard
+    ? format + token.replace(/[^w-]|/g, 'x')
+    : undefined
 
   return (
     <div className="flex items-center gap-2">
@@ -28,7 +29,7 @@ const UploadToken = ({ token, format }) => {
         data-testid="hide-token"
       >
         <Icon
-          name={hideClipboard ? 'eye' : 'eye-off'}
+          name={hideClipboard ? 'eye' : 'eyeOff'}
           size="sm"
           variant="solid"
         />
@@ -40,13 +41,17 @@ const UploadToken = ({ token, format }) => {
   )
 }
 
-UploadToken.propTypes = {
-  token: PropTypes.string.isRequired,
-  format: PropTypes.string.isRequired,
+interface URLParams {
+  provider: string
+  owner: string
 }
 
-function RegenerateOrgUploadToken({ orgUploadToken }) {
-  const { owner } = useParams()
+function RegenerateOrgUploadToken({
+  orgUploadToken,
+}: {
+  orgUploadToken: string
+}) {
+  const { owner } = useParams<URLParams>()
   const { regenerateToken, isLoading } = useGenerateOrgUploadToken()
   const [showModal, setShowModal] = useState(false)
   const isAdmin = useIsCurrentUserAnAdmin({ owner })
@@ -66,7 +71,7 @@ function RegenerateOrgUploadToken({ orgUploadToken }) {
         />
         {!isAdmin && (
           <div className="flex gap-1">
-            <Icon name="information-circle" size="sm" />
+            <Icon name="informationCircle" size="sm" />
             Only organization admins can regenerate this token.
           </div>
         )}
@@ -82,7 +87,7 @@ function RegenerateOrgUploadToken({ orgUploadToken }) {
         {showModal && (
           <RegenerateTokenModal
             closeModal={() => setShowModal(false)}
-            regenerateToken={regenerateToken}
+            regenerateToken={() => Promise.resolve(regenerateToken())}
             isLoading={isLoading}
           />
         )}
@@ -91,8 +96,4 @@ function RegenerateOrgUploadToken({ orgUploadToken }) {
   )
 }
 
-RegenerateOrgUploadToken.propTypes = {
-  orgUploadToken: PropTypes.string.isRequired,
-}
-
 export default RegenerateOrgUploadToken

src/pages/AccountSettings/tabs/OrgUploadToken/RegenrateTokenModal.jsx → src/pages/AccountSettings/tabs/OrgUploadToken/RegenrateTokenModal.tsx

@@ -1,9 +1,15 @@
-import PropTypes from 'prop-types'
-
 import Button from 'ui/Button'
 import Modal from 'ui/Modal'
 
-const RegenerateTokenModal = ({ closeModal, regenerateToken, isLoading }) => (
+const RegenerateTokenModal = ({
+  closeModal,
+  regenerateToken,
+  isLoading,
+}: {
+  closeModal: () => void
+  regenerateToken: () => Promise<void>
+  isLoading: boolean
+}) => (
   <Modal
     isOpen={true}
     onClose={closeModal}
@@ -45,10 +51,4 @@ const RegenerateTokenModal = ({ closeModal, regenerateToken, isLoading }) => (
   />
 )
 
-RegenerateTokenModal.propTypes = {
-  closeModal: PropTypes.func.isRequired,
-  regenerateToken: PropTypes.func.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-}
-
 export default RegenerateTokenModal

src/pages/AccountSettings/tabs/OrgUploadToken/useGenerateOrgUploadToken.js → src/pages/AccountSettings/tabs/OrgUploadToken/useGenerateOrgUploadToken.ts

@@ -8,8 +8,9 @@ export default function useGenerateOrgUploadToken() {
     data: res,
     ...rest
   } = useRegenerateOrgUploadToken({
-    onSuccess: (data) => {
-      const errString = data?.regenerateOrgUploadToken?.error?.__typename
+    onSuccess: () => {
+      console.log("MY DEBUG 2", res)
+      const errString = res?.error?.__typename
 
       if (errString) {
         addToast({