manageCategories.tsx

TLDR

The file manageCategories.tsx exports a React functional component called ManageCategoriesTourStep. This component is responsible for rendering a tour step related to managing categories in a sidebar. It uses the TourTipRenderer component to render the tour step and the FormattedMessage component to define the title and screen text.

Methods (if applicable)

None

Classes (if applicable)

None

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