fix issue with card id being valid block but not a card (#4729) (#4736)

(cherry picked from commit 0af70a0a4f)

mattermost-plugin/webapp/src/components/boardsUnfurl/__snapshots__/boardsUnfurl.test.tsx.snap

@@ -96,3 +96,9 @@ exports[`components/boardsUnfurl/BoardsUnfurl renders when limited 1`] = `
   </a>
 </div>
 `;
+
+exports[`components/boardsUnfurl/BoardsUnfurl test invalid card, invalid block 1`] = `<div />`;
+
+exports[`components/boardsUnfurl/BoardsUnfurl test invalid card, valid block 1`] = `<div />`;
+
+exports[`components/boardsUnfurl/BoardsUnfurl test no card 1`] = `<div />`;

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

@@ -10,6 +10,8 @@ import {Provider as ReduxProvider} from 'react-redux'
 
 import {mocked} from 'jest-mock'
 
+import {createBoardView} from '../../../../../webapp/src/blocks/boardView'
+
 import {Utils} from '../../../../../webapp/src/utils'
 import {createCard} from '../../../../../webapp/src/blocks/card'
 import {createBoard} from '../../../../../webapp/src/blocks/board'
@@ -116,5 +118,118 @@ describe('components/boardsUnfurl/BoardsUnfurl', () => {
 
         expect(container).toMatchSnapshot()
     })
+
+    it('test no card', async () => {
+        const mockStore = configureStore([])
+        const store = mockStore({
+            language: {
+                value: 'en',
+            },
+            teams: {
+                allTeams: [team],
+                current: team,
+            },
+        })
+
+        const board = {...createBoard(), title: 'test board'}
+        // mockedOctoClient.getBoard.mockResolvedValueOnce(board)
+
+        const component = (
+            <ReduxProvider store={store}>
+                {wrapIntl(
+                    <BoardsUnfurl
+                        embed={{data: JSON.stringify({workspaceID: 'foo', cardID: '', boardID: board.id, readToken: 'abc', originalPath: '/test'})}}
+                    />,
+                )}
+            </ReduxProvider>
+        )
+
+        let container: Element | DocumentFragment | null = null
+
+        await act(async () => {
+            const result = render(component)
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+    })
+
+    it('test invalid card, valid block', async () => {
+        const mockStore = configureStore([])
+        const store = mockStore({
+            language: {
+                value: 'en',
+            },
+            teams: {
+                allTeams: [team],
+                current: team,
+            },
+        })
+
+        const cards = [{...createBoardView(), title: 'test view', updateAt: 12345}]
+        const board = {...createBoard(), title: 'test board'}
+
+        mockedOctoClient.getBlocksWithBlockID.mockResolvedValueOnce(cards)
+        mockedOctoClient.getBoard.mockResolvedValueOnce(board)
+
+        const component = (
+            <ReduxProvider store={store}>
+                {wrapIntl(
+                    <BoardsUnfurl
+                        embed={{data: JSON.stringify({workspaceID: 'foo', cardID: cards[0].id, boardID: board.id, readToken: 'abc', originalPath: '/test'})}}
+                    />,
+                )}
+            </ReduxProvider>
+        )
+
+        let container: Element | DocumentFragment | null = null
+
+        await act(async () => {
+            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()
+    })
+
+    it('test invalid card, invalid block', async () => {
+        const mockStore = configureStore([])
+        const store = mockStore({
+            language: {
+                value: 'en',
+            },
+            teams: {
+                allTeams: [team],
+                current: team,
+            },
+        })
+
+        const board = {...createBoard(), title: 'test board'}
+
+        mockedOctoClient.getBlocksWithBlockID.mockResolvedValueOnce([])
+        mockedOctoClient.getBoard.mockResolvedValueOnce(board)
+
+        const component = (
+            <ReduxProvider store={store}>
+                {wrapIntl(
+                    <BoardsUnfurl
+                        embed={{data: JSON.stringify({workspaceID: 'foo', cardID: 'invalidCard', boardID: board.id, readToken: 'abc', originalPath: '/test'})}}
+                    />,
+                )}
+            </ReduxProvider>
+        )
+
+        let container: Element | DocumentFragment | null = null
+
+        await act(async () => {
+            const result = render(component)
+            container = result.container
+        })
+        expect(mockedOctoClient.getBoard).toBeCalledWith(board.id)
+        expect(mockedOctoClient.getBlocksWithBlockID).toBeCalledWith('invalidCard', board.id, 'abc')
+
+        expect(container).toMatchSnapshot()
+    })
 })
 

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

@@ -84,7 +84,7 @@ export const BoardsUnfurl = (props: Props): JSX.Element => {
                 ],
             )
             const [firstCard] = cards as Card[]
-            if (!firstCard || !fetchedBoard) {
+            if (!firstCard || !fetchedBoard || firstCard.type !== 'card') {
                 setLoading(false)
                 return null
             }
@@ -116,7 +116,7 @@ export const BoardsUnfurl = (props: Props): JSX.Element => {
     useWebsockets(currentTeamId, (wsClient: WSClient) => {
         const onChangeHandler = (_: WSClient, blocks: Block[]): void => {
             const cardBlock: Block|undefined = blocks.find(b => b.id === cardID)
-            if (cardBlock && !cardBlock.deleteAt) {
+            if (cardBlock && !cardBlock.deleteAt && cardBlock.type === 'card') {
                 setCard(cardBlock as Card)
             }