Use React Tippy for dropdowns and tooltips (#645)

Author: lewisbirks

package-lock.json

@@ -27,11 +27,11 @@
     "@babel/preset-typescript": "^7.21.0",
     "@babel/traverse": "^7.20.7",
     "@messageformat/core": "3.4.0",
+    "@tippyjs/react": "^4.2.6",
     "babel-loader": "^9.1.2",
     "babel-plugin-import": "^1.13.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-tippy": "^1.4.0",
     "react-virtuoso": "^4.6.2"
   },
   "devDependencies": {

package.json

@@ -1,63 +1,59 @@
-import React, { useEffect, useRef } from "react";
-
-declare global {
-  interface Window {
-    Behaviour: any;
-  }
-}
+import Tippy from "@tippyjs/react";
+import React, { useState } from "react";
+import Tooltip from "./tooltip";
 
 /**
- * Provides a bridge between React and the Jenkins' dropdown component
+ * A customized (and customizable) implementation of Tippy dropdowns
  */
 export default function Dropdown({ items, disabled }: DropdownProps) {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (!buttonRef.current) {
-      return;
-    }
-
-    const template = document.createElement("template");
-    template.innerHTML = `
-    <div class="jenkins-dropdown">
-      ${items
-        .map(
-          (item) => `
-        <template data-dropdown-type="CUSTOM">
-          <a class="jenkins-dropdown__item" href=${item.href}
-             ${item.target ? `target="${item.target}"` : ""}
-             ${item.download ? `download="${item.download}"` : ""}>
-            <div class="jenkins-dropdown__item__icon">${item.icon}</div>
-            ${item.text}
-          </a>
-        </template>
-      `,
-        )
-        .join("")}
-    </div>
-  `;
-    buttonRef.current.parentNode?.appendChild(template);
-
-    window.Behaviour?.applySubtree(buttonRef.current.parentNode, true);
-  }, []);
+  const [visible, setVisible] = useState(false);
+  const show = () => setVisible(true);
+  const hide = () => setVisible(false);
 
   return (
-    <>
-      <button
-        className="jenkins-button jenkins-button--tertiary"
-        type="button"
-        data-dropdown="true"
-        {...{ tooltip: "More actions" }}
-        ref={buttonRef}
-        disabled={disabled}
+    <Tooltip content={"More actions"}>
+      <Tippy
+        theme="dropdown"
+        duration={250}
+        touch={true}
+        visible={visible}
+        animation="dropdown"
+        onClickOutside={hide}
+        interactive={true}
+        offset={[0, 0]}
+        placement="bottom-start"
+        arrow={false}
+        content={
+          <div className="jenkins-dropdown">
+            {items.map((item, index) => (
+              <a
+                key={index}
+                className="jenkins-dropdown__item"
+                href={item.href}
+                target={item.target}
+                download={item.download}
+              >
+                <div className="jenkins-dropdown__item__icon">{item.icon}</div>
+                {item.text}
+              </a>
+            ))}
+          </div>
+        }
       >
-        <div className="jenkins-overflow-button__ellipsis">
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-      </button>
-    </>
+        <button
+          className="jenkins-button jenkins-button--tertiary"
+          type="button"
+          disabled={disabled}
+          onClick={visible ? hide : show}
+        >
+          <div className="jenkins-overflow-button__ellipsis">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </button>
+      </Tippy>
+    </Tooltip>
   );
 }
 
@@ -69,7 +65,7 @@ interface DropdownProps {
 interface DropdownItem {
   text: string;
   href?: string;
-  icon: string;
+  icon: React.ReactNode;
   target?: string;
   download?: string;
 }

src/main/frontend/common/components/dropdown.tsx

@@ -1,33 +1,23 @@
-import React, { useEffect, useRef } from "react";
-
-declare global {
-  interface Window {
-    Behaviour: any;
-  }
-}
+import Tippy, { TippyProps } from "@tippyjs/react";
+import React from "react";
 
 /**
- * Provides a bridge between React and the Jenkins' tooltip component
+ * A customized (and customizable) implementation of Tippy tooltips
  */
-export default function Tooltip({ text, children }: TooltipProps) {
-  const ref = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    window.Behaviour?.applySubtree(ref.current.parentNode, true);
-  }, []);
+export default function Tooltip(props: TippyProps) {
+  if (props.content === undefined) {
+    return props.children;
+  }
 
   return (
-    <span {...{ tooltip: text }} ref={ref}>
-      {children}
-    </span>
+    <Tippy
+      theme="tooltip"
+      animation="tooltip"
+      duration={250}
+      touch={false}
+      {...props}
+    >
+      {props.children}
+    </Tippy>
   );
 }
-
-interface TooltipProps {
-  text: string;
-  children: React.ReactNode;
-}

src/main/frontend/common/components/tooltip.tsx

@@ -118,7 +118,7 @@ export default function ConsoleLogCard(props: ConsoleLogCardProps) {
           </div>
         </a>
 
-        <Tooltip text={"View step as plain text"}>
+        <Tooltip content={"View step as plain text"}>
           <a
             href={`log?nodeId=${props.step.id}`}
             className={"jenkins-button jenkins-button--tertiary"}

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx

@@ -1,5 +1,3 @@
-@import "react-tippy/dist/tippy.css";
-
 .ansi-fg-0 {
   color: var(--black, #333);
 }