Build Add Module Modal UX with Module Type Selection and Search

[smattymatty]

Build Add Module Modal UX with Module Type Selection and Search

Description

Replaces the placeholder "Coming Soon" add module modal with a fully functional multi-step flow. Teachers can now select a module type (Slideshow), search for content with a debounced autocomplete, and attach it to their course — all in a clean step-based UI.

Closes #263

Mandatory Checklist

• I have read and followed the CONTRIBUTING.md
• I have linked the related issue above
• My branch is up to date with main
• I have tested my changes locally
• I have added or updated tests where applicable
• I have not introduced any new linting errors
• My commit messages are clear and descriptive
• I have updated documentation if my changes affect public APIs, setup steps, or user-facing behavior

What Changed

Modified Files

src/services/slideshowApi.ts

• Added searchSlideshows(params) — GET /api/slideshows/search/ with q (required), mine, page, page_size params
• Follows existing service pattern (axios, getSafeErrorMessage, 10s timeout)

src/components/courses/AddModuleModal.tsx (rewrite)

Multi-step flow replacing the placeholder:

Step 1 — Type Selection:

• 2x2 grid of module type cards with icons
• "Slideshow" is active and clickable (using HiPresentationChartBar icon)
• Quiz, Notes, Assignment shown as disabled "Coming soon" cards
• Clicking Slideshow moves to step 2

Step 2 — Search & Select:

• Toggle: "My Slideshows" / "All Slideshows" (mine=true filter)
• Debounced search input (300ms) hitting /api/slideshows/search/?q=<query>
• In "My Slideshows" mode with empty query, lists all user's slideshows via listMySlideshows()
• Results show: title, description (truncated, line-clamp-2), Published/Draft badge, slide count, visibility label
• Race condition handling with cancelled flag pattern
• Clicking a result moves to step 3
• Back button returns to step 1

Step 3 — Confirm & Add:

• Selected slideshow summary with blue highlight card
• Module title input (pre-filled with slideshow title, editable, optional)
• Cancel + Add Module buttons (flex-col-reverse sm:flex-row)
• Submit calls onSubmit({ title, content_type: "slideshows.slideshow", object_id })
• Error messages shown inline on failure
• Back button returns to step 2

Edit mode (when editModule prop is provided):

• Skips step 1, starts at step 2 with type pre-set from editModule.content_type
• Title pre-populated from editModule.title
• Button shows "Save Module" instead of "Add Module"
• No back button to type selection

General:

• Props interface unchanged — no changes to ModulesTab.tsx
• max-w-sm sm:max-w-lg, max-h-[90vh] overflow-y-auto for responsive sizing
• RTL support: start-/end- logical properties, rtl:rotate-180 on back arrow
• Dark mode throughout
• State resets when modal closes and reopens

src/i18n/locales/en.json

Replaced old placeholder keys (comingSoon, contentTypeLabel, contentTypePlaceholder, objectIdLabel, objectIdPlaceholder) with 20 new keys for the step-based flow: type labels, search UX, toggle labels, badges, empty states, confirm step.

src/i18n/locales/ar.json

Matching Arabic translations for all new keys.

New Files

src/components/courses/__tests__/AddModuleModal.test.tsx (26 tests)

• Rendering: modal hidden/visible, title, type selection grid, disabled future types
• Step 1: navigates to search on Slideshow click, disabled types don't navigate
• Step 2: loads My Slideshows by default, published/draft badges, slide counts, debounced search, My/All toggle, no results message, select navigates to confirm, back to type selection
• Step 3: selected slideshow details, pre-filled title, editable title, submit with correct data, submit error shown, back to search
• Edit mode: skips type selection, shows Edit Module heading, Save Module button
• Close/reset: cancel calls onClose, resets to type selection on reopen

How to Test

1. Start the app: make up or cd Frontend/EduLiteFrontend && npm run dev
2. Log in as a teacher of any course
3. Navigate to the course detail page → Modules tab
4. Click "Add Module" button

Full Add Flow

1. Type selection grid appears — Slideshow active, Quiz/Notes/Assignment greyed out
2. Click Slideshow → search view appears
3. "My Slideshows" tab shows your slideshows immediately (no search needed)
4. Toggle to "All Slideshows" → prompts to type a search query
5. Type 2+ characters → results appear after 300ms debounce
6. Results show title, description, Published/Draft badge, slide count
7. Click a result → confirm view with selected content summary
8. Module title is pre-filled with slideshow title (editable)
9. Click "Add Module" → module added, modal closes, toast appears
10. Use Back button at any step to go to the previous step

Edit Flow

1. Click the edit (pencil) icon on an existing module
2. Modal opens directly on search step (type already known)
3. Title shows "Edit Module"
4. Select a new slideshow → confirm shows "Save Module" button

Edge Cases

• Search with < 2 characters in "All" mode → shows "Type at least 2 characters"
• No results → shows empty state with hint
• API error → shows error message inline
• Submit failure → error shown, modal stays open

RTL Testing

• Switch to Arabic
• Back arrow flips direction
• Search icon on correct side
• Toggle buttons, result cards, badges all flow correctly

Run Tests

cd Frontend/EduLiteFrontend
npx tsc --noEmit    # No type errors
npm run lint        # No lint errors
npm run test        # 708 tests pass (34 files)
npx vite build      # Build succeeds

Screenshots (if applicable)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
edulite	Ready	Preview, Comment	Feb 13, 2026 2:17pm

[github-actions]

PR Template Check

All checks passed.