Bug fixes: Improve Task Workflows, Project Permissions, Pagination, and UI Consistency - #98
Bug fixes: Improve Task Workflows, Project Permissions, Pagination, and UI Consistency#98shweta2101 wants to merge 12 commits into
Conversation
Introduce area display unit support and refine task editor UX and permission checks. - Add composable useAreaDisplayUnit to persist/display km² or mi², plus formatArea helper and AREA_UNIT_OPTIONS. - Wire area unit toggle into project-wizard AreaOfInterestStep and TaskSetupPanel, replacing ad-hoc formatting with formatArea; display AOI area in ReviewStep. - Update RichTextEditor and SettingsStep to use v-model for instructions synchronization. - Overhaul task editor sidebar: add tabs (Completion / Instructions), review remap flow, lock time remaining display, action disabling/validation for review feedback, status labels, and styling improvements. - Improve project detail/edit pages: fetch TDEI roles (tdeiUserClient), introduce useWorkspaceProjectPermissions (in useProjectRole), gate edit/management actions and UI (contributors, activation, edit button) based on workspace/project permissions. - Misc UI/text updates: change "More mapping needed" → "More mapping required", adjust sort labels, remove duplicate "Lead" role option in AddContributorDialog, and several CSS/layout tweaks. - Add unit tests for area display unit and project service behavior and update related types/util functions. These changes centralize area unit logic, improve mapping/review flows, and tighten role-based UI/operation gating.
Introduce new task-editor UI components (Sidebar, ReviewPanel, MappingPanel) and an AreaUnitToggle component, and wire them into project wizard steps and task setup. Add composables for task editor state and flows (useTaskEditorContext, useTaskEditorSubmission, useTaskLockCountdown) plus related types. Extract area and rich-text helpers into util/area.ts and util/rich-text.ts and update RichTextContent and RichTextEditor to use the sanitization and improved active-tool tracking. Update useAreaDisplayUnit to delegate formatting/locale logic to util/area and simplify its API. Add unit tests for new composables/utilities and register BTabs in nuxt.config. These changes modularize the task editor UI, centralize area/HTML handling, and encapsulate submission/locking logic.
Prevent a race when attaching uploaded OSM changesets by adding a changesetAttachSequence counter: capture a sequence per attach call and ignore stale success/error/finally handling so only the latest attempt updates state/isSubmittingChangeset. Make project creation surface TDEI role load failures by throwing a createError on failure instead of returning an empty array. Update TdeiUserClient.getMyRolesForProjectGroupById to call the project-group-roles endpoint with paging and parse the JSON items directly (replacing the previous getMyProjectGroups call).
Delete the nested action buttons and their related CSS from ProjectCard.vue and ProjectListRow.vue, simplifying the stretched-link pattern. Comments about accessibility were tightened to note the stretched <nuxt-link> as the card/row link target. Removed .project-card-menu and .project-list-menu-button rules and the action column from the list-row grid (including responsive variant) and eliminated a duplicated CSS block. Overall cleanup reduces z-index positioning hacks and markup/CSS complexity for project cards and list rows.
Introduce new theme tokens and replace hardcoded colors/sizes with variables; standardize spacing units (rem) across many components. Add AppPage padding prop and apply to several pages. Improve list rendering by exposing computed display arrays (validators, users, tasks) and move role/label resolution into computed properties. Add roleLoadError to useProjectRole and avoid redundant project-role fetches for workspace leads. Implement batched task page fetching in WorkspaceProjectsClient with TASK_PAGE_SIZE_MAXIMUM and concurrency to avoid large bursts. Add util/task-access and several unit tests; tidy task-editor lifecycle by storing/cleanup of listener handles. Misc: small API/signature and import cleanups, accessibility and copy/error UI tweaks.
Prevent changing or removing the project "lead" role and refine role-selection UI/logic. Changes remove the 'Lead' option from assignable role lists, replace role-check helpers with isAssignableProjectRole (excluding 'lead'), and guard add/update/remove flows so contributors with role === 'lead' cannot be reassigned or deleted. UI updates show a readonly "Lead" label instead of a selectable control for leads, add corresponding styles, and adjust search-result/list styling and overflow behavior. Small validations were added to stop invalid role assignments during add/update operations.
📝 WalkthroughWalkthroughThe PR adds area-unit preferences, permission-aware project workflows, reusable task-editor components and composables, paginated task loading, expanded theme tokens, shared rich-text sanitization, and tests for the new behavior. ChangesShared display and wizard flow
Permission-aware project workflows
Task editor flow
Task data and project presentation
Behavioral validation and integration support
Estimated code review effort: 5 (Critical) | ~120 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/project-wizard/RichTextEditor.vue`:
- Around line 62-69: Add image and table mappings to ACTIVE_TOOL_NAMES so
updateActiveTools recognizes their active selections, then extend the editor
test to verify inserted or selected images and tables activate the corresponding
toolbar buttons.
In `@composables/useTaskEditorSubmission.ts`:
- Around line 174-192: Parameterize resolveTaskSubmitErrorMessage with an
appropriate fallback message, and update releaseTask’s catch block to use an
unlock/skip-specific fallback instead of “Task submission failed.” Preserve the
existing submission fallback for other callers.
In `@pages/workspace/`[id]/projects/[projectId]/edit.vue:
- Around line 537-550: Update the myTdeiRoles lookup in the project edit
permission flow to stop catching role-request failures and replacing them with
an empty array. Let getMyRolesForProjectGroupById errors propagate as load
failures, while preserving the existing canEditProjectMetadata authorization
check for successful lookups.
In `@services/projects.ts`:
- Around line 339-380: Remove all trailing commas introduced in the
services/projects.ts block around fetchPage, URLSearchParams, _get, and
pagination calls, while preserving semicolons. Also remove the trailing comma
after the final Completed option in
components/workspace-project-details/TasksTab.vue (lines 234-240); update both
sites to comply with commaDangle: 'never'.
In `@util/rich-text.ts`:
- Around line 3-5: Remove every newly introduced trailing comma and retain
semicolons in the affected code. Update the object property in
util/rich-text.ts:3-5; type import, function parameters, and formatArea
arguments in services/project-wizard-review.ts:5-8, 24-28, 43-48; final object
and call arguments in
components/project-wizard/steps/AreaOfInterestStep.vue:195-207; mapped-object
property in ReviewStep.vue:108-113; object properties in
SettingsStep.vue:121-132; array/object, extension/nested-object, callback, and
constructor arguments in components/project-wizard/RichTextEditor.vue:52-77,
79-114, 116-147; computed-call arguments in
components/workspace-project-details/TaskSetupPanel.vue:244-258; role-fetch,
permission-call, and filter callback arguments in
pages/workspace/[id]/projects/[projectId]/edit.vue:537-543, 565-569; and
role-fetch, permission-call, computed callback, and review-summary arguments in
pages/workspace/[id]/projects/create.vue:223-232, 307-314, 333-338. Preserve all
existing behavior while ensuring no affected list, object, import, parameter, or
call ends with a trailing comma.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: ed856fe2-a9ac-4568-9147-f2f16eaf1a04
📒 Files selected for processing (51)
assets/scss/theme.scsscomponents/AppPage.vuecomponents/AreaUnitToggle.vuecomponents/project-wizard/RichTextEditor.vuecomponents/project-wizard/steps/AreaOfInterestStep.vuecomponents/project-wizard/steps/ReviewStep.vuecomponents/project-wizard/steps/SettingsStep.vuecomponents/task-editor/MappingPanel.vuecomponents/task-editor/ReviewPanel.vuecomponents/task-editor/Sidebar.vuecomponents/workspace-project-details/AddContributorDialog.vuecomponents/workspace-project-details/ContributorsTab.vuecomponents/workspace-project-details/ProjectMap.vuecomponents/workspace-project-details/RichTextContent.vuecomponents/workspace-project-details/TaskSetupPanel.vuecomponents/workspace-project-details/TasksTab.vuecomponents/workspace-projects/ProjectCard.vuecomponents/workspace-projects/ProjectListRow.vuecomponents/workspace-projects/StatusBadge.vuecomposables/useAreaDisplayUnit.tscomposables/useProjectEditMembers.tscomposables/useProjectRole.tscomposables/useTaskEditorContext.tscomposables/useTaskEditorSubmission.tscomposables/useTaskLockCountdown.tsnuxt.config.tspages/workspace/[id]/projects/[projectId]/edit.vuepages/workspace/[id]/projects/[projectId]/index.vuepages/workspace/[id]/projects/[projectId]/tasks/[taskId]/editor.vuepages/workspace/[id]/projects/create.vuepages/workspace/[id]/projects/index.vueservices/project-wizard-payload.tsservices/project-wizard-review.tsservices/projects.tsservices/rapid.tsservices/tdei.tstest/unit/components/RichTextEditor.test.tstest/unit/composables/useProjectRole.test.tstest/unit/composables/useTaskEditorContext.test.tstest/unit/composables/useTaskEditorSubmission.test.tstest/unit/composables/useTaskLockCountdown.test.tstest/unit/services/projects.test.tstest/unit/services/rapid.test.tstest/unit/util/area.test.tstest/unit/util/task-access.test.tstypes/projects.tstypes/task-editor.tsutil/area.tsutil/rich-text.tsutil/task-access.tsutil/task-status.ts
Update rich text editor to treat image and table tools as active (add mappings and tests). Make useTaskEditorSubmission pass a skip-specific fallback message and allow custom fallback messages from resolveTaskSubmitErrorMessage; add unit test for skip failure. Also include minor formatting/whitespace cleanups across components, pages, services, and utils.
Add documentation describing who can manage workspace projects and work on project tasks. The new docs/workspace-project-role-based-access.md covers role types (project-group POC, workspace role, project role), the effective project role resolution, detailed project and task permission matrices, contributor management rules, and implementation pointers to composables/useProjectRole.ts and pages/workspace/[id]/projects/[projectId]/index.vue.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/workspace-project-role-based-access.md`:
- Around line 17-25: Update the task-access role matrix in the documentation to
state that POC permissions do not determine the effective task role. Clarify
that mapping and validation require an effective workspace or project role,
while POC access is limited to the separately documented project-management
permissions; apply the same clarification to the related example or guidance
around the later referenced section.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 6f278b1b-d6df-42be-a85b-a55e52f38187
📒 Files selected for processing (1)
docs/workspace-project-role-based-access.md
| Task access is based on the user's effective project role: | ||
|
|
||
| 1. A workspace `lead` is always treated as a `lead`. | ||
| 2. Otherwise, the project role is used when one is assigned. | ||
| 3. If there is no project role, the workspace role is used. | ||
| 4. If neither role exists, the user has read-only access. | ||
|
|
||
| For example, assigning a project `validator` role to a workspace | ||
| `contributor` allows that user to validate tasks in that project. |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win
Clarify that POC permissions do not define the effective task role.
useProjectRole.ts computes task capabilities only from workspace/project roles; “tasking role” is not defined here, and a POC without either role would otherwise appear read-only under lines 17–22. Make the matrix explicit that mapping/validation require an effective workspace/project role, while POC access is limited to the separately documented project-management permissions.
Suggested wording
-| Map tasks | With a tasking role | Yes | Yes | Yes | Yes |
-| Validate tasks | With a lead or validator role | Yes | Yes | Yes | No |
+| Map tasks | Only with an effective workspace/project role | Yes | Yes | Yes | Yes |
+| Validate tasks | Only with an effective workspace/project lead or validator role | Yes | Yes | Yes | No |Also applies to: 37-38
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/workspace-project-role-based-access.md` around lines 17 - 25, Update the
task-access role matrix in the documentation to state that POC permissions do
not determine the effective task role. Clarify that mapping and validation
require an effective workspace or project role, while POC access is limited to
the separately documented project-management permissions; apply the same
clarification to the related example or guidance around the later referenced
section.
DevBoard Tasks
Changes implemented
Impacted areas for testing
to_mapandto_remaptasks.to_reviewtasks, including approve and request-remap paths.Screenshots
Summary
useTaskEditorContext, and refactored task submission/release to use shared composables (including improved “skip” failure messaging via a skip-specific fallback).useTaskLockCountdown+ formatter) and updated editor UI/status labeling to support the newto_remaptask API state.isTaskSelfValidation), and updated task editor actions/labels accordingly.roleLoadErrorsurfaced fromuseProjectRole, gated UI/actions with early returns, and added a banner when project permissions fail to load.AreaDisplayUnitutilities (formatArea, validation, US-locale default), persisted unit preference (useAreaDisplayUnit), and newAreaUnitToggleUI with km²/mi² formatting.sanitizeRichTextHtmlhelper, refactoring the TipTap editor to usedefineModeland improved active-tool detection (including image/table), and updating wizard sanitization payload handling.AppPage), and refreshing project card/list progress semantics and legend text.