replace useRef with useId

Author: andreaskienle

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx

@@ -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/ControlPlanePageMenu.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/List/MembersAvatarView.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/Helper/AnimatedHoverTextButton.tsx

@@ -1,21 +1,25 @@
 import { Button, ButtonDomRef, FlexBox, FlexBoxAlignItems, Text } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-icons/dist/copy';
-import { JSX, RefObject, useState } from 'react';
+import { JSX, useId, useState } from 'react';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
 import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
 
 type HoverTextButtonProps = {
+  id?: string;
   text: string;
   icon: JSX.Element;
-  ref?: RefObject<ButtonDomRef | null>;
   onClick: (event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => void;
 };
-export const AnimatedHoverTextButton = ({ text, icon, onClick, ref }: HoverTextButtonProps) => {
+export const AnimatedHoverTextButton = ({ id, text, icon, onClick }: HoverTextButtonProps) => {
   const [hover, setHover] = useState(false);
+
+  const generatedId = useId();
+  id ??= generatedId;
+
   return (
     <Button
-      ref={ref}
+      id={id}
       design={ButtonDesign.Transparent}
       onClick={onClick}
       onMouseOver={() => setHover(true)}

src/components/Helper/Tooltip.tsx

@@ -1,6 +1,6 @@
-import { Button, ButtonDomRef, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react';
+import { Button, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react';
 import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
-import { useRef, useState } from 'react';
+import { useId, useState } from 'react';
 import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import styles from './ResourceStatusCell.module.css';
@@ -20,7 +20,7 @@ export const ResourceStatusCell = ({
   negativeText,
   hideOnHoverEffect,
 }: ResourceStatusCellProps) => {
-  const btnRef = useRef<ButtonDomRef>(null);
+  const openerId = useId();
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
   const timeAgo = transitionTime ? formatDateAsTimeAgo(transitionTime) : '-';
 
@@ -33,7 +33,7 @@ export const ResourceStatusCell = ({
   return (
     <span>
       {hideOnHoverEffect ? (
-        <Button ref={btnRef} design="Transparent" title={timeAgo} aria-label={timeAgo} onClick={handleOpen}>
+        <Button id={openerId} design="Transparent" title={timeAgo} aria-label={timeAgo} onClick={handleOpen}>
           <Icon
             design={isOk ? 'Positive' : 'Negative'}
             name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
@@ -43,7 +43,7 @@ export const ResourceStatusCell = ({
         </Button>
       ) : (
         <AnimatedHoverTextButton
-          ref={btnRef}
+          id={openerId}
           icon={
             <Icon
               design={isOk ? 'Positive' : 'Negative'}
@@ -58,7 +58,7 @@ export const ResourceStatusCell = ({
       )}
 
       <ResponsivePopover
-        opener={btnRef.current ?? undefined}
+        opener={openerId}
         open={popoverIsOpen}
         placement={PopoverPlacement.Bottom}
         onClose={handleClose}