feat: [M3-7169, M3-7193, M3-7211, M3-7255, M3-7258] - VPC UX feedback

packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+VPC UX feedback ([#9832](https://github.com/linode/manager/pull/9832))

packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx

@@ -133,6 +133,7 @@ const SelectedOptionsHeader = styled('h4', {
   color: theme.color.headline,
   fontFamily: theme.font.bold,
   fontSize: '14px',
+  fontWeight: 300,
   textTransform: 'initial',
 }));
 

packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx

@@ -256,7 +256,7 @@ export const VPCPanel = (props: VPCPanelProps) => {
                     </Typography>
                     <TooltipIcon
                       text={
-                        'A range of non-internet facing IP addresses used in an internal network.'
+                        'A VPC IPv4 is the private IP address for this Linode in the VPC.'
                       }
                       status="help"
                     />

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

@@ -3,15 +3,19 @@ import { useFormik } from 'formik';
 import * as React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Checkbox } from 'src/components/Checkbox';
 import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV';
 import { Drawer } from 'src/components/Drawer';
+import { FormControlLabel } from 'src/components/FormControlLabel';
 import { FormHelperText } from 'src/components/FormHelperText';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { RemovableSelectionsList } from 'src/components/RemovableSelectionsList/RemovableSelectionsList';
 import { TextField } from 'src/components/TextField';
+import { TooltipIcon } from 'src/components/TooltipIcon';
+import { Typography } from 'src/components/Typography';
 import { useFormattedDate } from 'src/hooks/useFormattedDate';
 import { useUnassignLinode } from 'src/hooks/useUnassignLinode';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
@@ -367,16 +371,29 @@ export const SubnetAssignLinodesDrawer = (
           sx={{ marginBottom: '8px' }}
           value={values.selectedLinode || null}
         />
-        <Checkbox
-          toolTipText={
-            'A range of non-internet facing IP used in an internal network'
-          }
-          checked={autoAssignIPv4}
-          disabled={userCannotAssignLinodes}
-          onChange={handleAutoAssignIPv4Change}
-          sx={{ marginLeft: `2px`, marginTop: `8px` }}
-          text={'Auto-assign a VPC IPv4 address for this Linode'}
-        />
+        <Box alignItems="center" display="flex" flexDirection="row">
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={autoAssignIPv4}
+                onChange={handleAutoAssignIPv4Change}
+              />
+            }
+            label={
+              <Typography>
+                Auto-assign a VPC IPv4 address for this Linode
+              </Typography>
+            }
+            data-testid="vpc-ipv4-checkbox"
+            sx={{ marginRight: 0 }}
+          />
+          <TooltipIcon
+            text={
+              'A VPC IPv4 is the private IP address for this Linode in the VPC.'
+            }
+            status="help"
+          />
+        </Box>
         {!autoAssignIPv4 && (
           <TextField
             onChange={(e) => {
@@ -446,22 +463,24 @@ export const SubnetAssignLinodesDrawer = (
         preferredDataLabel="linodeConfigLabel"
         selectionData={assignedLinodesAndConfigData}
       />
-      <DownloadCSV
-        sx={{
-          alignItems: 'flex-start',
-          display: 'flex',
-          gap: 1,
-          marginTop: 2,
-          textAlign: 'left',
-        }}
-        buttonType="styledLink"
-        csvRef={csvRef}
-        data={assignedLinodesAndConfigData}
-        filename={`linodes-assigned-${formattedDate}.csv`}
-        headers={SUBNET_LINODE_CSV_HEADERS}
-        onClick={downloadCSV}
-        text={'Download List of Assigned Linodes (.csv)'}
-      />
+      {assignedLinodesAndConfigData.length > 0 && (
+        <DownloadCSV
+          sx={{
+            alignItems: 'flex-start',
+            display: 'flex',
+            gap: 1,
+            marginTop: 2,
+            textAlign: 'left',
+          }}
+          buttonType="styledLink"
+          csvRef={csvRef}
+          data={assignedLinodesAndConfigData}
+          filename={`linodes-assigned-${formattedDate}.csv`}
+          headers={SUBNET_LINODE_CSV_HEADERS}
+          onClick={downloadCSV}
+          text={'Download List of Assigned Linodes (.csv)'}
+        />
+      )}
       <StyledButtonBox>
         <Button buttonType="outlined" onClick={handleOnClose}>
           Done

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

@@ -320,22 +320,24 @@ export const SubnetUnassignLinodesDrawer = React.memo(
               onRemove={handleRemoveLinode}
               selectionData={selectedLinodes}
             />
-            <DownloadCSV
-              sx={{
-                alignItems: 'flex-start',
-                display: 'flex',
-                gap: 1,
-                marginTop: 2,
-                textAlign: 'left',
-              }}
-              buttonType="styledLink"
-              csvRef={csvRef}
-              data={selectedLinodes}
-              filename={`linodes-unassigned-${formattedDate}.csv`}
-              headers={SUBNET_LINODE_CSV_HEADERS}
-              onClick={downloadCSV}
-              text={'Download List of Unassigned Linodes (.csv)'}
-            />
+            {selectedLinodes.length > 0 && (
+              <DownloadCSV
+                sx={{
+                  alignItems: 'flex-start',
+                  display: 'flex',
+                  gap: 1,
+                  marginTop: 2,
+                  textAlign: 'left',
+                }}
+                buttonType="styledLink"
+                csvRef={csvRef}
+                data={selectedLinodes}
+                filename={`linodes-unassigned-${formattedDate}.csv`}
+                headers={SUBNET_LINODE_CSV_HEADERS}
+                onClick={downloadCSV}
+                text={'Download List of Unassigned Linodes (.csv)'}
+              />
+            )}
             <ActionsPanel
               primaryButtonProps={{
                 'data-testid': 'unassign-submit-button',

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

@@ -132,15 +132,21 @@ const VPCDetail = () => {
         </Box>
       </EntityHeader>
       <StyledPaper>
-        <StyledSummaryBox display="flex" flex={1} data-qa-vpc-summary>
+        <StyledSummaryBox data-qa-vpc-summary display="flex" flex={1}>
           {summaryData.map((col) => {
             return (
               <Box key={col[0].label} paddingRight={6}>
                 <StyledSummaryTextTypography>
-                  <strong>{col[0].label}</strong> {col[0].value}
+                  <span style={{ fontFamily: theme.font.bold }}>
+                    {col[0].label}
+                  </span>{' '}
+                  {col[0].value}
                 </StyledSummaryTextTypography>
                 <StyledSummaryTextTypography>
-                  <strong>{col[1].label}</strong> {col[1].value}
+                  <span style={{ fontFamily: theme.font.bold }}>
+                    {col[1].label}
+                  </span>{' '}
+                  {col[1].value}
                 </StyledSummaryTextTypography>
               </Box>
             );
@@ -149,7 +155,9 @@ const VPCDetail = () => {
         {vpc.description.length > 0 && (
           <StyledDescriptionBox display="flex" flex={1}>
             <Typography>
-              <strong style={{ paddingRight: 8 }}>Description</strong>{' '}
+              <span style={{ fontFamily: theme.font.bold, paddingRight: 8 }}>
+                Description
+              </span>{' '}
             </Typography>
             <Typography>
               {description}{' '}
@@ -184,7 +192,9 @@ const VPCDetail = () => {
         })}
         padding={`${theme.spacing(2)} ${theme.spacing()}`}
       >
-        <Typography variant="h2">Subnets ({vpc.subnets.length})</Typography>
+        <Typography sx={{ fontSize: '1rem' }} variant="h2">
+          Subnets ({vpc.subnets.length})
+        </Typography>
       </Box>
       {numLinodes > 0 && (
         <DismissibleBanner

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

@@ -7,9 +7,10 @@ import {
   gettingStartedGuides,
   youtubeLinkData,
 } from 'src/features/Linodes/LinodesLanding/LinodesLandingEmptyStateData';
-import { headers, linkAnalyticsEvent } from './VPCEmptyStateData';
 import { sendEvent } from 'src/utilities/analytics';
 
+import { headers, linkAnalyticsEvent } from './VPCEmptyStateData';
+
 export const VPCEmptyState = () => {
   const { push } = useHistory();
 

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

@@ -4,9 +4,10 @@ import type {
 } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
 export const headers: ResourcesHeaders = {
-  description: '',
-  subtitle: 'Create a private and isolated network.',
-  title: 'VPCs',
+  description:
+    'Enable cloud resources to privately and securely communicate with each other, the internet, and other private networks.',
+  subtitle: 'Create a private and isolated network',
+  title: 'Virtual Private Cloud (VPC)',
 };
 
 export const linkAnalyticsEvent: ResourcesLinks['linkAnalyticsEvent'] = {

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

@@ -61,7 +61,7 @@ describe('VPC Landing Table', () => {
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
 
     expect(
-      getByText('Create a private and isolated network.')
+      getByText('Create a private and isolated network')
     ).toBeInTheDocument();
   });
 });