MM-48412 - backdrop issue when rhs expanded; ramdom fixes to channels tour (#22700)

* MM-48412 - backdrop issue when rhs expanded; ramdom fixes to channels tour

* remove no longer needed backdrop removal

webapp/platform/components/src/common/hooks/useFollowElementDimensions.ts

@@ -0,0 +1,27 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useEffect, useState} from 'react';
+
+export const useFollowElementDimensions = (elementId: string): DOMRectReadOnly => {
+    const [dimensions, setDimensions] = useState(new DOMRect());
+
+    useEffect(() => {
+        const element = document.getElementById(elementId);
+        if (!element) {
+            return undefined;
+        }
+        const observer = new ResizeObserver((entries) => {
+            if (entries.length > 0) {
+                setDimensions(entries[0].contentRect);
+            }
+        });
+        observer.observe(element);
+
+        return () => {
+            observer.unobserve(element);
+        };
+    }, [elementId]);
+
+    return dimensions;
+};

webapp/platform/components/src/index.tsx

@@ -16,3 +16,4 @@ export {FocusTrap} from './focus_trap';
 // hooks
 export * from './common/hooks/useMeasurePunchouts';
 export {useElementAvailable} from './common/hooks/useElementAvailable';
+export {useFollowElementDimensions} from './common/hooks/useFollowElementDimensions';

webapp/platform/components/src/tour_tip/tour_tip.scss

@@ -363,7 +363,7 @@
 
     &__backdrop {
         position: absolute;
-        z-index: 999;
+        z-index: 100;
         top: 0;
         left: 0;
         width: 100%;

webapp/platform/components/src/tour_tip/tour_tip.tsx

@@ -90,15 +90,10 @@ export const TourTip = ({
 }: Props) => {
     const FIRST_STEP_INDEX = 0;
     const triggerRef = useRef(null);
-    const [useBackdrop, setUseBackdrop] = useState(!hideBackdrop);
     const onJump = (event: React.MouseEvent, jumpToStep: number) => {
         handleJump?.(event, jumpToStep);
     };
 
-    useClickOutsideRef(triggerRef, () => {
-        setUseBackdrop(false);
-    });
-
     // This needs to be changed if root-portal node isn't available to maybe body
     const rootPortal = document.getElementById('root-portal');
 
@@ -214,7 +209,7 @@ export const TourTip = ({
             >
                 <PulsatingDot/>
             </div>
-            {useBackdrop && <TourTipBackdrop
+            <TourTipBackdrop
                 show={show}
                 onDismiss={handleDismiss}
                 onPunchOut={handlePunchOut}
@@ -222,7 +217,7 @@ export const TourTip = ({
                 overlayPunchOut={overlayPunchOut}
                 appendTo={rootPortal!}
                 transparent={hideBackdrop}
-            />}
+            />
             {show && (
                 <Tippy
                     showOnCreate={show}

webapp/platform/components/src/tour_tip/tour_tip_backdrop.tsx

@@ -81,4 +81,3 @@ export const TourTipBackdrop = ({
         </TourTipRootPortal>
     );
 };
-