feat: [UIE-9125] - IAM RBAC: VPC Landing page permissions check (#12758)

* IAM RBAC: VPC permission check for Landing Page

* IAM RBAC: VPC permission check, unit tests

* review fix

* add permission check to Edit and Delete drawers

* Added changeset: IAM RBAC: VPC Landing Page permissions

* add permission check VPC Empty State

* review fix

Author: mpolotsk-akamai

packages/api-v4/src/iam/types.ts

@@ -104,7 +104,8 @@ export type AccountAdmin =
   | AccountLinodeAdmin
   | AccountNodeBalancerAdmin
   | AccountOauthClientAdmin
-  | AccountVolumeAdmin;
+  | AccountVolumeAdmin
+  | AccountVPCAdmin;
 
 /** Permissions associated with the "account_billing_admin" role. */
 export type AccountBillingAdmin =
@@ -137,6 +138,12 @@ export type AccountFirewallAdmin = AccountFirewallCreator | FirewallAdmin;
 /** Permissions associated with the "account_firewall_creator" role. */
 export type AccountFirewallCreator = 'create_firewall';
 
+/** Permissions associated with the "account_vpc_admin" role. */
+export type AccountVPCAdmin = AccountVPCCreator | VPCAdmin;
+
+/** Permissions associated with the "account_vpc_creator" role. */
+export type AccountVPCCreator = 'create_vpc';
+
 /** Permissions associated with the "account_linode_admin" role. */
 export type AccountLinodeAdmin = AccountLinodeCreator | LinodeAdmin;
 
@@ -248,6 +255,22 @@ export type FirewallViewer =
   | 'view_firewall_device'
   | 'view_firewall_rule_version';
 
+/** Permissions associated with the "vpc_admin" role. */
+export type VPCAdmin = 'delete_vpc' | 'delete_vpc_subnet' | VPCContributor;
+
+/** Permissions associated with the "vpc_contributor role. */
+export type VPCContributor =
+  | 'create_vpc_subnet'
+  | 'update_vpc'
+  | 'update_vpc_subnet'
+  | VPCViewer;
+
+/** Permissions associated with the "vpc_viewer" role. */
+export type VPCViewer =
+  | 'list_vpc_ip_addresses'
+  | 'view_vpc'
+  | 'view_vpc_subnet';
+
 /** Permissions associated with the "linode_admin" role. */
 export type LinodeAdmin =
   | 'cancel_linode_backups'

packages/manager/.changeset/pr-12758-upcoming-features-1756380547903.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM RBAC: VPC Landing Page permissions ([#12758](https://github.com/linode/manager/pull/12758))

packages/manager/src/features/IAM/hooks/adapters/accountGrantsToPermissions.ts

@@ -71,6 +71,8 @@ export const accountGrantsToPermissions = (
     create_volume: unrestricted || globalGrants?.add_volumes,
     // AccountNodeBalancerAdmin
     create_nodebalancer: unrestricted || globalGrants?.add_nodebalancers,
+    // AccountVPCAdmin
+    create_vpc: unrestricted || globalGrants?.add_vpcs,
     // AccountOAuthClientAdmin
     create_oauth_client: true,
     update_oauth_client: true,

packages/manager/src/features/IAM/hooks/adapters/permissionAdapters.ts

@@ -3,6 +3,7 @@ import { firewallGrantsToPermissions } from './firewallGrantsToPermissions';
 import { linodeGrantsToPermissions } from './linodeGrantsToPermissions';
 import { nodeBalancerGrantsToPermissions } from './nodeBalancerGrantsToPermissions';
 import { volumeGrantsToPermissions } from './volumeGrantsToPermissions';
+import { vpcGrantsToPermissions } from './vpcGrantsToPermissions';
 
 import type { EntityBase } from '../usePermissions';
 import type {
@@ -43,6 +44,10 @@ export const entityPermissionMapFrom = (
         entity?.permissions,
         profile?.restricted
       ) as PermissionMap;
+      const vpcPermissionsMap = vpcGrantsToPermissions(
+        entity?.permissions,
+        profile?.restricted
+      ) as PermissionMap;
 
       /** Add entity permissions to map */
       switch (grantType) {
@@ -58,6 +63,9 @@ export const entityPermissionMapFrom = (
         case 'volume':
           entityPermissionsMap[entity.id] = volumePermissionsMap;
           break;
+        case 'vpc':
+          entityPermissionsMap[entity.id] = vpcPermissionsMap;
+          break;
       }
     });
   }
@@ -77,6 +85,7 @@ export const fromGrants = (
   const linode = grants?.linode.find((f) => f.id === entityId);
   const volume = grants?.volume.find((f) => f.id === entityId);
   const nodebalancer = grants?.nodebalancer.find((f) => f.id === entityId);
+  const vpc = grants?.vpc.find((f) => f.id === entityId);
 
   let usersPermissionsMap = {} as PermissionMap;
 
@@ -112,6 +121,12 @@ export const fromGrants = (
         isRestricted
       ) as PermissionMap;
       break;
+    case 'vpc':
+      usersPermissionsMap = vpcGrantsToPermissions(
+        vpc?.permissions,
+        isRestricted
+      ) as PermissionMap;
+      break;
     default:
       throw new Error(`Unknown access type: ${accessType}`);
   }

packages/manager/src/features/IAM/hooks/adapters/vpcGrantsToPermissions.ts

@@ -0,0 +1,20 @@
+import type { AccountVPCAdmin, GrantLevel } from '@linode/api-v4';
+
+/** Map the existing Grant model to the new IAM RBAC model. */
+export const vpcGrantsToPermissions = (
+  grantLevel?: GrantLevel,
+  isRestricted?: boolean
+): Record<AccountVPCAdmin, boolean> => {
+  const unrestricted = isRestricted === false; // explicit === false
+  return {
+    create_vpc: unrestricted || grantLevel === 'read_write',
+    create_vpc_subnet: unrestricted || grantLevel === 'read_write',
+    delete_vpc: unrestricted || grantLevel === 'read_write',
+    delete_vpc_subnet: unrestricted || grantLevel === 'read_write',
+    update_vpc: unrestricted || grantLevel === 'read_write',
+    update_vpc_subnet: unrestricted || grantLevel === 'read_write',
+    list_vpc_ip_addresses: unrestricted || grantLevel !== null,
+    view_vpc: unrestricted || grantLevel !== null,
+    view_vpc_subnet: unrestricted || grantLevel !== null,
+  };
+};

packages/manager/src/features/Linodes/LinodeCreate/Networking/utilities.ts

@@ -192,11 +192,11 @@ export const getDefaultFirewallForInterfacePurpose = (
   }
 
   if (purpose === 'public') {
-    return firewallSettings.default_firewall_ids.public_interface;
+    return firewallSettings.default_firewall_ids?.public_interface;
   }
 
   if (purpose === 'vpc') {
-    return firewallSettings.default_firewall_ids.vpc_interface;
+    return firewallSettings.default_firewall_ids?.vpc_interface;
   }
 
   return null;

packages/manager/src/features/VPCs/VPCLanding/VPCDeleteDialog.test.tsx

@@ -6,6 +6,18 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { VPCDeleteDialog } from './VPCDeleteDialog';
 
+const queryMocks = vi.hoisted(() => ({
+  useVPCsQuery: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    data: {
+      delete_vpc: true,
+    },
+  })),
+}));
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
+
 describe('VPC Delete Dialog', () => {
   const props = {
     isFetching: false,
@@ -34,4 +46,26 @@ describe('VPC Delete Dialog', () => {
     await userEvent.click(cancelButton);
     expect(props.onClose).toBeCalled();
   });
+
+  it('disables the VPC Label input when user does not have "delete_vpc" permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        delete_vpc: false,
+      },
+    });
+    const view = renderWithTheme(<VPCDeleteDialog {...props} />);
+    const vpcLabelInput = await view.findByLabelText('VPC Label');
+    expect(vpcLabelInput).toBeDisabled();
+  });
+
+  it('enables the VPC Label input when user has "delete_vpc" permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        delete_vpc: true,
+      },
+    });
+    const view = renderWithTheme(<VPCDeleteDialog {...props} />);
+    const vpcLabelInput = await view.findByLabelText('VPC Label');
+    expect(vpcLabelInput).not.toBeDisabled();
+  });
 });

packages/manager/src/features/VPCs/VPCLanding/VPCDeleteDialog.tsx

@@ -1,9 +1,11 @@
 import { useDeleteVPCMutation } from '@linode/queries';
+import { Notice } from '@linode/ui';
 import { useLocation, useNavigate } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import type { APIError, VPC } from '@linode/api-v4';
 
@@ -27,6 +29,8 @@ export const VPCDeleteDialog = (props: Props) => {
   const navigate = useNavigate();
   const location = useLocation();
 
+  const { data: permissions } = usePermissions('vpc', ['delete_vpc'], vpc?.id);
+
   React.useEffect(() => {
     if (open) {
       reset();
@@ -47,6 +51,7 @@ export const VPCDeleteDialog = (props: Props) => {
 
   return (
     <TypeToConfirmDialog
+      disableTypeToConfirmInput={!permissions.delete_vpc}
       entity={{
         action: 'deletion',
         name: vpc?.label,
@@ -63,6 +68,13 @@ export const VPCDeleteDialog = (props: Props) => {
       onClose={onClose}
       open={open}
       title={`Delete VPC${vpc ? ` ${vpc.label}` : ''}`}
-    />
+    >
+      {!permissions.delete_vpc && (
+        <Notice
+          text={`You don't have permissions to delete ${vpc?.label}. Please contact an account administrator for details.`}
+          variant="error"
+        />
+      )}
+    </TypeToConfirmDialog>
   );
 };

packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.test.tsx

@@ -5,6 +5,17 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { VPCEditDrawer } from './VPCEditDrawer';
 
+const queryMocks = vi.hoisted(() => ({
+  useVPCsQuery: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    data: {
+      update_vpc: true,
+    },
+  })),
+}));
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
 describe('Edit VPC Drawer', () => {
   const props = {
     isFetching: false,
@@ -38,4 +49,34 @@ describe('Edit VPC Drawer', () => {
     expect(cancelBtn).not.toHaveAttribute('aria-disabled', 'true');
     expect(cancelBtn).toBeVisible();
   });
+
+  it('Should disable the Label and Description inputs when user does not have "update_vpc" permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        update_vpc: false,
+      },
+    });
+    const { getByLabelText } = renderWithTheme(<VPCEditDrawer {...props} />);
+
+    const labelInput = getByLabelText('Label');
+    expect(labelInput).toHaveAttribute('disabled');
+
+    const descriptionInput = getByLabelText('Description');
+    expect(descriptionInput).toHaveAttribute('disabled');
+  });
+
+  it('Should enable the Label and Description inputs when user has "update_vpc" permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        update_vpc: true,
+      },
+    });
+    const { getByLabelText } = renderWithTheme(<VPCEditDrawer {...props} />);
+
+    const labelInput = getByLabelText('Label');
+    expect(labelInput).not.toHaveAttribute('disabled');
+
+    const descriptionInput = getByLabelText('Description');
+    expect(descriptionInput).not.toHaveAttribute('disabled');
+  });
 });

packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx

@@ -1,10 +1,12 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useGrants, useProfile, useUpdateVPCMutation } from '@linode/queries';
+import { useUpdateVPCMutation } from '@linode/queries';
 import { ActionsPanel, Drawer, Notice, TextField } from '@linode/ui';
 import { updateVPCSchema } from '@linode/validation';
 import * as React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+
 import type { APIError, UpdateVPCPayload, VPC } from '@linode/api-v4';
 
 interface Props {
@@ -18,16 +20,7 @@ interface Props {
 export const VPCEditDrawer = (props: Props) => {
   const { isFetching, onClose, open, vpc, vpcError } = props;
 
-  const { data: profile } = useProfile();
-  const { data: grants } = useGrants();
-
-  const vpcPermissions = grants?.vpc.find((v) => v.id === vpc?.id);
-
-  // there isn't a 'view VPC/Subnet' grant that does anything, so all VPCs get returned even for restricted users
-  // with permissions set to 'None'. Therefore, we're treating those as read_only as well
-  const readOnly =
-    Boolean(profile?.restricted) &&
-    (vpcPermissions?.permissions === 'read_only' || grants?.vpc.length === 0);
+  const { data: permissions } = usePermissions('vpc', ['update_vpc'], vpc?.id);
 
   const {
     isPending,
@@ -78,7 +71,7 @@ export const VPCEditDrawer = (props: Props) => {
       {errors.root?.message && (
         <Notice text={errors.root.message} variant="error" />
       )}
-      {readOnly && (
+      {!permissions.update_vpc && (
         <Notice
           text={`You don't have permissions to edit ${vpc?.label}. Please contact an account administrator for details.`}
           variant="error"
@@ -91,7 +84,7 @@ export const VPCEditDrawer = (props: Props) => {
           render={({ field, fieldState }) => (
             <TextField
               data-testid="label"
-              disabled={readOnly}
+              disabled={!permissions.update_vpc}
               errorText={fieldState.error?.message}
               label="Label"
               name="label"
@@ -107,7 +100,7 @@ export const VPCEditDrawer = (props: Props) => {
           render={({ field, fieldState }) => (
             <TextField
               data-testid="description"
-              disabled={readOnly}
+              disabled={!permissions.update_vpc}
               errorText={fieldState.error?.message}
               label="Description"
               multiline
@@ -121,7 +114,7 @@ export const VPCEditDrawer = (props: Props) => {
         <ActionsPanel
           primaryButtonProps={{
             'data-testid': 'save-button',
-            disabled: !isDirty || readOnly,
+            disabled: !isDirty || !permissions.update_vpc,
             label: 'Save',
             loading: isPending || isSubmitting,
             type: 'submit',