Merge branch 'main' into cy/org_page_ui_improvements

Author: calvin-codecov

package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.9",
+    "@amplitude/analytics-types": "^2.8.4",
     "@hookform/resolvers": "^2.8.5",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.1",
@@ -83,7 +84,6 @@
     "react-router-dom-v5-compat": "^6.15.0",
     "react-use": "^17.2.4",
     "recharts": "^2.12.7",
-    "semver": "7.5.2",
     "tailwind-merge": "^2.3.0",
     "zod": "^3.21.4"
   },

public/logo_dark.svg

@@ -30,22 +30,30 @@ if (
 
 ReactModal.setAppElement('#root')
 
-// use with pattern to not block app loading.
-const FeatureFlagApp = withFeatureFlagProvider(App)
-
-const ProfiledApp = Sentry.withProfiler(FeatureFlagApp)
-
 const history = createBrowserHistory()
 
 const TOO_MANY_REQUESTS_ERROR_CODE = 429
 
 initEventTracker()
 setupSentry({ history })
 
+// use with pattern to not block app loading.
+const FeatureFlagApp = withFeatureFlagProvider(App)
+
+const ProfiledApp = Sentry.withProfiler(FeatureFlagApp)
+
+// setting to 2 minutes, this value will ensure that components that are mounted
+// after suspense do not trigger a new query to be fetched. By default, the
+// stale time value is 0, which means that the query will be re-fetched on every
+// mount.
+const QUERY_STALE_TIME = 2 * (1000 * 60)
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       suspense: true,
+      staleTime: QUERY_STALE_TIME,
+      refetchOnWindowFocus: false,
       retry: (failureCount, error) => {
         // Do not retry if the response status is 429
         if (
@@ -59,14 +67,15 @@ const queryClient = new QueryClient({
         // Otherwise, retry up to 3 times
         return failureCount < 3
       },
-      refetchOnWindowFocus: false,
     },
   },
 })
 
 const queryClientV5 = new QueryClientV5({
   defaultOptions: {
     queries: {
+      staleTime: QUERY_STALE_TIME,
+      refetchOnWindowFocus: false,
       retry: (failureCount, error) => {
         // Do not retry if the response status is 429
         if (
@@ -80,7 +89,6 @@ const queryClientV5 = new QueryClientV5({
         // Otherwise, retry up to 3 times
         return failureCount < 3
       },
-      refetchOnWindowFocus: false,
     },
   },
 })

src/index.tsx

@@ -1,5 +1,5 @@
 import { useQuery as useQueryV5 } from '@tanstack/react-queryV5'
-import { lazy, Suspense } from 'react'
+import { Suspense } from 'react'
 import { Redirect, useParams } from 'react-router-dom'
 
 import Footer from 'layouts/Footer'
@@ -11,6 +11,7 @@ import SilentNetworkErrorWrapper from 'layouts/shared/SilentNetworkErrorWrapper'
 import ToastNotifications from 'layouts/ToastNotifications'
 import { OnboardingContainerProvider } from 'pages/OwnerPage/OnboardingContainerContext/context'
 import { RepoBreadcrumbProvider } from 'pages/RepoPage/context'
+import TermsOfService from 'pages/TermsOfService'
 import { useEventContext } from 'services/events/hooks'
 import { useImpersonate } from 'services/impersonate'
 import { useTracking } from 'services/tracking'
@@ -21,8 +22,6 @@ import LoadingLogo from 'ui/LoadingLogo'
 import { NavigatorDataQueryOpts } from './hooks/NavigatorDataQueryOpts'
 import { useUserAccessGate } from './hooks/useUserAccessGate'
 
-const TermsOfService = lazy(() => import('pages/TermsOfService'))
-
 const FullPageLoader = () => (
   <div className="mt-16 flex flex-1 items-center justify-center">
     <LoadingLogo />

src/layouts/BaseLayout/BaseLayout.tsx

@@ -59,14 +59,11 @@ const useUserAccessGate = () => {
   })
 
   useEffect(() => {
-    if (!userData?.owner?.defaultOrgUsername) {
+    // only update the default org if the user exists
+    if (userData && !userData?.owner?.defaultOrgUsername) {
       updateDefaultOrg({ username: userData?.user?.username })
     }
-  }, [
-    userData?.user?.username,
-    userData?.owner?.defaultOrgUsername,
-    updateDefaultOrg,
-  ])
+  }, [userData, updateDefaultOrg])
 
   useOnboardingRedirect({
     username: userData?.user?.username,

src/layouts/BaseLayout/hooks/useUserAccessGate.js

@@ -2,29 +2,25 @@ import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { useGenerateUserToken } from 'services/access'
+import { useGenerateUserToken } from 'services/access/useGenerateUserToken'
 import Button from 'ui/Button'
 import { CopyClipboard } from 'ui/CopyClipboard'
 import Modal from 'ui/Modal'
 import TextInput from 'ui/TextInput/TextInput'
 
 function CreateTokenModal({ closeModal, provider }) {
+  const [token, setToken] = useState(null)
   const { register, handleSubmit, watch } = useForm({
-    defaultValues: {
-      name: '',
-    },
+    defaultValues: { name: '' },
   })
   const nameValue = watch('name', '')
-
-  const [token, setToken] = useState(null)
-
   const { mutate, isLoading } = useGenerateUserToken({ provider })
 
   const submit = ({ name }) => {
     mutate(
       { name },
       {
-        onSuccess: ({ data }) => {
+        onSuccess: (data) => {
           setToken(data?.createUserToken?.fullToken)
         },
       }

src/pages/AccountSettings/tabs/Access/CreateTokenModal.jsx

@@ -1,32 +1,55 @@
-import { render, screen, waitFor } from 'custom-testing-library'
-
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-
-import { useGenerateUserToken } from 'services/access'
+import { graphql, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
 
 import CreateTokenModal from './CreateTokenModal'
 
-vi.mock('services/access')
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const wrapper = ({ children }) => (
+  <QueryClientProviderV5 client={queryClientV5}>
+    {children}
+  </QueryClientProviderV5>
+)
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+})
+
+beforeEach(() => {
+  queryClientV5.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
 
 describe('CreateTokenModal', () => {
   function setup() {
     const user = userEvent.setup()
     const closeModal = vi.fn()
-    const success = {
-      data: {
-        createUserToken: {
-          fullToken: '111-222-333',
-        },
-      },
-    }
-    const mutate = vi.fn((_, { onSuccess }) => {
-      return onSuccess(success)
-    })
-    useGenerateUserToken.mockReturnValue({
-      mutate,
-    })
+    const mutateMock = vi.fn()
+
+    server.use(
+      graphql.mutation('CreateUserToken', (info) => {
+        mutateMock(info.variables)
+        return HttpResponse.json({
+          data: { createUserToken: { fullToken: '111-222-333', error: null } },
+        })
+      })
+    )
 
-    return { mutate, closeModal, user }
+    return { mutateMock, closeModal, user }
   }
 
   describe('renders initial CreateTokenModal', () => {
@@ -38,7 +61,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const title = screen.getByText(/Generate new API access token/)
@@ -52,7 +76,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const label = screen.getByText(/Token Name/)
@@ -68,7 +93,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const buttons = screen.getAllByRole('button')
@@ -78,21 +104,25 @@ describe('CreateTokenModal', () => {
 
   describe('when the user types a token name and submits', () => {
     it('calls the mutation', async () => {
-      const { mutate, closeModal, user } = setup()
+      const { mutateMock, closeModal, user } = setup()
       render(
         <CreateTokenModal
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const input = screen.getByRole('textbox')
       await user.type(input, '2333')
       const generateToken = screen.getByText('Generate Token')
       await user.click(generateToken)
 
-      expect(mutate).toHaveBeenCalled()
+      await waitFor(() => expect(mutateMock).toHaveBeenCalled())
+      expect(mutateMock).toHaveBeenCalledWith({
+        input: { name: '2333', tokenType: 'api' },
+      })
     })
 
     describe('when mutation is successful', () => {
@@ -103,7 +133,8 @@ describe('CreateTokenModal', () => {
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const title = await screen.findByText(/API access token/)
@@ -117,7 +148,8 @@ describe('CreateTokenModal', () => {
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
@@ -136,41 +168,48 @@ describe('CreateTokenModal', () => {
         const warning = screen.getByText(/Make sure to copy your token now/)
         expect(warning).toBeInTheDocument()
       })
+
       it('renders footer', async () => {
         const { closeModal, user } = setup()
         render(
           <CreateTokenModal
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
         await user.type(input, '2333')
+
         const generateToken = screen.getByText('Generate Token')
         await user.click(generateToken)
 
-        const button = screen.getByRole('button', {
+        const button = await screen.findByRole('button', {
           name: /done/i,
         })
         expect(button).toBeInTheDocument()
       })
+
       it('close modals', async () => {
         const { closeModal, user } = setup()
         render(
           <CreateTokenModal
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
         await user.type(input, '2333')
+
         const generateToken = screen.getByText('Generate Token')
         await user.click(generateToken)
-        const done = screen.getByText('Done')
+
+        const done = await screen.findByText('Done')
         await user.click(done)
 
         await waitFor(() => {