feat: [UIE-9051] - IAM RBAC block non-beta route access (linode#12656)

* redirect at route level

* cleanup

* explore fetching at the route level

* Add a few more redirects

* improve check based on @bnussman-akamai & fix roles redirect

* Added changeset: IAM RBAC block non-beta route access

---------

Co-authored-by: Alban Bailly <[email protected]>
Co-authored-by: Alban Bailly <[email protected]>
Co-authored-by: Conal Ryan <[email protected]>

Author: 3 people

packages/manager/.changeset/pr-12656-changed-1754656831609.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+IAM RBAC block non-beta route access  ([#12656](https://github.com/linode/manager/pull/12656))

packages/manager/src/Router.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { RouterProvider } from '@tanstack/react-router';
 import * as React from 'react';
 
+import { useFlags } from 'src/hooks/useFlags';
 import { useGlobalErrors } from 'src/hooks/useGlobalErrors';
 
 import { useIsACLPEnabled } from './features/CloudPulse/Utils/utils';
@@ -19,11 +20,13 @@ export const Router = () => {
   const { isDatabasesEnabled } = useIsDatabasesEnabled();
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
   const { isACLPEnabled } = useIsACLPEnabled();
+  const flags = useFlags();
 
   // Update the router's context
   router.update({
     context: {
       accountSettings,
+      flags,
       globalErrors,
       isACLPEnabled,
       isDatabasesEnabled,

packages/manager/src/features/IAM/IAMLanding.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from '@tanstack/react-router';
+import { Outlet, useLocation, useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader';
@@ -11,6 +11,9 @@ import { useTabs } from 'src/hooks/useTabs';
 import { IAM_DOCS_LINK } from './Shared/constants';
 
 export const IdentityAccessLanding = React.memo(() => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
   const { tabs, tabIndex, handleTabChange } = useTabs([
     {
       to: `/iam/users`,
@@ -31,6 +34,10 @@ export const IdentityAccessLanding = React.memo(() => {
     title: 'Identity and Access',
   };
 
+  if (location.pathname === '/iam') {
+    navigate({ to: '/iam/users' });
+  }
+
   return (
     <>
       <LandingHeader {...landingHeaderProps} spacingBottom={4} />

packages/manager/src/features/IAM/hooks/useIsIAMEnabled.ts

@@ -1,11 +1,16 @@
+import { iamQueries, profileQueries } from '@linode/queries';
 import {
   useAccountRoles,
   useProfile,
   useUserAccountPermissions,
 } from '@linode/queries';
+import { queryOptions } from '@tanstack/react-query';
 
 import { useFlags } from 'src/hooks/useFlags';
 
+import type { QueryClient } from '@tanstack/react-query';
+import type { FlagSet } from 'src/featureFlags';
+
 /**
  * Hook to determine if the IAM feature is enabled for the current user.
  *
@@ -27,3 +32,44 @@ export const useIsIAMEnabled = () => {
     isIAMEnabled: flags?.iam?.enabled && Boolean(roles || permissions?.length),
   };
 };
+
+/**
+ * This function is an alternative to the useIsIAMEnabled hook to be used in our router's beforeLoad functions.
+ * The logic is identical, but here we fetch at the router level instead of the hook level.
+ * This does not over-fetch data since the components will do a cache lookup in subsequent renders.
+ * This is only used in a a few routes for iam/account specific redirect purposes.
+ *
+ * NOTE: we could use this in the `loader` method (instead of `beforeLoad`) and have the component use the `useLoaderData` hook,
+ * but there isn't at the moment a big advantage of doing that since these are isolated routes.
+ */
+export const checkIAMEnabled = async (
+  queryClient: QueryClient,
+  flags: FlagSet
+): Promise<boolean> => {
+  if (!flags?.iam?.enabled) {
+    return false;
+  }
+
+  try {
+    const profile = await queryClient.ensureQueryData(
+      queryOptions(profileQueries.profile())
+    );
+
+    if (profile.restricted) {
+      // For restricted users ONLY, get permissions
+      const permissions = await queryClient.ensureQueryData(
+        queryOptions(iamQueries.user(profile.username)._ctx.accountPermissions)
+      );
+      return Boolean(permissions.length);
+    }
+
+    // For non-restricted users ONLY, get roles
+    const roles = await queryClient.ensureQueryData(
+      queryOptions(iamQueries.accountRoles)
+    );
+
+    return Boolean(roles);
+  } catch {
+    return false;
+  }
+};

packages/manager/src/routes/IAM/IAMRoute.tsx

@@ -1,19 +1,11 @@
-import { NotFound } from '@linode/ui';
 import { Outlet } from '@tanstack/react-router';
 import React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
-import { useIsIAMEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
 
 export const IAMRoute = () => {
-  const { isIAMEnabled } = useIsIAMEnabled();
-
-  if (!isIAMEnabled) {
-    return <NotFound />;
-  }
-
   return (
     <React.Suspense fallback={<SuspenseLoader />}>
       <DocumentTitleSegment segment="Identity and Access" />

packages/manager/src/routes/IAM/index.ts

@@ -1,5 +1,7 @@
 import { createRoute, redirect } from '@tanstack/react-router';
 
+import { checkIAMEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
+
 import { rootRoute } from '../root';
 import { IAMRoute } from './IAMRoute';
 
@@ -18,11 +20,7 @@ const iamRoute = createRoute({
   getParentRoute: () => rootRoute,
   validateSearch: (search: IamUsersSearchParams) => search,
   path: 'iam',
-}).lazy(() =>
-  import('src/features/IAM/iamLandingLazyRoute').then(
-    (m) => m.iamLandingLazyRoute
-  )
-);
+});
 
 const iamCatchAllRoute = createRoute({
   getParentRoute: () => iamRoute,
@@ -32,10 +30,7 @@ const iamCatchAllRoute = createRoute({
   },
 });
 
-const iamIndexRoute = createRoute({
-  beforeLoad: async () => {
-    throw redirect({ to: '/iam/users' });
-  },
+const iamTabsRoute = createRoute({
   getParentRoute: () => iamRoute,
   path: '/',
 }).lazy(() =>
@@ -45,8 +40,20 @@ const iamIndexRoute = createRoute({
 );
 
 const iamUsersRoute = createRoute({
-  getParentRoute: () => iamRoute,
+  getParentRoute: () => iamTabsRoute,
   path: 'users',
+  beforeLoad: async ({ context }) => {
+    const isIAMEnabled = await checkIAMEnabled(
+      context.queryClient,
+      context.flags
+    );
+
+    if (!isIAMEnabled) {
+      throw redirect({
+        to: '/account/users',
+      });
+    }
+  },
 }).lazy(() =>
   import('src/features/IAM/Users/UsersTable/usersLandingLazyRoute').then(
     (m) => m.usersLandingLazyRoute
@@ -62,8 +69,20 @@ const iamUsersCatchAllRoute = createRoute({
 });
 
 const iamRolesRoute = createRoute({
-  getParentRoute: () => iamRoute,
+  getParentRoute: () => iamTabsRoute,
   path: 'roles',
+  beforeLoad: async ({ context }) => {
+    const isIAMEnabled = await checkIAMEnabled(
+      context.queryClient,
+      context.flags
+    );
+
+    if (!isIAMEnabled) {
+      throw redirect({
+        to: '/account/users',
+      });
+    }
+  },
 }).lazy(() =>
   import('src/features/IAM/Roles/rolesLandingLazyRoute').then(
     (m) => m.rolesLandingLazyRoute
@@ -79,8 +98,8 @@ const iamRolesCatchAllRoute = createRoute({
 });
 
 const iamUserNameRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: 'iam/users/$username',
+  getParentRoute: () => iamRoute,
+  path: '/users/$username',
 }).lazy(() =>
   import('src/features/IAM/Users/userDetailsLandingLazyRoute').then(
     (m) => m.userDetailsLandingLazyRoute
@@ -105,6 +124,20 @@ const iamUserNameIndexRoute = createRoute({
 const iamUserNameDetailsRoute = createRoute({
   getParentRoute: () => iamUserNameRoute,
   path: 'details',
+  beforeLoad: async ({ context, params }) => {
+    const isIAMEnabled = await checkIAMEnabled(
+      context.queryClient,
+      context.flags
+    );
+    const { username } = params;
+
+    if (!isIAMEnabled && username) {
+      throw redirect({
+        to: '/account/users/$username/profile',
+        params: { username },
+      });
+    }
+  },
 }).lazy(() =>
   import('src/features/IAM/Users/UserDetails/userProfileLazyRoute').then(
     (m) => m.userProfileLazyRoute
@@ -114,6 +147,20 @@ const iamUserNameDetailsRoute = createRoute({
 const iamUserNameRolesRoute = createRoute({
   getParentRoute: () => iamUserNameRoute,
   path: 'roles',
+  beforeLoad: async ({ context, params }) => {
+    const isIAMEnabled = await checkIAMEnabled(
+      context.queryClient,
+      context.flags
+    );
+    const { username } = params;
+
+    if (!isIAMEnabled && username) {
+      throw redirect({
+        to: '/account/users/$username/permissions',
+        params: { username },
+      });
+    }
+  },
 }).lazy(() =>
   import('src/features/IAM/Users/UserRoles/userRolesLazyRoute').then(
     (m) => m.userRolesLazyRoute
@@ -124,6 +171,20 @@ const iamUserNameEntitiesRoute = createRoute({
   getParentRoute: () => iamUserNameRoute,
   path: 'entities',
   validateSearch: (search: IamEntitiesSearchParams) => search,
+  beforeLoad: async ({ context, params }) => {
+    const isIAMEnabled = await checkIAMEnabled(
+      context.queryClient,
+      context.flags
+    );
+    const { username } = params;
+
+    if (!isIAMEnabled && username) {
+      throw redirect({
+        to: '/account/users/$username',
+        params: { username },
+      });
+    }
+  },
 }).lazy(() =>
   import('src/features/IAM/Users/UserEntities/userEntitiesLazyRoute').then(
     (m) => m.userEntitiesLazyRoute
@@ -178,12 +239,13 @@ const iamUserNameEntitiesCatchAllRoute = createRoute({
 });
 
 export const iamRouteTree = iamRoute.addChildren([
-  iamIndexRoute,
-  iamRolesRoute,
-  iamUsersRoute,
+  iamTabsRoute.addChildren([
+    iamRolesRoute,
+    iamUsersRoute,
+    iamUsersCatchAllRoute,
+    iamRolesCatchAllRoute,
+  ]),
   iamCatchAllRoute,
-  iamUsersCatchAllRoute,
-  iamRolesCatchAllRoute,
   iamUserNameRoute.addChildren([
     iamUserNameIndexRoute,
     iamUserNameDetailsRoute,

packages/manager/src/routes/account/index.ts

@@ -1,4 +1,6 @@
-import { createRoute } from '@tanstack/react-router';
+import { createRoute, redirect } from '@tanstack/react-router';
+
+import { checkIAMEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
 
 import { rootRoute } from '../root';
 import { AccountRoute } from './AccountRoute';
@@ -38,6 +40,16 @@ const accountBillingRoute = createRoute({
 const accountUsersRoute = createRoute({
   getParentRoute: () => accountTabsRoute,
   path: '/users',
+  beforeLoad: async ({ context }) => {
+    const isIAMEnabled = await checkIAMEnabled(
+      context.queryClient,
+      context.flags
+    );
+
+    if (isIAMEnabled) {
+      throw redirect({ to: '/iam/users' });
+    }
+  },
 }).lazy(() =>
   import('src/features/Users/usersLandingLazyRoute').then(
     (m) => m.usersLandingLazyRoute
@@ -92,6 +104,32 @@ const accountSettingsRoute = createRoute({
 const accountUsersUsernameRoute = createRoute({
   getParentRoute: () => accountRoute,
   path: '/users/$username',
+  beforeLoad: async ({ context, params, location }) => {
+    const { username } = params;
+
+    const isIAMEnabled = await checkIAMEnabled(
+      context.queryClient,
+      context.flags
+    );
+
+    if (!isIAMEnabled || !username) {
+      return;
+    }
+
+    if (location.pathname.endsWith('/permissions')) {
+      throw redirect({
+        to: '/iam/users/$username/roles',
+        params: { username },
+        replace: true,
+      });
+    }
+
+    throw redirect({
+      to: '/iam/users/$username/details',
+      params: { username },
+      replace: true,
+    });
+  },
 }).lazy(() =>
   import('src/features/Users/userDetailLazyRoute').then(
     (m) => m.userDetailLazyRoute

packages/manager/src/routes/index.tsx

@@ -81,6 +81,12 @@ export const routeTree = rootRoute.addChildren([
 
 export const router = createRouter({
   context: {
+    accountSettings: undefined,
+    flags: {},
+    globalErrors: {},
+    isACLPEnabled: false,
+    isDatabasesEnabled: false,
+    isPlacementGroupsEnabled: false,
     queryClient: new QueryClient(),
   },
   defaultNotFoundComponent: () => <NotFound />,

packages/manager/src/routes/types.ts

@@ -1,8 +1,10 @@
 import type { AccountSettings } from '@linode/api-v4';
 import type { QueryClient } from '@tanstack/react-query';
+import type { FlagSet } from 'src/featureFlags';
 
 export type RouterContext = {
   accountSettings?: AccountSettings;
+  flags: FlagSet;
   globalErrors?: {
     account_unactivated?: boolean;
   };