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,19 +2,15 @@
   <Sidebar::MoreSectionLink @sectionLink={{this.activeSectionLink}} />
 {{/if}}
 
-<details
+<li class="sidebar-section-link-wrapper">
-  class="sidebar-more-section-links-details"
+  <DButton
-  {{on "toggle" this.toggleSectionLinks}}
+    @icon="ellipsis-v"
->
+    @action={{action this.toggleSectionLinks}}
-  <summary class="sidebar-more-section-links-details-summary sidebar-row">
+    @class="btn-flat sidebar-more-section-links-details-summary"
-    <span class="sidebar-more-section-links-icon-wrapper">
+    @label="sidebar.more"
-      {{d-icon "ellipsis-v"}}
+  />
-    </span>
+</li>
-
+{{#if this.open}}
-    {{i18n "sidebar.more"}}
-  </summary>
-
-  {{#if this.shouldDisplaySectionLinks}}
   <div
     class="sidebar-more-section-links-details-content-wrapper"
     {{did-insert this.registerClickListener}}
@@ -29,5 +25,4 @@
       </div>
     </div>
   </div>
-  {{/if}}
+{{/if}}
-</details>

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
+        this.open = false;
-          .querySelector(".sidebar-more-section-links-details")
-          ?.removeAttribute("open");
       }
     }
   }
@@ -71,8 +69,8 @@ export default class SidebarMoreSectionLinks extends Component {
   }
 
   @action
-  toggleSectionLinks(element) {
+  toggleSectionLinks() {
-    this.shouldDisplaySectionLinks = element.target.hasAttribute("open");
+    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.
+  test("clicking on more... link", async function (assert) {
-  skip("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);
+    svg.d-icon {
+      color: var(--primary-medium);
     }
-
+  }
-  .sidebar-more-section-links-details-summary {
+  height: var(--d-sidebar-row-height);
   color: var(--primary-high);
-    transition: background-color 0.25s;
   display: flex;
-    align-items: center;
   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-icon-wrapper {
+  svg.d-icon {
-      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);
   }
-    }
+}
-
+.sidebar-more-section-links-details-content {
-    &::before {
-      display: none;
-    }
-  }
-
-  .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);
+  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;
 }