[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 <dbejanyan@provectus.com>
Co-authored-by: Oleg Shur <workshur@gmail.com>

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

@@ -7,7 +7,7 @@ specifiers:
   '@babel/preset-env': ^7.18.2
   '@babel/preset-react': ^7.17.12
   '@babel/preset-typescript': ^7.17.12
-  '@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
   '@jest/types': ^29.0.3
@@ -98,7 +98,7 @@ dependencies:
   '@babel/core': 7.18.2
   '@babel/plugin-syntax-flow': 7.18.6_@babel+core@7.18.2
   '@babel/plugin-transform-react-jsx': 7.18.6_@babel+core@7.18.2
-  '@floating-ui/react-dom-interactions': 0.10.3_ohobp6rpsmerwlq5ipwfh5yigy
+  '@floating-ui/react': 0.19.2_ohobp6rpsmerwlq5ipwfh5yigy
   '@hookform/error-message': 2.0.0_l2dcsysovzdujulgxvsen7vbsm
   '@hookform/resolvers': 2.8.9_react-hook-form@7.6.9
   '@microsoft/fetch-event-source': 2.0.1
@@ -2886,39 +2886,40 @@ packages:
       - supports-color
     dev: true
 
-  /@floating-ui/core/1.0.1:
-    resolution: {integrity: sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==}
+  /@floating-ui/core/1.2.1:
+    resolution: {integrity: sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==}
     dev: false
 
-  /@floating-ui/dom/1.0.4:
-    resolution: {integrity: sha512-maYJRv+sAXTy4K9mzdv0JPyNW5YPVHrqtY90tEdI6XNpuLOP26Ci2pfwPsKBA/Wh4Z3FX5sUrtUFTdMYj9v+ug==}
+  /@floating-ui/dom/1.2.1:
+    resolution: {integrity: sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==}
     dependencies:
-      '@floating-ui/core': 1.0.1
+      '@floating-ui/core': 1.2.1
     dev: false
 
-  /@floating-ui/react-dom-interactions/0.10.3_ohobp6rpsmerwlq5ipwfh5yigy:
-    resolution: {integrity: sha512-UEHqdnzyoiWNU5az/tAljr9iXFzN18DcvpMqW+/cXz4FEhDEB1ogLtWldOWCujLerPBnSRocADALafelOReMpw==}
+  /@floating-ui/react-dom/1.3.0_ef5jwxihqo6n7gxfmzogljlgcm:
+    resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@floating-ui/react-dom': 1.0.0_ef5jwxihqo6n7gxfmzogljlgcm
-      aria-hidden: 1.2.1_7cpxmzzodpxnolj5zcc5cr63ji
+      '@floating-ui/dom': 1.2.1
       react: 18.1.0
       react-dom: 18.1.0_react@18.1.0
-    transitivePeerDependencies:
-      - '@types/react'
     dev: false
 
-  /@floating-ui/react-dom/1.0.0_ef5jwxihqo6n7gxfmzogljlgcm:
-    resolution: {integrity: sha512-uiOalFKPG937UCLm42RxjESTWUVpbbatvlphQAU6bsv+ence6IoVG8JOUZcy8eW81NkU+Idiwvx10WFLmR4MIg==}
+  /@floating-ui/react/0.19.2_ohobp6rpsmerwlq5ipwfh5yigy:
+    resolution: {integrity: sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@floating-ui/dom': 1.0.4
+      '@floating-ui/react-dom': 1.3.0_ef5jwxihqo6n7gxfmzogljlgcm
+      aria-hidden: 1.2.1_7cpxmzzodpxnolj5zcc5cr63ji
       react: 18.1.0
       react-dom: 18.1.0_react@18.1.0
+      tabbable: 6.1.1
+    transitivePeerDependencies:
+      - '@types/react'
     dev: false
 
   /@hookform/error-message/2.0.0_l2dcsysovzdujulgxvsen7vbsm:
@@ -8481,6 +8482,10 @@ packages:
       tslib: 2.4.0
     dev: true
 
+  /tabbable/6.1.1:
+    resolution: {integrity: sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==}
+    dev: false
+
   /tapable/2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}

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

@@ -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/Tooltip/Tooltip.tsx

@@ -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/lib/hooks/useActionTooltip.ts

@@ -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);