Add datetime preview selector for time-travel preview of scheduled elements

tvdeyen · tvdeyen · commit d7ce119a0bc1 · 2026-03-27T08:20:36.000+01:00
Alchemy now supports previewing pages as they will appear at a specific
point in time. This allows content editors to verify that scheduled
elements will publish and unpublish correctly.

The feature adds a preview_at attribute to Alchemy::Current which is
used globally by the Publishable concern to determine element visibility.
When a datetime is selected in the toolbar, both the page preview iframe
and the elements sidebar reload with time-filtered content. The published
scope and public? method on all publishable records (elements,
page versions) respect this setting, falling back to Time.current when
not set.

Signed-off-by: Thomas von Deyen &lt;vondeyen@blish.cloud&gt;
diff --git a/app/assets/builds/alchemy/admin.css b/app/assets/builds/alchemy/admin.css
diff --git a/app/assets/builds/alchemy/alchemy_admin.min.js b/app/assets/builds/alchemy/alchemy_admin.min.js
diff --git a/app/assets/builds/alchemy/alchemy_admin.min.js.map b/app/assets/builds/alchemy/alchemy_admin.min.js.map
diff --git a/app/components/alchemy/admin/preview_time_select.rb b/app/components/alchemy/admin/preview_time_select.rb
@@ -0,0 +1,55 @@
+module Alchemy
+  module Admin
+    class PreviewTimeSelect < ViewComponent::Base
+      erb_template <<~ERB
+        <div id="preview_time_select">
+          <div class="select_with_label">
+            <sl-tooltip content="<%= tooltip %>" placement="top-start">
+              <alchemy-icon name="calendar-schedule"></alchemy-icon>
+              <alchemy-auto-submit>
+                <form action="<%= url %>" method="get">
+                  <%= select_tag("alchemy_preview_time",
+                    options_for_select(preview_times, selected),
+                    include_blank: Alchemy.t(:now),
+                    disabled:) %>
+                </form>
+              <alchemy-auto-submit>
+            </sl-tooltip>
+          </div>
+          <div class="toolbar_spacer"></div>
+        </div>
+      ERB
+
+      def initialize(page_version, url:, selected: nil)
+        @page_version = page_version
+        @url = url
+        @selected = selected
+        @disabled = preview_times.none?
+      end
+
+      private
+
+      attr_reader :page_version, :selected, :url, :disabled
+
+      def preview_times
+        @_preview_times ||= begin
+          now = Time.current
+          elements = page_version.elements
+          future_public_on = elements.where("public_on > ?", now).pluck(:public_on)
+          future_public_until = elements.where("public_until > ?", now).pluck(:public_until)
+          times = (future_public_on | future_public_until)
+          times.sort!
+          times.map { |time| [l(time, format: :"alchemy.element_date"), time.iso8601] }
+        end
+      end
+
+      def tooltip
+        if disabled
+          Alchemy.t(:no_future_publication_dates)
+        else
+          Alchemy.t(:preview_time)
+        end
+      end
+    end
+  end
+end
diff --git a/app/controllers/alchemy/admin/elements_controller.rb b/app/controllers/alchemy/admin/elements_controller.rb
@@ -7,6 +7,7 @@ class ElementsController < Alchemy::Admin::BaseController
 
       before_action :load_page_and_version, only: [:index, :new]
       include Alchemy::Admin::Clipboard
+      include Alchemy::Admin::PreviewTime
 
       before_action :load_element, only: [:update, :destroy, :collapse, :expand, :publish]
       authorize_resource class: Alchemy::Element
diff --git a/app/controllers/alchemy/admin/pages_controller.rb b/app/controllers/alchemy/admin/pages_controller.rb
@@ -5,6 +5,7 @@ module Admin
     class PagesController < ResourcesController
       include OnPageLayout::CallbacksRunner
       include Alchemy::Admin::Clipboard
+      include Alchemy::Admin::PreviewTime
 
       helper "alchemy/pages"
 
diff --git a/app/javascript/alchemy_admin/components/datepicker.js b/app/javascript/alchemy_admin/components/datepicker.js
@@ -22,6 +22,12 @@ class Datepicker extends AlchemyHTMLElement {
     }
 
     this.flatpickr = flatpickr(this.inputField, this.flatpickrOptions)
+    this.inputField.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" || e.key === "Delete" || e.key === "Backspace") {
+        this.flatpickr.clear()
+        this.updatePreview("")
+      }
+    })
   }
 
   disconnected() {
diff --git a/app/models/concerns/alchemy/publishable.rb b/app/models/concerns/alchemy/publishable.rb
@@ -60,7 +60,7 @@ def already_public_for?(at: Current.preview_time)
     # @param at [DateTime] (Time.current)
     # @returns Boolean
     def still_public_for?(at: Current.preview_time)
-      public_until.nil? || public_until >= at
+      public_until.nil? || public_until > at
     end
   end
 end
diff --git a/app/stylesheets/alchemy/admin/toolbar.scss b/app/stylesheets/alchemy/admin/toolbar.scss
@@ -80,6 +80,14 @@
   margin-left: var(--spacing-1);
 }
 
+#preview_time_select {
+  display: inline-flex;
+
+  select {
+    width: var(--select-x-large-width);
+  }
+}
+
 #overlay_toolbar {
   @extend %gradiated-toolbar;
 }
diff --git a/app/views/alchemy/admin/elements/_schedule.html.erb b/app/views/alchemy/admin/elements/_schedule.html.erb
@@ -7,10 +7,10 @@
     <alchemy-message type="info">
       <% if element.public? %>
         <p><%= sanitize t(".visibility_status.public_html") %></p>
-        <% if element.scheduled? %>
+        <% if element.scheduled? && element.public_until.present? %>
           <%= sanitize t(".public_scheduled_html",
             public_until: l(element.public_until, format: :"alchemy.element_date")) %>
-        <% elsif element.public_until.blank? %>
+        <% else %>
           <%= t(".public_no_schedule") %>
         <% end %>
       <% else %>
diff --git a/app/views/alchemy/admin/elements/publish.turbo_stream.erb b/app/views/alchemy/admin/elements/publish.turbo_stream.erb
@@ -19,4 +19,10 @@
       page: @element.page
     ) %>
   <% end %>
+  <%= turbo_stream.replace "preview_time_select" do %>
+    <%= render Alchemy::Admin::PreviewTimeSelect.new(
+      @element.page_version,
+      url: edit_admin_page_path(@element.page),
+      selected: params[:alchemy_preview_time]) %>
+  <% end %>
 <% end %>
diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb
@@ -91,6 +91,10 @@
     </sl-tooltip>
   </div>
   <div class="toolbar_spacer"></div>
+  <%= render Alchemy::Admin::PreviewTimeSelect.new(
+    @page_version,
+    url: edit_admin_page_path(@page),
+    selected: params[:alchemy_preview_time]) %>
   <% if @preview_urls.many? %>
     <div class="select_with_label">
       <label><%= Alchemy.t(:preview_url) %></label>
@@ -132,7 +136,7 @@
   title="<%= Alchemy.t("Page preview") %>">
 </iframe>
 
-<%= turbo_frame_tag "alchemy_elements_window", src: alchemy.admin_elements_path(page_version_id: @page_version.id) do %>
+<%= turbo_frame_tag "alchemy_elements_window", src: alchemy.admin_elements_path(page_version_id: @page_version.id, alchemy_preview_time: params[:alchemy_preview_time]) do %>
   <alchemy-spinner></alchemy-spinner>
 <% end %>
 
diff --git a/config/locales/alchemy.en.yml b/config/locales/alchemy.en.yml
@@ -609,7 +609,9 @@ en:
       "1024": "iPad Landscape (1024px)"
       "1280": "Laptop (1280px)"
       "1440": "Desktop (1440px)"
+    preview_time: "Preview Time"
     preview_url: Preview
+    now: "Now"
     publish_page_language_not_public: Cannot publish page if language is not public
     publish_page_not_allowed: You have not the permission to publish this page
     recently_uploaded_only: "Recently uploaded only"
diff --git a/lib/alchemy/admin/preview_time.rb b/lib/alchemy/admin/preview_time.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module Admin
+    module PreviewTime
+      extend ActiveSupport::Concern
+
+      included do
+        before_action :set_preview_time, if: :should_set_preview_time?
+      end
+
+      private
+
+      def set_preview_time
+        Current.preview_time = Time.zone.parse(params[:alchemy_preview_time])
+      end
+
+      def should_set_preview_time?
+        params[:alchemy_preview_time].present? && can?(:edit_content, Alchemy::Page)
+      end
+    end
+  end
+end
diff --git a/lib/alchemy/admin/preview_url.rb b/lib/alchemy/admin/preview_url.rb
@@ -47,10 +47,13 @@ def url_for(page)
             port: uri.port,
             path: page.url_path,
             userinfo: userinfo,
-            query: {alchemy_preview_mode: true}.to_param
+            query: {
+              alchemy_preview_mode: true,
+              alchemy_preview_time: Current.preview_time.iso8601
+            }.to_param
           ).to_s
         else
-          routes.admin_page_path(page)
+          routes.admin_page_path(page, alchemy_preview_time: Current.preview_time.iso8601)
         end
       end
 
diff --git a/lib/alchemy_cms.rb b/lib/alchemy_cms.rb
@@ -24,6 +24,7 @@
 require_relative "alchemy/ability_helper"
 require_relative "alchemy/admin/locale"
 require_relative "alchemy/admin/timezone"
+require_relative "alchemy/admin/preview_time"
 require_relative "alchemy/admin/preview_url"
 require_relative "alchemy/auth_accessors"
 require_relative "alchemy/cache_digests/template_tracker"
diff --git a/spec/components/alchemy/admin/preview_time_select_spec.rb b/spec/components/alchemy/admin/preview_time_select_spec.rb
@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Alchemy::Admin::PreviewTimeSelect, type: :component do
+  let(:page_version) { create(:alchemy_page_version) }
+  let(:url) { "/admin/pages/1/edit" }
+  let(:component) { described_class.new(page_version, url:, selected:) }
+  let(:selected) { nil }
+
+  describe "#render?" do
+    context "with no future scheduled elements" do
+      before do
+        create(:alchemy_element, page_version:, public_on: 1.day.ago)
+      end
+
+      it "does not render" do
+        render_inline component
+        expect(page).not_to have_css("#preview_time_select")
+      end
+    end
+
+    context "with future scheduled elements" do
+      before do
+        create(:alchemy_element, page_version:, public_on: 1.day.from_now)
+      end
+
+      it "renders" do
+        render_inline component
+        expect(page).to have_css("#preview_time_select")
+      end
+    end
+  end
+
+  describe "preview_times" do
+    it "includes future public_on dates" do
+      future_time = 2.days.from_now.change(usec: 0)
+      create(:alchemy_element, page_version:, public_on: future_time)
+
+      render_inline component
+      expect(page).to have_css("option[value='#{future_time.iso8601}']")
+    end
+
+    it "includes future public_until dates" do
+      future_time = 3.days.from_now.change(usec: 0)
+      create(:alchemy_element, page_version:, public_on: 1.day.ago, public_until: future_time)
+
+      render_inline component
+      expect(page).to have_css("option[value='#{future_time.iso8601}']")
+    end
+
+    it "excludes past public_on dates" do
+      past_time = 1.day.ago.change(usec: 0)
+      future_time = 1.day.from_now.change(usec: 0)
+      create(:alchemy_element, page_version:, public_on: past_time, public_until: future_time)
+
+      render_inline component
+      expect(page).not_to have_css("option[value='#{past_time.iso8601}']")
+    end
+
+    it "excludes past public_until dates" do
+      past_time = 1.hour.ago.change(usec: 0)
+      create(:alchemy_element, page_version:, public_on: 2.days.ago, public_until: past_time)
+
+      # Need another future element so the component renders
+      create(:alchemy_element, page_version:, public_on: 1.day.from_now)
+
+      render_inline component
+      expect(page).not_to have_css("option[value='#{past_time.iso8601}']")
+    end
+
+    it "deduplicates identical timestamps" do
+      future_time = 2.days.from_now.change(usec: 0)
+      create(:alchemy_element, page_version:, public_on: future_time)
+      create(:alchemy_element, page_version:, public_on: future_time)
+
+      render_inline component
+      expect(page).to have_css("option[value='#{future_time.iso8601}']", count: 1)
+    end
+
+    it "sorts times chronologically" do
+      later = 3.days.from_now.change(usec: 0)
+      earlier = 1.day.from_now.change(usec: 0)
+      create(:alchemy_element, page_version:, public_on: later)
+      create(:alchemy_element, page_version:, public_on: earlier)
+
+      render_inline component
+      values = page.all("select option:not([value=''])").map { |o| o[:value] }
+      expect(values).to eq([earlier.iso8601, later.iso8601])
+    end
+  end
+
+  describe "selected option" do
+    let(:future_time) { 2.days.from_now.change(usec: 0) }
+    let(:selected) { future_time.iso8601 }
+
+    before do
+      create(:alchemy_element, page_version:, public_on: future_time)
+    end
+
+    it "marks the matching option as selected" do
+      render_inline component
+      expect(page).to have_css("option[selected][value='#{future_time.iso8601}']")
+    end
+  end
+
+  describe "form" do
+    before do
+      create(:alchemy_element, page_version:, public_on: 1.day.from_now)
+    end
+
+    it "submits to the given url" do
+      render_inline component
+      expect(page).to have_css("form[action='#{url}'][method='get']")
+    end
+
+    it "has a blank option for Now" do
+      render_inline component
+      expect(page).to have_css("option[value='']", text: "Now")
+    end
+  end
+end
diff --git a/spec/controllers/alchemy/admin/elements_controller_spec.rb b/spec/controllers/alchemy/admin/elements_controller_spec.rb
@@ -39,6 +39,21 @@ module Alchemy
         get :index, params: {page_version_id: page_version.id}
         expect(assigns(:elements)).to eq([element, parent_for_nested, hidden_element])
       end
+
+      context "with alchemy_preview_time param" do
+        it "sets Current.preview_time" do
+          preview_time = "2025-06-15T12:00:00Z"
+          expect(Alchemy::Current).to receive(:preview_time=).with(Time.zone.parse(preview_time))
+          get :index, params: {page_version_id: page_version.id, alchemy_preview_time: preview_time}
+        end
+      end
+
+      context "without alchemy_preview_time param" do
+        it "does not set Current.preview_time" do
+          expect(Alchemy::Current).not_to receive(:preview_time=)
+          get :index, params: {page_version_id: page_version.id}
+        end
+      end
     end
 
     describe "#order" do

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,12 @@ class Datepicker extends AlchemyHTMLElement {`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`this.flatpickr = flatpickr(this.inputField, this.flatpickrOptions)`
	`25`	`+ this.inputField.addEventListener("keydown", (e) => {`
	`26`	`+ if (e.key === "Escape" \|\| e.key === "Delete" \|\| e.key === "Backspace") {`
	`27`	`+ this.flatpickr.clear()`
	`28`	`+ this.updatePreview("")`
	`29`	`+ }`
	`30`	`+ })`
`25`	`31`	`}`
`26`	`32`
`27`	`33`	`disconnected() {`
Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,14 @@`
`80`	`80`	`margin-left: var(--spacing-1);`
`81`	`81`	`}`
`82`	`82`
	`83`	`+#preview_time_select {`
	`84`	`+ display: inline-flex;`
	`85`	`+`
	`86`	`+ select {`
	`87`	`+ width: var(--select-x-large-width);`
	`88`	`+ }`
	`89`	`+}`
	`90`	`+`
`83`	`91`	`#overlay_toolbar {`
`84`	`92`	`@extend %gradiated-toolbar;`
`85`	`93`	`}`