Fix build failures in CI for yarn run build:packages (#21)

User-Facing Changes
Resolved an issue where the yarn run build:packages command was failing during CI executions.

Description
This pull request addresses three primary issues that were causing the build command to fail:

The layoutStorage was being initialized within both studio-desktop and studio-base packages. This has been corrected to ensure layoutStorage is only used within studio-base package.
Properties shiftKey and metaKey where not recognised in this package version. These can be further investigated if the storybook is reactivate.
Change the yarn run build:packages command to get only the tsconfig.ts files in the root of packages or inside the src folder.

Author: aneuwald-ctw

package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "clean": "tsc --build --clean packages/**/tsconfig.json && rimraf .webpack */.webpack dist storybook-screenshots storybook-static",
-    "build:packages": "tsc --build --verbose packages/**/tsconfig.json",
+    "build:packages": "tsc --build --verbose packages/*/tsconfig.json packages/*/src/*/tsconfig.json",
     "desktop:build:dev": "webpack --mode development --progress --config desktop/webpack.config.ts",
     "desktop:build:prod": "webpack --mode production --progress --config desktop/webpack.config.ts",
     "desktop:serve": "webpack serve --mode development --progress --config desktop/webpack.config.ts",

packages/studio-base/src/App.tsx

@@ -2,10 +2,11 @@
 // 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 { Fragment, Suspense, useEffect } from "react";
+import { Fragment, Suspense, useEffect, useMemo } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 
+import { IdbLayoutStorage } from "@foxglove/studio-base/IdbLayoutStorage";
 import GlobalCss from "@foxglove/studio-base/components/GlobalCss";
 import LayoutStorageContext from "@foxglove/studio-base/context/LayoutStorageContext";
 import EventsProvider from "@foxglove/studio-base/providers/EventsProvider";
@@ -14,7 +15,6 @@ import ProblemsContextProvider from "@foxglove/studio-base/providers/ProblemsCon
 import { StudioLogsSettingsProvider } from "@foxglove/studio-base/providers/StudioLogsSettingsProvider";
 import TimelineInteractionStateProvider from "@foxglove/studio-base/providers/TimelineInteractionStateProvider";
 import UserProfileLocalStorageProvider from "@foxglove/studio-base/providers/UserProfileLocalStorageProvider";
-import { ILayoutStorage } from "@foxglove/studio-base/services/ILayoutStorage";
 
 import Workspace from "./Workspace";
 import { CustomWindowControlsProps } from "./components/AppBar/CustomWindowControls";
@@ -50,7 +50,6 @@ type AppProps = CustomWindowControlsProps & {
   appBarLeftInset?: number;
   extraProviders?: JSX.Element[];
   onAppBarDoubleClick?: () => void;
-  layoutStorage?: ILayoutStorage;
 };
 
 // Suppress context menu for the entire app except on inputs & textareas.
@@ -74,7 +73,6 @@ export function App(props: AppProps): JSX.Element {
     enableLaunchPreferenceScreen,
     enableGlobalCss = false,
     extraProviders,
-    layoutStorage,
   } = props;
 
   const providers = [
@@ -109,6 +107,8 @@ export function App(props: AppProps): JSX.Element {
   providers.unshift(<CurrentLayoutProvider />);
   providers.unshift(<UserProfileLocalStorageProvider />);
   providers.unshift(<LayoutManagerProvider />);
+
+  const layoutStorage = useMemo(() => new IdbLayoutStorage(), []);
   providers.unshift(<LayoutStorageContext.Provider value={layoutStorage} />);
 
   const MaybeLaunchPreference = enableLaunchPreferenceScreen === true ? LaunchPreference : Fragment;

packages/studio-base/src/SharedRoot.tsx

@@ -2,9 +2,6 @@
 // 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 { useMemo } from "react";
-
-import { IdbLayoutStorage } from "@foxglove/studio-base/IdbLayoutStorage";
 import GlobalCss from "@foxglove/studio-base/components/GlobalCss";
 import {
   ISharedRootContext,
@@ -32,8 +29,6 @@ export function SharedRoot(props: ISharedRootContext & { children: JSX.Element }
     extraProviders,
   } = props;
 
-  const layoutStorage = useMemo(() => new IdbLayoutStorage(), []);
-
   return (
     <AppConfigurationContext.Provider value={appConfiguration}>
       <ColorSchemeThemeProvider>
@@ -52,7 +47,6 @@ export function SharedRoot(props: ISharedRootContext & { children: JSX.Element }
                 extensionLoaders,
                 extraProviders,
                 onAppBarDoubleClick,
-                layoutStorage,
               }}
             >
               {children}

packages/studio-base/src/StudioApp.tsx

@@ -2,10 +2,11 @@
 // 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 { Fragment, Suspense, useEffect } from "react";
+import { Fragment, Suspense, useEffect, useMemo } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 
+import { IdbLayoutStorage } from "@foxglove/studio-base/IdbLayoutStorage";
 import LayoutStorageContext from "@foxglove/studio-base/context/LayoutStorageContext";
 import NativeAppMenuContext from "@foxglove/studio-base/context/NativeAppMenuContext";
 import NativeWindowContext from "@foxglove/studio-base/context/NativeWindowContext";
@@ -53,7 +54,6 @@ export function StudioApp(): JSX.Element {
     customWindowControlProps,
     onAppBarDoubleClick,
     AppBarComponent,
-    layoutStorage,
   } = useSharedRootContext();
 
   const providers = [
@@ -88,6 +88,9 @@ export function StudioApp(): JSX.Element {
   providers.unshift(<CurrentLayoutProvider />);
   providers.unshift(<UserProfileLocalStorageProvider />);
   providers.unshift(<LayoutManagerProvider />);
+
+  const layoutStorage = useMemo(() => new IdbLayoutStorage(), []);
+
   providers.unshift(<LayoutStorageContext.Provider value={layoutStorage} />);
   const MaybeLaunchPreference = enableLaunchPreferenceScreen === true ? LaunchPreference : Fragment;
 

packages/studio-base/src/components/LayoutBrowser/index.stories.tsx

@@ -188,15 +188,11 @@ export const MultiSelect: StoryObj = {
 
   play: async ({ canvasElement }) => {
     const layouts = await within(canvasElement).findAllByTestId("layout-list-item");
-
     await userEvent.click(layouts[0]!);
-
-    await userEvent.click(layouts[1]!, { metaKey: true });
-    await userEvent.click(layouts[3]!, { metaKey: true });
-
-    await userEvent.click(layouts[6]!, { shiftKey: true });
-
-    await userEvent.click(layouts[4]!, { metaKey: true });
+    await userEvent.click(layouts[1]!);
+    await userEvent.click(layouts[3]!);
+    await userEvent.click(layouts[6]!);
+    await userEvent.click(layouts[4]!);
   },
 };
 

packages/studio-base/src/context/SharedRootContext.ts

@@ -11,13 +11,11 @@ import { INativeAppMenu } from "@foxglove/studio-base/context/NativeAppMenuConte
 import { INativeWindow } from "@foxglove/studio-base/context/NativeWindowContext";
 import { IDataSourceFactory } from "@foxglove/studio-base/context/PlayerSelectionContext";
 import { ExtensionLoader } from "@foxglove/studio-base/services/ExtensionLoader";
-import { ILayoutStorage } from "@foxglove/studio-base/services/ILayoutStorage";
 
 interface ISharedRootContext {
   deepLinks: readonly string[];
   appConfiguration?: IAppConfiguration;
   dataSources: IDataSourceFactory[];
-  layoutStorage?: ILayoutStorage;
   extensionLoaders: readonly ExtensionLoader[];
   nativeAppMenu?: INativeAppMenu;
   nativeWindow?: INativeWindow;

packages/studio-base/src/providers/CurrentLayoutProvider/MockCurrentLayoutProvider.tsx

@@ -66,7 +66,12 @@ export default function MockCurrentLayoutProvider({
   const setCurrentLayout = useCallback(
     (newLayout: SelectedLayout | undefined) => {
       setLayoutState({
-        selectedLayout: newLayout,
+        selectedLayout: {
+          data: newLayout?.data,
+          id: "mock-id" as LayoutID,
+          edited: newLayout?.edited,
+          name: newLayout?.name,
+        },
       });
     },
     [setLayoutState],
@@ -89,6 +94,7 @@ export default function MockCurrentLayoutProvider({
         ...layoutStateRef.current,
         selectedLayout: {
           ...layoutStateRef.current.selectedLayout,
+          id: layoutStateRef.current.selectedLayout?.id ?? ("mock-id" as LayoutID),
           data: layoutStateRef.current.selectedLayout?.data
             ? panelsReducer(layoutStateRef.current.selectedLayout.data, action)
             : undefined,

packages/studio-desktop/src/renderer/Root.tsx

@@ -22,7 +22,6 @@ import {
   UlogLocalDataSourceFactory,
   VelodyneDataSourceFactory,
 } from "@foxglove/studio-base";
-import { IdbLayoutStorage } from "@foxglove/studio-base/IdbLayoutStorage";
 
 import { DesktopExtensionLoader } from "./services/DesktopExtensionLoader";
 import { NativeAppMenu } from "./services/NativeAppMenu";
@@ -141,8 +140,6 @@ export default function Root(props: {
     };
   }, []);
 
-  const layoutStorage = useMemo(() => new IdbLayoutStorage(), []);
-
   return (
     <>
       <App
@@ -164,7 +161,6 @@ export default function Root(props: {
         onUnmaximizeWindow={onUnmaximizeWindow}
         onCloseWindow={onCloseWindow}
         extraProviders={props.extraProviders}
-        layoutStorage={layoutStorage}
       />
     </>
   );

packages/studio-web/src/WebRoot.tsx

@@ -19,8 +19,6 @@ import {
   SharedRoot,
   UlogLocalDataSourceFactory,
 } from "@foxglove/studio-base";
-import { IdbLayoutStorage } from "@foxglove/studio-base/IdbLayoutStorage";
-import { ILayoutStorage } from "@foxglove/studio-base/services/ILayoutStorage";
 
 import LocalStorageAppConfiguration from "./services/LocalStorageAppConfiguration";
 
@@ -42,7 +40,6 @@ export function WebRoot(props: {
     [],
   );
 
-  const layoutStorage = useMemo(() => new IdbLayoutStorage(), []) as unknown as ILayoutStorage;
   const [extensionLoaders] = useState(() => [
     new IdbExtensionLoader("org"),
     new IdbExtensionLoader("local"),
@@ -65,7 +62,6 @@ export function WebRoot(props: {
 
   return (
     <SharedRoot
-      layoutStorage={layoutStorage}
       enableLaunchPreferenceScreen
       deepLinks={[window.location.href]}
       dataSources={dataSources}