From 20e049bcbc29c2a508c76c3e91fc551289ef9b01 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Thu, 9 May 2024 10:54:37 +0200
Subject: [PATCH] DEV: Minor refactor of d-menu/d-tooltip (#26942)

* `menuInstance` cached getter -> prop
* `next()` and a `trigger` check -> gone
* `allowedProperties` action -> getter
* `keys` -> `entries`
* update the `service` import
* flatten the object spread structures
---
 .../float-kit/addon/components/d-menu.gjs     | 40 ++++++-------------
 .../float-kit/addon/components/d-tooltip.gjs  | 35 ++++++----------
 2 files changed, 25 insertions(+), 50 deletions(-)

diff --git a/app/assets/javascripts/float-kit/addon/components/d-menu.gjs b/app/assets/javascripts/float-kit/addon/components/d-menu.gjs
index 689bf90728a..a477572f245 100644
--- a/app/assets/javascripts/float-kit/addon/components/d-menu.gjs
+++ b/app/assets/javascripts/float-kit/addon/components/d-menu.gjs
@@ -1,10 +1,7 @@
 import Component from "@glimmer/component";
-import { cached } from "@glimmer/tracking";
 import { getOwner } from "@ember/application";
 import { concat } from "@ember/helper";
-import { action } from "@ember/object";
-import { next } from "@ember/runloop";
-import { inject as service } from "@ember/service";
+import { service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import { and } from "truth-helpers";
 import DButton from "discourse/components/d-button";
@@ -19,25 +16,16 @@ export default class DMenu extends Component {
   @service menu;
   @service site;
 
-  registerTrigger = modifier((element) => {
-    if (!this.menuInstance.trigger) {
-      next(() => {
-        this.menuInstance.trigger = element;
-        this.options.onRegisterApi?.(this.menuInstance);
-      });
-    }
+  menuInstance = new DMenuInstance(getOwner(this), {
+    ...this.allowedProperties,
+    autoUpdate: true,
+    listeners: true,
   });
 
-  @cached
-  get menuInstance() {
-    return new DMenuInstance(getOwner(this), {
-      ...this.allowedProperties(),
-      ...{
-        autoUpdate: true,
-        listeners: true,
-      },
-    });
-  }
+  registerTrigger = modifier((element) => {
+    this.menuInstance.trigger = element;
+    this.options.onRegisterApi?.(this.menuInstance);
+  });
 
   get menuId() {
     return `d-menu-${this.menuInstance.id}`;
@@ -54,18 +42,17 @@ export default class DMenu extends Component {
     };
   }
 
-  @action
-  allowedProperties() {
+  get allowedProperties() {
     const properties = {};
-    Object.keys(MENU.options).forEach((key) => {
-      const value = MENU.options[key];
+    for (const [key, value] of Object.entries(MENU.options)) {
       properties[key] = this.args[key] ?? value;
-    });
+    }
     return properties;
   }
 
   <template>
     <DButton
+      {{this.registerTrigger}}
       class={{concatClass
         "fk-d-menu__trigger"
         (if this.menuInstance.expanded "-expanded")
@@ -81,7 +68,6 @@ export default class DMenu extends Component {
       @translatedTitle={{@title}}
       @disabled={{@disabled}}
       aria-expanded={{if this.menuInstance.expanded "true" "false"}}
-      {{this.registerTrigger}}
       ...attributes
     >
       {{#if (has-block "trigger")}}
diff --git a/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs b/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs
index 7bbbff7351f..abfc6c75216 100644
--- a/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs
+++ b/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs
@@ -1,9 +1,6 @@
 import Component from "@glimmer/component";
-import { cached } from "@glimmer/tracking";
 import { getOwner } from "@ember/application";
 import { concat } from "@ember/helper";
-import { action } from "@ember/object";
-import { next } from "@ember/runloop";
 import { service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import { and } from "truth-helpers";
@@ -17,22 +14,16 @@ export default class DTooltip extends Component {
   @service tooltip;
   @service internalTooltip;
 
-  registerTrigger = modifier((element) => {
-    if (!this.tooltipInstance?.trigger) {
-      next(() => {
-        this.tooltipInstance.trigger = element;
-        this.options.onRegisterApi?.(this.tooltipInstance);
-      });
-    }
+  tooltipInstance = new DTooltipInstance(getOwner(this), {
+    ...this.allowedProperties,
+    autoUpdate: true,
+    listeners: true,
   });
 
-  @cached
-  get tooltipInstance() {
-    return new DTooltipInstance(getOwner(this), {
-      ...this.allowedProperties(),
-      ...{ autoUpdate: true, listeners: true },
-    });
-  }
+  registerTrigger = modifier((element) => {
+    this.tooltipInstance.trigger = element;
+    this.options.onRegisterApi?.(this.tooltipInstance);
+  });
 
   get options() {
     return this.tooltipInstance?.options;
@@ -45,18 +36,17 @@ export default class DTooltip extends Component {
     };
   }
 
-  @action
-  allowedProperties() {
+  get allowedProperties() {
     const properties = {};
-    Object.keys(TOOLTIP.options).forEach((key) => {
-      const value = TOOLTIP.options[key];
+    for (const [key, value] of Object.entries(TOOLTIP.options)) {
       properties[key] = this.args[key] ?? value;
-    });
+    }
     return properties;
   }
 
   <template>
     <span
+      {{this.registerTrigger this.allowedProperties}}
       class={{concatClass
         "fk-d-tooltip__trigger"
         (if this.tooltipInstance.expanded "-expanded")
@@ -66,7 +56,6 @@ export default class DTooltip extends Component {
       data-identifier={{this.options.identifier}}
       data-trigger
       aria-expanded={{if this.tooltipInstance.expanded "true" "false"}}
-      {{this.registerTrigger (this.allowedProperties)}}
       ...attributes
     >
       <span class="fk-d-tooltip__trigger-container">