Bugfix: ADAPT-3747 Course Structure QA follow-up (inline rename, icon cleanup, tips)

[lokeshece1]

✅ PR Completion Checklist

• PR title follows format: Prefix: ADAPT-XXXX Brief description
• JIRA ID linked in the Context section below
• Plugin version updated in bower.json (if applicable)
• npm run test-e2e-dev-pipeline executed and passing
• No new issues reported by SonarLint (attach screenshot if applicable)
• Own diff reviewed before requesting review
• At least two reviewers added (Copilot set as default)

---

Context

Resolves / Addresses ADAPT-3747

Follow-up to the merged Course Structure page (#270), addressing QA feedback.
Scope: New UI only (new-ui-source, served at /new) — source changes only;
build artifacts (public/new, dist) are pipeline-generated.

What changed

Applies the four QA items raised after testing the Course Structure page:

• Removed the extra Add (+) and Edit (pencil) icons on each structure row.
  Only Delete remains. Adding is available where the design puts it — the
  inline + Add … links under each container and the course-level
  + Add Topic / + Add Module / + Add Sub-Module buttons.
• Rename by clicking the title. Clicking a Module/Topic/Section/Content
  Group/Component title now starts inline rename (tooltip "Click to rename"),
  replacing the separate edit icon.
• Guidance tip added at the bottom of the Course Structure page to guide
  next steps (rename, drag to reorder/move, use + Add, then open a topic to edit).
• Map view note clearly states that drag-and-drop reordering is available in
  Tree view — the Map shows the current structure but isn't draggable
  (shown in both normal and fullscreen Map).

Files

• new-ui-source/src/components/course/CourseStructureTree.tsx — remove +/pencil
  icons, click-title-to-rename, drop unused onOpenTopic prop
• new-ui-source/src/components/course/CourseStructureMapView.tsx — "drag in Tree
  view" note
• new-ui-source/src/pages/SetupPage.tsx — bottom tip; drop onOpenTopic from the
  Tree usage

Testing

• npx tsc --noEmit — clean
• Manual (New UI → Course Setup → Course Structure):
  • Rows show only a Delete icon on hover; no + or pencil
  • Clicking any item title renames it inline (Enter to save, Esc to cancel)
  • Adding still works via the inline "+ Add …" links and course-level buttons
  • Tip appears at the bottom of the page
  • Map view (normal and fullscreen) shows the "drag-and-drop is available in
    Tree view" note

Notes

• Title click now renames in Tree view; opening a topic in the editor is still
  available from the Map's Topic cards.
• Behavioral rules from earlier iterations are unchanged (mandatory-topic guards,
  2-component cap, warn-and-allow on last-component delete, drag-and-drop
  validation).

[Copilot]

Pull request overview

This PR addresses ADAPT-3747 QA feedback for the New UI Course Structure page by simplifying row actions, making rename inline via title click in Tree view, and adding user guidance in both Tree/Map contexts.

Changes:

• Removes per-row +/edit icons in Tree view and switches to click-title-to-rename.
• Adds a bottom-of-page “Tip” block on the Course Structure panel to guide next steps.
• Adds a Map view note clarifying that drag-and-drop reordering is available in Tree view (including fullscreen Map).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
new-ui-source/src/pages/SetupPage.tsx	Removes onOpenTopic from Tree usage and adds a bottom guidance tip for Course Structure.
new-ui-source/src/components/course/CourseStructureTree.tsx	Updates Tree row interactions: title click triggers inline rename; removes quick add / pencil row icons while retaining “+ Add …” links under containers.
new-ui-source/src/components/course/CourseStructureMapView.tsx	Adds an informational note indicating reordering is done in Tree view and shows it in both normal and fullscreen Map.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (4)

new-ui-source/src/pages/SetupPage.tsx:442

• The tip text says users can “open a topic” after building the structure, but Tree view no longer has any way to open a topic in the editor (title click now triggers rename). This is likely to confuse users; either mention that opening happens from Map view topic cards, or provide an explicit “Open in editor” action in Tree view.

          <span className="font-medium text-[#374151]">Tip:</span> Click an item’s title to rename it. In Tree view,
          drag items to reorder or move them across the hierarchy. Use the <span className="font-medium">+ Add</span> links
          to build out your structure, then open a topic to add content in the editor.

new-ui-source/src/pages/SetupPage.tsx:436

• This inline SVG is decorative, but it will be exposed to screen readers as content. Mark it as decorative (aria-hidden) and non-focusable to avoid noisy announcements for assistive tech users.

        <svg className="shrink-0 mt-0.5 text-[#f0b429]" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">

new-ui-source/src/components/course/CourseStructureMapView.tsx:220

• The new comment states Map view is “read-only”, but this component still supports actions like rename and add (e.g., the pencil rename control and add buttons). This comment is misleading for future maintenance; it should specifically call out the missing capability (drag-and-drop reordering).

  // Map view is a read-only visualization; editing/reordering lives in Tree view.

new-ui-source/src/components/course/CourseStructureMapView.tsx:223

• This info icon SVG is decorative, but it will be announced by screen readers. Add aria-hidden/focusable attributes so assistive tech reads only the note text.

      <svg className="shrink-0" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Suppressed comments (6)

new-ui-source/src/components/course/CourseStructureTree.tsx:226

• The title is rendered as a but its accessible name is only the current title text, which doesn’t convey that activating it starts rename. Add an explicit aria-label describing the action (rename) for screen readers.

              <button
                type="button"
                onClick={() => startRename(p.id, p.title)}
                title="Click to rename"
                className={`min-w-0 truncate text-left text-sm hover:text-[#2d6fa8] ${isModule ? 'font-bold uppercase tracking-wide text-[#374151]' : p.level === 'topic' ? 'font-semibold text-[#111827]' : 'text-[#374151]'}`}
              >

new-ui-source/src/components/course/CourseStructureMapView.tsx:225

• The Map note’s info icon SVG is decorative but will be announced by screen readers as a graphic. Mark it aria-hidden (and focusable=false for SVG) to reduce noise.

    <div className="flex items-center gap-2 rounded-lg bg-[#eff6ff] border border-[#bfdbfe] px-3.5 py-2 text-sm text-[#1e5a91]">
      <svg className="shrink-0" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
      </svg>

new-ui-source/src/pages/SetupPage.tsx:465

• The star SVG next to the “Your structure is ready” hint is decorative but will be announced by screen readers. Mark it aria-hidden (and focusable=false) to avoid extra noise.

          <div className="flex items-start gap-3">
            <svg className="shrink-0 mt-0.5 text-[#2d6fa8]" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
            </svg>

new-ui-source/src/components/course/CourseStructureMapView.tsx:272

• The new “Map view is read-only / drag in Tree view” note is only rendered in fullscreen mode. The PR description and QA scope mention it should appear in both normal and fullscreen Map views, so non-fullscreen users won’t see the guidance.

                <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
              </svg>
            </button>
          </div>
          <div className="px-4 pt-3">{mapNote}</div>

new-ui-source/src/pages/SetupPage.tsx:481

• The bottom hint suggests Storyboard can be used to “review and refine the content flow”, but the Storyboarding nav currently renders the generic ComingSoonPanel. This makes the guidance misleading; either adjust the copy/CTA to indicate it’s not available yet, or wire it to a real storyboard view.

              <p className="text-sm text-[#5b7c93] mt-1">
                Open Storyboard to review and refine the content flow, or select a topic to continue building in the
                Page Editor with content, layouts, interactions, and learner experience settings.
              </p>
              <button
                type="button"
                onClick={onOpenStoryboard}
                className="mt-3 inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-[#2d6fa8] rounded-lg hover:bg-[#255d8f] transition-colors"

new-ui-source/src/pages/SetupPage.tsx:460

• The dismiss button already has an aria-label, so its inner close icon SVG is decorative. Mark the SVG aria-hidden (and focusable=false) so it isn’t announced by screen readers.

This issue also appears on line 462 of the same file.

          <button
            type="button"
            onClick={() => setHintDismissed(true)}
            aria-label="Dismiss"
            className="absolute top-3 right-3 p-1 rounded text-[#9ca3af] hover:text-[#374151] hover:bg-white/60 transition-colors"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
            </svg>