clean up a lot and test more

packages/manager/src/components/ImageSelect/DistributionIcon.test.tsx → packages/manager/src/components/DistributionIcon.test.tsx

@@ -19,9 +19,23 @@ describe('DistributionIcon', () => {
 
     expect(getByTestId('distro-icon')).toHaveClass('fl-rocky-linux');
   });
+  it('renders a generic "tux" when there is no value in the `distroIcons` map', () => {
+    const { getByTestId } = renderWithTheme(
+      <DistributionIcon distribution="hdshkgsvkguihsh" />
+    );
+
+    expect(getByTestId('distro-icon')).toHaveClass('fl-tux');
+  });
+  it('defaults to 1.8em', () => {
+    const { getByTestId } = renderWithTheme(
+      <DistributionIcon distribution="Alpine" />
+    );
+
+    expect(getByTestId('distro-icon')).toHaveStyle({ fontSize: '1.8em' });
+  });
   it('allows size to be overwritten', () => {
     const { getByTestId } = renderWithTheme(
-      <DistributionIcon distribution="Rocky" size="14px" />
+      <DistributionIcon distribution="Alpine" size="14px" />
     );
 
     expect(getByTestId('distro-icon')).toHaveStyle({ fontSize: '14px' });

packages/manager/src/components/ImageSelect/DistributionIcon.tsx → packages/manager/src/components/DistributionIcon.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { distroIcons } from './icons';
-
 import type { Image } from '@linode/api-v4';
 
 interface Props {
@@ -24,13 +22,36 @@ interface Props {
 export const DistributionIcon = (props: Props) => {
   const { distribution, size } = props;
 
+  const className = distribution
+    ? `fl-${distroIcons[distribution] ?? 'tux'}`
+    : `fl-tux`;
+
   return (
     <i
-      className={
-        distribution ? `fl-${distroIcons[distribution] ?? 'tux'}` : `fl-tux`
-      }
+      className={className}
       data-testid="distro-icon"
       style={{ fontSize: size ?? '1.8em' }}
     />
   );
 };
+
+/**
+ * Maps an Image's `vendor` field to a font-logos className
+ *
+ * @see https://github.com/Lukas-W/font-logos
+ */
+export const distroIcons = {
+  AlmaLinux: 'almalinux',
+  Alpine: 'alpine',
+  Arch: 'archlinux',
+  CentOS: 'centos',
+  CoreOS: 'coreos',
+  Debian: 'debian',
+  Fedora: 'fedora',
+  Gentoo: 'gentoo',
+  Kali: 'kali-linux',
+  Rocky: 'rocky-linux',
+  Slackware: 'slackware',
+  Ubuntu: 'ubuntu',
+  openSUSE: 'opensuse',
+};

packages/manager/src/components/ImageSelect/ImageSelect.tsx

@@ -6,8 +6,8 @@ import { equals, groupBy } from 'ramda';
 import * as React from 'react';
 
 import Select, { GroupType, Item } from 'src/components/EnhancedSelect';
-import { BaseSelectProps } from 'src/components/EnhancedSelect/Select';
 import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue';
+import { BaseSelectProps } from 'src/components/EnhancedSelect/Select';
 import { ImageOption } from 'src/components/ImageSelect/ImageOption';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
@@ -17,7 +17,7 @@ import { arePropsEqual } from 'src/utilities/arePropsEqual';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getSelectedOptionFromGroupedOptions } from 'src/utilities/getSelectedOptionFromGroupedOptions';
 
-import { distroIcons } from './icons';
+import { distroIcons } from '../DistributionIcon';
 
 export type Variant = 'all' | 'private' | 'public';
 

packages/manager/src/components/ImageSelectv2/ImageOptionv2.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { imageFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ImageOptionv2 } from './ImageOptionv2';
+
+describe('ImageOptionv2', () => {
+  it('renders the image label', () => {
+    const image = imageFactory.build();
+
+    const { getByText } = renderWithTheme(
+      <ImageOptionv2 image={image} isSelected={false} listItemProps={{}} />
+    );
+
+    expect(getByText(image.label)).toBeVisible();
+  });
+  it('renders a distribution icon', () => {
+    const image = imageFactory.build();
+
+    const { getByTestId } = renderWithTheme(
+      <ImageOptionv2 image={image} isSelected={false} listItemProps={{}} />
+    );
+
+    expect(getByTestId('distro-icon')).toBeVisible();
+  });
+  it('renders a metadata (cloud-init) icon if the flag is on and the image supports cloud-init', () => {
+    const image = imageFactory.build({ capabilities: ['cloud-init'] });
+
+    const { getByLabelText } = renderWithTheme(
+      <ImageOptionv2 image={image} isSelected={false} listItemProps={{}} />,
+      { flags: { metadata: true } }
+    );
+
+    expect(
+      getByLabelText('This image is compatible with cloud-init.')
+    ).toBeVisible();
+  });
+});

packages/manager/src/components/ImageSelect/ImageOptionv2.tsx → packages/manager/src/components/ImageSelectv2/ImageOptionv2.tsx

@@ -4,10 +4,10 @@ import React from 'react';
 import { useFlags } from 'src/hooks/useFlags';
 
 import { SelectedIcon } from '../Autocomplete/Autocomplete.styles';
+import { DistributionIcon } from '../DistributionIcon';
 import { Stack } from '../Stack';
-import { TooltipIcon } from '../TooltipIcon';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
-import { DistributionIcon } from './DistributionIcon';
 
 import type { Image } from '@linode/api-v4';
 
@@ -27,27 +27,12 @@ export const ImageOptionv2 = ({ image, isSelected, listItemProps }: Props) => {
         <Typography color="inherit">{image.label}</Typography>
         <Stack flexGrow={1} />
         {flags.metadata && image.capabilities.includes('cloud-init') && (
-          <TooltipIcon
-            icon={<DescriptionOutlinedIcon />}
-            status="other"
-            sxTooltipIcon={tooltipIconSx}
-            text="This image is compatible with cloud-init."
-          />
+          <Tooltip title="This image is compatible with cloud-init.">
+            <DescriptionOutlinedIcon />
+          </Tooltip>
         )}
         {isSelected && <SelectedIcon visible />}
       </Stack>
     </li>
   );
 };
-
-const tooltipIconSx = {
-  '& svg': {
-    height: 20,
-    width: 20,
-  },
-  '&:hover': {
-    color: 'inherit',
-  },
-  color: 'inherit',
-  padding: 0,
-};

packages/manager/src/features/Linodes/LinodeCreatev2/tabs/Distributions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useController } from 'react-hook-form';
 
-import { ImageSelectv2 } from 'src/components/ImageSelect/ImageSelectv2';
+import { ImageSelectv2 } from 'src/components/ImageSelectv2/ImageSelectv2';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
 

packages/manager/src/features/Linodes/LinodeCreatev2/tabs/Images.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useController } from 'react-hook-form';
 
-import { ImageSelectv2 } from 'src/components/ImageSelect/ImageSelectv2';
+import { ImageSelectv2 } from 'src/components/ImageSelectv2/ImageSelectv2';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';