Add "updated at" info in secondary top navbar (#1204)

* Ensure "updated at" info is always visible in admin * Put "Last updated" on the right side and other tweaks --------- Co-authored-by: Ben Sheldon [he/him] <[email protected]>
bensheldon · Jan 3, 2024 · bd2d36b · bd2d36b
1 parent b2f0344
commit bd2d36b
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 82 deletions.
diff --git a/app/views/good_job/shared/_footer.erb b/app/views/good_job/shared/_footer.erb
diff --git a/app/views/good_job/shared/_navbar.erb b/app/views/good_job/shared/_navbar.erb
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg border-bottom bg-body sticky-top shadow-sm">
+<nav class="navbar navbar-expand-lg border-bottom bg-body sticky-top">
   <div class="container-fluid">
     <%= link_to t(".name"), root_path, class: "navbar-brand mb-0 h1" %>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/app/views/good_job/shared/_secondary_navbar.erb b/app/views/good_job/shared/_secondary_navbar.erb
@@ -0,0 +1,11 @@
+<nav class="navbar p-1 shadow-sm mt-auto border-bottom text-muted small" id="secondary-navbar" data-live-poll-region="secondary-navbar">
+  <div class="container-fluid">
+    <div class="flex-fill d-none d-sm-block ">
+      <%= t(".inspiration") %>
+    </div>
+    <div class="flex-fill text-end">
+      <% last_updated_at = Time.current.utc.iso8601 %>
+      <%= t(".last_updated") %>&nbsp;<time id="page-updated-at" datetime="<%= last_updated_at %>"><%== last_updated_at %></time>
+    </div>
+  </div>
+</nav>
diff --git a/app/views/layouts/good_job/application.html.erb b/app/views/layouts/good_job/application.html.erb
@@ -1,44 +1,38 @@
 <!DOCTYPE html>
 <html lang="<%= I18n.locale %>" data-bs-theme="auto">
-<head>
-  <title>Good Job Dashboard</title>
-  <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-
-  <%# Do not use asset tag helpers to avoid paths being overriden by config.asset_host %>
-  <%= tag.link rel: "stylesheet", href: frontend_static_path(:bootstrap, format: :css, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
-  <%= tag.link rel: "stylesheet", href: frontend_static_path(:style, format: :css, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
-
-  <%= tag.script "", src: frontend_static_path(:bootstrap, format: :js, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
-  <%= tag.script "", src: frontend_static_path(:chartjs, format: :js, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
-  <%= tag.script "", src: frontend_static_path(:rails_ujs, format: :js, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
-
-  <%= tag.script "", src: frontend_static_path(:es_module_shims, format: :js, v: GoodJob::VERSION, locale: nil), async: true, nonce: content_security_policy_nonce %>
-  <% importmaps = GoodJob::FrontendsController.js_modules.keys.index_with { |module_name| frontend_module_path(module_name, format: :js, locale: nil, v: GoodJob::VERSION) } %>
-  <%= tag.script({ imports: importmaps }.to_json.html_safe, type: "importmap", nonce: content_security_policy_nonce) %>
-  <%= tag.script "", type: "module", nonce: content_security_policy_nonce do %> import "application"; <% end %>
-  <%= tag.script "", nonce: content_security_policy_nonce do %>
-    // Ensure theme is updated before dom loads to avoid flash of style
-    let theme = localStorage.getItem('good_job-theme');
-    if (!["light", "dark"].includes(theme)) {
+  <head>
+    <title>Good Job Dashboard</title>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%# Do not use asset tag helpers to avoid paths being overriden by config.asset_host %>
+    <%= tag.link rel: "stylesheet", href: frontend_static_path(:bootstrap, format: :css, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
+    <%= tag.link rel: "stylesheet", href: frontend_static_path(:style, format: :css, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
+    <%= tag.script "", src: frontend_static_path(:bootstrap, format: :js, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
+    <%= tag.script "", src: frontend_static_path(:chartjs, format: :js, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
+    <%= tag.script "", src: frontend_static_path(:rails_ujs, format: :js, v: GoodJob::VERSION, locale: nil), nonce: content_security_policy_nonce %>
+    <%= tag.script "", src: frontend_static_path(:es_module_shims, format: :js, v: GoodJob::VERSION, locale: nil), async: true, nonce: content_security_policy_nonce %>
+    <% importmaps = GoodJob::FrontendsController.js_modules.keys.index_with { |module_name| frontend_module_path(module_name, format: :js, locale: nil, v: GoodJob::VERSION) } %>
+    <%= tag.script({ imports: importmaps }.to_json.html_safe, type: "importmap", nonce: content_security_policy_nonce) %>
+    <%= tag.script "", type: "module", nonce: content_security_policy_nonce do %> import "application"; <% end %>
+    <%= tag.script "", nonce: content_security_policy_nonce do %>
+      // Ensure theme is updated before dom loads to avoid flash of style
+      let theme = localStorage.getItem('good_job-theme');
+      if (!["light", "dark"].includes(theme)) {
       theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-    document.documentElement.setAttribute('data-bs-theme', theme);
-  <% end %>
-</head>
-<body>
-  <div class="d-flex flex-column min-vh-100">
-    <%= render "good_job/shared/navbar" %>
-
-    <div class="container-fluid flex-grow-1 relative">
-      <%= render "good_job/shared/alert" %>
-
-      <%= yield %>
+      }
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    <% end %>
+  </head>
+  <body>
+    <div class="d-flex flex-column min-vh-100">
+      <%= render "good_job/shared/navbar" %>
+      <%= render "good_job/shared/secondary_navbar" %>
+      <div class="container-fluid flex-grow-1 relative">
+        <%= render "good_job/shared/alert" %>
+        <%= yield %>
+      </div>
     </div>
-
-    <%= render "good_job/shared/footer" %>
-  </div>
-</body>
+  </body>
 </html>
diff --git a/config/locales/de.yml b/config/locales/de.yml
@@ -219,9 +219,6 @@ de:
         placeholder: Suchen Sie nach Klasse, Job-ID, Jobparametern und Fehlertext.
         queue_name: Warteschlangenname
         search: Suchen
-      footer:
-        last_update_html: Zuletzt aktualisiert <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: Denk daran, auch du machst einen guten Job!
       navbar:
         batches: Batches
         cron_schedules: Cron
@@ -234,6 +231,9 @@ de:
           dark: Dunkel
           light: Licht
           theme: Thema
+      secondary_navbar:
+        inspiration: Denk daran, auch du machst einen guten Job!
+        last_updated: Zuletzt aktualisiert
     status:
       discarded: Ausrangiert
       queued: In der Warteschlange

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -219,9 +219,6 @@ en:
         placeholder: Search by class, job id, job params, and error text.
         queue_name: Queue name
         search: Search
-      footer:
-        last_update_html: Last updated <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: Remember, you're doing a Good Job too!
       navbar:
         batches: Batches
         cron_schedules: Cron
@@ -234,6 +231,9 @@ en:
           dark: Dark
           light: Light
           theme: Theme
+      secondary_navbar:
+        inspiration: Remember, you're doing a Good Job too!
+        last_updated: Last updated
     status:
       discarded: Discarded
       queued: Queued

diff --git a/config/locales/es.yml b/config/locales/es.yml
@@ -217,9 +217,6 @@ es:
         placeholder: Buscar por clase, id de tarea, parámetros y mensaje de error.
         queue_name: Nombre de la cola
         search: Buscar
-      footer:
-        last_update_html: Última actualización <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: "¡Recuerda, también tú estás haciendo un buen trabajo!"
       navbar:
         batches: Batches
         cron_schedules: Cron
@@ -232,6 +229,9 @@ es:
           dark: Oscuro
           light: Luz
           theme: Tema
+      secondary_navbar:
+        inspiration: "¡Recuerda, también tú estás haciendo un buen trabajo!"
+        last_updated: Última actualización
     status:
       discarded:
         one: Descartada

diff --git a/config/locales/fr.yml b/config/locales/fr.yml
@@ -219,9 +219,6 @@ fr:
         placeholder: Recherche par classe, ID de job, paramètres de job et texte d'erreur.
         queue_name: Nom de la file d'attente
         search: Recherche
-      footer:
-        last_update_html: Dernière mise à jour <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: N'oublie pas, toi aussi tu fais du bon boulot !
       navbar:
         batches: Lots
         cron_schedules: Cron
@@ -234,6 +231,9 @@ fr:
           dark: Sombre
           light: Lumière
           theme: Thème
+      secondary_navbar:
+        inspiration: N'oublie pas, toi aussi tu fais du bon boulot !
+        last_updated: Dernière mise à jour
     status:
       discarded: Mis au rebut
       queued: À la file

diff --git a/config/locales/ja.yml b/config/locales/ja.yml
@@ -219,9 +219,6 @@ ja:
         placeholder: クラス名、ジョブID、ジョブパラメータ、エラーテキストで検索
         queue_name: キュー名
         search: 検索
-      footer:
-        last_update_html: 最終更新 <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: Remember, you're doing a Good Job too!
       navbar:
         batches: バッチ
         cron_schedules: Cron
@@ -234,6 +231,9 @@ ja:
           dark: 暗い
           light: ライト
           theme: テーマ
+      secondary_navbar:
+        inspiration: 覚えておいてください、あなたも良い仕事をしています！
+        last_updated: 最終更新
     status:
       discarded: 破棄済み
       queued: 処理待ち

diff --git a/config/locales/nl.yml b/config/locales/nl.yml
@@ -219,9 +219,6 @@ nl:
         placeholder: Zoek op klasse, taak-ID, taakparameters en fouttekst.
         queue_name: Wachtrij naam
         search: Zoekopdracht
-      footer:
-        last_update_html: Laatst bijgewerkt <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: 'Onthoud: jij levert ook goed werk!'
       navbar:
         batches: Batches
         cron_schedules: Cron
@@ -234,6 +231,9 @@ nl:
           dark: Donker
           light: Licht
           theme: Thema
+      secondary_navbar:
+        inspiration: 'Onthoud: jij levert ook goed werk!'
+        last_updated: Laatst bijgewerkt
     status:
       discarded: weggegooid
       queued: In de wachtrij

diff --git a/config/locales/ru.yml b/config/locales/ru.yml
@@ -245,9 +245,6 @@ ru:
         placeholder: Поиск по классу, идентификатору задания, параметрам задания и тексту ошибки.
         queue_name: Имя очереди
         search: Поиск
-      footer:
-        last_update_html: Последнее обновление <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: Запомни, ты делаешь Good Job тоже!
       navbar:
         batches: Batches
         cron_schedules: Cron
@@ -260,6 +257,9 @@ ru:
           dark: Темный
           light: Свет
           theme: Тема
+      secondary_navbar:
+        inspiration: Запомни, ты делаешь Good Job тоже!
+        last_updated: Последнее обновление
     status:
       discarded: Отброшено
       queued: В очереди

diff --git a/config/locales/tr.yml b/config/locales/tr.yml
@@ -219,9 +219,6 @@ tr:
         placeholder: Sınıfa, iş kimliğine, iş parametrelerine ve hata metnine göre ara.
         queue_name: Kuyruk adı
         search: Ara
-      footer:
-        last_update_html: Son güncelleme <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: Unutmayın, siz de iyi bir iş yapıyorsunuz!
       navbar:
         batches: Toplu İşler
         cron_schedules: Cron
@@ -234,6 +231,9 @@ tr:
           dark: Karanlık
           light: Işık
           theme: Tema
+      secondary_navbar:
+        inspiration: Unutmayın, siz de iyi bir iş yapıyorsunuz!
+        last_updated: Son güncelleme
     status:
       discarded: İptal Edildi
       queued: Sırada

diff --git a/config/locales/uk.yml b/config/locales/uk.yml
@@ -245,9 +245,6 @@ uk:
         placeholder: Пошук за класом, ідентифікатором роботи, параметрами роботи та текстом помилки.
         queue_name: Назва черги
         search: Пошук
-      footer:
-        last_update_html: Останнє оновлення <time id="page-updated-at" datetime="%{time}">%{time}</time>
-        wording: Пам'ятайте, ви теж робите хорошу роботу!
       navbar:
         batches: Batches
         cron_schedules: Cron
@@ -260,6 +257,9 @@ uk:
           dark: Темний
           light: світло
           theme: Тема
+      secondary_navbar:
+        inspiration: Пам'ятайте, ви теж робите хорошу роботу!
+        last_updated: Останнє оновлення
     status:
       discarded: Відхилено
       queued: У черзі

diff --git a/spec/system/i18n_spec.rb b/spec/system/i18n_spec.rb
@@ -9,7 +9,7 @@
 
       expect(page).to have_content "Processes"
       find_by_id('localeOptions').click
-      within ".navbar" do
+      within ".navbar.sticky-top" do
         click_link "es"
       end
       expect(page).to have_content "Procesos"
@@ -20,7 +20,7 @@
 
       expect(page).to have_content "Processes"
       find_by_id('localeOptions').click
-      within ".navbar" do
+      within ".navbar.sticky-top" do
         click_link "uk"
       end
       expect(page).to have_content "Процеси"