feat: [M3-8985] - Comments resolved.

linode · Dec 13, 2024 · 4f7c53c · 4f7c53c
1 parent bf72d0a
commit 4f7c53c
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 23 deletions.
diff --git a/packages/manager/src/features/Linodes/HighPerformanceVolumeIcon.tsx b/packages/manager/src/features/Linodes/HighPerformanceVolumeIcon.tsx
@@ -8,26 +8,26 @@ interface Props {
   linodeCapabilities?: LinodeCapabilities[];
 }
 
-function HighPerformanceVolumeIcon({ linodeCapabilities }: Props) {
+export function HighPerformanceVolumeIcon({ linodeCapabilities }: Props) {
   const isHighPerformanceVolume = !!linodeCapabilities?.includes(
     'Block Storage Performance B1'
   );
 
+  if (!isHighPerformanceVolume) {
+    return null;
+  }
+
   return (
-    isHighPerformanceVolume && (
-      <Tooltip arrow title="High Performance">
-        <IconButton
-          sx={{
-            border: '1px solid',
-            borderRadius: '50%',
-            padding: 0,
-          }}
-        >
-          <BoltIcon sx={{ fontSize: 12 }} />
-        </IconButton>
-      </Tooltip>
-    )
+    <Tooltip arrow title="High Performance">
+      <IconButton
+        sx={{
+          border: '1px solid',
+          borderRadius: '50%',
+          padding: 0,
+        }}
+      >
+        <BoltIcon sx={{ fontSize: 12 }} />
+      </IconButton>
+    </Tooltip>
   );
 }
-
-export default HighPerformanceVolumeIcon;
diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx
@@ -19,7 +19,7 @@ import { pluralize } from 'src/utilities/pluralize';
 
 import { EncryptedStatus } from '../Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable';
 import { encryptionStatusTestId } from '../Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable';
-import HighPerformanceVolumeIcon from './HighPerformanceVolumeIcon';
+import { HighPerformanceVolumeIcon } from './HighPerformanceVolumeIcon';
 import {
   StyledBodyGrid,
   StyledColumnLabelGrid,
@@ -156,7 +156,11 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
             </Grid>
             <Grid lg={6} sm={12} xs={6}>
               <Box
-                sx={{ alignItems: 'center', display: 'flex', gap: '0.25rem' }}
+                sx={(theme) => ({
+                  alignItems: 'center',
+                  display: 'flex',
+                  gap: theme.spacing(),
+                })}
               >
                 <Typography>
                   {pluralize('Volume', 'Volumes', numVolumes)}

diff --git a/packages/manager/src/features/Volumes/VolumeTableRow.test.tsx b/packages/manager/src/features/Volumes/VolumeTableRow.test.tsx
@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
@@ -174,4 +175,23 @@ describe('Volume table row - for linodes detail page', () => {
     // Make sure there is a detach button
     expect(getByText('Detach'));
   });
+
+  it('should show a high performance icon tooltip if Linode has the capability', async () => {
+    const { getByLabelText, getByText } = await renderWithThemeAndRouter(
+      wrapWithTableBody(
+        <VolumeTableRow
+          handlers={handlers}
+          isDetailsPageRow
+          linodeCapabilities={['Block Storage Performance B1']}
+          volume={attachedVolume}
+        />
+      )
+    );
+
+    const highPerformanceIcon = getByLabelText('High Performance');
+
+    expect(highPerformanceIcon).toBeVisible();
+    await userEvent.click(highPerformanceIcon);
+    await waitFor(() => expect(getByText('High Performance')).toBeVisible());
+  });
 });
diff --git a/packages/manager/src/features/Volumes/VolumeTableRow.tsx b/packages/manager/src/features/Volumes/VolumeTableRow.tsx
@@ -12,7 +12,7 @@ import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { useInProgressEvents } from 'src/queries/events/events';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 
-import HighPerformanceVolumeIcon from '../Linodes/HighPerformanceVolumeIcon';
+import { HighPerformanceVolumeIcon } from '../Linodes/HighPerformanceVolumeIcon';
 import {
   getDerivedVolumeStatusFromStatusAndEvent,
   getEventProgress,
@@ -119,11 +119,11 @@ export const VolumeTableRow = React.memo((props: Props) => {
           }}
         >
           <Box
-            sx={{
+            sx={(theme) => ({
               alignItems: 'center',
               display: 'flex',
-              gap: '0.25rem',
-            }}
+              gap: theme.spacing(),
+            })}
           >
             {volume.label}
             <HighPerformanceVolumeIcon

diff --git a/packages/manager/src/mocks/presets/crud/seeds/linodes.ts b/packages/manager/src/mocks/presets/crud/seeds/linodes.ts
@@ -18,7 +18,9 @@ export const linodesSeeder: MockSeeder = {
     const count = seedsCountMap[linodesSeeder.id] ?? 0;
     const linodeSeeds = seedWithUniqueIds<'linodes'>({
       dbEntities: await mswDB.getAll('linodes'),
-      seedEntities: linodeFactory.buildList(count),
+      seedEntities: linodeFactory.buildList(count, {
+        capabilities: ['Block Storage Performance B1'],
+      }),
     });
 
     const configs: [number, Config][] = linodeSeeds.map((linodeSeed) => {