feat(renterd): generate a bug report

.changeset/kind-waves-sin.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/react-icons': minor
+---
+
+Added BugIcon.

.changeset/large-games-love.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+There is now an option to generate a metadata debug report for bug reporting purposes. It can be accessed from the sidenav and cmd+k menu. Closes https://github.com/SiaFoundation/renterd/issues/1119 Closes https://github.com/SiaFoundation/renterd/issues/1279

.changeset/perfect-beds-grab.md

@@ -0,0 +1,6 @@
+---
+'hostd': minor
+'renterd': minor
+---
+
+The cmd+k menu / command palette dialog now announces itself via assistive technology.

.changeset/swift-otters-lick.md

@@ -0,0 +1,6 @@
+---
+'@siafoundation/renterd-react': minor
+'@siafoundation/renterd-types': minor
+---
+
+The alerts API limit and skip params are now optional.

apps/hostd/components/CmdKDialog/index.tsx

@@ -34,6 +34,8 @@ export function CmdKDialog({ open, onOpenChange, setOpen }: Props) {
     <>
       <Dialog
         open={open}
+        title="Command palette"
+        titleVisuallyHidden
         onOpenChange={onOpenChange}
         contentVariants={{
           className: '!absolute !p-1 w-[450px] top-[200px]',

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

@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test'
+import { afterTest, beforeTest } from '../fixtures/beforeTest'
+import {
+  fillTextInputByName,
+  openCmdkMenu,
+  setSwitchByLabel,
+} from '@siafoundation/e2e'
+import fs from 'fs'
+import jszip from 'jszip'
+
+test.beforeEach(async ({ page }) => {
+  await beforeTest(page)
+})
+
+test.afterEach(async () => {
+  await afterTest()
+})
+
+test('generating a bug report', async ({ page }) => {
+  const cmdk = await openCmdkMenu(page)
+  await fillTextInputByName(page, 'cmdk-input', 'generate a bug report')
+  await expect(cmdk.locator('div[cmdk-item]')).toHaveCount(1)
+  await cmdk
+    .locator('div[cmdk-item]')
+    .getByText('generate a bug report')
+    .click()
+  const dialog = page.getByRole('dialog', {
+    name: 'Generate a bug report',
+  })
+
+  // Wait for the download event and capture it.
+  const [download] = await Promise.all([
+    page.waitForEvent('download'),
+    dialog.getByRole('button', { name: 'Generate' }).click(),
+  ])
+
+  // Check if the download file has the correct name.
+  const downloadPath = await download.path()
+  expect(download.suggestedFilename()).toBe('renterd-debug-report.zip')
+
+  // Verify contents of the zip.
+  const zipBuffer = fs.readFileSync(downloadPath)
+  const zip = await jszip.loadAsync(zipBuffer)
+  const fileNames = Object.keys(zip.files)
+  expect(fileNames).toContain('contracts.json')
+  expect(fileNames).toContain('alerts.json')
+  expect(fileNames).toContain('autopilot.json')
+  expect(fileNames).toContain('gouging.json')
+  expect(fileNames).toContain('upload.json')
+  expect(fileNames).toContain('pinned.json')
+
+  // Check the contents is json.
+  const alertsFileContent = await zip.file('alerts.json').async('string')
+  expect(alertsFileContent).toContain('{')
+
+  // Disabled some metadata and regenerate.
+  await setSwitchByLabel(page, 'autopilot', false)
+  await setSwitchByLabel(page, 'gouging', false)
+
+  // Wait for the download event and capture it.
+  const [download2] = await Promise.all([
+    page.waitForEvent('download'),
+    dialog.getByRole('button', { name: 'Generate' }).click(),
+  ])
+
+  // Check if the download file has the correct name.
+  const downloadPath2 = await download2.path()
+  expect(download2.suggestedFilename()).toBe('renterd-debug-report.zip')
+
+  // Verify contents of the zip.
+  const zipBuffer2 = fs.readFileSync(downloadPath2)
+  const zip2 = await jszip.loadAsync(zipBuffer2)
+  const fileNames2 = Object.keys(zip2.files)
+  expect(fileNames2).toContain('contracts.json')
+  expect(fileNames2).toContain('alerts.json')
+  expect(fileNames2).not.toContain('autopilot.json')
+  expect(fileNames2).not.toContain('gouging.json')
+  expect(fileNames2).toContain('upload.json')
+  expect(fileNames2).toContain('pinned.json')
+})

apps/renterd/components/CmdKDialog/index.tsx

@@ -34,6 +34,8 @@ export function CmdKDialog({ open, onOpenChange, setOpen }: Props) {
     <>
       <Dialog
         open={open}
+        title="Command palette"
+        titleVisuallyHidden
         onOpenChange={onOpenChange}
         contentVariants={{
           className: '!absolute !p-1 w-[450px] top-[200px]',

apps/renterd/components/CmdRoot/AppCmdGroup.tsx

@@ -102,6 +102,15 @@ export function AppCmdGroup({ currentPage, parentPage }: Props) {
       >
         Set theme to light
       </CommandItemSearch>
+      <CommandItemSearch
+        currentPage={currentPage}
+        commandPage={commandPage}
+        onSelect={() => {
+          openDialog('bugReport')
+        }}
+      >
+        Generate a bug report
+      </CommandItemSearch>
       <CommandItemSearch
         currentPage={currentPage}
         commandPage={commandPage}

apps/renterd/components/RenterdSidenav.tsx

@@ -6,12 +6,15 @@ import {
   BarsProgressIcon,
   BellIcon,
   KeyIcon,
+  BugIcon,
 } from '@siafoundation/react-icons'
 import { cx } from 'class-variance-authority'
 import { routes } from '../config/routes'
 import { useAlerts } from '../contexts/alerts'
+import { useDialog } from '../contexts/dialog'
 
 export function RenterdSidenav() {
+  const { openDialog } = useDialog()
   const { totals } = useAlerts()
   const onlyInfoAlerts = totals.all === totals.info
   return (
@@ -61,6 +64,9 @@ export function RenterdSidenav() {
           <BellIcon />
         </SidenavItem>
       </div>
+      <SidenavItem title="Bug report" onClick={() => openDialog('bugReport')}>
+        <BugIcon />
+      </SidenavItem>
     </>
   )
 }

apps/renterd/contexts/dialog.tsx

@@ -22,6 +22,7 @@ import { FilesBucketPolicyDialog } from '../dialogs/FilesBucketPolicyDialog'
 import { FilesBucketCreateDialog } from '../dialogs/FilesBucketCreateDialog'
 import { FileRenameDialog } from '../dialogs/FileRenameDialog'
 import { KeysCreateDialog } from '../components/Keys/KeysCreateDialog'
+import { DebugDialog } from '../dialogs/DebugDialog'
 
 export type DialogType =
   | 'cmdk'
@@ -46,6 +47,7 @@ export type DialogType =
   | 'filesSearch'
   | 'fileRename'
   | 'keysCreate'
+  | 'bugReport'
   | 'confirm'
 
 type ConfirmProps = {
@@ -212,6 +214,7 @@ export function Dialogs() {
         open={dialog === 'keysCreate'}
         onOpenChange={onOpenChange}
       />
+      <DebugDialog open={dialog === 'bugReport'} onOpenChange={onOpenChange} />
       <ConfirmDialog
         open={dialog === 'confirm'}
         params={confirm}