Merge pull request dmm-com#1646 from syucream/fix/reduce-non-core-modules

chore: update dependencies and remove deprecated packages in package.json

Author: hinashi

frontend/src/ErrorHandler.tsx

@@ -9,8 +9,8 @@ import {
 import { styled } from "@mui/material/styles";
 import { FC, ReactNode, useCallback, useEffect, useState } from "react";
 import { ErrorBoundary, FallbackProps } from "react-error-boundary";
-import { useError } from "react-use";
 
+import { useError } from "./hooks/useError";
 import { ForbiddenErrorPage } from "./pages/ForbiddenErrorPage";
 import { NonTermsServiceAgreementPage } from "./pages/NonTermsServiceAgreement";
 import { NotFoundErrorPage } from "./pages/NotFoundErrorPage";

frontend/src/components/common/Header.test.tsx

@@ -8,17 +8,24 @@ import { Header } from "./Header";
 
 import { TestWrapper } from "TestWrapper";
 
-// Mock ServerContext
+// Mock ServerContext - configurable per test
+const defaultServerContext = {
+  title: "Airone",
+  version: "1.0.0",
+  headerColor: "#1976d2",
+  legacyUiDisabled: true,
+  extendedHeaderMenus: [] as Array<{
+    name: string;
+    children: Array<{ name: string; url: string }>;
+  }>,
+  user: { id: 1, username: "testuser" },
+};
+
+let mockServerContext = { ...defaultServerContext };
+
 jest.mock("../../services/ServerContext", () => ({
   ServerContext: {
-    getInstance: () => ({
-      title: "Airone",
-      version: "1.0.0",
-      headerColor: "#1976d2",
-      legacyUiDisabled: true,
-      extendedHeaderMenus: [],
-      user: { id: 1, username: "testuser" },
-    }),
+    getInstance: () => mockServerContext,
   },
 }));
 
@@ -61,12 +68,16 @@ jest.mock("../../repository/AironeApiClient", () => ({
   },
 }));
 
-// Mock react-use useInterval
-jest.mock("react-use", () => ({
+// Mock useInterval
+jest.mock("../../hooks/useInterval", () => ({
   useInterval: jest.fn(),
 }));
 
 describe("Header", () => {
+  beforeEach(() => {
+    mockServerContext = { ...defaultServerContext, extendedHeaderMenus: [] };
+  });
+
   describe("rendering", () => {
     test("should render header with title", () => {
       render(<Header />, { wrapper: TestWrapper });
@@ -149,6 +160,110 @@ describe("Header", () => {
         expect(screen.getByText("Triggers")).toBeInTheDocument();
       });
     });
+
+    test("should close management submenu on mouse leave", async () => {
+      render(<Header />, { wrapper: TestWrapper });
+
+      const managementButton = screen.getByText("Management");
+      fireEvent.mouseEnter(managementButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Users")).toBeInTheDocument();
+      });
+
+      // Find the menu list and trigger mouseLeave
+      const menuItems = screen.getByText("Users").closest("ul");
+      if (menuItems) {
+        fireEvent.mouseLeave(menuItems);
+      }
+
+      await waitFor(() => {
+        expect(screen.queryByText("Users")).not.toBeVisible();
+      });
+    });
+  });
+
+  describe("extended header menus", () => {
+    test("should show extended menu items on hover", async () => {
+      mockServerContext = {
+        ...defaultServerContext,
+        extendedHeaderMenus: [
+          {
+            name: "External Tools",
+            children: [
+              { name: "Tool A", url: "https://tool-a.example.com" },
+              { name: "Tool B", url: "https://tool-b.example.com" },
+            ],
+          },
+        ],
+      };
+
+      render(<Header />, { wrapper: TestWrapper });
+
+      const extendedMenuButton = screen.getByText("External Tools");
+      expect(extendedMenuButton).toBeInTheDocument();
+
+      fireEvent.mouseEnter(extendedMenuButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Tool A")).toBeInTheDocument();
+        expect(screen.getByText("Tool B")).toBeInTheDocument();
+      });
+    });
+
+    test("should close extended menu on mouse leave", async () => {
+      mockServerContext = {
+        ...defaultServerContext,
+        extendedHeaderMenus: [
+          {
+            name: "External Tools",
+            children: [{ name: "Tool A", url: "https://tool-a.example.com" }],
+          },
+        ],
+      };
+
+      render(<Header />, { wrapper: TestWrapper });
+
+      const extendedMenuButton = screen.getByText("External Tools");
+      fireEvent.mouseEnter(extendedMenuButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Tool A")).toBeInTheDocument();
+      });
+
+      const menuItems = screen.getByText("Tool A").closest("ul");
+      if (menuItems) {
+        fireEvent.mouseLeave(menuItems);
+      }
+
+      await waitFor(() => {
+        expect(screen.queryByText("Tool A")).not.toBeVisible();
+      });
+    });
+
+    test("should render links with correct href in extended menu", async () => {
+      mockServerContext = {
+        ...defaultServerContext,
+        extendedHeaderMenus: [
+          {
+            name: "External Tools",
+            children: [{ name: "Tool A", url: "https://tool-a.example.com" }],
+          },
+        ],
+      };
+
+      render(<Header />, { wrapper: TestWrapper });
+
+      fireEvent.mouseEnter(screen.getByText("External Tools"));
+
+      await waitFor(() => {
+        const toolLink = screen.getByText("Tool A");
+        expect(toolLink.closest("a")).toHaveAttribute(
+          "href",
+          "https://tool-a.example.com",
+        );
+      });
+    });
   });
 
   describe("search functionality", () => {

frontend/src/components/common/Header.tsx

@@ -17,15 +17,13 @@ import {
 } from "@mui/material";
 import { OverridableComponent } from "@mui/material/OverridableComponent";
 import { styled } from "@mui/material/styles";
-import PopupState, { bindHover, bindMenu } from "material-ui-popup-state";
-import HoverMenu from "material-ui-popup-state/HoverMenu";
 import { FC, Fragment, MouseEvent, useMemo, useState } from "react";
 import { Link } from "react-router";
-import { useInterval } from "react-use";
 
 import { useTranslation } from "../../hooks/useTranslation";
 
 import { SearchBox } from "components/common/SearchBox";
+import { useInterval } from "hooks/useInterval";
 import { useSimpleSearch } from "hooks/useSimpleSearch";
 import { aironeApiClient } from "repository/AironeApiClient";
 import {
@@ -123,6 +121,11 @@ export const Header: FC = () => {
 
   const [userAnchorEl, setUserAnchorEl] = useState<HTMLButtonElement | null>();
   const [jobAnchorEl, setJobAnchorEl] = useState<HTMLButtonElement | null>();
+  const [managementAnchorEl, setManagementAnchorEl] =
+    useState<HTMLElement | null>(null);
+  const [extendedMenuAnchors, setExtendedMenuAnchors] = useState<
+    Record<number, HTMLElement | null>
+  >({});
   const [latestCheckDate, setLatestCheckDate] = useState<Date | null>(
     getLatestCheckDate(),
   );
@@ -188,51 +191,73 @@ export const Header: FC = () => {
               <Button component={Link} to={advancedSearchPath()}>
                 {t("advancedSearch")}
               </Button>
-              <PopupState variant="popover" popupId="basic">
-                {(popupState) => (
-                  <Fragment>
-                    <Button {...bindHover(popupState)}>
-                      {t("management")}
-                      <KeyboardArrowDownIcon fontSize="small" />
-                    </Button>
-                    <HoverMenu {...bindMenu(popupState)}>
-                      <MenuItem component={Link} to={usersPath()}>
-                        {t("manageUsers")}
-                      </MenuItem>
-                      <MenuItem component={Link} to={groupsPath()}>
-                        {t("manageGroups")}
-                      </MenuItem>
-                      <MenuItem component={Link} to={rolesPath()}>
-                        {t("manageRoles")}
-                      </MenuItem>
-                      <MenuItem component={Link} to={triggersPath()}>
-                        {t("manageTriggers")}
-                      </MenuItem>
-                    </HoverMenu>
-                  </Fragment>
-                )}
-              </PopupState>
+              <Button
+                onMouseEnter={(e) => setManagementAnchorEl(e.currentTarget)}
+              >
+                {t("management")}
+                <KeyboardArrowDownIcon fontSize="small" />
+              </Button>
+              <Menu
+                anchorEl={managementAnchorEl}
+                open={Boolean(managementAnchorEl)}
+                onClose={() => setManagementAnchorEl(null)}
+                MenuListProps={{
+                  onMouseLeave: () => setManagementAnchorEl(null),
+                }}
+              >
+                <MenuItem component={Link} to={usersPath()}>
+                  {t("manageUsers")}
+                </MenuItem>
+                <MenuItem component={Link} to={groupsPath()}>
+                  {t("manageGroups")}
+                </MenuItem>
+                <MenuItem component={Link} to={rolesPath()}>
+                  {t("manageRoles")}
+                </MenuItem>
+                <MenuItem component={Link} to={triggersPath()}>
+                  {t("manageTriggers")}
+                </MenuItem>
+              </Menu>
 
               {/* If there is another menu settings are passed from Server,
                   this represent another menu*/}
               {serverContext?.extendedHeaderMenus.map((menu, index) => (
-                <PopupState variant="popover" popupId={menu.name} key={index}>
-                  {(popupState) => (
-                    <Fragment>
-                      <Button {...bindHover(popupState)}>
-                        {menu.name}
-                        <KeyboardArrowDownIcon fontSize="small" />
-                      </Button>
-                      <HoverMenu {...bindMenu(popupState)}>
-                        {menu.children.map((child, index) => (
-                          <MenuItem key={index} component="a" href={child.url}>
-                            {child.name}
-                          </MenuItem>
-                        ))}
-                      </HoverMenu>
-                    </Fragment>
-                  )}
-                </PopupState>
+                <Fragment key={index}>
+                  <Button
+                    onMouseEnter={(e) =>
+                      setExtendedMenuAnchors((prev) => ({
+                        ...prev,
+                        [index]: e.currentTarget,
+                      }))
+                    }
+                  >
+                    {menu.name}
+                    <KeyboardArrowDownIcon fontSize="small" />
+                  </Button>
+                  <Menu
+                    anchorEl={extendedMenuAnchors[index]}
+                    open={Boolean(extendedMenuAnchors[index])}
+                    onClose={() =>
+                      setExtendedMenuAnchors((prev) => ({
+                        ...prev,
+                        [index]: null,
+                      }))
+                    }
+                    MenuListProps={{
+                      onMouseLeave: () =>
+                        setExtendedMenuAnchors((prev) => ({
+                          ...prev,
+                          [index]: null,
+                        })),
+                    }}
+                  >
+                    {menu.children.map((child, childIndex) => (
+                      <MenuItem key={childIndex} component="a" href={child.url}>
+                        {child.name}
+                      </MenuItem>
+                    ))}
+                  </Menu>
+                </Fragment>
               ))}
             </MenuBox>
 

frontend/src/components/entry/SearchResultControlMenuForReferral.tsx

@@ -16,10 +16,10 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ChangeEvent, Dispatch, FC, KeyboardEvent, useState } from "react";
-import { useAsync } from "react-use";
 
 import { handleSelectFilterConditionsParams } from "./SearchResultsTableHead";
 
+import { useAsync } from "hooks/useAsync";
 import { aironeApiClient } from "repository";
 
 const StyledTextField = styled(TextField)({

frontend/src/hooks/useAsync.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+interface AsyncState<T> {
+  value?: T;
+  loading: boolean;
+  error?: Error;
+}
+
+export function useAsync<T>(
+  fn: () => Promise<T>,
+  deps?: unknown[],
+): AsyncState<T> {
+  const [state, setState] = useState<AsyncState<T>>({ loading: true });
+  useEffect(() => {
+    setState((s) => ({ ...s, loading: true }));
+    fn()
+      .then((value) => setState({ value, loading: false }))
+      .catch((error) => setState({ error, loading: false }));
+  }, deps ?? []);
+  return state;
+}

frontend/src/hooks/useError.ts

@@ -0,0 +1,10 @@
+import { useCallback, useState } from "react";
+
+export function useError(): (error: Error) => void {
+  const [, setState] = useState();
+  return useCallback((error: Error) => {
+    setState(() => {
+      throw error;
+    });
+  }, []);
+}

frontend/src/hooks/useInterval.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+
+export function useInterval(callback: () => void, delay: number | null): void {
+  const savedCallback = useRef(callback);
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+  useEffect(() => {
+    if (delay === null) return;
+    const id = setInterval(() => savedCallback.current(), delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}

frontend/src/pages/AliasEntryListPage.test.tsx

@@ -10,20 +10,6 @@ import { createMemoryRouter, RouterProvider } from "react-router";
 import { TestWrapperWithoutRoutes } from "TestWrapper";
 import { AliasEntryListPage } from "pages/AliasEntryListPage";
 
-// Setup mock location
-const mockLocation = {
-  pathname: "/ui/entities/1/alias",
-  search: "",
-  hash: "",
-  state: null,
-};
-
-// Mock useLocation
-jest.mock("react-use", () => ({
-  ...jest.requireActual("react-use"),
-  useLocation: () => mockLocation,
-}));
-
 const server = setupServer(
   // GET /entity/api/v2/:entityId/
   http.get("http://localhost/entity/api/v2/1/", () => {