[FE] Brokers: fix missing tooltip for config source (#3356)

* .

* ..

* added getReferenceProps getFloatingProps

* testing

* testing2

* testing3

* added autoUpdate

* added @floating-ui/react

* removed @floating-ui/react-dom-interactions

---------

Co-authored-by: davitbejanyan <[email protected]>
Co-authored-by: Oleg Shur <[email protected]>

Author: David-DB88

kafka-ui-react-app/package.json

@@ -7,7 +7,7 @@
     "@babel/core": "^7.16.0",
     "@babel/plugin-syntax-flow": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.18.6",
-    "@floating-ui/react-dom-interactions": "^0.10.3",
+    "@floating-ui/react": "^0.19.2",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2.7.1",
     "@microsoft/fetch-event-source": "^2.0.1",

kafka-ui-react-app/pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { Placement } from '@floating-ui/react-dom-interactions';
+import { Placement } from '@floating-ui/react';
 import { Action, ResourceType } from 'generated-sources';
 
 export interface ActionComponentProps {

kafka-ui-react-app/src/components/common/ActionComponent/ActionComponent.ts

@@ -4,7 +4,7 @@ import {
   useHover,
   useInteractions,
   Placement,
-} from '@floating-ui/react-dom-interactions';
+} from '@floating-ui/react';
 
 import * as S from './Tooltip.styled';
 
@@ -16,26 +16,28 @@ export interface PropsTypes {
 
 const Tooltip: React.FC<PropsTypes> = ({ value, content, placement }) => {
   const [open, setOpen] = useState(false);
-  const { x, y, reference, floating, strategy, context } = useFloating({
+  const { x, y, refs, strategy, context } = useFloating({
     open,
     onOpenChange: setOpen,
     placement,
   });
-
-  useInteractions([useHover(context)]);
-
+  const hover = useHover(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
   return (
     <>
-      <S.Wrapper ref={reference}>{value}</S.Wrapper>
+      <div ref={refs.setReference} {...getReferenceProps()}>
+        <S.Wrapper>{value}</S.Wrapper>
+      </div>
       {open && (
         <S.MessageTooltip
-          ref={floating}
+          ref={refs.setFloating}
           style={{
             position: strategy,
             top: y ?? 0,
             left: x ?? 0,
             width: 'max-content',
           }}
+          {...getFloatingProps()}
         >
           {content}
         </S.MessageTooltip>

kafka-ui-react-app/src/components/common/Tooltip/Tooltip.tsx

@@ -6,7 +6,7 @@ import {
   useFloating,
   useHover,
   useInteractions,
-} from '@floating-ui/react-dom-interactions';
+} from '@floating-ui/react';
 
 export function useActionTooltip(isDisabled?: boolean, placement?: Placement) {
   const [open, setOpen] = useState(false);