From 3b3d4ed98104976d30a1aee5f26b178bc7eaf151 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Thu, 15 Jun 2023 17:03:30 +0100
Subject: [PATCH] Remove Tippy implementation migrated to Stimulus

---
 client/src/entrypoints/admin/wagtailadmin.js |  3 +-
 client/src/includes/initTooltips.test.js     | 40 +-----------
 client/src/includes/initTooltips.ts          | 69 +-------------------
 3 files changed, 3 insertions(+), 109 deletions(-)

diff --git a/client/src/entrypoints/admin/wagtailadmin.js b/client/src/entrypoints/admin/wagtailadmin.js
index a5dc72c6d0..4390e087a6 100644
--- a/client/src/entrypoints/admin/wagtailadmin.js
+++ b/client/src/entrypoints/admin/wagtailadmin.js
@@ -1,5 +1,5 @@
 import { Icon, Portal } from '../..';
-import { initModernDropdown, initTooltips } from '../../includes/initTooltips';
+import { initTooltips } from '../../includes/initTooltips';
 import { initTabs } from '../../includes/tabs';
 import { dialog } from '../../includes/dialog';
 import initCollapsibleBreadcrumbs from '../../includes/breadcrumbs';
@@ -21,7 +21,6 @@ window.wagtail.components = {
  */
 document.addEventListener('DOMContentLoaded', () => {
   initTooltips();
-  initModernDropdown();
   initTabs();
   dialog();
   initCollapsibleBreadcrumbs();
diff --git a/client/src/includes/initTooltips.test.js b/client/src/includes/initTooltips.test.js
index c71e506fdd..2791902e52 100644
--- a/client/src/includes/initTooltips.test.js
+++ b/client/src/includes/initTooltips.test.js
@@ -1,5 +1,5 @@
 import * as tippy from 'tippy.js';
-import { initTooltips, initModernDropdown } from './initTooltips';
+import { initTooltips } from './initTooltips';
 
 jest.spyOn(tippy, 'default');
 
@@ -14,41 +14,3 @@ describe('initTooltips', () => {
     });
   });
 });
-
-describe('initModernDropdown', () => {
-  it('should not call Tippy if there is no element with [data-button-with-dropdown]', () => {
-    expect(tippy.default).not.toHaveBeenCalled();
-
-    initModernDropdown();
-
-    expect(tippy.default).not.toHaveBeenCalled();
-  });
-
-  it('should call the Tippy util with the [data-button-with-dropdown-toggle] attribute', () => {
-    const html = `
-    <div data-button-with-dropdown>
-      <button id="button" data-button-with-dropdown-toggle>...</button>
-      <div id="content" data-button-with-dropdown-content>
-        Content
-      </div>
-    </div>`;
-    document.body.innerHTML = html;
-
-    const content = document.getElementById('content');
-
-    expect(tippy.default).not.toHaveBeenCalled();
-
-    initModernDropdown();
-
-    expect(tippy.default).toHaveBeenLastCalledWith(
-      document.getElementById('button'),
-      expect.objectContaining({
-        content,
-        trigger: 'click',
-        interactive: true,
-        theme: 'dropdown',
-        placement: 'bottom',
-      }),
-    );
-  });
-});
diff --git a/client/src/includes/initTooltips.ts b/client/src/includes/initTooltips.ts
index 1c2db7f398..6b36bb785c 100644
--- a/client/src/includes/initTooltips.ts
+++ b/client/src/includes/initTooltips.ts
@@ -1,4 +1,4 @@
-import tippy, { Content, Props, Instance } from 'tippy.js';
+import tippy, { Instance } from 'tippy.js';
 
 /**
  * Hides tooltip when escape key is pressed
@@ -86,70 +86,3 @@ export function initTooltips() {
     plugins: [hideTooltipOnEsc],
   });
 }
-
-/**
- * Actions Dropdown initialisation using the Tippy library.
- * @example
- * <div data-button-with-dropdown>
- *  <button data-button-with-dropdown-toggle>...</button>
- *  <div data-button-with-dropdown-content></div>
- * </div>
- */
-export function initModernDropdown() {
-  const containers = document.querySelectorAll('[data-button-with-dropdown]');
-
-  containers.forEach((container) => {
-    const content = container.querySelector(
-      '[data-button-with-dropdown-content]',
-    );
-    const toggle: HTMLElement | null = container.querySelector(
-      '[data-button-with-dropdown-toggle]',
-    );
-
-    // Adding data-hover-tooltip-content="Tooltip Text" to the toggle element will give you a tooltip on hover as well
-    const hoverTooltip = toggle?.dataset.hoverTooltipContent;
-    let hoverTooltipInstance: Instance;
-
-    if (toggle) {
-      if (content) {
-        content.classList.remove('w-hidden');
-      }
-
-      if (hoverTooltip) {
-        hoverTooltipInstance = tippy(toggle, {
-          content: hoverTooltip,
-          placement: 'bottom',
-          plugins: [hideTooltipOnEsc],
-        });
-      }
-
-      /**
-       * Default Tippy Options
-       */
-      const tippyOptions: Partial<Props> = {
-        content: content as Content,
-        trigger: 'click',
-        interactive: true,
-        theme: 'dropdown',
-        placement: 'bottom',
-        plugins: [
-          hideTooltipOnEsc,
-          hideTooltipOnBreadcrumbExpandAndCollapse,
-          rotateToggleIcon,
-        ],
-        onShow() {
-          if (hoverTooltipInstance) {
-            hoverTooltipInstance.disable();
-          }
-        },
-        onHide() {
-          if (hoverTooltipInstance) {
-            hoverTooltipInstance.enable();
-          }
-        },
-      };
-
-      tippy(toggle, tippyOptions);
-    }
-  });
-}