chore(deps): update dependency eslint-plugin-react-hooks to v7 (#318)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Andreas Kienle <andreas.kienle@sap.com>

Author: renovate[bot]

package-lock.json

@@ -95,7 +95,7 @@
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-hooks": "7.0.1",
     "fastify-tsconfig": "3.0.0",
     "globals": "16.5.0",
     "jsdom": "27.1.0",

package.json

@@ -1,6 +1,6 @@
 import { Button, Menu, MenuItem } from '@ui5/webcomponents-react';
 
-import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useId, useState } from 'react';
 import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/accept';
 
@@ -17,7 +17,7 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
   isDeleteMcpButtonDisabled,
   setIsEditManagedControlPlaneWizardOpen,
 }) => {
-  const buttonRef = useRef(null);
+  const openerId = useId();
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   const { t } = useTranslation();
 
@@ -28,15 +28,15 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
   return (
     <>
       <Button
-        ref={buttonRef}
+        id={openerId}
         icon="overflow"
         icon-end
         data-testid="ControlPlaneCardMenu-opener"
         onClick={handleOpenerClick}
       />
       <Menu
         open={menuIsOpen}
-        opener={buttonRef.current}
+        opener={openerId}
         onItemClick={(event) => {
           const action = (event.detail.item as HTMLElement).dataset.action;
           if (action === 'editMcp') {

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Menu, MenuItem } from '@ui5/webcomponents-react';
 
@@ -7,7 +7,7 @@ type ControlPlanesListMenuProps = {
 };
 
 export const ControlPlanePageMenu: FC<ControlPlanesListMenuProps> = ({ setIsEditManagedControlPlaneWizardOpen }) => {
-  const buttonRef = useRef(null);
+  const openerId = useId();
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   const { t } = useTranslation();
 
@@ -17,10 +17,10 @@ export const ControlPlanePageMenu: FC<ControlPlanesListMenuProps> = ({ setIsEdit
 
   return (
     <>
-      <Button ref={buttonRef} icon="overflow" icon-end onClick={handleOpenerClick} />
+      <Button id={openerId} icon="overflow" icon-end onClick={handleOpenerClick} />
       <Menu
         open={menuIsOpen}
-        opener={buttonRef.current}
+        opener={openerId}
         onItemClick={(event) => {
           const action = (event.detail.item as HTMLElement).dataset.action;
           if (action === 'editMcp') {

src/components/ControlPlanes/ControlPlanePageMenu.tsx

@@ -1,7 +1,7 @@
 import { Avatar, AvatarGroup, Popover } from '@ui5/webcomponents-react';
 import AvatarGroupType from '@ui5/webcomponents/dist/types/AvatarGroupType.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
-import { useRef, useState } from 'react';
+import { useId, useState } from 'react';
 import { MemberTable } from '../../Members/MemberTable.tsx';
 import { Member } from '../../../lib/api/types/shared/members';
 import { generateInitialsForEmail } from '../../Helper/generateInitialsForEmail.ts';
@@ -13,7 +13,7 @@ interface Props {
 }
 
 export function MembersAvatarView({ members, project, workspace }: Props) {
-  const openerRef = useRef(null);
+  const openerId = useId();
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
   const avatars = [];
 
@@ -33,11 +33,11 @@ export function MembersAvatarView({ members, project, workspace }: Props) {
 
   return (
     <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-      <AvatarGroup ref={openerRef} style={{ maxWidth: '200px' }} type={AvatarGroupType.Group} onClick={handleOnClick}>
+      <AvatarGroup id={openerId} style={{ maxWidth: '200px' }} type={AvatarGroupType.Group} onClick={handleOnClick}>
         {avatars}
       </AvatarGroup>
       <Popover
-        opener={openerRef.current!}
+        opener={openerId}
         placement={PopoverPlacement.Bottom}
         open={popoverIsOpen}
         onClose={() => {

src/components/ControlPlanes/List/MembersAvatarView.tsx

@@ -3,7 +3,7 @@ import { Button, FlexBox, FlexBoxAlignItems, Menu, MenuItem } from '@ui5/webcomp
 import { useTranslation } from 'react-i18next';
 import { FeedbackButton } from './FeedbackButton.tsx';
 import { BetaButton } from './BetaButton.tsx';
-import { useRef, useState } from 'react';
+import { useId, useState } from 'react';
 import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
 import { SearchParamToggleVisibility } from '../Helper/FeatureToggleExistance.tsx';
 import { PathAwareBreadcrumbs } from './PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx';
@@ -30,20 +30,20 @@ export function BreadcrumbFeedbackHeader() {
 function LogoutMenu() {
   const auth = useAuthOnboarding();
   const { t } = useTranslation();
+  const openerId = useId();
 
-  const buttonRef = useRef(null);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   return (
     <>
       <Button
-        ref={buttonRef}
+        id={openerId}
         icon="menu2"
         onClick={() => {
           setMenuIsOpen(true);
         }}
       />
       <Menu
-        opener={buttonRef.current}
+        opener={openerId}
         open={menuIsOpen}
         onClose={() => {
           setMenuIsOpen(false);

src/components/Core/BreadcrumbFeedbackHeader.tsx

@@ -1,5 +1,6 @@
 import { KubectlBaseDialog, FormField, CustomCommand } from './KubectlBaseDialog';
 import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
 
 interface KubectlCreateProjectDialogProps {
   onClose: () => void;
@@ -8,7 +9,7 @@ interface KubectlCreateProjectDialogProps {
 
 export const KubectlCreateProjectDialog = ({ onClose, isOpen }: KubectlCreateProjectDialogProps) => {
   const { t } = useTranslation();
-  const randomProjectName = Math.random().toString(36).substring(2, 8);
+  const [randomProjectName] = useState(() => Math.random().toString(36).substring(2, 8));
 
   const formFields: FormField[] = [
     {

src/components/Dialogs/KubectlCommandInfo/KubectlCreateProjectDialog.tsx

@@ -1,5 +1,6 @@
 import { KubectlBaseDialog, FormField, CustomCommand } from './KubectlBaseDialog';
 import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
 
 interface KubectlCreateWorkspaceDialogProps {
   onClose: () => void;
@@ -9,7 +10,7 @@ interface KubectlCreateWorkspaceDialogProps {
 
 export const KubectlCreateWorkspaceDialog = ({ onClose, isOpen, project }: KubectlCreateWorkspaceDialogProps) => {
   const { t } = useTranslation();
-  const randomWorkspaceName = Math.random().toString(36).substring(2, 8);
+  const [randomWorkspaceName] = useState(() => Math.random().toString(36).substring(2, 8));
   const projectName = project || '<Project Namespace>';
   const projectNamespace = `project-${projectName}`;
 

src/components/Dialogs/KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react';
+import { FC, useState } from 'react';
 import {
   Button,
   CheckBox,
@@ -20,22 +20,19 @@ type Props = {
   onClose: () => void;
   item: ManagedResourceItem | null;
   onDeletionConfirmed?: (item: ManagedResourceItem, force: boolean) => void;
-  onCanceled?: () => void;
 };
 
-export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, onDeletionConfirmed, onCanceled }) => {
+export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, onDeletionConfirmed }) => {
   const { t } = useTranslation();
   const [forceDeletion, setForceDeletion] = useState(false);
   const [advancedCollapsed, setAdvancedCollapsed] = useState(true);
   const [confirmationText, setConfirmationText] = useState('');
 
-  useEffect(() => {
-    if (!open) {
-      setForceDeletion(false);
-      setAdvancedCollapsed(true);
-      setConfirmationText('');
-    }
-  }, [open]);
+  const resetForm = () => {
+    setForceDeletion(false);
+    setAdvancedCollapsed(true);
+    setConfirmationText('');
+  };
 
   const resourceName = item?.metadata?.name ?? '';
 
@@ -54,22 +51,21 @@ export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, on
     if (item && onDeletionConfirmed) {
       onDeletionConfirmed(item, forceDeletion);
     }
-    onClose();
+    handleClose();
   };
 
-  const handleCancel = () => {
+  const handleClose = () => {
+    resetForm();
     onClose();
-    if (onCanceled) {
-      onCanceled();
-    }
   };
 
   return (
     <Dialog
       open={open}
       headerText={t('ManagedResources.deleteDialogTitle')}
       className={styles.dialog}
-      onClose={handleCancel}
+      onOpen={resetForm}
+      onClose={handleClose}
     >
       <FlexBox direction="Column" className={styles.content}>
         <DeleteConfirmationForm
@@ -99,7 +95,7 @@ export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, on
         </Panel>
 
         <FlexBox justifyContent="End" className={styles.actions}>
-          <Button design="Transparent" onClick={handleCancel}>
+          <Button design="Transparent" onClick={handleClose}>
             {t('buttons.cancel')}
           </Button>
           <Button design={ButtonDesign.Negative} disabled={!isConfirmed} onClick={handleDelete}>

src/components/Dialogs/ManagedResourceDeleteDialog.tsx

@@ -113,6 +113,7 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
 
   useEffect(() => {
     if (!treeData.length) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setNodes([]);
       setEdges([]);
       return;