FIX: flaky sidebar-user-community-section-test (#21398)

Change mechanism handling `more` button for sidebar.
Before it was using HTML details tag.
To make tests more reliable, we are switching to use ember runloop.

app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs

@@ -2,32 +2,27 @@
   <Sidebar::MoreSectionLink @sectionLink={{this.activeSectionLink}} />
 {{/if}}
 
-<details
-  class="sidebar-more-section-links-details"
-  {{on "toggle" this.toggleSectionLinks}}
->
-  <summary class="sidebar-more-section-links-details-summary sidebar-row">
-    <span class="sidebar-more-section-links-icon-wrapper">
-      {{d-icon "ellipsis-v"}}
-    </span>
+<li class="sidebar-section-link-wrapper">
+  <DButton
+    @icon="ellipsis-v"
+    @action={{action this.toggleSectionLinks}}
+    @class="btn-flat sidebar-more-section-links-details-summary"
+    @label="sidebar.more"
+  />
+</li>
+{{#if this.open}}
+  <div
+    class="sidebar-more-section-links-details-content-wrapper"
+    {{did-insert this.registerClickListener}}
+    {{will-destroy this.unregisterClickListener}}
+  >
 
-    {{i18n "sidebar.more"}}
-  </summary>
-
-  {{#if this.shouldDisplaySectionLinks}}
-    <div
-      class="sidebar-more-section-links-details-content-wrapper"
-      {{did-insert this.registerClickListener}}
-      {{will-destroy this.unregisterClickListener}}
-    >
-
-      <div class="sidebar-more-section-links-details-content">
-        <div class="sidebar-more-section-links-details-content-main">
-          {{#each this.sectionLinks as |sectionLink|}}
-            <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
-          {{/each}}
-        </div>
+    <div class="sidebar-more-section-links-details-content">
+      <div class="sidebar-more-section-links-details-content-main">
+        {{#each this.sectionLinks as |sectionLink|}}
+          <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
+        {{/each}}
       </div>
     </div>
-  {{/if}}
-</details>
+  </div>
+{{/if}}

app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js

@@ -9,8 +9,8 @@ import Component from "@glimmer/component";
 export default class SidebarMoreSectionLinks extends Component {
   @service router;
 
-  @tracked shouldDisplaySectionLinks = false;
   @tracked activeSectionLink;
+  @tracked open = false;
 
   constructor() {
     super(...arguments);
@@ -47,15 +47,13 @@ export default class SidebarMoreSectionLinks extends Component {
 
   @bind
   closeDetails(event) {
-    if (this.shouldDisplaySectionLinks) {
+    if (this.open) {
       const isLinkClick = event.target.className.includes(
         "sidebar-section-link"
       );
 
       if (isLinkClick || this.#isOutsideDetailsClick(event)) {
-        document
-          .querySelector(".sidebar-more-section-links-details")
-          ?.removeAttribute("open");
+        this.open = false;
       }
     }
   }
@@ -71,8 +69,8 @@ export default class SidebarMoreSectionLinks extends Component {
   }
 
   @action
-  toggleSectionLinks(element) {
-    this.shouldDisplaySectionLinks = element.target.hasAttribute("open");
+  toggleSectionLinks() {
+    this.open = !this.open;
   }
 
   #removeClickEventListener() {

app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js

@@ -1,5 +1,5 @@
 import I18n from "I18n";
-import { skip, test } from "qunit";
+import { test } from "qunit";
 import {
   click,
   currentRouteName,
@@ -110,8 +110,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
     );
   });
 
-  // TODO(tgxworld): Flaky probably due to assertions running before event listener callbacks have completed.
-  skip("clicking on more... link", async function (assert) {
+  test("clicking on more... link", async function (assert) {
     await visit("/");
 
     await click(

app/assets/stylesheets/common/base/sidebar-more-section-links.scss

@@ -1,50 +1,43 @@
-.sidebar-more-section-links-details {
+.btn-flat.sidebar-more-section-links-details-summary {
   &:focus-within,
+  &:active,
   &:hover {
     background: var(--d-sidebar-highlight-color);
-  }
-
-  .sidebar-more-section-links-details-summary {
-    color: var(--primary-high);
-    transition: background-color 0.25s;
-    display: flex;
-    align-items: center;
-    list-style: none;
-    box-sizing: border-box;
-
-    .sidebar-more-section-links-icon-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--d-sidebar-section-link-prefix-width);
-      height: var(--d-sidebar-section-link-prefix-width);
-      margin-right: var(--d-sidebar-section-link-prefix-margin-right);
-
-      .d-icon {
-        color: var(--primary-medium);
-        font-size: var(--font-down-1);
-      }
-    }
-
-    &::before {
-      display: none;
+    svg.d-icon {
+      color: var(--primary-medium);
     }
   }
+  height: var(--d-sidebar-row-height);
+  color: var(--primary-high);
+  display: flex;
+  list-style: none;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--d-sidebar-row-vertical-padding)
+    var(--d-sidebar-row-horizontal-padding);
+  font-size: var(--d-sidebar-row-font-size);
+  justify-content: left;
 
-  .sidebar-more-section-links-details-content-wrapper {
-    position: absolute;
-    width: 100%;
-    z-index: z("modal", "content") + 1;
-    background: transparent;
-  }
-
-  .sidebar-more-section-links-details-content {
-    background-color: var(--secondary);
-    box-shadow: shadow("dropdown");
-    margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
-
-    .sidebar-row {
-      padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3);
-    }
+  svg.d-icon {
+    width: var(--d-sidebar-section-link-prefix-width);
+    margin-right: var(--d-sidebar-section-link-prefix-margin-right);
+    color: var(--primary-medium);
+    font-size: var(--font-down-1);
   }
 }
+.sidebar-more-section-links-details-content {
+  background-color: var(--secondary);
+  transition: background-color 0.25s;
+  box-shadow: shadow("dropdown");
+  margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
+
+  .sidebar-row {
+    padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3);
+  }
+}
+.sidebar-more-section-links-details-content-wrapper {
+  position: absolute;
+  width: 100%;
+  z-index: z("modal", "content") + 1;
+  position: sticky;
+}