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

packages/api-v4/.changeset/pr-9687-changed-1695235363178.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add type `DeleteLinodeConfigInterfacePayload` for deleting Linode config interfaces ([#9687](https://github.com/linode/manager/pull/9687))

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/api-v4/src/linodes/types.ts

@@ -399,3 +399,9 @@ export interface ResizeLinodePayload {
   /** @default true */
   allow_auto_disk_resize?: boolean;
 }
+
+export interface DeleteLinodeConfigInterfacePayload {
+  linodeId: number;
+  configId: number;
+  interfaceId: number;
+}

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

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

packages/manager/src/components/CollapsibleTable/CollapsibleRow.tsx

@@ -25,7 +25,7 @@ export const CollapsibleRow = (props: Props) => {
       <StyledOuterTableRow>
         <TableCell component="th" scope="row">
           <IconButton
-            aria-label="expand row"
+            aria-label={`${label} expand row`}
             onClick={() => setOpen(!open)}
             size="small"
             sx={{ padding: 1 }}

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?: 'styledLink' | ButtonType;
   children?: React.ReactNode;
   className?: string;
   csvRef?: React.RefObject<any>;
@@ -39,14 +41,13 @@ export const DownloadCSV = ({
   sx,
   text = 'Download CSV',
 }: DownloadCSVProps) => {
-  return (
-    <CSVLink
-      className={className}
-      data={cleanCSVData(data)}
-      filename={filename}
-      headers={headers}
-      ref={csvRef}
-    >
+  const renderButton =
+    buttonType === 'styledLink' ? (
+      <StyledLinkButton onClick={onClick} sx={sx}>
+        <DownloadIcon />
+        {text}
+      </StyledLinkButton>
+    ) : (
       <Button
         buttonType={buttonType}
         component="span"
@@ -57,7 +58,19 @@ export const DownloadCSV = ({
       >
         {text}
       </Button>
-    </CSVLink>
+    );
+
+  return (
+    <>
+      <CSVLink
+        className={className}
+        data={cleanCSVData(data)}
+        filename={filename}
+        headers={headers}
+        ref={csvRef}
+      />
+      {renderButton}
+    </>
   );
 };
 

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

@@ -0,0 +1,133 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import * as React from 'react';
+
+import { Button } from '../Button/Button';
+import { RemovableSelectionsList } from './RemovableSelectionsList';
+
+import type { RemovableItem } from './RemovableSelectionsList';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof RemovableSelectionsList>;
+
+const defaultListItems = Array.from({ length: 20 }, (_, index) => {
+  const num = index + 1;
+  return { id: num, label: `my-linode-${num}` };
+});
+
+const diffLabelListItems = Array.from({ length: 5 }, (_, index) => {
+  const num = index + 1;
+  return {
+    id: num,
+    label: `my-linode-${num}`,
+    preferredLabel: `my-linode-preferred-${num}`,
+  };
+});
+
+interface Dimensions {
+  maxHeight?: number;
+  maxWidth?: number;
+}
+const DefaultRemovableSelectionsListWrapper = (props: Dimensions) => {
+  const { maxHeight, maxWidth } = props;
+  const [data, setData] = React.useState(defaultListItems);
+
+  const handleRemove = (item: RemovableItem) => {
+    setData([...data].filter((data) => data.id !== item.id));
+  };
+
+  const resetList = () => {
+    setData([...defaultListItems]);
+  };
+
+  return (
+    <>
+      <RemovableSelectionsList
+        headerText="Linodes to remove"
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        noDataText="No Linodes available"
+        onRemove={handleRemove}
+        selectionData={data}
+      />
+      <Button onClick={resetList} sx={{ marginTop: 2 }}>
+        Reset list
+      </Button>
+    </>
+  );
+};
+
+/**
+ * Interactable example of a RemovableSelectionsList
+ */
+export const InteractableDefault: Story = {
+  render: () => <DefaultRemovableSelectionsListWrapper />,
+};
+
+/**
+ * Example of a RemovableSelectionsList with a specified label option. Data passed in
+ * has the shape of _{ id: number; label: string; preferredLabel: string; }_, where the
+ * content in _preferredLabel_ is being rendered for each list item's label here.
+ */
+export const SpecifiedLabelExample: Story = {
+  render: () => {
+    const SpecifiedLabelWrapper = () => {
+      const [data, setData] = React.useState(diffLabelListItems);
+
+      const handleRemove = (item: RemovableItem) => {
+        setData([...data].filter((data) => data.id !== item.id));
+      };
+
+      const resetList = () => {
+        setData([...diffLabelListItems]);
+      };
+
+      return (
+        <>
+          <RemovableSelectionsList
+            headerText="Linodes to remove"
+            noDataText="No Linodes available"
+            onRemove={handleRemove}
+            preferredDataLabel="preferredLabel"
+            selectionData={data}
+          />
+          <Button onClick={resetList} sx={{ marginTop: 2 }}>
+            Reset list
+          </Button>
+        </>
+      );
+    };
+
+    return <SpecifiedLabelWrapper />;
+  },
+};
+
+/**
+ * Example of a RemovableSelectionsList with a custom height and width
+ */
+export const CustomHeightAndWidth: Story = {
+  render: () => (
+    <DefaultRemovableSelectionsListWrapper maxHeight={300} maxWidth={200} />
+  ),
+};
+
+/**
+ * Example of a RemovableSelectionsList with no data to remove
+ */
+export const NoDataExample: Story = {
+  args: {
+    headerText: 'Linodes to remove',
+    noDataText: 'No Linodes available',
+    onRemove: (_) => {},
+    selectionData: [],
+  },
+  render: (args) => {
+    return <RemovableSelectionsList {...args} />;
+  },
+};
+
+const meta: Meta<typeof RemovableSelectionsList> = {
+  component: RemovableSelectionsList,
+  title: 'Components/RemovableSelectionsList',
+};
+
+export default meta;

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

@@ -0,0 +1,84 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { RemovableSelectionsList } from './RemovableSelectionsList';
+
+const defaultList = Array.from({ length: 5 }, (_, index) => {
+  const num = index + 1;
+  return {
+    id: num,
+    label: `my-linode-${num}`,
+    preferredLabel: `my-linode-preferred-${num}`,
+  };
+});
+
+const diffLabelList = Array.from({ length: 5 }, (_, index) => {
+  const num = index + 1;
+  return {
+    id: num,
+    label: `my-linode-${num}`,
+    preferredLabel: `my-linode-preferred-${num}`,
+  };
+});
+
+const props = {
+  headerText: 'Linodes to remove',
+  noDataText: 'No Linodes available',
+  onRemove: jest.fn(),
+  selectionData: defaultList,
+};
+
+describe('Removable Selections List', () => {
+  it('should render the list correctly', () => {
+    const screen = renderWithTheme(<RemovableSelectionsList {...props} />);
+    const header = screen.getByText('Linodes to remove');
+    expect(header).toBeVisible();
+
+    for (let i = 0; i < 5; i++) {
+      const data = screen.getByText(`my-linode-${i + 1}`);
+      expect(data).toBeVisible();
+      const removeButton = screen.getByLabelText(`remove my-linode-${i + 1}`);
+      expect(removeButton).toBeInTheDocument();
+    }
+  });
+
+  it('should display the no data text if there is no data', () => {
+    const screen = renderWithTheme(
+      <RemovableSelectionsList {...props} selectionData={[]} />
+    );
+    const header = screen.getByText('Linodes to remove');
+    expect(header).toBeVisible();
+    const removable = screen.getByText('No Linodes available');
+    expect(removable).toBeVisible();
+  });
+
+  it('should render the preferred label option if that is provided', () => {
+    const screen = renderWithTheme(
+      <RemovableSelectionsList
+        {...props}
+        preferredDataLabel="preferredLabel"
+        selectionData={diffLabelList}
+      />
+    );
+    const header = screen.getByText('Linodes to remove');
+    expect(header).toBeVisible();
+
+    for (let i = 0; i < 5; i++) {
+      const data = screen.getByText(`my-linode-preferred-${i + 1}`);
+      expect(data).toBeVisible();
+      const removeButton = screen.getByLabelText(
+        `remove my-linode-preferred-${i + 1}`
+      );
+      expect(removeButton).toBeInTheDocument();
+    }
+  });
+
+  it('should call the onRemove function', () => {
+    const screen = renderWithTheme(<RemovableSelectionsList {...props} />);
+    const removeButton = screen.getByLabelText(`remove my-linode-1`);
+    fireEvent.click(removeButton);
+    expect(props.onRemove).toHaveBeenCalled();
+  });
+});