From c33840004de01e00d97c2864cd9d272cf74695b2 Mon Sep 17 00:00:00 2001 From: Rajat Dabade Date: Fri, 12 Aug 2022 21:17:52 +0530 Subject: [PATCH] Updated the text and changed position for sidebar Tour (#3665) --- webapp/i18n/en.json | 11 +++++++++- .../boardsSwitcher/boardsSwitcher.tsx | 16 +++----------- .../boardSwitcherDialog.tsx | 2 -- .../manageBoards/manageBoards.tsx | 6 ++--- .../manageCategories/manageCategories.tsx | 2 +- .../searchForBoards/searchForBoards.scss | 3 +-- .../searchForBoards/searchForBoards.tsx | 10 ++++----- .../sidebarCategories/sidebarCategories.tsx | 22 ++++++++++++++----- .../components/searchDialog/searchDialog.tsx | 3 --- 9 files changed, 40 insertions(+), 35 deletions(-) diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 6dfd62b55..0e7834acb 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -235,6 +235,15 @@ "SidebarCategories.CategoryMenu.DeleteModal.Body": "Boards in {categoryName} will move back to the Boards categories. You're not removed from any boards.", "SidebarCategories.CategoryMenu.DeleteModal.Title": "Delete this category?", "SidebarCategories.CategoryMenu.Update": "Rename Category", + "SidebarTour.ManageBoards.Body": "Move boards to another category or hide the board from the sidebar.", + "SidebarTour.ManageBoards.Title": "Manage boards", + "SidebarTour.ManageCategories.Body": "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.", + "SidebarTour.ManageCategories.Title": "Manage categories", + "SidebarTour.SidebarCategories.Body": "All your boards are now organized under your new sidebar. No more switching between workspaces. One-time custom categories based on your prior workspaces may have automatically been created for you as part of your v7.2 upgrade. These can be removed or edited to your preference. ", + "SidebarTour.SidebarCategories.Link": "Learn more", + "SidebarTour.SidebarCategories.Title": "Sidebar categories", + "SidebarTour.SearchForBoards.Body": "Open the board switcher (Cmd/Ctrl + K) to quickly search and add boards to your sidebar.", + "SidebarTour.SearchForBoards.Title": "Search for boards", "TableComponent.add-icon": "Add icon", "TableComponent.name": "Name", "TableComponent.plus-new": "+ New", @@ -382,4 +391,4 @@ "tutorial_tip.ok": "Next", "tutorial_tip.out": "Opt out of these tips.", "tutorial_tip.seen": "Seen this before?" -} \ No newline at end of file +} diff --git a/webapp/src/components/boardsSwitcher/boardsSwitcher.tsx b/webapp/src/components/boardsSwitcher/boardsSwitcher.tsx index d11096546..d07ec61a8 100644 --- a/webapp/src/components/boardsSwitcher/boardsSwitcher.tsx +++ b/webapp/src/components/boardsSwitcher/boardsSwitcher.tsx @@ -23,6 +23,7 @@ import {Constants} from '../../constants' import {TOUR_SIDEBAR, SidebarTourSteps} from '../../components/onboardingTour' import IconButton from '../../widgets/buttons/iconButton' +import SearchForBoardsTourStep from '../../components/onboardingTour/searchForBoards/searchForBoards' type Props = { onBoardTemplateSelectorOpen?: () => void, @@ -42,17 +43,6 @@ const BoardsSwitcher = (props: Props): JSX.Element => { onboardingTourCategory === TOUR_SIDEBAR && onboardingTourStep === SidebarTourSteps.SEARCH_FOR_BOARDS.toString() - useEffect(() => { - if(shouldViewSearchForBoardsTour) { - setShowSwitcher(true) - } - - return () => { - setShowSwitcher(false) - } - }, [shouldViewSearchForBoardsTour]) - - // We need this keyboard handling (copied from Mattermost webapp) instead of // using react-hotkeys-hook as react-hotkeys-hook is unable to handle keyboard shortcuts that // the browser uses when the user is focused in an input field. @@ -101,7 +91,7 @@ const BoardsSwitcher = (props: Props): JSX.Element => { - + {shouldViewSearchForBoardsTour &&
} { Utils.isFocalboardPlugin() && { { showSwitcher && - setShowSwitcher(false)} shouldViewSearchForBoardsTour={shouldViewSearchForBoardsTour}/> + setShowSwitcher(false)} /> } ) diff --git a/webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx b/webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx index dd5d18a55..5495702ae 100644 --- a/webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx +++ b/webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx @@ -26,7 +26,6 @@ import { type Props = { onClose: () => void - shouldViewSearchForBoardsTour?: boolean } const BoardSwitcherDialog = (props: Props): JSX.Element => { @@ -140,7 +139,6 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => { searchHandler={searchHandler} selected={selected} setSelected={(n: number) => setSelected(n)} - shouldViewSearchForBoardsTour={props.shouldViewSearchForBoardsTour} /> ) } diff --git a/webapp/src/components/onboardingTour/manageBoards/manageBoards.tsx b/webapp/src/components/onboardingTour/manageBoards/manageBoards.tsx index 592b270cf..a392b01fe 100644 --- a/webapp/src/components/onboardingTour/manageBoards/manageBoards.tsx +++ b/webapp/src/components/onboardingTour/manageBoards/manageBoards.tsx @@ -18,14 +18,14 @@ const ManageBoardsTourStep = (): JSX.Element | null => { const title = ( ) const screen = ( ) diff --git a/webapp/src/components/onboardingTour/manageCategories/manageCategories.tsx b/webapp/src/components/onboardingTour/manageCategories/manageCategories.tsx index 8a160dd41..4276955c7 100644 --- a/webapp/src/components/onboardingTour/manageCategories/manageCategories.tsx +++ b/webapp/src/components/onboardingTour/manageCategories/manageCategories.tsx @@ -20,7 +20,7 @@ const ManageCategoriesTourStep = (): JSX.Element | null => { const title = ( ) diff --git a/webapp/src/components/onboardingTour/searchForBoards/searchForBoards.scss b/webapp/src/components/onboardingTour/searchForBoards/searchForBoards.scss index c2e31f391..fad0aff94 100644 --- a/webapp/src/components/onboardingTour/searchForBoards/searchForBoards.scss +++ b/webapp/src/components/onboardingTour/searchForBoards/searchForBoards.scss @@ -1,7 +1,6 @@ .SearchForBoards { &.tutorial-tour-tip__pulsating-dot-ctr { - margin-left: 14px; - margin-top: 5px; + margin-top: 10px; } .tutorial-tour-tip__overlay { diff --git a/webapp/src/components/onboardingTour/searchForBoards/searchForBoards.tsx b/webapp/src/components/onboardingTour/searchForBoards/searchForBoards.tsx index 5bbd8be78..e071a56c0 100644 --- a/webapp/src/components/onboardingTour/searchForBoards/searchForBoards.tsx +++ b/webapp/src/components/onboardingTour/searchForBoards/searchForBoards.tsx @@ -3,7 +3,7 @@ import React from 'react' import {FormattedMessage} from 'react-intl' -import {top} from '@popperjs/core' +import {right} from '@popperjs/core' import { SidebarTourSteps, TOUR_SIDEBAR } from '..' @@ -16,18 +16,18 @@ const SearchForBoardsTourStep = (): JSX.Element | null => { const title = ( ) const screen = ( ) - const punchout = useMeasurePunchouts(['BoardsSwitcherWrapper'], []) + const punchout = useMeasurePunchouts(['.BoardsSwitcher'], []) return ( { punchout={punchout} classname='SearchForBoards' telemetryTag='tourPoint4d' - placement={top} + placement={right} hideBackdrop={false} showForce={true} /> diff --git a/webapp/src/components/onboardingTour/sidebarCategories/sidebarCategories.tsx b/webapp/src/components/onboardingTour/sidebarCategories/sidebarCategories.tsx index 045e69818..58433dad1 100644 --- a/webapp/src/components/onboardingTour/sidebarCategories/sidebarCategories.tsx +++ b/webapp/src/components/onboardingTour/sidebarCategories/sidebarCategories.tsx @@ -27,14 +27,26 @@ const SidebarCategoriesTourStep = (): JSX.Element | null => { const title = ( ) const screen = ( - +
+ + + + +
) const punchout = useMeasurePunchouts(['.SidebarCategory'], []) diff --git a/webapp/src/components/searchDialog/searchDialog.tsx b/webapp/src/components/searchDialog/searchDialog.tsx index 4539e0b19..18a5f2491 100644 --- a/webapp/src/components/searchDialog/searchDialog.tsx +++ b/webapp/src/components/searchDialog/searchDialog.tsx @@ -12,7 +12,6 @@ import {Utils} from '../../utils' import Search from '../../widgets/icons/search' import { Constants } from '../../constants' -import SearchForBoardsTourStep from '../onboardingTour/searchForBoards/searchForBoards' type Props = { onClose: () => void @@ -22,7 +21,6 @@ type Props = { initialData?: Array selected: number setSelected: (n: number) => void - shouldViewSearchForBoardsTour?: boolean } export const EmptySearch = (): JSX.Element => ( @@ -146,7 +144,6 @@ const SearchDialog = (props: Props): JSX.Element => { {!emptyResult && !searchQuery && } - {props.shouldViewSearchForBoardsTour && } ) }