fix(deps): [fixes #185] Upgrade vulnerable versions and remove ipfs-core (#193)

* fix(deps): omit ipfs-core
* fix(deps): use @svgr/plugin-svgo/nth-check@2.0.1
* fix(deps): use resolve-url-loader/postcss@8.4.31
* chore(deps): rebuild package-lock.json
* chore(actions): update actions

.github/workflows/ci.yml

@@ -10,8 +10,8 @@ jobs:
   test_and_build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2.3.1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - run: npm ci

.github/workflows/deploy.yml

@@ -12,10 +12,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'

package.json

@@ -26,6 +26,7 @@
     "idb-chunk-store": "^1.0.1",
     "localforage": "^1.10.0",
     "mui-markdown": "^0.5.5",
+    "querystring": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-git-info": "^2.0.1",
@@ -87,6 +88,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/react-syntax-highlighter": "^15.5.5",
     "@types/streamsaver": "^2.0.1",
     "@types/uuid": "^8.3.4",
@@ -116,6 +118,15 @@
     "url": "^0.11.0",
     "util": "^0.12.5"
   },
+  "overrides": {
+    "ipfs-core": "npm:dry-uninstall",
+    "@svgr/plugin-svgo": {
+      "nth-check": "2.0.1"
+    },
+    "resolve-url-loader": {
+      "postcss": "8.4.31"
+    }
+  },
   "jest": {
     "transformIgnorePatterns": [
       "node_modules/(?!trystero)/"

sdk/sdk.ts

@@ -23,7 +23,7 @@ const iframeAttributes = [
 const configRequestTimeout = 10_000
 
 class ChatEmbed extends HTMLElement {
-  private configRequestExpirationTimer: NodeJS.Timer | null = null
+  private configRequestExpirationTimout: NodeJS.Timeout | null = null
 
   private iframe = document.createElement('iframe')
 
@@ -90,9 +90,9 @@ class ChatEmbed extends HTMLElement {
   private stopListeningForConfigRequest = () => {
     window.removeEventListener('message', this.handleConfigRequestedMessage)
 
-    if (this.configRequestExpirationTimer !== null) {
-      clearInterval(this.configRequestExpirationTimer)
-      this.configRequestExpirationTimer = null
+    if (this.configRequestExpirationTimout !== null) {
+      clearInterval(this.configRequestExpirationTimout)
+      this.configRequestExpirationTimout = null
     }
   }
 
@@ -102,7 +102,7 @@ class ChatEmbed extends HTMLElement {
 
     window.addEventListener('message', this.handleConfigRequestedMessage)
 
-    this.configRequestExpirationTimer = setTimeout(() => {
+    this.configRequestExpirationTimout = setTimeout(() => {
       console.error(`[chitchatter-sdk] configuration was not sent successfully`)
       this.stopListeningForConfigRequest()
     }, configRequestTimeout)

src/Bootstrap.tsx

@@ -43,15 +43,15 @@ const getConfigFromSdk = () => {
   )
 
   return new Promise<Partial<UserSettings>>((resolve, reject) => {
-    let expireTimer: NodeJS.Timer
+    let expireTimout: NodeJS.Timeout
 
     const expireListener = () => {
       window.removeEventListener('message', handleMessage)
-      clearTimeout(expireTimer)
+      clearTimeout(expireTimout)
       reject()
     }
 
-    expireTimer = setTimeout(expireListener, configListenerTimeout)
+    expireTimout = setTimeout(expireListener, configListenerTimeout)
 
     const handleMessage = (event: MessageEvent) => {
       if (!isConfigMessageEvent(event)) return

src/components/Room/Room.test.tsx

@@ -74,7 +74,7 @@ describe('Room', () => {
     expect(sendButton).toBeDisabled()
   })
 
-  test('inputting text enabled send button', () => {
+  test('inputting text enabled send button', async () => {
     render(
       <RouteStub>
         <Room userId={mockUserId} roomId={mockRoomId} />
@@ -83,7 +83,11 @@ describe('Room', () => {
 
     const sendButton = screen.getByLabelText('Send')
     const textInput = screen.getByPlaceholderText('Your message')
-    userEvent.type(textInput, 'hello')
+
+    await waitFor(() => {
+      userEvent.type(textInput, 'hello')
+    })
+
     expect(sendButton).not.toBeDisabled()
   })
 
@@ -96,7 +100,10 @@ describe('Room', () => {
 
     const sendButton = screen.getByLabelText('Send')
     const textInput = screen.getByPlaceholderText('Your message')
-    userEvent.type(textInput, 'hello')
+
+    await waitFor(() => {
+      userEvent.type(textInput, 'hello')
+    })
 
     await waitFor(() => {
       userEvent.click(sendButton)
@@ -118,7 +125,10 @@ describe('Room', () => {
 
     const sendButton = screen.getByLabelText('Send')
     const textInput = screen.getByPlaceholderText('Your message')
-    userEvent.type(textInput, 'hello')
+
+    await waitFor(() => {
+      userEvent.type(textInput, 'hello')
+    })
 
     await waitFor(() => {
       userEvent.click(sendButton)

src/components/Shell/Drawer.tsx

@@ -79,7 +79,7 @@ export const Drawer = ({ isDrawerOpen, onDrawerClose, theme }: DrawerProps) => {
         </IconButton>
       </Box>
       <Divider />
-      <List role="navigation">
+      <List role="navigation" aria-label="Navigation menu">
         <Link to={routes.ROOT}>
           <ListItem disablePadding>
             <ListItemButton>

src/components/Shell/Shell.test.tsx

@@ -28,20 +28,34 @@ const ShellStub = (shellProps: Partial<ShellProps> = {}) => {
 
 describe('Shell', () => {
   describe('menu drawer', () => {
-    test('can be opened', () => {
+    test('can be opened', async () => {
       render(<ShellStub />)
       const menuButton = screen.getByLabelText('Open menu')
-      userEvent.click(menuButton)
+      await waitFor(() => {
+        userEvent.click(menuButton)
+      })
+
       const navigation = screen.getByRole('navigation')
-      expect(navigation).toBeVisible()
+
+      await waitFor(() => {
+        expect(navigation).toBeVisible()
+      })
     })
 
     test('can be closed', async () => {
       render(<ShellStub />)
       const menuButton = screen.getByLabelText('Open menu')
-      userEvent.click(menuButton)
+
+      await waitFor(() => {
+        userEvent.click(menuButton)
+      })
+
       const closeMenu = screen.getByLabelText('Close menu')
-      userEvent.click(closeMenu)
+
+      await waitFor(() => {
+        userEvent.click(closeMenu)
+      })
+
       const navigation = screen.getByRole('navigation')
 
       await waitFor(() => {