discourse/spec/system/page_objects/modals/permanently_delete_confirm.rb
Régis Hanol 28dae66fb1
UX: Migrate permanently-delete confirmation to DModal (#39896)
The "Permanently delete" confirmation was rendered through the legacy
dialog service, which hard-coded `width: 25vw` on the container. On
narrow mobile viewports (e.g. Edge at ~320px) that collapsed to ~80px,
clipping the modal and rendering the danger button unusable.

Rebuild the confirmation as a proper DModal so it picks up responsive
sizing, mobile keyboard handling, and footer wrapping for free.

- Add `components/modal/permanently-delete-confirm.gjs` with the
type-to-confirm input, btn-danger confirm, cancel, and the easter egg.
- Update the two call sites (`controllers/topic.js`,
`components/modal/history.gjs`) to invoke it via `modal.show(...)`
instead of `dialog.confirm(...)`, and delete the now-unused
`dialog-messages/permanently-delete-confirm.gjs`.
- Move the related styles to `.permanently-delete-confirm-modal` in
modal.scss, drop the 25vw width override, and allow the long danger
label to wrap so it no longer overflows on small screens.
- Replace the dialog-holder coverage with a dedicated
`PermanentlyDeleteConfirm` page object and route the system specs
through it.

https://meta.discourse.org/t/402663

**BEFORE**

<img width="402" height="690" alt="2026-05-11 @ 20 05 10"
src="https://github.com/user-attachments/assets/fb9dbfa7-4070-4557-87ea-0c73dc2be728"
/>

**AFTER**

<img width="410" height="693" alt="2026-05-11 @ 20 04 03"
src="https://github.com/user-attachments/assets/ab975c45-d4aa-43e5-80dc-67578da2f25d"
/>
2026-05-12 11:42:52 +02:00

21 lines
518 B
Ruby
Vendored

# frozen_string_literal: true
module PageObjects
module Modals
class PermanentlyDeleteConfirm < PageObjects::Modals::Base
MODAL_SELECTOR = ".permanently-delete-confirm-modal"
def fill_in_confirmation_phrase(phrase)
body.find("input.confirmation-phrase").fill_in(with: phrase)
end
def click_danger
footer.find(".btn-danger").click
end
def has_confirm_button_disabled?
has_css?("#{footer_selector} .btn-danger[disabled]")
end
end
end
end