diff --git a/webapp/channels/src/components/tours/worktemplate_explore_tour/boards_tour_tip.tsx b/webapp/channels/src/components/tours/worktemplate_explore_tour/boards_tour_tip.tsx index 46c020a153..dd55ac313d 100644 --- a/webapp/channels/src/components/tours/worktemplate_explore_tour/boards_tour_tip.tsx +++ b/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 ( diff --git a/webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx b/webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx index fe0ec6427c..d8dbe14116 100644 --- a/webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx +++ b/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} /> diff --git a/webapp/channels/src/components/tours/worktemplate_explore_tour/useShowTourTip.tsx b/webapp/channels/src/components/tours/worktemplate_explore_tour/useShowTourTip.tsx index 0a12f87937..3ed8377e32 100644 --- a/webapp/channels/src/components/tours/worktemplate_explore_tour/useShowTourTip.tsx +++ b/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, }; }; diff --git a/webapp/channels/src/components/work_templates/index.tsx b/webapp/channels/src/components/work_templates/index.tsx index 0f157299c6..dc8e1a4a97 100644 --- a/webapp/channels/src/components/work_templates/index.tsx +++ b/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 linkedProductsCount = getContentCount(template, playbookTemplates); + const tourTipActions = async (template: WorkTemplate, firstChannelId: string) => { + 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(); diff --git a/webapp/channels/src/components/work_templates/utils.ts b/webapp/channels/src/components/work_templates/utils.ts index 97b9c9fc4d..c96df206ec 100644 --- a/webapp/channels/src/components/work_templates/utils.ts +++ b/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) { diff --git a/webapp/channels/src/packages/mattermost-redux/src/actions/work_templates.ts b/webapp/channels/src/packages/mattermost-redux/src/actions/work_templates.ts index c9eda131bd..b9bf3c50be 100644 --- a/webapp/channels/src/packages/mattermost-redux/src/actions/work_templates.ts +++ b/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): ActionFunc { +export function onExecuteSuccess(data: Record): ActionFunc { return async (dispatch) => { dispatch({type: WorkTemplatesType.EXECUTE_SUCCESS, data}); return []; diff --git a/webapp/platform/types/src/work_templates.ts b/webapp/platform/types/src/work_templates.ts index 46e3d29f99..d9d776e566 100644 --- a/webapp/platform/types/src/work_templates.ts +++ b/webapp/platform/types/src/work_templates.ts @@ -7,7 +7,7 @@ export type WorkTemplatesState = { categories: Category[]; templatesInCategory: Record; playbookTemplates: PlaybookTemplateType[]; - linkedProducts: Record; + linkedProducts: Record; } export interface PlaybookTemplateType {