refactor(frontend): menus on react-aria-components, drop tippy

cypress/e2e/frontend/test_1_runQuery.cy.js

@@ -53,7 +53,8 @@ describe("Run query", () => {
         cy.get('[data-test-id="project-items-list"]').as("executionList");
 
         cy.get('@executionList').find('[data-test-id="project-item-delete-button"]').click();
-        cy.get('@executionList').contains('Anfrage jetzt löschen').click();
+        // the confirmation menu renders in a portal, outside the list
+        cy.contains('Anfrage jetzt löschen').click();
 
         cy.get('@leftPaneContainer').contains('Keine Anfragen / Formulare gefunden')
     });
@@ -158,7 +159,7 @@ describe("Reference list", () => {
 
         // Clear editor
         cy.get('@queryEditor').find('svg[data-icon="trash"]').click()
-        cy.get('@queryEditor').find('button[data-test-id="confirm"]').click()
+        cy.get('[data-test-id="confirm"]').click()
         cy.get('@queryEditor').find('[data-test-id="text-initial"]')
     })
 

frontend/package.json

@@ -30,7 +30,6 @@
     "@paralleldrive/cuid2": "^3.3.0",
     "@react-keycloak-fork/web": "^4.0.3",
     "@redux-devtools/extension": "^4.0.0",
-    "@tippyjs/react": "^4.2.6",
     "apache-arrow": "^21.2.0",
     "axios": "^1.19.0",
     "chance": "^1.1.13",
@@ -72,7 +71,6 @@
     "remark-gfm": "^4.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "tailwind-variants": "^3.3.1",
-    "tippy.js": "^6.3.7",
     "typesafe-actions": "^5.1.0"
   },
   "devDependencies": {

frontend/src/index.css

@@ -124,26 +124,6 @@
   }
 }
 
-/* @tippyjs/react sets inline styles, hence the specificity */
-div[data-tippy-root] {
-  max-width: 700px;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
-  border-radius: var(--radius);
-
-  > div {
-    box-shadow: none;
-    /* biome-ignore lint/complexity/noImportantStyles: beats the inline style tippy sets */
-    max-width: inherit !important;
-    width: 100%;
-    padding: 0;
-  }
-
-  .tippy-content {
-    padding: 0px;
-    box-shadow: none;
-  }
-}
-
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still

frontend/src/js/button/DownloadButton.tsx

@@ -31,7 +31,7 @@ const fileTypeToFileIcon: Record<string, FileIcon> = {
   JSON: { icon: faFileCode, color: "var(--color-filetype-json)" },
 };
 
-function getFileIcon(url: string): FileIcon {
+export function getFileIcon(url: string): FileIcon {
   if (url.includes(".")) {
     const ext = getEnding(url);
 

frontend/src/js/editor-v2/EditorV2.tsx

@@ -22,7 +22,7 @@ import type {
   DragItemConceptTreeNode,
   DragItemQuery,
 } from "../standard-query-editor/types";
-import { ConfirmableTooltip } from "../ui-components/ConfirmableTooltip";
+import { ConfirmMenu } from "../ui-components/ConfirmMenu";
 import Dropzone from "../ui-components/Dropzone";
 import { Tooltip, TooltipTrigger } from "../ui-components/Tooltip";
 import { EDITOR_DROP_TYPES, HOTKEYS } from "./config";
@@ -432,15 +432,15 @@ export function EditorV2({
                 </KeyboardShortcutTooltip>
               )}
               <TooltipTrigger>
-                <ConfirmableTooltip
+                <ConfirmMenu
                   onConfirm={onReset}
                   confirmationText={t("editorV2.clearConfirm")}
                 >
                   <IconButton
                     style={{ marginLeft: "20px", height: "32.5px" }}
                     icon={faTrash}
                   />
-                </ConfirmableTooltip>
+                </ConfirmMenu>
                 <Tooltip>{t("editorV2.clear")}</Tooltip>
               </TooltipTrigger>
             </div>

frontend/src/js/entity-history/Navigation.tsx

@@ -20,7 +20,7 @@ import { tv } from "tailwind-variants";
 import type { SelectOptionT } from "../api/types";
 import type { StateT } from "../app/reducers";
 import IconButton from "../button/IconButton";
-import { ConfirmableTooltip } from "../ui-components/ConfirmableTooltip";
+import { ConfirmMenu } from "../ui-components/ConfirmMenu";
 import {
   Tooltip,
   TooltipTrigger,
@@ -157,9 +157,8 @@ export const Navigation = memo(
             <Tooltip>{backButtonWarning}</Tooltip>
           </TooltipTrigger>
           {!empty && (
-            <ConfirmableTooltip
+            <ConfirmMenu
               onConfirm={onReset}
-              placement="bottom"
               confirmationText={t("history.settings.resetConfirm")}
             >
               <IconButton
@@ -169,7 +168,7 @@ export const Navigation = memo(
               >
                 {t("history.settings.reset")}
               </IconButton>
-            </ConfirmableTooltip>
+            </ConfirmMenu>
           )}
         </div>
         {!empty && (

frontend/src/js/external-forms/FormsNavigation.tsx

@@ -6,7 +6,7 @@ import { tv } from "tailwind-variants";
 import type { StateT } from "../app/reducers";
 import IconButton from "../button/IconButton";
 import { useActiveLang } from "../localization/useActiveLang";
-import { ConfirmableTooltip } from "../ui-components/ConfirmableTooltip";
+import { ConfirmMenu } from "../ui-components/ConfirmMenu";
 import InputSelect from "../ui-components/InputSelect/InputSelect";
 import { Tooltip, TooltipTrigger } from "../ui-components/Tooltip";
 
@@ -73,7 +73,7 @@ const FormsNavigation = ({ onReset }: { onReset: () => void }) => {
           }}
         />
         <TooltipTrigger>
-          <ConfirmableTooltip
+          <ConfirmMenu
             onConfirm={onReset}
             confirmationText={t("externalForms.common.clearConfirm")}
           >
@@ -82,7 +82,7 @@ const FormsNavigation = ({ onReset }: { onReset: () => void }) => {
               frame
               icon={faTrash}
             />
-          </ConfirmableTooltip>
+          </ConfirmMenu>
           <Tooltip>{t("externalForms.common.clear")}</Tooltip>
         </TooltipTrigger>
       </div>

frontend/src/js/header/HelpMenu.tsx

@@ -4,89 +4,68 @@ import {
   faPaperPlane,
   faQuestion,
 } from "@fortawesome/free-solid-svg-icons";
-import { useMemo } from "react";
+import { MenuTrigger } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-import { tv } from "tailwind-variants";
 
 import { useAbout } from "../app/About";
 import IconButton from "../button/IconButton";
-import WithTooltip from "../ui-components/WithTooltip";
-
-const list = tv({ base: ["flex flex-col", "gap-[2px]", "p-2"] });
+import FaIcon from "../icon/FaIcon";
+import { Menu, MenuItem, menuItemIcon } from "../ui-components/Menu";
 
 interface Props {
   contactEmail?: string;
   manualUrl?: string;
 }
 
-// Skidding makes Dropdown align the right edge with the button,
-// might need to adjust this when adding more content.
-const dropdownOffset: [number, number] = [-47, 5]; // [skidding, distance] / default [0, 10]
-
 export const HelpMenu = ({ contactEmail, manualUrl }: Props) => {
   const { t } = useTranslation();
   const { setOpen } = useAbout();
 
-  const Dropdown = useMemo(
-    () => (
-      <div className={list()}>
-        <a
+  return (
+    <MenuTrigger>
+      <IconButton
+        className="px-3 py-[7px]"
+        icon={faQuestion}
+        frame
+        data-test-id="help-menu"
+      />
+      <Menu
+        aria-label={t("common.help")}
+        placement="bottom end"
+        onAction={(key) => {
+          if (key === "version") setOpen(true);
+        }}
+      >
+        <MenuItem
+          id="contact"
           href={`mailto:${contactEmail}`}
           rel="noopener noreferrer"
           data-test-id="help-email"
         >
-          <IconButton
-            className="w-full"
-            bgHover
-            fixedIconWidth={14}
-            icon={faPaperPlane}
-          >
-            {t("common.contact")}
-          </IconButton>
-        </a>
-        <a
+          <span className={menuItemIcon()}>
+            <FaIcon icon={faPaperPlane} />
+          </span>
+          {t("common.contact")}
+        </MenuItem>
+        <MenuItem
+          id="manual"
           href={manualUrl}
           target="_blank"
           rel="noopener noreferrer"
           data-test-id="help-manual"
         >
-          <IconButton
-            className="w-full"
-            bgHover
-            fixedIconWidth={14}
-            icon={faBook}
-          >
-            {t("common.manual")}
-          </IconButton>
-        </a>
-        <IconButton
-          className="w-full"
-          bgHover
-          fixedIconWidth={14}
-          icon={faInfoCircle}
-          onClick={() => setOpen(true)}
-        >
+          <span className={menuItemIcon()}>
+            <FaIcon icon={faBook} />
+          </span>
+          {t("common.manual")}
+        </MenuItem>
+        <MenuItem id="version">
+          <span className={menuItemIcon()}>
+            <FaIcon icon={faInfoCircle} />
+          </span>
           {t("common.version")}
-        </IconButton>
-      </div>
-    ),
-    [t, manualUrl, contactEmail, setOpen],
-  );
-  return (
-    <WithTooltip
-      interactive
-      trigger="click"
-      arrow={false}
-      html={Dropdown}
-      offset={dropdownOffset}
-      hideOnClick
-    >
-      <IconButton
-        className="px-3 py-[7px]"
-        icon={faQuestion}
-        frame
-        data-test-id="help-menu"
-      />
-    </WithTooltip>
+        </MenuItem>
+      </Menu>
+    </MenuTrigger>
   );
 };

frontend/src/js/previous-queries/list/DeleteProjectItemButton.tsx

@@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import IconButton from "../../button/IconButton";
-import { ConfirmableTooltip } from "../../ui-components/ConfirmableTooltip";
+import { ConfirmMenu } from "../../ui-components/ConfirmMenu";
 import { Tooltip, TooltipTrigger } from "../../ui-components/Tooltip";
 import { useRemoveFormConfig, useRemoveQuery } from "./actions";
 import { isFormConfig } from "./helpers";
@@ -32,18 +32,14 @@ export const DeleteProjectItemButton = ({ item }: { item: ProjectItemT }) => {
 
   return (
     <TooltipTrigger>
-      <ConfirmableTooltip
-        red
-        onConfirm={onDelete}
-        confirmationText={confirmationText}
-      >
+      <ConfirmMenu red onConfirm={onDelete} confirmationText={confirmationText}>
         <IconButton
           icon={faTimes}
           bare
           aria-label={t("common.delete")}
           data-test-id="project-item-delete-button"
         />
-      </ConfirmableTooltip>
+      </ConfirmMenu>
       <Tooltip>{t("common.delete")}</Tooltip>
     </TooltipTrigger>
   );