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/channels/src/components/tours/channels_tour_tip.tsx

@@ -33,6 +33,7 @@ export type ChannelsTourTipProps = {
     hideBackdrop?: boolean;
     tippyBlueStyle?: boolean;
     showOptOut?: boolean;
+    interactivePunchOut?: boolean;
 }
 
 export const ChannelsTourTip = ({
@@ -50,6 +51,7 @@ export const ChannelsTourTip = ({
     hideBackdrop = false,
     tippyBlueStyle = false,
     showOptOut = true,
+    interactivePunchOut = false,
 }: ChannelsTourTipProps) => {
     const {
         show,
@@ -131,6 +133,7 @@ export const ChannelsTourTip = ({
             hideBackdrop={hideBackdrop}
             tippyBlueStyle={tippyBlueStyle}
             showOptOut={showOptOut}
+            interactivePunchOut={interactivePunchOut}
         />
     );
 };

webapp/channels/src/components/tours/crt_tour/crt_threads_pane_tutorial_tip.tsx

@@ -9,7 +9,7 @@ import {Constants, Preferences} from 'utils/constants';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/common';
 import {savePreferences} from 'mattermost-redux/actions/preferences';
 
-import {TourTip, useMeasurePunchouts} from '@mattermost/components';
+import {TourTip, useFollowElementDimensions, useMeasurePunchouts} from '@mattermost/components';
 
 const translate = {x: 2, y: 25};
 
@@ -17,6 +17,9 @@ const CRTThreadsPaneTutorialTip = () => {
     const dispatch = useDispatch();
     const {formatMessage} = useIntl();
     const currentUserId = useSelector(getCurrentUserId);
+
+    const dimensions = useFollowElementDimensions('sidebar-right');
+
     const title = (
         <FormattedMessage
             id='tutorial_threads.threads_pane.title'
@@ -60,7 +63,7 @@ const CRTThreadsPaneTutorialTip = () => {
         dispatch(savePreferences(currentUserId, preferences));
     };
 
-    const overlayPunchOut = useMeasurePunchouts(['rhsContainer'], []);
+    const overlayPunchOut = useMeasurePunchouts(['rhsContainer'], [dimensions?.width]);
 
     return (
         <TourTip

webapp/channels/src/components/tours/onboarding_tour/create_and_join_channels_tour_tip.tsx

@@ -8,7 +8,7 @@ import {useMeasurePunchouts} from '@mattermost/components';
 
 import OnboardingTourTip from './onboarding_tour_tip';
 
-const translate = {x: 0, y: 18};
+const translate = {x: 0, y: 70};
 
 export const CreateAndJoinChannelsTour = () => {
     const title = (
@@ -26,7 +26,7 @@ export const CreateAndJoinChannelsTour = () => {
         </p>
     );
 
-    const overlayPunchOut = useMeasurePunchouts(['showMoreChannels', 'invitePeople'], [], {y: -8, height: 16, x: 0, width: 0});
+    const overlayPunchOut = useMeasurePunchouts(['showMoreChannels', 'showNewChannel'], [], {y: -8, height: 16, x: 0, width: 0});
 
     return (
         <OnboardingTourTip

webapp/channels/src/components/tours/onboarding_tour/invite_people_tour_tip.tsx

@@ -26,7 +26,7 @@ export const InvitePeopleTour = () => {
         </p>
     );
 
-    const overlayPunchOut = useMeasurePunchouts(['showMoreChannels', 'invitePeople'], [], {y: -8, height: 16, x: 0, width: 0});
+    const overlayPunchOut = useMeasurePunchouts(['invitePeople'], [], {y: -8, height: 16, x: 0, width: 0});
 
     return (
         <OnboardingTourTip

webapp/channels/src/components/tours/worktemplate_explore_tour/boards_tour_tip.tsx

@@ -4,16 +4,16 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import {useMeasurePunchouts} from '@mattermost/components';
+import {useFollowElementDimensions, useMeasurePunchouts} from '@mattermost/components';
 
 import OnboardingWorkTemplateTourTip from './worktemplate_explore_tour_tip';
 import {useShowTourTip} from './useShowTourTip';
 
 export const BoardsTourTip = (): JSX.Element | null => {
     const {formatMessage} = useIntl();
-
     const {playbooksCount, boardsCount, showBoardsTour} = useShowTourTip();
-    const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], []);
+    const dimensions = useFollowElementDimensions('sidebar-right');
+    const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], [dimensions?.width]);
 
     if (!showBoardsTour) {
         return null;
@@ -60,6 +60,7 @@ export const BoardsTourTip = (): JSX.Element | null => {
             singleTip={playbooksCount === 0}
             placement='left-start'
             showOptOut={false}
+            interactivePunchOut={true}
         />
     );
 };

webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import {useMeasurePunchouts} from '@mattermost/components';
+import {useFollowElementDimensions, useMeasurePunchouts} from '@mattermost/components';
 
 import {useShowTourTip} from './useShowTourTip';
 import OnboardingWorkTemplateTourTip from './worktemplate_explore_tour_tip';
@@ -12,7 +12,8 @@ import OnboardingWorkTemplateTourTip from './worktemplate_explore_tour_tip';
 export const PlaybooksTourTip = (): JSX.Element | null => {
     const {formatMessage} = useIntl();
     const {playbooksCount, boardsCount, showPlaybooksTour} = useShowTourTip();
-    const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], []);
+    const dimensions = useFollowElementDimensions('sidebar-right');
+    const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], [dimensions?.width]);
 
     if (!showPlaybooksTour) {
         return null;
@@ -59,6 +60,7 @@ export const PlaybooksTourTip = (): JSX.Element | null => {
             overlayPunchOut={overlayPunchOut}
             placement='left-start'
             showOptOut={false}
+            interactivePunchOut={true}
         />
     );
 };

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>
     );
 };
-