From 4157161578ebc72dae7a4d1a6905c2bee35aff85 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Wed, 3 Jul 2024 12:02:18 +1000
Subject: [PATCH] DEV: flaky reorder flags specs (#27684)

Before checking if flags were reordered on the topic page, we need to ensure that the reorder action was finished. To achieve it "saving" CSS is added and removed when AJAX call is completed.
---
 .../addon/components/admin-flag-item.gjs      | 32 ++++++++++++++++---
 spec/system/admin_flags_spec.rb               |  4 +++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs b/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs
index a6435d31b05..5ba07387cdf 100644
--- a/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs
@@ -9,6 +9,7 @@ import { not } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import DToggleSwitch from "discourse/components/d-toggle-switch";
 import DropdownMenu from "discourse/components/dropdown-menu";
+import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { SYSTEM_FLAG_IDS } from "discourse/lib/constants";
@@ -20,6 +21,7 @@ export default class AdminFlagItem extends Component {
   @service router;
 
   @tracked enabled = this.args.flag.enabled;
+  @tracked isSaving = false;
 
   get canMove() {
     return this.args.flag.id !== SYSTEM_FLAG_IDS.notify_user;
@@ -47,6 +49,7 @@ export default class AdminFlagItem extends Component {
   @action
   toggleFlagEnabled(flag) {
     this.enabled = !this.enabled;
+    this.isSaving = true;
 
     return ajax(`/admin/config/flags/${flag.id}/toggle`, {
       type: "PUT",
@@ -57,6 +60,9 @@ export default class AdminFlagItem extends Component {
       .catch((error) => {
         this.enabled = !this.enabled;
         return popupAjaxError(error);
+      })
+      .finally(() => {
+        this.isSaving = false;
       });
   }
 
@@ -67,14 +73,20 @@ export default class AdminFlagItem extends Component {
 
   @action
   moveUp() {
-    this.args.moveFlagCallback(this.args.flag, "up");
+    this.isSaving = true;
     this.dMenu.close();
+    this.args.moveFlagCallback(this.args.flag, "up").finally(() => {
+      this.isSaving = false;
+    });
   }
 
   @action
   moveDown() {
-    this.args.moveFlagCallback(this.args.flag, "down");
+    this.isSaving = true;
     this.dMenu.close();
+    this.args.moveFlagCallback(this.args.flag, "down").finally(() => {
+      this.isSaving = false;
+    });
   }
   @action
   edit() {
@@ -83,19 +95,31 @@ export default class AdminFlagItem extends Component {
 
   @action
   delete() {
+    this.isSaving = true;
     this.dialog.yesNoConfirm({
       message: i18n("admin.config_areas.flags.delete_confirm", {
         name: this.args.flag.name,
       }),
       didConfirm: () => {
-        this.args.deleteFlagCallback(this.args.flag);
+        this.args.deleteFlagCallback(this.args.flag).finally(() => {
+          this.isSaving = false;
+        });
+      },
+      didCancel: () => {
+        this.isSaving = false;
       },
     });
     this.dMenu.close();
   }
 
   <template>
-    <tr class="admin-flag-item {{@flag.name_key}}">
+    <tr
+      class={{concatClass
+        "admin-flag-item"
+        @flag.name_key
+        (if this.isSaving "saving")
+      }}
+    >
       <td>
         <p class="admin-flag-item__name">{{@flag.name}}</p>
         <p class="admin-flag-item__description">{{htmlSafe
diff --git a/spec/system/admin_flags_spec.rb b/spec/system/admin_flags_spec.rb
index 9a1fab04518..6b960f201cd 100644
--- a/spec/system/admin_flags_spec.rb
+++ b/spec/system/admin_flags_spec.rb
@@ -20,6 +20,7 @@ describe "Admin Flags Page", type: :system do
 
     visit "/admin/config/flags"
     admin_flags_page.toggle("spam")
+    expect(page).not_to have_css(".admin-flag-item.spam.saving")
 
     topic_page.visit_topic(post.topic)
     topic_page.open_flag_topic_modal
@@ -39,6 +40,7 @@ describe "Admin Flags Page", type: :system do
 
     visit "/admin/config/flags"
     admin_flags_page.move_down("spam")
+    expect(page).not_to have_css(".admin-flag-item.spam.saving")
 
     topic_page.visit_topic(post.topic)
     topic_page.open_flag_topic_modal
@@ -48,6 +50,7 @@ describe "Admin Flags Page", type: :system do
 
     visit "/admin/config/flags"
     admin_flags_page.move_up("spam")
+    expect(page).not_to have_css(".admin-flag-item.spam.saving")
 
     topic_page.visit_topic(post.topic)
     topic_page.open_flag_topic_modal
@@ -109,6 +112,7 @@ describe "Admin Flags Page", type: :system do
     visit "/admin/config/flags"
     admin_flags_page.click_delete_flag("tasteless")
     admin_flags_page.confirm_delete
+    expect(page).not_to have_css(".admin-flag-item.tasteless.saving")
 
     topic_page.visit_topic(post.topic)
     topic_page.open_flag_topic_modal