Merge branch 'main' into gh-eng-1804-add-percentage-to-size-column

craco.config.js

@@ -1,6 +1,5 @@
 /* eslint-disable camelcase */
 const { sentryWebpackPlugin } = require('@sentry/webpack-plugin')
-const WebpackHookPlugin = require('webpack-hook-plugin')
 const WebpackBar = require('webpackbar')
 
 const { resolve } = require('path')
@@ -42,12 +41,7 @@ module.exports = {
     plugins: [
       ...(process.env.SENTRY_AUTH_TOKEN ? [SentryPlugin] : []),
       ...(process.env.NODE_ENV === 'development'
-        ? [
-            new WebpackBar({ color: '#FF6600' }),
-            new WebpackHookPlugin({
-              onBuildStart: ['npx @spotlightjs/spotlight'],
-            }),
-          ]
+        ? [new WebpackBar({ color: '#FF6600' })]
         : []),
     ],
   },

craco.stats.config.js

@@ -1,6 +1,5 @@
 /* eslint-disable camelcase */
 const { codecovWebpackPlugin } = require('@codecov/webpack-plugin')
-const WebpackHookPlugin = require('webpack-hook-plugin')
 
 const { resolve } = require('path')
 
@@ -27,13 +26,6 @@ module.exports = {
       sentry: resolve(__dirname, 'src/sentry'),
     },
     plugins: [
-      ...(process.env.NODE_ENV === 'development'
-        ? [
-            new WebpackHookPlugin({
-              onBuildStart: ['npx @spotlightjs/spotlight'],
-            }),
-          ]
-        : []),
       ...(process.env.CODECOV_ORG_TOKEN && process.env.CODECOV_API_URL
         ? [
             codecovWebpackPlugin({

package.json

@@ -95,7 +95,6 @@
     "@codecov/webpack-plugin": "^0.0.1-beta.6",
     "@craco/craco": "^7.1.0",
     "@sentry/webpack-plugin": "^2.17.0",
-    "@spotlightjs/spotlight": "^1.2.7",
     "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
@@ -146,7 +145,6 @@
     "tailwindcss": "^3.4.4",
     "typescript": "^4.9.5",
     "webpack": "^5.84.1",
-    "webpack-hook-plugin": "^1.0.7",
     "webpackbar": "^6.0.1"
   },
   "engines": {

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/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) {