Merge remote-tracking branch 'origin/main' into sshin/3108

Author: suejung-sentry

VERSION

@@ -1 +1 @@
-24.12.2
+25.1.3

src/pages/AccountSettings/AccountSettings.test.jsx

@@ -168,6 +168,7 @@ describe('AccountSettings', () => {
                   planValue === Plans.USERS_TEAMM ||
                   planValue === Plans.USERS_TEAMY,
                 isTrialPlan: false,
+                isSentryPlan: false,
               },
             },
           },

src/pages/AccountSettings/AccountSettingsSideMenu.test.jsx

@@ -156,6 +156,7 @@ describe('AccountSettingsSideMenu', () => {
                   planValue === Plans.USERS_TEAMM ||
                   planValue === Plans.USERS_TEAMY,
                 isTrialPlan: false,
+                isSentryPlan: false,
               },
             },
           },

src/pages/AccountSettings/tabs/Admin/DetailsSection/DetailsSection.test.jsx

@@ -33,6 +33,10 @@ beforeEach(() => {
   server.resetHandlers()
 })
 
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
 afterAll(() => {
   server.close()
 })
@@ -43,7 +47,7 @@ describe('DetailsSection', () => {
     const mutate = vi.fn()
     const addNotification = vi.fn()
 
-    useAddNotification.mockReturnValue(addNotification)
+    vi.mocked(useAddNotification).mockReturnValue(addNotification)
     server.use(
       graphql.mutation('UpdateProfile', (info) => {
         mutate(info.variables)
@@ -52,15 +56,23 @@ describe('DetailsSection', () => {
           data: {
             updateProfile: {
               me: {
-                username: 'donald duck',
                 email: info.variables.input.email
                   ? info.variables.input.email
                   : '[email protected]',
-                name: info.variables.input.name
-                  ? info.variables.input.name
-                  : 'donald duck',
-                avatarUrl: 'http://127.0.0.1/avatar-url',
-                onboardingCompleted: false,
+                onboardingCompleted: true,
+                privateAccess: null,
+                businessEmail: null,
+                user: {
+                  name: info.variables.input.name
+                    ? info.variables.input.name
+                    : 'donald duck',
+                  username: 'donald duck',
+                  avatarUrl: 'http://127.0.0.1/avatar-url',
+                  avatar: 'http://127.0.0.1/avatar-url',
+                  student: false,
+                  studentCreatedAt: null,
+                  studentUpdatedAt: null,
+                },
               },
             },
           },
@@ -218,10 +230,15 @@ describe('DetailsSection', () => {
         )
       })
     })
-
     describe('when mutation is not successful', () => {
       it('adds an error notification', async () => {
         const { user, addNotification } = setup()
+        server.use(
+          graphql.mutation('UpdateProfile', () => {
+            return HttpResponse.error()
+          })
+        )
+
         render(<DetailsSection name="donald duck" email="[email protected]" />, {
           wrapper,
         })

src/pages/AccountSettings/tabs/OrgUploadToken/GenerateOrgUploadToken.jsx renamed to 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 renamed to 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 })
 
-    useAddNotification.mockReturnValue(addNotification)
+    vi.mocked(useFlags).mockReturnValue({ tokenlessSection: true })
+    vi.mocked(useAddNotification).mockReturnValue(addNotification)
 
     server.use(
       graphql.query('DetailOwner', () => {
@@ -87,15 +92,17 @@ describe('OrgUploadToken', () => {
           },
         })
       }),
-      graphql.mutation('regenerateOrgUploadToken', () => {
-        mutate('regenerateOrgUploadToken')
+      graphql.mutation('RegenerateOrgUploadToken', () => {
+        mutate('RegenerateOrgUploadToken')
         return HttpResponse.json({
           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: '' })
 
       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 })
@@ -193,7 +200,7 @@ describe('OrgUploadToken', () => {
       it('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 renamed to 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 renamed to 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,14 +41,18 @@ 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()
-  const { regenerateToken, isLoading } = useGenerateOrgUploadToken()
+function RegenerateOrgUploadToken({
+  orgUploadToken,
+}: {
+  orgUploadToken: string
+}) {
+  const { owner } = useParams<URLParams>()
+  const { regenerateTokenAsync, 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={regenerateTokenAsync}
             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 renamed to 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<unknown>
+  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