Fix various issues on the Dashboard

app/ide-desktop/eslint.config.js

@@ -20,6 +20,7 @@ import tsEslintParser from '@typescript-eslint/parser'
 // === Constants ===
 // =================
 
+const DEBUG_STATEMENTS_MESSAGE = 'Avoid leaving debugging statements when committing code'
 const DIR_NAME = path.dirname(url.fileURLToPath(import.meta.url))
 const NAME = 'enso'
 /** An explicit whitelist of CommonJS modules, which do not support namespace imports.
@@ -204,7 +205,7 @@ const RESTRICTED_SYNTAXES = [
     {
         selector: `JSXAttribute[name.name=/^(?:className)$/] TemplateLiteral`,
         message:
-            'Use `tv` from `tailwind-variants` or `twMerge` from `tailwind-merge` instead of template strings for classes',
+            'Use `tv` from `#/utilities/tailwindVariants` or `twMerge` from `tailwind-merge` instead of template strings for classes',
     },
     {
         selector: 'JSXOpeningElement[name.name=button] > JSXIdentifier',
@@ -283,11 +284,18 @@ export default [
             'no-constant-condition': ['error', { checkLoops: false }],
             'no-restricted-syntax': ['error', ...RESTRICTED_SYNTAXES],
             'prefer-const': 'error',
+            'react/forbid-elements': [
+                'error',
+                { forbid: [{ element: 'Debug', message: DEBUG_STATEMENTS_MESSAGE }] },
+            ],
             // Not relevant because TypeScript checks types.
             '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',
@@ -473,26 +481,11 @@ export default [
                     property: 'useNavigate',
                     message: 'Use `hooks.useNavigate` instead.',
                 },
-                {
-                    object: 'console',
-                    message: 'Avoid leaving debugging statements when committing code',
-                },
-                {
-                    property: 'useDebugState',
-                    message: 'Avoid leaving debugging statements when committing code',
-                },
-                {
-                    property: 'useDebugEffect',
-                    message: 'Avoid leaving debugging statements when committing code',
-                },
-                {
-                    property: 'useDebugMemo',
-                    message: 'Avoid leaving debugging statements when committing code',
-                },
-                {
-                    property: 'useDebugCallback',
-                    message: 'Avoid leaving debugging statements when committing code',
-                },
+                { object: 'console', message: DEBUG_STATEMENTS_MESSAGE },
+                { property: 'useDebugState', message: DEBUG_STATEMENTS_MESSAGE },
+                { property: 'useDebugEffect', message: DEBUG_STATEMENTS_MESSAGE },
+                { property: 'useDebugMemo', message: DEBUG_STATEMENTS_MESSAGE },
+                { property: 'useDebugCallback', message: DEBUG_STATEMENTS_MESSAGE },
             ],
         },
     },

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

@@ -182,12 +182,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. */
@@ -795,18 +795,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))
 })