{
showCreateUserGroupModal: jest.fn(),
userGroupsEnabled: false,
canCreateCustomGroups: true,
- showWorkTemplateButton: true,
};
mockState = {
diff --git a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
index a42129dc49..2c47d11247 100644
--- a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
@@ -98,7 +98,6 @@ export type Props = {
unreadFilterEnabled: boolean;
userGroupsEnabled: boolean;
canCreateCustomGroups: boolean;
- showWorkTemplateButton: boolean;
}
const SidebarHeader: React.FC = (props: Props): JSX.Element => {
@@ -164,7 +163,6 @@ const SidebarHeader: React.FC = (props: Props): JSX.Element => {
canCreateCustomGroups={props.canCreateCustomGroups}
showCreateUserGroupModal={props.showCreateUserGroupModal}
userGroupsEnabled={props.userGroupsEnabled}
- showWorkTemplateButton={props.showWorkTemplateButton}
/>
diff --git a/webapp/channels/src/components/tours/constant.ts b/webapp/channels/src/components/tours/constant.ts
index 12dd0b2c22..22afa43927 100644
--- a/webapp/channels/src/components/tours/constant.ts
+++ b/webapp/channels/src/components/tours/constant.ts
@@ -17,8 +17,6 @@ export const ChannelsTour = 'channels_tour';
export const OtherToolsTour = 'other_tools_tour';
-export const WorkTemplatesTour = 'work_templates_tour';
-
export const TutorialTourName = {
ONBOARDING_TUTORIAL_STEP: 'tutorial_step',
ONBOARDING_TUTORIAL_STEP_FOR_GUESTS: 'tutorial_step_for_guest',
@@ -26,7 +24,6 @@ export const TutorialTourName = {
CRT_THREAD_PANE_STEP: 'crt_thread_pane_step',
AUTO_TOUR_STATUS: 'auto_tour_status',
EXPLORE_OTHER_TOOLS: 'explore_tools',
- WORK_TEMPLATE_TUTORIAL: 'work_template',
};
export const OnboardingTourSteps = {
@@ -57,12 +54,6 @@ export const CrtTutorialSteps = {
FINISHED,
};
-export const WorkTemplateTourSteps = {
- PLAYBOOKS_TOUR_TIP: 0,
- BOARDS_TOUR_TIP: 1,
- FINISHED,
-};
-
export const CrtTutorialTriggerSteps = {
START: 0,
STARTED: 1,
@@ -74,7 +65,6 @@ export const TTNameMapToATStatusKey = {
[TutorialTourName.CRT_TUTORIAL_STEP]: 'crt_tutorial_auto_tour_status',
[TutorialTourName.CRT_THREAD_PANE_STEP]: TutorialTourName.CRT_THREAD_PANE_STEP + AutoStatusSuffix,
[TutorialTourName.EXPLORE_OTHER_TOOLS]: TutorialTourName.EXPLORE_OTHER_TOOLS + AutoStatusSuffix,
- [TutorialTourName.WORK_TEMPLATE_TUTORIAL]: TutorialTourName.WORK_TEMPLATE_TUTORIAL + AutoStatusSuffix,
};
export const TTNameMapToTourSteps = {
@@ -82,5 +72,4 @@ export const TTNameMapToTourSteps = {
[TutorialTourName.ONBOARDING_TUTORIAL_STEP_FOR_GUESTS]: OnboardingTourStepsForGuestUsers,
[TutorialTourName.CRT_TUTORIAL_STEP]: CrtTutorialSteps,
[TutorialTourName.EXPLORE_OTHER_TOOLS]: ExploreOtherToolsTourSteps,
- [TutorialTourName.WORK_TEMPLATE_TUTORIAL]: WorkTemplateTourSteps,
};
diff --git a/webapp/channels/src/components/tours/hooks.ts b/webapp/channels/src/components/tours/hooks.ts
index 8c9d33090e..27590e02aa 100644
--- a/webapp/channels/src/components/tours/hooks.ts
+++ b/webapp/channels/src/components/tours/hooks.ts
@@ -5,23 +5,16 @@ import {useCallback} from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import {without} from 'lodash';
-
import {getCurrentUserId, isCurrentUserGuestUser} from 'mattermost-redux/selectors/entities/users';
import {getCurrentRelativeTeamUrl} from 'mattermost-redux/selectors/entities/teams';
-import {getWorkTemplatesLinkedProducts} from 'mattermost-redux/selectors/entities/general';
import {savePreferences} from 'mattermost-redux/actions/preferences';
import {close as closeLhs, open as openLhs} from 'actions/views/lhs';
import {setAddChannelDropdown} from 'actions/views/add_channel_dropdown';
import {switchToChannels} from 'actions/views/onboarding_tasks';
-import {showRHSPlugin} from 'actions/views/rhs';
import {setProductMenuSwitcherOpen} from 'actions/views/product_menu';
-import {useGetRHSPluggablesIds} from 'components/work_templates/hooks';
-
import {getHistory} from 'utils/browser_history';
-import {suitePluginIds} from 'utils/constants';
import {GlobalState} from 'types/store';
import {useGetPluginsActivationState} from 'plugins/useGetPluginsActivationState';
@@ -34,13 +27,11 @@ import {
OnboardingTourSteps,
TTNameMapToTourSteps,
TutorialTourName,
- WorkTemplateTourSteps,
} from './constant';
export const useGetTourSteps = (tourCategory: string) => {
const isGuestUser = useSelector((state: GlobalState) => isCurrentUserGuestUser(state));
- const workTemplatesLinkedItems = useSelector(getWorkTemplatesLinkedProducts);
let tourSteps: Record = TTNameMapToTourSteps[tourCategory];
const {playbooksPlugin, playbooksProductEnabled, boardsPlugin, boardsProductEnabled} = useGetPluginsActivationState();
@@ -55,17 +46,6 @@ export const useGetTourSteps = (tourCategory: string) => {
delete steps.BOARDS_TOUR;
}
tourSteps = steps;
- } else if (tourCategory === TutorialTourName.WORK_TEMPLATE_TUTORIAL) {
- const steps: Record = tourSteps as typeof WorkTemplateTourSteps;
-
- if (workTemplatesLinkedItems.playbooks && workTemplatesLinkedItems.playbooks === 0) {
- delete steps.PLAYBOOKS_TOUR;
- }
-
- if (workTemplatesLinkedItems.boards && workTemplatesLinkedItems.boards === 0) {
- delete steps.BOARDS_TOUR;
- }
- tourSteps = steps;
} else if (tourCategory === TutorialTourName.ONBOARDING_TUTORIAL_STEP && isGuestUser) {
// restrict the 'learn more about messaging' tour when user is guest (townSquare, channel creation and user invite are restricted to guests)
tourSteps = TTNameMapToTourSteps[TutorialTourName.ONBOARDING_TUTORIAL_STEP_FOR_GUESTS];
@@ -76,12 +56,6 @@ export const useHandleNavigationAndExtraActions = (tourCategory: string) => {
const dispatch = useDispatch();
const currentUserId = useSelector(getCurrentUserId);
const teamUrl = useSelector((state: GlobalState) => getCurrentRelativeTeamUrl(state));
- const {pluggableId, rhsPluggableIds} = useGetRHSPluggablesIds();
- const pluggableIds = [rhsPluggableIds.get(suitePluginIds.boards), rhsPluggableIds.get(suitePluginIds.playbooks)];
-
- const channelLinkedItems = useSelector(getWorkTemplatesLinkedProducts);
- const boardsCount = channelLinkedItems?.boards || 0;
- const playbooksCount = channelLinkedItems?.playbooks || 0;
const nextStepActions = useCallback((step: number) => {
if (tourCategory === TutorialTourName.ONBOARDING_TUTORIAL_STEP) {
@@ -165,26 +139,6 @@ export const useHandleNavigationAndExtraActions = (tourCategory: string) => {
}
default:
}
- } else if (tourCategory === TutorialTourName.WORK_TEMPLATE_TUTORIAL) {
- const navigationPluggableId = without(pluggableIds, pluggableId)[0];
- const stepMatches = step === WorkTemplateTourSteps.BOARDS_TOUR_TIP || step === WorkTemplateTourSteps.PLAYBOOKS_TOUR_TIP;
- const multiStep = Boolean(boardsCount && playbooksCount);
-
- if (!multiStep) {
- const preferences = [
- {
- user_id: currentUserId,
- category: TutorialTourName.WORK_TEMPLATE_TUTORIAL,
- name: currentUserId,
- value: FINISHED.toString(),
- },
- ];
- dispatch(savePreferences(currentUserId, preferences));
- return;
- }
- if (navigationPluggableId && stepMatches) {
- dispatch(showRHSPlugin(navigationPluggableId));
- }
}
}, [currentUserId, teamUrl, tourCategory]);
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
deleted file mode 100644
index d0a0efe2ea..0000000000
--- a/webapp/channels/src/components/tours/worktemplate_explore_tour/boards_tour_tip.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
-
-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 dimensions = useFollowElementDimensions('sidebar-right');
- const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], [dimensions?.width]);
-
- if (!showBoardsTour) {
- return null;
- }
-
- const title = (
- ) => {
- return (
- ;
- currentCategoryId: string;
- disableQuickUse: boolean;
-}
-
-const Menu = ({className, disableQuickUse, categories, workTemplates, currentCategoryId, changeCategory, onTemplateSelected}: MenuProps) => {
- const {formatMessage} = useIntl();
-
- useEffect(() => {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'pageview_menu');
- }, []);
-
- const quickUse = (template: WorkTemplate) => {
- onTemplateSelected(template, true);
- };
-
- const selectTemplate = (template: WorkTemplate) => {
- onTemplateSelected(template, false);
- };
-
- if (!categories.length) {
- return null;
- }
-
- return (
- ) => {
- e.stopPropagation();
-
- props.onSelectTemplate();
- };
-
- const quickUse = (e: React.MouseEvent) => {
- e.stopPropagation();
-
- props.onQuickUse();
- };
-
- return (
- ();
-
- const marketplacePlugins: MarketplacePlugin[] = useSelector((state: GlobalState) => state.views.marketplace.plugins);
- const loadedPlugins = useSelector((state: GlobalState) => state.plugins.plugins);
-
- const [illustrationDetails, setIllustrationDetails] = useState(() => {
- const defaultIllustration = getTemplateDefaultIllustration(template);
- return {
- prior: {
- animateIn: false,
- illustration: defaultIllustration,
- },
- current: {
- animateIn: true,
- illustration: defaultIllustration,
- },
- };
- });
-
- useEffect(() => {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'pageview_preview');
- }, []);
-
- useEffect(() => {
- if (illustrationDetails.prior.animateIn) {
- setIllustrationDetails((prevState: IllustrationAnimations) => ({
- prior: {
- ...prevState.prior,
- animateIn: false,
- },
- current: {
- ...prevState.current,
- animateIn: true,
- },
- }));
- }
- }, [illustrationDetails.prior.animateIn]);
-
- const handleIllustrationUpdate = (illustration: string) => {
- // don't refresh if this is the same illustration
- if (illustrationDetails.current.illustration === illustration) {
- return;
- }
-
- setIllustrationDetails({
- prior: {...illustrationDetails.current},
- current: {
- animateIn: false,
- illustration,
- },
- });
- };
-
- const [channels, boards, playbooks, availableIntegrations] = useMemo(() => {
- const channels: Channel[] = [];
- const boards: Board[] = [];
- const playbooks: Playbook[] = [];
- const availableIntegrations: Integration[] = [];
- template.content.forEach((c) => {
- if (c.channel) {
- channels.push(c.channel);
- }
- if (c.board) {
- boards.push(c.board);
- }
- if (c.playbook) {
- playbooks.push(c.playbook);
- }
- if (c.integration && c.integration.recommended) {
- availableIntegrations.push(c.integration);
- }
- });
- return [channels, boards, playbooks, availableIntegrations];
- }, [template.content]);
-
- useEffect(() => {
- if (!pluginsEnabled) {
- return;
- }
- const intg =
- availableIntegrations?.
- flatMap((integration) => {
- return marketplacePlugins.reduce((acc: Integration[], curr) => {
- if (curr.manifest.id === integration.id) {
- const installed = Boolean(loadedPlugins[integration.id]);
- acc.push({
- ...integration,
- name: curr.manifest.name,
- icon: curr.icon_data,
- installed,
- });
-
- return acc;
- }
- return acc;
- }, [] as Integration[]);
- }).sort((first: Integration) => {
- return first.installed ? -1 : 1;
- });
- if (intg?.length) {
- setIntegrations(intg);
- }
- }, [marketplacePlugins, availableIntegrations, loadedPlugins, pluginsEnabled]);
-
- // building accordion items
- const accordionItemsData: AccordionItemType[] = [];
- if (channels.length > 0) {
- accordionItemsData.push({
- id: 'channels',
- icon: ,
- title: formatMessage({id: 'work_templates.preview.accordion_title_channels', defaultMessage: 'Channels'}),
- extraContent: {channels.length} ,
- items: [(
- handleIllustrationUpdate(illustration)}
- />
- )],
- });
- }
- if (boards.length > 0) {
- accordionItemsData.push({
- id: 'boards',
- icon: ,
- title: formatMessage({id: 'work_templates.preview.accordion_title_boards', defaultMessage: 'Boards'}),
- extraContent: {boards.length} ,
- items: [(
- handleIllustrationUpdate(illustration)}
- />
- )],
- });
- }
- if (playbooks.length > 0) {
- accordionItemsData.push({
- id: 'playbooks',
- icon: ,
- title: formatMessage({id: 'work_templates.preview.accordion_title_playbooks', defaultMessage: 'Playbooks'}),
- extraContent: {playbooks.length} ,
- items: [(
- handleIllustrationUpdate(illustration)}
- />
- )],
- });
- }
- if (pluginsEnabled && integrations?.length) {
- accordionItemsData.push({
- id: 'integrations',
- icon: ,
- title: 'Integrations',
- extraContent: {integrations.length} ,
- items: [(
- , illustration: string) => {
- e.preventDefault();
- onUpdateIllustration?.(illustration);
- };
-
- if (!items || items.length === 0) {
- return null;
- }
-
- let list: ReactNode = ({items[0].name} );
- if (items.length > 1) {
- list = items.map((c) => (
-
- updateIllustration(e, c.illustration || '')}
- >
- {c.name}
-
-
- ));
- }
-
- return (;
- pluginComponent?: PluginComponent;
-};
-
-export const useGetRHSPluggablesIds = (): HookReturnType => {
- const rhsPlugins = useSelector((state: GlobalState) => state.plugins.components.RightHandSidebarComponent);
- const pluggableId = useSelector((state: GlobalState) => state.views.rhs.pluggableId);
-
- const rhsPluggableIds: Map = new Map();
- rhsPlugins.forEach((plugin) => rhsPluggableIds.set(plugin.pluginId, plugin.id));
-
- const pluginComponent = rhsPlugins.find((element: PluginComponent) => element.id === pluggableId);
-
- return {pluggableId, rhsPluggableIds, pluginComponent};
-};
diff --git a/webapp/channels/src/components/work_templates/index.tsx b/webapp/channels/src/components/work_templates/index.tsx
deleted file mode 100644
index d086c34525..0000000000
--- a/webapp/channels/src/components/work_templates/index.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useEffect, useState} from 'react';
-import classnames from 'classnames';
-import {useIntl} from 'react-intl';
-import {useDispatch, useSelector} from 'react-redux';
-import styled from 'styled-components';
-
-import LocalizedIcon from 'components/localized_icon';
-import {TTNameMapToATStatusKey, TutorialTourName} from 'components/tours/constant';
-
-import {closeModal as closeModalAction} from 'actions/views/modals';
-import {trackEvent} from 'actions/telemetry_actions';
-import {showRHSPlugin} from 'actions/views/rhs';
-import {fetchRemoteListing} from 'actions/marketplace';
-import {loadIfNecessaryAndSwitchToChannelById} from 'actions/views/channel';
-
-import {
- clearCategories,
- clearWorkTemplates,
- executeWorkTemplate,
- getWorkTemplateCategories,
- getWorkTemplates,
- onExecuteSuccess,
-} from 'mattermost-redux/actions/work_templates';
-import {getConfig} from 'mattermost-redux/selectors/entities/general';
-import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
-import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
-import {ActionResult} from 'mattermost-redux/types/actions';
-import {savePreferences} from 'mattermost-redux/actions/preferences';
-
-import {
- Category,
- ExecuteWorkTemplateRequest,
- ExecuteWorkTemplateResponse,
- Visibility,
- WorkTemplate,
-} from '@mattermost/types/work_templates';
-
-import {GlobalState} from 'types/store';
-
-import {ModalIdentifiers, suitePluginIds, TELEMETRY_CATEGORIES} from 'utils/constants';
-
-import {AutoTourStatus} from 'components/tours';
-
-import Customize from './components/customize';
-import Menu from './components/menu';
-import GenericModal from './components/modal';
-import Preview from './components/preview';
-import {useGetRHSPluggablesIds} from './hooks';
-import {getContentCount} from './utils';
-
-const BackIconInHeader = styled(LocalizedIcon)`
- font-size: 24px;
- line-height: 24px;
- color: rgba(var(--center-channel-text-rbg), 0.56);
- cursor: pointer;
-
- &::before {
- margin-left: 0;
- margin-right: 0;
- }
-`;
-
-interface ModalTitleProps {
- text: string;
- backArrowAction?: () => void;
-}
-
-const ModalTitle = (props: ModalTitleProps) => {
- return (
- (null);
- const [selectedName, setSelectedName] = useState('');
- const [selectedVisibility, setSelectedVisibility] = useState(Visibility.Public);
- const [currentCategoryId, setCurrentCategoryId] = useState('');
- const [isCreating, setIsCreating] = useState(false);
- const [errorText, setErrorText] = useState('');
-
- const categories = useSelector((state: GlobalState) => state.entities.worktemplates.categories);
- const workTemplates = useSelector((state: GlobalState) => state.entities.worktemplates.templatesInCategory);
- const config = useSelector(getConfig);
- const pluginsEnabled = config.PluginsEnabled === 'true' && config.EnableMarketplace === 'true' && config.IsDefaultMarketplace === 'true';
- const teamId = useSelector(getCurrentTeamId);
- const playbookTemplates = useSelector((state: GlobalState) => state.entities.worktemplates.playbookTemplates);
- const {rhsPluggableIds} = useGetRHSPluggablesIds();
- const currentUserId = useSelector(getCurrentUserId);
-
- useEffect(() => {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'open_modal');
- }, []);
-
- // load the categories if they are not found, or load the work templates for those categories.
- useEffect(() => {
- if (categories?.length) {
- setCurrentCategoryId(categories[0].id);
- dispatch(getWorkTemplates(categories[0].id));
- return;
- }
- dispatch(getWorkTemplateCategories());
- }, [dispatch, categories]);
-
- useEffect(() => {
- if (pluginsEnabled) {
- dispatch(fetchRemoteListing());
- }
- }, [dispatch, pluginsEnabled]);
-
- useEffect(() => {
- return () => {
- dispatch(clearCategories());
- dispatch(clearWorkTemplates());
- };
- }, [dispatch]);
-
- // error resetter
- useEffect(() => {
- setErrorText('');
- }, [currentCategoryId, modalState, selectedTemplate, selectedVisibility, selectedName]);
-
- const changeCategory = (category: Category) => {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'change_category', {category: category.id});
- setCurrentCategoryId(category.id);
- if (workTemplates[category.id]?.length) {
- return;
- }
- dispatch(getWorkTemplates(category.id));
- };
-
- const closeModal = () => {
- dispatch(closeModalAction(ModalIdentifiers.WORK_TEMPLATE));
- };
-
- const goToMenu = () => {
- setModalState(ModalState.Menu);
- setSelectedTemplate(null);
- };
-
- const handleTemplateSelected = (template: WorkTemplate, quickUse: boolean) => {
- setSelectedTemplate(template);
- if (quickUse) {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'quick_use', {category: template.category, template: template.id});
- execute(template, '', template.visibility);
- return;
- }
-
- // clear the name and set default visibility
- setSelectedName('');
- setSelectedVisibility(template.visibility);
-
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'select_template', {category: template.category, template: template.id});
- setModalState(ModalState.Preview);
- };
-
- const handleOnNameChanged = (name: string) => {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'customize_name', {category: selectedTemplate?.category, template: selectedTemplate?.id});
- setSelectedName(name);
- };
-
- const handleOnVisibilityChanged = (visibility: Visibility) => {
- if (visibility === Visibility.Public) {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'changed_visibility_public', {category: selectedTemplate?.category, template: selectedTemplate?.id});
- } else {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'customized_visibility_private', {category: selectedTemplate?.category, template: selectedTemplate?.id});
- }
-
- setSelectedVisibility(visibility);
- };
-
- /**
- * 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, firstChannelId: string) => {
- const linkedProductsCount = getContentCount(template, playbookTemplates, firstChannelId);
-
- // stepValue and pluginId are used for showing the tourtip for the used template
- let pluginId;
- if (linkedProductsCount.playbooks) {
- pluginId = rhsPluggableIds.get(suitePluginIds.playbooks);
- } else {
- pluginId = rhsPluggableIds.get(suitePluginIds.boards);
- }
-
- if (!pluginId) {
- return;
- }
-
- // store in the global state the plugins/integrations information related to the used template
- // so we can display that data in the tourtip
- await dispatch(onExecuteSuccess(linkedProductsCount));
-
- // store the required preferences for the tourtip
- const tourCategory = TutorialTourName.WORK_TEMPLATE_TUTORIAL;
-
- const preferences = [
- {
- user_id: currentUserId,
- category: tourCategory,
- name: TTNameMapToATStatusKey[tourCategory],
- value: String(AutoTourStatus.ENABLED),
- },
- ];
- await dispatch(savePreferences(currentUserId, preferences));
-
- dispatch(showRHSPlugin(pluginId));
- };
-
- const execute = async (template: WorkTemplate, name = '', visibility: Visibility) => {
- const pbTemplates = [];
- for (const ctt in template.content) {
- if (!Object.hasOwn(template.content, ctt)) {
- continue;
- }
-
- const item = template.content[ctt];
- if (item.playbook) {
- const pbTemplate = playbookTemplates.find((pb) => pb.title === item.playbook.template);
- if (pbTemplate) {
- pbTemplates.push(pbTemplate);
- }
- }
- }
-
- // remove non recommended integrations
- const filteredTemplate = {...template};
- filteredTemplate.content = template.content.filter((item) => {
- if (!item.integration) {
- return true;
- }
- return item.integration.recommended;
- });
-
- const req: ExecuteWorkTemplateRequest = {
- team_id: teamId,
- name,
- visibility,
- work_template: filteredTemplate,
- playbook_templates: pbTemplates,
- };
-
- setIsCreating(true);
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'executing', {category: template.category, template: template.id, customized_name: name !== '', customized_visibility: visibility !== template.visibility});
- const {data, error} = await dispatch(executeWorkTemplate(req)) as ActionResult;
-
- if (error) {
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'execution_error', {category: template.category, template: template.id, customized_name: name !== '', customized_visibility: visibility !== template.visibility, error: error.message});
- setErrorText(error.message);
- return;
- }
-
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, 'execution_success', {category: template.category, template: template.id, customized_name: name !== '', customized_visibility: visibility !== template.visibility});
- let firstChannelId = '';
-
- if (data?.channel_with_playbook_ids.length) {
- firstChannelId = data.channel_with_playbook_ids[0];
- } else if (data?.channel_ids.length) {
- firstChannelId = data.channel_ids[0];
- }
-
- if (firstChannelId) {
- dispatch(loadIfNecessaryAndSwitchToChannelById(firstChannelId));
- }
-
- await tourTipActions(template, firstChannelId);
-
- setIsCreating(false);
- closeModal();
- };
-
- const trackAction = (action: string, actionFn: () => void) => {
- return () => {
- let props = {};
- if (selectedTemplate) {
- props = {category: selectedTemplate?.category, template: selectedTemplate?.id};
- }
- trackEvent(TELEMETRY_CATEGORIES.WORK_TEMPLATES, action, props);
-
- actionFn();
- };
- };
-
- let title;
- let cancelButtonText;
- let cancelButtonAction;
- let backArrowAction;
- let confirmButtonText;
- let confirmButtonAction;
- switch (modalState) {
- case ModalState.Menu:
- title = formatMessage({id: 'work_templates.menu.modal_title', defaultMessage: 'Create from a template'});
- break;
- case ModalState.Preview:
- title = formatMessage({id: 'work_templates.preview.modal_title', defaultMessage: 'Preview {useCase}'}, {useCase: selectedTemplate?.useCase});
- cancelButtonText = formatMessage({id: 'work_templates.preview.modal_cancel_button', defaultMessage: 'Back'});
- cancelButtonAction = trackAction('btn_back_to_menu', goToMenu);
- backArrowAction = trackAction('arrow_back_to_menu', goToMenu);
- confirmButtonText = formatMessage({id: 'work_templates.preview.modal_next_button', defaultMessage: 'Next'});
- confirmButtonAction = trackAction('btn_go_to_customize', () => setModalState(ModalState.Customize));
- break;
- case ModalState.Customize:
- title = formatMessage({id: 'work_templates.customize.modal_title', defaultMessage: 'Name your {useCase}'}, {useCase: selectedTemplate?.useCase});
- cancelButtonText = formatMessage({id: 'work_templates.customize.modal_cancel_button', defaultMessage: 'Back'});
- cancelButtonAction = trackAction('btn_back_to_preview', () => setModalState(ModalState.Preview));
- backArrowAction = trackAction('arrow_back_to_preview', () => setModalState(ModalState.Preview));
- confirmButtonText = formatMessage({id: 'work_templates.customize.modal_create_button', defaultMessage: 'Create'});
- confirmButtonAction = trackAction('btn_execute', () => execute(selectedTemplate!, selectedName, selectedVisibility));
- break;
- }
-
- return (
- ): ActionFunc {
- return async (dispatch) => {
- dispatch({type: WorkTemplatesType.EXECUTE_SUCCESS, data});
- return [];
- };
-}
diff --git a/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/index.ts b/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/index.ts
index 7305f3009e..d57ebae2bf 100644
--- a/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/index.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/index.ts
@@ -28,7 +28,6 @@ import hostedCustomer from './hosted_customer';
import usage from './usage';
import threads from './threads';
import insights from './insights';
-import worktemplates from './work_templates';
export default combineReducers({
general,
@@ -56,5 +55,4 @@ export default combineReducers({
insights,
usage,
hostedCustomer,
- worktemplates,
});
diff --git a/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/work_templates.test.ts b/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/work_templates.test.ts
deleted file mode 100644
index 5fd37d9d2f..0000000000
--- a/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/work_templates.test.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {WorkTemplatesType} from 'mattermost-redux/action_types';
-import reducer from 'mattermost-redux/reducers/entities/work_templates';
-
-type ReducerState = ReturnType;
-
-describe('Reducers.worktemplates', () => {
- it('categories', () => {
- const state = {
- categories: [],
- };
- const action = {
- type: WorkTemplatesType.RECEIVED_WORK_TEMPLATE_CATEGORIES,
- data: [{
- id: 'product_team',
- name: 'Product Team',
- }],
- };
- const expectedState = {
- categories: [
- {
- id: 'product_team',
- name: 'Product Team',
- },
- ],
- };
-
- const newState = reducer(state as unknown as ReducerState, action);
- expect(newState.categories).toEqual(expectedState.categories);
- });
-
- it('work templates in a category', () => {
- const state = {
- templatesInCategory: {},
- };
-
- const action = {
- type: WorkTemplatesType.RECEIVED_WORK_TEMPLATES,
- data: [{
- id: 'product_teams/feature_release:v1',
- category: 'product_teams',
- useCase: 'Feature Release',
- illustration: 'https://via.placeholder.com/204x123.png',
- visibility: 'public',
- description: {
- channel: {
- message: 'channel message',
- illustration: '',
- },
- },
- content: [{
- channel: {
- id: 'feature-release',
- name: 'Feature Release',
- purpose: '',
- playbook: 'product-release-playbook',
- illustration: 'https://via.placeholder.com/509x352.png?text=Channel+feature+release',
- },
- }],
- }],
- };
-
- const expectedState = {
- templatesInCategory: {
- product_teams: [
- {
- id: 'product_teams/feature_release:v1',
- category: 'product_teams',
- useCase: 'Feature Release',
- illustration: 'https://via.placeholder.com/204x123.png',
- visibility: 'public',
- description: {
- channel: {
- message: 'channel message',
- illustration: '',
- },
- },
- content: [{
- channel: {
- id: 'feature-release',
- name: 'Feature Release',
- purpose: '',
- playbook: 'product-release-playbook',
- illustration: 'https://via.placeholder.com/509x352.png?text=Channel+feature+release',
- },
- }],
- },
- ],
- },
- };
-
- const newState = reducer(state as ReducerState, action);
- expect(newState.templatesInCategory).toEqual(expectedState.templatesInCategory);
- });
-});
diff --git a/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/work_templates.ts b/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/work_templates.ts
deleted file mode 100644
index eff8e0de3a..0000000000
--- a/webapp/channels/src/packages/mattermost-redux/src/reducers/entities/work_templates.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {combineReducers} from 'redux';
-
-import {GenericAction} from 'mattermost-redux/types/actions';
-import {PlaybookType, WorkTemplatesType} from 'mattermost-redux/action_types';
-
-import {Category, WorkTemplate} from '@mattermost/types/work_templates';
-
-function categories(state: Category[] = [], action: GenericAction): Category[] {
- switch (action.type) {
- case WorkTemplatesType.RECEIVED_WORK_TEMPLATE_CATEGORIES: {
- return [...state, ...action.data];
- }
- case WorkTemplatesType.CLEAR_WORK_TEMPLATE_CATEGORIES: {
- return [];
- }
- default:
- return state;
- }
-}
-
-function templatesInCategory(state: Record = {}, action: GenericAction): Record {
- switch (action.type) {
- case WorkTemplatesType.RECEIVED_WORK_TEMPLATES: {
- const nextState: Record = {...state};
- const data = action.data as WorkTemplate[];
- const categoryIds = data.
- map((template) => template.category).
- filter((category, index, self) => self.indexOf(category) === index);
-
- categoryIds.forEach((categoryId) => {
- nextState[categoryId] = [];
- data.forEach((template) => {
- if (template.category === categoryId) {
- nextState[categoryId].push(template);
- }
- });
- });
- return nextState;
- }
- case WorkTemplatesType.CLEAR_WORK_TEMPLATES: {
- return {};
- }
- default:
- return state;
- }
-}
-
-function playbookTemplates(state: [] = [], action: GenericAction) {
- switch (action.type) {
- case PlaybookType.PLAYBOOKS_PUBLISH_TEMPLATES:
- return action.templates;
- default:
- return state;
- }
-}
-
-function linkedProducts(state: Record = {}, action: GenericAction) {
- switch (action.type) {
- case WorkTemplatesType.EXECUTE_SUCCESS: {
- return {
- ...action.data,
- };
- }
- default:
- return state;
- }
-}
-
-export default (combineReducers({
- categories,
- templatesInCategory,
- playbookTemplates,
- linkedProducts,
-}));
-
diff --git a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/general.ts b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/general.ts
index 7885025d9c..9e212dfed9 100644
--- a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/general.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/general.ts
@@ -112,5 +112,3 @@ export const isMarketplaceEnabled: (state: GlobalState) => boolean = createSelec
return config.PluginsEnabled === 'true' && config.EnableMarketplace === 'true';
},
);
-
-export const getWorkTemplatesLinkedProducts = (state: GlobalState) => state.entities.worktemplates.linkedProducts;
diff --git a/webapp/channels/src/packages/mattermost-redux/src/store/initial_state.ts b/webapp/channels/src/packages/mattermost-redux/src/store/initial_state.ts
index c06991c245..ef44c24060 100644
--- a/webapp/channels/src/packages/mattermost-redux/src/store/initial_state.ts
+++ b/webapp/channels/src/packages/mattermost-redux/src/store/initial_state.ts
@@ -256,12 +256,6 @@ const state: GlobalState = {
topReactions: {},
myTopReactions: {},
},
- worktemplates: {
- categories: [],
- templatesInCategory: {},
- playbookTemplates: [],
- linkedProducts: {},
- },
},
errors: [],
requests: {
diff --git a/webapp/channels/src/plugins/rhs_plugin/rhs_plugin.tsx b/webapp/channels/src/plugins/rhs_plugin/rhs_plugin.tsx
index f3aa731089..850643c6d6 100644
--- a/webapp/channels/src/plugins/rhs_plugin/rhs_plugin.tsx
+++ b/webapp/channels/src/plugins/rhs_plugin/rhs_plugin.tsx
@@ -4,7 +4,6 @@
import React from 'react';
import SearchResultsHeader from 'components/search_results_header';
-import {BoardsTourTip, PlaybooksTourTip} from 'components/tours/worktemplate_explore_tour';
import Pluggable from 'plugins/pluggable';
@@ -18,8 +17,6 @@ export type Props = {
export default class RhsPlugin extends React.PureComponent {
render() {
- const boardsTourTip = ( {
pluggableName='RightHandSidebarComponent'
pluggableId={this.props.pluggableId}
/>
- {boardsTourTip}
- {playbooksTourtip}
}
diff --git a/webapp/channels/src/selectors/work_template.ts b/webapp/channels/src/selectors/work_template.ts
deleted file mode 100644
index 28034839bd..0000000000
--- a/webapp/channels/src/selectors/work_template.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {createSelector} from 'mattermost-redux/selectors/create_selector';
-import {getFeatureFlagValue, getLicense} from 'mattermost-redux/selectors/entities/general';
-import {GlobalState} from 'types/store';
-import {haveICurrentTeamPermission} from 'mattermost-redux/selectors/entities/roles';
-import {Permissions} from 'mattermost-redux/constants';
-import {isEnterpriseOrE20License} from 'utils/license_utils';
-
-export const areWorkTemplatesEnabled = createSelector(
- 'areWorktemplatesEnabled',
- (state: GlobalState) => getFeatureFlagValue(state, 'WorkTemplate') === 'true',
- (state: GlobalState) => getLicense(state),
- (state: GlobalState) => haveICurrentTeamPermission(state, Permissions.CREATE_PUBLIC_CHANNEL) || haveICurrentTeamPermission(state, Permissions.CREATE_PRIVATE_CHANNEL),
- (state: GlobalState) => haveICurrentTeamPermission(state, Permissions.PLAYBOOK_PUBLIC_CREATE),
- (state: GlobalState) => haveICurrentTeamPermission(state, Permissions.PLAYBOOK_PRIVATE_CREATE),
- (workTemplateFF, license, canCreateChannel, canCreatePublicPlaybook, canCreatePrivatePlaybook) => {
- const licenseIsEnterprise = isEnterpriseOrE20License(license);
- const canCreatePlaybook = canCreatePublicPlaybook || (canCreatePrivatePlaybook && licenseIsEnterprise);
- return workTemplateFF && canCreateChannel && canCreatePlaybook;
- },
-);
-
-export const getWorkTemplateCategories = (state: GlobalState) => state.entities.worktemplates.categories;
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index e0c5b2fdad..4379d79b32 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -449,7 +449,6 @@ export const ModalIdentifiers = {
CLOUD_LIMITS_DOWNGRADE: 'cloud_limits_downgrade',
PERSIST_NOTIFICATION_CONFIRM_MODAL: 'persist_notification_confirm_modal',
AIR_GAPPED_SELF_HOSTED_PURCHASE: 'air_gapped_self_hosted_purchase',
- WORK_TEMPLATE: 'work_template',
DOWNGRADE_MODAL: 'downgrade_modal',
PURCHASE_IN_PROGRESS: 'purchase_in_progress',
DELETE_WORKSPACE: 'delete_workspace',
@@ -763,7 +762,6 @@ export const TELEMETRY_CATEGORIES = {
WORKSPACE_OPTIMIZATION_DASHBOARD: 'workspace_optimization_dashboard',
REQUEST_BUSINESS_EMAIL: 'request_business_email',
TRUE_UP_REVIEW: 'true_up_review',
- WORK_TEMPLATES: 'work_templates',
};
export const TELEMETRY_LABELS = {
diff --git a/webapp/channels/webpack.config.js b/webapp/channels/webpack.config.js
index 5dec7e60a0..a366d2b5f6 100644
--- a/webapp/channels/webpack.config.js
+++ b/webapp/channels/webpack.config.js
@@ -169,7 +169,6 @@ var config = {
new CopyWebpackPlugin({
patterns: [
{from: 'src/images/emoji', to: 'emoji'},
- {from: 'src/images/worktemplates', to: 'worktemplates'},
{from: 'src/images/img_trans.gif', to: 'images'},
{from: 'src/images/logo-email.png', to: 'images'},
{from: 'src/images/circles.png', to: 'images'},
diff --git a/webapp/platform/client/src/client4.ts b/webapp/platform/client/src/client4.ts
index da6dafb44c..a21e7bf037 100644
--- a/webapp/platform/client/src/client4.ts
+++ b/webapp/platform/client/src/client4.ts
@@ -140,8 +140,6 @@ import {CompleteOnboardingRequest} from '@mattermost/types/setup';
import {UserThreadList, UserThread, UserThreadWithPost} from '@mattermost/types/threads';
import {LeastActiveChannelsResponse, TopChannelResponse, TopReactionResponse, TopThreadResponse, TopDMsResponse} from '@mattermost/types/insights';
-import {Category, ExecuteWorkTemplateRequest, ExecuteWorkTemplateResponse, WorkTemplate} from '@mattermost/types/work_templates';
-
import {cleanUrlForLogging} from './errors';
import {buildQueryString} from './helpers';
import {TelemetryHandler} from './telemetry';
@@ -341,31 +339,6 @@ export default class Client4 {
return `${this.getBaseRoute()}/commands`;
}
- getBaseWorkTemplate() {
- return `${this.getBaseRoute()}/worktemplates`;
- }
-
- getWorkTemplateCategories = () => {
- return this.doFetch-
-
- - {formatMessage({ - id: 'pluggable_rhs.tourtip.boards.access', - defaultMessage: 'Access your linked boards from the Boards icon on the right hand App bar.', - })} - -
- - {formatMessage({ - id: 'pluggable_rhs.tourtip.boards.click', - defaultMessage: 'Click into boards from this right panel.', - })} - -
- - {formatMessage({ - id: 'pluggable_rhs.tourtip.boards.review', - defaultMessage: 'Review boards updates from your channels.', - })} - -
-
-
- - {formatMessage({ - id: 'pluggable_rhs.tourtip.playbooks.access', - defaultMessage: 'Access your linked playbooks from the Playbooks icon on the right hand App bar.', - })} - -
- - {formatMessage({ - id: 'pluggable_rhs.tourtip.playbooks.click', - defaultMessage: 'Click into playbooks from this right panel.', - })} - -
- - {formatMessage({ - id: 'pluggable_rhs.tourtip.playbooks.review', - defaultMessage: 'Review playbook updates from your channels.', - })} - -
-
- );
-};
-
-const StyledCustomized = styled(Customize)`
- display: flex;
- flex-direction: column;
- width: 509px;
- margin: 0 auto;
-
- .public-private-selector .public-private-selector-button.locked {
- opacity: 1;
- }
-
- strong {
- font-weight: 600;
- font-size: 14px;
- line-height: 20px;
- color: var(--center-channel-text);
- }
-
- input {
- padding: 10px 16px;
- font-size: 14px;
- width: 100%;
- border-radius: 4px;
- border: 1px solid rgba(var(--center-channel-text-rgb), 0.16);
- &:focus {
- border: 1px solid var(--button-bg);
- box-shadow: inset 0 0 0 1px var(--button-bg);
- }
- }
-
- .name-section-container {
- margin-top: 33px;
- }
-
- .visibility-section-container {
- margin-top: 56px;
- }
-
- .customize-name-text {
- font-size: 12px;
- }
-`;
-
-export default StyledCustomized;
diff --git a/webapp/channels/src/components/work_templates/components/menu.tsx b/webapp/channels/src/components/work_templates/components/menu.tsx
deleted file mode 100644
index 18bdc73a1e..0000000000
--- a/webapp/channels/src/components/work_templates/components/menu.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useEffect} from 'react';
-import classNames from 'classnames';
-import {useIntl} from 'react-intl';
-import styled from 'styled-components';
-
-import {trackEvent} from 'actions/telemetry_actions';
-import {Category, WorkTemplate} from '@mattermost/types/work_templates';
-import {TELEMETRY_CATEGORIES} from 'utils/constants';
-
-import UseCaseMenuItem from './menu/use_case';
-
-const Categories = styled.div`
- h2 {
- margin: 0;
- padding: 8px 16px;
- font-weight: 600;
- font-size: 12px;
- line-height: 16px;
- letter-spacing: 0.02em;
- text-transform: uppercase;
- }
-
- ul {
- list-style: none;
- padding: 0;
- width: 176px;
- }
-`;
-
-const CategoryButton = styled.button`
- width: 155px;
- padding: 10px 16px;
- border: 0;
- background: none;
- text-align: left;
-
- &:hover {
- background: rgba(var(--denim-button-bg-rgb), 0.04);
- cursor: pointer;
- }
-
- &.selected {
- background: rgba(var(--denim-button-bg-rgb), 0.04);
- font-weight: 600;
- color: var(--denim-button-bg);
- cursor: pointer;
- }
-`;
-
-const UseCases = styled.div`
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- width: 692px;
-`;
-
-interface MenuProps {
- className?: string;
- onTemplateSelected: (template: WorkTemplate, quickUse: boolean) => void;
- categories: Category[];
- changeCategory: (category: Category) => void;
- workTemplates: Record
-
- - - {nameFieldLabel} - -
-- {formatMessage({id: 'work_templates.customize.name_description', defaultMessage: 'This will help you and others find your project items. You can always edit this later.'})} -
- onNameChanged(e.target.value)} - maxLength={Constants.MAX_CHANNELNAME_LENGTH} - /> -
-
- - - {formatMessage({id: 'work_templates.customize.visibility_title', defaultMessage: 'Who should have access to this?'})} - -
-
-
-
-
- {workTemplates[currentCategoryId]?.map((workTemplate) => (
- c.channel).length}
- boardsCount={workTemplate.content.filter((c) => c.board).length}
- playbooksCount={workTemplate.content.filter((c) => c.playbook).length}
- onQuickUse={() => quickUse(workTemplate)}
- onSelectTemplate={() => selectTemplate(workTemplate)}
- />
- ))}
-
-
- );
-};
-
-const StyledMenu = styled(Menu)`
- display: flex;
-`;
-
-export default StyledMenu;
diff --git a/webapp/channels/src/components/work_templates/components/menu/use_case.tsx b/webapp/channels/src/components/work_templates/components/menu/use_case.tsx
deleted file mode 100644
index 95eed5645e..0000000000
--- a/webapp/channels/src/components/work_templates/components/menu/use_case.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useMemo} from 'react';
-import {useIntl} from 'react-intl';
-import styled from 'styled-components';
-
-const QuickUse = styled.button`
- position: absolute;
- top: 7px;
- right: 7px;
-
- text-align: center;
- padding: 4px 10px;
- border: 0px;
-
- background: var(--denim-button-bg);
- border-radius: 4px;
- font-weight: 600;
-
- font-size: 11px;
- line-height: 16px;
- color: var(--button-color);
- visibility: hidden;
- opacity: 0;
- z-index: 2;
-
- transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
-`;
-
-interface UseCaseProps {
- className?: string;
- name: string;
- illustration: string;
- channelsCount: number;
- boardsCount: number;
- playbooksCount: number;
- disableQuickUse: boolean;
-
- onQuickUse: () => void;
- onSelectTemplate: () => void;
-}
-
-const UseCase = (props: UseCaseProps) => {
- const {formatMessage, formatList} = useIntl();
-
- const details = useMemo(() => {
- const detailBuilder: string[] = [];
- if (props.channelsCount) {
- detailBuilder.push(formatMessage({
- id: 'work_templates.menu.usecase_channels_count',
- defaultMessage: '{channelsCount, plural, =1 {# channel} other {# channels}}',
- }, {channelsCount: props.channelsCount}));
- }
-
- if (props.boardsCount) {
- detailBuilder.push(formatMessage({
- id: 'work_templates.menu.usecase_boards_count',
- defaultMessage: '{boardsCount, plural, =1 {# board} other {# boards}}',
- }, {boardsCount: props.boardsCount}));
- }
-
- if (props.playbooksCount) {
- detailBuilder.push(formatMessage({
- id: 'work_templates.menu.usecase_playbooks_count',
- defaultMessage: '{playbooksCount, plural, =1 {# playbook} other {# playbooks}}',
- }, {playbooksCount: props.playbooksCount}));
- }
-
- return formatList(detailBuilder, {style: 'narrow'});
- }, [props.channelsCount, props.boardsCount, props.playbooksCount]);
-
- const selectTemplate = (e: React.MouseEvent- {formatMessage({id: 'work_templates.menu.template_title', defaultMessage: 'TEMPLATE'})} -
--
- {categories.map((category) => (
-
-
-
changeCategory(category)} - className={classNames({selected: category.id === currentCategoryId})} - > - {category.name} - -
- ))}
-
-
- );
-};
-
-const StyledUseCaseMenuItem = styled(UseCase)`
- display: flex;
- flex-direction: column;
- width: 220px;
- border: 1px solid rgba(var(--center-channel-text-rgb), 0.16);
- border-radius: 8px;
- cursor: pointer;
- margin-bottom: 16px;
- margin-right: 10px;
-
- .illustration {
- height: 130px;
- background: rgba(73, 146, 243, 0.2);
- border-radius: 8px 8px 0px 0px;
- display: flex;
- align-items: flex-end;
- justify-content: center;
- position: relative;
- flex-grow: 1;
- overflow-x: hidden;
- overflow-y: hidden;
- transition: height 0.2s ease-in-out;
-
- img {
- width: 204px;
- height: 123px;
- z-index: 1;
- transition: margin 0.2s ease-in-out;
- }
- }
-
- .name {
- padding: 14px 12px;
- width: 220px;
- height: 44px;
- font-family: 'Open Sans';
- line-height: 16px;
- font-weight: 600;
- font-size: 12px;
- line-height: 16px;
- color: var(--center-channel-color);
- transition: height 0.2s ease-in-out;
- flex-grow: 2;
-
- .details {
- visibility: hidden;
- margin-bottom: 12px;
- opacity: 0;
- font-weight: 400;
- font-size: 11px;
- line-height: 16px;
- letter-spacing: 0.02em;
- color: rgba(var(--center-channel-text-rgb), 0.72);
- transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
- }
- }
-
- &:hover {
- box-shadow: var(--elevation-2);
- ${QuickUse} {
- visibility: visible;
- opacity: 1;
- }
-
- img {
- margin-bottom: -12px;
- }
-
- .name {
- height: 56px;
- padding: 12px 12px 0;
- .details {
- visibility: visible;
- opacity: 1;
- }
- }
-
- .illustration {
- height: 118px;
- }
-
- }
-`;
-
-export default StyledUseCaseMenuItem;
-
diff --git a/webapp/channels/src/components/work_templates/components/modal.tsx b/webapp/channels/src/components/work_templates/components/modal.tsx
deleted file mode 100644
index 7fedfd044f..0000000000
--- a/webapp/channels/src/components/work_templates/components/modal.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import styled from 'styled-components';
-
-import {GenericModal} from '@mattermost/components';
-
-const Modal = styled(GenericModal)`
- width: 960px;
-
- .modal-body {
- min-height: 450px;
- }
-
- &.work-template-modal--customize, &.work-template-modal--preview {
- .modal-body {
- background: rgba(var(--denim-button-bg-rgb), 0.04);
- }
- }
-`;
-
-export default Modal;
diff --git a/webapp/channels/src/components/work_templates/components/preview.tsx b/webapp/channels/src/components/work_templates/components/preview.tsx
deleted file mode 100644
index 30667461f6..0000000000
--- a/webapp/channels/src/components/work_templates/components/preview.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useEffect, useMemo, useRef, useState} from 'react';
-import {useIntl} from 'react-intl';
-import styled from 'styled-components';
-import {CSSTransition} from 'react-transition-group';
-import {useSelector} from 'react-redux';
-
-import {AccordionItemType} from 'components/common/accordion/accordion';
-import {trackEvent} from 'actions/telemetry_actions';
-import {GlobalState} from 'types/store';
-import {TELEMETRY_CATEGORIES} from 'utils/constants';
-import {Board, Channel, Integration, Playbook, WorkTemplate} from '@mattermost/types/work_templates';
-import {MarketplacePlugin} from '@mattermost/types/marketplace';
-
-import {getTemplateDefaultIllustration} from '../utils';
-
-import Accordion from './preview/accordion';
-import Chip from './preview/chip';
-import PreviewSection from './preview/section';
-
-export interface PreviewProps {
- className?: string;
- template: WorkTemplate;
- pluginsEnabled: boolean;
-}
-
-interface IllustrationAnimations {
- prior: {
- animateIn: boolean;
- illustration: string;
- };
- current: {
- animateIn: boolean;
- illustration: string;
- };
-}
-
-const ANIMATE_TIMEOUTS = {
- appear: 0,
- enter: 200,
- exit: 200,
-};
-
-const Preview = ({template, className, pluginsEnabled}: PreviewProps) => {
- const {formatMessage} = useIntl();
-
- const nodeRefForPrior = useRef(null);
- const nodeRefForCurrent = useRef(null);
-
- const [integrations, setIntegrations] = useState
- {formatMessage({id: 'work_templates.menu.quick_use', defaultMessage: 'Quick use'})}
- 
-
-
- {props.name}
-
- - {details} -
-
-
- );
-};
-
-const StyledPreview = styled(Preview)`
- display: flex;
-
- .content-side {
- min-width: 387px;
- width: 387px;
- height: 416px;
- padding-right: 32px;
- margin-top: 17px;
- }
-
- strong {
- display: block;
- font-family: 'Metropolis';
- font-weight: 600;
- font-size: 18px;
- line-height: 24px;
- color: var(--center-channel-text);
- margin-bottom: 8px;
- }
-
- .img-wrapper {
- position: relative;
- width: 100%;
- margin-top: 32px;
- }
-
- img {
- box-shadow: var(--elevation-2);
- border-radius: 8px;
- position: absolute;
- }
-
- .prior-illustration-enter,
- .prior-illustration-enter-done,
- .prior-illustration-exit-done {
- opacity: 0;
- }
-
- .prior-illustration-exit {
- opacity: 1;
- }
-
- .prior-illustration-exit-active {
- opacity: 0;
- transition: opacity 200ms ease-in-out;
- }
-
- .current-illustration-enter,
- .current-illustration-exit,
- .current-illustration-exit-done {
- opacity: 0;
- }
-
- .current-illustration-enter-active {
- opacity: 1;
- transition: opacity 200ms ease-in-out;
- }
-
- .current-illustration-enter-done {
- opacity: 1;
- }
-`;
-
-export default StyledPreview;
diff --git a/webapp/channels/src/components/work_templates/components/preview/accordion.tsx b/webapp/channels/src/components/work_templates/components/preview/accordion.tsx
deleted file mode 100644
index 02be467269..0000000000
--- a/webapp/channels/src/components/work_templates/components/preview/accordion.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import styled from 'styled-components';
-
-import LibAccordion from 'components/common/accordion/accordion';
-
-import Chip from './chip';
-
-const Accordion = styled(LibAccordion)`
- &.Accordion {
- .accordion-card {
- margin-bottom: 8px;
- border-radius: 4px;
- border: 1px solid transparent;
- color: var(--center-channel-color);
-
- .accordion-card-header {
- padding: 14.5px 0px 14.5px 16px;
- font-weight: 600;
- font-size: 14px;
- line-height: 20px;
- color: var(--center-channel-color);
- align-items: center;
- border-radius: 4px 4px 0 0;
-
- &__extraContent {
- margin-left: 2px;
- }
-
- &__chevron {
- max-width: initial;
- font-size: 18px;
- line-height: 20px;
- font-weight: 600;
- }
- }
-
- .accordion-card-container__content {
- padding: 4px 16px 16px 16px;
- font-size: 12px;
- line-height: 16px;
-
- ul {
- list-style: disc;
- }
- }
-
- &.active {
- border-color: var(--denim-button-bg);
-
- .accordion-card-header {
- color: var(--denim-button-bg);
- padding-bottom: 4px;
- }
-
- ${Chip} {
- background: rgba(var(--denim-button-bg-rgb), 0.08);
- color: var(--denim-button-bg);
- }
- }
- }
- }
-`;
-
-export default Accordion;
diff --git a/webapp/channels/src/components/work_templates/components/preview/chip.tsx b/webapp/channels/src/components/work_templates/components/preview/chip.tsx
deleted file mode 100644
index 720b6cd896..0000000000
--- a/webapp/channels/src/components/work_templates/components/preview/chip.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import styled from 'styled-components';
-
-const Chip = styled.span`
- padding: 0px 4px;
- width: 20px;
- height: 16px;
- border-radius: 8px;
- font-weight: 700;
- font-size: 11px;
- line-height: 16px;
- letter-spacing: 0.02em;
-
- background: rgba(var(--center-channel-text-rgb), 0.08);
- color: rgba(var(--center-channel-text-rgb), 0.56);
-`;
-
-export default Chip;
diff --git a/webapp/channels/src/components/work_templates/components/preview/section.tsx b/webapp/channels/src/components/work_templates/components/preview/section.tsx
deleted file mode 100644
index 3514da9b09..0000000000
--- a/webapp/channels/src/components/work_templates/components/preview/section.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {ReactNode, useCallback, useEffect, useState} from 'react';
-import {useIntl} from 'react-intl';
-import classnames from 'classnames';
-import styled from 'styled-components';
-
-import {haveISystemPermission} from 'mattermost-redux/selectors/entities/roles';
-
-import store from 'stores/redux_store';
-import NotifyAdminCTA from 'components/notify_admin_cta/notify_admin_cta';
-
-import {MattermostFeatures} from 'utils/constants';
-
-interface GenericPreviewSectionProps {
- items: Array<{ id: string; name?: string; illustration?: string }>;
- onUpdateIllustration?: (illustration: string) => void;
- className?: string;
- message?: string;
- id?: string;
-}
-
-type IntegrationPreviewSectionItemsProps = {id: string; name?: string; category?: string; description?: string; icon?: string; installed?: boolean}
-
-interface IntegrationPreviewSectionProps {
- items: IntegrationPreviewSectionItemsProps[];
- className?: string;
- message?: string;
- id?: string;
- categoryId?: string;
-}
-
-const SYSCONSOLE_WRITE_PLUGINS = 'sysconsole_write_plugins';
-const getState = store.getState;
-
-const viewPreview = (props: GenericPreviewSectionProps | IntegrationPreviewSectionProps) => {
- if (props.id === 'integrations') {
- const integrationsProps = props as IntegrationPreviewSectionProps;
- return (
-
- {formatMessage({id: 'work_templates.preview.what_you_get', defaultMessage: 'Here\'s what you\'ll get:'})}
-
-
-
- 
-
-
- 
-
-
-
-
- );
-};
-
-const IntegrationsPreview = ({items, categoryId}: IntegrationPreviewSectionProps) => {
- const state = getState();
- const {formatMessage} = useIntl();
-
- const haveIWritePluginPermission = haveISystemPermission(state, {permission: SYSCONSOLE_WRITE_PLUGINS});
- const [pluginInstallationPossible, setPluginInstallationPossible] = useState(false);
-
- useEffect(() => {
- if (haveIWritePluginPermission) {
- setPluginInstallationPossible(true);
- }
- }, [haveIWritePluginPermission]);
-
- const pluginsToInstall = items.filter((item) => !item.installed);
-
- const createWarningMessage = () => {
- if (pluginsToInstall.length === 1) {
- return formatMessage(
- {
- id: 'work_templates.preview.integrations.admin_install.single_plugin',
- defaultMessage: '{plugin} will not be added until admin installs it.',
- },
- {
- plugin: pluginsToInstall[0].name,
- });
- } else if (pluginsToInstall.length > 1) {
- return formatMessage({
- id: 'work_templates.preview.integrations.admin_install.multiple_plugin',
- defaultMessage: 'Integrations will not be added until admin installs them.',
- });
- }
- return '';
- };
- const warningMessage = pluginInstallationPossible ? '' : createWarningMessage();
- const notifyAdminCTA = formatMessage({
- id: 'work_templates.preview.integrations.admin_install.notify',
- defaultMessage: 'Notify admin to install integrations.',
- });
-
- const makeIntegrationSubtext = useCallback((integration: IntegrationPreviewSectionItemsProps) => {
- if (integration.installed) {
- return formatMessage({
- id: 'work_templates.preview.integrations.already_installed',
- defaultMessage: 'Already installed',
- });
- }
-
- if (!pluginInstallationPossible) {
- return formatMessage({
- id: 'work_templates.preview.integrations.app_install',
- defaultMessage: 'App Install',
- });
- }
-
- return formatMessage({
- id: 'work_templates.preview.integrations.to_be_installed',
- defaultMessage: 'To be installed',
- });
- }, [pluginInstallationPossible, formatMessage]);
-
- return (
- - {props.message} -
- - { - formatMessage({ - id: 'work_templates.preview.section.included', - defaultMessage: 'Included', - }) - } - - {viewPreview(props)} - -
- plugin.id).join(','),
- required_feature: `${MattermostFeatures.PLUGIN_FEATURE}-${categoryId}`,
- trial_notification: false,
- }}
- />
- }
-
-
- );
-};
-
-const GenericPreview = ({items, onUpdateIllustration}: GenericPreviewSectionProps) => {
- const updateIllustration = (e: React.MouseEvent
- {items.map((item) => {
- return (
-
-
- {warningMessage &&
- <>
-
-
);
- })}
-
- 
-
-
- {item.name}
- - {makeIntegrationSubtext(item)} - -
- {item.installed &&
- }
- - - {makeIntegrationSubtext(item)} - -
-
-
-
- {warningMessage}
- - {list}
- {props.backArrowAction &&
-
- );
-};
-
-enum ModalState {
- Menu = 'menu',
- Customize = 'customize',
- Preview = 'preview',
-}
-
-const WorkTemplateModal = () => {
- const {formatMessage} = useIntl();
- const dispatch = useDispatch();
-
- const [modalState, setModalState] = useState(ModalState.Menu);
- const [selectedTemplate, setSelectedTemplate] = useState