Migrate to new menu system the board card

webapp/i18n/en.json

@@ -1,4 +1,7 @@
 {
+  "BoardCard.delete": "Delete",
+  "BoardCard.duplicate": "Duplicate",
+  "BoardCard.untitled": "Untitled",
   "BoardComponent.add-a-group": "+ Add a group",
   "BoardComponent.delete": "Delete",
   "BoardComponent.hidden-columns": "Hidden Columns",
@@ -7,6 +10,7 @@
   "BoardComponent.no-property": "No {property}",
   "BoardComponent.no-property-title": "Items with an empty {property} property will go here. This column cannot be removed.",
   "BoardComponent.show": "Show",
+  "Comment.delete": "Delete",
   "Sidebar.add-board": "+ Add Board",
   "Sidebar.delete-board": "Delete Board",
   "Sidebar.export-archive": "Export Archive",
@@ -20,6 +24,13 @@
   "TableComponent.loading": "Loading...",
   "TableComponent.name": "Name",
   "TableComponent.plus-new": "+ New",
+  "TableHeaderMenu.delete": "Delete",
+  "TableHeaderMenu.duplicate": "Duplicate",
+  "TableHeaderMenu.hide": "Hide",
+  "TableHeaderMenu.insert-left": "Insert left",
+  "TableHeaderMenu.insert-right": "Insert right",
+  "TableHeaderMenu.sort-ascending": "Sort ascending",
+  "TableHeaderMenu.sort-descending": "Sort descending",
   "ViewHeader.export-board-archive": "Export Board Archive",
   "ViewHeader.export-csv": "Export to CSV",
   "ViewHeader.filter": "Filter",
@@ -35,4 +46,4 @@
   "ViewTitle.random-icon": "Random",
   "ViewTitle.remove-icon": "Remove Icon",
   "ViewTitle.untitled-board": "Untitled Board"
-}
+}

webapp/i18n/es.json

@@ -1,4 +1,7 @@
 {
+  "BoardCard.delete": "Borrar",
+  "BoardCard.duplicate": "Duplicar",
+  "BoardCard.untitled": "Sin título",
   "BoardComponent.add-a-group": "+ Añadir un grupo",
   "BoardComponent.delete": "Borrar",
   "BoardComponent.hidden-columns": "Columnas Ocultas",
@@ -7,6 +10,7 @@
   "BoardComponent.no-property": "Sin {property}",
   "BoardComponent.no-property-title": "Elementos sin la propiedad {property} irán aquí. Esta columna no se puede eliminar.",
   "BoardComponent.show": "Mostrar",
+  "Comment.delete": "Borrar",
   "Sidebar.add-board": "+ Añadir Panel",
   "Sidebar.delete-board": "Borrar Panel",
   "Sidebar.export-archive": "Exportar Archivo",
@@ -20,6 +24,13 @@
   "TableComponent.loading": "Cargando...",
   "TableComponent.name": "Nombre",
   "TableComponent.plus-new": "+ Nueva",
+  "TableHeaderMenu.delete": "Borrar",
+  "TableHeaderMenu.duplicate": "Duplicar",
+  "TableHeaderMenu.hide": "Ocultar",
+  "TableHeaderMenu.insert-left": "Insertar a la izquierda",
+  "TableHeaderMenu.insert-right": "Insertar a la derecha",
+  "TableHeaderMenu.sort-ascending": "Orden ascendente",
+  "TableHeaderMenu.sort-descending": "Orden descendente",
   "ViewHeader.export-board-archive": "Exportar Archivo del Panel",
   "ViewHeader.export-csv": "Exportar a CSV",
   "ViewHeader.filter": "Filtrar",

webapp/src/components/boardCard.scss

@@ -0,0 +1,12 @@
+.BoardCard {
+    .MenuWrapper {
+        display: none;
+        position: absolute;
+        right: 0;
+    }
+    &:hover {
+        .MenuWrapper {
+            display: block;
+        }
+    }
+}

webapp/src/components/boardCard.tsx

@@ -1,15 +1,18 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React from 'react'
+import {injectIntl, IntlShape} from 'react-intl'
 
 import {MutableBlock} from '../blocks/block'
 
 import {IPropertyTemplate} from '../blocks/board'
 import {Card} from '../blocks/card'
-import {Menu} from '../menu'
 import mutator from '../mutator'
 import {OctoUtils} from '../octoUtils'
-import {Utils} from '../utils'
+import MenuWrapper from '../widgets/menuWrapper'
+import Menu from '../widgets/menu'
+
+import './boardCard.scss'
 
 type BoardCardProps = {
     card: Card
@@ -18,6 +21,7 @@ type BoardCardProps = {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
     onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void
     onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void
+    intl: IntlShape
 }
 
 type BoardCardState = {
@@ -35,10 +39,9 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
     }
 
     render(): JSX.Element {
-        const {card} = this.props
-        const optionsButtonRef = React.createRef<HTMLDivElement>()
+        const {card, intl} = this.props
         const visiblePropertyTemplates = this.props.visiblePropertyTemplates || []
-        const className = this.props.isSelected ? 'octo-board-card selected' : 'octo-board-card'
+        const className = this.props.isSelected ? 'BoardCard octo-board-card selected' : 'BoardCard octo-board-card'
 
         const element = (
             <div
@@ -54,26 +57,26 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
                     this.setState({isDragged: false})
                     this.props.onDragEnd(e)
                 }}
-
-                onMouseOver={() => {
-                    optionsButtonRef.current.style.display = null
-                }}
-                onMouseLeave={() => {
-                    optionsButtonRef.current.style.display = 'none'
-                }}
             >
-                <div
-                    ref={optionsButtonRef}
-                    className='octo-hoverbutton square'
-                    style={{display: 'none'}}
-                    onClick={(e) => {
-                        this.showOptionsMenu(e)
-                    }}
-                ><div className='imageOptions'/></div>
+                <MenuWrapper stopPropagationOnToggle={true}>
+                    <div className='octo-hoverbutton square'><div className='imageOptions'/></div>
+                    <Menu>
+                        <Menu.Text
+                            id='delete'
+                            name={intl.formatMessage({id: 'BoardCard.delete', defaultMessage: 'Delete'})}
+                            onClick={() => mutator.deleteBlock(card, 'delete card')}
+                        />
+                        <Menu.Text
+                            id='duplicate'
+                            name={intl.formatMessage({id: 'BoardCard.duplicate', defaultMessage: 'Duplicate'})}
+                            onClick={() => mutator.insertBlock(MutableBlock.duplicate(card), 'duplicate card')}
+                        />
+                    </Menu>
+                </MenuWrapper>
 
                 <div className='octo-icontitle'>
                     { card.icon ? <div className='octo-icon'>{card.icon}</div> : undefined }
-                    <div key='__title'>{card.title || 'Untitled'}</div>
+                    <div key='__title'>{card.title || intl.formatMessage({id: 'BoardCard.untitled', defaultMessage: 'Untitled'})}</div>
                 </div>
                 {visiblePropertyTemplates.map((template) => {
                     return OctoUtils.propertyValueReadonlyElement(card, template, '')
@@ -83,34 +86,6 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
 
         return element
     }
-
-    private showOptionsMenu(e: React.MouseEvent) {
-        const {card} = this.props
-
-        e.stopPropagation()
-
-        Menu.shared.options = [
-            {id: 'delete', name: 'Delete'},
-            {id: 'duplicate', name: 'Duplicate'},
-        ]
-        Menu.shared.onMenuClicked = (id) => {
-            switch (id) {
-            case 'delete': {
-                mutator.deleteBlock(card, 'delete card')
-                break
-            }
-            case 'duplicate': {
-                const newCard = MutableBlock.duplicate(card)
-                mutator.insertBlock(newCard, 'duplicate card')
-                break
-            }
-            default: {
-                Utils.assertFailure(`Unhandled menu id: ${id}`)
-            }
-            }
-        }
-        Menu.shared.showAtElement(e.target as HTMLElement)
-    }
 }
 
-export {BoardCard}
+export default injectIntl(BoardCard)

webapp/src/components/boardComponent.tsx

@@ -15,7 +15,7 @@ import {Utils} from '../utils'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
 
-import {BoardCard} from './boardCard'
+import BoardCard from './boardCard'
 import {BoardColumn} from './boardColumn'
 import Button from './button'
 import {CardDialog} from './cardDialog'