upcoming: [M3-7580] - Add list view for Linode Clone/Backup

packages/manager/.changeset/pr-10182-upcoming-features-1707859324148.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+List view for Linode Clone and Create from Backup ([#10182](https://github.com/linode/manager/pull/10182))

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -85,7 +85,8 @@ export const DebouncedSearchTextField = React.memo(
               <CircleProgress mini={true} />
             </InputAdornment>
           ) : (
-            clearable && (
+            clearable &&
+            textFieldValue && (
               <IconButton
                 aria-label="Clear"
                 onClick={() => setTextFieldValue('')}

packages/manager/src/components/InlineMenuAction/InlineMenuAction.tsx

@@ -8,6 +8,8 @@ import { StyledActionButton } from 'src/components/Button/StyledActionButton';
 interface InlineMenuActionProps {
   /** Required action text */
   actionText: string;
+  /** Optional height when displayed as a button */
+  buttonHeight?: number;
   /** Optional class names */
   className?: string;
   /** Optional disabled */
@@ -27,6 +29,7 @@ interface InlineMenuActionProps {
 export const InlineMenuAction = (props: InlineMenuActionProps) => {
   const {
     actionText,
+    buttonHeight,
     className,
     disabled,
     href,
@@ -53,6 +56,7 @@ export const InlineMenuAction = (props: InlineMenuActionProps) => {
       disabled={disabled}
       loading={loading}
       onClick={onClick}
+      sx={buttonHeight != undefined ? { height: buttonHeight } : {}}
       tooltipAnalyticsEvent={tooltipAnalyticsEvent}
       tooltipText={tooltip}
       {...rest}

packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectCards.tsx

@@ -0,0 +1,28 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import React from 'react';
+
+import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
+
+import { RenderLinodeProps } from './SelectLinodePanel';
+
+export const SelectCards = ({
+  disabled,
+  handleSelection,
+  orderBy: { data: linodes },
+  selectedLinodeId,
+}: RenderLinodeProps) => (
+  <Grid container spacing={2}>
+    {linodes.map((linode) => (
+      <SelectionCard
+        onClick={() => {
+          handleSelection(linode.id, linode.type, linode.specs.disk);
+        }}
+        checked={linode.id === Number(selectedLinodeId)}
+        disabled={disabled}
+        heading={linode.heading}
+        key={`selection-card-${linode.id}`}
+        subheadings={linode.subHeadings}
+      />
+    ))}
+  </Grid>
+);