From 9c17588f6ad79feb0a6dce01b06bdef272d6b11f Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Fri, 1 Nov 2024 12:25:12 +1000
Subject: [PATCH] FIX: Admin dashboard tooltips not working on mobile (#29538)

This commit fixes the (?) tooltips for reports on
the admin dashboard on mobile.

The fix is that float-kit instances can now have different triggers
and un-triggers for mobile and desktop, and float-kit is now aware
of the site being in mobile view.

Example usage:

```
@triggers={{hash mobile=(array "click")}}
```

So now, if you press on the tooltip trigger on mobile it shows
correctly, and on desktop both hover and click can be used.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
---
 .../components/float-kit/d-tooltip-test.js    | 40 +++++++++++++++++++
 .../float-kit/addon/lib/constants.js          |  4 +-
 .../float-kit/addon/lib/float-kit-instance.js | 21 ++++++++++
 3 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-tooltip-test.js b/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-tooltip-test.js
index d02797c2209..3f3959d2e7b 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-tooltip-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-tooltip-test.js
@@ -18,6 +18,10 @@ module("Integration | Component | FloatKit | d-tooltip", function (hooks) {
     await triggerEvent(".fk-d-tooltip__trigger", "mousemove");
   }
 
+  async function leave() {
+    await triggerEvent(".fk-d-tooltip__trigger", "mouseleave");
+  }
+
   async function close() {
     await triggerKeyEvent(document.activeElement, "keydown", "Escape");
   }
@@ -240,4 +244,40 @@ module("Integration | Component | FloatKit | d-tooltip", function (hooks) {
 
     assert.dom(".fk-d-tooltip__content.test-content").doesNotExist();
   });
+
+  test("a tooltip is triggered/untriggered by click on mobile", async function (assert) {
+    this.site.mobileView = true;
+
+    await render(hbs`<DTooltip @inline={{true}} @label="label" />`);
+    await click(".fk-d-tooltip__trigger");
+
+    assert.dom(".fk-d-tooltip__content").exists();
+
+    await click(".fk-d-tooltip__trigger");
+
+    assert.dom(".fk-d-tooltip__content").doesNotExist();
+  });
+
+  test("a tooltip is triggered/untriggered by click on desktop", async function (assert) {
+    await render(hbs`<DTooltip @inline={{true}} @label="label" />`);
+    await click(".fk-d-tooltip__trigger");
+
+    assert.dom(".fk-d-tooltip__content").exists();
+
+    await click(".fk-d-tooltip__trigger");
+
+    assert.dom(".fk-d-tooltip__content").doesNotExist();
+  });
+
+  test("a tooltip is triggered/untriggered by hover on desktop", async function (assert) {
+    await render(hbs`<DTooltip @inline={{true}} @label="label" />`);
+
+    await hover();
+
+    assert.dom(".fk-d-tooltip__content").exists();
+
+    await leave();
+
+    assert.dom(".fk-d-tooltip__content").doesNotExist();
+  });
 });
diff --git a/app/assets/javascripts/float-kit/addon/lib/constants.js b/app/assets/javascripts/float-kit/addon/lib/constants.js
index ed7db412926..9f68c8d3ed3 100644
--- a/app/assets/javascripts/float-kit/addon/lib/constants.js
+++ b/app/assets/javascripts/float-kit/addon/lib/constants.js
@@ -29,8 +29,8 @@ export const TOOLTIP = {
     maxWidth: 350,
     data: null,
     offset: 10,
-    triggers: ["hover", "click"],
-    untriggers: ["hover", "click"],
+    triggers: { mobile: ["click"], desktop: ["hover", "click"] },
+    untriggers: { mobile: ["click"], desktop: ["hover", "click"] },
     placement: "top",
     fallbackPlacements: FLOAT_UI_PLACEMENTS,
     autoUpdate: true,
diff --git a/app/assets/javascripts/float-kit/addon/lib/float-kit-instance.js b/app/assets/javascripts/float-kit/addon/lib/float-kit-instance.js
index a6cfe6bc215..71c26952921 100644
--- a/app/assets/javascripts/float-kit/addon/lib/float-kit-instance.js
+++ b/app/assets/javascripts/float-kit/addon/lib/float-kit-instance.js
@@ -1,6 +1,7 @@
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { cancel } from "@ember/runloop";
+import { service } from "@ember/service";
 import { makeArray } from "discourse-common/lib/helpers";
 import discourseLater from "discourse-common/lib/later";
 import { bind } from "discourse-common/utils/decorators";
@@ -13,6 +14,8 @@ function cancelEvent(event) {
 }
 
 export default class FloatKitInstance {
+  @service site;
+
   @tracked id = null;
 
   @action
@@ -197,10 +200,28 @@ export default class FloatKitInstance {
   }
 
   get triggers() {
+    if (
+      typeof this.options.triggers === "object" &&
+      !Array.isArray(this.options.triggers)
+    ) {
+      return this.site.mobileView
+        ? this.options.triggers.mobile ?? ["click"]
+        : this.options.triggers.desktop ?? ["click"];
+    }
+
     return this.options.triggers ?? ["click"];
   }
 
   get untriggers() {
+    if (
+      typeof this.options.untriggers === "object" &&
+      !Array.isArray(this.options.untriggers)
+    ) {
+      return this.site.mobileView
+        ? this.options.untriggers.mobile ?? ["click"]
+        : this.options.untriggers.desktop ?? ["click"];
+    }
+
     return this.options.untriggers ?? ["click"];
   }
 }