Feature: Custom Confirmation Dialogs (#5133)

Because:
- Our confirmation dialogs should have similar styling to the rest of
the site.

This commit:
- Introduces a branded TOP-style dialog component for consistent,
accessible confirmations.
- Adds a Stimulus "dialog router" controller that allows dialogs to be
placed anywhere in the DOM and triggered via data attributes, avoiding
messy nested markup.
- Integrates the new confirmation dialog for project submission
deletions.

<img width="966" height="579" alt="Screenshot 2025-10-17 at 09 03 20"
src="https://github.com/user-attachments/assets/a2bd73e7-e42f-45d4-ab0e-9a77841933ab"
/>

Author: KevinMulhern

app/components/overlays/dialog_component.html.erb

@@ -0,0 +1,13 @@
+<div
+  id="<%= id %>"
+  data-controller="overlays--dialog"
+  data-dialog-router-target="dialog"
+  data-action="overlays--dialog:click:outside->overlays--dialog#close turbo:submit-end->overlays--dialog#submitEnd keydown->overlays--dialog#onKeydown">
+  <dialog
+    data-overlays--dialog-target="dialog"
+    class="z-50 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 m-0 transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:w-full sm:max-w-lg sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95 dark:bg-gray-800 dark:outline dark:-outline-offset-1 dark:outline-white/10 backdrop:bg-gray-500/75 dark:backdrop:bg-black/50">
+    <div data-overlays--dialog-target="content">
+      <%= content %>
+    </div>
+  </dialog>
+</div>

app/components/overlays/dialog_component.rb

@@ -0,0 +1,9 @@
+class Overlays::DialogComponent < ApplicationComponent
+  def initialize(id:)
+    @id = id
+  end
+
+  private
+
+  attr_reader :id
+end

app/components/overlays/dialog_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['dialog', 'content']
+
+  connect () {
+    this.element.dialog = this
+    useClickOutside(this, { element: this.contentTarget })
+  }
+
+  open () {
+    this.dialogTarget.showModal()
+  }
+
+  close () {
+    this.dialogTarget.close()
+  }
+
+  submitEnd (event) {
+    if (event.detail.success) {
+      this.close()
+    }
+  }
+
+  onKeydown (event) {
+    if (event.key === 'Escape') {
+      this.close()
+    }
+  }
+}

app/components/project_submissions/user_solution_component.html.erb

@@ -34,12 +34,32 @@
             Edit
           <% end %>
 
-          <%= link_to lesson_project_submission_path(project_submission.lesson, project_submission), class: 'text-gray-700 dark:text-gray-300 group flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-gray-200', role: 'menuitem', tabindex: '-1', data: { turbo_method: :delete, turbo_confirm: 'Are you sure? this cannot be undone.', test_id: 'delete-submission' } do %>
+          <%= link_to(
+                lesson_project_submission_path(project_submission.lesson, project_submission),
+                class: 'text-gray-700 dark:text-gray-300 group flex items-center px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-gray-200',
+                role: 'menuitem',
+                tabindex: '-1',
+                data: { action: 'dialog-router#open:prevent visibility#off', dialog_router_id_param: 'delete_user_submission', test_id: 'delete-submission-btn' }
+              ) do %>
             <%= inline_svg_tag 'icons/trash.svg', class: 'mr-3 h-4 w-4 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300', aria: true, title: 'edit', desc: 'edit icon' %>
             Delete
           <% end %>
         </div>
       </div>
     </div>
   </div>
+
+  <%= render Overlays::DialogComponent.new(id: 'delete_user_submission') do |component| %>
+    <div>
+      <h3 id="dialog-title" class="text-base font-semibold text-gray-900 dark:text-white">Delete project</h3>
+      <div class="mt-2">
+        <p class="text-sm text-gray-600 dark:text-gray-300">Are you sure you want to remove this project? This action cannot be undone.</p>
+      </div>
+    </div>
+
+    <div class="mt-5 flex flex-row-reverse gap-x-2">
+      <%= button_to 'Delete', lesson_project_submission_path(project_submission.lesson, project_submission), method: :delete, class: 'button button--danger bg-red-600 !px-3 !py-2 text-sm font-semibold min-w-0 focus:ring-0 focus:ring-offset-0', data: { test_id: 'confirm-delete-submission-btn'} %>
+      <button type="button" data-action="overlays--dialog#close" class="button button--secondary px-3 py-2 text-sm font-semibold min-w-0">Cancel</button>
+    </div>
+  <% end %>
 </div>

app/javascript/controllers/dialog_router_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['dialog']
+
+  open ({ params: { id } }) {
+    const element = this.dialogTargets.find(dialog => dialog.id === id)
+
+    element.dialog.open()
+  }
+}

app/views/layouts/admin/base.html.erb

@@ -28,7 +28,7 @@
     <%= javascript_include_tag 'main', defer: true, data: { turbo_track: 'reload' } %>
   </head>
 
-  <body class="h-full bg-white text-gray-600 dark:bg-gray-900 dark:text-gray-300">
+  <body data-controller="dialog-router" class="h-full bg-white text-gray-600 dark:bg-gray-900 dark:text-gray-300">
     <div>
       <%= render 'layouts/admin/sidebar_nav' %>
       <div class="lg:pl-72">

app/views/layouts/application.html.erb

@@ -27,7 +27,7 @@
     <%= javascript_include_tag 'main', defer: true, data: { turbo_track: 'reload' } %>
   </head>
 
-  <body class="h-full bg-gray-50 text-gray-600 dark:bg-gray-900 dark:text-gray-300">
+  <body data-controller="dialog-router" class="h-full bg-gray-50 text-gray-600 dark:bg-gray-900 dark:text-gray-300">
     <%= render AnnouncementComponent.new(announcement: Announcement.showable_messages(disabled_announcement_ids).first) %>
     <%= render 'shared/navbar' %>
     <div id="flash-messages">

spec/components/overlays/dialog_component_spec.rb

@@ -0,0 +1,11 @@
+require 'rails_helper'
+
+RSpec.describe Overlays::DialogComponent, type: :component do
+  it 'renders' do
+    component = described_class.new(id: 'test-dialog')
+
+    render_inline(component)
+
+    expect(page).to have_css('#test-dialog')
+  end
+end

spec/system/lesson_project_submissions/delete_submission_spec.rb

@@ -16,9 +16,8 @@
 
       find(:test_id, 'submission-action-menu-btn').click
 
-      page.accept_confirm do
-        find(:test_id, 'delete-submission').click
-      end
+      find(:test_id, 'delete-submission-btn').click
+      find(:test_id, 'confirm-delete-submission-btn').click
 
       expect(page).to have_content('Submit your solution')
       expect(page).to have_no_content(lesson.title)

spec/system/user_project_submissions/delete_submission_spec.rb

@@ -17,10 +17,8 @@
     end
 
     find(:test_id, 'submission-action-menu-btn').click
-
-    page.accept_confirm do
-      find(:test_id, 'delete-submission').click
-    end
+    find(:test_id, 'delete-submission-btn').click
+    find(:test_id, 'confirm-delete-submission-btn').click
 
     within(:test_id, 'user-submissions-list') do
       expect(page).to have_no_content(lesson.title)