frontend: add the TooltipProvider everywhere

Author: sandhose

frontend/.storybook/preview.tsx

@@ -14,11 +14,13 @@
 
 import { ArgTypes, Decorator, Parameters, Preview } from "@storybook/react";
 import { useLayoutEffect } from "react";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import "../src/shared.css";
 import i18n from "../src/i18n";
 
 import localazyMetadata from "./locales";
+import { DummyRouter } from "../src/test-utils/router";
 
 export const parameters: Parameters = {
   controls: {
@@ -75,7 +77,27 @@ const withThemeProvider: Decorator = (Story, context) => {
   );
 };
 
-export const decorators: Decorator[] = [withThemeProvider];
+const withDummyRouter: Decorator = (Story, context) => {
+  return (
+    <DummyRouter>
+      <Story />
+    </DummyRouter>
+  );
+};
+
+const withTooltipProvider: Decorator = (Story, context) => {
+  return (
+    <TooltipProvider>
+      <Story />
+    </TooltipProvider>
+  );
+};
+
+export const decorators: Decorator[] = [
+  withThemeProvider,
+  withDummyRouter,
+  withTooltipProvider,
+];
 
 const locales = Object.fromEntries(
   localazyMetadata.languages.map(({ language, name, localizedName }) => [

frontend/src/components/Filter/Filter.stories.tsx

@@ -14,8 +14,6 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 
-import { DummyRouter } from "../../test-utils/router";
-
 import { Filter } from "./Filter";
 
 const meta = {
@@ -28,11 +26,9 @@ const meta = {
   },
   decorators: [
     (Story): React.ReactElement => (
-      <DummyRouter>
-        <div className="flex gap-4">
-          <Story />
-        </div>
-      </DummyRouter>
+      <div className="flex gap-4">
+        <Story />
+      </div>
     ),
   ],
 } satisfies Meta<typeof Filter>;

frontend/src/components/NavBar/NavBar.stories.tsx

@@ -14,7 +14,6 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { DummyRouter } from "../../test-utils/router";
 import NavItem from "../NavItem";
 
 import NavBar from "./NavBar";
@@ -24,12 +23,10 @@ const meta = {
   component: NavBar,
   tags: ["autodocs"],
   render: (): React.ReactElement => (
-    <DummyRouter>
-      <NavBar>
-        <NavItem to="/">Profile</NavItem>
-        <NavItem to="/sessions">Sessions</NavItem>
-      </NavBar>
-    </DummyRouter>
+    <NavBar>
+      <NavItem to="/">Profile</NavItem>
+      <NavItem to="/sessions">Sessions</NavItem>
+    </NavBar>
   ),
 } satisfies Meta<typeof NavBar>;
 

frontend/src/components/SessionDetail/SessionHeader.stories.tsx

@@ -15,18 +15,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PropsWithChildren } from "react";
 
-import { DummyRouter } from "../../test-utils/router";
-
 import SessionHeader from "./SessionHeader";
 
 type Props = PropsWithChildren;
 
 const Template: React.FC<Props> = ({ children }) => {
-  return (
-    <DummyRouter>
-      <SessionHeader to="/">{children}</SessionHeader>
-    </DummyRouter>
-  );
+  return <SessionHeader to="/">{children}</SessionHeader>;
 };
 
 const meta = {

frontend/src/components/SessionDetail/SessionHeader.test.tsx

@@ -18,13 +18,19 @@ import { composeStory } from "@storybook/react";
 import { render, cleanup } from "@testing-library/react";
 import { describe, it, expect, afterEach } from "vitest";
 
+import { DummyRouter } from "../../test-utils/router";
+
 import Meta, { Basic } from "./SessionHeader.stories";
 
 describe("<SessionHeader />", () => {
   afterEach(cleanup);
   it("renders a session header", () => {
     const Component = composeStory(Basic, Meta);
-    const { container } = render(<Component />);
+    const { container } = render(
+      <DummyRouter>
+        <Component />
+      </DummyRouter>,
+    );
     expect(container).toMatchSnapshot();
   });
 });

frontend/src/main.tsx

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { TooltipProvider } from "@vector-im/compound-web";
 import { Suspense, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
@@ -48,11 +49,13 @@ createRoot(document.getElementById("root") as HTMLElement).render(
   <StrictMode>
     <UrqlProvider value={client}>
       <ErrorBoundary>
-        <Suspense fallback={<LoadingScreen />}>
-          <I18nextProvider i18n={i18n}>
-            <RouterProvider router={router} context={{ client }} />
-          </I18nextProvider>
-        </Suspense>
+        <TooltipProvider>
+          <Suspense fallback={<LoadingScreen />}>
+            <I18nextProvider i18n={i18n}>
+              <RouterProvider router={router} context={{ client }} />
+            </I18nextProvider>
+          </Suspense>
+        </TooltipProvider>
       </ErrorBoundary>
     </UrqlProvider>
   </StrictMode>,