From 2eb5017fe2b2fd68ed80531d4ab3fce46f42b88f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Fri, 23 Oct 2020 19:36:20 +0200
Subject: [PATCH] Adding more translations

---
 webapp/i18n/en.json                      |  14 +-
 webapp/i18n/es.json                      |  14 +-
 webapp/src/components/tableComponent.tsx | 159 ++++++++++++++++-------
 3 files changed, 141 insertions(+), 46 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 9b73f60fc..7bfca990c 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -7,5 +7,17 @@
   "Sidebar.set-spanish-language": "Set Spanish Language",
   "Sidebar.settings": "Settings",
   "Sidebar.untitled-board": "(Untitled Board)",
-  "Sidebar.untitled-view": "(Untitled View)"
+  "Sidebar.untitled-view": "(Untitled View)",
+  "TableComponent.add-icon": "Add Icon",
+  "TableComponent.filter": "Filter",
+  "TableComponent.loading": "Loading...",
+  "TableComponent.name": "Name",
+  "TableComponent.new": "New",
+  "TableComponent.plus-new": "+ New",
+  "TableComponent.properties": "Properties",
+  "TableComponent.random-icon": "Random",
+  "TableComponent.remove-icon": "Remove Icon",
+  "TableComponent.search": "Search",
+  "TableComponent.search-text": "Search text",
+  "TableComponent.sort": "Sort"
 }
\ No newline at end of file
diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json
index 24123e3c9..a952cfe7b 100644
--- a/webapp/i18n/es.json
+++ b/webapp/i18n/es.json
@@ -7,5 +7,17 @@
   "Sidebar.set-spanish-language": "Usar idioma Español",
   "Sidebar.settings": "Configuración",
   "Sidebar.untitled-board": "(Panel sin titulo)",
-  "Sidebar.untitled-view": "(Vista sin titulo)"
+  "Sidebar.untitled-view": "(Vista sin titulo)",
+  "TableComponent.add-icon": "Añadir Icono",
+  "TableComponent.filter": "Filtrar",
+  "TableComponent.loading": "Cargando...",
+  "TableComponent.name": "Nombre",
+  "TableComponent.new": "Nueva",
+  "TableComponent.plus-new": "+ Nueva",
+  "TableComponent.properties": "Propiedades",
+  "TableComponent.random-icon": "Aleatorio",
+  "TableComponent.remove-icon": "Quitar Icono",
+  "TableComponent.search": "Buscar",
+  "TableComponent.search-text": "Texto de búsqueda",
+  "TableComponent.sort": "Ordenar"
 }
diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx
index 6ba4c0655..77ad5dad6 100644
--- a/webapp/src/components/tableComponent.tsx
+++ b/webapp/src/components/tableComponent.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 {Archiver} from '../archiver'
 import {BlockIcons} from '../blockIcons'
@@ -62,7 +63,12 @@ class TableComponent extends React.Component<Props, State> {
 
         if (!boardTree || !boardTree.board) {
             return (
-                <div>Loading...</div>
+                <div>
+                    <FormattedMessage
+                        id='TableComponent.loading'
+                        defaultMessage='Loading...'
+                    />
+                </div>
             )
         }
 
@@ -99,35 +105,60 @@ class TableComponent extends React.Component<Props, State> {
                                 const newIcon = BlockIcons.shared.randomIcon()
                                 mutator.changeIcon(board, newIcon)
                             }}
-                        >Add Icon</Button>
+                        >
+                            <FormattedMessage
+                                id='TableComponent.add-icon'
+                                defaultMessage='Add Icon'
+                            />
+                        </Button>
                     </div>
 
                     <div className='octo-icontitle'>
-                        {board.icon ?
+                        {board.icon &&
                             <MenuWrapper>
                                 <div className='octo-button octo-icon'>{board.icon}</div>
                                 <Menu>
-                                    <Menu.Text
-                                        id='random'
-                                        name='Random'
-                                        onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
-                                    />
-                                    <Menu.Text
-                                        id='remove'
-                                        name='Remove Icon'
-                                        onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
-                                    />
+                                    <FormattedMessage
+                                        id='TableComponent.random-icon'
+                                        defaultMessage='Random'
+                                    >
+                                        {(text: string) => (
+                                            <Menu.Text
+                                                id='random'
+                                                name={text}
+                                                onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
+                                            />
+                                        )}
+                                    </FormattedMessage>
+                                    <FormattedMessage
+                                        id='TableComponent.remove-icon'
+                                        defaultMessage='Remove Icon'
+                                    >
+                                        {(text: string) => (
+                                            <Menu.Text
+                                                id='remove'
+                                                name={text}
+                                                onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
+                                            />
+                                        )}
+                                    </FormattedMessage>
                                 </Menu>
-                            </MenuWrapper> :
-                            undefined}
-                        <Editable
-                            className='title'
-                            text={board.title}
-                            placeholderText='Untitled Board'
-                            onChanged={(text) => {
-                                mutator.changeTitle(board, text)
-                            }}
-                        />
+                            </MenuWrapper>}
+                        <FormattedMessage
+                            id='TableComponent.remove-icon'
+                            defaultMessage='Remove Icon'
+                        >
+                            {(placeholder: string) => (
+                                <Editable
+                                    className='title'
+                                    text={board.title}
+                                    placeholderText={placeholder}
+                                    onChanged={(text) => {
+                                        mutator.changeTitle(board, text)
+                                    }}
+                                />
+                            )}
+                        </FormattedMessage>
                     </div>
 
                     <div className='octo-table'>
@@ -159,39 +190,66 @@ class TableComponent extends React.Component<Props, State> {
                                 onClick={(e) => {
                                     this.propertiesClicked(e)
                                 }}
-                            >Properties</div>
+                            >
+                                <FormattedMessage
+                                    id='TableComponent.properties'
+                                    defaultMessage='Properties'
+                                />
+                            </div>
                             <div
                                 className={hasFilter ? 'octo-button active' : 'octo-button'}
                                 onClick={(e) => {
                                     this.filterClicked(e)
                                 }}
-                            >Filter</div>
+                            >
+                                <FormattedMessage
+                                    id='TableComponent.filter'
+                                    defaultMessage='Filter'
+                                />
+                            </div>
                             <div
                                 className={hasSort ? 'octo-button active' : 'octo-button'}
                                 onClick={(e) => {
                                     OctoUtils.showSortMenu(e, boardTree)
                                 }}
-                            >Sort</div>
-                            {this.state.isSearching ?
-                                <Editable
-                                    ref={this.searchFieldRef}
-                                    text={boardTree.getSearchText()}
-                                    placeholderText='Search text'
-                                    style={{color: '#000000'}}
-                                    onChanged={(text) => {
-                                        this.searchChanged(text)
-                                    }}
-                                    onKeyDown={(e) => {
-                                        this.onSearchKeyDown(e)
-                                    }}
-                                /> :
+                            >
+                                <FormattedMessage
+                                    id='TableComponent.sort'
+                                    defaultMessage='Sort'
+                                />
+                            </div>
+                            {this.state.isSearching &&
+                                <FormattedMessage
+                                    id='TableComponent.search-text'
+                                    defaultMessage='Search text'
+                                >
+                                    {(placeholder: string) => (
+                                        <Editable
+                                            ref={this.searchFieldRef}
+                                            text={boardTree.getSearchText()}
+                                            placeholderText={placeholder}
+                                            style={{color: '#000000'}}
+                                            onChanged={(text) => {
+                                                this.searchChanged(text)
+                                            }}
+                                            onKeyDown={(e) => {
+                                                this.onSearchKeyDown(e)
+                                            }}
+                                        />
+                                    )}
+                                </FormattedMessage>}
+                            {!this.state.isSearching &&
                                 <div
                                     className='octo-button'
                                     onClick={() => {
                                         this.setState({...this.state, isSearching: true})
                                     }}
-                                >Search</div>
-                            }
+                                >
+                                    <FormattedMessage
+                                        id='TableComponent.search'
+                                        defaultMessage='Search'
+                                    />
+                                </div>}
                             <div
                                 className='octo-button'
                                 onClick={(e) => this.optionsClicked(e)}
@@ -201,7 +259,12 @@ class TableComponent extends React.Component<Props, State> {
                                 onClick={() => {
                                     this.addCard(true)
                                 }}
-                            >New</div>
+                            >
+                                <FormattedMessage
+                                    id='TableComponent.new'
+                                    defaultMessage='New'
+                                />
+                            </div>
                         </div>
 
                         {/* Main content */}
@@ -224,7 +287,12 @@ class TableComponent extends React.Component<Props, State> {
                                         onClick={(e) => {
                                             this.headerClicked(e, '__name')
                                         }}
-                                    >Name</div>
+                                    >
+                                        <FormattedMessage
+                                            id='TableComponent.name'
+                                            defaultMessage='Name'
+                                        />
+                                    </div>
                                 </div>
 
                                 {board.cardProperties.
@@ -308,7 +376,10 @@ class TableComponent extends React.Component<Props, State> {
                                         this.addCard()
                                     }}
                                 >
-                                    + New
+                                    <FormattedMessage
+                                        id='TableComponent.plus-new'
+                                        defaultMessage='+ New'
+                                    />
                                 </div>
                             </div>
                         </div>