Improving a bit hover handling in table row

webapp/i18n/en.json

@@ -50,6 +50,7 @@
   "TableHeaderMenu.insert-right": "Insert right",
   "TableHeaderMenu.sort-ascending": "Sort ascending",
   "TableHeaderMenu.sort-descending": "Sort descending",
+  "TableRow.open": "Open",
   "ViewHeader.export-board-archive": "Export Board Archive",
   "ViewHeader.export-csv": "Export to CSV",
   "ViewHeader.filter": "Filter",

webapp/i18n/es.json

@@ -50,6 +50,7 @@
   "TableHeaderMenu.insert-right": "Insertar a la derecha",
   "TableHeaderMenu.sort-ascending": "Orden ascendente",
   "TableHeaderMenu.sort-descending": "Orden descendente",
+  "TableRow.open": "Abrir",
   "ViewHeader.export-board-archive": "Exportar Archivo del Panel",
   "ViewHeader.export-csv": "Exportar a CSV",
   "ViewHeader.filter": "Filtrar",

webapp/src/components/tableRow.scss

@@ -0,0 +1,10 @@
+.TableRow {
+    .open-button {
+        display: none;
+    }
+    &:hover {
+        .open-button {
+            display: block;
+        }
+    }
+}

webapp/src/components/tableRow.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React from 'react'
+import {FormattedMessage} from 'react-intl'
 
 import {BoardTree} from '../viewModel/boardTree'
 import {Card} from '../blocks/card'
@@ -12,6 +13,8 @@ import PropertyValueElement from './propertyValueElement'
 import {CardDialog} from './cardDialog'
 import RootPortal from './rootPortal'
 
+import './tableRow.scss'
+
 type Props = {
     boardTree: BoardTree
     card: Card
@@ -48,11 +51,9 @@ class TableRow extends React.Component<Props, State> {
         const {boardTree, card, onSaveWithEnter} = this.props
         const {board, activeView} = boardTree
 
-        const openButonRef = React.createRef<HTMLDivElement>()
-
         return (
             <div
-                className='octo-table-row'
+                className='TableRow octo-table-row'
                 key={card.id}
             >
 
@@ -61,12 +62,6 @@ class TableRow extends React.Component<Props, State> {
                 <div
                     className='octo-table-cell title-cell'
                     id='mainBoardHeader'
-                    onMouseOver={() => {
-                        openButonRef.current.style.display = null
-                    }}
-                    onMouseLeave={() => {
-                        openButonRef.current.style.display = 'none'
-                    }}
                 >
                     <div className='octo-icontitle'>
                         <div className='octo-icon'>{card.icon}</div>
@@ -86,13 +81,16 @@ class TableRow extends React.Component<Props, State> {
                     </div>
 
                     <div
-                        ref={openButonRef}
-                        className='octo-hoverbutton'
-                        style={{display: 'none'}}
+                        className='octo-hoverbutton open-button'
                         onClick={() => {
                             this.setState({showCard: true})
                         }}
-                    >Open</div>
+                    >
+                        <FormattedMessage
+                            id='TableRow.open'
+                            defaultMessage='Open'
+                        />
+                    </div>
                     {this.state.showCard &&
                     <RootPortal>
                         <CardDialog