Merge branch 'main' into pr3522

.storybook/main.ts

@@ -10,7 +10,6 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/preset-create-react-app',
     '@chromatic-com/storybook',
   ],
   docs: {},

VERSION

@@ -1 +1 @@
-24.11.1
+24.12.2

package.json

@@ -88,6 +88,7 @@
   },
   "devDependencies": {
     "@acemarke/react-prod-sourcemaps": "^0.3.1",
+    "@babel/eslint-parser": "^7.25.9",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1",
     "@codecov/vite-plugin": "^1.2.1",
@@ -100,21 +101,22 @@
     "@storybook/builder-vite": "^8.3.4",
     "@storybook/manager-api": "^8.3.4",
     "@storybook/node-logger": "^8.3.4",
-    "@storybook/preset-create-react-app": "^8.3.4",
     "@storybook/react": "^8.3.4",
     "@storybook/react-vite": "^8.3.4",
     "@storybook/theming": "^8.3.4",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tanstack/eslint-plugin-query": "^4.29.4",
+    "@tanstack/eslint-plugin-query": "^4.38.0",
     "@tanstack/react-query-devtools": "^4.29.6",
     "@testing-library/dom": "10.3.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@total-typescript/ts-reset": "^0.4.2",
+    "@types/confusing-browser-globals": "^1",
     "@types/d3": "7.4.3",
     "@types/d3-array": "3.2.1",
     "@types/d3-scale": "4.0.8",
+    "@types/eslint-plugin-jsx-a11y": "^6.9.0",
     "@types/js-cookie": "3.0.6",
     "@types/lodash": "4.17.6",
     "@types/node": "^20.5.7",
@@ -126,27 +128,33 @@
     "@types/react-modal": "^3.16.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/semver": "^7",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
     "@vitejs/plugin-legacy": "^5.4.3",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-istanbul": "^2.1.3",
     "@vitest/eslint-plugin": "^1.1.7",
     "@vitest/ui": "^2.1.3",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.39.0",
+    "babel-preset-react-app": "^10.0.1",
+    "confusing-browser-globals": "^1.0.11",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-tailwindcss": "^3.17.4",
-    "eslint-plugin-testing-library": "^6.3.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
+    "eslint-plugin-testing-library": "^6.4.0",
     "http-proxy-middleware": "^2.0.7",
     "husky": "^9.1.4",
     "jsdom": "^25.0.0",
     "lint-staged": "^15.2.8",
     "msw": "^2.4.11",
     "postcss": "^8.4.31",
     "prettier": "^3.3.3",
-    "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.3.1",
     "remark-gfm": "^3.0.1",
     "resolve-url-loader": "^5.0.0",

scripts/icon-list.mjs

@@ -30,6 +30,7 @@ export const enabledIcons = [
   'light-bulb',
   'lock-closed',
   'merge',
+  'minus',
   'moon',
   'no-symbol',
   'plus-circle',

src/App.test.tsx

@@ -1,4 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { render, screen, waitFor } from '@testing-library/react'
 import { graphql, http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -121,32 +125,43 @@ const mockRepoOverview = {
   },
 }
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
+const mockNavigatorData = {
+  owner: {
+    isCurrentUserPartOfOrg: true,
+    repository: {
+      __typename: 'Repository',
+      name: 'test-repo',
     },
   },
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
 })
 
 let testLocation: ReturnType<typeof useLocation>
 const wrapper =
   (initialEntries = ['']): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={initialEntries}>
-        <Suspense fallback={<p>Loading</p>}>
-          {children}
-          <Route
-            path="*"
-            render={({ location }) => {
-              testLocation = location
-              return null
-            }}
-          />
-        </Suspense>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Suspense fallback={<p>Loading</p>}>
+            {children}
+            <Route
+              path="*"
+              render={({ location }) => {
+                testLocation = location
+                return null
+              }}
+            />
+          </Suspense>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 const server = setupServer()
@@ -230,7 +245,10 @@ describe('App', () => {
         return HttpResponse.json({ data: mockRepoOverview })
       }),
       graphql.query('GetUploadTokenRequired', (info) => {
-        return HttpResponse.json({ data: {} })
+        return HttpResponse.json({ data: { owner: null } })
+      }),
+      graphql.query('NavigatorData', () => {
+        return HttpResponse.json({ data: mockNavigatorData })
       })
     )
   }

src/layouts/BaseLayout/BaseLayout.test.tsx

@@ -1,4 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { render, screen, waitFor } from '@testing-library/react'
 import { graphql, http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -156,34 +160,48 @@ const internalUserHasSyncedProviders = {
   termsAgreement: true,
 }
 
+const mockNavigatorData = {
+  owner: {
+    isCurrentUserPartOfOrg: true,
+    repository: {
+      __typename: 'Repository',
+      name: 'test-repo',
+    },
+  },
+}
+
+const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: {
-    queries: {
-      retry: false,
-      suspense: false,
-    },
+    queries: { retry: false, suspense: false },
+  },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: {
+    queries: { retry: false },
   },
 })
-const server = setupServer()
 
 let testLocation: ReturnType<typeof useLocation>
 const wrapper: (
   initialEntries?: string[]
 ) => React.FC<React.PropsWithChildren> =
   (initialEntries = ['/bb/batman/batcave']) =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={initialEntries}>
-        <Route path="/:provider/:owner/:repo">{children}</Route>
-        <Route
-          path="*"
-          render={({ location }) => {
-            testLocation = location
-            return null
-          }}
-        />
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Route path="/:provider/:owner/:repo">{children}</Route>
+          <Route
+            path="*"
+            render={({ location }) => {
+              testLocation = location
+              return null
+            }}
+          />
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 beforeAll(() => {
@@ -192,6 +210,7 @@ beforeAll(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
   vi.clearAllMocks()
 })
@@ -236,7 +255,7 @@ describe('BaseLayout', () => {
       }),
       // Self hosted only
       graphql.query('HasAdmins', (info) => {
-        return HttpResponse.json({ data: {} })
+        return HttpResponse.json({ data: { config: null } })
       }),
       graphql.query('Seats', (info) => {
         return HttpResponse.json({ data: {} })
@@ -261,6 +280,9 @@ describe('BaseLayout', () => {
       graphql.mutation('updateDefaultOrganization', (info) => {
         return HttpResponse.json({ data: {} })
       }),
+      graphql.query('NavigatorData', () => {
+        return HttpResponse.json({ data: mockNavigatorData })
+      }),
       http.get('/internal/users/current', (info) => {
         return HttpResponse.json({})
       })

src/layouts/BaseLayout/BaseLayout.tsx

@@ -1,5 +1,6 @@
+import { useQuery as useQueryV5 } from '@tanstack/react-queryV5'
 import { lazy, Suspense } from 'react'
-import { Redirect } from 'react-router-dom'
+import { Redirect, useParams } from 'react-router-dom'
 
 import Footer from 'layouts/Footer'
 import Header from 'layouts/Header'
@@ -14,6 +15,7 @@ import GlobalBanners from 'shared/GlobalBanners'
 import GlobalTopBanners from 'shared/GlobalTopBanners'
 import LoadingLogo from 'ui/LoadingLogo'
 
+import { NavigatorDataQueryOpts } from './hooks/NavigatorDataQueryOpts'
 import { useUserAccessGate } from './hooks/useUserAccessGate'
 
 const DefaultOrgSelector = lazy(() => import('pages/DefaultOrgSelector'))
@@ -65,19 +67,42 @@ function OnboardingOrChildren({
   return <>{children}</>
 }
 
+interface URLParams {
+  provider?: string
+  owner?: string
+  repo?: string
+}
+
 function BaseLayout({ children }: React.PropsWithChildren) {
+  const { provider, owner, repo } = useParams<URLParams>()
+  useTracking()
+  const { isImpersonating } = useImpersonate()
   const {
     isFullExperience,
     showAgreeToTerms,
     showDefaultOrgSelector,
     redirectToSyncPage,
-    isLoading,
+    isLoading: isUserAccessGateLoading,
   } = useUserAccessGate()
-  useTracking()
-  const { isImpersonating } = useImpersonate()
+
+  // we have to fetch the data for the navigator up here as we can't
+  // conditionally call a suspense query, as well we need a way to have the
+  // loader be shown while we're loading
+  const { data, isLoading: isNavigatorDataLoading } = useQueryV5({
+    enabled: !!provider && !!owner && !!repo,
+    ...NavigatorDataQueryOpts({
+      // if these aren't provided, the query is disabled so we don't need to
+      // worry about the empty strings causing errors
+      provider: provider ?? '',
+      owner: owner ?? '',
+      repo: repo ?? '',
+    }),
+  })
 
   // Pause rendering of a page till we know if the user is logged in or not
-  if (isLoading) return <FullPageLoader />
+  if (isUserAccessGateLoading || isNavigatorDataLoading) {
+    return <FullPageLoader />
+  }
 
   return (
     <>
@@ -89,7 +114,7 @@ function BaseLayout({ children }: React.PropsWithChildren) {
               {isFullExperience || isImpersonating ? (
                 <>
                   <GlobalTopBanners />
-                  <Header />
+                  <Header hasRepoAccess={data?.hasRepoAccess} />
                 </>
               ) : (
                 <>