change: [M3-7077] - Remove VPC column from Linodes landing page table

packages/manager/.changeset/pr-9625-removed-1693588382719.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Removed VPC column from Linodes landing page table ([#9625](https://github.com/linode/manager/pull/9625))

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

@@ -1,46 +1,13 @@
 import userEvent from '@testing-library/user-event';
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { QueryClient } from 'react-query';
 
 import { mockNotification } from 'src/__data__/notifications';
-import { linodeConfigFactory, linodeFactory, vpcFactory } from 'src/factories';
-import {
-  mockMatchMedia,
-  renderWithTheme,
-  wrapWithTableBody,
-} from 'src/utilities/testHelpers';
+import { linodeFactory } from 'src/factories';
+import { renderWithTheme, wrapWithTableBody } from 'src/utilities/testHelpers';
 
 import { LinodeRow, RenderFlag } from './LinodeRow';
 
-const queryClient = new QueryClient();
-
-beforeAll(() => mockMatchMedia());
-afterEach(() => {
-  queryClient.clear();
-});
-
-jest.mock('src/hooks/useFlags', () => ({
-  __esModule: true,
-  useFlags: jest.fn().mockReturnValue({ vpc: true }),
-}));
-
-jest.mock('src/queries/linodes/configs.ts', () => ({
-  useAllLinodeConfigsQuery: jest.fn().mockReturnValue({
-    data: linodeConfigFactory.buildList(1),
-    error: {},
-    isLoading: false,
-  }),
-}));
-
-jest.mock('src/queries/vpcs.ts', () => ({
-  useVPCQuery: jest.fn().mockReturnValue({
-    data: vpcFactory.build({ label: 'vpc-1' }),
-    isLoading: false,
-    error: {},
-  }),
-}));
-
 describe('LinodeRow', () => {
   describe('when Linode has notification', () => {
     it('should render a Flag', () => {
@@ -58,8 +25,7 @@ describe('LinodeRow', () => {
     });
   });
 
-  // TODO: VPC - when a feature flag is no longer needed for vpc, this should be changed
-  it('should render a linode row with associated vpc information if the feature flag is on', () => {
+  it('should render a linode row', () => {
     const linode = linodeFactory.build();
     const renderedLinode = (
       <LinodeRow
@@ -93,10 +59,9 @@ describe('LinodeRow', () => {
     );
 
     const { getByLabelText, getByText } = renderWithTheme(
-      wrapWithTableBody(renderedLinode, { queryClient })
+      wrapWithTableBody(renderedLinode)
     );
 
-    getByText('vpc-1');
     getByText(linode.label);
 
     // Open action menu

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

@@ -1,4 +1,3 @@
-import type { Config } from '@linode/api-v4';
 import { Notification } from '@linode/api-v4/lib/account';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
@@ -7,7 +6,6 @@ import Flag from 'src/assets/icons/flag.svg';
 import { BackupStatus } from 'src/components/BackupStatus/BackupStatus';
 import { Hidden } from 'src/components/Hidden';
 import { Link } from 'src/components/Link';
-import { Skeleton } from 'src/components/Skeleton';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
@@ -21,10 +19,7 @@ import {
 } from 'src/features/Linodes/transitions';
 import { notificationContext as _notificationContext } from 'src/features/NotificationCenter/NotificationContext';
 import { useNotificationsQuery } from 'src/queries/accountNotifications';
-import { useAllLinodeConfigsQuery } from 'src/queries/linodes/configs';
-import { useVPCQuery } from 'src/queries/vpcs';
 import { useTypeQuery } from 'src/queries/types';
-import { useFlags } from 'src/hooks/useFlags';
 import { useRecentEventForLinode } from 'src/store/selectors/recentEventForLinode';
 import { capitalizeAllWords } from 'src/utilities/capitalize';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
@@ -44,7 +39,6 @@ import {
 type Props = LinodeWithMaintenance & { handlers: LinodeHandlers };
 
 export const LinodeRow = (props: Props) => {
-  const flags = useFlags();
   const {
     backups,
     handlers,
@@ -61,18 +55,6 @@ export const LinodeRow = (props: Props) => {
 
   const { data: notifications } = useNotificationsQuery();
 
-  // TODO: VPC - later if there is a way to directly get a linode's vpc, replace this
-  const { data: configs, isLoading: configsLoading } = useAllLinodeConfigsQuery(
-    id,
-    flags.vpc
-  );
-  const vpcId = getVPCId(configs ?? []);
-  const { data: vpc, isLoading: vpcLoading } = useVPCQuery(
-    vpcId ?? -1,
-    vpcId !== undefined && vpcId !== null
-  );
-  const vpcLabel = vpc?.label;
-
   const linodeNotifications =
     notifications?.filter(
       (notification) =>
@@ -181,21 +163,6 @@ export const LinodeRow = (props: Props) => {
             <RegionIndicator region={region} />
           </TableCell>
         </Hidden>
-        {flags.vpc && (
-          <Hidden smDown>
-            <TableCell noWrap>
-              {vpcLoading || configsLoading ? (
-                <Skeleton />
-              ) : vpcLabel ? (
-                <Link tabIndex={0} to={`/vpcs/${vpcId}`}>
-                  {vpcLabel}
-                </Link>
-              ) : (
-                'None'
-              )}
-            </TableCell>
-          </Hidden>
-        )}
       </Hidden>
       <Hidden lgDown>
         <TableCell>
@@ -262,18 +229,6 @@ export const RenderFlag: React.FC<{
   return null;
 };
 
-const getVPCId = (configs: Config[]) => {
-  for (const config of configs) {
-    for (const linodeInterface of config.interfaces) {
-      if (linodeInterface.purpose === 'vpc') {
-        return linodeInterface.vpc_id;
-      }
-    }
-  }
-
-  return undefined;
-};
-
 RenderFlag.displayName = `RenderFlag`;
 
 export const ProgressDisplay: React.FC<{

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

@@ -10,7 +10,6 @@ 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';
 
@@ -30,7 +29,6 @@ type CombinedProps<T> = Props & Omit<OrderByProps<T>, 'data'>;
 export const SortableTableHead = <T extends unknown>(
   props: CombinedProps<T>
 ) => {
-  const flags = useFlags();
   const theme = useTheme();
 
   const {
@@ -141,11 +139,6 @@ export const SortableTableHead = <T extends unknown>(
                 </TableSortCell>
               </Hidden>
             </Hidden>
-            {flags.vpc && (
-              <Hidden smDown>
-                <TableCell>VPC</TableCell>
-              </Hidden>
-            )}
             <Hidden lgDown>
               <TableSortCell
                 active={isActive('backups:last_successful')}