WIP

webapp/i18n/en.json

@@ -186,6 +186,7 @@
   "Sidebar.changePassword": "Change password",
   "Sidebar.delete-board": "Delete board",
   "Sidebar.duplicate-board": "Duplicate board",
+  "Sidebar.template-from-board": "New template from board",
   "Sidebar.export-archive": "Export archive",
   "Sidebar.import": "Import",
   "Sidebar.import-archive": "Import archive",

webapp/src/components/boardTemplateSelector/boardTemplateSelector.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 import React, {useEffect, useState, useCallback, useMemo} from 'react'
 import {FormattedMessage, useIntl} from 'react-intl'
-import {generatePath, useHistory, useRouteMatch} from 'react-router-dom'
+import {useHistory, useRouteMatch} from 'react-router-dom'
 
 import {Board} from '../../blocks/board'
 import IconButton from '../../widgets/buttons/iconButton'
@@ -23,6 +23,8 @@ import {IUser, UserConfigPatch, UserPropPrefix} from '../../user'
 import {getMe, patchProps} from '../../store/users'
 import {BaseTourSteps, TOUR_BASE} from '../onboardingTour'
 
+import {Utils} from "../../utils"
+
 import BoardTemplateSelectorPreview from './boardTemplateSelectorPreview'
 import BoardTemplateSelectorItem from './boardTemplateSelectorItem'
 
@@ -44,10 +46,7 @@ const BoardTemplateSelector = (props: Props) => {
     const me = useAppSelector<IUser|null>(getMe)
 
     const showBoard = useCallback(async (boardId) => {
-        const params = {...match.params, boardId: boardId || ''}
-        delete params.viewId
-        const newPath = generatePath(match.path, params)
-        history.push(newPath)
+        Utils.showBoard(boardId, match, history)
         if (onClose) {
             onClose()
         }

webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.tsx

@@ -31,6 +31,8 @@ const BoardTemplateSelectorItem = (props: Props) => {
         onEdit(template.id)
     }, [onEdit, template])
 
+    console.log(`Template Metadata: name: ${template.title} template version: ${template.templateVersion}`)
+
     return (
         <div
             className={isActive ? 'BoardTemplateSelectorItem active' : 'BoardTemplateSelectorItem'}

webapp/src/components/sidebar/sidebarBoardItem.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useCallback, useMemo, useState} from 'react'
+import React, {useCallback, useState} from 'react'
 import {useIntl} from 'react-intl'
+import {useHistory, useRouteMatch} from "react-router-dom"
 
 import {Board} from '../../blocks/board'
 import {BoardView, IViewType} from '../../blocks/boardView'
@@ -30,7 +31,7 @@ import {Permission} from '../../constants'
 import DuplicateIcon from "../../widgets/icons/duplicate"
 import {Utils} from "../../utils"
 
-import {useHistory, useRouteMatch} from "react-router-dom"
+import AddIcon from "../../widgets/icons/add"
 
 const iconForViewType = (viewType: IViewType): JSX.Element => {
     switch (viewType) {
@@ -82,17 +83,25 @@ const SidebarBoardItem = (props: Props) => {
 
     const board = props.board
 
-    const handleDuplicateBoard = useCallback(() => {
-        return mutator.duplicateBoard(
+    const handleDuplicateBoard = useCallback(async(asTemplate: boolean) => {
+        const blocksAndBoards = await mutator.duplicateBoard(
             board.id,
             undefined,
-            board.isTemplate,
+            asTemplate,
             undefined,
             () => {
                 Utils.showBoard(board.id, match, history)
                 return Promise.resolve()
             }
         )
+
+        if (blocksAndBoards.boards.length === 0) {
+            return
+        }
+
+        const boardId = blocksAndBoards.boards[0].id
+        Utils.showBoard(boardId, match, history)
+
     }, [board.id])
 
     const title = board.title || intl.formatMessage({id: 'Sidebar.untitled-board', defaultMessage: '(Untitled Board)'})
@@ -151,7 +160,13 @@ const SidebarBoardItem = (props: Props) => {
                             id='duplicateBoard'
                             name={intl.formatMessage({id: 'Sidebar.duplicate-board', defaultMessage: 'Duplicate board'})}
                             icon={<DuplicateIcon/>}
-                            onClick={handleDuplicateBoard}
+                            onClick={() => handleDuplicateBoard(board.isTemplate)}
+                        />
+                        <Menu.Text
+                            id='templateFromBoard'
+                            name={intl.formatMessage({id: 'Sidebar.template-from-board', defaultMessage: 'New template from board'})}
+                            icon={<AddIcon/>}
+                            onClick={() => handleDuplicateBoard(true)}
                         />
                     </Menu>
                 </MenuWrapper>

webapp/src/components/sidebar/sidebarCategory.tsx

@@ -60,15 +60,6 @@ const SidebarCategory = (props: Props) => {
     const teamID = team?.id || ''
 
     const showBoard = useCallback((boardId) => {
-        // // if the same board, reuse the match params
-        // // otherwise remove viewId and cardId, results in first view being selected
-        // const params = {...match.params, boardId: boardId || ''}
-        // if (boardId !== match.params.boardId) {
-        //     params.viewId = undefined
-        //     params.cardId = undefined
-        // }
-        // const newPath = generatePath(match.path, params)
-        // history.push(newPath)
         Utils.showBoard(boardId, match, history)
         props.hideSidebar()
     }, [match, history])

webapp/src/components/workspace.scss

@@ -17,6 +17,8 @@
             background-color: rgba(230, 220, 192, 0.9);
             text-align: center;
             padding: 10px;
+            color: rgb(63, 67, 80);
+            font-weight: bold;
         }
     }
 }

webapp/src/mutator.ts

@@ -1014,7 +1014,7 @@ class Mutator {
         afterRedo?: (newBoardId: string) => Promise<void>,
         beforeUndo?: () => Promise<void>,
         toTeam?: string,
-    ): Promise<[Block[], string]> {
+    ): Promise<BoardsAndBlocks> {
         return undoManager.perform(
             async () => {
                 const boardsAndBlocks = await octoClient.duplicateBoard(boardId, asTemplate, toTeam)