Fixed the new button error in kanban (#3696)

* Fixed the new button error in kanban

* Test cases fixed

* Updated test

* Update tests

* Code update for cypress test

* Update acrding review changes

* Updated dependency of the useEffect

* Code update

* Changed the condition in useEffect

* Revert "Update acrding review changes"

This reverts commit 207f95fcda.

* Revert Updated dependency of the useEffect

* Replaced currentView by activeView

webapp/src/components/boardTemplateSelector/boardTemplateSelectorPreview.test.tsx

@@ -9,6 +9,8 @@ import {Provider as ReduxProvider} from 'react-redux'
 import {IPropertyTemplate} from '../../blocks/board'
 import {mockDOM, mockStateStore, wrapDNDIntl} from '../../testUtils'
 
+import {TestBlockFactory} from '../../test/testBlockFactory'
+
 import BoardTemplateSelectorPreview from './boardTemplateSelectorPreview'
 
 jest.mock('react-router-dom', () => {
@@ -94,14 +96,15 @@ describe('components/boardTemplateSelector/boardTemplateSelectorPreview', () =>
     beforeAll(mockDOM)
     beforeEach(() => {
         jest.clearAllMocks()
-        const board = {
-            id: '2',
-            title: boardTitle,
-            teamId: 'team-id',
-            icon: '🚴🏻‍♂️',
-            cardProperties: [groupProperty],
-            dateDisplayPropertyId: 'id-6',
-        }
+
+        const board = TestBlockFactory.createBoard()
+        board.id = '2'
+        board.title = boardTitle
+        board.teamId = 'team-id'
+        board.icon =  '🚴🏻‍♂️'
+        board.cardProperties = [groupProperty]
+        const activeView = TestBlockFactory.createBoardView(board)
+        activeView.fields.defaultTemplateId = 'defaultTemplateId'
 
         const state = {
             searchText: {value: ''},
@@ -120,7 +123,12 @@ describe('components/boardTemplateSelector/boardTemplateSelectorPreview', () =>
                 },
                 current: 'card_id_1',
             },
-            views: {views: []},
+            views: {
+                views: {
+                    boardView: activeView
+                },
+                current: 'boardView'
+            },
             contents: {contents: []},
             comments: {comments: []},
             teams: {

webapp/src/components/kanban/kanban.test.tsx

@@ -75,6 +75,7 @@ describe('src/component/kanban/kanban', () => {
         },
         cards: {
             cards: [card1, card2, card3],
+            templates: [],
         },
         teams: {
             current: {id: 'team-id'},
@@ -542,6 +543,7 @@ describe('src/component/kanban/kanban', () => {
     card2.fields.properties = {id: 'property_value_id_1'}
     const card3 = TestBlockFactory.createCard(board)
     card3.id = 'id3'
+    card3.boardId = 'board_id_1'
     card3.fields.properties = {id: 'property_value_id_2'}
     activeView.fields.kanbanCalculations = {
         id1: {
@@ -550,7 +552,7 @@ describe('src/component/kanban/kanban', () => {
 
         },
     }
-    activeView.fields.defaultTemplateId = "defaultTemplateId"
+    activeView.fields.defaultTemplateId = card3.id
     const optionQ1:IPropertyOption = {
         color: 'propColorOrange',
         id: 'property_value_id_1',
@@ -582,7 +584,8 @@ describe('src/component/kanban/kanban', () => {
             },
         },
         cards: {
-            cards: [card1, card2, card3],
+            cards: [card1, card2],
+            templates: [card3],
         },
         teams: {
             current: {id: 'team-id'},

webapp/src/components/kanban/kanban.tsx

@@ -1,13 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 /* eslint-disable max-lines */
-import React, {useCallback, useState, useMemo} from 'react'
+import React, { useCallback, useState, useMemo, useEffect } from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import withScrolling, {createHorizontalStrength, createVerticalStrength} from 'react-dnd-scrolling'
 
 import {useAppSelector} from '../../store/hooks'
-import {getCurrentView} from '../../store/views'
 
 import {Position} from '../cardDetail/cardDetailContents'
 
@@ -21,6 +20,7 @@ import {Constants, Permission} from '../../constants'
 
 import {dragAndDropRearrange} from '../cardDetail/cardDetailContentsUtility'
 
+import {getCurrentBoardTemplates} from '../../store/cards'
 import BoardPermissionGate from '../permissions/boardPermissionGate'
 import HiddenCardCount from '../../components/hiddenCardCount/hiddenCardCount'
 
@@ -54,8 +54,17 @@ const hStrength = createHorizontalStrength(Utils.isMobile() ? 60 : 250)
 const vStrength = createVerticalStrength(Utils.isMobile() ? 60 : 250)
 
 const Kanban = (props: Props) => {
-    const currentView = useAppSelector(getCurrentView)
+    const cardTemplates: Card[] = useAppSelector(getCurrentBoardTemplates)
     const {board, activeView, cards, groupByProperty, visibleGroups, hiddenGroups, hiddenCardsCount} = props
+    const [defaultTemplateID, setDefaultTemplateID] = useState<string>()
+
+    useEffect(() => {
+        if(activeView.fields.defaultTemplateId) {
+            if(cardTemplates.find(ct => ct.id === activeView.fields.defaultTemplateId)) {
+                setDefaultTemplateID(activeView.fields.defaultTemplateId)
+            }
+        }
+    }, [activeView.fields.defaultTemplateId])
 
     if (!groupByProperty) {
         Utils.assertFailure('Board views must have groupByProperty set')
@@ -297,8 +306,8 @@ const Kanban = (props: Props) => {
                             <BoardPermissionGate permissions={[Permission.ManageBoardCards]}>
                                 <Button
                                     onClick={() => {
-                                        if(currentView.fields.defaultTemplateId) {
-                                            props.addCardFromTemplate(currentView.fields.defaultTemplateId, group.option.id)
+                                        if(defaultTemplateID) {
+                                            props.addCardFromTemplate(defaultTemplateID, group.option.id)
                                         } else {
                                             props.addCard(group.option.id, true)
                                         }