feat: Add drag-and-drop module reordering with caching fix

[fasiho7]

Resolves #3016

Features Added

• Added position field to Module model for custom ordering support
• Implemented GraphQL mutation to update module positions based on ordered input list
• Added drag-and-drop reordering on frontend using dnd-kit library
• Enhanced ModuleCard component with sortable functionality

Technical Implementation

• Frontend: dnd-kit integration for smooth drag-and-drop UX
• Backend: GraphQL mutation for position updates
• Caching: Version-based cache invalidation strategy
• Error handling: Revert on mutation failure

Changes Made

• Module type: Added optional position field
• GraphQL: Added UPDATE_MODULE_POSITIONS mutation
• ModuleCard: Added drag-and-drop with grip handles
• State management: Optimistic updates with error recovery

Testing

• Added support for ModuleCard component testing
• Comprehensive error handling and validation
• Accessibility support with keyboard navigation

Benefits

• Improved UX for mentors/admins managing module order
• Real-time visual feedback during reordering
• Consistent cache invalidation preventing stale data
• Scalable solution for current user load (<500 admins/mentors)

Checklist:

• I followed the contributing workflow
• I verified that my code works as intended and resolves the issue as described
• I ran make check-test locally: all warnings addressed, tests passed
• I used AI for code, documentation, tests, or communication related to this PR

STOP AND READ BEFORE SUBMITTING! REMOVE THIS PARAGRAPH BEFORE OPENING THE PR

Thank you for your interest in contributing to OWASP Nest!

Before starting any work, all external contributors must first be assigned to an issue in the repository.
This is a mandatory step in the OWASP Nest workflow and ensures that effort is coordinated, approved, and tracked properly.

Exception: OWASP leaders are not required to follow this rule —- just make sure your username is included in the exception list.

If you were not assigned to the issue you are trying to resolve, stop right now and do NOT create this PR.
Unassigned pull requests are automatically closed by our workflows — please don't waste your time.

If you want to be assigned on any available issue, comment on it and wait for confirmation from the maintainers or project leads.

Proposed change

Resolves #(put the issue number here)

Add the PR description here.

Checklist

• Required: I followed the contributing workflow
• Required: I verified that my code works as intended and resolves the issue as described
• Required: I ran make check-test locally: all warnings addressed, tests passed
• I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

New Features

• Drag-and-drop module reordering with responsive grid layout
• Avatar display for mentors and mentees integrated into module items
• Show more/Show less controls for managing expanded module lists
• Enhanced keyboard accessibility for reordering interactions
• Improved module routing based on current context

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

This PR implements drag-and-drop module reordering functionality for mentorship programs. It extends ModuleCard to support reordering mode with DnD Kit integration, adds a GraphQL mutation constant for persisting module positions, and extends the Module type with a position field to track order.

Changes

Cohort / File(s)	Summary
Module Reordering Component frontend/src/components/ModuleCard.tsx	Integrates DnD Kit for drag-and-drop reordering with SortableModuleItem, responsive grid rendering, show more/less controls, and keyboard accessibility. Adds programKey and enableReordering props. Implements optimistic local state updates with error fallback. Extends rendering to include mentor/mentee avatars with conditional URL sizing and dynamic mentee link routing. Maintains backward compatibility with SingleModuleCard path for single-module scenarios.
GraphQL Mutations frontend/src/server/queries/moduleQueries.ts	Adds UPDATE_MODULE_POSITIONS GraphQL mutation constant accepting programKey and modulePositions array, returning success status, message, and updated module details (id, key, name, position).
Type Definitions frontend/src/types/mentorship.ts	Adds optional numeric position field to Module type to support module ordering metadata.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• fix params and remove refresh params #2287: Modifies ModuleCard.tsx rendering and navigation logic with overlapping component structure changes
• Improve Module Card: Show mentors/mentee avatars & change grid to 3 columns #3296: Adds avatar handling and mentee/mentor URL helper logic to ModuleCard.tsx with overlapping avatar rendering implementation
• UI/ux mentorship program update #2244: Updates ModuleCard.tsx module title rendering with ActionButton wrapper, affecting same component structure

Suggested labels

frontend, frontend-tests

Suggested reviewers

• arkid15r
• kasya

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[github-actions]

The linked issue must be assigned to the PR author.

[sonarqubecloud]

Quality Gate failed

Failed conditions
30.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud