feat: [M3-6752] - Assign Linodes to Subnet drawer

packages/api-v4/src/linodes/configs.ts

@@ -3,7 +3,7 @@ import {
   UpdateConfigInterfaceOrderSchema,
   UpdateConfigInterfaceSchema,
   UpdateLinodeConfigSchema,
-  linodeInterfaceSchema,
+  LinodeInterfaceSchema,
 } from '@linode/validation/lib/linodes.schema';
 import { API_ROOT } from '../constants';
 import Request, {
@@ -180,7 +180,7 @@ export const appendConfigInterface = (
       )}/configs/${encodeURIComponent(configId)}/interfaces`
     ),
     setMethod('POST'),
-    setData(data, linodeInterfaceSchema)
+    setData(data, LinodeInterfaceSchema)
   );
 
 /**

packages/manager/.changeset/pr-9687-upcoming-features-1695074900291.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Subnet Assign Linodes Drawer ([#9687](https://github.com/linode/manager/pull/9687))

packages/manager/src/components/DownloadCSV/DownloadCSV.tsx

@@ -2,12 +2,14 @@ import { SxProps } from '@mui/system';
 import * as React from 'react';
 import { CSVLink } from 'react-csv';
 
+import DownloadIcon from 'src/assets/icons/lke-download.svg';
 import { Button } from 'src/components/Button/Button';
+import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 
 import type { ButtonType } from 'src/components/Button/Button';
 
 interface DownloadCSVProps {
-  buttonType?: ButtonType;
+  buttonType?: 'unstyled' | ButtonType;
   children?: React.ReactNode;
   className?: string;
   csvRef?: React.RefObject<any>;
@@ -39,6 +41,18 @@ export const DownloadCSV = ({
   sx,
   text = 'Download CSV',
 }: DownloadCSVProps) => {
+  const renderButton =
+    buttonType === 'unstyled' ? (
+      <StyledLinkButton onClick={onClick} sx={sx}>
+        <DownloadIcon />
+        {text}
+      </StyledLinkButton>
+    ) : (
+      <Button buttonType={buttonType} onClick={onClick} sx={sx}>
+        {text}
+      </Button>
+    );
+
   return (
     <>
       <CSVLink
@@ -50,9 +64,7 @@ export const DownloadCSV = ({
         ref={csvRef}
         tabIndex={-1}
       />
-      <Button buttonType={buttonType} onClick={onClick} sx={sx}>
-        {text}
-      </Button>
+      {renderButton}
     </>
   );
 };

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

@@ -11,6 +11,7 @@ afterEach(() => {
 });
 
 const props = {
+  handleAssignLinodes: jest.fn(),
   handleDelete: jest.fn(),
   handleEdit: jest.fn(),
   numLinodes: 1,
@@ -23,8 +24,8 @@ describe('SubnetActionMenu', () => {
     const screen = renderWithTheme(<SubnetActionMenu {...props} />);
     const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
     fireEvent.click(actionMenu);
-    screen.getByText('Assign Linode');
-    screen.getByText('Unassign Linode');
+    screen.getByText('Assign Linodes');
+    screen.getByText('Unassign Linodes');
     screen.getByText('Edit');
     screen.getByText('Delete');
   });
@@ -70,4 +71,14 @@ describe('SubnetActionMenu', () => {
     fireEvent.click(editButton);
     expect(props.handleEdit).toHaveBeenCalled();
   });
+
+  it('should allow the Assign Linodes button to be clicked', () => {
+    const screen = renderWithTheme(<SubnetActionMenu {...props} />);
+    const actionMenu = screen.getByLabelText(`Action menu for Subnet subnet-1`);
+    fireEvent.click(actionMenu);
+
+    const assignButton = screen.getByText('Assign Linodes');
+    fireEvent.click(assignButton);
+    expect(props.handleAssignLinodes).toHaveBeenCalled();
+  });
 });

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { Action, ActionMenu } from 'src/components/ActionMenu';
 
 interface SubnetActionHandlers {
+  handleAssignLinodes: (subnet: Subnet) => void;
   handleDelete: (subnet: Subnet) => void;
   handleEdit: (subnet: Subnet) => void;
 }
@@ -16,24 +17,22 @@ interface Props extends SubnetActionHandlers {
 }
 
 export const SubnetActionMenu = (props: Props) => {
-  const { handleDelete, handleEdit, numLinodes, subnet } = props;
-
-  const handleAssignLinode = () => {};
+  const { handleAssignLinodes, handleDelete, handleEdit, numLinodes, subnet } = props;
 
   const handleUnassignLinode = () => {};
 
   const actions: Action[] = [
     {
       onClick: () => {
-        handleAssignLinode();
+        handleAssignLinodes(subnet);
       },
-      title: 'Assign Linode',
+      title: 'Assign Linodes',
     },
     {
       onClick: () => {
         handleUnassignLinode();
       },
-      title: 'Unassign Linode',
+      title: 'Unassign Linodes',
     },
     {
       onClick: () => {

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.styles.ts

@@ -0,0 +1,62 @@
+import { styled } from '@mui/material/styles';
+
+import { Box } from 'src/components/Box';
+import { List } from 'src/components/List';
+import { ListItem } from 'src/components/ListItem';
+
+export const StyledButtonBox = styled(Box, { label: 'StyledButtonBox' })(
+  ({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    margin: `${theme.spacing(3)} 0px`,
+  })
+);
+
+export const StyledNoAssignedLinodesBox = styled(Box, {
+  label: 'StyledNoAssignedLinodesBox',
+})(({ theme }) => ({
+  background: theme.bg.main,
+  display: 'flex',
+  flexDirection: 'column',
+  height: '52px',
+  justifyContent: 'center',
+  maxWidth: '416px',
+  paddingLeft: theme.spacing(2),
+  width: '100%',
+}));
+
+export const SelectedOptionsHeader = styled('h4', {
+  label: 'SelectedOptionsHeader',
+})(({ theme }) => ({
+  color: theme.color.headline,
+  fontFamily: theme.font.bold,
+  fontSize: '14px',
+  textTransform: 'initial',
+}));
+
+export const SelectedOptionsList = styled(List, {
+  label: 'SelectedOptionsList',
+})(({ theme }) => ({
+  background: theme.bg.main,
+  maxHeight: '450px',
+  maxWidth: '416px',
+  overflow: 'auto',
+  padding: '5px 0',
+  width: '100%',
+}));
+
+export const SelectedOptionsListItem = styled(ListItem, {
+  label: 'SelectedOptionsListItem',
+})(() => ({
+  justifyContent: 'space-between',
+  paddingBottom: 0,
+  paddingTop: 0,
+}));
+
+export const StyledLabel = styled('span', { label: 'StyledLabel' })(
+  ({ theme }) => ({
+    color: theme.color.label,
+    fontFamily: theme.font.semiBold,
+    fontSize: '14px',
+  })
+);

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

@@ -0,0 +1,80 @@
+import { Subnet } from '@linode/api-v4';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+import { SubnetAssignLinodesDrawer } from './SubnetAssignLinodesDrawer';
+
+import { fireEvent } from '@testing-library/react';
+
+const props = {
+  onClose: jest.fn(),
+  open: true,
+  subnet: {
+    id: 1,
+    label: 'subnet-1',
+    ipv4: '10.0.0.0/24',
+  } as Subnet,
+  vpcId: 1,
+  vpcRegion: '',
+};
+
+describe('Subnet Assign Linodes Drawer', () => {
+  it('should render a subnet assign linodes drawer', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <SubnetAssignLinodesDrawer {...props} />
+    );
+
+    const header = getByText(
+      'Assign Linodes to subnet: subnet-1 (10.0.0.0/24)'
+    );
+    expect(header).toBeVisible();
+    const notice = getByText(
+      'Assigning a Linode to a subnet requires you to reboot the Linode to update its configuration.'
+    );
+    expect(notice).toBeVisible();
+    const helperText = getByText(
+      `Select the Linodes you would like to assign to this subnet. Only Linodes in this VPC's region are displayed.`
+    );
+    expect(helperText).toBeVisible();
+    const linodeSelect = getByText('Linodes');
+    expect(linodeSelect).toBeVisible();
+    const checkbox = getByText(
+      'Auto-assign a VPC IPv4 address for this Linode'
+    );
+    expect(checkbox).toBeVisible();
+    const ipv4Textbox = queryByText('VPC IPv4');
+    expect(ipv4Textbox).toBeNull();
+    const assignButton = getByText('Assign Linode');
+    expect(assignButton).toBeVisible();
+    const alreadyAssigned = getByText('Linodes Assigned to Subnet (0)');
+    expect(alreadyAssigned).toBeVisible();
+    const doneButton = getByText('Done');
+    expect(doneButton).toBeVisible();
+  });
+
+  it('should show the IPv4 textbox when the checkmark is clicked', () => {
+    const { getByText } = renderWithTheme(
+      <SubnetAssignLinodesDrawer {...props} />
+    );
+
+    const checkbox = getByText(
+      'Auto-assign a VPC IPv4 address for this Linode'
+    );
+    expect(checkbox).toBeVisible();
+    fireEvent.click(checkbox);
+
+    const ipv4Textbox = getByText('VPC IPv4');
+    expect(ipv4Textbox).toBeVisible();
+  });
+
+  it('should close the drawer', () => {
+    const { getByText } = renderWithTheme(
+      <SubnetAssignLinodesDrawer {...props} />
+    );
+
+    const doneButton = getByText('Done');
+    expect(doneButton).toBeVisible();
+    fireEvent.click(doneButton);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+});