MM-62382/MM-63615 Remove explicit reference to react-popper and remaining references to popper.js (#30743)

* Replace usage of react-popper in onboarding with floating-ui

* Remove direct dependency on react-popper

Compass components still depend on react-popper, but none of the web app
code does any more.

* Remove direct dependency on popper.js

* Remove unneeded dependency on @types/bootstrap and remaining indirect dependency on popper.js

webapp/channels/package.json

@@ -56,7 +56,6 @@
     "moment-timezone": "0.5.38",
     "p-queue": "7.3.0",
     "pdfjs-dist": "4.4.168",
-    "popper.js": "1.16.1",
     "process": "0.11.10",
     "prop-types": "15.8.1",
     "react": "17.0.2",
@@ -71,7 +70,6 @@
     "react-intl": "*",
     "react-is": "17.0.2",
     "react-overlays": "0.9.3",
-    "react-popper": "2.3.0",
     "react-redux": "7.2.4",
     "react-router-dom": "5.3.4",
     "react-select": "5.9.0",
@@ -110,7 +108,6 @@
     "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "13.5.0",
-    "@types/bootstrap": "4.5.0",
     "@types/country-list": "2.1.0",
     "@types/enzyme": "3.10.11",
     "@types/jest": "28.1.8",

webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useRef, useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import styled, {css} from 'styled-components';
@@ -137,7 +137,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
     }, []);
 
     const open = useSelector(((state: GlobalState) => getBool(state, OnboardingTaskCategory, OnboardingTaskList.ONBOARDING_TASK_LIST_OPEN)));
-    const trigger = useRef<HTMLButtonElement>(null);
+    const [trigger, setTrigger] = useState<HTMLButtonElement | null>(null);
     const dispatch = useDispatch();
     const currentUserId = useSelector(getCurrentUserId);
     const handleTaskTrigger = useHandleOnBoardingTaskTrigger();
@@ -253,7 +253,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
             <CompletedAnimation completed={showAnimation}/>
             <Button
                 onClick={toggleTaskList}
-                ref={trigger}
+                ref={(element) => setTrigger(element)}
                 open={open}
                 data-cy='onboarding-task-list-action-button'
                 aria-label={formatMessage({id: 'onboardingTask.checklist.start_onboarding_process', defaultMessage: 'Start the onboarding process.'})}

webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx

@@ -1,10 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {Placement} from 'popper.js';
-import React from 'react';
-import type {RefObject, CSSProperties} from 'react';
-import {usePopper} from 'react-popper';
+import type {Placement} from '@floating-ui/react-dom';
+import {useFloating, offset as floatingOffset, autoUpdate} from '@floating-ui/react-dom';
+import React, {useLayoutEffect} from 'react';
 import {CSSTransition} from 'react-transition-group';
 import styled from 'styled-components';
 
@@ -49,12 +48,12 @@ const Overlay = styled.div`
 `;
 
 interface TaskListPopoverProps {
-    trigger: RefObject<HTMLButtonElement>;
+    trigger: HTMLButtonElement | null;
     isVisible: boolean;
     placement?: Placement;
-    offset?: [number | null | undefined, number | null | undefined];
-    children?: React.ReactNode;
-    onClick?: () => void;
+    offset?: [number, number];
+    children: React.ReactNode;
+    onClick: () => void;
 }
 
 export const TaskListPopover = ({
@@ -65,29 +64,26 @@ export const TaskListPopover = ({
     children,
     onClick,
 }: TaskListPopoverProps): JSX.Element | null => {
-    const [popperElement, setPopperElement] =
-        React.useState<HTMLDivElement | null>(null);
-
-    const {
-        styles: {popper},
-        attributes,
-    } = usePopper(trigger.current, popperElement, {
+    const {x, y, strategy, refs: {setReference, setFloating}} = useFloating({
         placement,
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset,
-                },
-            },
-        ],
+        middleware: [floatingOffset({
+            mainAxis: offset[1],
+            crossAxis: offset[0],
+        })],
+        whileElementsMounted: autoUpdate,
     });
+
+    useLayoutEffect(() => {
+        setReference(trigger);
+    }, [setReference, trigger]);
+
     const style = {
         container: {
-            ...popper,
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
             zIndex: isVisible ? 100 : -1,
-            position: 'fixed',
-        } as CSSProperties,
+        },
     };
     return (
         <>
@@ -103,9 +99,8 @@ export const TaskListPopover = ({
                 />
             </CSSTransition>
             <div
-                ref={setPopperElement}
+                ref={setFloating}
                 style={style.container}
-                {...attributes.popper}
             >
                 {children}
             </div>