Revert "update react-router-dom to version 6.14.1"

and "update react-router-dom,react-tooltip& react-transition-group"

This reverts commit 0a4a0497bb630dc85cfa0145d57f954feb9c052a and 345fd98dc52a3b7f0d69022b6a19818e559e4557.

11 files changed, 45 insertions, 97 deletions

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 2b1e87023..fac424477 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { inject, observer } from 'mobx-react';
 import {
@@ -123,6 +123,10 @@ class Sidebar extends Component<IProps, IState> {
     };
   }
 
+  componentDidUpdate() {
+    ReactTooltip.rebuild();
+  }
+
   enableToolTip() {
     this.setState({ tooltipEnabled: true });
   }
@@ -228,8 +232,7 @@ class Sidebar extends Component<IProps, IState> {
               type="button"
               onClick={() => openSettings({ path: 'recipes' })}
               className="sidebar__button sidebar__button--new-service"
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 messages.addNewService,
               )} (${addNewServiceShortcutKey(false)})`}
             >
@@ -248,8 +251,7 @@ class Sidebar extends Component<IProps, IState> {
                 });
               }}
               className="sidebar__button sidebar__button--split-mode-toggle"
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 messages.splitModeToggle,
               )} (${splitModeToggleShortcutKey(false)})`}
             >
@@ -266,8 +268,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--workspaces ${
                 isWorkspaceDrawerOpen ? 'is-active' : ''
               }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 workspaceToggleMessage,
               )} (${workspaceToggleShortcutKey(false)})`}
             >
@@ -284,8 +285,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--audio ${
                 isAppMuted ? 'is-muted' : ''
               }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 isAppMuted ? messages.unmute : messages.mute,
               )} (${muteFerdiumShortcutKey(false)})`}
             >
@@ -303,8 +303,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--todos ${
                 todosStore.isTodosPanelVisible ? 'is-active' : ''
               }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 todosToggleMessage,
               )} (${todosToggleShortcutKey(false)})`}
             >
@@ -323,8 +322,7 @@ class Sidebar extends Component<IProps, IState> {
                   },
                 });
               }}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 messages.lockFerdium,
               )} (${lockFerdiumShortcutKey(false)})`}
             >
@@ -333,20 +331,14 @@ class Sidebar extends Component<IProps, IState> {
           ) : null}
         </>
         {this.state.tooltipEnabled && (
-          <ReactTooltip
-            id="tooltip-sidebar-button"
-            place="right"
-            variant="dark"
-            style={{ height: 'auto', overflowY: 'unset' }}
-          />
+          <ReactTooltip place="right" type="dark" effect="solid" />
         )}
         {!hideSettingsButton && !isMenuCollapsed ? (
           <button
             type="button"
             onClick={() => openSettings({ path: 'app' })}
             className="sidebar__button sidebar__button--settings"
-            data-tooltip-id="tooltip-sidebar-button"
-            data-tooltip-content={`${intl.formatMessage(
+            data-tip={`${intl.formatMessage(
               globalMessages.settings,
             )} (${settingsShortcutKey(false)})`}
           >
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index c25af4427..c883066ce 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -359,8 +359,7 @@ class TabItem extends Component<IProps, IState> {
         onKeyDown={noop}
         role="presentation"
         onContextMenu={() => menu.popup()}
-        data-tooltip-id="tooltip-sidebar-button"
-        data-tooltip-content={`${service.name} ${acceleratorString(
+        data-tip={`${service.name} ${acceleratorString(
           shortcutIndex,
           cmdOrCtrlShortcutKey(false),
         )}`}
diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx
index de323c06e..163b0a160 100644
--- a/src/components/settings/account/AccountDashboard.tsx
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import { H1, H2 } from '../../ui/headline';
 
 import Loader from '../../ui/Loader';
@@ -215,12 +215,7 @@ class AccountDashboard extends Component<IProp> {
             </>
           )}
         </div>
-        <ReactTooltip
-          place="right"
-          variant="dark"
-          float
-          style={{ height: 'auto' }}
-        />
+        <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     );
   }
diff --git a/src/components/settings/services/ServiceItem.tsx b/src/components/settings/services/ServiceItem.tsx
index babe06b5a..bf2dfa9da 100644
--- a/src/components/settings/services/ServiceItem.tsx
+++ b/src/components/settings/services/ServiceItem.tsx
@@ -1,6 +1,6 @@
 import { Component, ReactElement } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js';
@@ -73,8 +73,7 @@ class ServiceItem extends Component<IProps> {
           {service.isMuted && (
             <Icon
               icon={mdiBellOff}
-              data-tooltip-id="tooltip-service-item"
-              data-tooltip-content={intl.formatMessage(messages.tooltipIsMuted)}
+              data-tip={intl.formatMessage(messages.tooltipIsMuted)}
             />
           )}
         </td>
@@ -86,10 +85,7 @@ class ServiceItem extends Component<IProps> {
           {!service.isEnabled && (
             <Icon
               icon={mdiPower}
-              data-tooltip-id="tooltip-service-item"
-              data-tooltip-content={intl.formatMessage(
-                messages.tooltipIsDisabled,
-              )}
+              data-tip={intl.formatMessage(messages.tooltipIsDisabled)}
             />
           )}
         </td>
@@ -101,18 +97,12 @@ class ServiceItem extends Component<IProps> {
           {!service.isNotificationEnabled && (
             <Icon
               icon={mdiMessageBulletedOff}
-              data-tooltip-id="tooltip-service-item"
-              data-tooltip-content={intl.formatMessage(
+              data-tip={intl.formatMessage(
                 messages.tooltipNotificationsDisabled,
               )}
             />
           )}
-          <ReactTooltip
-            id="tooltip-service-item"
-            place="right"
-            variant="dark"
-            style={{ height: 'auto' }}
-          />
+          <ReactTooltip place="top" type="dark" effect="solid" />
         </td>
       </tr>
     );
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 77bccb8c3..6fd2d4426 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -3,7 +3,7 @@
 import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
 import Loader from '../../ui/Loader';
@@ -173,12 +173,7 @@ class TeamDashboard extends Component<IProps> {
             </>
           )}
         </div>
-        <ReactTooltip
-          place="right"
-          variant="dark"
-          float
-          style={{ height: 'auto' }}
-        />
+        <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     ) : (
       <div className="settings__main">
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index 06f63a029..2076f6ba6 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, useEffect, useState } from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { CSSTransitionGroup } from 'react-transition-group';
 
 interface IProps {
   children: ReactNode;
@@ -33,20 +33,17 @@ const Appear = ({
   }
 
   return (
-    <TransitionGroup component={null}>
-      <CSSTransition
-        classNames={transitionName || className}
-        appear={transitionAppear}
-        exit={transitionLeave}
-        timeout={{
-          enter: transitionEnterTimeout,
-          appear: transitionAppearTimeout,
-          exit: transitionLeaveTimeout,
-        }}
-      >
-        {children}
-      </CSSTransition>
-    </TransitionGroup>
+    <CSSTransitionGroup
+      transitionName={transitionName}
+      transitionAppear={transitionAppear}
+      transitionLeave={transitionLeave}
+      transitionAppearTimeout={transitionAppearTimeout}
+      transitionEnterTimeout={transitionEnterTimeout}
+      transitionLeaveTimeout={transitionLeaveTimeout}
+      className={className}
+    >
+      {children}
+    </CSSTransitionGroup>
   );
 };
 
diff --git a/src/features/webControls/components/WebControls.tsx b/src/features/webControls/components/WebControls.tsx
index 54f45c843..e76fca6a2 100644
--- a/src/features/webControls/components/WebControls.tsx
+++ b/src/features/webControls/components/WebControls.tsx
@@ -9,7 +9,6 @@ import {
   mdiHomeOutline,
   mdiEarth,
 } from '@mdi/js';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
 import Icon from '../../../components/ui/icon';
 
 const messages = defineMessages({
@@ -152,8 +151,7 @@ class WebControls extends Component<IProps, IState> {
           onClick={goHome}
           type="button"
           className={classes.button}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.goHome)}
+          data-tip={intl.formatMessage(messages.goHome)}
           data-place="bottom"
         >
           <Icon icon={mdiHomeOutline} className={classes.icon} />
@@ -163,8 +161,7 @@ class WebControls extends Component<IProps, IState> {
           type="button"
           className={classes.button}
           disabled={!canGoBack}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.back)}
+          data-tip={intl.formatMessage(messages.back)}
           data-place="bottom"
         >
           <Icon icon={mdiArrowLeft} className={classes.icon} />
@@ -174,8 +171,7 @@ class WebControls extends Component<IProps, IState> {
           type="button"
           className={classes.button}
           disabled={!canGoForward}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.forward)}
+          data-tip={intl.formatMessage(messages.forward)}
           data-place="bottom"
         >
           <Icon icon={mdiArrowRight} className={classes.icon} />
@@ -184,8 +180,7 @@ class WebControls extends Component<IProps, IState> {
           onClick={reload}
           type="button"
           className={classes.button}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.reload)}
+          data-tip={intl.formatMessage(messages.reload)}
           data-place="bottom"
         >
           <Icon icon={mdiReload} className={classes.icon} />
@@ -237,18 +232,11 @@ class WebControls extends Component<IProps, IState> {
           onClick={openInBrowser}
           type="button"
           className={classes.button}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.openInBrowser)}
+          data-tip={intl.formatMessage(messages.openInBrowser)}
           data-place="bottom"
         >
           <Icon icon={mdiEarth} className={classes.icon} />
         </button>
-        <ReactTooltip
-          id="tooltip-web-controls"
-          place="bottom"
-          variant="dark"
-          style={{ height: 'auto' }}
-        />
       </div>
     );
   }
diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx
index 1c827e9dd..61284d81a 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawer.tsx
@@ -2,7 +2,7 @@ import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import { mdiPlusBox, mdiCog } from '@mdi/js';
 import { noop } from 'lodash';
 import { H1 } from '../../../components/ui/headline';
@@ -96,6 +96,7 @@ interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
 class WorkspaceDrawer extends Component<IProps> {
   componentDidMount(): void {
     try {
+      ReactTooltip.rebuild();
       getUserWorkspacesRequest.execute();
     } catch (error) {
       console.log(error);
@@ -120,8 +121,7 @@ class WorkspaceDrawer extends Component<IProps> {
             onClick={() => {
               workspaceActions.openWorkspaceSettings();
             }}
-            data-tooltip-id="tooltip-workspaces-drawer"
-            data-tooltip-content={`${intl.formatMessage(
+            data-tip={`${intl.formatMessage(
               messages.workspacesSettingsTooltip,
             )}`}
           >
@@ -176,12 +176,7 @@ class WorkspaceDrawer extends Component<IProps> {
             <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span>
           </div>
         </div>
-        <ReactTooltip
-          id="tooltip-workspaces-drawer"
-          place="right"
-          variant="dark"
-          style={{ height: 'auto', zIndex: 210 }}
-        />
+        <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     );
   }
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.tsx b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
index 172b4192c..cf8c3b2ba 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
@@ -119,8 +119,7 @@ class WorkspaceDrawerItem extends Component<IProps> {
           }
         }}
         onKeyDown={noop}
-        data-tooltip-id="tooltip-workspaces-drawer"
-        data-tooltip-content={acceleratorString(
+        data-tip={acceleratorString(
           shortcutIndex,
           `${cmdOrCtrlShortcutKey(false)}+${altKey(false)}`,
         )}
diff --git a/src/routes.tsx b/src/routes.tsx
index beada5c96..04b6fa96f 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -51,7 +51,6 @@ class FerdiumRoutes extends Component<IProps> {
     const errorProps = { error: routeProps.stores.globalError.error || {} };
 
     return (
-      // @ts-expect-error
       <HistoryRouter history={history}>
         <Routes>
           <Route path="/auth" element={<AuthLayoutContainer {...routeProps} />}>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index eb7649bfa..8369c9298 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,6 +1,5 @@
 @import '../../node_modules/electron-react-titlebar/assets/style';
 
-
 // modules
 @import './globals.scss';
 @import './reset.scss';