Updated the text and changed position for sidebar Tour (#3665)

webapp/i18n/en.json

@@ -235,6 +235,15 @@
   "SidebarCategories.CategoryMenu.DeleteModal.Body": "Boards in <b>{categoryName}</b> 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?"
-}
+}

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 => {
                     </span>
                 </div>
             </div>
-
+            {shouldViewSearchForBoardsTour && <div><SearchForBoardsTourStep/></div>}
             {
                 Utils.isFocalboardPlugin() &&
                 <IconButton
@@ -115,7 +105,7 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
 
             {
                 showSwitcher &&
-                <BoardSwitcherDialog onClose={() => setShowSwitcher(false)} shouldViewSearchForBoardsTour={shouldViewSearchForBoardsTour}/>
+                <BoardSwitcherDialog onClose={() => setShowSwitcher(false)} />
             }
         </div>
     )

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

webapp/src/components/onboardingTour/manageBoards/manageBoards.tsx

@@ -18,14 +18,14 @@ const ManageBoardsTourStep = (): JSX.Element | null => {
     const title = (
         <FormattedMessage
             id='SidebarTour.ManageBoards.Title'
-            defaultMessage='Manage Boards'
+            defaultMessage='Manage boards'
         />
     )
 
     const screen = (
         <FormattedMessage
-            id='SidebarTour.ManageBoard.title'
-            defaultMessage='Move boards to another category or hide the board from the sidebar'
+            id='SidebarTour.ManageBoards.Body'
+            defaultMessage='Move boards to another category or hide the board from the sidebar.'
         />
     )
 

webapp/src/components/onboardingTour/manageCategories/manageCategories.tsx

@@ -20,7 +20,7 @@ const ManageCategoriesTourStep = (): JSX.Element | null => {
     const title = (
         <FormattedMessage
             id="SidebarTour.ManageCategories.Title"
-            defaultMessage='Manage Categories'
+            defaultMessage='Manage categories'
         />
     )
 

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 {

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 = (
         <FormattedMessage
             id='SidebarTour.SearchForBoards.Title'
-            defaultMessage='Search For Boards'
+            defaultMessage='Search for boards'
         />
     )
 
     const screen = (
         <FormattedMessage
-            id='SidebarTour.SearchForBoards.title'
+            id='SidebarTour.SearchForBoards.Body'
             defaultMessage='Open the board switcher (Cmd/Ctrl + K) to quickly search and add boards to your sidebar.'
         />
     )
 
-    const punchout = useMeasurePunchouts(['BoardsSwitcherWrapper'], [])
+    const punchout = useMeasurePunchouts(['.BoardsSwitcher'], [])
 
     return (
         <TourTipRenderer
@@ -40,7 +40,7 @@ const SearchForBoardsTourStep = (): JSX.Element | null  => {
             punchout={punchout}
             classname='SearchForBoards'
             telemetryTag='tourPoint4d'
-            placement={top}
+            placement={right}
             hideBackdrop={false}
             showForce={true}
         />

webapp/src/components/onboardingTour/sidebarCategories/sidebarCategories.tsx

@@ -27,14 +27,26 @@ const SidebarCategoriesTourStep = (): JSX.Element | null => {
     const title = (
         <FormattedMessage
             id='SidebarTour.SidebarCategories.Title'
-            defaultMessage='Sidebar Categories'
+            defaultMessage='Sidebar categories'
         />
     )
     const screen = (
-        <FormattedMessage
-            id="SidebarTour.SidebarCategories.Body"
-            defaultMessage='All your boards are now accessible in the new sidebar and organized under categories. No more switching between workspaces to find your boards. One-time custom categories based on your prior workspaces may have automatically been created for you as part of your v7.2 upgrade, but can be removed or edited to your preference.'
-        />
+        <div>
+            <FormattedMessage
+                id="SidebarTour.SidebarCategories.Body"
+                defaultMessage='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. '
+            />
+            <a
+                href="https://docs.mattermost.com/welcome/whats-new-in-v72.html"
+                target='_blank'
+                rel='noopener noreferrer'
+            >
+                <FormattedMessage
+                    id="SidebarTour.SidebarCategories.Link"
+                    defaultMessage="Learn more"
+                />
+            </a>
+        </div>
     )
 
     const punchout = useMeasurePunchouts(['.SidebarCategory'], [])

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<ReactNode>
     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 && <EmptySearch/>}
                 </div>
             </div>
-            {props.shouldViewSearchForBoardsTour && <SearchForBoardsTourStep />}
         </Dialog>
     )
 }