Fleet UI: No Access only access to dashboard and my account page (#3063)

changes/issue-3061-no-access-user-view

@@ -0,0 +1 @@
+* No access users are presented with a 403 "Access denied" page for all user routes

frontend/components/AccessRoutes/AccessRoutes.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { push } from "react-router-redux";
+
+import { IUser } from "interfaces/user";
+import permissionUtils from "utilities/permissions";
+import paths from "router/paths";
+
+interface IAccessRoutes {
+  children: JSX.Element;
+}
+
+interface IRootState {
+  auth: {
+    user: IUser;
+  };
+}
+
+const { FLEET_403 } = paths;
+
+const AccessRoutes = ({ children }: IAccessRoutes): JSX.Element | null => {
+  const dispatch = useDispatch();
+  const user = useSelector((state: IRootState) => state.auth.user);
+
+  // user is an empty object here. The API result has not come back
+  // so render nothing.
+  if (Object.keys(user).length === 0) {
+    return null;
+  }
+
+  if (permissionUtils.isNoAccess(user)) {
+    dispatch(push(FLEET_403));
+    return null;
+  }
+  return <>{children}</>;
+};
+
+export default AccessRoutes;

frontend/components/AccessRoutes/index.ts

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

frontend/components/side_panels/SiteTopNav/navItems.js

@@ -3,7 +3,7 @@ import URL_PREFIX from "router/url_prefix";
 import permissionUtils from "utilities/permissions";
 
 export default (currentUser) => {
-  const userNavItems = [
+  const logo = [
     {
       icon: "logo",
       name: "Home",
@@ -13,6 +13,9 @@ export default (currentUser) => {
         pathname: PATHS.HOME,
       },
     },
+  ];
+
+  const userNavItems = [
     {
       icon: "hosts",
       name: "Hosts",
@@ -79,6 +82,7 @@ export default (currentUser) => {
       },
     ];
     return [
+      ...logo,
       ...userNavItems,
       ...teamMaintainerNavItems,
       ...policiesTab,
@@ -90,8 +94,16 @@ export default (currentUser) => {
     permissionUtils.isGlobalMaintainer(currentUser) ||
     permissionUtils.isAnyTeamMaintainer(currentUser)
   ) {
-    return [...userNavItems, ...teamMaintainerNavItems, ...policiesTab];
+    return [
+      ...logo,
+      ...userNavItems,
+      ...teamMaintainerNavItems,
+      ...policiesTab,
+    ];
   }
 
-  return [...userNavItems, ...policiesTab];
+  if (permissionUtils.isNoAccess(currentUser)) {
+    return [...logo];
+  }
+  return [...logo, ...userNavItems, ...policiesTab];
 };

frontend/router/index.tsx

@@ -16,6 +16,7 @@ import AdminUserManagementPage from "pages/admin/UserManagementPage";
 import AdminTeamManagementPage from "pages/admin/TeamManagementPage";
 import TeamDetailsWrapper from "pages/admin/TeamManagementPage/TeamDetailsWrapper";
 import App from "components/App";
+import AccessRoutes from "components/AccessRoutes";
 import AuthenticatedAdminRoutes from "components/AuthenticatedAdminRoutes";
 import AuthAnyAdminRoutes from "components/AuthAnyAdminRoutes";
 import AuthenticatedRoutes from "components/AuthenticatedRoutes";
@@ -85,71 +86,79 @@ const routes = (
         <Route component={AuthenticatedRoutes}>
           <Route path="email/change/:token" component={EmailTokenRedirect} />
           <Route path="logout" component={LogoutPage} />
-          <Route component={CoreLayout}>
-            <IndexRedirect to={"dashboard"} />
-            <Route path="dashboard" component={Homepage} />
-            <Route path="settings" component={AuthAnyAdminRoutes}>
-              <Route component={SettingsWrapper}>
-                <Route component={AuthenticatedAdminRoutes}>
-                  <Route path="organization" component={AdminAppSettingsPage} />
-                  <Route path="users" component={AdminUserManagementPage} />
-                  <Route component={PremiumTierRoutes}>
-                    <Route path="teams" component={AdminTeamManagementPage} />
+          <Route component={AccessRoutes}>
+            <Route component={CoreLayout}>
+              <IndexRedirect to={"dashboard"} />
+              <Route path="dashboard" component={Homepage} />
+              <Route path="settings" component={AuthAnyAdminRoutes}>
+                <Route component={SettingsWrapper}>
+                  <Route component={AuthenticatedAdminRoutes}>
+                    <Route
+                      path="organization"
+                      component={AdminAppSettingsPage}
+                    />
+                    <Route path="users" component={AdminUserManagementPage} />
+                    <Route component={PremiumTierRoutes}>
+                      <Route path="teams" component={AdminTeamManagementPage} />
+                    </Route>
+                  </Route>
+                </Route>
+                <Route path="teams/:team_id" component={TeamDetailsWrapper}>
+                  <Route path="members" component={MembersPage} />
+                  <Route path="options" component={AgentOptionsPage} />
+                </Route>
+              </Route>
+              <Route path="hosts">
+                <Route path="manage" component={ManageHostsPage} />
+                <Route
+                  path="manage/labels/:label_id"
+                  component={ManageHostsPage}
+                />
+                <Route
+                  path="manage/:active_label"
+                  component={ManageHostsPage}
+                />
+                <Route
+                  path="manage/labels/:label_id/:active_label"
+                  component={ManageHostsPage}
+                />
+                <Route
+                  path="manage/:active_label/labels/:label_id"
+                  component={ManageHostsPage}
+                />
+                <Route path=":host_id" component={HostDetailsPage} />
+              </Route>
+              <Route component={AuthGlobalAdminMaintainerRoutes}>
+                <Route path="packs" component={PackPageWrapper}>
+                  <Route path="manage" component={ManagePacksPage} />
+                  <Route path="new" component={PackComposerPage} />
+                  <Route path=":id">
+                    <IndexRoute component={EditPackPage} />
+                    <Route path="edit" component={EditPackPage} />
                   </Route>
                 </Route>
               </Route>
-              <Route path="teams/:team_id" component={TeamDetailsWrapper}>
-                <Route path="members" component={MembersPage} />
-                <Route path="options" component={AgentOptionsPage} />
-              </Route>
-            </Route>
-            <Route path="hosts">
-              <Route path="manage" component={ManageHostsPage} />
-              <Route
-                path="manage/labels/:label_id"
-                component={ManageHostsPage}
-              />
-              <Route path="manage/:active_label" component={ManageHostsPage} />
-              <Route
-                path="manage/labels/:label_id/:active_label"
-                component={ManageHostsPage}
-              />
-              <Route
-                path="manage/:active_label/labels/:label_id"
-                component={ManageHostsPage}
-              />
-              <Route path=":host_id" component={HostDetailsPage} />
-            </Route>
-            <Route component={AuthGlobalAdminMaintainerRoutes}>
-              <Route path="packs" component={PackPageWrapper}>
-                <Route path="manage" component={ManagePacksPage} />
-                <Route path="new" component={PackComposerPage} />
-                <Route path=":id">
-                  <IndexRoute component={EditPackPage} />
-                  <Route path="edit" component={EditPackPage} />
+              <Route component={AuthAnyMaintainerAnyAdminRoutes}>
+                <Route path="schedule" component={SchedulePageWrapper}>
+                  <Route path="manage" component={ManageSchedulePage} />
+                  <Route
+                    path="manage/teams/:team_id"
+                    component={ManageSchedulePage}
+                  />
                 </Route>
               </Route>
-            </Route>
-            <Route component={AuthAnyMaintainerAnyAdminRoutes}>
-              <Route path="schedule" component={SchedulePageWrapper}>
-                <Route path="manage" component={ManageSchedulePage} />
-                <Route
-                  path="manage/teams/:team_id"
-                  component={ManageSchedulePage}
-                />
+              <Route path="queries" component={QueryPageWrapper}>
+                <Route path="manage" component={ManageQueriesPage} />
+                <Route component={AuthAnyMaintainerAnyAdminRoutes}>
+                  <Route path="new" component={QueryPage} />
+                </Route>
+                <Route path=":id" component={QueryPage} />
               </Route>
-            </Route>
-            <Route path="queries" component={QueryPageWrapper}>
-              <Route path="manage" component={ManageQueriesPage} />
-              <Route component={AuthAnyMaintainerAnyAdminRoutes}>
-                <Route path="new" component={QueryPage} />
+              <Route path="policies" component={PoliciesPageWrapper}>
+                <Route path="manage" component={ManagePoliciesPage} />
               </Route>
-              <Route path=":id" component={QueryPage} />
+              <Route path="profile" component={UserSettingsPage} />
             </Route>
-            <Route path="policies" component={PoliciesPageWrapper}>
-              <Route path="manage" component={ManagePoliciesPage} />
-            </Route>
-            <Route path="profile" component={UserSettingsPage} />
           </Route>
         </Route>
       </Route>

frontend/utilities/permissions/permissions.ts

@@ -94,6 +94,10 @@ const isOnlyObserver = (user: IUser): boolean => {
   return false;
 };
 
+const isNoAccess = (user: IUser): boolean => {
+  return user.global_role === null && user.teams.length === 0;
+};
+
 export default {
   isFreeTier,
   isPremiumTier,
@@ -109,4 +113,5 @@ export default {
   isTeamAdmin,
   isAnyTeamAdmin,
   isOnlyObserver,
+  isNoAccess,
 };