Merge branch 'main' into plan_upgraded_banner

VERSION

@@ -1 +1 @@
-24.6.12
+24.7.1

codecov.yml

@@ -75,3 +75,6 @@ component_management:
       name: UI
       paths:
         - src/ui/**
+
+test_analytics:
+  flake_detection: true

scripts/icons.js

@@ -37,6 +37,13 @@ const enabledIcons = [
   'cog',
   'light-bulb',
   'no-symbol',
+  'x-circle',
+  'database',
+  'trash',
+  'book-open',
+  'check-circle',
+  'question-mark-circle',
+  'plus-circle',
 ]
 
 console.log('Generating Icons import')

src/App.spec.tsx

@@ -55,11 +55,42 @@ const user = {
     owner: {
       defaultOrgUsername: 'codecov',
     },
+    email: '[email protected]',
+    privateAccess: true,
+    onboardingCompleted: true,
+    businessEmail: '[email protected]',
+    termsAgreement: true,
     user: {
-      termsAgreement: true,
+      name: 'Jane Doe',
+      username: 'janedoe',
+      avatarUrl: 'http://127.0.0.1/avatar-url',
+      avatar: 'http://127.0.0.1/avatar-url',
+      student: false,
+      studentCreatedAt: null,
+      studentUpdatedAt: null,
+      customerIntent: 'PERSONAL',
+    },
+    trackingMetadata: {
+      service: 'github',
+      ownerid: 123,
+      serviceId: '123',
+      plan: 'users-basic',
+      staff: false,
+      hasYaml: false,
+      bot: null,
+      delinquent: null,
+      didTrial: null,
+      planProvider: null,
+      planUserCount: 1,
+      createdAt: 'timestamp',
+      updatedAt: 'timestamp',
+      profile: {
+        createdAt: 'timestamp',
+        otherGoal: null,
+        typeProjects: [],
+        goals: [],
+      },
     },
-    trackingMetadata: { ownerid: 123 },
-    termsAgreement: true,
   },
 }
 
@@ -146,6 +177,9 @@ describe('App', () => {
       }),
       graphql.query('HasAdmins', (req, res, ctx) => {
         return res(ctx.status(200), ctx.data({}))
+      }),
+      graphql.mutation('updateDefaultOrganization', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data({}))
       })
     )
   }

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/globals.css

@@ -80,11 +80,49 @@
     --color-bitbucket: 0, 82, 204;
     /* --color-okta: 0, 41, 122; */
     --color-okta: 25, 25, 25;
+
+    /* Sentry User Feedback widget styles */
+    --widget-accent-background: rgb(var(--color-ds-blue-darker));
+    --widget-background-hover: rgb(var(--color-ds-blue-quinary));
+    --widget-font-family: 'Poppins', sans-serif;
   }
 }
 
 #sentry-feedback {
-  --accent-background: rgb(var(--color-ds-blue-darker));
-  --accent-background-hover: rgb(var(--color-ds-blue-quinary));
-  --font-family: 'Poppins', sans-serif;
+  --accent-background: var(--widget-accent-background);
+  --accent-background-hover: var(--widget-background-hover);
+  --font-family: var(--widget-font-family);
+}
+
+@layer components {
+  .widget {
+    --inset: 32px 44px auto auto;
+  }
+
+  .sm-widget {
+    --inset: 32px calc(50% - 276px) auto auto;
+  }
+
+  .md-widget {
+    --inset: 32px calc(50% - 340px) auto auto;
+  }
+
+  .lg-widget {
+    --inset: 32px calc(50% - 468px) auto auto;
+  }
+
+  .xl-widget {
+    --inset: 32px calc(50% - 596px) auto auto;
+  }
+
+  .twoxl-widget {
+    --inset: 32px calc(50% - 724px) auto auto;
+  }
+}
+
+#help-dropdown-widget {
+  --accent-background: var(--widget-accent-background);
+  --accent-background-hover: var(--widget-background-hover);
+  --font-family: var(--widget-font-family);
+  @apply widget sm:sm-widget md:md-widget lg:lg-widget xl:xl-widget 2xl:twoxl-widget;
 }

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

@@ -2,20 +2,20 @@ import { lazy, Suspense } from 'react'
 import { Redirect } from 'react-router-dom'
 
 import Footer from 'layouts/Footer'
-import Header from 'layouts/OldHeader'
+import Header from 'layouts/Header'
+import OldHeader from 'layouts/OldHeader'
 import ErrorBoundary from 'layouts/shared/ErrorBoundary'
 import NetworkErrorBoundary from 'layouts/shared/NetworkErrorBoundary'
 import ToastNotifications from 'layouts/ToastNotifications'
 import { useImpersonate } from 'services/impersonate'
 import { useTracking } from 'services/tracking'
+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'
 
-const LimitedHeader = lazy(() => import('layouts/LimitedHeader'))
 const DefaultOrgSelector = lazy(() => import('pages/DefaultOrgSelector'))
 const InstallationHelpBanner = lazy(() => import('./InstallationHelpBanner'))
 const TermsOfService = lazy(() => import('pages/TermsOfService'))
@@ -64,20 +64,22 @@ function BaseLayout({ children }) {
     useUserAccessGate()
   useTracking()
 
+  const { newHeader } = useFlags({
+    newHeader: false,
+  })
+
   // Pause rendering of a page till we know if the user is logged in or not
   if (isLoading) return <FullPageLoader />
 
   return (
     <>
-      <SessionExpiryTracker />
       {isFullExperience ? (
         <>
-          <Header />
+          {newHeader ? <Header /> : <OldHeader />}
           <GlobalTopBanners />
         </>
       ) : (
         <Suspense fallback={null}>
-          <LimitedHeader />
           {showDefaultOrgSelector && <InstallationHelpBanner />}
         </Suspense>
       )}