[MM-62649] Switch DeveloperModeIndicator over to floating-ui (#3294)

* [MM-62649] Switch DeveloperModeIndicator over to floating-ui

* Fix test

src/renderer/components/DeveloperModeIndicator.tsx

@@ -3,34 +3,33 @@
 
 import classNames from 'classnames';
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
 import 'renderer/css/components/DeveloperModeIndicator.scss';
 
+import WithTooltip from './WithTooltip';
+
 export default function DeveloperModeIndicator({developerMode, darkMode}: {developerMode: boolean; darkMode: boolean}) {
     if (!developerMode) {
         return null;
     }
 
     return (
-        <OverlayTrigger
-            placement='left'
-            overlay={
-                <Tooltip id='DeveloperModeIndicator__tooltip'>
-                    <FormattedMessage
-                        id='renderer.components.developerModeIndicator.tooltip'
-                        defaultMessage='Developer mode is enabled. You should only have this enabled if a Mattermost developer has instructed you to.'
-                    />
-                </Tooltip>
+        <WithTooltip
+            title={
+                <FormattedMessage
+                    id='renderer.components.developerModeIndicator.tooltip'
+                    defaultMessage='Developer mode is enabled. You should only have this enabled if a Mattermost developer has instructed you to.'
+                />
             }
+            isVertical={false}
+            className='DeveloperModeIndicator__tooltip'
         >
             <div className={classNames('DeveloperModeIndicator', {darkMode})}>
                 <i className='icon-flask-outline'/>
                 <span className='DeveloperModeIndicator__badge'/>
             </div>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 }