Technician role FE changes

frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx

@@ -118,6 +118,8 @@ const SiteTopNav = ({
     isGlobalAdmin,
     isGlobalMaintainer,
     isAnyTeamMaintainer,
+    isGlobalTechnician,
+    isAnyTeamTechnician,
     isNoAccess,
   } = useContext(AppContext);
 
@@ -231,7 +233,9 @@ const SiteTopNav = ({
     isAnyTeamAdmin,
     isAnyTeamMaintainer,
     isGlobalMaintainer,
-    isNoAccess
+    isNoAccess,
+    isGlobalTechnician,
+    isAnyTeamTechnician
   );
 
   const renderNavItems = () => {

frontend/components/top_nav/SiteTopNav/navItems.ts

@@ -27,18 +27,14 @@ export default (
   isAnyTeamAdmin = false,
   isAnyTeamMaintainer = false,
   isGlobalMaintainer = false,
-  isNoAccess = false
+  isNoAccess = false,
+  isGlobalTechnician = false,
+  isAnyTeamTechnician = false
 ): INavItem[] => {
   if (!user) {
     return [];
   }
 
-  const isMaintainerOrAdmin =
-    isGlobalMaintainer ||
-    isAnyTeamMaintainer ||
-    isGlobalAdmin ||
-    isAnyTeamAdmin;
-
   const logo = [
     {
       icon: "logo",
@@ -66,7 +62,14 @@ export default (
         regex: new RegExp(`^${URL_PREFIX}/controls/`),
         pathname: PATHS.CONTROLS,
       },
-      exclude: !isMaintainerOrAdmin,
+      exclude: !(
+        isGlobalMaintainer ||
+        isAnyTeamMaintainer ||
+        isGlobalAdmin ||
+        isAnyTeamAdmin ||
+        isGlobalTechnician ||
+        isAnyTeamTechnician
+      ),
       alwaysToPathname: true,
       withParams: { type: "query", names: ["team_id"] },
     },

frontend/context/app.tsx

@@ -164,6 +164,9 @@ type InitialStateType = {
   isTeamMaintainerOrTeamAdmin?: boolean;
   isAnyTeamAdmin?: boolean;
   isTeamAdmin?: boolean;
+  isTeamTechnician?: boolean;
+  isAnyTeamTechnician?: boolean;
+  isGlobalTechnician?: boolean;
   isOnlyObserver?: boolean;
   isObserverPlus?: boolean;
   isNoAccess?: boolean;
@@ -235,6 +238,9 @@ export const initialState = {
   isTeamMaintainerOrTeamAdmin: undefined,
   isAnyTeamAdmin: undefined,
   isTeamAdmin: undefined,
+  isTeamTechnician: undefined,
+  isAnyTeamTechnician: undefined,
+  isGlobalTechnician: undefined,
   isOnlyObserver: undefined,
   isObserverPlus: undefined,
   isNoAccess: undefined,
@@ -304,6 +310,7 @@ const setPermissions = (
     isGlobalAdmin: permissions.isGlobalAdmin(user),
     isGlobalMaintainer: permissions.isGlobalMaintainer(user),
     isGlobalObserver: permissions.isGlobalObserver(user),
+    isGlobalTechnician: permissions.isGlobalTechnician(user),
     isOnGlobalTeam: permissions.isOnGlobalTeam(user),
     isAnyTeamObserverPlus: permissions.isAnyTeamObserverPlus(user),
     isAnyTeamMaintainer: permissions.isAnyTeamMaintainer(user),
@@ -314,6 +321,8 @@ const setPermissions = (
     isTeamObserver: permissions.isTeamObserver(user, teamId),
     isTeamMaintainer: permissions.isTeamMaintainer(user, teamId),
     isTeamAdmin: permissions.isTeamAdmin(user, teamId),
+    isTeamTechnician: permissions.isTeamTechnician(user, teamId),
+    isAnyTeamTechnician: permissions.isAnyTeamTechnician(user),
     isTeamMaintainerOrTeamAdmin: permissions.isTeamMaintainerOrTeamAdmin(
       user,
       teamId
@@ -519,6 +528,9 @@ const AppProvider = ({ children }: Props): JSX.Element => {
       isTeamObserver: state.isTeamObserver,
       isTeamMaintainer: state.isTeamMaintainer,
       isTeamAdmin: state.isTeamAdmin,
+      isTeamTechnician: state.isTeamTechnician,
+      isAnyTeamTechnician: state.isAnyTeamTechnician,
+      isGlobalTechnician: state.isGlobalTechnician,
       isTeamMaintainerOrTeamAdmin: state.isTeamMaintainerOrTeamAdmin,
       isAnyTeamAdmin: state.isAnyTeamAdmin,
       isOnlyObserver: state.isOnlyObserver,
@@ -637,6 +649,9 @@ const AppProvider = ({ children }: Props): JSX.Element => {
       state.isPremiumTier,
       state.isSandboxMode,
       state.isTeamAdmin,
+      state.isTeamTechnician,
+      state.isAnyTeamTechnician,
+      state.isGlobalTechnician,
       state.isTeamMaintainer,
       state.isTeamMaintainerOrTeamAdmin,
       state.isTeamObserver,

frontend/hooks/useTeamIdParam.ts

@@ -473,6 +473,9 @@ export const useTeamIdParam = ({
     isTeamMaintainer:
       !!currentTeam?.id &&
       permissions.isTeamMaintainer(currentUser, currentTeam.id),
+    isTeamTechnician:
+      !!currentTeam?.id &&
+      permissions.isTeamTechnician(currentUser, currentTeam.id),
     isTeamMaintainerOrTeamAdmin:
       !!currentTeam?.id &&
       permissions.isTeamMaintainerOrTeamAdmin(currentUser, currentTeam.id),

frontend/pages/ManageControlsPage/ManageControlsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo } from "react";
+import React, { useCallback, useContext, useEffect, useMemo } from "react";
 import { Tab, Tabs, TabList } from "react-tabs";
 import { InjectedRouter } from "react-router";
 
@@ -92,6 +92,8 @@ const ManageControlsPage = ({
     isPremiumTier,
     isGlobalAdmin,
     isTeamAdmin,
+    isTeamTechnician,
+    isGlobalTechnician,
   } = useContext(AppContext);
 
   const {
@@ -109,19 +111,41 @@ const ManageControlsPage = ({
       maintainer: true,
       observer: false,
       observer_plus: false,
-      technician: false,
+      technician: true,
     },
   });
 
   const permittedControlsSubNav = useMemo(() => {
     let renderedSubNav = controlsSubNav;
-    if (!isGlobalAdmin && !isTeamAdmin) {
+    if (isTeamTechnician || isGlobalTechnician) {
+      renderedSubNav = controlsSubNav.filter((navItem) => {
+        return navItem.name === "OS settings" || navItem.name === "Scripts";
+      });
+    } else if (!isGlobalAdmin && !isTeamAdmin) {
       renderedSubNav = controlsSubNav.filter((navItem) => {
         return navItem.name !== "OS updates";
       });
     }
     return renderedSubNav;
-  }, [isGlobalAdmin, isTeamAdmin]);
+  }, [isGlobalAdmin, isTeamAdmin, isTeamTechnician, isGlobalTechnician]);
+
+  // Redirect to the first permitted tab if the current path doesn't match any
+  const currentTabIndex = getTabIndex(
+    permittedControlsSubNav,
+    location?.pathname || ""
+  );
+  useEffect(() => {
+    if (currentTabIndex === -1 && permittedControlsSubNav.length > 0) {
+      const newParams = new URLSearchParams(location?.search);
+      subNavQueryParams.forEach((p) => newParams.delete(p));
+      const newQuery = newParams.toString();
+      router.replace(
+        permittedControlsSubNav[0].pathname.concat(
+          newQuery ? `?${newQuery}` : ""
+        )
+      );
+    }
+  }, [currentTabIndex, permittedControlsSubNav, location?.search, router]);
 
   const navigateToNav = useCallback(
     (i: number): void => {

frontend/pages/ManageControlsPage/OSSettings/OSSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import { InjectedRouter, Params } from "react-router/lib/Router";
 import { useQuery } from "react-query";
 
@@ -28,7 +28,9 @@ const OSSettings = ({
   params,
 }: IOSSettingsProps) => {
   const { section } = params;
-  const { currentTeam } = useContext(AppContext);
+  const { currentTeam, isTeamTechnician, isGlobalTechnician } = useContext(
+    AppContext
+  );
 
   // TODO: consider using useTeamIdParam hook here instead in the future
   const teamId =
@@ -50,12 +52,31 @@ const OSSettings = ({
     }
   );
 
-  const DEFAULT_SETTINGS_SECTION = OS_SETTINGS_NAV_ITEMS[0];
+  const filteredNavItems = useMemo(() => {
+    if (isTeamTechnician || isGlobalTechnician) {
+      return OS_SETTINGS_NAV_ITEMS.filter(
+        (item) => item.title !== "Certificates"
+      );
+    }
+    return OS_SETTINGS_NAV_ITEMS;
+  }, [isTeamTechnician, isGlobalTechnician]);
+
+  const DEFAULT_SETTINGS_SECTION = filteredNavItems[0];
 
   const currentFormSection =
-    OS_SETTINGS_NAV_ITEMS.find((item) => item.urlSection === section) ??
+    filteredNavItems.find((item) => item.urlSection === section) ??
     DEFAULT_SETTINGS_SECTION;
 
+  // Redirect to the default section if the URL section is not in the filtered list
+  if (
+    section &&
+    currentFormSection === DEFAULT_SETTINGS_SECTION &&
+    section !== DEFAULT_SETTINGS_SECTION.urlSection
+  ) {
+    router.replace(DEFAULT_SETTINGS_SECTION.path.concat(queryString));
+    return null;
+  }
+
   const CurrentCard = currentFormSection.Card;
 
   return (
@@ -71,7 +92,7 @@ const OSSettings = ({
       />
       <SideNav
         className={`${baseClass}__side-nav`}
-        navItems={OS_SETTINGS_NAV_ITEMS.map((navItem) => ({
+        navItems={filteredNavItems.map((navItem) => ({
           ...navItem,
           path: navItem.path.concat(queryString),
         }))}

frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/CustomSettings.tsx

@@ -10,6 +10,7 @@ import { IMdmProfile } from "interfaces/mdm";
 
 import mdmAPI, { IMdmProfilesResponse } from "services/entities/mdm";
 
+import Card from "components/Card/Card";
 import CustomLink from "components/CustomLink";
 import SectionHeader from "components/SectionHeader";
 import PageDescription from "components/PageDescription";
@@ -46,7 +47,14 @@ const CustomSettings = ({
   onMutation,
 }: ICustomSettingsProps) => {
   const { renderFlash } = useContext(NotificationContext);
-  const { config, isPremiumTier } = useContext(AppContext);
+  const {
+    config,
+    isPremiumTier,
+    isGlobalTechnician,
+    isTeamTechnician,
+  } = useContext(AppContext);
+
+  const isTechnician = isGlobalTechnician || isTeamTechnician;
 
   const mdmEnabled =
     config?.mdm.enabled_and_configured ||
@@ -163,6 +171,13 @@ const CustomSettings = ({
     }
 
     if (!profiles?.length) {
+      if (isTechnician) {
+        return (
+          <Card className="empty-profiles">
+            No configuration profiles have been added.
+          </Card>
+        );
+      }
       return <AddProfileCard setShowModal={setShowAddProfileModal} />;
     }
 
@@ -173,7 +188,9 @@ const CustomSettings = ({
           listItems={profiles}
           HeadingComponent={() => (
             <UploadListHeading
-              onClickAdd={() => setShowAddProfileModal(true)}
+              onClickAdd={
+                isTechnician ? undefined : () => setShowAddProfileModal(true)
+              }
               entityName="Configuration profile"
               createEntityText="Add profile"
             />
@@ -185,6 +202,7 @@ const CustomSettings = ({
               setProfileLabelsModalData={setProfileLabelsModalData}
               onClickInfo={onClickInfo}
               onClickDelete={onClickDelete}
+              isTechnician={isTechnician}
             />
           )}
         />
@@ -213,11 +231,13 @@ const CustomSettings = ({
         variant="right-panel"
         content={
           <>
-            Create and upload configuration profiles to apply custom settings.{" "}
+            {isTechnician
+              ? "View configuration profiles that apply custom settings."
+              : "Create and upload configuration profiles to apply custom settings."}{" "}
             <CustomLink
               newTab
-              text="Learn how"
-              url="https://fleetdm.com/learn-more-about/custom-os-settings"
+              text="Learn more"
+              url="https://fleetdm.com/guides/custom-os-settings"
             />
           </>
         }

frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/_styles.scss

@@ -1,6 +1,11 @@
 .custom-settings {
   @include vertical-card-layout;
 
+  .empty-profiles {
+    font-size: px-to-rem(14);
+    text-align: center;
+  }
+
   .upload-list {
     &__list {
       .list-item__label-count {

frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileListItem/ProfileListItem.tsx

@@ -95,6 +95,7 @@ interface IProfileListItemProps {
   setProfileLabelsModalData: React.Dispatch<
     React.SetStateAction<IMdmProfile | null>
   >;
+  isTechnician?: boolean;
 }
 
 const ProfileListItem = ({
@@ -103,6 +104,7 @@ const ProfileListItem = ({
   onClickInfo,
   onClickDelete,
   setProfileLabelsModalData,
+  isTechnician,
 }: IProfileListItemProps) => {
   const {
     updated_at,
@@ -180,18 +182,20 @@ const ProfileListItem = ({
           >
             <Icon name="download" />
           </Button>
-          <GitOpsModeTooltipWrapper
-            renderChildren={(disableChildren) => (
-              <Button
-                disabled={disableChildren}
-                className={`${subClass}__action-button`}
-                variant="icon"
-                onClick={() => onClickDelete(profile)}
-              >
-                <Icon name="trash" />
-              </Button>
-            )}
-          />
+          {!isTechnician && (
+            <GitOpsModeTooltipWrapper
+              renderChildren={(disableChildren) => (
+                <Button
+                  disabled={disableChildren}
+                  className={`${subClass}__action-button`}
+                  variant="icon"
+                  onClick={() => onClickDelete(profile)}
+                >
+                  <Icon name="trash" />
+                </Button>
+              )}
+            />
+          )}
         </div>
       </div>
     </div>