fix: renterd dialogs, bucket policy, delete

.changeset/lovely-teachers-move.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed an issue where selecting a bucket context menu option would also navigate into the bucket. Closes https://github.com/SiaFoundation/renterd/issues/1277

.changeset/tender-pants-decide.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+Fixed an issue that broke some dialogs including the bucket policy and bucket delete dialogs. Closes https://github.com/SiaFoundation/renterd/issues/1277

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

@@ -13,5 +13,5 @@ export async function login({ page }: { page: Page }) {
     process.env.HOSTD_E2E_TEST_API_PASSWORD
   )
   await page.locator('input[name=password]').press('Enter')
-  await expect(page.locator('#navbar').getByText('Overview')).toBeVisible()
+  await expect(page.getByTestId('navbar').getByText('Overview')).toBeVisible()
 }

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

@@ -2,5 +2,7 @@ import { Page, expect } from '@playwright/test'
 
 export async function navigateToConfig({ page }: { page: Page }) {
   await page.getByLabel('Configuration').click()
-  await expect(page.locator('#navbar').getByText('Configuration')).toBeVisible()
+  await expect(
+    page.getByTestId('navbar').getByText('Configuration')
+  ).toBeVisible()
 }

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

@@ -2,5 +2,5 @@ import { Page, expect } from '@playwright/test'
 
 export async function navigateToDashboard({ page }: { page: Page }) {
   await page.getByLabel('Overview').click()
-  await expect(page.locator('#navbar').getByText('Overview')).toBeVisible()
+  await expect(page.getByTestId('navbar').getByText('Overview')).toBeVisible()
 }

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

@@ -3,5 +3,5 @@ import { login } from '../fixtures/login'
 
 test('login', async ({ page }) => {
   await login({ page })
-  await expect(page.locator('#navbar').getByText('Overview')).toBeVisible()
+  await expect(page.getByTestId('navbar').getByText('Overview')).toBeVisible()
 })

apps/renterd-e2e/src/fixtures/buckets.ts

@@ -0,0 +1,47 @@
+import { Page, expect } from '@playwright/test'
+import { navigateToBuckets } from './navigateToBuckets'
+import { fillTextInputByName } from './textInput'
+import { clearToasts } from './clearToasts'
+
+export async function createBucket(page: Page, name: string) {
+  await navigateToBuckets({ page })
+  await expect(page.getByTestId('navbar').getByText('Buckets')).toBeVisible()
+  await page.getByText('Create bucket').click()
+  await fillTextInputByName(page, 'name', name)
+  await page.locator('input[name=name]').press('Enter')
+  await expect(page.getByRole('dialog')).toBeHidden()
+  await expect(page.getByText('Bucket created')).toBeVisible()
+  await clearToasts({ page })
+  await expect(page.getByRole('cell', { name })).toBeVisible()
+}
+
+export async function deleteBucket(page: Page, name: string) {
+  await openBucketContextMenu(page, name)
+  await page.getByRole('menuitem', { name: 'Delete bucket' }).click()
+  await fillTextInputByName(page, 'name', name)
+  await page.locator('input[name=name]').press('Enter')
+  await expect(page.getByRole('dialog')).toBeHidden()
+  await bucketNotInList(page, name)
+}
+
+export async function deleteBucketIfExists(page: Page, name: string) {
+  const doesBucketExist = await page
+    .getByRole('table')
+    .getByText(name)
+    .isVisible()
+  if (doesBucketExist) {
+    await deleteBucket(page, name)
+  }
+}
+
+export async function openBucketContextMenu(page: Page, name: string) {
+  await page.getByRole('row', { name }).getByRole('button').first().click()
+}
+
+export async function bucketInList(page: Page, name: string) {
+  await expect(page.getByRole('table').getByText(name)).toBeVisible()
+}
+
+export async function bucketNotInList(page: Page, name: string) {
+  await expect(page.getByRole('table').getByText(name)).toBeHidden()
+}

apps/renterd-e2e/src/fixtures/login.ts

@@ -13,5 +13,5 @@ export async function login({ page }: { page: Page }) {
     process.env.RENTERD_E2E_TEST_API_PASSWORD
   )
   await page.locator('input[name=password]').press('Enter')
-  await expect(page.locator('#navbar').getByText('Buckets')).toBeVisible()
+  await expect(page.getByTestId('navbar').getByText('Buckets')).toBeVisible()
 }

apps/renterd-e2e/src/fixtures/navigateToBuckets.ts

@@ -2,5 +2,5 @@ import { Page, expect } from '@playwright/test'
 
 export async function navigateToBuckets({ page }: { page: Page }) {
   await page.getByLabel('Files').click()
-  await expect(page.locator('#navbar').getByText('Buckets')).toBeVisible()
+  await expect(page.getByTestId('navbar').getByText('Buckets')).toBeVisible()
 }

apps/renterd-e2e/src/fixtures/navigateToConfig.ts

@@ -2,5 +2,7 @@ import { Page, expect } from '@playwright/test'
 
 export async function navigateToConfig({ page }: { page: Page }) {
   await page.getByLabel('Configuration').click()
-  await expect(page.locator('#navbar').getByText('Configuration')).toBeVisible()
+  await expect(
+    page.getByTestId('navbar').getByText('Configuration')
+  ).toBeVisible()
 }

apps/renterd-e2e/src/specs/buckets.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+import { navigateToBuckets } from '../fixtures/navigateToBuckets'
+import { login } from '../fixtures/login'
+import {
+  bucketInList,
+  createBucket,
+  deleteBucket,
+  deleteBucketIfExists,
+  openBucketContextMenu,
+} from '../fixtures/buckets'
+
+test('can change a buckets policy', async ({ page }) => {
+  await login({ page })
+  await navigateToBuckets({ page })
+  await openBucketContextMenu(page, 'default')
+  await page.getByRole('menuitem', { name: 'Change policy' }).click()
+  await page.getByRole('heading', { name: 'Change Policy: default' }).click()
+  await page.getByRole('combobox').selectOption('public')
+  await page.getByRole('button', { name: 'Update policy' }).click()
+  await expect(page.getByText('Bucket policy has been updated')).toBeVisible()
+  await bucketInList(page, 'default')
+})
+
+test('can create and delete a bucket', async ({ page }) => {
+  await login({ page })
+  await deleteBucketIfExists(page, 'my-new-bucket')
+  await createBucket(page, 'my-new-bucket')
+  await deleteBucket(page, 'my-new-bucket')
+})

apps/renterd-e2e/src/specs/login.spec.ts

@@ -3,5 +3,5 @@ import { login } from '../fixtures/login'
 
 test('login', async ({ page }) => {
   await login({ page })
-  await expect(page.locator('#navbar').getByText('Buckets')).toBeVisible()
+  await expect(page.getByTestId('navbar').getByText('Buckets')).toBeVisible()
 })

apps/renterd/components/Files/BucketContextMenu.tsx

@@ -21,7 +21,12 @@ export function BucketContextMenu({ name }: Props) {
           <BucketIcon size={16} />
         </Button>
       }
-      contentProps={{ align: 'start' }}
+      contentProps={{
+        align: 'start',
+        onClick: (e) => {
+          e.stopPropagation()
+        },
+      }}
     >
       <DropdownMenuLabel>Actions</DropdownMenuLabel>
       <DropdownMenuItem

apps/renterd/contexts/config/useAutopilotEvaluations.tsx

@@ -5,12 +5,7 @@ import {
 import { transformUp } from './transformUp'
 import { Resources, checkIfAllResourcesLoaded } from './resources'
 import BigNumber from 'bignumber.js'
-import {
-  ConfigViewMode,
-  RecommendationItem,
-  SettingsData,
-  getAdvancedDefaults,
-} from './types'
+import { RecommendationItem, SettingsData, getAdvancedDefaults } from './types'
 import { UseFormReturn } from 'react-hook-form'
 import { useMemo } from 'react'
 import { transformDownGouging } from './transformDown'
@@ -23,19 +18,20 @@ export function useAutopilotEvaluations({
   form,
   resources,
   isAutopilotEnabled,
-  configViewMode,
   estimatedSpendingPerMonth,
 }: {
   form: UseFormReturn<SettingsData>
   resources: Resources
   isAutopilotEnabled: boolean
-  configViewMode: ConfigViewMode
   estimatedSpendingPerMonth: BigNumber
 }) {
   const values = form.watch()
   const renterdState = useBusState()
 
   const hasDataToEvaluate = useMemo(() => {
+    if (!isAutopilotEnabled) {
+      return false
+    }
     if (!checkIfAllResourcesLoaded(resources)) {
       return false
     }
@@ -46,7 +42,7 @@ export function useAutopilotEvaluations({
       return false
     }
     return true
-  }, [form.formState.isValid, resources, renterdState.data])
+  }, [isAutopilotEnabled, form.formState.isValid, resources, renterdState.data])
 
   // We need to pass valid settings data into transformUp to get the payloads.
   // The form can be invalid or have empty fields depending on the mode, so we

apps/renterd/contexts/config/useForm.tsx

@@ -68,7 +68,6 @@ export function useForm({ resources }: { resources: Resources }) {
     form,
     resources,
     isAutopilotEnabled,
-    configViewMode,
     estimatedSpendingPerMonth,
   })
 

apps/renterd/contexts/dialog.tsx

@@ -149,7 +149,7 @@ export function Dialogs() {
         address={wallet.data?.address}
         isValidating={wallet.isValidating}
         open={dialog === 'addressDetails'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <RenterdTransactionDetailsDialog />
       <SyncerConnectPeerDialog
@@ -159,60 +159,60 @@ export function Dialogs() {
             payload: address,
           })
         }
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <FilesBucketCreateDialog
         open={dialog === 'filesCreateBucket'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <FilesBucketDeleteDialog
         open={dialog === 'filesDeleteBucket'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <FilesBucketPolicyDialog
         open={dialog === 'filesBucketPolicy'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <FilesCreateDirectoryDialog
         open={dialog === 'filesCreateDirectory'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <FilesSearchDialog
         open={dialog === 'filesSearch'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <FileRenameDialog
         id={id}
         open={dialog === 'fileRename'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <HostsAllowBlockDialog
         open={dialog === 'hostsManageAllowBlock'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <HostsFilterAddressDialog
         open={dialog === 'hostsFilterAddress'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <HostsFilterPublicKeyDialog
         open={dialog === 'hostsFilterPublicKey'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <ContractsFilterAddressDialog
         open={dialog === 'contractsFilterAddress'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <ContractsFilterContractSetDialog
         open={dialog === 'contractsFilterContractSet'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <ContractsFilterPublicKeyDialog
         open={dialog === 'contractsFilterPublicKey'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <KeysCreateDialog
         open={dialog === 'keysCreate'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
+        onOpenChange={onOpenChange}
       />
       <ConfirmDialog
         open={dialog === 'confirm'}

apps/walletd-e2e/src/fixtures/login.ts

@@ -13,5 +13,5 @@ export async function login({ page }: { page: Page }) {
     process.env.WALLETD_E2E_TEST_API_PASSWORD
   )
   await page.locator('input[name=password]').press('Enter')
-  await expect(page.locator('#navbar').getByText('Wallets')).toBeVisible()
+  await expect(page.getByTestId('navbar').getByText('Wallets')).toBeVisible()
 }

libs/design-system/src/app/AppNavbar.tsx

@@ -14,7 +14,7 @@ export function AppNavbar({ title, nav, stats, actions, after }: Props) {
   return (
     <>
       <div
-        id="navbar"
+        data-testid="navbar"
         className="flex items-center gap-2 px-6 h-14 z-10 bg-white dark:bg-graydark-50 border-b border-gray-500 dark:border-graydark-500"
       >
         {title ? (