📦 [RUMF-1162] update developer-extension

.github/dependabot.yml

@@ -23,9 +23,6 @@ updates:
       # update jasmine: RUMF-1161
       - dependency-name: '*jasmine*'
       - dependency-name: '*sinon*'
-      # update extension: RUMF-1162
-      - dependency-name: '*react*'
-      - dependency-name: 'bumbag'
       # update ajv: RUMF-1164
       - dependency-name: 'ajv'
         update-types: ['version-update:semver-major']

LICENSE-3rdparty.csv

@@ -3,7 +3,8 @@ file,pako,MIT,(C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
 file,rrweb,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb/graphs/contributors) and SmartX Inc.
 file,rrweb-snapshot,MIT,Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb-snapshot/graphs/contributors) and SmartX Inc.
 file,tracekit,MIT,Copyright 2013 Onur Can Cakmak and all TraceKit contributors
-prod,bumbag,MIT,Copyright (c) 2020 Bumbag Enterprises
+prod,@mantine/core,MIT,Copyright (c) 2021 Vitaly Rtishchev
+prod,@mantine/hooks,MIT,Copyright (c) 2021 Vitaly Rtishchev
 prod,react,MIT,Copyright (c) Facebook, Inc. and its affiliates.
 prod,react-dom,MIT,Copyright (c) Facebook, Inc. and its affiliates.
 dev,@jsdevtools/coverage-istanbul-loader,MIT,Copyright (c) 2015 James Messinger

developer-extension/package.json

@@ -8,16 +8,17 @@
   },
   "devDependencies": {
     "@types/chrome": "0.0.179",
-    "@types/react": "16",
-    "@types/react-dom": "16",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.13",
     "copy-webpack-plugin": "8.1.0",
     "html-webpack-plugin": "5.3.1",
     "webpack": "5.28.0",
     "webpack-webextension-plugin": "0.4.1"
   },
   "dependencies": {
-    "bumbag": "1.6.12",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "@mantine/core": "3.6.14",
+    "@mantine/hooks": "3.6.14",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   }
 }

developer-extension/src/background/domain/flushEvents.ts

@@ -4,7 +4,7 @@ import { evaluateCodeInActiveTab } from '../utils'
 listenAction('flushEvents', () =>
   // Simulates a brief page visibility change (visible > hide > visible)
   evaluateCodeInActiveTab(() => {
-    const descriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'visibilityState')
+    const descriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'visibilityState')!
     Object.defineProperty(Document.prototype, 'visibilityState', { value: 'hidden' })
     document.dispatchEvent(new Event('visibilitychange', { bubbles: true }))
     Object.defineProperty(Document.prototype, 'visibilityState', descriptor)

developer-extension/src/background/domain/getConfig.ts

@@ -32,5 +32,7 @@ listenAction('getConfig', (type) => {
 })
 
 listenAction('configReceived', ({ type, config }, tabId) => {
-  setLocalStore(type === 'rum' ? { rumConfig: config } : { logsConfig: config }, tabId)
+  if (tabId) {
+    setLocalStore(type === 'rum' ? { rumConfig: config } : { logsConfig: config }, tabId)
+  }
 })

developer-extension/src/background/domain/logEventsFromRequests.ts

@@ -18,11 +18,11 @@ chrome.webRequest.onBeforeRequest.addListener(
     if (!intake) {
       return
     }
-    if (!info.requestBody.raw) {
+    if (!info.requestBody!.raw) {
       return
     }
 
-    for (const rawBody of info.requestBody.raw) {
+    for (const rawBody of info.requestBody!.raw) {
       if (rawBody.bytes) {
         const decodedBody = decoder.decode(rawBody.bytes)
         for (const rawEvent of decodedBody.split('\n')) {

developer-extension/src/common/actions.ts

@@ -8,10 +8,13 @@ type Message<Actions extends { [key: string]: any }> = ValueOf<{
 }>
 
 export function createListenAction<Actions>() {
-  function listenAction<K extends keyof Actions>(action: K, callback: (payload: Actions[K], tabId: number) => void) {
+  function listenAction<K extends keyof Actions>(
+    action: K,
+    callback: (payload: Actions[K], tabId: number | undefined) => void
+  ) {
     const listener = (message: Message<Actions>, sender: chrome.runtime.MessageSender) => {
       if (message.action === action) {
-        callback((message as Message<Pick<Actions, K>>).payload, sender?.tab?.id)
+        callback((message as Message<Pick<Actions, K>>).payload, sender.tab?.id)
       }
     }
     chrome.runtime.onMessage.addListener(listener)
@@ -32,7 +35,7 @@ export function createSendAction<Actions>() {
         error.message !== 'Could not establish connection. Receiving end does not exist.' &&
         error.message !== 'The message port closed before a response was received.'
       ) {
-        console.error(`sendAction error: ${error.message}`)
+        console.error(`sendAction error: ${String(error.message)}`)
       }
     })
   }

developer-extension/src/panel/app.tsx

@@ -1,31 +1,22 @@
-import { Provider as BumbagProvider, Box, css } from 'bumbag'
+import { MantineProvider } from '@mantine/core'
+import { useColorScheme } from '@mantine/hooks'
 import React, { Suspense } from 'react'
 
 import { Panel } from './panel'
 
-const theme = {
-  global: {
-    fontSize: 14,
-    styles: {
-      base: css`
-        body {
-          min-height: 100vh;
-        }
-      `,
-    },
-  },
-  modes: {
-    enableLocalStorage: false,
-    useSystemColorMode: true,
-  },
-}
-
 export function App() {
+  const colorScheme = useColorScheme()
+
   return (
-    <BumbagProvider theme={theme}>
-      <Suspense fallback={<Box padding="major-4" />}>
+    <MantineProvider
+      theme={{
+        colorScheme,
+      }}
+      withGlobalStyles
+    >
+      <Suspense fallback={<></>}>
         <Panel />
       </Suspense>
-    </BumbagProvider>
+    </MantineProvider>
   )
 }

developer-extension/src/panel/panel.tsx

@@ -1,9 +1,15 @@
-import { Tabs } from 'bumbag'
-import React from 'react'
+import { Tabs } from '@mantine/core'
+import React, { useState } from 'react'
 import { ActionsTab } from './tabs/actionsTab'
 import { ConfigTab } from './tabs/configTab'
 import { sendAction } from './actions'
 
+const enum PanelTabs {
+  Actions,
+  RumConfig,
+  LogsConfig,
+}
+
 export function Panel() {
   setInterval(() => {
     sendAction('getConfig', 'rum')
@@ -14,22 +20,19 @@ export function Panel() {
     sendAction('getConfig', 'rum')
     sendAction('getConfig', 'logs')
   })
+  const [activeTab, setActiveTab] = useState(PanelTabs.Actions)
+
   return (
-    <Tabs>
-      <Tabs.List>
-        <Tabs.Tab tabId="tab1">Actions</Tabs.Tab>
-        <Tabs.Tab tabId="tab2">RUM Config</Tabs.Tab>
-        <Tabs.Tab tabId="tab3">Logs Config</Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel tabId="tab1" padding="major-2">
+    <Tabs active={activeTab} onTabChange={setActiveTab}>
+      <Tabs.Tab label="Actions">
         <ActionsTab />
-      </Tabs.Panel>
-      <Tabs.Panel tabId="tab2" padding="major-2">
+      </Tabs.Tab>
+      <Tabs.Tab label="RUM Config">
         <ConfigTab product={'rum'} />
-      </Tabs.Panel>
-      <Tabs.Panel tabId="tab3" padding="major-2">
+      </Tabs.Tab>
+      <Tabs.Tab label="Logs Config">
         <ConfigTab product={'logs'} />
-      </Tabs.Panel>
+      </Tabs.Tab>
     </Tabs>
   )
 }

developer-extension/src/panel/tabs/actionsTab.tsx

@@ -1,4 +1,4 @@
-import { Stack, Checkbox, Badge, Button } from 'bumbag'
+import { Group, Checkbox, Badge, Button } from '@mantine/core'
 import React from 'react'
 import { sendAction } from '../actions'
 import { useStore } from '../useStore'
@@ -7,17 +7,21 @@ export function ActionsTab() {
   const [{ useDevBundles, useRumSlim, logEventsFromRequests, devServerStatus, blockIntakeRequests }, setStore] =
     useStore()
   return (
-    <Stack alignY="top" padding="major-2" spacing="major-2">
-      <Stack orientation="horizontal" verticalBelow="0" spacing="major-2" alignX="left" alignY="center">
+    <Group direction="column" spacing="md" align="flex-start">
+      <Group spacing="md" align="center">
         <Checkbox
           label="Use dev bundles"
           checked={useDevBundles}
           onChange={(e) => setStore({ useDevBundles: isChecked(e.target) })}
         />
-        <Badge
-          palette={devServerStatus === 'available' ? 'success' : devServerStatus === 'checking' ? 'warning' : 'danger'}
-        />
-      </Stack>
+        {devServerStatus === 'available' ? (
+          <Badge color="green">Available</Badge>
+        ) : devServerStatus === 'checking' ? (
+          <Badge color="yellow">Checking...</Badge>
+        ) : (
+          <Badge color="red">Unavailable</Badge>
+        )}
+      </Group>
 
       <Checkbox
         label="Use RUM Slim"
@@ -40,7 +44,7 @@ export function ActionsTab() {
       <Button onClick={() => sendAction('flushEvents', undefined)}>Flush buffered events</Button>
 
       <Button onClick={() => sendAction('endSession', undefined)}>End current session</Button>
-    </Stack>
+    </Group>
   )
 }
 

developer-extension/src/panel/tabs/configTab.tsx

@@ -1,4 +1,4 @@
-import { Table } from 'bumbag'
+import { Table } from '@mantine/core'
 import React from 'react'
 import { useStore } from '../useStore'
 
@@ -7,21 +7,21 @@ export function ConfigTab(props: { product: string }) {
   const currentTabStore = local[chrome.devtools.inspectedWindow.tabId]
   const config = props.product === 'rum' ? currentTabStore?.rumConfig : currentTabStore?.logsConfig
   return config ? (
-    <Table isStriped>
-      <Table.Head>
-        <Table.Row>
-          <Table.HeadCell>Attribute</Table.HeadCell>
-          <Table.HeadCell>Value</Table.HeadCell>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
+    <Table striped>
+      <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
         {Object.entries(config).map(([attribute, value]) => (
-          <Table.Row key={attribute}>
-            <Table.Cell>{attribute}</Table.Cell>
-            <Table.Cell>{JSON.stringify(value)}</Table.Cell>
-          </Table.Row>
+          <tr key={attribute}>
+            <td>{attribute}</td>
+            <td>{JSON.stringify(value)}</td>
+          </tr>
         ))}
-      </Table.Body>
+      </tbody>
     </Table>
   ) : null
 }

developer-extension/src/panel/useStore.ts

@@ -8,7 +8,7 @@ const storeLoadingPromise = new Promise((resolve) => {
   sendAction('getStore', undefined)
   listenAction('newStore', (newStore) => {
     store = newStore
-    storeListeners.forEach((listener) => listener(store))
+    storeListeners.forEach((listener) => listener(store!))
     resolve(undefined)
   })
 })

developer-extension/tsconfig.json

@@ -6,9 +6,6 @@
     "module": "ES6",
     "jsx": "react",
     "lib": ["ES2019", "DOM"],
-    "types": ["chrome", "react", "react-dom"],
-
-    // See https://github.com/bumbag/bumbag-ui/issues/97
-    "strictNullChecks": false
+    "types": ["chrome", "react", "react-dom"]
   }
 }

package.json

@@ -91,8 +91,6 @@
     "webpack-dev-middleware": "4.1.0"
   },
   "resolutions": {
-    "**/bumbag/lodash": "4.17.21",
-    "**/bumbag/reakit": "1.3.11",
     "ansi-regex": "5.0.1"
   }
 }