diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index 3ce48bd651934..459998d53aa2d 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -153,22 +153,14 @@ export const AppRouter: FC = () => { } /> } /> - - - - } - /> - - - - } - /> + }> + } /> + } + /> + + } /> } /> @@ -178,26 +170,18 @@ export const AppRouter: FC = () => { - - - - } - /> + }> + } /> + + } /> - - - - } - /> + }> + } /> + + } /> } /> } /> @@ -219,118 +203,22 @@ export const AppRouter: FC = () => { /> - - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> + } + > + } /> + } /> + } /> + } /> + } /> + } /> - - - - - } - /> - - - - } - /> - - - - } - /> + }> + } /> + } /> + } /> @@ -349,11 +237,11 @@ export const AppRouter: FC = () => { - - - } /> - - + {/* Terminal page don't have the dashboard layout */} + } + /> {/* Using path="*"" means "match anything", so this route diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx index 08958ebf5f698..87f5f46355ea1 100644 --- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx +++ b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx @@ -2,17 +2,14 @@ import { makeStyles } from "@material-ui/core/styles" import { Margins } from "components/Margins/Margins" import { Stack } from "components/Stack/Stack" import { Sidebar } from "./Sidebar" -import { - createContext, - PropsWithChildren, - Suspense, - useContext, - FC, -} from "react" +import { createContext, Suspense, useContext, FC } from "react" import { useMachine } from "@xstate/react" import { Loader } from "components/Loader/Loader" import { DeploymentConfig } from "api/typesGenerated" import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine" +import { RequirePermission } from "components/RequirePermission/RequirePermission" +import { usePermissions } from "hooks/usePermissions" +import { Outlet } from "react-router-dom" type DeploySettingsContextValue = { deploymentConfig: DeploymentConfig } @@ -30,28 +27,33 @@ export const useDeploySettings = (): DeploySettingsContextValue => { return context } -export const DeploySettingsLayout: FC = ({ children }) => { +export const DeploySettingsLayout: FC = () => { const [state] = useMachine(deploymentConfigMachine) const styles = useStyles() const { deploymentConfig } = state.context + const permissions = usePermissions() return ( - - - -

- {deploymentConfig ? ( - - }>{children} - - ) : ( - - )} -

- - + + + + +

+ {deploymentConfig ? ( + + }> + + + + ) : ( + + )} +

+ + + ) } diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx index 72a0c6661b823..013e1502e3e10 100644 --- a/site/src/components/DeploySettingsLayout/Sidebar.tsx +++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx @@ -43,37 +43,34 @@ export const Sidebar: React.FC = () => { return (

} > General } > Appearance } > User Authentication } > Git Authentication - } - > + }> Network } > Security diff --git a/site/src/components/SettingsLayout/SettingsLayout.tsx b/site/src/components/SettingsLayout/SettingsLayout.tsx index b22be4ecebcf2..05864795c9943 100644 --- a/site/src/components/SettingsLayout/SettingsLayout.tsx +++ b/site/src/components/SettingsLayout/SettingsLayout.tsx @@ -1,14 +1,15 @@ import { makeStyles } from "@material-ui/core/styles" import { Sidebar } from "./Sidebar" import { Stack } from "components/Stack/Stack" -import { FC, PropsWithChildren, Suspense } from "react" +import { FC, Suspense } from "react" import { Helmet } from "react-helmet-async" import { pageTitle } from "../../util/page" import { Margins } from "../Margins/Margins" import { useMe } from "hooks/useMe" import { Loader } from "components/Loader/Loader" +import { Outlet } from "react-router-dom" -export const SettingsLayout: FC = ({ children }) => { +export const SettingsLayout: FC = () => { const styles = useStyles() const me = useMe() @@ -22,7 +23,9 @@ export const SettingsLayout: FC = ({ children }) => { }> -

{children}

+ +

diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx index 95fa316c6e6da..ed840fbe6ee70 100644 --- a/site/src/components/SettingsLayout/Sidebar.tsx +++ b/site/src/components/SettingsLayout/Sidebar.tsx @@ -52,19 +52,19 @@ export const Sidebar: React.FC<{ user: User }> = ({ user }) => { } > Account } > Security } > SSH Keys diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx index 04bb2d404f364..2a34c7d8ccefe 100644 --- a/site/src/components/TemplateLayout/TemplateLayout.tsx +++ b/site/src/components/TemplateLayout/TemplateLayout.tsx @@ -11,14 +11,13 @@ import { PageHeaderTitle, } from "components/PageHeader/PageHeader" import { useOrganizationId } from "hooks/useOrganizationId" +import { createContext, FC, Suspense, useContext } from "react" import { - createContext, - FC, - PropsWithChildren, - Suspense, - useContext, -} from "react" -import { Link as RouterLink, NavLink, useParams } from "react-router-dom" + Link as RouterLink, + NavLink, + Outlet, + useParams, +} from "react-router-dom" import { combineClasses } from "util/combineClasses" import { firstLetter } from "util/firstLetter" import { selectPermissions } from "xServices/auth/authSelectors" @@ -96,7 +95,9 @@ const CreateWorkspaceButton: FC<{ ) -export const TemplateLayout: FC = ({ children }) => { +export const TemplateLayout: FC<{ children?: JSX.Element }> = ({ + children = , +}) => { const styles = useStyles() const organizationId = useOrganizationId() const templateName = useTemplateName() diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx index 50f4481678c91..33218b4d6e836 100644 --- a/site/src/components/UsersLayout/UsersLayout.tsx +++ b/site/src/components/UsersLayout/UsersLayout.tsx @@ -6,13 +6,18 @@ import PersonAdd from "@material-ui/icons/PersonAddOutlined" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" import { useFeatureVisibility } from "hooks/useFeatureVisibility" import { usePermissions } from "hooks/usePermissions" -import { FC, PropsWithChildren } from "react" -import { Link as RouterLink, NavLink, useNavigate } from "react-router-dom" +import { FC } from "react" +import { + Link as RouterLink, + NavLink, + Outlet, + useNavigate, +} from "react-router-dom" import { combineClasses } from "util/combineClasses" import { Margins } from "../../components/Margins/Margins" import { Stack } from "../../components/Stack/Stack" -export const UsersLayout: FC = ({ children }) => { +export const UsersLayout: FC = () => { const styles = useStyles() const { createUser: canCreateUser, createGroup: canCreateGroup } = usePermissions() @@ -81,7 +86,9 @@ export const UsersLayout: FC = ({ children }) => { - {children} + + + ) }