UI, Premium to Sandbox addendum 1: Hide MDM settings (#11425)

## Addresses 1 of 2 [additional specs for premium to
sandbox](https://fleetdm.slack.com/archives/C01EZVBHFHU/p1682644171632189)

- Hides the MDM Settings tab in Sandbox mode
- Slight reorganization of directories and names


## Checklist for submitter

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

---------

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

frontend/pages/admin/AdminWrapper.tsx

@@ -22,9 +22,9 @@ interface ISettingsWrapperProp {
   router: InjectedRouter; // v3
 }
 
-const baseClass = "settings-wrapper";
+const baseClass = "admin-wrapper";
 
-const SettingsWrapper = ({
+const AdminWrapper = ({
   children,
   location: { pathname },
   router,
@@ -102,4 +102,4 @@ const SettingsWrapper = ({
   );
 };
 
-export default SettingsWrapper;
+export default AdminWrapper;

frontend/pages/admin/IntegrationsPage/IntegrationNavItems.tsx

@@ -4,20 +4,25 @@ import { ISideNavItem } from "../components/SideNav/SideNav";
 import Integrations from "./cards/Integrations";
 import Mdm from "./cards/MdmSettings/MdmSettings";
 
-const INTEGRATION_SETTINGS_NAV_ITEMS: ISideNavItem<any>[] = [
-  // TODO: types
-  {
-    title: "Ticket destinations",
-    urlSection: "ticket-destinations",
-    path: PATHS.ADMIN_INTEGRATIONS_TICKET_DESTINATIONS,
-    Card: Integrations,
-  },
-  {
-    title: "Mobile device management (MDM)",
-    urlSection: "mdm",
-    path: PATHS.ADMIN_INTEGRATIONS_MDM,
-    Card: Mdm,
-  },
-];
+const getFilteredIntegrationSettingsNavItems = (
+  isSandboxMode = false
+): ISideNavItem<any>[] => {
+  return [
+    // TODO: types
+    {
+      title: "Ticket destinations",
+      urlSection: "ticket-destinations",
+      path: PATHS.ADMIN_INTEGRATIONS_TICKET_DESTINATIONS,
+      Card: Integrations,
+    },
+    {
+      title: "Mobile device management (MDM)",
+      urlSection: "mdm",
+      path: PATHS.ADMIN_INTEGRATIONS_MDM,
+      Card: Mdm,
+      exclude: isSandboxMode,
+    },
+  ].filter((navItem) => !navItem.exclude);
+};
 
-export default INTEGRATION_SETTINGS_NAV_ITEMS;
+export default getFilteredIntegrationSettingsNavItems;

frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx

@@ -3,7 +3,7 @@ import React, { useContext } from "react";
 import { Params } from "react-router/lib/Router";
 
 import SideNav from "../components/SideNav";
-import INTEGRATION_SETTINGS_NAV_ITEMS from "./IntegrationNavItems";
+import getFilteredIntegrationSettingsNavItems from "./IntegrationNavItems";
 
 const baseClass = "integrations";
 
@@ -12,9 +12,10 @@ interface IIntegrationSettingsPageProps {
 }
 
 const IntegrationsPage = ({ params }: IIntegrationSettingsPageProps) => {
+  const { isSandboxMode } = useContext(AppContext);
   const { section } = params;
-  const DEFAULT_SETTINGS_SECTION = INTEGRATION_SETTINGS_NAV_ITEMS[0];
-  const navItems = INTEGRATION_SETTINGS_NAV_ITEMS;
+  const navItems = getFilteredIntegrationSettingsNavItems(isSandboxMode);
+  const DEFAULT_SETTINGS_SECTION = navItems[0];
   const currentSection =
     navItems.find((item) => item.urlSection === section) ??
     DEFAULT_SETTINGS_SECTION;

frontend/pages/admin/_styles.scss

@@ -1,6 +1,6 @@
-@import "../../../../node_modules/react-tabs/style/react-tabs.scss";
+@import "../../../node_modules/react-tabs/style/react-tabs.scss";
 
-.settings-wrapper {
+.admin-wrapper {
   // we turn off overflow on the settings page as it seems to mess with our
   // header and navigation
   overflow: visible;
@@ -12,14 +12,14 @@
     position: relative;
 
     // fake padding for h1 while sticky
-      &::before {
-        content: "";
-        width: 100%;
-        height: $pad-xxlarge;
-        position: absolute;
-        top: -$pad-xxlarge;
-        background-color: $core-white;
-      }
+    &::before {
+      content: "";
+      width: 100%;
+      height: $pad-xxlarge;
+      position: absolute;
+      top: -$pad-xxlarge;
+      background-color: $core-white;
+    }
   }
 
   // These styles are here to make the sticky header and nav work correctly

frontend/pages/admin/components/SideNav/SideNav.tsx

@@ -12,6 +12,7 @@ export interface ISideNavItem<T> {
   urlSection: string;
   path: string;
   Card: (props: T) => JSX.Element;
+  exclude?: boolean;
 }
 
 interface ISideNavProps {

frontend/router/index.tsx

@@ -45,7 +45,7 @@ import ApiOnlyUser from "pages/ApiOnlyUser";
 import Fleet403 from "pages/errors/Fleet403";
 import Fleet404 from "pages/errors/Fleet404";
 import UserSettingsPage from "pages/UserSettingsPage";
-import SettingsWrapper from "pages/admin/SettingsWrapper/SettingsWrapper";
+import SettingsWrapper from "pages/admin/AdminWrapper";
 import ManageControlsPage from "pages/ManageControlsPage/ManageControlsPage";
 import MembersPage from "pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage";
 import AgentOptionsPage from "pages/admin/TeamManagementPage/TeamDetailsWrapper/AgentOptionsPage";