fix: Remove session expiry tracker (#2988)

src/config.js

@@ -10,11 +10,10 @@ const defaultConfig = {
   GH_APP: 'codecov',
 }
 
-export const LOCAL_STORAGE_SESSION_EXPIRED_KEY = 'expired-session'
+// To be removed after we're satisfied session_expiry cookie cleanup is complete
+export const LOCAL_STORAGE_SESION_EXPIRED_KEY = 'expired_session'
 export const LOCAL_STORAGE_SESSION_TRACKING_KEY = 'tracking-session-expiry'
-
 export const COOKIE_SESSION_EXPIRY = 'session_expiry'
-export const COOKIE_SESSION_ID = 'sessionid'
 
 export function removeReactAppPrefix(obj) {
   // in .env file, the variable must start with REACT_APP_

src/index.tsx

@@ -1,14 +1,22 @@
 import * as Sentry from '@sentry/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createBrowserHistory } from 'history'
+import Cookies from 'js-cookie'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import ReactModal from 'react-modal'
 import { Router } from 'react-router-dom'
 import { CompatRouter } from 'react-router-dom-v5-compat'
 
+import config, {
+  COOKIE_SESSION_EXPIRY,
+  LOCAL_STORAGE_SESION_EXPIRED_KEY,
+  LOCAL_STORAGE_SESSION_TRACKING_KEY,
+} from 'config'
+
 import ErrorBoundary from 'layouts/shared/ErrorBoundary'
 import { withFeatureFlagProvider } from 'shared/featureFlags'
+import { metrics } from 'shared/utils/metrics'
 
 import App from './App'
 import './globals.css'
@@ -43,6 +51,16 @@ const queryClient = new QueryClient({
   },
 })
 
+if (Cookies.get(COOKIE_SESSION_EXPIRY)) {
+  localStorage.removeItem(LOCAL_STORAGE_SESION_EXPIRED_KEY)
+  localStorage.removeItem(LOCAL_STORAGE_SESSION_TRACKING_KEY)
+  Cookies.remove(COOKIE_SESSION_EXPIRY, {
+    path: '/',
+    domain: `.${(config.BASE_URL as string).split('/')[2]}`,
+  }) // Remove http(s)://
+  metrics.increment('old_session_expiry.cleanup')
+}
+
 const domNode = document.getElementById('root')
 
 if (!domNode) {

src/layouts/BaseLayout/BaseLayout.jsx

@@ -13,7 +13,6 @@ import { useFlags } from 'shared/featureFlags'
 import GlobalBanners from 'shared/GlobalBanners'
 import GlobalTopBanners from 'shared/GlobalTopBanners'
 import LoadingLogo from 'ui/LoadingLogo'
-import SessionExpiryTracker from 'ui/SessionExpiryTracker'
 
 import { useUserAccessGate } from './hooks/useUserAccessGate'
 
@@ -74,7 +73,6 @@ function BaseLayout({ children }) {
 
   return (
     <>
-      <SessionExpiryTracker />
       {isFullExperience ? (
         <>
           {newHeader ? <Header /> : <OldHeader />}

src/layouts/EnterpriseLoginLayout/EnterpriseLoginLayout.spec.tsx

@@ -2,15 +2,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter, Route, useLocation } from 'react-router-dom'
 
-import { LOCAL_STORAGE_SESSION_EXPIRED_KEY } from 'config'
-
 import EnterpriseLoginLayout from './EnterpriseLoginLayout'
 
 jest.mock('./Header', () => () => 'Header')
 jest.mock('layouts/Footer', () => () => 'Footer')
 jest.mock('shared/GlobalBanners', () => () => 'GlobalBanners')
 jest.mock('layouts/ToastNotifications', () => () => 'ToastNotifications')
-jest.mock('ui/SessionExpiryTracker', () => () => 'SessionExpiryTracker')
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -42,7 +39,7 @@ describe('EnterpriseLoginLayout', () => {
     console.error = () => {}
   })
   beforeEach(() => {
-    mockedUseLocation.mockReturnValue({ search: [] })
+    mockedUseLocation.mockReturnValue({ search: [''] })
   })
 
   afterAll(() => {
@@ -92,8 +89,7 @@ describe('EnterpriseLoginLayout', () => {
   })
 
   it('renders the session expired banner if session is expired', () => {
-    localStorage.setItem(LOCAL_STORAGE_SESSION_EXPIRED_KEY, 'true')
-
+    mockedUseLocation.mockReturnValue({ search: ['expired'] })
     render(<>children</>, { wrapper })
 
     const session = screen.getByText(/Your session has expired/)

src/layouts/EnterpriseLoginLayout/EnterpriseLoginLayout.tsx

@@ -1,8 +1,6 @@
 import { Suspense } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { LOCAL_STORAGE_SESSION_EXPIRED_KEY } from 'config'
-
 import Footer from 'layouts/Footer'
 import ErrorBoundary from 'layouts/shared/ErrorBoundary'
 import NetworkErrorBoundary from 'layouts/shared/NetworkErrorBoundary'
@@ -22,15 +20,10 @@ const FullPageLoader = () => (
 function EnterpriseLoginLayout({ children }: { children: React.ReactNode }) {
   const location = useLocation()
 
-  const showExpiryBanner = localStorage.getItem(
-    LOCAL_STORAGE_SESSION_EXPIRED_KEY
-  )
   return (
     <>
       <Header />
-      {(location.search.includes('expired') || showExpiryBanner) && (
-        <SessionExpiredBanner />
-      )}
+      {location.search.includes('expired') && <SessionExpiredBanner />}
       <Suspense fallback={<FullPageLoader />}>
         <ErrorBoundary sentryScopes={[['layout', 'base']]}>
           <NetworkErrorBoundary>

src/layouts/Header/components/UserDropdown/UserDropdown.spec.tsx

@@ -1,15 +1,11 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import Cookies from 'js-cookie'
 import { graphql, rest } from 'msw'
 import { setupServer } from 'msw/node'
-import { MemoryRouter, Route, Switch } from 'react-router-dom'
+import { MemoryRouter, Route, Switch, useLocation } from 'react-router-dom'
 
-import config, {
-  COOKIE_SESSION_EXPIRY,
-  LOCAL_STORAGE_SESSION_TRACKING_KEY,
-} from 'config'
+import config from 'config'
 
 import { useImage } from 'services/image'
 
@@ -67,6 +63,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
 const server = setupServer()
+let testLocation: ReturnType<typeof useLocation>
 
 const wrapper: (initialEntries?: string) => React.FC<React.PropsWithChildren> =
   (initialEntries = '/gh') =>
@@ -77,6 +74,13 @@ const wrapper: (initialEntries?: string) => React.FC<React.PropsWithChildren> =
           <Switch>
             <Route path="/:provider" exact>
               {children}
+              <Route
+                path="*"
+                render={({ location }) => {
+                  testLocation = location
+                  return null
+                }}
+              />
             </Route>
           </Switch>
         </MemoryRouter>
@@ -104,10 +108,6 @@ describe('UserDropdown', () => {
     })
     config.IS_SELF_HOSTED = selfHosted
     config.API_URL = ''
-    const mockRemoveItem = jest.spyOn(
-      window.localStorage.__proto__,
-      'removeItem'
-    )
 
     server.use(
       rest.post('/logout', (req, res, ctx) => res(ctx.status(205))),
@@ -118,7 +118,6 @@ describe('UserDropdown', () => {
 
     return {
       user: userEvent.setup(),
-      mockRemoveItem,
     }
   }
 
@@ -172,10 +171,9 @@ describe('UserDropdown', () => {
       })
 
       it('handles sign out', async () => {
-        const { user, mockRemoveItem } = setup()
+        const { user } = setup()
 
         jest.spyOn(console, 'error').mockImplementation()
-        const removeSpy = jest.spyOn(Cookies, 'remove').mockReturnValue()
         render(<UserDropdown />, {
           wrapper: wrapper(),
         })
@@ -187,14 +185,7 @@ describe('UserDropdown', () => {
         expect(button).toBeVisible()
         await user.click(button)
 
-        await waitFor(() =>
-          expect(mockRemoveItem).toHaveBeenCalledWith(
-            LOCAL_STORAGE_SESSION_TRACKING_KEY
-          )
-        )
-        await waitFor(() =>
-          expect(removeSpy).toHaveBeenCalledWith(COOKIE_SESSION_EXPIRY)
-        )
+        await waitFor(() => expect(testLocation.pathname).toBe('/login'))
       })
 
       it('shows manage app access link', async () => {
@@ -253,10 +244,9 @@ describe('UserDropdown', () => {
       })
 
       it('handles sign out', async () => {
-        const { user, mockRemoveItem } = setup()
+        const { user } = setup()
 
         jest.spyOn(console, 'error').mockImplementation()
-        const removeSpy = jest.spyOn(Cookies, 'remove').mockReturnValue()
         render(<UserDropdown />, {
           wrapper: wrapper(),
         })
@@ -268,14 +258,7 @@ describe('UserDropdown', () => {
         expect(button).toBeVisible()
         await user.click(button)
 
-        await waitFor(() =>
-          expect(mockRemoveItem).toHaveBeenCalledWith(
-            LOCAL_STORAGE_SESSION_TRACKING_KEY
-          )
-        )
-        await waitFor(() =>
-          expect(removeSpy).toHaveBeenCalledWith(COOKIE_SESSION_EXPIRY)
-        )
+        await waitFor(() => expect(testLocation.pathname).toBe('/login'))
       })
 
       it('does not show manage app access link', async () => {

src/layouts/Header/components/UserDropdown/UserDropdown.tsx

@@ -1,11 +1,7 @@
 import { useSelect } from 'downshift'
-import Cookies from 'js-cookie'
 import { useHistory, useParams } from 'react-router-dom'
 
-import config, {
-  COOKIE_SESSION_EXPIRY,
-  LOCAL_STORAGE_SESSION_TRACKING_KEY,
-} from 'config'
+import config from 'config'
 
 import { useUser } from 'services/user'
 import { cn } from 'shared/utils/cn'
@@ -55,8 +51,6 @@ function UserDropdown() {
       method: 'POST',
       credentials: 'include',
     })
-    localStorage.removeItem(LOCAL_STORAGE_SESSION_TRACKING_KEY)
-    Cookies.remove(COOKIE_SESSION_EXPIRY)
     history.replace('/login')
   }
 

src/layouts/LoginLayout/LoginLayout.spec.tsx

@@ -99,18 +99,6 @@ describe('LoginLayout', () => {
   })
 
   describe('when session is expired', () => {
-    it('renders the expiry banner when local storage prop set', async () => {
-      setup()
-
-      jest
-        .spyOn(window.localStorage.__proto__, 'getItem')
-        .mockReturnValue('true')
-
-      render(<LoginLayout>child content</LoginLayout>, { wrapper: wrapper() })
-      await waitFor(() => {
-        expect(screen.getByText(/Your session has expired/)).toBeInTheDocument()
-      })
-    })
     it('renders the expiry banner when query param set', async () => {
       setup()
 

src/layouts/LoginLayout/LoginLayout.tsx

@@ -1,8 +1,6 @@
 import { Suspense } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { LOCAL_STORAGE_SESSION_EXPIRED_KEY } from 'config'
-
 import Footer from 'layouts/Footer'
 import Header from 'layouts/Header'
 import OldHeader from 'layouts/OldHeader'
@@ -23,14 +21,9 @@ const LoginLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
     newHeader: false,
   })
 
-  const showExpiryBanner = localStorage.getItem(
-    LOCAL_STORAGE_SESSION_EXPIRED_KEY
-  )
   return (
     <>
-      {(location.search.includes('expired') || showExpiryBanner) && (
-        <SessionExpiredBanner />
-      )}
+      {location.search.includes('expired') && <SessionExpiredBanner />}
       {newHeader ? <Header /> : <OldHeader />}
       <Suspense fallback={<FullPageLoader />}>
         <main className="container mb-8 mt-2 flex grow flex-col gap-2 md:p-0">