Develop To Staging

[shweta2101]

DevBoard Task

https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/3984/

Changes Implemented

Project Editing

• Added a project edit page at:

  /workspace/:workspaceId/projects/:projectId/edit
  

• Restricted project editing to project leads.

• Added editable sections for:

  • Project description
  • Rich-text instructions
  • Custom imagery
  • Team members and roles
  • Project configuration
  • Project actions

• Added dirty-state detection and confirmation before leaving with unsaved changes.

• Disabled configuration changes after tasks have been generated or the project has left draft status.

• Added project actions:

  • Reset all tasks
  • Close project
  • Permanently delete project

• Added API methods for updating, resetting, closing, and deleting projects.

• Added an edit button to the project details page for project leads.

• Standardized task mutation errors through the shared HTTP error resolver.

Shared API Error Handling

Expanded resolveHttpErrorMessage() to support:

• detail strings
• Nested detail.message objects
• FastAPI validation arrays using msg
• Validation arrays using message
• Top-level message
• Top-level error
• Plain-text responses
• Existing-lock metadata containing task_number
• Caller-provided fallback messages

The shared resolver is used by:

• Project creation and editing
• Contributor mutations
• Task generation and saving
• Task locking and unlocking
• Task submission

Custom Imagery

• Added custom-imagery input to project creation and editing.
• Added JSON parsing and schema validation.
• Added validation debouncing and stale-request protection.
• Added typed custom-imagery models using ImagerySource.
• Added conversion from project imagery configuration to Rapid imagery configuration.
• Added project imagery during initial Rapid startup.
• Added imagery when switching an already-loaded Rapid editor between workspaces.
• Added custom imagery to the initial Rapid map hash.
• Selected the configured imagery as the active Rapid background.

Rapid Authentication and Integration

• Fixed an initialization race that allowed Rapid to fall back to its built-in OSM OAuth login.
• Rapid authentication is now applied immediately after initialization begins.
• Editor and uploader event registration happens after initialization finishes.
• Prevented redirects to the OSM /login endpoint during changeset upload.

Confirmation Dialog Accessibility

Improved the confirmation dialog with:

• role="dialog"
• aria-modal="true"
• Unique title IDs through useId()
• Initial focus placement
• Tab and Shift+Tab focus trapping
• Escape-key handling
• Focus restoration to the opening element
• Disabled-state handling while actions are running
• Event-listener cleanup during unmount

Impacted Areas Of Testing

Project Editing

1. Sign in as a project lead.
2. Open a project details page.
3. Confirm the edit button is visible.
4. Open the edit page.
5. Verify all sections appear in the sidebar.
6. Change the project description.
7. Change the instructions.
8. Save the project.
9. Return to the project details page.
10. Confirm the updated description and instructions are displayed.
11. Sign in as a non-lead.
12. Confirm the edit button is hidden.
13. Navigate directly to the edit URL.
14. Confirm access is rejected with a 403 response.

Contributor Management

1. Open the Team Members section.
2. Search for a workspace user by name or email.
3. Assign a role and add the user.
4. Confirm the user appears in the project member list.
5. Change the user’s role.
6. Reload the page and confirm the new role persists.
7. Remove the user.

Project Actions

Reset Tasks

1. Open the Actions section.
2. Select Reset All Tasks.
3. Confirm the confirmation dialog appears.
4. Cancel and verify no action occurs.
5. Reopen and confirm the action.
6. Confirm navigation returns to the Tasks tab.
7. Confirm task assignments and progress were reset.

Close Project

1. Select Close Project.
2. Confirm the action.
3. Confirm the project status becomes completed.

Delete Project

1. Create a disposable project.
2. Select Delete Project.
3. Confirm the destructive action.
4. Confirm navigation returns to the project list.
5. Confirm the project no longer appears.

Custom Imagery Validation

1. Open project creation or editing.
2. Enter invalid JSON.
3. Confirm a validation error appears.
4. Enter a JSON array instead of one imagery object.
5. Confirm it is rejected.
6. Enter an object that does not match the schema.
7. Confirm schema validation errors appear.
8. Enter a valid imagery object.
9. Confirm the error clears.
10. Save the project.
11. Reload the page.
12. Confirm the imagery JSON persists.

Example:

{
  "id": "example-imagery",
  "name": "Example Imagery",
  "type": "xyz",
  "url": "https://tiles.example.com/{z}/{x}/{y}.png",
  "icon": "https://example.com/icon.svg",
  "description": "Example imagery",
  "extent": {
    "polygon": [],
    "max_zoom": 19
  },
  "attribution": {
    "required": true,
    "text": "Example attribution",
    "url": "https://example.com/attribution"
  }
}

Rapid Custom Imagery

1. Open a task belonging to a project with custom imagery.
2. Confirm Rapid loads successfully.
3. Confirm the project imagery appears in the imagery list.
4. Confirm it is selected as the active background.
5. Return to the project page.
6. Open another project with different imagery without fully refreshing.
7. Confirm the second project’s imagery is added and selected.
8. Open a project without custom imagery.
9. Confirm Rapid still loads normally.

Screenshots:

Bug Fixes

This pull request makes improvements to the project editing and detail UI, focusing on user feedback and layout robustness. The most important changes are:

User feedback enhancements:

• The handleSave function in edit.vue now displays a success toast with { clearOnUrlChange: false } to prevent the toast from being cleared on navigation, and shows an error toast if saving fails.

UI layout improvements:

• .project-detail-summary-item in index.vue now has min-width: 0 to better handle flexbox sizing and prevent overflow issues.
• .project-detail-summary-item strong is updated with flex: 1, min-width: 0, and overflow-wrap: anywhere to improve text wrapping and ensure the layout remains stable with long content.

Screenshots

Before	After

DevBoard Tasks

1. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4076
2. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4082
3. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4083
4. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4079
5. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4080
6. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4087
7. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4085
8. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4075
9. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4077

Changes implemented

• Added separate mapper and validator task editor panels based on task status.
• Limited validation feedback controls to tasks awaiting review.
• Added self-validation prevention for the last mapper.
• Updated task status labels, actions, timer, sidebar width, and review option styling.
• Added project-role loading and permission error handling.
• Added paginated API loading for projects containing more than 1,000 tasks.
• Fixed rich-text editor input and consistent HTML sanitization.
• Added accessible keyboard navigation for task editor tabs.
• Added proper area-unit formatting with km² and mi² options during project creation and task generation.
• Improved task-generation button alignment and styling.
• Removed inactive three-dot menus from project cards.
• Consolidated duplicated styles and moved reusable colors into theme variables.
• Extracted/precomputed derived UI state following Vue/Nuxt guidelines.
• Added cleanup for Rapid event listeners.
• Added unit tests for permissions, task submission, self-validation, Rapid listeners, and rich-text editing.

Impacted areas for testing

• Project creation and editing, especially rich-text fields.
• Project review step and HTML content display.
• Project task generation, area-unit switching, generate/reset controls, and projects with 450+ or 1,000+ tasks.
• Project task list filtering, sorting, pagination, selection, locking, and unlocking.
• Mapper workflow for to_map and to_remap tasks.
• Validator workflow for to_review tasks, including approve and request-remap paths.
• Prevention of validating a task last mapped by the same user.
• Task editor timer, sidebar, tabs, responsive layout, and Rapid upload/submission behavior.
• Project role-based action visibility and permission-error states.
• Project cards, status badges, progress indicators, and responsive theme styling.

Screenshots

Summary

• Refined project listing, project details, tabs, and project creation page styling for pixel-perfect layouts.
• Updated typography, colors, spacing, borders, radii, shadows, progress bars, cards, badges, filters, and responsive layout treatments.
• Added theme text color variables and standardized their use across project and wizard components.
• Replaced project list view-toggle icons with SVG image assets and adjusted toggle/grid styling.
• Improved project creation wizard step layouts and review styling.
• Updated zero-progress task summary capitalization from “Not started” to “Not Started.”

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: bcb798e4-734f-4940-8ff3-5f72ba97fda7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}