upcoming: [M3-9706] - Fix Subnets Table for Linodes using new interfaces

packages/manager/.changeset/pr-11953-upcoming-features-1743614906461.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix SubnetLinodeRow for Linodes using new interfaces ([#11953](https://github.com/linode/manager/pull/11953))

packages/manager/cypress/e2e/core/linodes/create-linode-with-vpc.spec.ts

@@ -3,7 +3,7 @@ import {
   linodeFactory,
   regionFactory,
 } from '@linode/utilities';
-import { mockGetLinodeConfigs } from 'support/intercepts/configs';
+import { mockGetLinodeConfig } from 'support/intercepts/configs';
 import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import {
   mockCreateLinode,
@@ -82,7 +82,13 @@ describe('Create Linode with VPCs', () => {
       linodes: [
         {
           id: mockLinode.id,
-          interfaces: [{ active: true, config_id: 1, id: mockInterface.id }],
+          interfaces: [
+            {
+              active: true,
+              config_id: mockLinodeConfig.id,
+              id: mockInterface.id,
+            },
+          ],
         },
       ],
     };
@@ -150,13 +156,15 @@ describe('Create Linode with VPCs', () => {
     mockGetVPC(mockVPC).as('getVPC');
     mockGetSubnets(mockVPC.id, [mockUpdatedSubnet]).as('getSubnets');
     mockGetLinodeDetails(mockLinode.id, mockLinode).as('getLinode');
-    mockGetLinodeConfigs(mockLinode.id, [mockLinodeConfig]).as(
-      'getLinodeConfigs'
-    );
+    mockGetLinodeConfig({
+      config: mockLinodeConfig,
+      configId: mockLinodeConfig.id,
+      linodeId: mockLinode.id,
+    }).as('getLinodeConfig');
 
     cy.visit(`/vpcs/${mockVPC.id}`);
     cy.findByLabelText(`expand ${mockSubnet.label} row`).click();
-    cy.wait('@getLinodeConfigs');
+    cy.wait('@getLinodeConfig');
     cy.findByTestId(WARNING_ICON_UNRECOMMENDED_CONFIG).should('not.exist');
   });
 
@@ -209,7 +217,13 @@ describe('Create Linode with VPCs', () => {
       linodes: [
         {
           id: mockLinode.id,
-          interfaces: [{ active: true, config_id: 1, id: mockInterface.id }],
+          interfaces: [
+            {
+              active: true,
+              config_id: mockLinodeConfig.id,
+              id: mockInterface.id,
+            },
+          ],
         },
       ],
     };
@@ -314,13 +328,15 @@ describe('Create Linode with VPCs', () => {
     mockGetVPC(mockVPC).as('getVPC');
     mockGetSubnets(mockVPC.id, [mockUpdatedSubnet]).as('getSubnets');
     mockGetLinodeDetails(mockLinode.id, mockLinode).as('getLinode');
-    mockGetLinodeConfigs(mockLinode.id, [mockLinodeConfig]).as(
-      'getLinodeConfigs'
-    );
+    mockGetLinodeConfig({
+      config: mockLinodeConfig,
+      configId: mockLinodeConfig.id,
+      linodeId: mockLinode.id,
+    }).as('getLinodeConfig');
 
     cy.visit(`/vpcs/${mockVPC.id}`);
     cy.findByLabelText(`expand ${mockSubnet.label} row`).click();
-    cy.wait('@getLinodeConfigs');
+    cy.wait('@getLinodeConfig');
     cy.findByTestId(WARNING_ICON_UNRECOMMENDED_CONFIG).should('not.exist');
   });
 

packages/manager/cypress/e2e/core/vpc/vpc-details-page.spec.ts

@@ -4,7 +4,7 @@ import {
   linodeFactory,
 } from '@linode/utilities';
 import { linodeConfigFactory, subnetFactory, vpcFactory } from '@src/factories';
-import { mockGetLinodeConfigs } from 'support/intercepts/configs';
+import { mockGetLinodeConfig } from 'support/intercepts/configs';
 import { mockGetLinodeDetails } from 'support/intercepts/linodes';
 import {
   mockCreateSubnet,
@@ -277,6 +277,7 @@ describe('VPC details page', () => {
     const linodeRegion = chooseRegion({ capabilities: ['VPCs'] });
 
     const mockInterfaceId = randomNumber();
+    const mockConfigId = randomNumber();
     const mockLinode = linodeFactory.build({
       id: randomNumber(),
       label: randomLabel(),
@@ -290,7 +291,13 @@ describe('VPC details page', () => {
       linodes: [
         {
           id: mockLinode.id,
-          interfaces: [{ active: true, id: mockInterfaceId }],
+          interfaces: [
+            {
+              active: true,
+              config_id: mockConfigId,
+              id: mockInterfaceId,
+            },
+          ],
         },
       ],
     });
@@ -304,25 +311,29 @@ describe('VPC details page', () => {
 
     const mockInterface = linodeConfigInterfaceFactoryWithVPC.build({
       active: true,
+      id: mockInterfaceId,
       primary: true,
       subnet_id: mockSubnet.id,
       vpc_id: mockVPC.id,
     });
 
     const mockLinodeConfig = linodeConfigFactory.build({
+      id: mockConfigId,
       interfaces: [mockInterface],
     });
 
     mockGetVPC(mockVPC).as('getVPC');
     mockGetSubnets(mockVPC.id, [mockSubnet]).as('getSubnets');
     mockGetLinodeDetails(mockLinode.id, mockLinode).as('getLinode');
-    mockGetLinodeConfigs(mockLinode.id, [mockLinodeConfig]).as(
-      'getLinodeConfigs'
-    );
+    mockGetLinodeConfig({
+      config: mockLinodeConfig,
+      configId: mockLinodeConfig.id,
+      linodeId: mockLinode.id,
+    }).as('getLinodeConfig');
 
     cy.visitWithLogin(`/vpcs/${mockVPC.id}`);
     cy.findByLabelText(`expand ${mockSubnet.label} row`).click();
-    cy.wait('@getLinodeConfigs');
+    cy.wait('@getLinodeConfig');
     cy.findByTestId(WARNING_ICON_UNRECOMMENDED_CONFIG).should('not.exist');
   });
 
@@ -333,6 +344,7 @@ describe('VPC details page', () => {
     const linodeRegion = chooseRegion({ capabilities: ['VPCs'] });
 
     const mockInterfaceId = randomNumber();
+    const mockConfigId = randomNumber();
     const mockLinode = linodeFactory.build({
       id: randomNumber(),
       label: randomLabel(),
@@ -346,7 +358,13 @@ describe('VPC details page', () => {
       linodes: [
         {
           id: mockLinode.id,
-          interfaces: [{ active: true, id: mockInterfaceId }],
+          interfaces: [
+            {
+              active: true,
+              config_id: mockConfigId,
+              id: mockInterfaceId,
+            },
+          ],
         },
       ],
     });
@@ -367,19 +385,22 @@ describe('VPC details page', () => {
     });
 
     const mockLinodeConfig = linodeConfigFactory.build({
+      id: mockConfigId,
       interfaces: [mockInterface],
     });
 
     mockGetVPC(mockVPC).as('getVPC');
     mockGetSubnets(mockVPC.id, [mockSubnet]).as('getSubnets');
     mockGetLinodeDetails(mockLinode.id, mockLinode).as('getLinode');
-    mockGetLinodeConfigs(mockLinode.id, [mockLinodeConfig]).as(
-      'getLinodeConfigs'
-    );
+    mockGetLinodeConfig({
+      config: mockLinodeConfig,
+      configId: mockLinodeConfig.id,
+      linodeId: mockLinode.id,
+    }).as('getLinodeConfig');
 
     cy.visitWithLogin(`/vpcs/${mockVPC.id}`);
     cy.findByLabelText(`expand ${mockSubnet.label} row`).click();
-    cy.wait('@getLinodeConfigs');
+    cy.wait('@getLinodeConfig');
     cy.findByTestId(WARNING_ICON_UNRECOMMENDED_CONFIG).should('not.exist');
   });
 
@@ -390,6 +411,7 @@ describe('VPC details page', () => {
     const linodeRegion = chooseRegion({ capabilities: ['VPCs'] });
 
     const mockInterfaceId = randomNumber();
+    const mockConfigId = randomNumber();
     const mockLinode = linodeFactory.build({
       id: randomNumber(),
       label: randomLabel(),
@@ -403,7 +425,13 @@ describe('VPC details page', () => {
       linodes: [
         {
           id: mockLinode.id,
-          interfaces: [{ active: true, id: mockInterfaceId }],
+          interfaces: [
+            {
+              active: true,
+              config_id: mockConfigId,
+              id: mockInterfaceId,
+            },
+          ],
         },
       ],
     });
@@ -430,19 +458,22 @@ describe('VPC details page', () => {
     });
 
     const mockLinodeConfig = linodeConfigFactory.build({
+      id: mockConfigId,
       interfaces: [mockInterface, mockPrimaryInterface],
     });
 
     mockGetVPC(mockVPC).as('getVPC');
     mockGetSubnets(mockVPC.id, [mockSubnet]).as('getSubnets');
     mockGetLinodeDetails(mockLinode.id, mockLinode).as('getLinode');
-    mockGetLinodeConfigs(mockLinode.id, [mockLinodeConfig]).as(
-      'getLinodeConfigs'
-    );
+    mockGetLinodeConfig({
+      config: mockLinodeConfig,
+      configId: mockLinodeConfig.id,
+      linodeId: mockLinode.id,
+    }).as('getLinodeConfig');
 
     cy.visitWithLogin(`/vpcs/${mockVPC.id}`);
     cy.findByLabelText(`expand ${mockSubnet.label} row`).click();
-    cy.wait('@getLinodeConfigs');
+    cy.wait('@getLinodeConfig');
     cy.findByTestId(WARNING_ICON_UNRECOMMENDED_CONFIG).should('exist');
   });
 });

packages/manager/cypress/support/intercepts/configs.ts

@@ -4,9 +4,10 @@
 
 import { apiMatcher } from 'support/util/intercepts';
 import { paginateResponse } from 'support/util/paginate';
-import { Config } from '@linode/api-v4';
 import { makeResponse } from 'support/util/response';
 
+import type { Config, Interface } from '@linode/api-v4';
+
 /**
  * Intercepts GET request to fetch all configs for a given linode.
  *
@@ -102,7 +103,7 @@ export const mockDeleteLinodeConfigInterface = (
  * Mocks GET request to retrieve Linode configs.
  *
  * @param linodeId - ID of Linode for mocked request.
- * @param configs - a list of Linode configswith which to mocked response.
+ * @param configs - a list of Linode configs with which to mocked response.
  *
  * @returns Cypress chainable.
  */
@@ -117,6 +118,54 @@ export const mockGetLinodeConfigs = (
   );
 };
 
+/**
+ * Mocks GET request to retrieve a Linode Config
+ *
+ * @param linodeId - ID of Linode for mocked request.
+ * @param configId - ID of Config for mocked request.
+ * @param config - the config with which to mocked response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetLinodeConfig = (inputs: {
+  config: Config;
+  configId: number;
+  linodeId: number;
+}): Cypress.Chainable<null> => {
+  const { config, configId, linodeId } = inputs;
+  return cy.intercept(
+    'GET',
+    apiMatcher(`linode/instances/${linodeId}/configs/${configId}`),
+    config
+  );
+};
+
+/**
+ * Mocks GET request to retrieve an interface of a Linode config
+ *
+ * @param linodeId - ID of Linode for mocked request.
+ * @param configId - ID of Config for mocked request.
+ * @param linodeId - ID of Config Interface for mocked request.
+ * @param configInterface - the interface with which to mocked response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetLinodeConfigInterface = (inputs: {
+  configId: number;
+  configInterface: Interface;
+  interfaceId: number;
+  linodeId: number;
+}): Cypress.Chainable<null> => {
+  const { configId, configInterface, interfaceId, linodeId } = inputs;
+  return cy.intercept(
+    'GET',
+    apiMatcher(
+      `linode/instances/${linodeId}/configs/${configId}/interfaces/${interfaceId}`
+    ),
+    configInterface
+  );
+};
+
 /**
  * Mocks PUT request to update a linode config.
  *

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/InterfaceDetailsDrawer/VPCInterfaceDetailsContent.tsx

@@ -39,7 +39,7 @@ export const VPCInterfaceDetailsContent = (props: VPCInterfaceData) => {
         <MaskableText
           isToggleable
           key={range.range}
-          text={`${range.range} (Range)'}`}
+          text={`${range.range} (Range)`}
         />
       ))}
     </>