UI: Only render & allow Controls page if MDM is enabled (and user is authorized) (#9568)

## Make sure authorized users can only a) see and b) access the Controls
page if MDM is enabled

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx

@@ -34,6 +34,7 @@ const SiteTopNav = ({
     isGlobalMaintainer,
     isAnyTeamMaintainer,
     isNoAccess,
+    isMdmEnabled,
   } = useContext(AppContext);
 
   const renderNavItem = (navItem: INavItem) => {
@@ -97,7 +98,8 @@ const SiteTopNav = ({
     isAnyTeamAdmin,
     isAnyTeamMaintainer,
     isGlobalMaintainer,
-    isNoAccess
+    isNoAccess,
+    isMdmEnabled
   );
 
   const renderNavItems = () => {

frontend/components/top_nav/SiteTopNav/navItems.ts

@@ -20,7 +20,8 @@ export default (
   isAnyTeamAdmin = false,
   isAnyTeamMaintainer = false,
   isGlobalMaintainer = false,
-  isNoAccess = false
+  isNoAccess = false,
+  isMdmEnabled = false
 ): INavItem[] => {
   if (!user) {
     return [];
@@ -59,7 +60,7 @@ export default (
         regex: new RegExp(`^${URL_PREFIX}/controls/`),
         pathname: PATHS.CONTROLS,
       },
-      exclude: !isMaintainerOrAdmin,
+      exclude: !isMaintainerOrAdmin || !isMdmEnabled,
     },
     {
       name: "Software",

frontend/router/components/MdmEnabledRoutes/MdmEnabledRoutes.tsx

@@ -0,0 +1,20 @@
+import React, { useContext } from "react";
+import { useErrorHandler } from "react-error-boundary";
+import { AppContext } from "context/app";
+
+interface IMdmEnabledRoutesProps {
+  children: JSX.Element;
+}
+
+const MdmEnabledRoutes = ({ children }: IMdmEnabledRoutesProps) => {
+  const handlePageError = useErrorHandler();
+  const { isMdmEnabled } = useContext(AppContext);
+
+  if (!isMdmEnabled) {
+    handlePageError({ status: 404 });
+    return null;
+  }
+  return <>{children}</>;
+};
+
+export default MdmEnabledRoutes;

frontend/router/components/MdmEnabledRoutes/index.ts

@@ -0,0 +1 @@
+export { default } from "./MdmEnabledRoutes";

frontend/router/index.tsx

@@ -60,6 +60,7 @@ import UnauthenticatedRoutes from "./components/UnauthenticatedRoutes";
 import AuthGlobalAdminMaintainerRoutes from "./components/AuthGlobalAdminMaintainerRoutes";
 import AuthAnyMaintainerAnyAdminRoutes from "./components/AuthAnyMaintainerAnyAdminRoutes";
 import PremiumRoutes from "./components/PremiumRoutes";
+import MdmEnabledRoutes from "./components/MdmEnabledRoutes/MdmEnabledRoutes";
 
 interface IAppWrapperProps {
   children: JSX.Element;
@@ -170,10 +171,12 @@ const routes = (
           </Route>
 
           <Route path="controls" component={AuthAnyMaintainerAnyAdminRoutes}>
-            <IndexRedirect to={"mac-os-updates"} />
+            <Route component={MdmEnabledRoutes}>
-            <Route component={ManageControlsPage}>
+              <IndexRedirect to={"mac-os-updates"} />
-              <Route path="mac-os-updates" component={MacOSUpdates} />
+              <Route component={ManageControlsPage}>
-              <Route path="mac-settings" component={MacSettingsPage} />
+                <Route path="mac-os-updates" component={MacOSUpdates} />
+                <Route path="mac-settings" component={MacSettingsPage} />
+              </Route>
             </Route>
           </Route>