feat: [M3-7829] - Linode Clone UI refinements

packages/manager/.changeset/pr-10280-added-1710363273220.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Linode Clone UI refinements ([#10280](https://github.com/linode/manager/pull/10280))

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

@@ -1,6 +1,8 @@
 import Grid from '@mui/material/Unstable_Grid2';
 import React from 'react';
 
+import { Typography } from 'src/components/Typography';
+
 import { SelectLinodeCard } from './SelectLinodeCard';
 import { RenderLinodeProps } from './SelectLinodePanel';
 
@@ -11,16 +13,20 @@ export const SelectLinodeCards = ({
   selectedLinodeId,
 }: RenderLinodeProps) => (
   <Grid container spacing={2}>
-    {linodes.map((linode) => (
-      <SelectLinodeCard
-        handleSelection={() =>
-          handleSelection(linode.id, linode.type, linode.specs.disk)
-        }
-        disabled={disabled}
-        key={linode.id}
-        linode={linode}
-        selected={linode.id == selectedLinodeId}
-      />
-    ))}
+    {linodes.length > 0 ? (
+      linodes.map((linode) => (
+        <SelectLinodeCard
+          handleSelection={() =>
+            handleSelection(linode.id, linode.type, linode.specs.disk)
+          }
+          disabled={disabled}
+          key={linode.id}
+          linode={linode}
+          selected={linode.id == selectedLinodeId}
+        />
+      ))
+    ) : (
+      <Typography padding={1}>No results</Typography>
+    )}
   </Grid>
 );

packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.test.tsx

@@ -1,4 +1,3 @@
-import { waitForElementToBeRemoved } from '@testing-library/react';
 import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
@@ -9,8 +8,6 @@ import { renderWithTheme, wrapWithTableBody } from 'src/utilities/testHelpers';
 
 import { SelectLinodeRow } from './SelectLinodeRow';
 
-const loadingTestId = 'circle-progress';
-
 describe('SelectLinodeRow', () => {
   const handlePowerOff = vi.fn();
   const handleSelection = vi.fn();
@@ -31,28 +28,18 @@ describe('SelectLinodeRow', () => {
       })
     );
 
-    const {
-      findByText,
-      getAllByRole,
-      getByTestId,
-      getByText,
-    } = renderWithTheme(
+    const { findByText, getAllByRole, getByText } = renderWithTheme(
       wrapWithTableBody(
         <SelectLinodeRow
           handlePowerOff={handlePowerOff}
           handleSelection={handleSelection}
-          linodeId={linode1.id}
+          linode={linode1}
           selected
           showPowerActions
         />
       )
     );
 
-    // Loading state should render
-    expect(getByTestId(loadingTestId)).toBeInTheDocument();
-
-    await waitForElementToBeRemoved(getByTestId(loadingTestId));
-
     getByText(linode1.label);
     getByText('Running');
     await findByText('Debian 10');
@@ -87,23 +74,18 @@ describe('SelectLinodeRow', () => {
       })
     );
 
-    const { findByText, getByTestId, getByText, queryByText } = renderWithTheme(
+    const { findByText, getByText, queryByText } = renderWithTheme(
       wrapWithTableBody(
         <SelectLinodeRow
           handlePowerOff={handlePowerOff}
           handleSelection={handleSelection}
-          linodeId={linode1.id}
+          linode={linode1}
           selected
           showPowerActions
         />
       )
     );
 
-    // Loading state should render
-    expect(getByTestId(loadingTestId)).toBeInTheDocument();
-
-    await waitForElementToBeRemoved(getByTestId(loadingTestId));
-
     getByText(linode1.label);
     getByText('Offline');
     await findByText('Debian 10');
@@ -131,23 +113,18 @@ describe('SelectLinodeRow', () => {
       })
     );
 
-    const { findByText, getByTestId, getByText, queryByText } = renderWithTheme(
+    const { findByText, getByText, queryByText } = renderWithTheme(
       wrapWithTableBody(
         <SelectLinodeRow
           handlePowerOff={handlePowerOff}
           handleSelection={handleSelection}
-          linodeId={linode1.id}
+          linode={linode1}
           selected
           showPowerActions={false}
         />
       )
     );
 
-    // Loading state should render
-    expect(getByTestId(loadingTestId)).toBeInTheDocument();
-
-    await waitForElementToBeRemoved(getByTestId(loadingTestId));
-
     getByText(linode1.label);
     getByText('Running');
     await findByText('Debian 10');

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

@@ -1,37 +1,31 @@
-import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import { useTheme } from '@mui/material';
-import * as React from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import * as React from 'react';
 
-import { Box } from 'src/components/Box';
-import { CircleProgress } from 'src/components/CircleProgress';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
-import { Link } from 'src/components/Link';
 import { OrderByProps } from 'src/components/OrderBy';
 import { Radio } from 'src/components/Radio/Radio';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell, TableCellProps } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
-import { Typography } from 'src/components/Typography';
 import { getLinodeIconStatus } from 'src/features/Linodes/LinodesLanding/utils';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useImageQuery } from 'src/queries/images';
-import {
-  queryKey as linodesQueryKey,
-  useLinodeQuery,
-} from 'src/queries/linodes/linodes';
+import { queryKey as linodesQueryKey } from 'src/queries/linodes/linodes';
 import { useTypeQuery } from 'src/queries/types';
 import { capitalizeAllWords } from 'src/utilities/capitalize';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 
 import { RegionIndicator } from '../../LinodesLanding/RegionIndicator';
 
+import type { Linode } from '@linode/api-v4/lib/linodes/types';
+
 interface Props {
   disabled?: boolean;
   handlePowerOff: () => void;
   handleSelection: () => void;
-  linodeId: number;
+  linode: Linode;
   selected: boolean;
   showPowerActions: boolean;
 }
@@ -42,33 +36,27 @@ export const SelectLinodeRow = (props: Props) => {
     disabled,
     handlePowerOff,
     handleSelection,
-    linodeId,
+    linode,
     selected,
     showPowerActions,
   } = props;
 
   const theme = useTheme();
 
-  const {
-    data: linode,
-    error: linodeError,
-    isLoading: linodeLoading,
-  } = useLinodeQuery(linodeId);
-
   const { data: linodeType } = useTypeQuery(
-    linode?.type ?? '',
-    Boolean(linode?.type)
+    linode.type ?? '',
+    Boolean(linode.type)
   );
 
   const { data: linodeImage } = useImageQuery(
-    linode?.image ?? '',
-    Boolean(linode?.image)
+    linode.image ?? '',
+    Boolean(linode.image)
   );
 
   const isLinodesGrantReadOnly = useIsResourceRestricted({
     grantLevel: 'read_only',
     grantType: 'linode',
-    id: linode?.id,
+    id: linode.id,
   });
 
   const isDisabled = disabled || isLinodesGrantReadOnly;
@@ -80,40 +68,11 @@ export const SelectLinodeRow = (props: Props) => {
       queryClient.invalidateQueries([
         linodesQueryKey,
         'linode',
-        linodeId,
+        linode.id,
         'configs',
       ]);
     }
-  }, [linode, linodeId, queryClient]);
-
-  if (linodeLoading || !linode) {
-    return (
-      <TableRow>
-        <TableCell colSpan={numCols}>
-          <CircleProgress mini />
-        </TableCell>
-      </TableRow>
-    );
-  }
-
-  if (linodeError) {
-    return (
-      <TableRow data-testid="subnet-linode-row-error">
-        <TableCell colSpan={numCols} style={{ paddingLeft: 10 }}>
-          <Box alignItems="center" display="flex">
-            <ErrorOutline
-              data-qa-error-icon
-              sx={(theme) => ({ color: theme.color.red, marginRight: 1 })}
-            />
-            <Typography>
-              There was an error loading{' '}
-              <Link to={`/linodes/${linodeId}`}>Linode {linodeId}</Link>
-            </Typography>
-          </Box>
-        </TableCell>
-      </TableRow>
-    );
-  }
+  }, [linode, queryClient]);
 
   const iconStatus = getLinodeIconStatus(linode.status);
   const isRunning = linode.status == 'running';

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

@@ -48,7 +48,7 @@ export const SelectLinodeTable = ({
               disabled={disabled}
               handlePowerOff={() => handlePowerOff(linode.id)}
               key={linode.id}
-              linodeId={linode.id}
+              linode={linode}
               showPowerActions={showPowerActions}
             />
           ))