Merge branch 'issue-13611' into 'rails'

feat: recargar automáticamente el estado de publicación #13611

Closes #16126, #16125, #16116, #16074, #16073, #16064, #16063, #16051, #16050, #16024, #16023, #16016, #16015, #16004, #16003, #15975, #15974, #15973, #15894, #15893, #15884, #15883, #15881, and #15880

See merge request sutty/sutty!248

app/controllers/sites_controller.rb

@@ -15,6 +15,19 @@ class SitesController < ApplicationController
     fresh_when @sites
   end
 
+  # Genera la caja del estado para HTMX
+  def status
+    authorize site
+
+    render('sites/status', layout: false) if stale? site
+  end
+
+  def button
+    authorize site
+
+    render('sites/build', layout: false)
+  end
+
   # No tenemos propiedades de un sitio aún, así que vamos al listado de
   # artículos
   def show

app/javascript/etc/htmx_abort.js

@@ -0,0 +1,7 @@
+// Cancela las peticiones pendientes de htmx para todos los elementos al
+// cambiar de página.
+document.addEventListener("turbolinks:click", () => {
+  for (const hx of document.querySelectorAll("[hx-get]")) {
+    window.htmx.trigger(hx, "htmx:abort");
+  }
+});

app/javascript/etc/index.js

@@ -7,3 +7,4 @@ import './timezone'
 import './turbolinks-anchors'
 import './validation'
 import './new_editor'
+import './htmx_abort'

app/javascript/packs/application.js

@@ -9,9 +9,16 @@ try {
     host: window.env.PANEL_URL
   });
 
+  const ignoredErrors = ["htmx:afterRequest", "htmx:sendAbort"];
+
   console.originalError = console.error;
   console.error = (...e) => {
-    window.airbrake.notify(e.join(" "));
+    const msg = e.join(" ");
+
+    if (!ignoredErrors.some(x => msg.includes(x))) {
+      window.airbrake.notify(e.join(" "));
+    }
+
     return console.originalError(...e);
   };
 } catch(e) {
@@ -33,3 +40,5 @@ import 'chartkick/chart.js'
 Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
+
+window.htmx = require('htmx.org/dist/htmx.js')

app/policies/site_policy.rb

@@ -14,6 +14,10 @@ class SitePolicy
     true
   end
 
+  def status?
+    true
+  end
+
   # Puede ver la versión privada del sitio?
   def private?
     edit? && site.deploys.find_by_type('DeployPrivate')
@@ -57,6 +61,10 @@ class SitePolicy
     show? && usuarie?
   end
 
+  def button?
+    show?
+  end
+
   def enqueue?
     build?
   end

app/views/posts/index.haml

@@ -3,7 +3,6 @@
     = render 'sites/header', site: @site
 
     = render 'sites/status', site: @site
-
     = render 'sites/build', site: @site, class: 'btn-block'
 
     %h3= t('posts.new')

app/views/sites/_build.haml

@@ -1,9 +1,10 @@
 - if policy(site).build?
-  = form_tag site_enqueue_path(site),
-    method: :post,
-    class: 'form-inline inline' do
-    = submit_tag site.enqueued? ? t('sites.enqueued') : t('sites.enqueue'),
-      class: "btn btn-secondary #{local_assigns[:class]}",
-      title: site.enqueued? ? t('help.sites.enqueued') : t('help.sites.enqueue'),
-      data: { disable_with: t('sites.enqueued') },
-      disabled: site.enqueued?
+  %div{ 'hx-get': site_button_path(site, class: local_assigns[:class]), 'hx-trigger': 'every 10s', 'hx-swap': 'outerHTML' }
+    = form_tag site_enqueue_path(site),
+      method: :post,
+      class: 'form-inline inline' do
+      = submit_tag site.enqueued? ? t('sites.enqueued') : t('sites.enqueue'),
+        class: "btn btn-secondary #{local_assigns[:class]}",
+        title: site.enqueued? ? t('help.sites.enqueued') : t('help.sites.enqueue'),
+        data: { disable_with: t('sites.enqueued') },
+        disabled: !site.waiting?

app/views/sites/_status.haml

@@ -1,21 +1,24 @@
-- link = nil
-- if site.not_published_yet?
-  - message = t('.not_published_yet')
-- elsif site.awaiting_publication?
-  - message = t('.awaiting_publication')
-- elsif site.building?
-  - if site.average_publication_time_calculable?
-    - average_building_time = site.average_publication_time
-  - elsif !site.similar_sites?
-    - average_building_time = 60
+- cache site do
+  - link = nil
+  - if site.not_published_yet?
+    - message = t('.not_published_yet')
+  - elsif site.awaiting_publication?
+    - message = t('.awaiting_publication')
+  - elsif site.building?
+    - if site.average_publication_time_calculable?
+      - average_building_time = site.average_publication_time
+    - elsif !site.similar_sites?
+      - average_building_time = 60
+    - else
+      - average_building_time = site.average_publication_time_for_similar_sites
+
+    - average_publication_time_human = distance_of_time_in_words average_building_time
+    - message = t('.building', average_time: average_publication_time_human, seconds: average_building_time)
   - else
-    - average_building_time = site.average_publication_time_for_similar_sites
+    - message = t('.available')
+    - link = true
 
-  - average_publication_time_human = distance_of_time_in_words average_building_time
-  - message = t('.building', average_time: average_publication_time_human, seconds: average_building_time)
-- else
-  - message = t('.available')
-  - link = true
-
-= render 'bootstrap/alert' do
-  = link_to_if link, message.html_safe, site_build_stats_path(site), class: 'alert-link'
+  -# TODO: Calcular cada cuánto sería óptimo recargar
+  %div{ 'hx-get': site_status_path(site), 'hx-trigger': 'every 10s', 'hx-swap': 'outerHTML' }
+    = render 'bootstrap/alert' do
+      = link_to_if link, message.html_safe, site_build_stats_path(site), class: 'alert-link'

app/views/sites/build.haml

@@ -0,0 +1 @@
+= render 'sites/build', site: @site, class: params.permit(:class)[:class]

app/views/sites/status.haml

@@ -0,0 +1 @@
+= render 'sites/status', site: @site

config/locales/en.yml

@@ -389,7 +389,7 @@ en:
     static_file_migration: 'File migration'
     find_and_replace: 'Search and replace'
     status:
-      building: "Your site is building, refresh this page in <time datetime=\"PT%{seconds}S\">%{average_time}</time>."
+      building: "Your site is building, it will be ready in <time datetime=\"PT%{seconds}S\">%{average_time}</time>."
       not_published_yet: "Your site is being published for the first time, please wait up to 1 minute..."
       available: "Your site is available! Click here to find all the different ways to visit it."
       awaiting_publication: "There are unpublished changes.  Click the button below and wait a moment to find them on your site."

config/locales/es.yml

@@ -394,7 +394,7 @@ es:
     static_file_migration: 'Migración de archivos'
     find_and_replace: 'Búsqueda y reemplazo'
     status:
-      building: "Tu sitio se está publicando, recargá esta página en <time datetime=\"PT%{seconds}S\">%{average_time}</time>."
+      building: "Tu sitio se está publicando, estará listo en <time datetime=\"PT%{seconds}S\">%{average_time}</time>."
       not_published_yet: "Tu sitio se está publicando por primera vez, por favor espera hasta un minuto..."
       available: "¡Tu sitio está disponible!  Cliqueá aquí para encontrar todas las formas en que podés visitarlo."
       awaiting_publication: "Hay cambios sin publicar, cliqueá el botón debajo y espera un momento para encontrarlos en tu sitio."

config/routes.rb

@@ -37,6 +37,9 @@ Rails.application.routes.draw do
     get 'pull', to: 'sites#fetch'
     post 'pull', to: 'sites#merge'
 
+    get 'status', to: 'sites#status'
+    get 'button', to: 'sites#button'
+
     # Gestionar usuaries
     get 'usuaries/invite', to: 'usuaries#invite'
     post 'usuaries/invite', to: 'usuaries#send_invitations'

package.json

@@ -21,6 +21,7 @@
     "commonmark": "^0.29.0",
     "fork-awesome": "^1.1.7",
     "fork-ts-checker-webpack-plugin": "^6.1.0",
+    "htmx.org": "^1.9.11",
     "input-map": "git+https://0xacab.org/sutty/input-map.git",
     "input-tag": "git+https://0xacab.org/sutty/input-tag.git",
     "leaflet": "^1.7.1",

yarn.lock

@@ -4570,6 +4570,11 @@ html-entities@^1.3.1:
   resolved "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz"
   integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
 
+htmx.org@^1.9.11:
+  version "1.9.11"
+  resolved "https://registry.yarnpkg.com/htmx.org/-/htmx.org-1.9.11.tgz#00192041ee682d6ca7146d0fbd901169ffe72d87"
+  integrity sha512-WlVuICn8dfNOOgYmdYzYG8zSnP3++AdHkMHooQAzGZObWpVXYathpz/I37ycF4zikR6YduzfCvEcxk20JkIUsw==
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz"