From 56524f4bdf9d45eddf7967ccead169ec6dd6cbb8 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Fri, 9 Aug 2024 09:56:10 +1000
Subject: [PATCH] DEV: flaky toggle flag spec (#28292)

Very similar to move up/down flag problem fixed here -  https://github.com/discourse/discourse/pull/28272

Those are the steps to toggle the flag:
1. click toggle - `saving` CSS class is added;
2. request to backend;
3. `saving` CSS class is removed.

And check if the flag was toggle was:
```ruby
def has_saved_flag?(key)
  has_css?(".admin-flag-item.#{key}.saving")
  has_no_css?(".admin-flag-item.#{key}.saving")
end
```
If the save action is very fast, then the saving class is removed before the first check.

Therefore I decided to invert it, and once action is finished add `saved` CSS class.

Then we can have a quick positive check:

```ruby
def has_saved_flag?(key)
  has_css?(".admin-flag-item.#{key}.saved")
end
```
---
 .../addon/components/admin-flag-item.gjs      | 22 +++++++++----------
 spec/system/page_objects/pages/admin_flags.rb |  3 +--
 2 files changed, 12 insertions(+), 13 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 71796b94e0d..1b52162f4a5 100644
--- a/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs
@@ -21,7 +21,7 @@ export default class AdminFlagItem extends Component {
   @service router;
 
   @tracked enabled = this.args.flag.enabled;
-  @tracked isSaving = false;
+  @tracked isSaved = true;
 
   get canMove() {
     return this.args.flag.id !== SYSTEM_FLAG_IDS.notify_user;
@@ -49,7 +49,7 @@ export default class AdminFlagItem extends Component {
   @action
   toggleFlagEnabled(flag) {
     this.enabled = !this.enabled;
-    this.isSaving = true;
+    this.isSaved = false;
 
     return ajax(`/admin/config/flags/${flag.id}/toggle`, {
       type: "PUT",
@@ -62,7 +62,7 @@ export default class AdminFlagItem extends Component {
         return popupAjaxError(error);
       })
       .finally(() => {
-        this.isSaving = false;
+        this.isSaved = true;
       });
   }
 
@@ -73,18 +73,18 @@ export default class AdminFlagItem extends Component {
 
   @action
   moveUp() {
-    this.isSaving = true;
+    this.isSaved = false;
     this.args.moveFlagCallback(this.args.flag, "up").finally(() => {
-      this.isSaving = false;
+      this.isSaved = true;
       this.dMenu.close();
     });
   }
 
   @action
   moveDown() {
-    this.isSaving = true;
+    this.isSaved = false;
     this.args.moveFlagCallback(this.args.flag, "down").finally(() => {
-      this.isSaving = false;
+      this.isSaved = true;
       this.dMenu.close();
     });
   }
@@ -95,18 +95,18 @@ export default class AdminFlagItem extends Component {
 
   @action
   delete() {
-    this.isSaving = true;
+    this.isSaved = false;
     this.dialog.yesNoConfirm({
       message: i18n("admin.config_areas.flags.delete_confirm", {
         name: this.args.flag.name,
       }),
       didConfirm: () => {
         this.args.deleteFlagCallback(this.args.flag).finally(() => {
-          this.isSaving = false;
+          this.isSaved = true;
         });
       },
       didCancel: () => {
-        this.isSaving = false;
+        this.isSaved = true;
       },
     });
     this.dMenu.close();
@@ -117,7 +117,7 @@ export default class AdminFlagItem extends Component {
       class={{concatClass
         "admin-flag-item"
         @flag.name_key
-        (if this.isSaving "saving")
+        (if this.isSaved "saved")
       }}
     >
       <td>
diff --git a/spec/system/page_objects/pages/admin_flags.rb b/spec/system/page_objects/pages/admin_flags.rb
index ea1952e6cef..ac92eb5e594 100644
--- a/spec/system/page_objects/pages/admin_flags.rb
+++ b/spec/system/page_objects/pages/admin_flags.rb
@@ -64,8 +64,7 @@ module PageObjects
       end
 
       def has_saved_flag?(key)
-        has_css?(".admin-flag-item.#{key}.saving")
-        has_no_css?(".admin-flag-item.#{key}.saving")
+        has_css?(".admin-flag-item.#{key}.saved")
       end
 
       def has_closed_flag_menu?