feat: [M3-6759] - Handle VPC Account Grants / Permissions / Capabilities

packages/api-v4/.changeset/pr-9585-changed-1692736077405.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Change `Account` and `Grant`-related types to include VPC-related grants and capabilities ([#9585](https://github.com/linode/manager/pull/9585))

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

@@ -164,7 +164,8 @@ export type GrantType =
   | 'stackscript'
   | 'volume'
   | 'database'
-  | 'firewall';
+  | 'firewall'
+  | 'vpc';
 
 export type Grants = GlobalGrants & Record<GrantType, Grant[]>;
 

packages/manager/.changeset/pr-9585-upcoming-features-1692736112038.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add VPC-related permissions, capabilities, and grants ([#9585](https://github.com/linode/manager/pull/9585))

packages/manager/src/factories/grants.ts

@@ -39,9 +39,9 @@ export const grantsFactory = Factory.Sync.makeFactory<Grants>({
     add_nodebalancers: true,
     add_stackscripts: true,
     add_volumes: true,
+    add_vpcs: true,
     cancel_account: false,
     longview_subscription: true,
-    add_vpcs: true,
   },
   image: [
     {
@@ -85,4 +85,21 @@ export const grantsFactory = Factory.Sync.makeFactory<Grants>({
       permissions: 'read_only',
     },
   ],
+  vpc: [
+    {
+      id: 123,
+      label: 'example-entity1',
+      permissions: 'read_only',
+    },
+    {
+      id: 124,
+      label: 'example-entity2',
+      permissions: 'read_write',
+    },
+    {
+      id: 125,
+      label: 'example-entity3',
+      permissions: null,
+    },
+  ],
 });

packages/manager/src/features/Users/UserPermissions.tsx

@@ -201,6 +201,7 @@ class UserPermissions extends React.Component<CombinedProps, State> {
     'domain',
     'longview',
     'database',
+    'vpc',
   ];
 
   entitySetAllTo = (entity: GrantType, value: GrantLevel) => () => {
@@ -283,6 +284,7 @@ class UserPermissions extends React.Component<CombinedProps, State> {
     'add_volumes',
     'add_firewalls',
     'add_databases',
+    'add_vpcs',
     'cancel_account',
   ];
 
@@ -460,6 +462,7 @@ class UserPermissions extends React.Component<CombinedProps, State> {
       add_nodebalancers: 'Can add NodeBalancers to this account ($)',
       add_stackscripts: 'Can create StackScripts under this account',
       add_volumes: 'Can add Block Storage Volumes to this account ($)',
+      add_vpcs: 'Can add VPCs to this account',
       cancel_account: 'Can cancel the entire account',
       longview_subscription:
         'Can modify this account\u{2019}s Longview subscription ($)',

packages/manager/src/features/Users/UserPermissionsEntitySection.tsx

@@ -23,6 +23,7 @@ export const entityNameMap: Record<GrantType, string> = {
   longview: 'Longview Clients',
   firewall: 'Firewalls',
   database: 'Databases',
+  vpc: 'VPCs',
 };
 
 interface Props {

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

@@ -7,6 +7,7 @@ import { Drawer } from 'src/components/Drawer';
 import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
+import { useGrants, useProfile } from 'src/queries/profile';
 import { useRegionsQuery } from 'src/queries/regions';
 import { useUpdateVPCMutation } from 'src/queries/vpcs';
 import { getErrorMap } from 'src/utilities/errorUtils';
@@ -22,6 +23,12 @@ const REGION_HELPER_TEXT = 'Region cannot be changed during beta.';
 export const VPCEditDrawer = (props: Props) => {
   const { onClose, open, vpc } = props;
 
+  const { data: profile } = useProfile();
+  const { data: grants } = useGrants();
+
+  const vpcPermissions = grants?.vpc.find((v) => v.id === vpc?.id);
+  const readOnly = Boolean(profile?.restricted) && vpcPermissions?.permissions === 'read_only';
+
   const {
     error,
     isLoading,
@@ -55,13 +62,21 @@ export const VPCEditDrawer = (props: Props) => {
   return (
     <Drawer onClose={onClose} open={open} title="Edit VPC">
       {errorMap.none && <Notice error text={errorMap.none} />}
+      {readOnly && (
+        <Notice
+          error
+          important
+          text={`You don't have permissions to edit ${vpc?.label}. Please contact an account administrator for details.`}
+        />
+      )}
       <form onSubmit={form.handleSubmit}>
         <TextField
           errorText={errorMap.label}
           label="Label"
           name="label"
           onChange={form.handleChange}
           value={form.values.label}
+          disabled={readOnly}
         />
         <TextField
           errorText={errorMap.description}
@@ -70,6 +85,7 @@ export const VPCEditDrawer = (props: Props) => {
           onChange={form.handleChange}
           rows={1}
           value={form.values.description}
+          disabled={readOnly}
         />
         {regionsData && (
           <RegionSelect
@@ -84,7 +100,7 @@ export const VPCEditDrawer = (props: Props) => {
         <ActionsPanel
           primaryButtonProps={{
             'data-testid': 'save-button',
-            disabled: !form.dirty,
+            disabled: !form.dirty || readOnly,
             label: 'Save',
             loading: isLoading,
             type: 'submit',

packages/manager/src/features/VPC/index.tsx

@@ -3,21 +3,37 @@ import { Route, Switch } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useAccount } from 'src/queries/account';
+import { useFlags } from 'src/hooks/useFlags';
+import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
 const VPCCreate = React.lazy(() => import('./VPCCreate/VPCCreate'));
 const VPCDetail = React.lazy(() => import('./VPCDetail/VPCDetail'));
 const VPCLanding = React.lazy(() => import('./VPCLanding/VPCLanding'));
 
 const VPC = () => {
+  const flags = useFlags();
+  const { data: account } = useAccount();
+
+  const showVPCs = isFeatureEnabled(
+    'VPCs',
+    Boolean(flags.vpc),
+    account?.capabilities ?? []
+  );
+
   return (
-    <React.Suspense fallback={<SuspenseLoader />}>
-      <DocumentTitleSegment segment="VPC" />
-      <Switch>
-        <Route component={VPCCreate} path="/vpc/create" />
-        <Route component={VPCDetail} path="/vpc/:vpcId/:tab?" />
-        <Route component={VPCLanding} path="/vpc" />
-      </Switch>
-    </React.Suspense>
+    <>
+    {showVPCs ? 
+      <React.Suspense fallback={<SuspenseLoader />}>
+        <DocumentTitleSegment segment="VPC" />
+        <Switch>
+          <Route component={VPCCreate} path="/vpc/create" />
+          <Route component={VPCDetail} path="/vpc/:vpcId/:tab?" />
+          <Route component={VPCLanding} path="/vpc" />
+        </Switch>
+      </React.Suspense>
+    : null}
+    </>
   );
 };