fix: [M3-7623] - Fix VPC subnet Linode assignment text input (#10047)

* Assert that entered Linode label is reflected in input value * Remove `inputValue` prop to fix Linode assignment field issue * Remove obsolete feature flag off state tests * Replace Autocomplete-based Linode selection with LinodeSelect * Add changelog entries Co-authored-by: Dajahi Wiley <[email protected]>
linode · Jan 10, 2024 · 736a161 · 736a161
1 parent dccd829
commit 736a161
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 42 deletions.
diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
@@ -8,7 +8,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Fixed:
 
-- VPC docs links on VPC landing, Create, and Detail pages and in "Assign Linodes" flow
+- VPC docs links on VPC landing, Create, and Detail pages and in "Assign Linodes" flow ([#10050](https://github.com/linode/manager/pull/10050))
+- VPC subnet Linode assignment text field input issue ([#10047](https://github.com/linode/manager/pull/10047))
+
+### Tests:
+
+- Remove obsolete VPC disabled state tests ([#10047](https://github.com/linode/manager/pull/10047))
 
 
 ## [2024-01-08] - v1.109.0

diff --git a/packages/manager/cypress/e2e/core/vpc/vpc-landing-page.spec.ts b/packages/manager/cypress/e2e/core/vpc/vpc-landing-page.spec.ts
@@ -356,20 +356,4 @@ describe('VPC landing page', () => {
 
     cy.findByText(MOCK_DELETE_VPC_ERROR).should('not.exist');
   });
-
-  /*
-   * - Confirms that users cannot navigate to VPC landing page when feature is disabled.
-   */
-  it('cannot access VPC landing page when feature is disabled', () => {
-    // TODO Remove this test once VPC feature flag is removed from codebase.
-    mockAppendFeatureFlags({
-      vpc: makeFeatureFlagData(false),
-    }).as('getFeatureFlags');
-    mockGetFeatureFlagClientstream().as('getClientStream');
-
-    cy.visitWithLogin('/vpcs');
-    cy.wait(['@getFeatureFlags', '@getClientStream']);
-
-    cy.findByText('Not Found').should('be.visible');
-  });
 });
diff --git a/packages/manager/cypress/e2e/core/vpc/vpc-linodes-update.spec.ts b/packages/manager/cypress/e2e/core/vpc/vpc-linodes-update.spec.ts
@@ -156,7 +156,8 @@ describe('VPC assign/unassign flows', () => {
         cy.findByLabelText('Linodes')
           .should('be.visible')
           .click()
-          .type(mockLinode.label);
+          .type(mockLinode.label)
+          .should('have.value', mockLinode.label);
 
         ui.autocompletePopper
           .findByTitle(mockLinode.label)

diff --git a/packages/manager/cypress/e2e/core/vpc/vpc-navigation.spec.ts b/packages/manager/cypress/e2e/core/vpc/vpc-navigation.spec.ts
@@ -28,22 +28,4 @@ describe('VPC navigation', () => {
 
     cy.url().should('endWith', '/vpcs');
   });
-
-  /*
-   * - Confirms that VPC sidebar nav item is not shown when feature is disabled.
-   */
-  it('does not show VPC navigation item when feature is disabled', () => {
-    // TODO Delete this test when VPC feature flag is removed from codebase.
-    mockAppendFeatureFlags({
-      vpc: makeFeatureFlagData(false),
-    }).as('getFeatureFlags');
-    mockGetFeatureFlagClientstream().as('getClientStream');
-
-    cy.visitWithLogin('/linodes');
-    cy.wait(['@getFeatureFlags', '@getClientStream']);
-
-    ui.nav.find().within(() => {
-      cy.findByText('VPC').should('not.exist');
-    });
-  });
 });
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
@@ -43,6 +43,7 @@ import type {
   Linode,
   Subnet,
 } from '@linode/api-v4';
+import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect';
 
 // @TODO VPC: if all subnet action menu item related components use (most of) this as their props, might be worth
 // putting this in a common file and naming it something like SubnetActionMenuItemProps or somthing
@@ -384,19 +385,18 @@ export const SubnetAssignLinodesDrawer = (
       />
       <form onSubmit={handleSubmit}>
         <FormHelperText>{REGIONAL_LINODE_MESSAGE}</FormHelperText>
-        <Autocomplete
-          onChange={(_, value: Linode) => {
-            setFieldValue('selectedLinode', value);
+        <LinodeSelect
+          onSelectionChange={(selected) => {
+            setFieldValue('selectedLinode', selected);
             setAssignLinodesErrors({});
           }}
           disabled={userCannotAssignLinodes}
-          inputValue={values.selectedLinode?.label || ''}
           label={'Linodes'}
           // We only want to be able to assign linodes that were not already assigned to this subnet
           options={linodeOptionsToAssign}
           placeholder="Select Linodes or type to search"
           sx={{ marginBottom: '8px' }}
-          value={values.selectedLinode || null}
+          value={values.selectedLinode?.id || null}
         />
         <Box alignItems="center" display="flex" flexDirection="row">
           <FormControlLabel
@@ -445,7 +445,6 @@ export const SubnetAssignLinodesDrawer = (
                 setAssignLinodesErrors({});
               }}
               disabled={userCannotAssignLinodes}
-              inputValue={values.selectedConfig?.label || ''}
               label={'Configuration profile'}
               options={linodeConfigs}
               placeholder="Select a configuration profile"