511 design system

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "data-management",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["--prefix", "apps/data-management", "run", "dev", "--", "--port", "5190", "--strictPort"],
+      "port": 5190
+    }
+  ]
+}

.github/workflows/ci.yml

@@ -3,10 +3,8 @@ name: CI
 on:
   push:
     branches:
-      - "**"
+      - main
   pull_request:
-  release:
-    types: [created]
 
 permissions:
   contents: read

.vscode/tasks.json

@@ -150,7 +150,7 @@
     {
       "label": "Start Backend",
       "type": "shell",
-      "command": "${workspaceFolder}/scripts/dev-api-command manage.py tailwind runserver 0.0.0.0:8000",
+      "command": "${workspaceFolder}/scripts/dev-api-command manage.py runserver 0.0.0.0:8000",
       "options": {
         "cwd": "${workspaceFolder}/django"
       },

AGENTS.md

@@ -0,0 +1,4 @@
+# Frontend Changes
+
+For frontend changes, conform to the conventions established in
+[packages/design-system/CONVENTIONS.md](packages/design-system/CONVENTIONS.md).

CLAUDE.md

@@ -0,0 +1 @@
+See [AGENTS.md](AGENTS.md) — the single source of truth for agent instructions in this repo.

apps/data-management/e2e/specs/account.spec.ts

@@ -26,14 +26,14 @@ test.describe('account management', () => {
 
     await page.getByTestId('account-menu-button').click()
     await page.getByTestId('account-menu-item').click()
-    await expect(page).toHaveURL(/\/accounts\/profile\/$/)
+    await expect(page).toHaveURL(/\/accounts\/profile\/(?:\?.*)?$/)
     await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Organization' })).toBeVisible()
 
     await page.getByRole('link', { name: 'Edit' }).click()
     await page.getByLabel('First name').fill('Profile Updated')
-    await page.getByRole('checkbox', { name: 'Organization Affiliation' }).uncheck()
-    await page.getByRole('button', { name: 'Save Changes' }).click()
+    await page.getByRole('checkbox', { name: 'Organization affiliation' }).uncheck()
+    await page.getByRole('button', { name: 'Save changes' }).click()
 
     await expect(page.getByText('Profile Updated Example')).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Organization' })).toHaveCount(0)
@@ -50,14 +50,14 @@ test.describe('account management', () => {
     await page.getByLabel('Type "delete my account and data" to confirm').fill(
       'delete my account and data'
     )
-    await page.getByRole('button', { name: 'Delete My Account' }).click()
+    await page.getByRole('button', { name: 'Delete my account' }).click()
 
-    await expect(page).toHaveURL(/\/accounts\/login\/$/)
+    await expect(page).toHaveURL(/\/accounts\/login\/(?:\?.*)?$/)
 
     await page.getByLabel('Email').fill(users.deleteMe.email)
     await page.getByLabel('Password').fill(users.deleteMe.password)
     await page.getByRole('button', { name: 'Sign In' }).click()
-    await expect(page).toHaveURL(/\/accounts\/login\/$/)
+    await expect(page).toHaveURL(/\/accounts\/login\/(?:\?.*)?$/)
     await expect(page.getByRole('button', { name: 'Sign In' })).toBeVisible()
   })
 })

apps/data-management/e2e/specs/metadata.spec.ts

@@ -1,9 +1,19 @@
-import { expect, test } from '../support/test'
+import { expect, test, type Page } from '../support/test'
 
 import { authenticateSession } from '../support/auth'
 import { fixtures, users } from '../support/fixtures'
 import { fillCombobox, workspaceListItem } from '../support/ui'
 
+async function selectMetadataScope(
+  page: Page,
+  scope: 'all' | 'workspace' | 'system'
+) {
+  await page.getByTestId(`metadata-scope-${scope}`).click()
+  const table = page.getByTestId(`${scope}-metadata-table`)
+  await expect(table).toBeVisible()
+  return table
+}
+
 test.describe('metadata management', () => {
   test('the metadata route redirects to the workspaces page metadata tab', async ({
     page,
@@ -13,11 +23,11 @@ test.describe('metadata management', () => {
 
     await expect(page).toHaveURL(/\/workspaces\?section=metadata/)
     await expect(
-      page.getByRole('heading', { name: 'Manage workspaces' })
+      page.getByRole('heading', { name: fixtures.workspaces.private.name })
     ).toBeVisible()
 
-    // Workspace metadata is shown by default, with its own type tabs.
-    await expect(page.getByTestId('workspace-metadata-table')).toBeVisible()
+    // All metadata is shown by default, with its own type tabs.
+    await expect(page.getByTestId('all-metadata-table')).toBeVisible()
     await expect(page.getByRole('tab', { name: 'Methods' })).toBeVisible()
     await expect(
       page.getByRole('tab', { name: 'Observed properties' })
@@ -32,11 +42,8 @@ test.describe('metadata management', () => {
     await expect(page.getByTestId('system-metadata-table')).toHaveCount(0)
 
     // Switching scope swaps to the system-scoped table.
-    await page
-      .getByRole('button', { name: 'System metadata', exact: true })
-      .click()
-    await expect(page.getByTestId('system-metadata-table')).toBeVisible()
-    await expect(page.getByTestId('workspace-metadata-table')).toHaveCount(0)
+    await selectMetadataScope(page, 'system')
+    await expect(page.getByTestId('all-metadata-table')).toHaveCount(0)
   })
 
   test('switching metadata scope shows workspace or system entries, not both at once', async ({
@@ -47,8 +54,7 @@ test.describe('metadata management', () => {
     await workspaceListItem(page, fixtures.workspaces.private.name).click()
 
     await page.getByRole('tab', { name: 'Methods' }).click()
-
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
     await expect(
       workspaceTable
         .locator('tr')
@@ -57,11 +63,7 @@ test.describe('metadata management', () => {
     ).toBeVisible()
     await expect(page.getByTestId('system-metadata-table')).toHaveCount(0)
 
-    await page
-      .getByRole('button', { name: 'System metadata', exact: true })
-      .click()
-
-    const systemTable = page.getByTestId('system-metadata-table')
+    const systemTable = await selectMetadataScope(page, 'system')
     await expect(
       systemTable
         .locator('tr')
@@ -82,10 +84,9 @@ test.describe('metadata management', () => {
       `/workspaces?workspace=${fixtures.workspaces.admin.id}&section=metadata`
     )
 
-    await page.getByRole('button', { name: 'All', exact: true }).click()
+    const allTable = await selectMetadataScope(page, 'all')
     await page.getByRole('tab', { name: 'Result qualifiers' }).click()
 
-    const allTable = page.getByTestId('all-metadata-table')
     await allTable
       .getByRole('textbox', { name: 'Search metadata' })
       .fill(qualifier.name)
@@ -95,7 +96,7 @@ test.describe('metadata management', () => {
     await expect(deleteButton).toBeVisible()
 
     await editButton.click()
-    await page.getByLabel('Code *').fill(renamedCode)
+    await page.getByLabel('Code').fill(renamedCode)
     await page.getByRole('button', { name: 'Update', exact: true }).click()
 
     const renamedRow = allTable.locator('tr').filter({ hasText: renamedCode })
@@ -117,24 +118,24 @@ test.describe('metadata management', () => {
     await page.goto('/metadata')
     await workspaceListItem(page, fixtures.workspaces.private.name).click()
 
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
     await page.getByRole('tab', { name: 'Methods' }).click()
     await workspaceTable
       .getByRole('button', { name: /Add new method/i })
       .click()
 
-    await fillCombobox(page, 'Type *', 'E2E Method Type')
+    await fillCombobox(page, 'Type', 'E2E Method Type')
     await page
-      .getByLabel('Description *')
+      .getByLabel('Description')
       .fill('Temporary method created by the Playwright metadata CRUD suite.')
-    await page.getByLabel('Name *').fill(methodName)
+    await page.getByLabel('Name').fill(methodName)
     await page.getByRole('button', { name: 'Save' }).click()
 
     const methodRow = page.locator('tr').filter({ hasText: methodName }).first()
     await expect(methodRow).toBeVisible()
 
     await methodRow.locator('.v-icon').first().click()
-    await page.getByLabel('Name *').fill(renamedMethodName)
+    await page.getByLabel('Name').fill(renamedMethodName)
     await page.getByRole('button', { name: 'Update' }).click()
 
     const renamedMethodRow = page
@@ -165,21 +166,21 @@ test.describe('metadata management', () => {
     await page.goto('/metadata')
     await workspaceListItem(page, fixtures.workspaces.private.name).click()
 
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
     await page.getByRole('tab', { name: 'Methods' }).click()
     await workspaceTable
       .getByRole('button', { name: /Add new method/i })
       .click()
 
-    await fillCombobox(page, 'Type *', 'Instrument Deployment')
+    await fillCombobox(page, 'Type', 'Instrument Deployment')
     await page
-      .getByLabel('Description *')
+      .getByLabel('Description')
       .fill('Instrument method created by the Playwright regression suite.')
 
-    await expect(page.getByLabel('Name *', { exact: true })).toHaveCount(0)
+    await expect(page.getByLabel('Name', { exact: true })).toHaveCount(0)
 
-    const manufacturerField = page.getByLabel('Sensor Model Manufacturer *')
-    const modelField = page.getByLabel('Sensor Model *', { exact: true })
+    const manufacturerField = page.getByLabel('Sensor Model Manufacturer')
+    const modelField = page.getByLabel('Sensor Model', { exact: true })
     await page.getByRole('button', { name: 'Save' }).click()
     await expect(page.getByText('This field is required.')).toHaveCount(2)
 
@@ -210,30 +211,30 @@ test.describe('metadata management', () => {
     await page.goto('/metadata')
     await workspaceListItem(page, fixtures.workspaces.private.name).click()
 
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
     await page.getByRole('tab', { name: 'Observed properties' }).click()
     await workspaceTable
       .getByRole('button', { name: /Add new observed property/i })
       .click()
 
-    await fillCombobox(page, 'Variable Type *', 'E2E Variable Type')
+    await fillCombobox(page, 'Variable Type', 'E2E Variable Type')
     await page
       .getByLabel('Definition')
       .fill('https://www.example.com/e2e-observed-property')
     await page
-      .getByLabel('Description *')
+      .getByLabel('Description')
       .fill(
         'Temporary observed property created by the Playwright metadata CRUD suite.'
       )
-    await page.getByLabel('Variable Code *').fill(`E2E-OP-${Date.now()}`)
-    await page.getByLabel('Name *').fill(propName)
+    await page.getByLabel('Variable Code').fill(`E2E-OP-${Date.now()}`)
+    await page.getByLabel('Name').fill(propName)
     await page.getByRole('button', { name: 'Save' }).click()
 
     const propRow = page.locator('tr').filter({ hasText: propName }).first()
     await expect(propRow).toBeVisible()
 
     await propRow.locator('.v-icon').first().click()
-    await page.getByLabel('Name *').fill(renamedPropName)
+    await page.getByLabel('Name').fill(renamedPropName)
     await page.getByRole('button', { name: 'Update' }).click()
 
     const renamedPropRow = page
@@ -262,16 +263,16 @@ test.describe('metadata management', () => {
     await page.goto('/metadata')
     await workspaceListItem(page, fixtures.workspaces.private.name).click()
 
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
     await page.getByRole('tab', { name: 'Processing levels' }).click()
     await workspaceTable
       .getByRole('button', { name: /Add new processing level/i })
       .click()
 
-    await page.getByLabel('Name *').fill('E2E Processing Level')
-    await page.getByLabel('Code *').fill(levelCode)
+    await page.getByLabel('Name').fill('E2E Processing Level')
+    await page.getByLabel('Code').fill(levelCode)
     await page
-      .getByLabel('Description *')
+      .getByLabel('Description')
       .fill('E2E processing level description')
     await page
       .getByLabel('Definition')
@@ -282,7 +283,7 @@ test.describe('metadata management', () => {
     await expect(levelRow).toBeVisible()
 
     await levelRow.locator('.v-icon').first().click()
-    await page.getByLabel('Code *').fill(renamedCode)
+    await page.getByLabel('Code').fill(renamedCode)
     await page.getByRole('button', { name: 'Update' }).click()
 
     const renamedRow = page
@@ -311,23 +312,23 @@ test.describe('metadata management', () => {
     await page.goto('/metadata')
     await workspaceListItem(page, fixtures.workspaces.private.name).click()
 
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
     await page.getByRole('tab', { name: 'Units' }).click()
     await workspaceTable.getByRole('button', { name: /Add new unit/i }).click()
 
-    await fillCombobox(page, 'Unit Type *', 'E2E Unit Type')
-    await page.getByLabel('Symbol *').fill(`e2e${stamp}`)
+    await fillCombobox(page, 'Unit Type', 'E2E Unit Type')
+    await page.getByLabel('Symbol').fill(`e2e${stamp}`)
     await page
       .getByLabel('Definition')
       .fill(`https://example.com/units/e2e-${stamp}`)
-    await page.getByLabel('Name *').fill(unitName)
+    await page.getByLabel('Name').fill(unitName)
     await page.getByRole('button', { name: 'Save' }).click()
 
     const unitRow = page.locator('tr').filter({ hasText: unitName }).first()
     await expect(unitRow).toBeVisible()
 
     await unitRow.locator('.v-icon').first().click()
-    await page.getByLabel('Name *').fill(renamedUnitName)
+    await page.getByLabel('Name').fill(renamedUnitName)
     await page.getByRole('button', { name: 'Update' }).click()
 
     const renamedUnitRow = page
@@ -356,13 +357,13 @@ test.describe('metadata management', () => {
     await page.goto('/metadata')
     await workspaceListItem(page, fixtures.workspaces.private.name).click()
 
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
     await page.getByRole('tab', { name: 'Result qualifiers' }).click()
     await workspaceTable
       .getByRole('button', { name: /Add new result qualifier/i })
       .click()
 
-    await page.getByLabel('Code *').fill(qualifierCode)
+    await page.getByLabel('Code').fill(qualifierCode)
     await page
       .getByLabel('Description')
       .fill(
@@ -377,7 +378,7 @@ test.describe('metadata management', () => {
     await expect(qualifierRow).toBeVisible()
 
     await qualifierRow.locator('.v-icon').first().click()
-    await page.getByLabel('Code *').fill(renamedCode)
+    await page.getByLabel('Code').fill(renamedCode)
     await page.getByRole('button', { name: 'Update' }).click()
 
     const renamedRow = page
@@ -400,11 +401,9 @@ test.describe('metadata management', () => {
     await page.goto('/metadata')
     await workspaceListItem(page, fixtures.workspaces.public.name).click()
 
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
 
-    const searchBox = page
-      .getByRole('textbox', { name: 'Search metadata', exact: true })
-      .first()
+    const searchBox = workspaceTable.getByPlaceholder('Search metadata…')
     await expect(searchBox).toBeVisible()
 
     await searchBox.fill(fixtures.metadata.publicAssignedMethod.name)
@@ -432,7 +431,7 @@ test.describe('metadata management', () => {
     await page.goto('/metadata')
     await workspaceListItem(page, fixtures.workspaces.private.name).click()
 
-    const workspaceTable = page.getByTestId('workspace-metadata-table')
+    const workspaceTable = await selectMetadataScope(page, 'workspace')
     await page.getByRole('tab', { name: 'Methods' }).click()
 
     const assignedMethodRow = workspaceTable