feat: [M3-6755] - Unassign Linodes from Subnet

packages/manager/.changeset/pr-9703-upcoming-features-1695751361212.md

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

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

@@ -16,7 +16,7 @@ interface DownloadCSVProps {
   data: unknown[];
   filename: string;
   headers: { key: string; label: string }[];
-  onClick?: () => void;
+  onClick?: (() => void) | ((e: React.MouseEvent<HTMLButtonElement>) => void);
   sx?: SxProps;
   text?: string;
 }

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

@@ -6,7 +6,6 @@ import { Box } from 'src/components/Box';
 import { IconButton } from 'src/components/IconButton';
 import { List } from 'src/components/List';
 import { ListItem } from 'src/components/ListItem';
-
 import { isPropValid } from 'src/utilities/isPropValid';
 
 export type RemovableItem = {
@@ -109,7 +108,7 @@ export const RemovableSelectionsList = (props: Props) => {
 const StyledNoAssignedLinodesBox = styled(Box, {
   label: 'StyledNoAssignedLinodesBox',
   shouldForwardProp: (prop) => isPropValid(['maxWidth'], prop),
-})(({ theme, maxWidth }) => ({
+})(({ maxWidth, theme }) => ({
   background: theme.name === 'light' ? theme.bg.main : theme.bg.app,
   display: 'flex',
   flexDirection: 'column',

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

@@ -14,6 +14,7 @@ const props = {
   handleAssignLinodes: jest.fn(),
   handleDelete: jest.fn(),
   handleEdit: jest.fn(),
+  handleUnassignLinodes: jest.fn(),
   numLinodes: 1,
   subnet: subnetFactory.build({ label: 'subnet-1' }),
   vpcId: 1,

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

@@ -8,6 +8,7 @@ interface SubnetActionHandlers {
   handleAssignLinodes: (subnet: Subnet) => void;
   handleDelete: (subnet: Subnet) => void;
   handleEdit: (subnet: Subnet) => void;
+  handleUnassignLinodes: (subnet: Subnet) => void;
 }
 
 interface Props extends SubnetActionHandlers {
@@ -21,12 +22,11 @@ export const SubnetActionMenu = (props: Props) => {
     handleAssignLinodes,
     handleDelete,
     handleEdit,
+    handleUnassignLinodes,
     numLinodes,
     subnet,
   } = props;
 
-  const handleUnassignLinode = () => {};
-
   const actions: Action[] = [
     {
       onClick: () => {
@@ -36,7 +36,7 @@ export const SubnetActionMenu = (props: Props) => {
     },
     {
       onClick: () => {
-        handleUnassignLinode();
+        handleUnassignLinodes(subnet);
       },
       title: 'Unassign Linodes',
     },

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

@@ -18,6 +18,7 @@ import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
 import { getAllLinodeConfigs } from 'src/queries/linodes/requests';
 import { useGrants, useProfile } from 'src/queries/profile';
 import { getErrorMap } from 'src/utilities/errorUtils';
+import { SUBNET_LINODE_CSV_HEADERS } from 'src/utilities/subnets';
 
 import {
   ASSIGN_LINODES_DRAWER_REBOOT_MESSAGE,
@@ -90,12 +91,6 @@ export const SubnetAssignLinodesDrawer = (
     Boolean(profile?.restricted) &&
     (vpcPermissions?.permissions === 'read_only' || grants?.vpc.length === 0);
 
-  const csvHeaders = [
-    { key: 'label', label: 'Linode Label' },
-    { key: 'id', label: 'Linode ID' },
-    { key: 'ipv4', label: 'IPv4' },
-  ];
-
   const downloadCSV = async () => {
     await getCSVData();
     csvRef.current.link.click();
@@ -461,7 +456,7 @@ export const SubnetAssignLinodesDrawer = (
         csvRef={csvRef}
         data={assignedLinodesAndConfigData}
         filename={`linodes-assigned-${formattedDate}.csv`}
-        headers={csvHeaders}
+        headers={SUBNET_LINODE_CSV_HEADERS}
         onClick={downloadCSV}
         text={'Download List of Assigned Linodes (.csv)'}
       />

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

@@ -0,0 +1,37 @@
+import { Subnet } from '@linode/api-v4';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { SubnetUnassignLinodesDrawer } from './SubnetUnassignLinodesDrawer';
+
+const props = {
+  onClose: jest.fn(),
+  open: true,
+  subnet: {
+    id: 1,
+    ipv4: '10.0.0.0/24',
+    label: 'subnet-1',
+  } as Subnet,
+  vpcId: 1,
+};
+
+describe('Subnet Unassign Linodes Drawer', () => {
+  it('should render a subnet Unassign linodes drawer', () => {
+    const { getByText } = renderWithTheme(
+      <SubnetUnassignLinodesDrawer {...props} />
+    );
+
+    const header = getByText(
+      'Unassign Linodes from subnet: subnet-1 (10.0.0.0/24)'
+    );
+    expect(header).toBeVisible();
+    const notice = getByText(
+      'Unassigning Linodes from a subnet requires you to reboot the Linodes to update its configuration.'
+    );
+    expect(notice).toBeVisible();
+
+    const linodeSelect = getByText('Linodes');
+    expect(linodeSelect).toBeVisible();
+  });
+});