feat: [M3-7529] – Support VPC in Personal Access Token drawer

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessCell.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import Check from 'src/assets/icons/monitor-ok.svg';
 import { Radio } from 'src/components/Radio/Radio';
+import { Tooltip } from 'src/components/Tooltip';
 
 interface RadioButton extends HTMLInputElement {
   name: string;
@@ -15,11 +16,20 @@ interface AccessCellProps {
   onChange: (e: React.SyntheticEvent<RadioButton>) => void;
   scope: string;
   scopeDisplay: string;
+  tooltipText?: string;
   viewOnly: boolean;
 }
 
 export const AccessCell = React.memo((props: AccessCellProps) => {
-  const { active, disabled, onChange, scope, scopeDisplay, viewOnly } = props;
+  const {
+    active,
+    disabled,
+    onChange,
+    scope,
+    scopeDisplay,
+    tooltipText,
+    viewOnly,
+  } = props;
 
   if (viewOnly) {
     if (!active) {
@@ -36,7 +46,7 @@ export const AccessCell = React.memo((props: AccessCellProps) => {
     );
   }
 
-  return (
+  const radioBtn = (
     <Radio
       inputProps={{
         'aria-label': `${scope} for ${scopeDisplay}`,
@@ -49,6 +59,14 @@ export const AccessCell = React.memo((props: AccessCellProps) => {
       value={scope}
     />
   );
+
+  return tooltipText ? (
+    <Tooltip placement="top" title={tooltipText}>
+      <span>{radioBtn}</span>
+    </Tooltip>
+  ) : (
+    radioBtn
+  );
 });
 
 const StyledCheckIcon = styled('span', {

packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx

@@ -16,6 +16,7 @@ import { TableRow } from 'src/components/TableRow';
 import { TextField } from 'src/components/TextField';
 import { ISO_DATETIME_NO_TZ_FORMAT } from 'src/constants';
 import { AccessCell } from 'src/features/ObjectStorage/AccessKeyLanding/AccessCell';
+import { VPC_READ_ONLY_TOOLTIP } from 'src/features/VPCs/constants';
 import { useFlags } from 'src/hooks/useFlags';
 import { useAccountUser } from 'src/queries/accountUsers';
 import { useProfile } from 'src/queries/profile';
@@ -258,6 +259,9 @@ export const CreateAPITokenDrawer = (props: Props) => {
               if (!basePermNameMap[scopeTup[0]]) {
                 return null;
               }
+
+              const scopeIsForVPC = scopeTup[0] === 'vpc';
+
               return (
                 <TableRow
                   data-qa-row={basePermNameMap[scopeTup[0]]}
@@ -281,8 +285,11 @@ export const CreateAPITokenDrawer = (props: Props) => {
                     parentColumn="Read Only"
                   >
                     <AccessCell
+                      tooltipText={
+                        scopeIsForVPC ? VPC_READ_ONLY_TOOLTIP : undefined
+                      }
                       active={scopeTup[1] === 1}
-                      disabled={false}
+                      disabled={scopeIsForVPC} // "Read Only" is not a valid scope for VPC
                       onChange={handleScopeChange}
                       scope="1"
                       scopeDisplay={scopeTup[0]}

packages/manager/src/features/Profile/APITokens/utils.ts

@@ -20,6 +20,7 @@ export const basePerms = [
   'object_storage',
   'stackscripts',
   'volumes',
+  'vpc',
 ] as const;
 
 export const basePermNameMap: Record<string, string> = {
@@ -38,6 +39,7 @@ export const basePermNameMap: Record<string, string> = {
   object_storage: 'Object Storage',
   stackscripts: 'StackScripts',
   volumes: 'Volumes',
+  vpc: 'VPCs',
 };
 
 export const inverseLevelMap = ['none', 'read_only', 'read_write'];

packages/manager/src/features/VPCs/constants.ts

@@ -41,6 +41,8 @@ export const UNRECOMMENDED_CONFIGURATION_PREFERENCE_KEY =
 export const WARNING_ICON_UNRECOMMENDED_CONFIG =
   'warning-icon-for-unrecommended-config';
 
+export const VPC_READ_ONLY_TOOLTIP = 'VPC does not support Read Only access';
+
 // Linode Config dialog helper text for unrecommended configurations
 export const LINODE_UNREACHABLE_HELPER_TEXT =
   'This network configuration is not recommended. The Linode will not be reachable or able to reach Linodes in the other subnets of the VPC. We recommend selecting VPC as the primary interface and checking the “Assign a public IPv4 address for this Linode” checkbox.';