Merge pull request #10051 from linode/staging

`staging` → `master` for Cloud v1.109.1 release

packages/manager/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2024-01-10] - v1.109.1
+
+### Fixed:
+
+- 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
 
 

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');
-  });
 });

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)

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');
-    });
-  });
 });

packages/manager/package.json

@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.109.0",
+  "version": "1.109.1",
   "private": true,
   "type": "module",
   "bugs": {

packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx

@@ -8,6 +8,7 @@ import { LandingHeader } from 'src/components/LandingHeader';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { SubnetContent } from 'src/features/VPCs/VPCCreate/FormComponents/SubnetContent';
+import { VPC_GETTING_STARTED_LINK } from 'src/features/VPCs/constants';
 import { useCreateVPC } from 'src/hooks/useCreateVPC';
 
 import { CannotCreateVPCNotice } from './FormComponents/CannotCreateVPCNotice';
@@ -42,7 +43,7 @@ const VPCCreate = () => {
           pathname: `/vpcs/create`,
         }}
         docsLabel="Getting Started"
-        docsLink="#" // @TODO VPC: add correct docs link
+        docsLink={VPC_GETTING_STARTED_LINK}
         title="Create"
       />
       {userCannotAddVPC && CannotCreateVPCNotice}

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx

@@ -17,7 +17,10 @@ import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { defaultPublicInterface } from 'src/features/Linodes/LinodesCreate/LinodeCreate';
-import { VPC_AUTO_ASSIGN_IPV4_TOOLTIP } from 'src/features/VPCs/constants';
+import {
+  VPC_AUTO_ASSIGN_IPV4_TOOLTIP,
+  VPC_MULTIPLE_CONFIGURATIONS_LEARN_MORE_LINK,
+} from 'src/features/VPCs/constants';
 import { useFormattedDate } from 'src/hooks/useFormattedDate';
 import { useUnassignLinode } from 'src/hooks/useUnassignLinode';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
@@ -40,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
@@ -381,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
@@ -430,17 +433,18 @@ export const SubnetAssignLinodesDrawer = (
         {linodeConfigs.length > 1 && (
           <>
             <FormHelperText sx={{ marginTop: `16px` }}>
-              {MULTIPLE_CONFIGURATIONS_MESSAGE}
-              {/* @TODO VPC: add docs link */}
-              <Link to="#"> Learn more</Link>.
+              {MULTIPLE_CONFIGURATIONS_MESSAGE}{' '}
+              <Link to={VPC_MULTIPLE_CONFIGURATIONS_LEARN_MORE_LINK}>
+                Learn more
+              </Link>
+              .
             </FormHelperText>
             <Autocomplete
               onChange={(_, value: Config) => {
                 setFieldValue('selectedConfig', value);
                 setAssignLinodesErrors({});
               }}
               disabled={userCannotAssignLinodes}
-              inputValue={values.selectedConfig?.label || ''}
               label={'Configuration profile'}
               options={linodeConfigs}
               placeholder="Select a configuration profile"

packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx

@@ -11,7 +11,11 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { VPC_FEEDBACK_FORM_URL, VPC_LABEL } from 'src/features/VPCs/constants';
+import {
+  VPC_DOCS_LINK,
+  VPC_FEEDBACK_FORM_URL,
+  VPC_LABEL,
+} from 'src/features/VPCs/constants';
 import { useRegionsQuery } from 'src/queries/regions';
 import { useVPCQuery } from 'src/queries/vpcs';
 import { truncate } from 'src/utilities/truncate';
@@ -110,7 +114,7 @@ const VPCDetail = () => {
         }}
         betaFeedbackLink={VPC_FEEDBACK_FORM_URL}
         docsLabel="Docs"
-        docsLink="#" // @TODO VPC: Add docs link
+        docsLink={VPC_DOCS_LINK}
       />
       <EntityHeader>
         <Box>

packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx

@@ -13,14 +13,16 @@ import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
-import { VPC_LABEL } from 'src/features/VPCs/constants';
+import {
+  VPC_DOCS_LINK,
+  VPC_FEEDBACK_FORM_URL,
+  VPC_LABEL,
+} from 'src/features/VPCs/constants';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
 import { useVPCsQuery } from 'src/queries/vpcs';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
-import { VPC_FEEDBACK_FORM_URL } from 'src/features/VPCs/constants';
-
 import { VPCDeleteDialog } from './VPCDeleteDialog';
 import { VPCEditDrawer } from './VPCEditDrawer';
 import { VPCEmptyState } from './VPCEmptyState';
@@ -94,11 +96,11 @@ const VPCLanding = () => {
   return (
     <>
       <LandingHeader
+        betaFeedbackLink={VPC_FEEDBACK_FORM_URL}
         createButtonText="Create VPC"
-        docsLink="#" // @TODO VPC: Add docs link
+        docsLink={VPC_DOCS_LINK}
         onButtonClick={createVPC}
         title={VPC_LABEL}
-        betaFeedbackLink={VPC_FEEDBACK_FORM_URL}
       />
       <Table>
         <TableHead>

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

@@ -1,5 +1,16 @@
 // Various constants for the VPCs package
 
+// Labels
+export const VPC_LABEL = 'Virtual Private Cloud (VPC)';
+
+// Keys
+export const UNRECOMMENDED_CONFIGURATION_PREFERENCE_KEY =
+  'not-recommended-configuration';
+
+export const WARNING_ICON_UNRECOMMENDED_CONFIG =
+  'warning-icon-for-unrecommended-config';
+
+// Copy
 export const ASSIGN_LINODES_DRAWER_REBOOT_MESSAGE =
   'Assigning a Linode to a subnet requires you to reboot the Linode to update its configuration.';
 
@@ -13,8 +24,6 @@ export const REBOOT_LINODE_WARNING_VPCDETAILS =
 
 export const SUBNET_UNASSIGN_LINODES_WARNING = `Unassigning Linodes from a subnet requires you to reboot the Linodes to update its configuration.`;
 
-export const VPC_LABEL = 'Virtual Private Cloud (VPC)';
-
 export const VPC_AUTO_ASSIGN_IPV4_TOOLTIP =
   'Automatically assign an IPv4 address as the private IP address for this Linode in the VPC.';
 
@@ -26,21 +35,9 @@ export const VPC_CREATE_FORM_SUBNET_HELPER_TEXT =
 export const VPC_CREATE_FORM_VPC_HELPER_TEXT =
   'A VPC is an isolated network that enables private communication between Compute Instances within the same data center.';
 
-export const VPC_FEEDBACK_FORM_URL =
-  'https://docs.google.com/forms/d/e/1FAIpQLScvWbTupCNsBF5cz5YEsv5oErHM4ONBZodDYi8KuOgC8fyfag/viewform';
-
 export const VPC_REBOOT_MESSAGE =
   'The VPC configuration has been updated. Reboot the Linode to reflect configuration changes.';
 
-export const NETWORK_INTERFACES_GUIDE_URL =
-  'https://www.linode.com/docs/products/compute/compute-instances/guides/configuration-profiles/';
-
-export const UNRECOMMENDED_CONFIGURATION_PREFERENCE_KEY =
-  'not-recommended-configuration';
-
-export const WARNING_ICON_UNRECOMMENDED_CONFIG =
-  'warning-icon-for-unrecommended-config';
-
 // 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.';
@@ -50,3 +47,19 @@ export const NATTED_PUBLIC_IP_HELPER_TEXT =
 
 export const NOT_NATTED_HELPER_TEXT =
   'The Linode will not be able to access the internet. If this Linode needs access to the internet, we recommend checking the “Assign a public IPv4 address for this Linode” checkbox which will enable 1:1 NAT on the VPC interface.';
+
+// Links
+export const VPC_FEEDBACK_FORM_URL =
+  'https://docs.google.com/forms/d/e/1FAIpQLScvWbTupCNsBF5cz5YEsv5oErHM4ONBZodDYi8KuOgC8fyfag/viewform';
+
+export const NETWORK_INTERFACES_GUIDE_URL =
+  'https://www.linode.com/docs/products/compute/compute-instances/guides/configuration-profiles/';
+
+export const VPC_DOCS_LINK =
+  'https://www.linode.com/docs/products/networking/vpc/';
+
+export const VPC_GETTING_STARTED_LINK =
+  'https://www.linode.com/docs/products/networking/vpc/get-started/';
+
+export const VPC_MULTIPLE_CONFIGURATIONS_LEARN_MORE_LINK =
+  'https://www.linode.com/docs/products/compute/compute-instances/guides/configuration-profiles/';