feat: [UIE-9127] - IAM RBAC: VPC Create permissions check (linode#12863)

mpolotsk-akamai · web-flow · commit 537e0756688c · 2025-09-12T16:03:07.000+02:00
* IAM RBAC: VPC Create - add permissions check

* unit tests

* Added changeset: IAM RBAC: Implements IAM RBAC permissions for VPC Create page

* IP Stack permissions check
diff --git a/packages/manager/.changeset/pr-12863-upcoming-features-1757591959318.md b/packages/manager/.changeset/pr-12863-upcoming-features-1757591959318.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM RBAC: Implements IAM RBAC permissions for VPC Create page ([#12863](https://github.com/linode/manager/pull/12863))
diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx
@@ -24,6 +24,7 @@ import { FormLabel } from 'src/components/FormLabel';
 import { Link } from 'src/components/Link';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 import { useGetLinodeCreateType } from 'src/features/Linodes/LinodeCreate/Tabs/utils/useGetLinodeCreateType';
 import { useFlags } from 'src/hooks/useFlags';
 import { useVPCDualStack } from 'src/hooks/useVPCDualStack';
@@ -67,6 +68,8 @@ export const VPCTopSectionContent = (props: Props) => {
   const subnets = useWatch({ control, name: 'subnets' });
   const vpcIPv6 = useWatch({ control, name: 'ipv6' });
 
+  const { data: permissions } = usePermissions('account', ['create_vpc']);
+
   const { isDualStackEnabled, isDualStackSelected, isEnterpriseCustomer } =
     useVPCDualStack(vpcIPv6);
 
@@ -150,6 +153,7 @@ export const VPCTopSectionContent = (props: Props) => {
                 <Grid container spacing={2}>
                   <SelectionCard
                     checked={!isDualStackSelected}
+                    disabled={!permissions?.create_vpc}
                     gridSize={{
                       md: isDrawer ? 12 : 3,
                       sm: 12,
@@ -165,7 +169,12 @@ export const VPCTopSectionContent = (props: Props) => {
                         })
                       );
                     }}
-                    renderIcon={() => <Radio checked={!isDualStackSelected} />}
+                    renderIcon={() => (
+                      <Radio
+                        checked={!isDualStackSelected}
+                        disabled={!permissions?.create_vpc}
+                      />
+                    )}
                     renderVariant={() => (
                       <TooltipIcon
                         status="info"
@@ -189,6 +198,7 @@ export const VPCTopSectionContent = (props: Props) => {
                   />
                   <SelectionCard
                     checked={isDualStackSelected}
+                    disabled={!permissions?.create_vpc}
                     gridSize={{
                       md: isDrawer ? 12 : 3,
                       sm: 12,
@@ -208,7 +218,12 @@ export const VPCTopSectionContent = (props: Props) => {
                         })
                       );
                     }}
-                    renderIcon={() => <Radio checked={isDualStackSelected} />}
+                    renderIcon={() => (
+                      <Radio
+                        checked={isDualStackSelected}
+                        disabled={!permissions?.create_vpc}
+                      />
+                    )}
                     renderVariant={() => (
                       <TooltipIcon
                         status="info"
@@ -263,12 +278,14 @@ export const VPCTopSectionContent = (props: Props) => {
                 <FormControlLabel
                   checked={vpcIPv6 && vpcIPv6[0].range === '/52'}
                   control={<Radio />}
+                  disabled={!permissions?.create_vpc}
                   label="/52"
                   value="/52"
                 />
                 <FormControlLabel
                   checked={vpcIPv6 && vpcIPv6[0].range === '/48'}
                   control={<Radio />}
+                  disabled={!permissions?.create_vpc}
                   label="/48"
                   value="/48"
                 />
diff --git a/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx b/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx
@@ -114,6 +114,7 @@ export const SubnetNode = (props: Props) => {
           <Grid size={1}>
             <StyledButton
               aria-label={`Remove Subnet ${label !== '' ? label : idx}`}
+              disabled={disabled}
               onClick={() => remove(idx)}
             >
               <CloseIcon data-testid={`delete-subnet-${idx}`} />
diff --git a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.test.tsx b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.test.tsx
@@ -6,6 +6,17 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import VPCCreate from './VPCCreate';
 
+const queryMocks = vi.hoisted(() => ({
+  userPermissions: vi.fn(() => ({
+    data: {
+      create_vpc: true,
+    },
+  })),
+}));
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
+
 beforeEach(() => {
   // ignores the console errors in these tests as they're supposed to happen
   vi.spyOn(console, 'error').mockImplementation(() => {});
@@ -74,4 +85,40 @@ describe('VPC create page', () => {
     expect(subnetIP[4]).toBeInTheDocument();
     expect(subnetIP[4]).toHaveValue('10.0.0.0/24');
   });
+
+  it('should disable inputs if user does not have create_vpc permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        create_vpc: false,
+      },
+    });
+    const { getByLabelText, getByText } = renderWithTheme(<VPCCreate />);
+
+    expect(getByLabelText('Region')).toBeDisabled();
+    expect(getByLabelText('VPC Label')).toBeDisabled();
+    const description = screen.getByRole('textbox', { name: /description/i });
+    expect(description).toBeDisabled();
+    expect(getByLabelText('Subnet Label')).toBeDisabled();
+    expect(getByLabelText('Subnet IP Address Range')).toBeDisabled();
+    expect(getByText('Add another Subnet')).toBeDisabled();
+    expect(getByText('Create VPC')).toBeDisabled();
+  });
+
+  it('should enable inputs if user has create_vpc permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        create_vpc: true,
+      },
+    });
+    const { getByLabelText, getByText } = renderWithTheme(<VPCCreate />);
+
+    expect(getByLabelText('Region')).toBeEnabled();
+    expect(getByLabelText('VPC Label')).toBeEnabled();
+    const description = screen.getByRole('textbox', { name: /description/i });
+    expect(description).toBeEnabled();
+    expect(getByLabelText('Subnet Label')).toBeEnabled();
+    expect(getByLabelText('Subnet IP Address Range')).toBeEnabled();
+    expect(getByText('Add another Subnet')).toBeEnabled();
+    expect(getByText('Create VPC')).toBeEnabled();
+  });
 });
diff --git a/packages/manager/src/hooks/useCreateVPC.ts b/packages/manager/src/hooks/useCreateVPC.ts
@@ -1,17 +1,13 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { isEmpty } from '@linode/api-v4';
-import {
-  useCreateVPCMutation,
-  useGrants,
-  useProfile,
-  useRegionsQuery,
-} from '@linode/queries';
+import { useCreateVPCMutation, useRegionsQuery } from '@linode/queries';
 import { scrollErrorIntoView } from '@linode/utilities';
 import { createVPCSchema } from '@linode/validation';
 import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 import { useForm } from 'react-hook-form';
 
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 import { useGetLinodeCreateType } from 'src/features/Linodes/LinodeCreate/Tabs/utils/useGetLinodeCreateType';
 import { sendLinodeCreateFormStepEvent } from 'src/utilities/analytics/formEventAnalytics';
 import { DEFAULT_SUBNET_IPV4_VALUE } from 'src/utilities/subnets';
@@ -34,9 +30,8 @@ export const useCreateVPC = (inputs: UseCreateVPCInputs) => {
 
   const previousSubmitCount = React.useRef<number>(0);
 
-  const { data: profile } = useProfile();
-  const { data: grants } = useGrants();
-  const userCannotAddVPC = profile?.restricted && !grants?.global.add_vpcs;
+  const { data: permissions } = usePermissions('account', ['create_vpc']);
+  const userCannotAddVPC = !permissions?.create_vpc;
 
   const createType = useGetLinodeCreateType();
   const isFromLinodeCreate = location.pathname.includes('/linodes/create');

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@linode/manager": Upcoming Features
 +---
++
 +IAM RBAC: Implements IAM RBAC permissions for VPC Create page ([#12863](https://github.com/linode/manager/pull/12863))
Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,7 @@ export const SubnetNode = (props: Props) => {`
`114`	`114`	`<Grid size={1}>`
`115`	`115`	`<StyledButton`
`116`	`116`	aria-label={`Remove Subnet ${label !== '' ? label : idx}`}
	`117`	`+ disabled={disabled}`
`117`	`118`	`onClick={() => remove(idx)}`
`118`	`119`	`>`
`119`	`120`	<CloseIcon data-testid={`delete-subnet-${idx}`} />