IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pablo Andrés Vélez Vidal
2023-03-29 13:39:55 +02:00
committed by GitHub
parent b892fe0555
commit 5a76d20a1a
7 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/channels/src/components/tours/worktemplate_explore_tour/boards_tour_tip.tsx
View File

@@ -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}
/>

5
webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx
View File

@@ -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}
/>

9
webapp/channels/src/components/tours/worktemplate_explore_tour/useShowTourTip.tsx
View File

@@ -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,
};
};

23
webapp/channels/src/components/work_templates/index.tsx
View File

@@ -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();

3
webapp/channels/src/components/work_templates/utils.ts
View File

@@ -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) {

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

@@ -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 [];

2
webapp/platform/types/src/work_templates.ts
View File

@@ -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 {