Revert "Entire profile badge redesign" & "Badges page redesign" (#18446)

Co-authored-by: Mac Siri <krairit.siri@gmail.com>

app/models/badge.rb

@@ -12,6 +12,11 @@ class Badge < ApplicationRecord
   validates :title, presence: true, uniqueness: true
 
   before_validation :generate_slug
+  after_save :bust_path
+
+  def path
+    "/badge/#{slug}"
+  end
 
   def self.id_for_slug(slug)
     select(:id).find_by(slug: slug)&.id
@@ -22,4 +27,10 @@ class Badge < ApplicationRecord
   def generate_slug
     self.slug = CGI.escape(title.to_s).parameterize
   end
+
+  def bust_path
+    cache_bust = EdgeCache::Bust.new
+    cache_bust.call(path)
+    cache_bust.call("#{path}?i=i")
+  end
 end

app/views/badges/_badge_detail.html.erb

@@ -1,16 +0,0 @@
-<div class="grid grid-cols-1 gap-1 s:gap-8 s:grid-cols-2">
-  <img
-    style="width: 192px; height: 192px; background-color: #FAFAFA; border-radius: 8px; border: 1px solid #F5F5F5;"
-    class="flex flex-row p-3"
-    src="<%= optimized_image_url(badge.badge_image_url, width: 192) %>"
-    alt="<%= badge.title %> badge"
-    title="<%= badge.title %>"
-    loading="lazy" />
-  <div class="flex flex-col justify-between items-start">
-    <div class="flex flex-col items-start">
-      <h4 class="fw-800 fs-l color-grey-800"><%= badge.title %></h4>
-      <p><%= badge.description %></p>
-    </div>
-    <button class="flex flex-row items-start c-btn c-btn--primary" onclick="window.Forem.closeModal()">Got it</button>
-  </div>
-</div>

app/views/badges/index.html.erb

@@ -1,33 +1,19 @@
 <% title t("views.badges.meta.title") %>
 
 <div class="blank-space"></div>
-<main class="crayons-layout px-2 l:px-2">
-  <h1 class="crayons-title"><%= t("views.badges.heading") %></h1>
-  <p><%= t("views.badges.desc") %></p>
-  <div class="sticker-book crayons-card p-3 s:p-3 m:p-6 l:p-6 xl:p-8 grid gap-3 m:gap-4 l:gap-4 l:gap-6 grid-cols-2 s:grid-cols-2 m:grid-cols-3 l:grid-cols-4 xl:grid-cols-5 mb-6">
+<div class="container article">
+  <h1 style="text-align: center;"><%= t("views.badges.heading") %></h1>
+  <p style="text-align: center; max-width: 96%;"><%= t("views.badges.desc") %></p>
+  <div class="body sticker-book">
     <% @badges.each do |badge| %>
-    <div
-      role="button"
-      onclick="window.Forem.showModal({prompt: true, contentSelector: '#badge-<%= badge.id %>', overlay: true})"
-      style="width:auto; background-color: white;"
-      class="crayons-card media-card media-card--all">
-      <div style="background-color: #F5F5F5" class="p-3">
-        <img
-          style="width: 100%; aspect-ratio:1/1;"
-          class="badge-image <%= "unearned" unless badge.id.in?(@earned_badge_achievements) %>"
-          src="<%= optimized_image_url(badge.badge_image_url, width: 192) %>"
-          alt="<%= badge.title %> badge"
-          title="<%= badge.title %>"
-          loading="lazy" />
-      </div>
-      <p aria-hidden="true" class="color-grey-800 align-center fw-bold fs-base flex lh-base justify-center p-3">
-          <%= badge.title %>
-      </p>
-
-      <div id="badge-<%= badge.id %>" class="hidden">
-        <%= render partial: "badge_detail", locals: { badge: badge } %>
-      </div>
-    </div>
+    <a href="/badge/<%= badge.slug %>">
+      <img
+        class="badge-image <%= "unearned" unless badge.id.in?(@earned_badge_achievements) %>"
+        src="<%= optimized_image_url(badge.badge_image_url, width: 375) %>"
+        alt="<%= badge.title %> badge"
+        title="<%= badge.title %>"
+        loading="lazy" />
+    </a>
     <% end %>
   </div>
-</main>
+</div>

app/views/badges/show.html.erb

@@ -0,0 +1,14 @@
+<% title t("views.badges.meta.name", title: @badge.title) %>
+
+<div class="blank-space"></div>
+<div class="container article">
+  <h1 style="text-align: center;font-size: min(2.7em, 7vw);max-width: 96%;margin: 30px auto;padding: 20px;"><%= t("views.badges.name", title: @badge.title) %></h1>
+  <div class="body" style="text-align: center">
+    <p>
+      <img src="<%= optimized_image_url(@badge.badge_image_url, width: 375) %>" style="height: 250px" alt="<%= @badge.title %> badge">
+    </p>
+    <h4 style="max-width:550px;margin: 50px auto">
+      <%= @badge.description %>
+    </h4>
+  </div>
+</div>

app/views/users/_badges_area.html.erb

@@ -6,7 +6,7 @@
   <div class="crayons-card__body">
     <div class="grid gap-4 grid-cols-3 s:grid-cols-4 m:grid-cols-2 align-center items-center js-profile-badges">
       <% achievements.each_with_index do |achievement, i| %>
-        <div role="button" onclick="window.Forem.showModal({prompt: true, contentSelector: '#badge-<%= achievement.badge_id %>', overlay: true})"
+        <a href="<%= badge_path(achievement.badge_slug) %>"
            title="<%= achievement.badge_title %>"
            class="js-profile-badge <% if i >= limit %>hidden<% end %>">
           <img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
@@ -14,11 +14,7 @@
                class="mx-auto max-w-75 h-auto align-middle"
                style="transform: rotate(<%= rand(-10..10) %>deg);"
                loading="lazy" />
-        </div>
-
-        <div id="badge-<%= achievement.badge_id %>" class="hidden">
-          <%= render partial: "badges/badge_detail", locals: { badge: achievement.badge } %>
-        </div>
+        </a>
       <% end %>
     </div>
 

config/routes.rb

@@ -314,6 +314,8 @@ Rails.application.routes.draw do
     get "/t/:tag/admin", to: "tags#admin"
     patch "/tag/:id", to: "tags#update"
 
+    get "/badge/:slug", to: "badges#show", as: :badge
+
     get "/top/:timeframe", to: "stories#index"
 
     get "/:timeframe", to: "stories#index", constraints: { timeframe: /latest/ }

spec/models/badge_spec.rb

@@ -31,6 +31,35 @@ RSpec.describe Badge, type: :model do
     end
   end
 
+  context "when callbacks are triggered after save" do
+    let!(:badge) { create(:badge) }
+
+    describe "cache busting" do
+      before do
+        allow(EdgeCache::Bust).to receive(:new).and_return(cache_bust)
+        allow(cache_bust).to receive(:call)
+      end
+
+      it "calls the cache buster with the path" do
+        badge.save
+
+        expect(cache_bust).to have_received(:call).with(badge.path)
+      end
+
+      it "calls the cache buster with the internal path" do
+        badge.save
+
+        expect(cache_bust).to have_received(:call).with("#{badge.path}?i=i")
+      end
+    end
+  end
+
+  describe "#path" do
+    it "returns the path of the badge" do
+      expect(badge.path).to eq("/badge/#{badge.slug}")
+    end
+  end
+
   describe "#slug" do
     it "generates the correct slug for C" do
       badge = build(:badge, title: "C")

spec/requests/badges_spec.rb

@@ -28,4 +28,21 @@ RSpec.describe "Badges", type: :request do
       end
     end
   end
+
+  describe "GET /badge/:slug" do
+    let(:badge) { create(:badge) }
+
+    context "when badge exists" do
+      it "shows the badge" do
+        get "/badge/#{badge.slug}"
+        expect(response.body).to include CGI.escapeHTML(badge.title)
+      end
+    end
+
+    context "when badge does not exist" do
+      it "renders 404" do
+        expect { get "/badge/that-does-not-exists" }.to raise_error(ActiveRecord::RecordNotFound)
+      end
+    end
+  end
 end

spec/system/admin/admin_awards_badges_spec.rb

@@ -43,7 +43,7 @@ RSpec.describe "Admin awards badges", type: :system do
 
     visit "/#{user.username}/"
 
-    expect(page).to have_css("img[src='#{Badge.last.badge_image.url}']")
+    expect(page).to have_link(href: badge_path(Badge.last.slug))
   end
 
   it "does not award badges if no badge is selected", js: true do