manageCategories.tsx

TLDR

This file contains the ManageCategoriesTourStep component, which is responsible for rendering a tour tip for managing categories in the sidebar.

Classes

ManageCategoriesTourStep

This class renders a tour tip for managing categories in the sidebar. It uses the TourTipRenderer component to render the tour tip, including a title and screen description. The tour tip is specific to the sidebar category management feature. The ManageCategoriesTourStep component also uses the useMeasurePunchouts hook to calculate the position of the punchout element, which highlights the specific area of the UI being described in the tour tip.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'

import {right} from '@popperjs/core'

import {FormattedMessage} from 'react-intl'

import {SidebarTourSteps, TOUR_SIDEBAR} from '..'

import {useMeasurePunchouts} from '../../tutorial_tour_tip/hooks'

import TourTipRenderer from '../tourTipRenderer/tourTipRenderer'

import {ClassForManageCategoriesTourStep} from '../../../components/sidebar/sidebarCategory'

import './manageCategories.scss'

const ManageCategoriesTourStep = (): JSX.Element | null => {
    const title = (
        <FormattedMessage
            id='SidebarTour.ManageCategories.Title'
            defaultMessage='Manage categories'
        />
    )

    const screen = (
        <FormattedMessage
            id='SidebarTour.ManageCategories.Body'
            defaultMessage='Create and manage custom categories. Categories are user-specific, so moving a board to your category won’t impact other members using the same board.'
        />
    )

    const punchout = useMeasurePunchouts([`.${ClassForManageCategoriesTourStep}`], [])

    return (
        <TourTipRenderer
            key='ManageCatergoriesTourStep'
            requireCard={false}
            category={TOUR_SIDEBAR}
            step={SidebarTourSteps.MANAGE_CATEGORIES}
            screen={screen}
            title={title}
            punchout={punchout}
            classname='ManageCatergoies'
            telemetryTag='tourPoint4b'
            placement={right}
            hideBackdrop={false}
            showForce={true}
        />
    )
}

export default ManageCategoriesTourStep