Admin confirm modal without external dependency by forkata · Pull Request #6528 · solidusio/solidus

forkata · 2026-07-30T20:59:23Z

Summary

This change addresses the concerns raised in the original PR #6295 re: adding an additional dependency.

In this change we dropped the dependency on https://github.com/RoleModel/turbo-confirm and instead wire the new confirm component directly. There are two additional changes in this PR from the original, the first is just a plain JS function to achieve this, and the last commit tries to refactor that into a Stimulus JS controller. The final approach still uses query selectors to target the dialog title and body but we could potentially refactor the the modal UI component to allow us to pass Stimulus target references down. We did not go as far as doing that in this PR.

We also noticed that our modal component has a data-controller reference on it, but we do not have a modal controller defined for that so we've removed it in the last commit to reduce confusion and allow the new parent controller to not conflict with that if we do decide to inject targets in the future.

Checklist

Check out our PR guidelines for more details.

The following are mandatory for all PRs:

I agree that my PR will be published under the same license as Solidus.
I have written a thorough PR description.
I have kept my commits small and atomic.
I have localized any and all user-facing strings that I added to the source code.
I have used clear, explanatory commit messages.

The following are not always needed:

📖 I have updated the README to account for my changes.
📑 I have documented new code with YARD.
🛣️ I have opened a PR to update the guides.
✅ I have added automated tests to cover my changes.
📸 I have attached screenshots to demo visual changes.

codecov · 2026-07-30T21:12:57Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.16%. Comparing base (4697059) to head (827680e).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6528   +/-   ##
=======================================
  Coverage   92.16%   92.16%           
=======================================
  Files        1036     1037    +1     
  Lines       21188    21195    +7     
=======================================
+ Hits        19527    19534    +7     
  Misses       1661     1661

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

forkata · 2026-08-11T18:36:04Z

@tvdeyen This should be ready for review now!

jarednorman · 2026-08-12T00:05:29Z

+import { openConfirmModal } from "solidus_admin/confirm_modal"
 import "solidus_admin/web_components/solidus_select"
+
+Turbo.config.forms.confirm = openConfirmModal


I believe Turbo.config.forms was added in turbo-rails 2.0.8. If we add this, we need to update our version constraint to s.add_dependency "turbo-rails", "~> 2.0", ">= 2.0.8".

I opted to add a fallback here for the previous way to configure this, but let me know if you prefer we bump this version instead.

jarednorman · 2026-08-12T00:09:01Z

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Component wrapper for confirmation dialog to use with rolemodel/turbo-confirm.


Please update the docs.

jarednorman · 2026-08-12T00:09:31Z

+  ) do |modal| %>
+    <% modal.with_actions do %>
+      <form method="dialog">
+        <%= render component("ui/button").new(scheme: :secondary, text: t(".cancel"), class: "confirm-cancel") %>


Nothing references the CSS class.

I removed the custom class here, it doesn't seem like it was needed.

jarednorman · 2026-08-12T00:10:10Z

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# @component "ui/modal"


If I understand correctly, this should be layout/confirm, not ui/modal.

Good catch, must have been a copy/paste error. I updated this.

* adds possibility to conditionally open modal on connect - use stimulus value instead of Dialog's "open" attribute (applying attribute directly on dialog element is discouraged by HTML specification https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open#value); * adds identifier classes to title ".modal-title" and body ".modal-body" so that turbo-confirm can target them correctly; * adds "empty:hidden" so that when no content is passed the empty div does not take space in the modal;

Updates several components to use "data-turbo-confirm" and new confirmation dialog instead of native browser confirm. Removes redundant confirm_controller.js.

Use plain DOM calls to update the confirm dialog markup and show the confirmation modal. This change also pins the new module in the importmap so the bare specifier resolves. Co-authored-by: Senem Soy <senem@super.gd> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Move DOM manipulation out of confirm_modal.js and into a proper component.js Stimulus controller for layout/confirm, attached via data-controller on a wrapper around the modal. confirm_modal.js is now a thin adapter that looks up the controller instance and calls its `open` method, matching how the rest of the admin's per-component JS is structured (e.g. ui/modal, ui/table). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Co-authored-by: Senem Soy <senem@super.gd>

forkata

@jarednorman I addressed your comments here, feel free to take another look!

forkata · 2026-08-17T21:47:30Z

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# @component "ui/modal"


Good catch, must have been a copy/paste error. I updated this.

forkata · 2026-08-18T23:04:52Z

+import { openConfirmModal } from "solidus_admin/confirm_modal"
 import "solidus_admin/web_components/solidus_select"
+
+Turbo.config.forms.confirm = openConfirmModal


I opted to add a fallback here for the previous way to configure this, but let me know if you prefer we bump this version instead.

forkata · 2026-08-18T23:05:02Z

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Component wrapper for confirmation dialog to use with rolemodel/turbo-confirm.


forkata · 2026-08-18T23:05:25Z

+  ) do |modal| %>
+    <% modal.with_actions do %>
+      <form method="dialog">
+        <%= render component("ui/button").new(scheme: :secondary, text: t(".cancel"), class: "confirm-cancel") %>


I removed the custom class here, it doesn't seem like it was needed.

`Turbo.config` was introduced in version 8.0.6[^1]. This change ensures that apps using older versions of Turbo can still get the custom confirmation modal behaviour and not error out. [^1]: https://github.com/hotwired/turbo/releases/tag/8.0.6

tvdeyen

Thanks

github-actions Bot added the changelog:solidus_admin label Jul 30, 2026

github-project-automation Bot added this to Solidus Admin Jul 30, 2026

forkata changed the title ~~Admin confirm modal~~ Admin confirm modal without external dependency Jul 30, 2026

forkata mentioned this pull request Jul 30, 2026

[Admin] Confirmation modal #6295

Closed

4 tasks

forkata force-pushed the admin-confirm-modal branch 3 times, most recently from 4c08167 to d7a84d3 Compare August 11, 2026 18:23

forkata marked this pull request as ready for review August 11, 2026 18:35

forkata requested a review from a team as a code owner August 11, 2026 18:35

jarednorman requested changes Aug 12, 2026

View reviewed changes

chaimann and others added 11 commits August 18, 2026 15:52

Create confirm modal component

5cae3b5

Render confirmation modal in application layout

4b3a9cf

Update existing confirmation usages

3ced631

Updates several components to use "data-turbo-confirm" and new confirmation dialog instead of native browser confirm. Removes redundant confirm_controller.js.

Update UI table batch actions to use turbo-confirm

6e35b09

Add #accept_turbo_confirm feature helper

f4c6213

Update feature tests to pass with turbo-confirm

d211fd7

Add component preview

25f6ed7

Fix standard violations in new component preview

9130127

Co-authored-by: Senem Soy <senem@super.gd>

forkata force-pushed the admin-confirm-modal branch from d7a84d3 to daa1d4f Compare August 18, 2026 23:03

forkata commented Aug 18, 2026

View reviewed changes

forkata requested a review from jarednorman August 18, 2026 23:06

forkata force-pushed the admin-confirm-modal branch from daa1d4f to 827680e Compare August 18, 2026 23:37

jarednorman approved these changes Aug 19, 2026

View reviewed changes

tvdeyen approved these changes Aug 19, 2026

View reviewed changes

tvdeyen merged commit 3da19a9 into solidusio:main Aug 19, 2026
43 checks passed

github-project-automation Bot moved this to Done in Solidus Admin Aug 19, 2026

		@@ -0,0 +1,25 @@
		# frozen_string_literal: true

		# Component wrapper for confirmation dialog to use with rolemodel/turbo-confirm.

		@@ -0,0 +1,13 @@
		# frozen_string_literal: true

		# @component "ui/modal"

Uh oh!

Uh oh!

Conversation

forkata commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

codecov Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

forkata commented Aug 11, 2026

Uh oh!

jarednorman Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

forkata left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tvdeyen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

forkata commented Jul 30, 2026 •

edited

Loading

codecov Bot commented Jul 30, 2026 •

edited

Loading

jarednorman Aug 12, 2026 •

edited

Loading