Fix various issues on the Dashboard

app/ide-desktop/eslint.config.js

@@ -299,7 +299,10 @@ export default [
             'react/prop-types': 'off',
             'react/self-closing-comp': 'error',
             'react-hooks/rules-of-hooks': 'error',
-            'react-hooks/exhaustive-deps': 'error',
+            'react-hooks/exhaustive-deps': [
+                'error',
+                { additionalHooks: 'useOnScroll|useStickyTableHeaderOnScroll' },
+            ],
             'react/jsx-pascal-case': ['error', { allowNamespace: true }],
             // Prefer `interface` over `type`.
             '@typescript-eslint/consistent-type-definitions': 'error',

app/ide-desktop/lib/dashboard/README.md

@@ -3,6 +3,13 @@
 The dashboard is the entrypoint into the application. It includes project
 management, project sharing, and user accounts and authentication.
 
+## Further documentation
+
+Further documentation is provided in the `docs/` folder:
+
+- [Browser-specific behavior](./docs/browser_specific_behavior.md) details
+  behavior that is inconsistent between browsers and needs to be worked around.
+
 ## Folder structure
 
 - `mock/`: Overrides for specific files in `src/` when running Playwright tests.

app/ide-desktop/lib/dashboard/docs/browser_specific_behavior.md

@@ -0,0 +1,65 @@
+# Browser-specific behavior
+
+This document details behavior that is inconsistent between browsers and needs
+to be worked around.
+
+## List of inconsistent behaviors
+
+### Drag event missing coordinates
+
+Firefox sets `MouseEvent.pageX` and `MouseEvent.pageY` to `0` for `drag`
+events.
+
+#### Fix
+
+Pass the `drag` event handlers to `dragover` event as well, and wrap all `drag`
+event handlers in:
+
+````ts
+if (event.pageX !== 0 || event.pageY !== 0) {
+	// original body here
+}
+```
+
+#### Affected files
+
+- [`DragModal.tsx`](../src/modals/DragModal.tsx)
+
+### Drag event propagation in text inputs
+
+Text selection in text inputs DO NOT WORK on Firefox, when the text input is a
+child of an element with `draggable="true"`.
+See [Firefox bug 800050].
+To solve this problem, use `useDraggable` from
+[`dragAndDropHooks.ts`] on ALL elements that MAY contain a text input.
+
+[Firefox bug 800050]: https://bugzilla.mozilla.org/show_bug.cgi?id=800050
+
+#### Fix
+
+Merge `useDraggable` from [`dragAndDropHooks.ts`] on ALL elements that MAY
+contain a text input.
+
+It is recommended to use `aria.mergeProps` to combine these props with existing
+props.
+
+```tsx
+import * as dragAndDropHooks from "#/hooks/dragAndDropHooks.ts";
+
+const draggableProps = dragAndDropHooks.useDraggable();
+
+return <div {...draggableProps}></div>;
+````
+
+[`draggableHooks.ts`]: ../src/hooks/dragAndDropHooks.ts
+
+#### Affected browsers
+
+- Firefox (all versions)
+
+#### Affected files
+
+- [`EditableSpan.tsx`](../src/components/EditableSpan.tsx) - the text inputs
+  that are affected
+- [`AssetRow.tsx`](../src/components/dashboard/AssetRow.tsx) - fixes text
+  selection in `EditableSpan.tsx`

app/ide-desktop/lib/dashboard/e2e/actions.ts

@@ -184,12 +184,12 @@ export function locateTrashButton(page: test.Locator | test.Page) {
 
 /** Find a tick button (if any) on the current page. */
 export function locateEditingTick(page: test.Locator | test.Page) {
-  return page.getByAltText('Confirm Edit')
+  return page.getByLabel('Confirm Edit')
 }
 
 /** Find a cross button (if any) on the current page. */
 export function locateEditingCross(page: test.Locator | test.Page) {
-  return page.getByAltText('Cancel Edit')
+  return page.getByLabel('Cancel Edit')
 }
 
 /** Find labels in the "Labels" column of the assets table (if any) on the current page. */
@@ -793,18 +793,18 @@ async function mockDate({ page }: MockParams) {
     }`)
 }
 
-/**
- * Passes Terms and conditions dialog
- */
+/** Pass the Terms and conditions dialog. */
 export async function passTermsAndConditionsDialog({ page }: MockParams) {
   // wait for terms and conditions dialog to appear
   // but don't fail if it doesn't appear
   try {
-    // wait for terms and conditions dialog to appear
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    await page.waitForSelector('#terms-of-service-modal', { timeout: 500 })
-    await page.getByRole('checkbox').click()
-    await page.getByRole('button', { name: 'Accept' }).click()
+    await test.test.step('Accept Terms and Conditions', async () => {
+      // wait for terms and conditions dialog to appear
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      await page.waitForSelector('#terms-of-service-modal', { timeout: 500 })
+      await page.getByRole('checkbox').click()
+      await page.getByRole('button', { name: 'Accept' }).click()
+    })
   } catch (error) {
     // do nothing
   }

app/ide-desktop/lib/dashboard/e2e/api.ts

@@ -420,6 +420,11 @@ export async function mockApi({ page }: MockParams) {
         }
       }
     )
+    await page.route(BASE_URL + remoteBackendPaths.INVITATION_PATH + '*', async route => {
+      await route.fulfill({
+        json: { invitations: [] } satisfies backend.ListInvitationsResponseBody,
+      })
+    })
     await page.route(BASE_URL + remoteBackendPaths.INVITE_USER_PATH + '*', async route => {
       await route.fulfill()
     })

app/ide-desktop/lib/dashboard/e2e/assetPanel.spec.ts

@@ -34,7 +34,8 @@ test.test('asset panel contents', async ({ page }) => {
         permission: permissions.PermissionAction.own,
         user: {
           organizationId: defaultOrganizationId,
-          userId: defaultUserId,
+          // Using the default ID causes the asset to have a dynamic username, of course.
+          userId: backend.UserId(defaultUserId + '2'),
           name: username,
           email: backend.EmailAddress(email),
         },

app/ide-desktop/lib/dashboard/e2e/editAssetName.spec.ts

@@ -8,85 +8,80 @@ test.test.beforeEach(actions.mockAllAndLogin)
 test.test('edit name', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
   const mod = await actions.modModifier(page)
+  const row = assetRows.nth(0)
   const newName = 'foo bar baz'
 
   await actions.locateNewFolderIcon(page).click()
-  await actions.locateAssetRowName(assetRows.nth(0)).click({ modifiers: [mod] })
-  await actions.locateAssetRowName(assetRows.nth(0)).fill(newName)
-  await actions.locateEditingTick(assetRows.nth(0)).click()
-  await test.expect(assetRows).toHaveCount(1)
-  await test.expect(assetRows.nth(0)).toBeVisible()
-  await test.expect(assetRows.nth(0)).toHaveText(new RegExp('^' + newName))
+  await actions.locateAssetRowName(row).click({ modifiers: [mod] })
+  await actions.locateAssetRowName(row).fill(newName)
+  await actions.locateEditingTick(row).click()
+  await test.expect(row).toHaveText(new RegExp('^' + newName))
 })
 
 test.test('edit name (keyboard)', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
+  const row = assetRows.nth(0)
   const newName = 'foo bar baz quux'
 
   await actions.locateNewFolderIcon(page).click()
-  await actions.locateAssetRowName(assetRows.nth(0)).click()
+  await actions.locateAssetRowName(row).click()
   await actions.press(page, 'Mod+R')
-  await actions.locateAssetRowName(assetRows.nth(0)).fill(newName)
-  await actions.locateAssetRowName(assetRows.nth(0)).press('Enter')
-  await test.expect(assetRows).toHaveCount(1)
-  await test.expect(assetRows.nth(0)).toBeVisible()
-  await test.expect(assetRows.nth(0)).toHaveText(new RegExp('^' + newName))
+  await actions.locateAssetRowName(row).fill(newName)
+  await actions.locateAssetRowName(row).press('Enter')
+  await test.expect(row).toHaveText(new RegExp('^' + newName))
 })
 
 test.test('cancel editing name', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
   const mod = await actions.modModifier(page)
+  const row = assetRows.nth(0)
   const newName = 'foo bar baz'
 
   await actions.locateNewFolderIcon(page).click()
-  const oldName = (await actions.locateAssetRowName(assetRows.nth(0)).textContent()) ?? ''
-  await actions.locateAssetRowName(assetRows.nth(0)).click({ modifiers: [mod] })
-  await actions.locateAssetRowName(assetRows.nth(0)).fill(newName)
-  await actions.locateEditingCross(assetRows.nth(0)).click()
-  await test.expect(assetRows).toHaveCount(1)
-  await test.expect(assetRows.nth(0)).toBeVisible()
-  await test.expect(assetRows.nth(0)).toHaveText(new RegExp('^' + oldName))
+  const oldName = (await actions.locateAssetRowName(row).textContent()) ?? ''
+  await actions.locateAssetRowName(row).click({ modifiers: [mod] })
+  await actions.locateAssetRowName(row).fill(newName)
+  await actions.locateEditingCross(row).click()
+  await test.expect(row).toHaveText(new RegExp('^' + oldName))
 })
 
 test.test('cancel editing name (keyboard)', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
+  const row = assetRows.nth(0)
   const newName = 'foo bar baz quux'
 
   await actions.locateNewFolderIcon(page).click()
-  const oldName = (await actions.locateAssetRowName(assetRows.nth(0)).textContent()) ?? ''
-  await actions.locateAssetRowName(assetRows.nth(0)).click()
+  const oldName = (await actions.locateAssetRowName(row).textContent()) ?? ''
+  await actions.locateAssetRowName(row).click()
   await actions.press(page, 'Mod+R')
-  await actions.locateAssetRowName(assetRows.nth(0)).fill(newName)
-  await actions.locateAssetRowName(assetRows.nth(0)).press('Escape')
-  await test.expect(assetRows).toHaveCount(1)
-  await test.expect(assetRows.nth(0)).toBeVisible()
-  await test.expect(assetRows.nth(0)).toHaveText(new RegExp('^' + oldName))
+  await actions.locateAssetRowName(row).fill(newName)
+  await actions.locateAssetRowName(row).press('Escape')
+  await test.expect(row).toHaveText(new RegExp('^' + oldName))
 })
 
 test.test('change to blank name', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
   const mod = await actions.modModifier(page)
+  const row = assetRows.nth(0)
 
   await actions.locateNewFolderIcon(page).click()
-  const oldName = (await actions.locateAssetRowName(assetRows.nth(0)).textContent()) ?? ''
-  await actions.locateAssetRowName(assetRows.nth(0)).click({ modifiers: [mod] })
-  await actions.locateAssetRowName(assetRows.nth(0)).fill('')
-  await actions.locateEditingTick(assetRows.nth(0)).click()
-  await test.expect(assetRows).toHaveCount(1)
-  await test.expect(assetRows.nth(0)).toBeVisible()
-  await test.expect(assetRows.nth(0)).toHaveText(new RegExp('^' + oldName))
+  const oldName = (await actions.locateAssetRowName(row).textContent()) ?? ''
+  await actions.locateAssetRowName(row).click({ modifiers: [mod] })
+  await actions.locateAssetRowName(row).fill('')
+  await test.expect(actions.locateEditingTick(row)).not.toBeVisible()
+  await actions.locateEditingCross(row).click()
+  await test.expect(row).toHaveText(new RegExp('^' + oldName))
 })
 
 test.test('change to blank name (keyboard)', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
+  const row = assetRows.nth(0)
 
   await actions.locateNewFolderIcon(page).click()
-  const oldName = (await actions.locateAssetRowName(assetRows.nth(0)).textContent()) ?? ''
-  await actions.locateAssetRowName(assetRows.nth(0)).click()
+  const oldName = (await actions.locateAssetRowName(row).textContent()) ?? ''
+  await actions.locateAssetRowName(row).click()
   await actions.press(page, 'Mod+R')
-  await actions.locateAssetRowName(assetRows.nth(0)).fill('')
-  await actions.locateAssetRowName(assetRows.nth(0)).press('Enter')
-  await test.expect(assetRows).toHaveCount(1)
-  await test.expect(assetRows.nth(0)).toBeVisible()
-  await test.expect(assetRows.nth(0)).toHaveText(new RegExp('^' + oldName))
+  await actions.locateAssetRowName(row).fill('')
+  await actions.locateAssetRowName(row).press('Enter')
+  await test.expect(row).toHaveText(new RegExp('^' + oldName))
 })

app/ide-desktop/lib/dashboard/e2e/loginLogout.spec.ts

@@ -13,6 +13,7 @@ test.test.beforeEach(actions.mockAll)
 test.test('login and logout', async ({ page }) => {
   // After sign in
   await actions.login({ page })
+  await actions.passTermsAndConditionsDialog({ page })
   await test.expect(actions.locateDriveView(page)).toBeVisible()
   await test.expect(actions.locateLoginButton(page)).not.toBeVisible()
 

app/ide-desktop/lib/dashboard/index.html

@@ -16,14 +16,15 @@
     <meta
       http-equiv="Content-Security-Policy"
       content="
-            default-src 'self';
-            frame-src   'self' data: https://js.stripe.com;
-            script-src  'self' 'unsafe-eval' data: https://*;
-            style-src   'self' 'unsafe-inline' data: https://*;
-            connect-src 'self' data: ws://localhost:* ws://127.0.0.1:* http://localhost:* https://* wss://*;
-            worker-src  'self' blob:;
-            img-src     'self' blob: data: https://*;
-            font-src    'self' data: https://*"
+            default-src     'self';
+            frame-src       'self' data: https://js.stripe.com;
+            script-src      'self' 'unsafe-eval' data: https://*;
+            script-src-elem 'self' 'unsafe-inline' https://*;
+            style-src       'self' 'unsafe-inline' data: https://*;
+            connect-src     'self' data: ws://localhost:* ws://127.0.0.1:* http://localhost:* https://* wss://*;
+            worker-src      'self' blob:;
+            img-src         'self' blob: data: https://*;
+            font-src        'self' data: https://*"
     />
     <meta
       name="viewport"