MM-46392 - load boards memberships on rhs component mount (#4055)

* MM-46392 - load boards memberships on rhs component mount

* prevent blink between zero state and list state

* fix failing snapshots

* add pr feedback; change testing component state change approach using act; wrap async request in promiseAll instead of isolated awaits

mattermost-plugin/webapp/src/components/rhsChannelBoards.test.tsx

@@ -3,12 +3,12 @@
 
 import React from 'react'
 import {Provider as ReduxProvider} from 'react-redux'
-import {render} from '@testing-library/react'
+import {act, 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 {BoardMember, createBoard} from '../../../../webapp/src/blocks/board'
 import {mockStateStore, wrapIntl} from '../../../../webapp/src/testUtils'
 
 import RHSChannelBoards from './rhsChannelBoards'
@@ -26,6 +26,10 @@ describe('components/rhsChannelBoards', () => {
     board1.channelId = 'channel-id'
     board3.channelId = 'channel-id'
 
+    const boardMembership1 = {boardId: board1.id, userId: 'user-id'} as BoardMember
+    const boardMembership2 = {boardId: board2.id, userId: 'user-id'} as BoardMember
+    const boardMembership3 = {boardId: board3.id, userId: 'user-id'} as BoardMember
+    
     const team = {
         id: 'team-id',
         name: 'team',
@@ -52,9 +56,9 @@ describe('components/rhsChannelBoards', () => {
                 [board3.id]: board3,
             },
             myBoardMemberships: {
-                [board1.id]: {boardId: board1.id, userId: 'user-id'},
-                [board2.id]: {boardId: board2.id, userId: 'user-id'},
-                [board3.id]: {boardId: board3.id, userId: 'user-id'},
+                [board1.id]: boardMembership1,
+                [board2.id]: boardMembership2,
+                [board3.id]: boardMembership3,
             },
         },
         channels: {
@@ -69,27 +73,40 @@ describe('components/rhsChannelBoards', () => {
 
     beforeEach(() => {
         mockedOctoClient.getBoards.mockResolvedValue([board1, board2, board3])
+        mockedOctoClient.getMyBoardMemberships.mockResolvedValue([boardMembership1, boardMembership2, boardMembership3])
+
         jest.clearAllMocks()
     })
 
     it('renders the RHS for channel boards', async () => {
         const store = mockStateStore([thunk], state)
-        const {container} = render(wrapIntl(
-            <ReduxProvider store={store}>
-                <RHSChannelBoards/>
-            </ReduxProvider>
-        ))
+        let container: Element | DocumentFragment | null = null
+        await act(async () => {
+            const result = render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <RHSChannelBoards/>
+                </ReduxProvider>
+            ))
+            container = result.container
+        })
+
         expect(container).toMatchSnapshot()
     })
 
     it('renders with empty list of boards', async () => {
         const localState = {...state, boards: {...state.boards, boards: {}}}
         const store = mockStateStore([thunk], localState)
-        const {container} = render(wrapIntl(
-            <ReduxProvider store={store}>
-                <RHSChannelBoards/>
-            </ReduxProvider>
-        ))
+
+        let container: Element | DocumentFragment | null = null
+        await act(async () => {
+            const result = render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <RHSChannelBoards/>
+                </ReduxProvider>
+            ))
+            container = result.container
+        })
+
         expect(container).toMatchSnapshot()
     })
 })

mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx

@@ -12,7 +12,7 @@ import {Board, BoardMember} from '../../../../webapp/src/blocks/board'
 import {getCurrentTeamId} from '../../../../webapp/src/store/teams'
 import {IUser} from '../../../../webapp/src/user'
 import {getMe, fetchMe} from '../../../../webapp/src/store/users'
-import {loadBoards} from '../../../../webapp/src/store/initialLoad'
+import {loadBoards, loadMyBoardsMemberships} from '../../../../webapp/src/store/initialLoad'
 import {getCurrentChannel} from '../../../../webapp/src/store/channels'
 import {
     getMySortedBoards,
@@ -41,10 +41,14 @@ const RHSChannelBoards = () => {
     const me = useAppSelector<IUser|null>(getMe)
     const dispatch = useAppDispatch()
     const intl = useIntl()
+    const [dataLoaded, setDataLoaded] = React.useState(false)
 
     useEffect(() => {
-        dispatch(loadBoards())
-        dispatch(fetchMe())
+        Promise.all([
+            dispatch(loadBoards()),
+            dispatch(loadMyBoardsMemberships()),
+            dispatch(fetchMe()),
+        ]).then(() => setDataLoaded(true))
     }, [])
 
     useWebsockets(teamId || '', (wsClient: WSClient) => {
@@ -78,6 +82,10 @@ const RHSChannelBoards = () => {
     if (!currentChannel) {
         return null
     }
+    if (!dataLoaded) {
+        return null
+    }
+
     const channelBoards = boards.filter((b) => b.channelId === currentChannel.id)
 
     let channelName = currentChannel.display_name

webapp/src/store/boards.ts

@@ -7,7 +7,13 @@ import {default as client} from '../octoClient'
 import {Board, BoardMember} from '../blocks/board'
 import {IUser} from '../user'
 
-import {initialLoad, initialReadOnlyLoad, loadBoardData, loadBoards} from './initialLoad'
+import {
+    initialLoad,
+    initialReadOnlyLoad,
+    loadBoardData,
+    loadBoards,
+    loadMyBoardsMemberships,
+} from './initialLoad'
 
 import {addBoardUsers, removeBoardUsersById, setBoardUsers} from './users'
 
@@ -191,6 +197,12 @@ const boardsSlice = createSlice({
                 state.boards[board.id] = board
             })
         })
+        builder.addCase(loadMyBoardsMemberships.fulfilled, (state, action) => {
+            state.myBoardMemberships = {}
+            action.payload.boardsMemberships.forEach((boardMember) => {
+                state.myBoardMemberships[boardMember.boardId] = boardMember
+            })
+        })
         builder.addCase(fetchBoardMembers.fulfilled, (state, action) => {
             if (action.payload.length === 0) {
                 return

webapp/src/store/initialLoad.ts

@@ -81,6 +81,16 @@ export const loadBoards = createAsyncThunk(
     },
 )
 
+export const loadMyBoardsMemberships = createAsyncThunk(
+    'loadMyBoardsMemberships',
+    async () => {
+        const boardsMemberships = await client.getMyBoardMemberships()
+        return {
+            boardsMemberships,
+        }
+    },
+)
+
 export const getUserBlockSubscriptions = (state: RootState): Subscription[] => state.users.blockSubscriptions
 
 export const getUserBlockSubscriptionList = createSelector(