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