Migrate tooltips from reactstrap to shlink-frontend-kit

src/servers/ManageServersRow.tsx

@@ -1,9 +1,8 @@
 import { faCheck as checkIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Table } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Table, Tooltip, useTooltip } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC } from 'react';
 import { Link } from 'react-router';
-import { UncontrolledTooltip } from 'reactstrap';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import type { ServerWithId } from './data';
@@ -20,6 +19,7 @@ type ManageServersRowDeps = {
 
 const ManageServersRow: FCWithDeps<ManageServersRowProps, ManageServersRowDeps> = ({ server, hasAutoConnect }) => {
   const { ManageServersRowDropdown } = useDependencies(ManageServersRow);
+  const { anchor, tooltip } = useTooltip();
 
   return (
     <Table.Row className="tw:relative">
@@ -30,11 +30,9 @@ const ManageServersRow: FCWithDeps<ManageServersRowProps, ManageServersRowDeps>
               <FontAwesomeIcon
                 icon={checkIcon}
                 className="tw:text-lm-brand tw:dark:text-dm-brand"
-                id="autoConnectIcon"
+                {...anchor}
               />
-              <UncontrolledTooltip target="autoConnectIcon" placement="right">
-                Auto-connect to this server
-              </UncontrolledTooltip>
+              <Tooltip {...tooltip}>Auto-connect to this server</Tooltip>
             </>
           )}
         </Table.Cell>

src/servers/helpers/ImportServersBtn.tsx

@@ -1,10 +1,9 @@
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useElementRef, useToggle } from '@shlinkio/shlink-frontend-kit';
-import { Button } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { useToggle } from '@shlinkio/shlink-frontend-kit';
+import { Button, Tooltip, useTooltip } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { ChangeEvent, PropsWithChildren } from 'react';
-import { useCallback, useRef , useState } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
+import { useCallback, useRef, useState } from 'react';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';
 import type { ServerData, ServersMap, ServerWithId } from '../data';
@@ -38,9 +37,10 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
   className = '',
 }) => {
   const { ServersImporter: serversImporter } = useDependencies(ImportServersBtn);
-  const ref = useElementRef<HTMLInputElement>();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { anchor, tooltip } = useTooltip({ placement: tooltipPlacement });
   const [duplicatedServers, setDuplicatedServers] = useState<ServerData[]>([]);
-  const [isModalOpen,, showModal, hideModal] = useToggle();
+  const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle(false, true);
   const newServersCreatedRef = useRef(false);
 
   const onFile = useCallback(
@@ -84,12 +84,12 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
 
   return (
     <>
-      <Button variant="secondary" id="importBtn" className={className} onClick={() => ref.current?.click()}>
+      <Button variant="secondary" className={className} onClick={() => fileInputRef.current?.click()} {...anchor}>
         <FontAwesomeIcon icon={importIcon} fixedWidth /> {children ?? 'Import from file'}
       </Button>
-      <UncontrolledTooltip placement={tooltipPlacement} target="importBtn">
+      <Tooltip {...tooltip}>
         You can create servers by importing a CSV file with <b>name</b>, <b>apiKey</b> and <b>url</b> columns.
-      </UncontrolledTooltip>
+      </Tooltip>
 
       <input
         type="file"
@@ -97,7 +97,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
         className="tw:hidden"
         aria-hidden
         tabIndex={-1}
-        ref={ref as any /* TODO Remove After updating to React 19 */}
+        ref={fileInputRef}
         onChange={onFile}
         data-testid="csv-file-input"
       />

test/servers/__snapshots__/ManageServersRow.test.tsx.snap

@@ -28,7 +28,6 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
             data-icon="check"
             data-prefix="fas"
             focusable="false"
-            id="autoConnectIcon"
             role="img"
             viewBox="0 0 448 512"
             xmlns="http://www.w3.org/2000/svg"