MM-47849 - show worktemplate tourtip only once (#22703)

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

@@ -4,6 +4,8 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
+import {useMeasurePunchouts} from '@mattermost/components';
+
 import OnboardingWorkTemplateTourTip from './worktemplate_explore_tour_tip';
 import {useShowTourTip} from './useShowTourTip';
 
@@ -11,6 +13,7 @@ export const BoardsTourTip = (): JSX.Element | null => {
     const {formatMessage} = useIntl();
 
     const {playbooksCount, boardsCount, showBoardsTour} = useShowTourTip();
+    const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], []);
 
     if (!showBoardsTour) {
         return null;
@@ -50,11 +53,11 @@ export const BoardsTourTip = (): JSX.Element | null => {
     return (
         <OnboardingWorkTemplateTourTip
             pulsatingDotPlacement={'left'}
-            pulsatingDotTranslate={{x: 10, y: -140}}
+            pulsatingDotTranslate={{x: 10, y: -350}}
             title={title}
             screen={screen}
+            overlayPunchOut={overlayPunchOut}
             singleTip={playbooksCount === 0}
-            overlayPunchOut={null}
             placement='left-start'
             showOptOut={false}
         />

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

@@ -4,12 +4,15 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
+import {useMeasurePunchouts} from '@mattermost/components';
+
 import {useShowTourTip} from './useShowTourTip';
 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'], []);
 
     if (!showPlaybooksTour) {
         return null;
@@ -53,7 +56,7 @@ export const PlaybooksTourTip = (): JSX.Element | null => {
             title={title}
             screen={screen}
             singleTip={boardsCount === 0}
-            overlayPunchOut={null}
+            overlayPunchOut={overlayPunchOut}
             placement='left-start'
             showOptOut={false}
         />

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

@@ -3,7 +3,7 @@
 
 import {useSelector} from 'react-redux';
 
-import {getCurrentUserId} from 'mattermost-redux/selectors/entities/common';
+import {getCurrentChannelId, getCurrentUserId} from 'mattermost-redux/selectors/entities/common';
 import {getConfig, getWorkTemplatesLinkedProducts} from 'mattermost-redux/selectors/entities/general';
 import {getInt} from 'mattermost-redux/selectors/entities/preferences';
 
@@ -17,18 +17,22 @@ export const useShowTourTip = () => {
     const activeRhsComponent = useSelector(getActiveRhsComponent);
     const pluginId = activeRhsComponent?.pluginId || '';
 
+    const currentChannelId = useSelector(getCurrentChannelId);
     const currentUserId = useSelector(getCurrentUserId);
+
     const enableTutorial = useSelector(getConfig).EnableTutorial === 'true';
 
     const tutorialStep = useSelector((state: GlobalState) => getInt(state, TutorialTourName.WORK_TEMPLATE_TUTORIAL, currentUserId, 0));
 
     const workTemplateTourTipShown = tutorialStep === WorkTemplateTourSteps.FINISHED;
-    const showProductTour = !workTemplateTourTipShown && enableTutorial;
 
     const channelLinkedItems = useSelector(getWorkTemplatesLinkedProducts);
 
     const boardsCount = channelLinkedItems?.boards || 0;
     const playbooksCount = channelLinkedItems?.playbooks || 0;
+    const channelId = channelLinkedItems?.channelId || null;
+
+    const showProductTour = channelId && channelId === currentChannelId && !workTemplateTourTipShown && enableTutorial;
 
     const showBoardsTour = showProductTour && pluginId === suitePluginIds.boards && boardsCount > 0;
     const showPlaybooksTour = showProductTour && pluginId === suitePluginIds.playbooks && playbooksCount > 0;
@@ -38,5 +42,6 @@ export const useShowTourTip = () => {
         showPlaybooksTour,
         boardsCount,
         playbooksCount,
+        showProductTour,
     };
 };

webapp/channels/src/components/work_templates/index.tsx

@@ -8,7 +8,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';
 
 import LocalizedIcon from 'components/localized_icon';
-import {TTNameMapToATStatusKey, TutorialTourName, WorkTemplateTourSteps} from 'components/tours/constant';
+import {TTNameMapToATStatusKey, TutorialTourName} from 'components/tours/constant';
 
 import {closeModal as closeModalAction} from 'actions/views/modals';
 import {trackEvent} from 'actions/telemetry_actions';
@@ -195,18 +195,15 @@ const WorkTemplateModal = () => {
      * Creates the necessary data in the global store as long storing in DB preferences the tourtip information
      * @param template current used worktempplate
      */
-    const tourTipActions = async (template: WorkTemplate) => {
+    const tourTipActions = async (template: WorkTemplate, firstChannelId: string) => {
-        const linkedProductsCount = getContentCount(template, playbookTemplates);
+        const linkedProductsCount = getContentCount(template, playbookTemplates, firstChannelId);
 
         // stepValue and pluginId are used for showing the tourtip for the used template
-        let stepValue = 0;
         let pluginId;
         if (linkedProductsCount.playbooks) {
             pluginId = rhsPluggableIds.get(suitePluginIds.playbooks);
-            stepValue = WorkTemplateTourSteps.PLAYBOOKS_TOUR_TIP;
         } else {
             pluginId = rhsPluggableIds.get(suitePluginIds.boards);
-            stepValue = WorkTemplateTourSteps.BOARDS_TOUR_TIP;
         }
 
         if (!pluginId) {
@@ -219,17 +216,8 @@ const WorkTemplateModal = () => {
 
         // store the required preferences for the tourtip
         const tourCategory = TutorialTourName.WORK_TEMPLATE_TUTORIAL;
+
         const preferences = [
-
-            // here reset the step value to be able to show the tour again (if we dedide to show the tour only once, this must be removed)
-            {
-                user_id: currentUserId,
-                category: tourCategory,
-                name: currentUserId,
-                value: stepValue.toString(),
-            },
-
-            // this one is for defining the auto tour start for the tour tip
             {
                 user_id: currentUserId,
                 category: tourCategory,
@@ -237,7 +225,6 @@ const WorkTemplateModal = () => {
                 value: String(AutoTourStatus.ENABLED),
             },
         ];
-
         await dispatch(savePreferences(currentUserId, preferences));
 
         dispatch(showRHSPlugin(pluginId));
@@ -285,7 +272,7 @@ const WorkTemplateModal = () => {
             dispatch(loadIfNecessaryAndSwitchToChannelById(firstChannelId));
         }
 
-        await tourTipActions(template);
+        await tourTipActions(template, firstChannelId);
 
         setIsCreating(false);
         closeModal();

webapp/channels/src/components/work_templates/utils.ts

@@ -31,10 +31,11 @@ export function getTemplateDefaultIllustration(template: WorkTemplate): string {
     return '';
 }
 
-export const getContentCount = (template: WorkTemplate, playbookTemplates: PlaybookTemplateType[]) => {
+export const getContentCount = (template: WorkTemplate, playbookTemplates: PlaybookTemplateType[], channelId: string) => {
     const res = {
         playbooks: 0,
         boards: 0,
+        channelId,
     };
     for (const item of template.content) {
         if (item.playbook) {

webapp/channels/src/packages/mattermost-redux/src/actions/work_templates.ts

@@ -47,7 +47,7 @@ export function clearWorkTemplates(): ActionFunc {
 }
 
 // stores the linked product information in the state so it can be used to show the tourtip
-export function onExecuteSuccess(data: Record<string, number>): ActionFunc {
+export function onExecuteSuccess(data: Record<string, string | number>): ActionFunc {
     return async (dispatch) => {
         dispatch({type: WorkTemplatesType.EXECUTE_SUCCESS, data});
         return [];

webapp/platform/types/src/work_templates.ts

@@ -7,7 +7,7 @@ export type WorkTemplatesState = {
     categories: Category[];
     templatesInCategory: Record<string, WorkTemplate[]>;
     playbookTemplates: PlaybookTemplateType[];
-    linkedProducts: Record<string, number>;
+    linkedProducts: Record<string, string | number>;
 }
 
 export interface PlaybookTemplateType {