From 3ae821d2e82d1a93c10aae0bb9aba38d5558134e Mon Sep 17 00:00:00 2001 From: Miguel de la Cruz Date: Thu, 14 Jul 2022 12:31:51 +0200 Subject: [PATCH] Refactor websockets state and lifecycle (#3315) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Refactor websockets state and lifecycle This PR moves the state of the authentication and subscriptions to the websockets client, allowing for multiple components to communicate with it and request subscriptions independently. With this change, the lifecycle of the websockets client is now managed on a component, and a hook is provided for easy access to it from individual components. * Fix linter * Integrating the new websockets in channels integration with the RHS and board selector * Some small fixes around boards-channels relationship * Make the boards unfurl to always use the current team * Fixing weird behaviors in websockets and other small data related bugs in channel-board relationship * Only warn if withWebSockets is used without a base connection * Fix tests * Fix linter * Update snapshot * Fixing plugin tests Co-authored-by: Jesús Espino --- .../src/components/boardSelector.test.tsx | 1 + .../webapp/src/components/boardSelector.tsx | 72 ++++--- .../__snapshots__/boardsUnfurl.test.tsx.snap | 8 +- .../boardsUnfurl/boardsUnfurl.test.tsx | 54 +++--- .../components/boardsUnfurl/boardsUnfurl.tsx | 180 ++++++++++-------- .../src/components/rhsChannelBoards.test.tsx | 16 +- .../src/components/rhsChannelBoards.tsx | 37 +++- mattermost-plugin/webapp/src/index.tsx | 100 ++++++---- server/api/api.go | 68 ++++++- server/app/boards.go | 4 + server/integrationtests/board_test.go | 54 +----- server/services/store/mockstore/mockstore.go | 15 ++ server/services/store/sqlstore/board.go | 46 +++++ server/services/store/sqlstore/migrate.go | 1 + .../services/store/sqlstore/public_methods.go | 5 + server/services/store/store.go | 1 + webapp/src/app.tsx | 17 -- .../boardSwitcherDialog.tsx | 2 +- webapp/src/components/withWebSockets.tsx | 79 ++++++++ webapp/src/hooks/websockets.tsx | 21 ++ webapp/src/main.tsx | 18 +- webapp/src/octoClient.ts | 16 +- webapp/src/pages/boardPage/boardPage.tsx | 95 +++++++-- .../pages/boardPage/websocketConnection.tsx | 105 +--------- webapp/src/store/boards.ts | 16 +- webapp/src/store/initialLoad.ts | 10 + webapp/src/store/teams.ts | 4 + webapp/src/wsclient.ts | 155 +++++++++------ 28 files changed, 780 insertions(+), 420 deletions(-) create mode 100644 webapp/src/components/withWebSockets.tsx create mode 100644 webapp/src/hooks/websockets.tsx diff --git a/mattermost-plugin/webapp/src/components/boardSelector.test.tsx b/mattermost-plugin/webapp/src/components/boardSelector.test.tsx index 1cd8c91d8..a56ea51f6 100644 --- a/mattermost-plugin/webapp/src/components/boardSelector.test.tsx +++ b/mattermost-plugin/webapp/src/components/boardSelector.test.tsx @@ -34,6 +34,7 @@ describe('components/boardSelector', () => { teams: { allTeams: [team], current: team, + currentId: team.id, }, language: { value: 'en', diff --git a/mattermost-plugin/webapp/src/components/boardSelector.tsx b/mattermost-plugin/webapp/src/components/boardSelector.tsx index 63971ca32..877f235dc 100644 --- a/mattermost-plugin/webapp/src/components/boardSelector.tsx +++ b/mattermost-plugin/webapp/src/components/boardSelector.tsx @@ -7,9 +7,11 @@ import debounce from 'lodash/debounce' import {getMessages} from '../../../../webapp/src/i18n' import {getLanguage} from '../../../../webapp/src/store/language' +import {useWebsockets} from '../../../../webapp/src/hooks/websockets' + import octoClient from '../../../../webapp/src/octoClient' import mutator from '../../../../webapp/src/mutator' -import {getCurrentTeam, getAllTeams, Team} from '../../../../webapp/src/store/teams' +import {getCurrentTeamId, getAllTeams, Team} from '../../../../webapp/src/store/teams' import {createBoard, BoardsAndBlocks, Board} from '../../../../webapp/src/blocks/board' import {createBoardView} from '../../../../webapp/src/blocks/boardView' import {useAppSelector, useAppDispatch} from '../../../../webapp/src/store/hooks' @@ -20,6 +22,7 @@ import SearchIcon from '../../../../webapp/src/widgets/icons/search' import Button from '../../../../webapp/src/widgets/buttons/button' import {getCurrentLinkToChannel, setLinkToChannel} from '../../../../webapp/src/store/boards' import TelemetryClient, {TelemetryCategory, TelemetryActions} from '../../../../webapp/src/telemetry/telemetryClient' +import {WSClient} from '../../../../webapp/src/wsclient' import BoardSelectorItem from './boardSelectorItem' @@ -31,7 +34,7 @@ const BoardSelector = () => { teamsById[t.id] = t }) const intl = useIntl() - const team = useAppSelector(getCurrentTeam) + const teamId = useAppSelector(getCurrentTeamId) const currentChannel = useAppSelector(getCurrentLinkToChannel) const dispatch = useAppDispatch() @@ -43,20 +46,45 @@ const BoardSelector = () => { const searchHandler = useCallback(async (query: string): Promise => { setSearchQuery(query) - if (query.trim().length === 0 || !team) { + if (query.trim().length === 0 || !teamId) { return } - const items = await octoClient.search(team.id, query) + const items = await octoClient.search(teamId, query) setResults(items) setIsSearching(false) - }, [team?.id]) + }, [teamId]) const debouncedSearchHandler = useMemo(() => debounce(searchHandler, 200), [searchHandler]) const emptyResult = results.length === 0 && !isSearching && searchQuery - if (!team) { + useWebsockets(teamId, (wsClient: WSClient) => { + const onChangeBoardHandler = (_: WSClient, boards: Board[]): void => { + const newResults = [...results] + let updated = false + results.forEach((board, idx) => { + for (const newBoard of boards) { + if (newBoard.id == board.id) { + newResults[idx] = newBoard + updated = true + } + } + }) + if (updated) { + setResults(newResults) + } + } + + wsClient.addOnChange(onChangeBoardHandler, 'board') + + return () => { + wsClient.removeOnChange(onChangeBoardHandler, 'board') + } + }, [results]) + + + if (!teamId) { return null } if (!currentChannel) { @@ -68,34 +96,18 @@ const BoardSelector = () => { setShowLinkBoardConfirmation(board) return } - const newBoard = createBoard(board) - newBoard.channelId = currentChannel + const newBoard = createBoard({...board, channelId: currentChannel}) await mutator.updateBoard(newBoard, board, 'linked channel') - for (const result of results) { - if (result.id == board.id) { - result.channelId = currentChannel - setResults([...results]) - } - } setShowLinkBoardConfirmation(null) } const unlinkBoard = async (board: Board): Promise => { - const newBoard = createBoard(board) - newBoard.channelId = '' + const newBoard = createBoard({...board, channelId: ''}) await mutator.updateBoard(newBoard, board, 'unlinked channel') - for (const result of results) { - if (result.id == board.id) { - result.channelId = '' - setResults([...results]) - } - } } const newLinkedBoard = async (): Promise => { - const board = createBoard() - board.teamId = team.id - board.channelId = currentChannel + const board = {...createBoard(), teamId, channelId: currentChannel} const view = createBoardView() view.fields.viewType = 'board' @@ -111,7 +123,7 @@ const BoardSelector = () => { const newBoard = bab.boards[0] // TODO: Maybe create a new event for create linked board TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.CreateBoard, {board: newBoard?.id}) - windowAny.WebappUtils.browserHistory.push(`/boards/team/${team.id}/${newBoard.id}`) + windowAny.WebappUtils.browserHistory.push(`/boards/team/${teamId}/${newBoard.id}`) dispatch(setLinkToChannel('')) }, async () => {return}, @@ -122,7 +134,13 @@ const BoardSelector = () => {
dispatch(setLinkToChannel(''))} + onClose={() => { + dispatch(setLinkToChannel('')) + setResults([]) + setIsSearching(false) + setSearchQuery('') + setShowLinkBoardConfirmation(null) + }} > {showLinkBoardConfirmation &&
+
+
+
@@ -46,8 +51,7 @@ exports[`components/boardsUnfurl/BoardsUnfurl renders normally 1`] = ` - Updated - + Updated January 01, 1970, 12:00 AM
diff --git a/mattermost-plugin/webapp/src/components/boardsUnfurl/boardsUnfurl.test.tsx b/mattermost-plugin/webapp/src/components/boardsUnfurl/boardsUnfurl.test.tsx index 0a4ff8437..30d4f360b 100644 --- a/mattermost-plugin/webapp/src/components/boardsUnfurl/boardsUnfurl.test.tsx +++ b/mattermost-plugin/webapp/src/components/boardsUnfurl/boardsUnfurl.test.tsx @@ -10,6 +10,7 @@ import {Provider as ReduxProvider} from 'react-redux' import {mocked} from 'jest-mock' +import {Utils} from '../../../../../webapp/src/utils' import {createCard} from '../../../../../webapp/src/blocks/card' import {createBoard} from '../../../../../webapp/src/blocks/board' import octoClient from '../../../../../webapp/src/octoClient' @@ -18,29 +19,39 @@ import {wrapIntl} from '../../../../../webapp/src/testUtils' import BoardsUnfurl from './boardsUnfurl' jest.mock('../../../../../webapp/src/octoClient') +jest.mock('../../../../../webapp/src/utils') const mockedOctoClient = mocked(octoClient, true) +const mockedUtils = mocked(Utils, true) +mockedUtils.createGuid = jest.requireActual('../../../../../webapp/src/utils').Utils.createGuid +mockedUtils.blockTypeToIDType = jest.requireActual('../../../../../webapp/src/utils').Utils.blockTypeToIDType +mockedUtils.displayDateTime = jest.requireActual('../../../../../webapp/src/utils').Utils.displayDateTime describe('components/boardsUnfurl/BoardsUnfurl', () => { + const team = { + id: 'team-id', + name: 'team', + display_name: 'Team name', + } + beforeEach(() => { + // This is done to the websocket not to try to connect directly + mockedUtils.isFocalboardPlugin.mockReturnValue(true) jest.clearAllMocks() }) it('renders normally', async () => { const mockStore = configureStore([]) const store = mockStore({ - entities: { - users: { - currentUserId: 'id_1', - profiles: { - id_1: { - locale: 'en', - }, - }, - }, + language: { + value: 'en', + }, + teams: { + allTeams: [team], + current: team, }, }) - const cards = [{...createCard(), title: 'test card'}] + const cards = [{...createCard(), title: 'test card', updateAt: 12345}] const board = {...createBoard(), title: 'test board'} mockedOctoClient.getBlocksWithBlockID.mockResolvedValueOnce(cards) @@ -50,7 +61,7 @@ describe('components/boardsUnfurl/BoardsUnfurl', () => { {wrapIntl( , )} @@ -62,6 +73,8 @@ describe('components/boardsUnfurl/BoardsUnfurl', () => { const result = render(component) container = result.container }) + expect(mockedOctoClient.getBoard).toBeCalledWith(board.id) + expect(mockedOctoClient.getBlocksWithBlockID).toBeCalledWith(cards[0].id, board.id, "abc") expect(container).toMatchSnapshot() }) @@ -69,19 +82,16 @@ describe('components/boardsUnfurl/BoardsUnfurl', () => { it('renders when limited', async () => { const mockStore = configureStore([]) const store = mockStore({ - entities: { - users: { - currentUserId: 'id_1', - profiles: { - id_1: { - locale: 'en', - }, - }, - }, + language: { + value: 'en', + }, + teams: { + allTeams: [team], + current: team, }, }) - const cards = [{...createCard(), title: 'test card', limited: true}] + const cards = [{...createCard(), title: 'test card', limited: true, updateAt: 12345}] const board = {...createBoard(), title: 'test board'} mockedOctoClient.getBlocksWithBlockID.mockResolvedValueOnce(cards) @@ -91,7 +101,7 @@ describe('components/boardsUnfurl/BoardsUnfurl', () => { {wrapIntl( , )} diff --git a/mattermost-plugin/webapp/src/components/boardsUnfurl/boardsUnfurl.tsx b/mattermost-plugin/webapp/src/components/boardsUnfurl/boardsUnfurl.tsx index 631d88435..f1e7a5378 100644 --- a/mattermost-plugin/webapp/src/components/boardsUnfurl/boardsUnfurl.tsx +++ b/mattermost-plugin/webapp/src/components/boardsUnfurl/boardsUnfurl.tsx @@ -1,22 +1,29 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React, {useState, useEffect} from 'react' -import {IntlProvider, FormattedMessage} from 'react-intl' -import {connect} from 'react-redux' +import {IntlProvider, FormattedMessage, useIntl} from 'react-intl' -import {GlobalState} from 'mattermost-redux/types/store' -import {getCurrentUserLocale} from 'mattermost-redux/selectors/entities/i18n' +import WithWebSockets from '../../../../../webapp/src/components/withWebSockets' +import {useWebsockets} from '../../../../../webapp/src/hooks/websockets' + +import {getLanguage} from '../../../../../webapp/src/store/language' +import {useAppSelector} from '../../../../../webapp/src/store/hooks' +import {getCurrentTeamId} from '../../../../../webapp/src/store/teams' + +import {WSClient, MMWebSocketClient} from '../../../../../webapp/src/wsclient' +import manifest from '../../manifest' import {getMessages} from './../../../../../webapp/src/i18n' import {Utils} from './../../../../../webapp/src/utils' +import {Block} from './../../../../../webapp/src/blocks/block' import {Card} from './../../../../../webapp/src/blocks/card' import {Board} from './../../../../../webapp/src/blocks/board' import {ContentBlock} from './../../../../../webapp/src/blocks/contentBlock' + import octoClient from './../../../../../webapp/src/octoClient' const noop = () => '' const Avatar = (window as any).Components?.Avatar || noop -const Timestamp = (window as any).Components?.Timestamp || noop const imageURLForUser = (window as any).Components?.imageURLForUser || noop import './boardsUnfurl.scss' @@ -26,15 +33,7 @@ type Props = { embed: { data: string, }, - locale: string, -} - -function mapStateToProps(state: GlobalState) { - const locale = getCurrentUserLocale(state) - - return { - locale, - } + webSocketClient?: MMWebSocketClient, } class FocalboardEmbeddedData { @@ -59,8 +58,11 @@ export const BoardsUnfurl = (props: Props): JSX.Element => { return <> } - const {embed, locale} = props + const intl = useIntl() + + const {embed, webSocketClient} = props const focalboardInformation: FocalboardEmbeddedData = new FocalboardEmbeddedData(embed.data) + const currentTeamId = useAppSelector(getCurrentTeamId) const {teamID, cardID, boardID, readToken, originalPath} = focalboardInformation const baseURL = window.location.origin @@ -111,6 +113,26 @@ export const BoardsUnfurl = (props: Props): JSX.Element => { fetchData() }, [originalPath]) + useWebsockets(currentTeamId, (wsClient: WSClient) => { + const onChangeHandler = (_: WSClient, blocks: Block[]): void => { + const cardBlock: Block|undefined = blocks.find(b => b.id === cardID) + if (cardBlock && !cardBlock.deleteAt) { + setCard(cardBlock as Card) + } + + const contentBlock: Block|undefined = blocks.find(b => b.id === content?.id) + if (contentBlock && !contentBlock.deleteAt) { + setContent(contentBlock) + } + } + + wsClient.addOnChange(onChangeHandler, 'block') + + return () => { + wsClient.removeOnChange(onChangeHandler, 'block') + } + }, [cardID, content?.id]) + let remainder = 0 let html = '' const propertiesToDisplay: Array> = [] @@ -160,10 +182,7 @@ export const BoardsUnfurl = (props: Props): JSX.Element => { } return ( - + {!loading && (!card || !board) && <>} {!loading && card && board && { } {card.limited && -

-

} +

+

} {/* Footer of the Card*/} {!card.limited && -
-
- -
-
-
- {propertiesToDisplay.map((property) => ( -
- {property.optionValue} -
- ))} - {remainder > 0 && - - - - } -
- - - ), - }} +
+
+ - -
-
} +
+
+
+ {propertiesToDisplay.map((property) => ( +
+ {property.optionValue} +
+ ))} + {remainder > 0 && + + + + } +
+ + + +
+
} } {loading &&
} + + ) +} + +const IntlBoardsUnfurl = (props: Props) => { + const language = useAppSelector(getLanguage) + + return ( + + ) } -export default connect(mapStateToProps)(BoardsUnfurl) +export default IntlBoardsUnfurl diff --git a/mattermost-plugin/webapp/src/components/rhsChannelBoards.test.tsx b/mattermost-plugin/webapp/src/components/rhsChannelBoards.test.tsx index d57a5e83d..3a9362021 100644 --- a/mattermost-plugin/webapp/src/components/rhsChannelBoards.test.tsx +++ b/mattermost-plugin/webapp/src/components/rhsChannelBoards.test.tsx @@ -4,12 +4,18 @@ import React from 'react' import {Provider as ReduxProvider} from 'react-redux' import {render} from '@testing-library/react' +import {mocked} from 'jest-mock' +import thunk from 'redux-thunk' +import octoClient from '../../../../webapp/src/octoClient' import {createBoard} from '../../../../webapp/src/blocks/board' import {mockStateStore, wrapIntl} from '../../../../webapp/src/testUtils' import RHSChannelBoards from './rhsChannelBoards' +jest.mock('../../../../webapp/src/octoClient') +const mockedOctoClient = mocked(octoClient, true) + describe('components/rhsChannelBoards', () => { const board1 = createBoard() board1.updateAt = 1657311058157 @@ -29,6 +35,7 @@ describe('components/rhsChannelBoards', () => { teams: { allTeams: [team], current: team, + currentId: team.id, }, language: { value: 'en', @@ -55,8 +62,13 @@ describe('components/rhsChannelBoards', () => { }, } + beforeEach(() => { + mockedOctoClient.getBoards.mockResolvedValue([board1, board2, board3]) + jest.clearAllMocks() + }) + it('renders the RHS for channel boards', async () => { - const store = mockStateStore([], state) + const store = mockStateStore([thunk], state) const {container} = render(wrapIntl( @@ -67,7 +79,7 @@ describe('components/rhsChannelBoards', () => { it('renders with empty list of boards', async () => { const localState = {...state, boards: {...state.boards, boards: {}}} - const store = mockStateStore([], localState) + const store = mockStateStore([thunk], localState) const {container} = render(wrapIntl( diff --git a/mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx b/mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx index 07a44e009..a2a6fa2f6 100644 --- a/mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx +++ b/mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx @@ -1,18 +1,24 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react' +import React, {useEffect} from 'react' import {FormattedMessage, IntlProvider} from 'react-intl' import {getMessages} from '../../../../webapp/src/i18n' import {getLanguage} from '../../../../webapp/src/store/language' -import {getCurrentTeam} from '../../../../webapp/src/store/teams' +import {useWebsockets} from '../../../../webapp/src/hooks/websockets' + +import {Board, BoardMember} from '../../../../webapp/src/blocks/board' +import {getCurrentTeamId} from '../../../../webapp/src/store/teams' +import {loadBoards} from '../../../../webapp/src/store/initialLoad' import {getCurrentChannel} from '../../../../webapp/src/store/channels' -import {getMySortedBoards, setLinkToChannel} from '../../../../webapp/src/store/boards' +import {getMySortedBoards, setLinkToChannel, updateBoards, updateMembers} from '../../../../webapp/src/store/boards' import {useAppSelector, useAppDispatch} from '../../../../webapp/src/store/hooks' import AddIcon from '../../../../webapp/src/widgets/icons/add' import Button from '../../../../webapp/src/widgets/buttons/button' +import {WSClient} from '../../../../webapp/src/wsclient' + import RHSChannelBoardItem from './rhsChannelBoardItem' import './rhsChannelBoards.scss' @@ -21,14 +27,35 @@ const boardsScreenshots = (window as any).baseURL + '/public/boards-screenshots. const RHSChannelBoards = () => { const boards = useAppSelector(getMySortedBoards) - const team = useAppSelector(getCurrentTeam) + const teamId = useAppSelector(getCurrentTeamId) const currentChannel = useAppSelector(getCurrentChannel) const dispatch = useAppDispatch() + useEffect(() => { + dispatch(loadBoards()) + }, []) + + useWebsockets(teamId || '', (wsClient: WSClient) => { + const onChangeBoardHandler = (_: WSClient, boards: Board[]): void => { + dispatch(updateBoards(boards)) + } + const onChangeMemberHandler = (_: WSClient, members: BoardMember[]): void => { + dispatch(updateMembers(members)) + } + + wsClient.addOnChange(onChangeBoardHandler, 'board') + wsClient.addOnChange(onChangeMemberHandler, 'boardMembers') + + return () => { + wsClient.removeOnChange(onChangeBoardHandler, 'board') + wsClient.removeOnChange(onChangeMemberHandler, 'boardMembers') + } + }, []) + if (!boards) { return null } - if (!team) { + if (!teamId) { return null } if (!currentChannel) { diff --git a/mattermost-plugin/webapp/src/index.tsx b/mattermost-plugin/webapp/src/index.tsx index 547e9dd72..a0aed794b 100644 --- a/mattermost-plugin/webapp/src/index.tsx +++ b/mattermost-plugin/webapp/src/index.tsx @@ -23,6 +23,7 @@ windowAny.isFocalboardPlugin = true import App from '../../../webapp/src/app' import store from '../../../webapp/src/store' import {setTeam} from '../../../webapp/src/store/teams' +import WithWebSockets from '../../../webapp/src/components/withWebSockets' import {setChannel} from '../../../webapp/src/store/channels' import {initialLoad} from '../../../webapp/src/store/initialLoad' import {Utils} from '../../../webapp/src/utils' @@ -129,8 +130,6 @@ function customHistory() { let browserHistory: History const MainApp = (props: Props) => { - wsClient.initPlugin(manifest.id, manifest.version, props.webSocketClient) - useEffect(() => { document.body.classList.add('focalboard-body') document.body.classList.add('app__body') @@ -151,10 +150,12 @@ const MainApp = (props: Props) => { return ( -
- -
-
+ +
+ +
+
+ ) @@ -187,6 +188,36 @@ export default class Plugin { UserSettings.nameFormat = mmStore.getState().entities.preferences?.myPreferences['display_settings--name_format']?.value || null let theme = mmStore.getState().entities.preferences.myPreferences.theme setMattermostTheme(theme) + + // register websocket handlers + this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_BOARD}`, (e: any) => wsClient.updateHandler(e.data)) + this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_CATEGORY}`, (e: any) => wsClient.updateHandler(e.data)) + this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_BOARD_CATEGORY}`, (e: any) => wsClient.updateHandler(e.data)) + this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_CLIENT_CONFIG}`, (e: any) => wsClient.updateClientConfigHandler(e.data)) + this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_CARD_LIMIT_TIMESTAMP}`, (e: any) => wsClient.updateCardLimitTimestampHandler(e.data)) + this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_SUBSCRIPTION}`, (e: any) => wsClient.updateSubscriptionHandler(e.data)) + this.registry?.registerWebSocketEventHandler('plugin_statuses_changed', (e: any) => wsClient.pluginStatusesChangedHandler(e.data)) + this.registry?.registerPostTypeComponent('custom_cloud_upgrade_nudge', CloudUpgradeNudge) + this.registry?.registerWebSocketEventHandler('preferences_changed', (e: any) => { + let preferences + try { + preferences = JSON.parse(e.data.preferences) + } catch { + preferences = [] + } + if (preferences) { + for (const preference of preferences) { + if (preference.category === 'theme' && theme !== preference.value) { + setMattermostTheme(JSON.parse(preference.value)) + theme = preference.value + } + if(preference.category === 'display_settings' && preference.name === 'name_format'){ + UserSettings.nameFormat = preference.value + } + } + } + }) + let lastViewedChannel = mmStore.getState().entities.channels.currentChannelId let prevTeamID: string @@ -210,10 +241,11 @@ export default class Plugin { if (currentTeamID && currentTeamID !== prevTeamID) { if (prevTeamID && window.location.pathname.startsWith(windowAny.frontendBaseURL || '')) { browserHistory.push(`/team/${currentTeamID}`) - wsClient.subscribeToTeam(currentTeamID) } prevTeamID = currentTeamID store.dispatch(setTeam(currentTeamID)) + octoClient.teamId = currentTeamID + store.dispatch(initialLoad()) } }) @@ -221,9 +253,11 @@ export default class Plugin { windowAny.frontendBaseURL = subpath + '/boards' const {rhsId, toggleRHSPlugin} = this.registry.registerRightHandSidebarComponent( - () => ( + (props: {webSocketClient: MMWebSocketClient}) => ( - + + + ), @@ -263,12 +297,25 @@ export default class Plugin { this.registry.registerAppBarComponent(appBarIconURL, () => mmStore.dispatch(toggleRHSPlugin), 'Boards') } - this.registry.registerPostWillRenderEmbedComponent((embed) => embed.type === 'boards', BoardsUnfurl, false) + this.registry.registerPostWillRenderEmbedComponent( + (embed) => embed.type === 'boards', + (props: {embed: {data: string}, webSocketClient: MMWebSocketClient}) => ( + + + + ), + false + ) } - this.boardSelectorId = this.registry.registerRootComponent(() => ( + this.boardSelectorId = this.registry.registerRootComponent((props: {webSocketClient: MMWebSocketClient}) => ( - + + + )) @@ -307,34 +354,6 @@ export default class Plugin { } } - // register websocket handlers - this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_BOARD}`, (e: any) => wsClient.updateHandler(e.data)) - this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_CATEGORY}`, (e: any) => wsClient.updateHandler(e.data)) - this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_BOARD_CATEGORY}`, (e: any) => wsClient.updateHandler(e.data)) - this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_CLIENT_CONFIG}`, (e: any) => wsClient.updateClientConfigHandler(e.data)) - this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_CARD_LIMIT_TIMESTAMP}`, (e: any) => wsClient.updateCardLimitTimestampHandler(e.data)) - this.registry?.registerWebSocketEventHandler(`custom_${manifest.id}_${ACTION_UPDATE_SUBSCRIPTION}`, (e: any) => wsClient.updateSubscriptionHandler(e.data)) - this.registry?.registerWebSocketEventHandler('plugin_statuses_changed', (e: any) => wsClient.pluginStatusesChangedHandler(e.data)) - this.registry?.registerPostTypeComponent('custom_cloud_upgrade_nudge', CloudUpgradeNudge) - this.registry?.registerWebSocketEventHandler('preferences_changed', (e: any) => { - let preferences - try { - preferences = JSON.parse(e.data.preferences) - } catch { - preferences = [] - } - if (preferences) { - for (const preference of preferences) { - if (preference.category === 'theme' && theme !== preference.value) { - setMattermostTheme(JSON.parse(preference.value)) - theme = preference.value - } - if(preference.category === 'display_settings' && preference.name === 'name_format'){ - UserSettings.nameFormat = preference.value - } - } - } - }) windowAny.setTeamInSidebar = (teamID: string) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -345,7 +364,6 @@ export default class Plugin { // @ts-ignore return mmStore.getState().entities.teams.currentTeamId } - store.dispatch(initialLoad()) } uninitialize(): void { diff --git a/server/api/api.go b/server/api/api.go index 4bcef924a..a269fe943 100644 --- a/server/api/api.go +++ b/server/api/api.go @@ -98,6 +98,7 @@ func (a *API) RegisterRoutes(r *mux.Router) { apiv2.HandleFunc("/teams/{teamID}/boards/search", a.sessionRequired(a.handleSearchBoards)).Methods("GET") apiv2.HandleFunc("/teams/{teamID}/templates", a.sessionRequired(a.handleGetTemplates)).Methods("GET") apiv2.HandleFunc("/boards", a.sessionRequired(a.handleCreateBoard)).Methods("POST") + apiv2.HandleFunc("/boards/search", a.sessionRequired(a.handleSearchAllBoards)).Methods("GET") apiv2.HandleFunc("/boards/{boardID}", a.attachSession(a.handleGetBoard, false)).Methods("GET") apiv2.HandleFunc("/boards/{boardID}", a.sessionRequired(a.handlePatchBoard)).Methods("PATCH") apiv2.HandleFunc("/boards/{boardID}", a.sessionRequired(a.handleDeleteBoard)).Methods("DELETE") @@ -3366,7 +3367,7 @@ func (a *API) handleGetBoardMetadata(w http.ResponseWriter, r *http.Request) { func (a *API) handleSearchBoards(w http.ResponseWriter, r *http.Request) { // swagger:operation GET /teams/{teamID}/boards/search searchBoards // - // Returns the boards that match with a search term + // Returns the boards that match with a search term in the team // // --- // produces: @@ -3415,7 +3416,7 @@ func (a *API) handleSearchBoards(w http.ResponseWriter, r *http.Request) { auditRec.AddMeta("teamID", teamID) // retrieve boards list - boards, err := a.app.SearchBoardsForUser(term, userID) + boards, err := a.app.SearchBoardsForUserInTeam(teamID, term, userID) if err != nil { a.errorResponse(w, r.URL.Path, http.StatusInternalServerError, "", err) return @@ -3439,6 +3440,69 @@ func (a *API) handleSearchBoards(w http.ResponseWriter, r *http.Request) { auditRec.Success() } +func (a *API) handleSearchAllBoards(w http.ResponseWriter, r *http.Request) { + // swagger:operation GET /boards/search searchBoards + // + // Returns the boards that match with a search term + // + // --- + // produces: + // - application/json + // parameters: + // - name: q + // in: query + // description: The search term. Must have at least one character + // required: true + // type: string + // security: + // - BearerAuth: [] + // responses: + // '200': + // description: success + // schema: + // type: array + // items: + // "$ref": "#/definitions/Board" + // default: + // description: internal error + // schema: + // "$ref": "#/definitions/ErrorResponse" + + term := r.URL.Query().Get("q") + userID := getUserID(r) + + if len(term) == 0 { + jsonStringResponse(w, http.StatusOK, "[]") + return + } + + auditRec := a.makeAuditRecord(r, "searchAllBoards", audit.Fail) + defer a.audit.LogRecord(audit.LevelRead, auditRec) + + // retrieve boards list + boards, err := a.app.SearchBoardsForUser(term, userID) + if err != nil { + a.errorResponse(w, r.URL.Path, http.StatusInternalServerError, "", err) + return + } + + a.logger.Debug("SearchAllBoards", + mlog.Int("boardsCount", len(boards)), + ) + + data, err := json.Marshal(boards) + if err != nil { + a.errorResponse(w, r.URL.Path, http.StatusInternalServerError, "", err) + return + } + + // response + jsonBytesResponse(w, http.StatusOK, data) + + auditRec.AddMeta("boardsCount", len(boards)) + auditRec.Success() +} + func (a *API) handleGetMembersForBoard(w http.ResponseWriter, r *http.Request) { // swagger:operation GET /boards/{boardID}/members getMembersForBoard // diff --git a/server/app/boards.go b/server/app/boards.go index 33351151b..1e6b34fe0 100644 --- a/server/app/boards.go +++ b/server/app/boards.go @@ -444,6 +444,10 @@ func (a *App) SearchBoardsForUser(term, userID string) ([]*model.Board, error) { return a.store.SearchBoardsForUser(term, userID) } +func (a *App) SearchBoardsForUserInTeam(teamID, term, userID string) ([]*model.Board, error) { + return a.store.SearchBoardsForUserInTeam(teamID, term, userID) +} + func (a *App) UndeleteBoard(boardID string, modifiedBy string) error { boards, err := a.store.GetBoardHistory(boardID, model.QueryBoardHistoryOptions{Limit: 1, Descending: true}) if err != nil { diff --git a/server/integrationtests/board_test.go b/server/integrationtests/board_test.go index 47df7937b..4219edce9 100644 --- a/server/integrationtests/board_test.go +++ b/server/integrationtests/board_test.go @@ -526,7 +526,7 @@ func TestSearchBoards(t *testing.T) { require.NoError(t, err) board5 := &model.Board{ - Title: "public board where user1 is admin, but in other team", + Title: "private board where user1 is admin, but in other team", Type: model.BoardTypePrivate, TeamID: "other-team-id", } @@ -543,25 +543,25 @@ func TestSearchBoards(t *testing.T) { Name: "should return all boards where user1 is member or that are public", Client: th.Client, Term: "board", - ExpectedIDs: []string{rBoard1.ID, rBoard2.ID, rBoard3.ID, board5.ID}, + ExpectedIDs: []string{rBoard1.ID, rBoard2.ID, rBoard3.ID}, }, { Name: "matching a full word", Client: th.Client, Term: "admin", - ExpectedIDs: []string{rBoard1.ID, rBoard3.ID, board5.ID}, + ExpectedIDs: []string{rBoard1.ID, rBoard3.ID}, }, { Name: "matching part of the word", Client: th.Client, Term: "ubli", - ExpectedIDs: []string{rBoard1.ID, rBoard2.ID, board5.ID}, + ExpectedIDs: []string{rBoard1.ID, rBoard2.ID}, }, { Name: "case insensitive", Client: th.Client, Term: "UBLI", - ExpectedIDs: []string{rBoard1.ID, rBoard2.ID, board5.ID}, + ExpectedIDs: []string{rBoard1.ID, rBoard2.ID}, }, { Name: "user2 can only see the public boards, as he's not a member of any", @@ -585,50 +585,6 @@ func TestSearchBoards(t *testing.T) { }) } }) - - t.Run("should only return boards in the teams that the user belongs to", func(t *testing.T) { - th := SetupTestHelperPluginMode(t) - defer th.TearDown() - clients := setupClients(th) - - b1, err := th.Server.App().CreateBoard( - &model.Board{Title: "public board", Type: model.BoardTypeOpen, TeamID: "test-team"}, - userAdmin, - true, - ) - require.NoError(t, err) - - _, err = th.Server.App().CreateBoard( - &model.Board{Title: "private board", Type: model.BoardTypePrivate, TeamID: "test-team"}, - userAdmin, - false, - ) - require.NoError(t, err) - - _, err = th.Server.App().CreateBoard( - &model.Board{Title: "public board in empty team", Type: model.BoardTypeOpen, TeamID: "empty-team"}, - userAdmin, - true, - ) - require.NoError(t, err) - - _, err = th.Server.App().CreateBoard( - &model.Board{Title: "private board in empty team", Type: model.BoardTypePrivate, TeamID: "empty-team"}, - userAdmin, - true, - ) - require.NoError(t, err) - - boards, resp := clients.Viewer.SearchBoardsForTeam(testTeamID, "board") - th.CheckOK(resp) - - boardIDs := []string{} - for _, board := range boards { - boardIDs = append(boardIDs, board.ID) - } - - require.ElementsMatch(t, []string{b1.ID}, boardIDs) - }) } func TestGetBoard(t *testing.T) { diff --git a/server/services/store/mockstore/mockstore.go b/server/services/store/mockstore/mockstore.go index fdcf75fdb..91e40677c 100644 --- a/server/services/store/mockstore/mockstore.go +++ b/server/services/store/mockstore/mockstore.go @@ -1278,6 +1278,21 @@ func (mr *MockStoreMockRecorder) SearchBoardsForUser(arg0, arg1 interface{}) *go return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "SearchBoardsForUser", reflect.TypeOf((*MockStore)(nil).SearchBoardsForUser), arg0, arg1) } +// SearchBoardsForUserInTeam mocks base method. +func (m *MockStore) SearchBoardsForUserInTeam(arg0, arg1, arg2 string) ([]*model.Board, error) { + m.ctrl.T.Helper() + ret := m.ctrl.Call(m, "SearchBoardsForUserInTeam", arg0, arg1, arg2) + ret0, _ := ret[0].([]*model.Board) + ret1, _ := ret[1].(error) + return ret0, ret1 +} + +// SearchBoardsForUserInTeam indicates an expected call of SearchBoardsForUserInTeam. +func (mr *MockStoreMockRecorder) SearchBoardsForUserInTeam(arg0, arg1, arg2 interface{}) *gomock.Call { + mr.mock.ctrl.T.Helper() + return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "SearchBoardsForUserInTeam", reflect.TypeOf((*MockStore)(nil).SearchBoardsForUserInTeam), arg0, arg1, arg2) +} + // SearchUserChannels mocks base method. func (m *MockStore) SearchUserChannels(arg0, arg1, arg2 string) ([]*model0.Channel, error) { m.ctrl.T.Helper() diff --git a/server/services/store/sqlstore/board.go b/server/services/store/sqlstore/board.go index e595232f5..1a88a53b4 100644 --- a/server/services/store/sqlstore/board.go +++ b/server/services/store/sqlstore/board.go @@ -684,6 +684,52 @@ func (s *SQLStore) searchBoardsForUser(db sq.BaseRunner, term, userID string) ([ return s.boardsFromRows(rows) } +// searchBoardsForUserInTeam returns all boards that match with the +// term that are either private and which the user is a member of, or +// they're open, regardless of the user membership. +// Search is case-insensitive. +func (s *SQLStore) searchBoardsForUserInTeam(db sq.BaseRunner, teamID, term, userID string) ([]*model.Board, error) { + query := s.getQueryBuilder(db). + Select(boardFields("b.")...). + Distinct(). + From(s.tablePrefix + "boards as b"). + LeftJoin(s.tablePrefix + "board_members as bm on b.id=bm.board_id"). + Where(sq.Eq{"b.is_template": false}). + Where(sq.Eq{"b.team_id": teamID}). + Where(sq.Or{ + sq.Eq{"b.type": model.BoardTypeOpen}, + sq.And{ + sq.Eq{"b.type": model.BoardTypePrivate}, + sq.Eq{"bm.user_id": userID}, + }, + }) + + if term != "" { + // break search query into space separated words + // and search for each word. + // This should later be upgraded to industrial-strength + // word tokenizer, that uses much more than space + // to break words. + + conditions := sq.Or{} + + for _, word := range strings.Split(strings.TrimSpace(term), " ") { + conditions = append(conditions, sq.Like{"lower(b.title)": "%" + strings.ToLower(word) + "%"}) + } + + query = query.Where(conditions) + } + + rows, err := query.Query() + if err != nil { + s.logger.Error(`searchBoardsForUser ERROR`, mlog.Err(err)) + return nil, err + } + defer s.CloseRows(rows) + + return s.boardsFromRows(rows) +} + func (s *SQLStore) getBoardHistory(db sq.BaseRunner, boardID string, opts model.QueryBoardHistoryOptions) ([]*model.Board, error) { var order string if opts.Descending { diff --git a/server/services/store/sqlstore/migrate.go b/server/services/store/sqlstore/migrate.go index bb037537b..26903b1e5 100644 --- a/server/services/store/sqlstore/migrate.go +++ b/server/services/store/sqlstore/migrate.go @@ -388,6 +388,7 @@ func (s *SQLStore) createTempSchemaTable() error { return nil } + func (s *SQLStore) populateTempSchemaTable(migrations []*models.Migration, legacySchemaVersion uint32) error { query := s.getQueryBuilder(s.db). Insert(s.tablePrefix+tempSchemaMigrationTableName). diff --git a/server/services/store/sqlstore/public_methods.go b/server/services/store/sqlstore/public_methods.go index 20029d2ea..adee06a61 100644 --- a/server/services/store/sqlstore/public_methods.go +++ b/server/services/store/sqlstore/public_methods.go @@ -741,6 +741,11 @@ func (s *SQLStore) SearchBoardsForUser(term string, userID string) ([]*model.Boa } +func (s *SQLStore) SearchBoardsForUserInTeam(teamID string, term string, userID string) ([]*model.Board, error) { + return s.searchBoardsForUserInTeam(s.db, teamID, term, userID) + +} + func (s *SQLStore) SearchUserChannels(teamID string, userID string, query string) ([]*mmModel.Channel, error) { return s.searchUserChannels(s.db, teamID, userID, query) diff --git a/server/services/store/store.go b/server/services/store/store.go index 8cc7494e7..79d2ac969 100644 --- a/server/services/store/store.go +++ b/server/services/store/store.go @@ -101,6 +101,7 @@ type Store interface { GetMembersForBoard(boardID string) ([]*model.BoardMember, error) GetMembersForUser(userID string) ([]*model.BoardMember, error) SearchBoardsForUser(term, userID string) ([]*model.Board, error) + SearchBoardsForUserInTeam(teamID, term, userID string) ([]*model.Board, error) // @withTransaction CreateBoardsAndBlocksWithAdmin(bab *model.BoardsAndBlocks, userID string) (*model.BoardsAndBlocks, []*model.BoardMember, error) diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx index 74c6efc7d..08fa5925a 100644 --- a/webapp/src/app.tsx +++ b/webapp/src/app.tsx @@ -13,7 +13,6 @@ import {getMessages} from './i18n' import {FlashMessages} from './components/flashMessages' import NewVersionBanner from './components/newVersionBanner' import {Utils} from './utils' -import wsClient from './wsclient' import {fetchMe, getMe} from './store/users' import {getLanguage, fetchLanguage} from './store/language' import {useAppSelector, useAppDispatch} from './store/hooks' @@ -37,22 +36,6 @@ const App = (props: Props): JSX.Element => { dispatch(fetchClientConfig()) }, []) - // this is a temporary solution while we're using legacy routes - // for shared boards as a way to disable websockets, and should be - // removed when anonymous plugin routes are implemented. This - // check is used to detect if we're running inside the plugin but - // in a legacy route - useEffect(() => { - if (!Utils.isFocalboardLegacy()) { - wsClient.open() - } - return () => { - if (!Utils.isFocalboardLegacy()) { - wsClient.close() - } - } - }, []) - useEffect(() => { if (me) { TelemetryClient.setUser(me) diff --git a/webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx b/webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx index a40715309..5823e5bec 100644 --- a/webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx +++ b/webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx @@ -55,7 +55,7 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => { return [] } - const items = await octoClient.search(team.id, query) + const items = await octoClient.searchAll(query) const untitledBoardTitle = intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled board'}) return items.map((item) => { const resultTitle = item.title || untitledBoardTitle diff --git a/webapp/src/components/withWebSockets.tsx b/webapp/src/components/withWebSockets.tsx new file mode 100644 index 000000000..1d24c1193 --- /dev/null +++ b/webapp/src/components/withWebSockets.tsx @@ -0,0 +1,79 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React, {useEffect} from 'react' + +import wsClient, {MMWebSocketClient} from '../wsclient' +import {Utils} from '../utils' + +type Props = { + userId?: string, + manifest?: { + id: string, + version: string, + }, + webSocketClient?: MMWebSocketClient, + children: React.ReactNode, +} + +// WithWebSockets component initialises the websocket connection if +// it's not yet running and subscribes to the current team +const WithWebSockets = (props: Props): React.ReactElement => { + const queryString = new URLSearchParams(window.location.search) + + useEffect(() => { + // if the websocket client was already connected, do nothing + if (wsClient.state !== 'init') { + return + } + + // this is a temporary solution to disable websocket + // connections on legacy routes, as there is no such thing as + // an anonymous websocket connection + if (Utils.isFocalboardLegacy()) { + return + } + + if (!Utils.isFocalboardPlugin()) { + const token = localStorage.getItem('focalboardSessionId') || queryString.get('r') || '' + if (token) { + wsClient.authenticate(token) + } + wsClient.open() + return + } + + if (!props.webSocketClient) { + Utils.logWarn('Trying to initialise Boards websocket in plugin mode without base connection. Aborting') + return + } + + if (!props.manifest?.id || !props.manifest?.version) { + Utils.logError('Trying to initialise Boards websocket in plugin mode with an incomplete manifest. Aborting') + return + } + + wsClient.initPlugin(props.manifest?.id, props.manifest?.version, props.webSocketClient) + wsClient.open() + }, [props.webSocketClient]) + + useEffect(() => { + // if we're running on a plugin instance or we don't have a + // user yet, do nothing + if (Utils.isFocalboardPlugin() || !props.userId) { + return + } + + const token = localStorage.getItem('focalboardSessionId') || queryString.get('r') || '' + if (wsClient.token !== token) { + wsClient.authenticate(token) + } + }, [props.userId]) + + return ( + <> + {props.children} + + ) +} + +export default WithWebSockets diff --git a/webapp/src/hooks/websockets.tsx b/webapp/src/hooks/websockets.tsx new file mode 100644 index 000000000..1ccca4808 --- /dev/null +++ b/webapp/src/hooks/websockets.tsx @@ -0,0 +1,21 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import {useEffect} from 'react' + +import wsClient, {WSClient} from '../wsclient' + +export const useWebsockets = (teamId: string, fn: (wsClient: WSClient) => () => void, deps: any[] = []): void => { + useEffect(() => { + if (!teamId) { + return + } + + wsClient.subscribeToTeam(teamId) + const teardown = fn(wsClient) + + return () => { + teardown() + wsClient.unsubscribeToTeam(teamId) + } + }, [teamId, ...deps]) +} diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx index 8e2c8bb32..dd9a31682 100644 --- a/webapp/src/main.tsx +++ b/webapp/src/main.tsx @@ -10,6 +10,10 @@ import {initThemes} from './theme' import {importNativeAppSettings} from './nativeApp' import {UserSettings} from './userSettings' +import {IUser} from './user' +import {getMe} from './store/users' +import {useAppSelector} from './store/hooks' + import '@mattermost/compass-icons/css/compass-icons.css' import './styles/variables.scss' @@ -18,15 +22,27 @@ import './styles/labels.scss' import './styles/_markdown.scss' import store from './store' +import WithWebSockets from './components/withWebSockets' emojiMartStore.setHandlers({getter: UserSettings.getEmojiMartSetting, setter: UserSettings.setEmojiMartSetting}) importNativeAppSettings() initThemes() + +const MainApp = () => { + const me = useAppSelector(getMe) + + return ( + + + + ) +} + ReactDOM.render( ( - + ), document.getElementById('focalboard-app'), diff --git a/webapp/src/octoClient.ts b/webapp/src/octoClient.ts index 4798b5f4d..fb6e4c2f0 100644 --- a/webapp/src/octoClient.ts +++ b/webapp/src/octoClient.ts @@ -773,7 +773,21 @@ class OctoClient { } async search(teamID: string, query: string): Promise> { - const url = `${this.teamPath()}/boards/search?q=${encodeURIComponent(query)}` + const url = `${this.teamPath(teamID)}/boards/search?q=${encodeURIComponent(query)}` + const response = await fetch(this.getBaseURL() + url, { + method: 'GET', + headers: this.headers(), + }) + + if (response.status !== 200) { + return [] + } + + return (await this.getJson(response, [])) as Array + } + + async searchAll(query: string): Promise> { + const url = `/api/v2/boards/search?q=${encodeURIComponent(query)}` const response = await fetch(this.getBaseURL() + url, { method: 'GET', headers: this.headers(), diff --git a/webapp/src/pages/boardPage/boardPage.tsx b/webapp/src/pages/boardPage/boardPage.tsx index 198c68604..90b57a193 100644 --- a/webapp/src/pages/boardPage/boardPage.tsx +++ b/webapp/src/pages/boardPage/boardPage.tsx @@ -1,18 +1,43 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React, {useEffect, useState, useMemo, useCallback} from 'react' +import {batch} from 'react-redux' import {FormattedMessage, useIntl} from 'react-intl' import {useRouteMatch} from 'react-router-dom' import Workspace from '../../components/workspace' import CloudMessage from '../../components/messages/cloudMessage' import octoClient from '../../octoClient' +import {Subscription, WSClient} from '../../wsclient' import {Utils} from '../../utils' -import wsClient from '../../wsclient' -import {getCurrentBoardId, setCurrent as setCurrentBoard, fetchBoardMembers} from '../../store/boards' +import {useWebsockets} from '../../hooks/websockets' +import {IUser} from '../../user' +import {Block} from '../../blocks/block' +import {ContentBlock} from '../../blocks/contentBlock' +import {CommentBlock} from '../../blocks/commentBlock' +import {Board, BoardMember} from '../../blocks/board' +import {BoardView} from '../../blocks/boardView' +import {Card} from '../../blocks/card' +import { + updateBoards, + updateMembersEnsuringBoardsAndUsers, + getCurrentBoardId, + setCurrent as setCurrentBoard, + fetchBoardMembers, +} from '../../store/boards' import {getCurrentViewId, setCurrent as setCurrentView} from '../../store/views' import {initialLoad, initialReadOnlyLoad, loadBoardData} from '../../store/initialLoad' import {useAppSelector, useAppDispatch} from '../../store/hooks' +import {updateViews} from '../../store/views' +import {updateCards} from '../../store/cards' +import {updateComments} from '../../store/comments' +import {updateContents} from '../../store/contents' +import { + fetchUserBlockSubscriptions, + getMe, + followBlock, + unfollowBlock, +} from '../../store/users' import {setGlobalError} from '../../store/globalError' import {UserSettings} from '../../userSettings' @@ -20,8 +45,6 @@ import IconButton from '../../widgets/buttons/iconButton' import CloseIcon from '../../widgets/icons/close' import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient' -import {fetchUserBlockSubscriptions, getMe} from '../../store/users' -import {IUser} from '../../user' import {Constants} from "../../constants" @@ -45,6 +68,7 @@ const BoardPage = (props: Props): JSX.Element => { const match = useRouteMatch<{boardId: string, viewId: string, cardId?: string, teamId?: string}>() const [mobileWarningClosed, setMobileWarningClosed] = useState(UserSettings.mobileWarningClosed) const teamId = match.params.teamId || UserSettings.lastTeamId || Constants.globalTeamId + const viewId = match.params.viewId const me = useAppSelector(getMe) // if we're in a legacy route and not showing a shared board, @@ -68,7 +92,6 @@ const BoardPage = (props: Props): JSX.Element => { useEffect(() => { UserSettings.lastTeamId = teamId octoClient.teamId = teamId - wsClient.teamId = teamId const windowAny = (window as any) if (windowAny.setTeamInSidebar) { windowAny.setTeamInSidebar(teamId) @@ -82,6 +105,52 @@ const BoardPage = (props: Props): JSX.Element => { return initialLoad }, [props.readonly]) + useWebsockets(teamId, (wsClient) => { + const incrementalBlockUpdate = (_: WSClient, blocks: Block[]) => { + const teamBlocks = blocks + + batch(() => { + dispatch(updateViews(teamBlocks.filter((b: Block) => b.type === 'view' || b.deleteAt !== 0) as BoardView[])) + dispatch(updateCards(teamBlocks.filter((b: Block) => b.type === 'card' || b.deleteAt !== 0) as Card[])) + dispatch(updateComments(teamBlocks.filter((b: Block) => b.type === 'comment' || b.deleteAt !== 0) as CommentBlock[])) + dispatch(updateContents(teamBlocks.filter((b: Block) => b.type !== 'card' && b.type !== 'view' && b.type !== 'board' && b.type !== 'comment') as ContentBlock[])) + }) + } + + const incrementalBoardUpdate = (_: WSClient, boards: Board[]) => { + // only takes into account the entities that belong to the team or the user boards + const teamBoards = boards.filter((b: Board) => b.teamId === Constants.globalTeamId || b.teamId === teamId) + dispatch(updateBoards(teamBoards)) + } + + const incrementalBoardMemberUpdate = (_: WSClient, members: BoardMember[]) => { + dispatch(updateMembersEnsuringBoardsAndUsers(members)) + } + + wsClient.addOnChange(incrementalBlockUpdate, 'block') + wsClient.addOnChange(incrementalBoardUpdate, 'board') + wsClient.addOnChange(incrementalBoardMemberUpdate, 'boardMembers') + wsClient.addOnReconnect(() => dispatch(loadAction(match.params.boardId))) + + wsClient.setOnFollowBlock((_: WSClient, subscription: Subscription): void => { + if (subscription.subscriberId === me?.id) { + dispatch(followBlock(subscription)) + } + }) + wsClient.setOnUnfollowBlock((_: WSClient, subscription: Subscription): void => { + if (subscription.subscriberId === me?.id) { + dispatch(unfollowBlock(subscription)) + } + }) + + return () => { + wsClient.removeOnChange(incrementalBlockUpdate, 'block') + wsClient.removeOnChange(incrementalBoardUpdate, 'board') + wsClient.removeOnChange(incrementalBoardMemberUpdate, 'boardMembers') + wsClient.removeOnReconnect(() => dispatch(loadAction(match.params.boardId))) + } + }) + const loadOrJoinBoard = useCallback(async (userId: string, boardTeamId: string, boardId: string) => { // and fetch its data const result: any = await dispatch(loadBoardData(boardId)) @@ -112,16 +181,16 @@ const BoardPage = (props: Props): JSX.Element => { // and set it as most recently viewed board UserSettings.setLastBoardID(teamId, match.params.boardId) - if (match.params.viewId && match.params.viewId !== Constants.globalTeamId) { - dispatch(setCurrentView(match.params.viewId)) - UserSettings.setLastViewId(match.params.boardId, match.params.viewId) + if (viewId && viewId !== Constants.globalTeamId) { + dispatch(setCurrentView(viewId)) + UserSettings.setLastViewId(match.params.boardId, viewId) } if (!props.readonly && me) { loadOrJoinBoard(me.id, teamId, match.params.boardId) } } - }, [teamId, match.params.boardId, match.params.viewId, me?.id]) + }, [teamId, match.params.boardId, viewId, me?.id]) if (props.readonly) { useEffect(() => { @@ -137,12 +206,7 @@ const BoardPage = (props: Props): JSX.Element => { - + {!mobileWarningClosed && @@ -170,7 +234,6 @@ const BoardPage = (props: Props): JSX.Element => {
} { - // Don't display Templates page // if readonly mode and no board defined. (!props.readonly || activeBoardId !== undefined) && diff --git a/webapp/src/pages/boardPage/websocketConnection.tsx b/webapp/src/pages/boardPage/websocketConnection.tsx index b203d9f3d..66ad1537b 100644 --- a/webapp/src/pages/boardPage/websocketConnection.tsx +++ b/webapp/src/pages/boardPage/websocketConnection.tsx @@ -1,90 +1,26 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useEffect, useState, useMemo} from 'react' -import {batch} from 'react-redux' -import {useLocation} from 'react-router-dom' +import React, {useEffect, useState} from 'react' import {FormattedMessage} from 'react-intl' -import {Block} from '../../blocks/block' -import {ContentBlock} from '../../blocks/contentBlock' -import {CommentBlock} from '../../blocks/commentBlock' -import {Board, BoardMember} from '../../blocks/board' -import {Card} from '../../blocks/card' -import {BoardView} from '../../blocks/boardView' -import wsClient, {Subscription, WSClient} from '../../wsclient' -import './boardPage.scss' -import {updateBoards, updateMembersEnsuringBoardsAndUsers} from '../../store/boards' -import {updateViews} from '../../store/views' -import {updateCards} from '../../store/cards' -import {updateContents} from '../../store/contents' -import {updateComments} from '../../store/comments' -import {useAppSelector, useAppDispatch} from '../../store/hooks' +import wsClient, {WSClient} from '../../wsclient' +import {useAppSelector} from '../../store/hooks' -import {followBlock, getMe, unfollowBlock} from '../../store/users' +import {getMe} from '../../store/users' import {IUser} from '../../user' -import {Constants} from "../../constants" const websocketTimeoutForBanner = 5000 -type Props = { - readonly: boolean - teamId: string - boardId: string - loadAction: (boardID: string) => any -} - -const WebsocketConnection = (props: Props) => { - const dispatch = useAppDispatch() +// WebsocketConnection component checks the websockets client for +// state changes and if the connection is closed, shows a banner +// indicating that there has been a connection error +const WebsocketConnection = () => { const [websocketClosed, setWebsocketClosed] = useState(false) - const queryString = new URLSearchParams(useLocation().search) const me = useAppSelector(getMe) - const token = useMemo(() => { - const storedToken = localStorage.getItem('focalboardSessionId') || '' - if (props.readonly) { - return storedToken || queryString.get('r') || '' - } - return storedToken - }, [props.readonly]) - useEffect(() => { - let subscribedToTeam = false - if (wsClient.state === 'open') { - wsClient.authenticate(props.teamId || Constants.globalTeamId, token) - wsClient.subscribeToTeam(props.teamId || Constants.globalTeamId) - subscribedToTeam = true - } - - const incrementalBlockUpdate = (_: WSClient, blocks: Block[]) => { - const teamBlocks = blocks - - batch(() => { - dispatch(updateViews(teamBlocks.filter((b: Block) => b.type === 'view' || b.deleteAt !== 0) as BoardView[])) - dispatch(updateCards(teamBlocks.filter((b: Block) => b.type === 'card' || b.deleteAt !== 0) as Card[])) - dispatch(updateComments(teamBlocks.filter((b: Block) => b.type === 'comment' || b.deleteAt !== 0) as CommentBlock[])) - dispatch(updateContents(teamBlocks.filter((b: Block) => b.type !== 'card' && b.type !== 'view' && b.type !== 'board' && b.type !== 'comment') as ContentBlock[])) - }) - } - - const incrementalBoardUpdate = (_: WSClient, boards: Board[]) => { - // only takes into account the entities that belong to the team or the user boards - const teamBoards = boards.filter((b: Board) => b.teamId === Constants.globalTeamId || b.teamId === props.teamId) - dispatch(updateBoards(teamBoards)) - } - - const incrementalBoardMemberUpdate = (_: WSClient, members: BoardMember[]) => { - dispatch(updateMembersEnsuringBoardsAndUsers(members)) - } - let timeout: ReturnType const updateWebsocketState = (_: WSClient, newState: 'init'|'open'|'close'): void => { - if (newState === 'open') { - const newToken = localStorage.getItem('focalboardSessionId') || '' - wsClient.authenticate(props.teamId || Constants.globalTeamId, newToken) - wsClient.subscribeToTeam(props.teamId || Constants.globalTeamId) - subscribedToTeam = true - } - if (timeout) { clearTimeout(timeout) } @@ -92,42 +28,21 @@ const WebsocketConnection = (props: Props) => { if (newState === 'close') { timeout = setTimeout(() => { setWebsocketClosed(true) - subscribedToTeam = false }, websocketTimeoutForBanner) } else { setWebsocketClosed(false) } } - wsClient.addOnChange(incrementalBlockUpdate, 'block') - wsClient.addOnChange(incrementalBoardUpdate, 'board') - wsClient.addOnChange(incrementalBoardMemberUpdate, 'boardMembers') - wsClient.addOnReconnect(() => dispatch(props.loadAction(props.boardId))) wsClient.addOnStateChange(updateWebsocketState) - wsClient.setOnFollowBlock((_: WSClient, subscription: Subscription): void => { - if (subscription.subscriberId === me?.id) { - dispatch(followBlock(subscription)) - } - }) - wsClient.setOnUnfollowBlock((_: WSClient, subscription: Subscription): void => { - if (subscription.subscriberId === me?.id) { - dispatch(unfollowBlock(subscription)) - } - }) + return () => { if (timeout) { clearTimeout(timeout) } - if (subscribedToTeam) { - // wsClient.unsubscribeToTeam(props.teamId || '0') - } - wsClient.removeOnChange(incrementalBlockUpdate, 'block') - wsClient.removeOnChange(incrementalBoardUpdate, 'board') - wsClient.removeOnChange(incrementalBoardMemberUpdate, 'boardMembers') - wsClient.removeOnReconnect(() => dispatch(props.loadAction(props.boardId))) wsClient.removeOnStateChange(updateWebsocketState) } - }, [me?.id, props.teamId, props.readonly, props.boardId, props.loadAction]) + }, [me?.id]) if (websocketClosed) { return ( diff --git a/webapp/src/store/boards.ts b/webapp/src/store/boards.ts index 228132df9..95ad29d3b 100644 --- a/webapp/src/store/boards.ts +++ b/webapp/src/store/boards.ts @@ -7,7 +7,7 @@ import {default as client} from '../octoClient' import {Board, BoardMember} from '../blocks/board' import {IUser} from '../user' -import {initialLoad, initialReadOnlyLoad, loadBoardData} from './initialLoad' +import {initialLoad, initialReadOnlyLoad, loadBoardData, loadBoards} from './initialLoad' import {addBoardUsers, removeBoardUsersById, setBoardUsers} from './users' @@ -95,7 +95,7 @@ export const updateMembersEnsuringBoardsAndUsers = createAsyncThunk( }, ) -export const updateMembers = (state: BoardsState, action: PayloadAction) => { +export const updateMembersHandler = (state: BoardsState, action: PayloadAction) => { if (action.payload.length === 0) { return } @@ -140,7 +140,7 @@ const boardsSlice = createSlice({ } } }, - updateMembers, + updateMembers: updateMembersHandler, }, extraReducers: (builder) => { @@ -178,6 +178,12 @@ const boardsSlice = createSlice({ state.myBoardMemberships[boardMember.boardId] = boardMember }) }) + builder.addCase(loadBoards.fulfilled, (state, action) => { + state.boards = {} + action.payload.boards.forEach((board) => { + state.boards[board.id] = board + }) + }) builder.addCase(fetchBoardMembers.fulfilled, (state, action) => { if (action.payload.length === 0) { return @@ -192,11 +198,11 @@ const boardsSlice = createSlice({ }, {}) state.membersInBoards[boardId] = boardMembersMap }) - builder.addCase(updateMembersEnsuringBoardsAndUsers.fulfilled, updateMembers) + builder.addCase(updateMembersEnsuringBoardsAndUsers.fulfilled, updateMembersHandler) }, }) -export const {updateBoards, setCurrent, setLinkToChannel} = boardsSlice.actions +export const {updateBoards, setCurrent, setLinkToChannel, updateMembers} = boardsSlice.actions export const {reducer} = boardsSlice export const getBoards = (state: RootState): {[key: string]: Board} => state.boards?.boards || {} diff --git a/webapp/src/store/initialLoad.ts b/webapp/src/store/initialLoad.ts index af9348dc4..99d5ef871 100644 --- a/webapp/src/store/initialLoad.ts +++ b/webapp/src/store/initialLoad.ts @@ -69,6 +69,16 @@ export const loadBoardData = createAsyncThunk( }, ) +export const loadBoards = createAsyncThunk( + 'loadBoards', + async () => { + const boards = await client.getBoards() + return { + boards, + } + }, +) + export const getUserBlockSubscriptions = (state: RootState): Array => state.users.blockSubscriptions export const getUserBlockSubscriptionList = createSelector( diff --git a/webapp/src/store/teams.ts b/webapp/src/store/teams.ts index 3d2d781c8..5a5ae4b80 100644 --- a/webapp/src/store/teams.ts +++ b/webapp/src/store/teams.ts @@ -35,6 +35,7 @@ export const refreshCurrentTeam = createAsyncThunk( ) type TeamState = { + currentId: string current: Team | null allTeams: Array } @@ -43,11 +44,13 @@ const teamSlice = createSlice({ name: 'teams', initialState: { current: null, + currentId: '', allTeams: [], } as TeamState, reducers: { setTeam: (state, action: PayloadAction) => { const teamID = action.payload + state.currentId = teamID const team = state.allTeams.find((t) => t.id === teamID) if (!team) { Utils.log(`Unable to find team in store. TeamID: ${teamID}`) @@ -80,6 +83,7 @@ const teamSlice = createSlice({ export const {setTeam} = teamSlice.actions export const {reducer} = teamSlice +export const getCurrentTeamId = (state: RootState): string => state.teams.currentId export const getCurrentTeam = (state: RootState): Team|null => state.teams.current export const getFirstTeam = (state: RootState): Team|null => state.teams.allTeams[0] export const getAllTeams = (state: RootState): Array => state.teams.allTeams diff --git a/webapp/src/wsclient.ts b/webapp/src/wsclient.ts index e92c3571c..1dede881e 100644 --- a/webapp/src/wsclient.ts +++ b/webapp/src/wsclient.ts @@ -97,10 +97,15 @@ type ChangeHandlers = { BoardMember: OnChangeHandler[] } +type Subscriptions = { + Teams: Record +} + class WSClient { ws: WebSocket|null = null client: MMWebSocketClient|null = null onPluginReconnect: null|(() => void) = null + token = '' pluginId = '' pluginVersion = '' teamId = '' @@ -121,6 +126,7 @@ class WSClient { private updatedData: UpdatedData = {Blocks: [], Categories: [], BoardCategories: [], Boards: [], BoardMembers: []} private updateTimeout?: NodeJS.Timeout private errorPollId?: NodeJS.Timeout + private subscriptions: Subscriptions = {Teams: {}} private logged = false @@ -154,6 +160,17 @@ class WSClient { Utils.log(`WSClient initialised for plugin id "${pluginId}"`) } + resetSubscriptions() { + this.subscriptions = {Teams: {}} as Subscriptions + } + + // this function sends the necessary commands for the connection + // to subscribe to all registered subscriptions + subscribe() { + Utils.log('Sending commands for the registered subscriptions') + Object.keys(this.subscriptions.Teams).forEach(teamId => this.sendSubscribeToTeamCommand(teamId)) + } + sendCommand(command: WSCommand): void { if (this.client !== null) { const {action, ...data} = command @@ -164,6 +181,30 @@ class WSClient { this.ws?.send(JSON.stringify(command)) } + sendAuthenticationCommand(token: string): void { + const command = { action: ACTION_AUTH, token } + + this.sendCommand(command) + } + + sendSubscribeToTeamCommand(teamId: string): void { + const command: WSCommand = { + action: ACTION_SUBSCRIBE_TEAM, + teamId, + } + + this.sendCommand(command) + } + + sendUnsubscribeToTeamCommand(teamId: string): void { + const command: WSCommand = { + action: ACTION_UNSUBSCRIBE_TEAM, + teamId, + } + + this.sendCommand(command) + } + addOnChange(handler: OnChangeHandler, type: ChangeHandlerType): void { switch (type) { case 'block': @@ -275,6 +316,10 @@ class WSClient { const onConnect = () => { Utils.log('WSClient in plugin mode, reusing Mattermost WS connection') + // if there are any subscriptions set by the + // components, send their subscribe messages + this.subscribe() + for (const handler of this.onStateChange) { handler(this, 'open') } @@ -341,6 +386,16 @@ class WSClient { ws.onopen = () => { Utils.log('WSClient webSocket opened.') this.state = 'open' + + // if has a token defined when connecting, authenticate + if (this.token) { + this.sendAuthenticationCommand(this.token) + } + + // if there are any subscriptions set by the components, + // send their subscribe messages + this.subscribe() + for (const handler of this.onStateChange) { handler(this, 'open') } @@ -363,6 +418,8 @@ class WSClient { } this.state = 'close' setTimeout(() => { + // ToDo: assert that this actually runs the onopen + // contents (auth + this.subscribe()) this.open() for (const handler of this.onReconnect) { handler(this) @@ -498,22 +555,55 @@ class WSClient { } } - authenticate(teamId: string, token: string): void { - if (!this.hasConn()) { - Utils.assertFailure('WSClient.addBlocks: ws is not open') - return - } - + authenticate(token: string): void { if (!token) { + Utils.assertFailure('WSClient trying to authenticate without a token') return } - const command = { - action: ACTION_AUTH, - token, - teamId, + + if (this.hasConn()) { + this.sendAuthenticationCommand(token) } - this.sendCommand(command) + this.token = token + } + + subscribeToTeam(teamId: string): void { + if (!this.subscriptions.Teams[teamId]) { + Utils.log(`First component subscribing to team ${teamId}`) + // only send command if the WS connection has already been + // stablished. If not, the connect or reconnect functions + // will do + if (this.hasConn()) { + this.sendSubscribeToTeamCommand(teamId) + } + + this.teamId = teamId + this.subscriptions.Teams[teamId] = 1 + return + } + + this.subscriptions.Teams[teamId] += 1 + } + + unsubscribeToTeam(teamId: string): void { + if (!this.subscriptions.Teams[teamId]) { + Utils.logError('Component trying to unsubscribe to a team when no subscriptions are registered. Doing nothing') + return + } + + this.subscriptions.Teams[teamId] -= 1 + if (this.subscriptions.Teams[teamId] === 0) { + Utils.log(`Last subscription to team ${teamId} being removed`) + if (this.hasConn()) { + this.sendUnsubscribeToTeamCommand(teamId) + } + + if (teamId == this.teamId) { + this.teamId = '' + } + delete this.subscriptions.Teams[teamId] + } } subscribeToBlocks(teamId: string, blockIds: string[], readToken = ''): void { @@ -532,34 +622,6 @@ class WSClient { this.sendCommand(command) } - unsubscribeToTeam(teamId: string): void { - if (!this.hasConn()) { - Utils.assertFailure('WSClient.subscribeToTeam: ws is not open') - return - } - - const command: WSCommand = { - action: ACTION_UNSUBSCRIBE_TEAM, - teamId, - } - - this.sendCommand(command) - } - - subscribeToTeam(teamId: string): void { - if (!this.hasConn()) { - Utils.assertFailure('WSClient.subscribeToTeam: ws is not open') - return - } - - const command: WSCommand = { - action: ACTION_SUBSCRIBE_TEAM, - teamId, - } - - this.sendCommand(command) - } - unsubscribeFromBlocks(teamId: string, blockIds: string[], readToken = ''): void { if (!this.hasConn()) { Utils.assertFailure('WSClient.removeBlocks: ws is not open') @@ -609,21 +671,6 @@ class WSClient { }, this.notificationDelay) } - // private queueUpdateBoardNotification(board: Board) { - // this.updatedBoards = this.updatedBoards.filter((o) => o.id !== board.id) // Remove existing queued update - // // ToDo: hydrate required? - // // this.updatedBoards.push(OctoUtils.hydrateBoard(board)) - // this.updatedBoards.push(board) - // if (this.updateTimeout) { - // clearTimeout(this.updateTimeout) - // this.updateTimeout = undefined - // } - // - // this.updateTimeout = setTimeout(() => { - // this.flushUpdateNotifications() - // }, this.notificationDelay) - // } - private logUpdateNotification() { for (const block of this.updatedData.Blocks) { Utils.log(`WSClient flush update block: ${block.id}`)