refactor(hostd): adjust resize volume validation, add test

apps/hostd-e2e/src/fixtures/volumes.ts

@@ -52,7 +52,10 @@ export async function deleteVolumeIfExists(
 }
 
 export async function openVolumeContextMenu(page: Page, name: string) {
-  await page.getByRole('row', { name }).getByRole('button').first().click()
+  await page
+    .getByRole('row', { name })
+    .getByLabel('volume context menu')
+    .click()
 }
 
 export async function volumeInList(page: Page, name: string) {

apps/hostd-e2e/src/specs/volumes.spec.ts

@@ -1,13 +1,14 @@
-import { test } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 import { navigateToVolumes } from '../fixtures/navigate'
 import {
   createVolume,
   deleteVolume,
-  deleteVolumeIfExists,
+  openVolumeContextMenu,
 } from '../fixtures/volumes'
 import { afterTest, beforeTest } from '../fixtures/beforeTest'
 import fs from 'fs'
 import os from 'os'
+import { fillTextInputByName } from '../fixtures/textInput'
 
 let dirPath = '/'
 
@@ -25,7 +26,23 @@ test.afterEach(async () => {
 test('can create and delete a volume', async ({ page }) => {
   const name = 'my-new-volume'
   await navigateToVolumes({ page })
-  await deleteVolumeIfExists(page, name, dirPath)
   await createVolume(page, name, dirPath)
   await deleteVolume(page, name, dirPath)
 })
+
+test('can resize volume', async ({ page }) => {
+  const name = 'my-new-volume'
+  await navigateToVolumes({ page })
+  await createVolume(page, name, dirPath)
+  await openVolumeContextMenu(page, `${dirPath}/${name}`)
+  await page.getByText('Resize').click()
+  await fillTextInputByName(page, 'size', '1300')
+  const dialog = page.getByRole('dialog')
+  await expect(dialog.getByText('Must be between 10.00 GB')).toBeVisible()
+  await fillTextInputByName(page, 'size', '13')
+  await expect(dialog.getByText('Must be between 10.00 GB')).toBeHidden()
+  await dialog.locator('input[name=size]').press('Enter')
+  await expect(dialog).toBeHidden()
+  await expect(page.getByText('Volume resizing')).toBeVisible()
+  await expect(page.getByText('resizing')).toBeVisible()
+})

apps/hostd/components/Volumes/VolumeContextMenu.tsx

@@ -35,7 +35,12 @@ export function VolumeContextMenu({ id, contentProps, buttonProps }: Props) {
   return (
     <DropdownMenu
       trigger={
-        <Button variant="ghost" icon="hover" {...buttonProps}>
+        <Button
+          variant="ghost"
+          icon="hover"
+          aria-label="volume context menu"
+          {...buttonProps}
+        >
           <CaretDown16 />
         </Button>
       }

apps/hostd/components/Volumes/index.tsx

@@ -51,6 +51,7 @@ export function Volumes() {
     >
       <div className="p-6 min-w-fit">
         <Table
+          testId="volumesTable"
           isLoading={isLoading}
           pageSize={20}
           data={dataset}

apps/hostd/dialogs/VolumeResizeDialog.tsx

@@ -57,11 +57,11 @@ function getFields(
       validation: {
         required: 'required',
         validate: {
-          between: (value: number) => {
+          between: (value?: BigNumber) => {
             const error = `Must be between ${humanBytes(
               GBToBytes(minSizeGB)
             )} and ${humanBytes(GBToBytes(maxSizeGB), { fixed: 3 })}`
-            return (value <= maxSizeGB && value >= minSizeGB) || error
+            return (value?.lte(maxSizeGB) && value?.gte(minSizeGB)) || error
           },
         },
       },