feat: [M3-6729] - Add VPC column to Linodes landing table

packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx

@@ -3,6 +3,7 @@ import { Linode } from '@linode/api-v4/lib/linodes';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { VPC } from '@linode/api-v4';
 
 import Flag from 'src/assets/icons/flag.svg';
 import { BackupStatus } from 'src/components/BackupStatus/BackupStatus';
@@ -22,6 +23,8 @@ import { notificationContext as _notificationContext } from 'src/features/Notifi
 import { useAllAccountMaintenanceQuery } from 'src/queries/accountMaintenance';
 import { useNotificationsQuery } from 'src/queries/accountNotifications';
 import { useTypeQuery } from 'src/queries/types';
+import { useFlags } from 'src/hooks/useFlags';
+import { useVPCsQuery } from 'src/queries/vpcs';
 import { useRecentEventForLinode } from 'src/store/selectors/recentEventForLinode';
 import { capitalizeAllWords } from 'src/utilities/capitalize';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
@@ -41,6 +44,7 @@ import {
 type Props = Linode & { handlers: LinodeHandlers };
 
 export const LinodeRow = (props: Props) => {
+  const flags = useFlags();
   const { backups, handlers, id, ipv4, label, region, status, type } = props;
 
   const notificationContext = React.useContext(_notificationContext);
@@ -52,6 +56,17 @@ export const LinodeRow = (props: Props) => {
     { status: { '+or': ['pending, started'] } }
   );
 
+  // TODO: VPC - currently the only way to know what VPC a linode is associated with is to get all
+  // vpcs, and then loop through each vpc's subnets, and then through each of the subnets' linode IDs
+  // to see if that subnet contains this linode id. There is some discussion about an endpoint
+  // that will directly get vpcs associated with a linode ID, and if that happens, we can
+  // replace this query
+  // Can also put react query this in Linodes/index instead, so that getting all vpcs is only done once
+  // (but if react query caches the data from this call it should be ok either way?)
+  const { data: vpcs } = useVPCsQuery({}, {});
+  // query is paginated -- does not passing in any params mean that it will get all vpcs?
+  const vpc = findAssociatedVPC(vpcs?.data ?? [], id);
+
   const maintenance = accountMaintenanceData?.find(
     (m) => m.entity.id === id && m.entity.type === 'linode'
   );
@@ -166,6 +181,17 @@ export const LinodeRow = (props: Props) => {
             <RegionIndicator region={region} />
           </TableCell>
         </Hidden>
+        {flags.vpc && (
+          <Hidden lgDown>
+            <TableCell>
+              {vpc && (
+                <Link tabIndex={0} to={`/vpc/${vpc.id}`}>
+                  {vpc.label}
+                </Link>
+              )}
+            </TableCell>
+          </Hidden>
+        )}
       </Hidden>
       <Hidden lgDown>
         <TableCell>
@@ -199,6 +225,20 @@ export const LinodeRow = (props: Props) => {
   );
 };
 
+const findAssociatedVPC = (vpcs: VPC[], linodeId: number) => {
+  for (const vpc of vpcs) {
+    for (const subnet of vpc.subnets) {
+      if (subnet.linodes.includes(linodeId)) {
+        // a linode should have only one vpc associated with it (?) so we can
+        // short circuit once we find the associated vpc
+        return vpc;
+      }
+    }
+  }
+
+  return undefined;
+};
+
 export const RenderFlag: React.FC<{
   linodeNotifications: Notification[];
   mutationAvailable: boolean;

packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx

@@ -10,6 +10,7 @@ import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
 import { Tooltip } from 'src/components/Tooltip';
+import { useFlags } from 'src/hooks/useFlags';
 
 import { StyledToggleButton } from './DisplayLinodes.styles';
 
@@ -27,6 +28,7 @@ interface Props {
 type CombinedProps<T> = Props & Omit<OrderByProps<T>, 'data'>;
 
 const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
+  const flags = useFlags();
   const theme = useTheme();
 
   const {
@@ -115,7 +117,7 @@ const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
                 handleClick={handleOrderChange}
                 label="ipv4[0]" // we want to sort by the first ipv4
               >
-                IP Address
+                Public IP Address
               </TableSortCell>
               <Hidden lgDown>
                 <TableSortCell
@@ -135,6 +137,19 @@ const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
                   Region
                 </TableSortCell>
               </Hidden>
+              {flags.vpc && ( // do we this to still show up even if isVlan is true?
+                <Hidden lgDown>
+                  <TableSortCell
+                    // TODO: VPC - figure out the orderBy (cannot use label, as that will order via linode label)
+                    active={isActive('vpc')}
+                    direction={order}
+                    handleClick={handleOrderChange}
+                    label="vpc"
+                  >
+                    VPC
+                  </TableSortCell>
+                </Hidden>
+              )}
             </Hidden>
             <Hidden lgDown>
               <TableSortCell