DEV: Refine showPopover / hidePopover + introduce isPopoverShown helper for use with d-popover (#18334)

Although showPopover continues to toggle the popover (showing if hidden / hiding if shown), hidePopover now will only hide the popover. Furthermore, isPopoverShown has been introduced to provide insight into whether the popover is currently shown or not, and therefore whether it should be hidden or shown.

Also, the showPopover / hidePopover test has been refined to override `trigger` and `hideOnClick` settings to allow for full imperative control of showing / hiding the popover.

app/assets/javascripts/discourse/app/lib/d-popover.js

@@ -24,18 +24,23 @@ export const hideOnEscapePlugin = {
   },
 };
 
+export function isPopoverShown(event) {
+  const instance = event.target._tippy;
+  return instance?.state.isShown;
+}
+
 // legacy, shouldn't be needed with setup
 export function hidePopover(event) {
-  if (event?.target?._tippy) {
-    showPopover(event);
+  const instance = event.target._tippy;
+
+  if (instance?.state.isShown) {
+    instance.hide();
   }
 }
 
 // legacy, setup() should be used
 export function showPopover(event, options = {}) {
-  const instance = event.target._tippy
-    ? event.target._tippy
-    : setup(event.target, options);
+  const instance = event.target._tippy ?? setup(event.target, options);
 
   if (instance.state.isShown) {
     instance.hide();

app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js

@@ -3,14 +3,36 @@ import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { click, render, triggerKeyEvent } from "@ember/test-helpers";
 import { exists, query } from "discourse/tests/helpers/qunit-helpers";
 import { hbs } from "ember-cli-htmlbars";
-import { showPopover } from "discourse/lib/d-popover";
+import {
+  hidePopover,
+  isPopoverShown,
+  showPopover,
+} from "discourse/lib/d-popover";
 
 module("Integration | Component | d-popover", function (hooks) {
   setupRenderingTest(hooks);
 
   test("show/hide popover from lib", async function (assert) {
+    let showCallCount = 0;
+    let hideCallCount = 0;
+
     this.set("onButtonClick", (_, event) => {
-      showPopover(event, { content: "test", trigger: "click", duration: 0 });
+      if (isPopoverShown(event)) {
+        hidePopover(event);
+        hideCallCount++;
+      } else {
+        // Note: we need to override the default `trigger` and `hideOnClick`
+        // settings in order to completely control showing / hiding the tip
+        // via showPopover / hidePopover. Otherwise tippy's event listeners
+        // will compete with those created in this test (on DButton).
+        showPopover(event, {
+          content: "test",
+          duration: 0,
+          trigger: "manual",
+          hideOnClick: false,
+        });
+        showCallCount++;
+      }
     });
 
     await render(hbs`
@@ -30,7 +52,11 @@ module("Integration | Component | d-popover", function (hooks) {
     );
 
     await click(".btn");
+
     assert.notOk(document.querySelector("div[data-tippy-root]"));
+
+    assert.strictEqual(showCallCount, 1, "showPopover was invoked once");
+    assert.strictEqual(hideCallCount, 1, "hidePopover was invoked once");
   });
 
   test("show/hide popover from component", async function (assert) {