Moving table header name menu into the new menu system

webapp/src/components/tableComponent.tsx

@@ -7,16 +7,18 @@ import {BlockIcons} from '../blockIcons'
 import {IPropertyTemplate} from '../blocks/board'
 import {Card, MutableCard} from '../blocks/card'
 import {BoardTree} from '../viewModel/boardTree'
-import {Menu as OldMenu} from '../menu'
 import mutator from '../mutator'
 import {Utils} from '../utils'
 
+import MenuWrapper from '../widgets/menuWrapper'
+
 import {CardDialog} from './cardDialog'
 import {Editable} from './editable'
 import RootPortal from './rootPortal'
 import {TableRow} from './tableRow'
 import ViewHeader from './viewHeader'
 import ViewTitle from './viewTitle'
+import TableHeaderMenu from './tableHeaderMenu'
 
 type Props = {
     boardTree?: BoardTree
@@ -103,20 +105,24 @@ class TableComponent extends React.Component<Props, State> {
                             >
                                 <div
                                     className='octo-table-cell title-cell'
+                                    style={{overflow: 'unset'}}
                                     id='mainBoardHeader'
                                 >
+                                    <MenuWrapper>
                                         <div
                                             className='octo-label'
                                             style={{cursor: 'pointer'}}
-                                        onClick={(e) => {
-                                            this.headerClicked(e, '__name')
-                                        }}
                                         >
                                             <FormattedMessage
                                                 id='TableComponent.name'
                                                 defaultMessage='Name'
                                             />
                                         </div>
+                                        <TableHeaderMenu
+                                            boardTree={boardTree}
+                                            templateId='__name'
+                                        />
+                                    </MenuWrapper>
                                 </div>
 
                                 {board.cardProperties.
@@ -124,6 +130,7 @@ class TableComponent extends React.Component<Props, State> {
                                     map((template) =>
                                         (<div
                                             key={template.id}
+                                            style={{overflow: 'unset'}}
                                             className='octo-table-cell'
 
                                             draggable={true}
@@ -147,13 +154,16 @@ class TableComponent extends React.Component<Props, State> {
                                                 e.preventDefault(); (e.target as HTMLElement).classList.remove('dragover'); this.onDropToColumn(template)
                                             }}
                                         >
+                                            <MenuWrapper>
                                                 <div
                                                     className='octo-label'
                                                     style={{cursor: 'pointer'}}
-                                                onClick={(e) => {
-                                                    this.headerClicked(e, template.id)
-                                                }}
                                                 >{template.name}</div>
+                                                <TableHeaderMenu
+                                                    boardTree={boardTree}
+                                                    templateId={template.id}
+                                                />
+                                            </MenuWrapper>
                                         </div>),
                                     )}
                             </div>
@@ -213,81 +223,6 @@ class TableComponent extends React.Component<Props, State> {
         )
     }
 
-    private async headerClicked(e: React.MouseEvent<HTMLDivElement>, templateId: string) {
-        const {boardTree} = this.props
-        const {board} = boardTree
-        const {activeView} = boardTree
-
-        const options = [
-            {id: 'sortAscending', name: 'Sort ascending'},
-            {id: 'sortDescending', name: 'Sort descending'},
-            {id: 'insertLeft', name: 'Insert left'},
-            {id: 'insertRight', name: 'Insert right'},
-        ]
-
-        if (templateId !== '__name') {
-            options.push({id: 'hide', name: 'Hide'})
-            options.push({id: 'duplicate', name: 'Duplicate'})
-            options.push({id: 'delete', name: 'Delete'})
-        }
-
-        OldMenu.shared.options = options
-        OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
-            switch (optionId) {
-            case 'sortAscending': {
-                const newSortOptions = [
-                    {propertyId: templateId, reversed: false},
-                ]
-                await mutator.changeViewSortOptions(activeView, newSortOptions)
-                break
-            }
-            case 'sortDescending': {
-                const newSortOptions = [
-                    {propertyId: templateId, reversed: true},
-                ]
-                await mutator.changeViewSortOptions(activeView, newSortOptions)
-                break
-            }
-            case 'insertLeft': {
-                if (templateId !== '__name') {
-                    const index = board.cardProperties.findIndex((o) => o.id === templateId)
-                    await mutator.insertPropertyTemplate(boardTree, index)
-                } else {
-                    // TODO: Handle name column
-                }
-                break
-            }
-            case 'insertRight': {
-                if (templateId !== '__name') {
-                    const index = board.cardProperties.findIndex((o) => o.id === templateId) + 1
-                    await mutator.insertPropertyTemplate(boardTree, index)
-                } else {
-                    // TODO: Handle name column
-                }
-                break
-            }
-            case 'duplicate': {
-                await mutator.duplicatePropertyTemplate(boardTree, templateId)
-                break
-            }
-            case 'hide': {
-                const newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o) => o !== templateId)
-                await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
-                break
-            }
-            case 'delete': {
-                await mutator.deleteProperty(boardTree, templateId)
-                break
-            }
-            default: {
-                Utils.assertFailure(`Unexpected menu option: ${optionId}`)
-                break
-            }
-            }
-        }
-        OldMenu.shared.showAtElement(e.target as HTMLElement)
-    }
-
     private focusOnCardTitle(cardId: string): void {
         const tableRowRef = this.cardIdToRowMap.get(cardId)
         Utils.log(`focusOnCardTitle, ${tableRowRef?.current ?? 'undefined'}`)

webapp/src/components/tableHeaderMenu.tsx

@@ -0,0 +1,78 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+//
+import React, {FC} from 'react'
+import {injectIntl, IntlShape} from 'react-intl'
+
+import mutator from '../mutator'
+import {BoardTree} from '../viewModel/boardTree'
+import Menu from '../widgets/menu'
+
+type Props = {
+    templateId: string
+    boardTree: BoardTree
+    intl: IntlShape
+}
+
+const TableHeaderMenu: FC<Props> = (props: Props): JSX.Element => {
+    const {boardTree, templateId, intl} = props
+    const {board, activeView} = boardTree
+    return (
+        <Menu>
+            <Menu.Text
+                id='sortAscending'
+                name={intl.formatMessage({id: 'TableHeaderMenu.sort-ascending', defaultMessage: 'Sort ascending'})}
+                onClick={() => mutator.changeViewSortOptions(activeView, [{propertyId: templateId, reversed: false}])}
+            />
+            <Menu.Text
+                id='sortDescending'
+                name={intl.formatMessage({id: 'TableHeaderMenu.sort-descending', defaultMessage: 'Sort descending'})}
+                onClick={() => mutator.changeViewSortOptions(activeView, [{propertyId: templateId, reversed: true}])}
+            />
+            <Menu.Text
+                id='insertLeft'
+                name={intl.formatMessage({id: 'TableHeaderMenu.insert-left', defaultMessage: 'Insert left'})}
+                onClick={() => {
+                    if (props.templateId === '__name') {
+                        // TODO: Handle name column
+                    } else {
+                        const index = board.cardProperties.findIndex((o) => o.id === templateId)
+                        mutator.insertPropertyTemplate(boardTree, index)
+                    }
+                }}
+            />
+            <Menu.Text
+                id='insertRight'
+                name={intl.formatMessage({id: 'TableHeaderMenu.insert-right', defaultMessage: 'Insert right'})}
+                onClick={() => {
+                    if (templateId === '__name') {
+                        // TODO: Handle name column
+                    } else {
+                        const index = board.cardProperties.findIndex((o) => o.id === templateId) + 1
+                        mutator.insertPropertyTemplate(boardTree, index)
+                    }
+                }}
+            />
+            {props.templateId !== '__name' &&
+                <>
+                    <Menu.Text
+                        id='hide'
+                        name={intl.formatMessage({id: 'TableHeaderMenu.hide', defaultMessage: 'Hide'})}
+                        onClick={() => mutator.changeViewVisibleProperties(activeView, activeView.visiblePropertyIds.filter((o) => o !== templateId))}
+                    />
+                    <Menu.Text
+                        id='duplicate'
+                        name={intl.formatMessage({id: 'TableHeaderMenu.duplicate', defaultMessage: 'Duplicate'})}
+                        onClick={() => mutator.duplicatePropertyTemplate(boardTree, templateId)}
+                    />
+                    <Menu.Text
+                        id='delete'
+                        name={intl.formatMessage({id: 'TableHeaderMenu.delete', defaultMessage: 'Delete'})}
+                        onClick={() => mutator.deleteProperty(boardTree, templateId)}
+                    />
+                </>}
+        </Menu>
+    )
+}
+
+export default injectIntl(TableHeaderMenu)