Migrated menu to react-aria-components (#6504)

bilalabbad · web-flow · commit 6f8253caeee6 · 2025-05-22T09:39:03.000+02:00
* Migrated menu to react-aria-components
diff --git a/changelog/+menu.added.md b/changelog/+menu.added.md
@@ -0,0 +1 @@
+Improved the design and accessibility of the menu in the object view
diff --git a/frontend/app/src/app/router.tsx b/frontend/app/src/app/router.tsx
@@ -9,22 +9,45 @@ import { constructPath } from "@/shared/api/rest/fetch";
 import { ErrorBoundaryRouter } from "@/shared/components/errors/error-boundary-router";
 import { ReactRouter7Adapter } from "@/shared/libs/use-query-params";
 import queryString from "query-string";
-import { Navigate, Outlet, UIMatch, createBrowserRouter } from "react-router";
+import { RouterProvider } from "react-aria-components";
+import {
+  Navigate,
+  type NavigateOptions,
+  Outlet,
+  UIMatch,
+  createBrowserRouter,
+  useHref,
+  useNavigate,
+} from "react-router";
 import { Slide, ToastContainer } from "react-toastify";
 import { QueryParamProvider } from "use-query-params";
 
-export const router = createBrowserRouter([
-  {
-    path: "",
-    errorElement: <ErrorBoundaryRouter />,
-    element: (
-      <QueryParamProvider
-        adapter={ReactRouter7Adapter}
-        options={{
-          searchStringToObject: queryString.parse,
-          objectToSearchString: queryString.stringify,
-        }}
-      >
+declare module "react-aria-components" {
+  interface RouterConfig {
+    routerOptions: NavigateOptions;
+  }
+}
+
+function useAbsoluteHref(path: string) {
+  const relative = useHref(path);
+  if (path.startsWith("https://") || path.startsWith("http://") || path.startsWith("mailto:")) {
+    return path;
+  }
+  return relative;
+}
+
+function RootProviders({ children }: { children: React.ReactNode }) {
+  const navigate = useNavigate();
+
+  return (
+    <QueryParamProvider
+      adapter={ReactRouter7Adapter}
+      options={{
+        searchStringToObject: queryString.parse,
+        objectToSearchString: queryString.stringify,
+      }}
+    >
+      <RouterProvider navigate={navigate} useHref={useAbsoluteHref}>
         <ToastContainer
           hideProgressBar={true}
           transition={Slide}
@@ -33,8 +56,20 @@ export const router = createBrowserRouter([
           newestOnTop
           position="bottom-right"
         />
+        {children}
+      </RouterProvider>
+    </QueryParamProvider>
+  );
+}
+
+export const router = createBrowserRouter([
+  {
+    path: "",
+    errorElement: <ErrorBoundaryRouter />,
+    element: (
+      <RootProviders>
         <Outlet />
-      </QueryParamProvider>
+      </RootProviders>
     ),
     children: [
       {
diff --git a/frontend/app/src/entities/artifacts/ui/artifact-details-menu.tsx b/frontend/app/src/entities/artifacts/ui/artifact-details-menu.tsx
@@ -1,9 +1,8 @@
-import { CopyToClipboard } from "@/shared/components/buttons/copy-to-clipboard";
+import { CopyToClipboardMenuItem } from "@/shared/components/aria/menu";
 import {
   ObjectDetailsButton,
   ObjectDetailsButtonProps,
 } from "@/shared/components/menu/object-details-button";
-import { DropdownMenuItem } from "@/shared/components/ui/dropdown-menu";
 
 export interface ArtifactDetailsMenuProps extends ObjectDetailsButtonProps {
   checksum?: string;
@@ -14,27 +13,11 @@ export function ArtifactDetailsMenu({ id, hfid, checksum, storageId }: ArtifactD
   return (
     <ObjectDetailsButton id={id} hfid={hfid}>
       {checksum && (
-        <DropdownMenuItem className="p-0">
-          <CopyToClipboard
-            size={"default"}
-            className="grow justify-start gap-2 p-2"
-            text={checksum}
-          >
-            Copy Checksum
-          </CopyToClipboard>
-        </DropdownMenuItem>
+        <CopyToClipboardMenuItem textToCopy={checksum}>Copy Checksum</CopyToClipboardMenuItem>
       )}
 
       {storageId && (
-        <DropdownMenuItem className="p-0">
-          <CopyToClipboard
-            size={"default"}
-            className="grow justify-start gap-2 p-2"
-            text={storageId}
-          >
-            Copy Storage ID
-          </CopyToClipboard>
-        </DropdownMenuItem>
+        <CopyToClipboardMenuItem textToCopy={storageId}>Copy Storage ID</CopyToClipboardMenuItem>
       )}
     </ObjectDetailsButton>
   );
diff --git a/frontend/app/src/entities/repository/ui/repository-action-menu.tsx b/frontend/app/src/entities/repository/ui/repository-action-menu.tsx
@@ -6,25 +6,27 @@ import {
 } from "@/entities/repository/api/actions";
 import { useMutation } from "@/shared/api/graphql/useQuery";
 import { queryClient } from "@/shared/api/rest/client";
+import {
+  Menu,
+  MenuItem,
+  MenuPopover,
+  MenuSection,
+  MenuTrigger,
+} from "@/shared/components/aria/menu";
 import { Button, ButtonWithTooltip } from "@/shared/components/buttons/button-primitive";
 import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/shared/components/ui/dropdown-menu";
 import { Dialog } from "@headlessui/react";
 import { useState } from "react";
+import { Pressable } from "react-aria-components";
 import { toast } from "react-toastify";
 
 const RepositoryActionMenu = ({ repositoryId }: { repositoryId: string }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+      <MenuTrigger>
+        <Pressable>
           <ButtonWithTooltip
             tooltipContent="More"
             tooltipEnabled
@@ -34,17 +36,21 @@ const RepositoryActionMenu = ({ repositoryId }: { repositoryId: string }) => {
           >
             <Icon icon="mdi:dots-vertical" className="text-custom-blue-900 text-lg p-4" />
           </ButtonWithTooltip>
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem onClick={() => setIsOpen(true)}>
-            <Icon icon="mdi:access-point" className="text-lg" />
-            Check connectivity
-          </DropdownMenuItem>
-
-          <ReimportLastCommitAction repositoryId={repositoryId} />
-        </DropdownMenuContent>
-      </DropdownMenu>
+        </Pressable>
+
+        <MenuPopover placement="bottom end">
+          <Menu>
+            <MenuSection>
+              <MenuItem onAction={() => setIsOpen(true)}>
+                <Icon icon="mdi:access-point" className="text-lg" />
+                Check connectivity
+              </MenuItem>
+
+              <ReimportLastCommitAction repositoryId={repositoryId} />
+            </MenuSection>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
 
       <CheckConnectivityModal repositoryId={repositoryId} isOpen={isOpen} setIsOpen={setIsOpen} />
     </>
@@ -156,10 +162,10 @@ const ReimportLastCommitAction = ({ repositoryId }: { repositoryId: string }) =>
   });
 
   return (
-    <DropdownMenuItem onClick={() => reimportLastCommit()}>
+    <MenuItem onAction={() => reimportLastCommit()}>
       <Icon icon="mdi:reload" className="text-lg" />
       Reimport last commit
-    </DropdownMenuItem>
+    </MenuItem>
   );
 };
 
diff --git a/frontend/app/src/entities/schema/ui/schema-help-menu.tsx b/frontend/app/src/entities/schema/ui/schema-help-menu.tsx
@@ -2,15 +2,16 @@ import { INFRAHUB_DOC_LOCAL } from "@/config/config";
 import { MENU_EXCLUDELIST } from "@/config/constants";
 import { getObjectDetailsUrl } from "@/entities/nodes/utils";
 import { ModelSchema } from "@/entities/schema/types";
-import { Button } from "@/shared/components/buttons/button-primitive";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/shared/components/ui/dropdown-menu";
+  Menu,
+  MenuItem,
+  MenuPopover,
+  MenuSection,
+  MenuTrigger,
+} from "@/shared/components/aria/menu";
+import { Button } from "@/shared/components/buttons/button-primitive";
 import { Icon } from "@iconify-icon/react";
-import { Link } from "react-router";
+import { Pressable } from "react-aria-components";
 
 type SchemaHelpMenuProps = {
   schema: ModelSchema;
@@ -24,29 +25,32 @@ export const SchemaHelpMenu = ({ schema }: SchemaHelpMenuProps) => {
     : INFRAHUB_DOC_LOCAL;
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+    <MenuTrigger>
+      <Pressable>
         <Button size="icon" variant="outline" data-testid="schema-help-menu-trigger">
           ?
         </Button>
-      </DropdownMenuTrigger>
+      </Pressable>
 
-      <DropdownMenuContent data-testid="schema-help-menu-content">
-        <DropdownMenuItem disabled={!schema.documentation} asChild>
-          <Link to={documentationUrl} target="_blank" className="flex gap-2">
-            <Icon icon="mdi:book-open-variant-outline" className="text-lg text-custom-blue-700" />
-            Documentation
-            <Icon icon="mdi:open-in-new" />
-          </Link>
-        </DropdownMenuItem>
+      <MenuPopover placement="bottom end">
+        <Menu data-testid="schema-help-menu-content">
+          <MenuSection>
+            <MenuItem isDisabled={!schema.documentation} href={documentationUrl} target="_blank">
+              <Icon icon="mdi:book-open-variant-outline" className="text-lg text-custom-blue-700" />
+              Documentation
+              <Icon icon="mdi:open-in-new" />
+            </MenuItem>
 
-        <DropdownMenuItem disabled={isListViewDisabled} asChild>
-          <Link to={getObjectDetailsUrl(schema.kind as string)} className="flex gap-2">
-            <Icon icon="mdi:table-eye" className="text-lg text-custom-blue-700" />
-            Open list view
-          </Link>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+            <MenuItem
+              isDisabled={isListViewDisabled}
+              href={getObjectDetailsUrl(schema.kind as string)}
+            >
+              <Icon icon="mdi:table-eye" className="text-lg text-custom-blue-700" />
+              Open list view
+            </MenuItem>
+          </MenuSection>
+        </Menu>
+      </MenuPopover>
+    </MenuTrigger>
   );
 };
diff --git a/frontend/app/src/shared/components/aria/menu.tsx b/frontend/app/src/shared/components/aria/menu.tsx
@@ -1,52 +1,60 @@
+import { Popover } from "@/shared/components/aria/popover";
+import { disabledStyle } from "@/shared/components/style-rac";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import { classNames } from "@/shared/utils/common";
+import { CopyIcon } from "lucide-react";
 import {
+  Header as AriaHeader,
+  HeadingProps as AriaHeadingProps,
   Menu as AriaMenu,
   MenuItem as AriaMenuItem,
   MenuItemProps as AriaMenuItemProps,
   MenuProps as AriaMenuProps,
+  MenuSection as AriaMenuSection,
+  MenuSectionProps as AriaMenuSectionProps,
   MenuTrigger as AriaMenuTrigger,
-  SubmenuTrigger as AriaSubmenuTrigger,
-  PopoverProps,
+  PopoverProps as AriaPopoverProps,
   composeRenderProps,
 } from "react-aria-components";
 
-import { disabledStyle } from "@/shared/components/style-rac";
-import { classNames } from "@/shared/utils/common";
-import { SelectPopover } from "./select";
-
 export const MenuTrigger = AriaMenuTrigger;
 
-export const MenuSubTrigger = AriaSubmenuTrigger;
-
-export const MenuPopover = ({ className, ...props }: PopoverProps) => {
+export interface MenuPopoverProps extends AriaPopoverProps {}
+export const MenuPopover = ({ className, ...props }: MenuPopoverProps) => {
   return (
-    <SelectPopover
-      className={composeRenderProps(className, (className) => classNames("w-auto", className))}
+    <Popover
+      className={composeRenderProps(className, (className) => {
+        return classNames("p-1 rounded-lg bg-stone-100 border-stone-200", className);
+      })}
       {...props}
     />
   );
 };
 
-export const Menu = <T extends object>({ className, ...props }: AriaMenuProps<T>) => {
+export interface MenuProps<T> extends AriaMenuProps<T> {}
+export const Menu = <T extends object>({ className, ...props }: MenuProps<T>) => {
   return (
     <AriaMenu
       className={classNames(
-        "max-h-[inherit] overflow-auto rounded-md outline outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",
+        "max-h-[inherit] overflow-auto rounded-md outline-hidden",
+        "*:[[role='group']:not(:last-child)]:mb-2",
         className
       )}
       {...props}
     />
   );
 };
 
-export const MenuItem = ({ children, className, ...props }: AriaMenuItemProps) => {
+export interface MenuItemProps extends AriaMenuItemProps {}
+export const MenuItem = ({ children, className, ...props }: MenuItemProps) => {
   return (
     <AriaMenuItem
       textValue={props.textValue || (typeof children === "string" ? children : undefined)}
       className={composeRenderProps(className, (className) =>
         classNames(
-          "relative flex cursor-default select-none items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors",
           disabledStyle,
-          "data-focused:bg-gray-100",
+          "transition-colors min-w-40 flex items-center gap-2 cursor-pointer select-none outline-hidden bg-white border border-transparent text-sm text-stone-600 rounded-md py-1 px-2",
+          "data-focused:border-stone-300",
           className
         )
       )}
@@ -56,3 +64,31 @@ export const MenuItem = ({ children, className, ...props }: AriaMenuItemProps) =
     </AriaMenuItem>
   );
 };
+
+export interface MenuSectionProps<T> extends AriaMenuSectionProps<T> {}
+export const MenuSection = <T extends object>({ className, ...props }: MenuSectionProps<T>) => {
+  return <AriaMenuSection className={classNames("flex flex-col gap-0.5", className)} {...props} />;
+};
+
+export interface MenuHeaderProps extends AriaHeadingProps {}
+export const MenuHeader = ({ className, ...props }: MenuHeaderProps) => {
+  return <AriaHeader className={classNames("text-xs text-stone-500 px-1", className)} {...props} />;
+};
+
+export interface CopyToClipboardMenuItemProps extends Omit<MenuItemProps, "onAction" | "children"> {
+  textToCopy: string;
+  children?: React.ReactNode;
+}
+export function CopyToClipboardMenuItem({
+  textToCopy,
+  children,
+  ...props
+}: CopyToClipboardMenuItemProps) {
+  const { copyToClipboard } = useCopyToClipboard();
+  return (
+    <MenuItem onAction={() => copyToClipboard(textToCopy)} {...props}>
+      <CopyIcon className="size-3" />
+      {children}
+    </MenuItem>
+  );
+}
diff --git a/frontend/app/src/shared/components/menu/object-details-button.tsx b/frontend/app/src/shared/components/menu/object-details-button.tsx
diff --git a/frontend/app/src/shared/components/menu/object-help-button.tsx b/frontend/app/src/shared/components/menu/object-help-button.tsx
diff --git a/frontend/app/tests/e2e/schema.spec.ts b/frontend/app/tests/e2e/schema.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Improved the design and accessibility of the menu in the object view`