chore(site): Use react-query and refactor the workspaces page to use it (#5838)

site/src/testHelpers/renderHelpers.tsx

@@ -1,16 +1,14 @@
-import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import {
   render as wrappedRender,
   RenderResult,
   screen,
   waitForElementToBeRemoved,
 } from "@testing-library/react"
-import { AuthProvider } from "components/AuthProvider/AuthProvider"
+import { AppProviders } from "app"
 import { DashboardLayout } from "components/Dashboard/DashboardLayout"
 import { createMemoryHistory } from "history"
 import { i18n } from "i18n"
 import { FC, ReactElement } from "react"
-import { HelmetProvider } from "react-helmet-async"
 import { I18nextProvider } from "react-i18next"
 import {
   MemoryRouter,
@@ -19,7 +17,6 @@ import {
   unstable_HistoryRouter as HistoryRouter,
 } from "react-router-dom"
 import { RequireAuth } from "../components/RequireAuth/RequireAuth"
-import { dark } from "../theme"
 import { MockUser } from "./entities"
 
 export const history = createMemoryHistory()
@@ -28,13 +25,9 @@ export const WrapperComponent: FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {
   return (
-    <HelmetProvider>
-      <ThemeProvider theme={dark}>
-        <HistoryRouter history={history}>
-          <AuthProvider>{children}</AuthProvider>
-        </HistoryRouter>
-      </ThemeProvider>
-    </HelmetProvider>
+    <AppProviders>
+      <HistoryRouter history={history}>{children}</HistoryRouter>
+    </AppProviders>
   )
 }
 
@@ -59,24 +52,20 @@ export function renderWithAuth(
   }: { route?: string; path?: string; routes?: JSX.Element } = {},
 ): RenderWithAuthResult {
   const renderResult = wrappedRender(
-    <HelmetProvider>
-      <I18nextProvider i18n={i18n}>
-        <ThemeProvider theme={dark}>
-          <AuthProvider>
-            <MemoryRouter initialEntries={[route]}>
-              <Routes>
-                <Route element={<RequireAuth />}>
-                  <Route element={<DashboardLayout />}>
-                    <Route path={path ?? route} element={ui} />
-                  </Route>
-                </Route>
-                {routes}
-              </Routes>
-            </MemoryRouter>
-          </AuthProvider>
-        </ThemeProvider>
-      </I18nextProvider>
-    </HelmetProvider>,
+    <I18nextProvider i18n={i18n}>
+      <AppProviders>
+        <MemoryRouter initialEntries={[route]}>
+          <Routes>
+            <Route element={<RequireAuth />}>
+              <Route element={<DashboardLayout />}>
+                <Route path={path ?? route} element={ui} />
+              </Route>
+            </Route>
+            {routes}
+          </Routes>
+        </MemoryRouter>
+      </AppProviders>
+    </I18nextProvider>,
   )
 
   return {