Unpin article should behave more like Pin article (#17798)

* Unpin article should behave more like Pin article
* Don't repeat pinned article on index

app/controllers/admin/articles_controller.rb

@@ -18,8 +18,6 @@ module Admin
                                  published_at].freeze
 
     def index
-      @pinned_article = PinnedArticle.get
-
       case params[:state]
       when /top-/
         months_ago = params[:state].split("-")[1].to_i.months.ago
@@ -30,6 +28,9 @@ module Admin
         @articles = articles_mixed
         @featured_articles = articles_featured
       end
+
+      @pinned_article = PinnedArticle.get
+      @articles = @articles.where.not(id: @pinned_article) if @pinned_article
     end
 
     def show
@@ -55,7 +56,7 @@ module Admin
 
       respond_to do |format|
         format.html do
-          flash[:success] = I18n.t("admin.articles_controller.pinned")
+          flash[:danger] = I18n.t("admin.articles_controller.unpinned")
           redirect_to admin_article_path(article.id)
         end
         format.js do

app/javascript/admin/controllers/article_controller.js

@@ -6,7 +6,6 @@ export default class ArticleController extends Controller {
     'featuredNumber',
     'cardBody',
     'pinnedCheckbox',
-    'unpinButton',
   ];
   static values = { id: Number, pinPath: String };
 
@@ -74,11 +73,15 @@ export default class ArticleController extends Controller {
     }
   }
 
-  ajaxSuccess(event) {
-    if (event.target !== this.unpinButtonTarget) {
-      return;
-    }
+  async unpinArticle(event) {
+    const unpinArticleForm = event.target;
+    // We dont want to submit the pin form here.
+    event.preventDefault();
 
+    unpinArticleForm.submit();
+  }
+
+  ajaxSuccess(event) {
     // Replace the current Article HTML with the HTML sent by the server
     const newArticle = document.createElement('div');
 

app/views/admin/articles/_individual_article.html.erb

@@ -73,14 +73,14 @@
 
       <div class="flex gap-1">
         <% if decorated_article.pinned? %>
-          <%= link_to(
-                "Unpin post",
-                unpin_admin_article_path(decorated_article.id),
-                method: :delete,
-                remote: true,
-                class: "c-link c-link--block",
-                data: { "article-target": "unpinButton" },
-              ) %>
+          <form method="post" action="<%= unpin_admin_article_path(decorated_article.id) %>" class="inline"
+            data-action="submit->article#unpinArticle">
+            <input type="hidden" name="_method" value="delete" />
+            <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
+            <button type="submit" class="c-btn">
+              Unpin post
+            </button>
+          </form>
         <% else %>
           <form method="post" action="<%= pin_admin_article_path(decorated_article.id) %>" class="inline"
             data-action="submit->article#pinArticle">

config/locales/controllers/admin/en.yml

@@ -4,6 +4,7 @@ en:
     articles_controller:
       saved: Article saved!
       pinned: Article Pinned!
+      unpinned: Article Unpinned!
     badge_achievements_controller:
       deleted: Badge achievement has been deleted!
       rewarded: Badges are being rewarded. The task will finish shortly.

config/locales/controllers/admin/fr.yml

@@ -4,6 +4,7 @@ fr:
     articles_controller:
       saved: Article saved!
       pinned: Article Pinned!
+      unpinned: Article Unpinned!
     badge_achievements_controller:
       deleted: Badge achievement has been deleted!
       rewarded: Badges are being rewarded. The task will finish shortly.

cypress/integration/seededFlows/adminFlows/articles/pinArticle.spec.js

@@ -36,7 +36,7 @@ describe('Pin an article from the admin area', () => {
     cy.url().should('contain', '/content_manager/articles/');
 
     cy.findByRole('button', { name: 'Pin post' }).should('not.exist');
-    cy.findByRole('link', { name: 'Unpin post' }).should('exist');
+    cy.findByRole('button', { name: 'Unpin post' }).should('exist');
     cy.findByTestId('pinned-indicator').should('exist');
   });
 
@@ -96,7 +96,7 @@ describe('Pin an article from the admin area', () => {
 
   it('should show the pinned post to a logged out user', () => {
     cy.findAllByRole('button', { name: 'Pin post' }).first().click();
-    cy.findByRole('link', { name: 'Unpin post' }).should('exist');
+    cy.findByRole('button', { name: 'Unpin post' }).should('exist');
 
     cy.signOutUser();
     cy.findAllByRole('link', { name: 'Log in' }).first().should('exist');

cypress/integration/seededFlows/adminFlows/articles/unpinArticle.spec.js

@@ -25,15 +25,15 @@ describe('Unpin an article from the admin area', () => {
   });
 
   it('should not display the "Unpin post" button by default', () => {
-    cy.findByRole('link', { name: 'Unpin post' }).should('not.exist');
+    cy.findByRole('button', { name: 'Unpin post' }).should('not.exist');
   });
 
   it('should unpin the pinned article', () => {
     cy.findAllByRole('button', { name: 'Pin post' }).first().click();
 
-    cy.findAllByRole('link', { name: 'Unpin post' }).first().click();
+    cy.findAllByRole('button', { name: 'Unpin post' }).first().click();
 
-    cy.findAllByRole('link', { name: 'Unpin post' }).should('not.exist');
+    cy.findAllByRole('button', { name: 'Unpin post' }).should('not.exist');
     cy.findByTestId('pinned-indicator').should('not.exist');
   });
 });