fix: clear search on view change (#1856)

webapp/src/components/centerPanel.test.tsx

@@ -15,6 +15,16 @@ import {Constants} from '../constants'
 
 import CenterPanel from './centerPanel'
 Object.defineProperty(Constants, 'versionString', {value: '1.0.0'})
+jest.mock('react-router-dom', () => {
+    const originalModule = jest.requireActual('react-router-dom')
+
+    return {
+        ...originalModule,
+        useRouteMatch: jest.fn(() => {
+            return {url: '/board/view'}
+        }),
+    }
+})
 jest.mock('../utils')
 jest.mock('../mutator')
 jest.mock('../telemetry/telemetryClient')

webapp/src/components/viewHeader/viewHeader.test.tsx

@@ -17,6 +17,17 @@ const board = TestBlockFactory.createBoard()
 const activeView = TestBlockFactory.createBoardView(board)
 const card = TestBlockFactory.createCard(board)
 
+jest.mock('react-router-dom', () => {
+    const originalModule = jest.requireActual('react-router-dom')
+
+    return {
+        ...originalModule,
+        useRouteMatch: jest.fn(() => {
+            return {url: '/board/view'}
+        }),
+    }
+})
+
 describe('components/viewHeader/viewHeader', () => {
     const state = {
         users: {

webapp/src/components/viewHeader/viewHeaderSearch.test.tsx

@@ -11,6 +11,17 @@ import {mockStateStore, wrapIntl} from '../../testUtils'
 
 import ViewHeaderSearch from './viewHeaderSearch'
 
+jest.mock('react-router-dom', () => {
+    const originalModule = jest.requireActual('react-router-dom')
+
+    return {
+        ...originalModule,
+        useRouteMatch: jest.fn(() => {
+            return {url: '/board/view'}
+        }),
+    }
+})
+
 describe('components/viewHeader/ViewHeaderSearch', () => {
     const state = {
         users: {

webapp/src/components/viewHeader/viewHeaderSearch.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React, {useState, useRef, useEffect, useMemo} from 'react'
+import {useRouteMatch} from 'react-router-dom'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {useHotkeys} from 'react-hotkeys-hook'
 import {debounce} from 'lodash'
@@ -15,10 +16,12 @@ const ViewHeaderSearch = (): JSX.Element => {
     const searchText = useAppSelector<string>(getSearchText)
     const dispatch = useAppDispatch()
     const intl = useIntl()
+    const match = useRouteMatch<{viewId?: string}>()
 
     const searchFieldRef = useRef<{focus(selectAll?: boolean): void}>(null)
     const [isSearching, setIsSearching] = useState(Boolean(searchText))
     const [searchValue, setSearchValue] = useState(searchText)
+    const [currentView, setCurrentView] = useState(match.params?.viewId)
 
     const dispatchSearchText = (value: string) => {
         dispatch(setSearchText(value))
@@ -27,6 +30,20 @@ const ViewHeaderSearch = (): JSX.Element => {
     const debouncedDispatchSearchText = useMemo(
         () => debounce(dispatchSearchText, 200), [])
 
+    useEffect(() => {
+        const viewId = match.params?.viewId
+        if (viewId !== currentView) {
+            setCurrentView(viewId)
+            setSearchValue('')
+            setIsSearching(false)
+
+            // Previously debounced calls to change the search text should be cancelled
+            // to avoid resetting the search text.
+            debouncedDispatchSearchText.cancel()
+            dispatchSearchText('')
+        }
+    }, [match.url])
+
     useEffect(() => {
         return () => {
             debouncedDispatchSearchText.cancel()