diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index 1158305678745..bb472ca0ae91a 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -18,7 +18,7 @@ import { Route, Routes } from "react-router-dom" import { selectPermissions } from "xServices/auth/authSelectors" import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors" import { XServiceContext } from "xServices/StateContext" -import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame" +import { NavbarLayout } from "./components/NavbarLayout/NavbarLayout" import { RequireAuth } from "./components/RequireAuth/RequireAuth" import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout" import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout" @@ -131,375 +131,310 @@ export const AppRouter: FC = () => { return ( }> - - - - } - /> - } /> } /> - - - - } - /> - - - - } - /> - - - - } - /> + {/* Authenticated routes */} + }> + } /> - - - - - } - /> + } /> + } /> - - - } - > - - - - - - + + + } /> - - - - } - /> - - + - - - - - } - /> - - - - - + + + } /> + - - + + + } /> + + + - - + + + } /> - + + } /> + + + + + + + + } + /> - - + + + + + } /> + } /> + } /> + + + + + } + /> + - - - - - - - - - } - /> - - - - } - /> - - - - - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - - - - - - } - /> - - - - - - - - - - - } - /> - - - - - - - - } - /> - - - - - - - - } - /> - - - - - - - - } - /> - - - - - - - - } - /> - - - - - - - - } - /> - - - - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - + - - + + + + + } /> + } /> + + + + + + + + } + /> + } /> - - + + + } /> + } /> + + - - + + + + + } /> + + + + + + + + + + } + /> + + + + + + + + } + /> + + + + + + + + } + /> + + + + + + + + } + /> - - + + + + + + + } /> + + + + + + + + } + /> + + + + + + + + } + /> + + + + + + } + /> - - + + + + + } /> + + + + + + + } + /> + + } /> + + } /> + + + + + } + /> + + } + /> + + {/* Using path="*"" means "match anything", so this route diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.test.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.test.tsx deleted file mode 100644 index 2ea19161659d0..0000000000000 --- a/site/src/components/AuthAndFrame/AuthAndFrame.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { fireEvent, screen } from "@testing-library/react" -import { renderWithAuth } from "testHelpers/renderHelpers" -import { AccountPage } from "pages/UserSettingsPage/AccountPage/AccountPage" -import i18next from "i18next" - -const { t } = i18next - -describe("AuthAndFrame", () => { - it("sets localStorage key-value when dismissed", async () => { - const localStorageMock = { - ...global.localStorage, - getItem: jest.fn(), - } - global.localStorage = localStorageMock - - // rendering a random page that is wrapped in AuthAndFrame - return renderWithAuth() - fireEvent.click( - screen.getByRole("button", { - name: t("ctas.dismissCta", { ns: "common" }), - }), - ) - expect(localStorageMock.getItem).toHaveBeenCalledWith("dismissedVersion") - }) -}) diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/NavbarLayout/NavbarLayout.tsx similarity index 60% rename from site/src/components/AuthAndFrame/AuthAndFrame.tsx rename to site/src/components/NavbarLayout/NavbarLayout.tsx index 6eea191491794..eb900dadf1bab 100644 --- a/site/src/components/AuthAndFrame/AuthAndFrame.tsx +++ b/site/src/components/NavbarLayout/NavbarLayout.tsx @@ -1,21 +1,13 @@ import { makeStyles } from "@material-ui/core/styles" import { useActor } from "@xstate/react" import { Loader } from "components/Loader/Loader" -import { FC, Suspense, useContext, useEffect } from "react" +import { FC, PropsWithChildren, Suspense, useContext, useEffect } from "react" import { XServiceContext } from "../../xServices/StateContext" import { Navbar } from "../Navbar/Navbar" -import { RequireAuth } from "../RequireAuth/RequireAuth" import { UpdateCheckBanner } from "components/UpdateCheckBanner/UpdateCheckBanner" import { Margins } from "components/Margins/Margins" -interface AuthAndFrameProps { - children: JSX.Element -} - -/** - * Wraps page in RequireAuth and renders it between Navbar and Footer - */ -export const AuthAndFrame: FC = ({ children }) => { +export const NavbarLayout: FC = ({ children }) => { const styles = useStyles() const xServices = useContext(XServiceContext) const [authState] = useActor(xServices.authXService) @@ -32,25 +24,23 @@ export const AuthAndFrame: FC = ({ children }) => { }, [authState, updateCheckSend]) return ( - -
- - {updateCheckState.context.show && ( -
- - updateCheckSend("DISMISS")} - /> - -
- )} -
- }>{children} +
+ + {updateCheckState.context.show && ( +
+ + updateCheckSend("DISMISS")} + /> +
+ )} +
+ }>{children}
- +
) } diff --git a/site/src/components/RequireAuth/RequireAuth.tsx b/site/src/components/RequireAuth/RequireAuth.tsx index f2e79b82f9a2f..d4f9ce22e6a5c 100644 --- a/site/src/components/RequireAuth/RequireAuth.tsx +++ b/site/src/components/RequireAuth/RequireAuth.tsx @@ -1,17 +1,12 @@ import { useActor } from "@xstate/react" -import { useContext, FC, PropsWithChildren } from "react" +import { useContext, FC } from "react" import { Navigate, useLocation } from "react-router" +import { Outlet } from "react-router-dom" import { embedRedirect } from "../../util/redirect" import { XServiceContext } from "../../xServices/StateContext" import { FullScreenLoader } from "../Loader/FullScreenLoader" -export interface RequireAuthProps { - children: JSX.Element -} - -export const RequireAuth: FC> = ({ - children, -}) => { +export const RequireAuth: FC = () => { const xServices = useContext(XServiceContext) const [authState] = useActor(xServices.authXService) const location = useLocation() @@ -25,6 +20,6 @@ export const RequireAuth: FC> = ({ } else if (authState.hasTag("loading")) { return } else { - return children + return } } diff --git a/site/src/testHelpers/renderHelpers.tsx b/site/src/testHelpers/renderHelpers.tsx index 82552128b68af..3900ef81479b6 100644 --- a/site/src/testHelpers/renderHelpers.tsx +++ b/site/src/testHelpers/renderHelpers.tsx @@ -64,10 +64,9 @@ export function renderWithAuth( - {ui}} - /> + }> + + {routes}