Merge pull request #221 from BharatKalluri/fix/internationlize_hardcoded_strings

Internationalized hardcoded strings in the frontend codebase

webapp/i18n/en.json

@@ -31,6 +31,7 @@
   "ContentBlock.moveDown": "Move down",
   "ContentBlock.moveUp": "Move up",
   "ContentBlock.text": "text",
+  "Dialog.closeDialog": "Close dialog",
   "EmptyCenterPanel.no-content": "Add or select a board from the sidebar to get started.",
   "EmptyCenterPanel.workspace": "This is the workspace for:",
   "Filter.includes": "includes",
@@ -39,6 +40,8 @@
   "Filter.not-includes": "doesn't include",
   "FilterComponent.add-filter": "+ Add filter",
   "FilterComponent.delete": "Delete",
+  "GalleryCard.delete": "Delete",
+  "GalleryCard.duplicate": "Duplicate",
   "KanbanCard.delete": "Delete",
   "KanbanCard.duplicate": "Duplicate",
   "KanbanCard.untitled": "Untitled",
@@ -52,6 +55,7 @@
   "PropertyType.Checkbox": "Checkbox",
   "PropertyType.CreatedBy": "Created By",
   "PropertyType.CreatedTime": "Created Time",
+  "PropertyType.Delete": "Delete",
   "PropertyType.Email": "Email",
   "PropertyType.File": "File or Media",
   "PropertyType.MultiSelect": "Multi Select",
@@ -123,9 +127,14 @@
   "TableHeaderMenu.sort-ascending": "Sort ascending",
   "TableHeaderMenu.sort-descending": "Sort descending",
   "TableRow.open": "Open",
+  "View.AddView": "Add View",
+  "View.Board": "Board",
+  "View.DeleteView": "Delete View",
+  "View.DuplicateView": "Duplicate View",
   "View.NewBoardTitle": "Board view",
   "View.NewGalleryTitle": "Gallery view",
   "View.NewTableTitle": "Table view",
+  "View.Table": "Table",
   "ViewHeader.add-template": "+ New template",
   "ViewHeader.delete-template": "Delete",
   "ViewHeader.edit-template": "Edit",

webapp/src/components/dialog.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 {injectIntl, IntlShape} from 'react-intl'
 
 import IconButton from '../widgets/buttons/iconButton'
 import CloseIcon from '../widgets/icons/close'
@@ -11,10 +12,11 @@ import './dialog.scss'
 type Props = {
     children: React.ReactNode
     toolsMenu: React.ReactNode
-    onClose: () => void
+    onClose: () => void,
+    intl: IntlShape
 }
 
-export default class Dialog extends React.PureComponent<Props> {
+class Dialog extends React.PureComponent<Props> {
     public componentDidMount(): void {
         document.addEventListener('keydown', this.keydownHandler)
     }
@@ -35,7 +37,12 @@ export default class Dialog extends React.PureComponent<Props> {
     }
 
     public render(): JSX.Element {
-        const {toolsMenu} = this.props
+        const {toolsMenu, intl} = this.props
+
+        const closeDialogText = intl.formatMessage({
+            id: 'Dialog.closeDialog',
+            defaultMessage: 'Close dialog',
+        })
 
         return (
             <div
@@ -53,7 +60,7 @@ export default class Dialog extends React.PureComponent<Props> {
                             <IconButton
                                 onClick={this.closeClicked}
                                 icon={<CloseIcon/>}
-                                title={'Close dialog'}
+                                title={closeDialogText}
                                 className='IconButton--large'
                             />
                             <div className='octo-spacer'/>
@@ -77,3 +84,5 @@ export default class Dialog extends React.PureComponent<Props> {
         this.props.onClose()
     }
 }
+
+export default injectIntl(Dialog)

webapp/src/components/viewMenu.tsx

@@ -151,7 +151,29 @@ export class ViewMenu extends React.PureComponent<Props> {
     }
 
     render(): JSX.Element {
-        const {boardTree} = this.props
+        const {boardTree, intl} = this.props
+
+        const duplicateViewText = intl.formatMessage({
+            id: 'View.DuplicateView',
+            defaultMessage: 'Duplicate View',
+        })
+        const deleteViewText = intl.formatMessage({
+            id: 'View.DeleteView',
+            defaultMessage: 'Delete View',
+        })
+        const addViewText = intl.formatMessage({
+            id: 'View.AddView',
+            defaultMessage: 'Add View',
+        })
+        const boardText = intl.formatMessage({
+            id: 'View.Board',
+            defaultMessage: 'Board',
+        })
+        const tableText = intl.formatMessage({
+            id: 'View.Table',
+            defaultMessage: 'Table',
+        })
+
         return (
             <Menu>
                 {boardTree.views.map((view) => (
@@ -166,7 +188,7 @@ export class ViewMenu extends React.PureComponent<Props> {
                 {!this.props.readonly &&
                     <Menu.Text
                         id='__duplicateView'
-                        name='Duplicate View'
+                        name={duplicateViewText}
                         icon={<DuplicateIcon/>}
                         onClick={this.handleDuplicateView}
                     />
@@ -174,7 +196,7 @@ export class ViewMenu extends React.PureComponent<Props> {
                 {!this.props.readonly && boardTree.views.length > 1 &&
                     <Menu.Text
                         id='__deleteView'
-                        name='Delete View'
+                        name={deleteViewText}
                         icon={<DeleteIcon/>}
                         onClick={this.handleDeleteView}
                     />
@@ -182,18 +204,18 @@ export class ViewMenu extends React.PureComponent<Props> {
                 {!this.props.readonly &&
                     <Menu.SubMenu
                         id='__addView'
-                        name='Add View'
+                        name={addViewText}
                         icon={<AddIcon/>}
                     >
                         <Menu.Text
                             id='board'
-                            name='Board'
+                            name={boardText}
                             icon={<BoardIcon/>}
                             onClick={this.handleAddViewBoard}
                         />
                         <Menu.Text
                             id='table'
-                            name='Table'
+                            name={tableText}
                             icon={<TableIcon/>}
                             onClick={this.handleAddViewTable}
                         />

webapp/src/widgets/propertyMenu.tsx

@@ -49,6 +49,11 @@ const PropertyMenu = React.memo((props: Props) => {
     const nameTextbox = useRef<HTMLInputElement>(null)
     const [name, setName] = useState(props.propertyName)
 
+    const deleteText = intl.formatMessage({
+        id: 'PropertyType.Delete',
+        defaultMessage: 'Delete',
+    })
+
     useEffect(() => {
         nameTextbox.current?.focus()
         nameTextbox.current?.setSelectionRange(0, name.length)
@@ -85,38 +90,38 @@ const PropertyMenu = React.memo((props: Props) => {
 
                 <Menu.Text
                     id='text'
-                    name='Text'
+                    name={typeDisplayName(intl, 'text')}
                     onClick={() => props.onTypeChanged('text')}
                 />
                 <Menu.Text
                     id='number'
-                    name='Number'
+                    name={typeDisplayName(intl, 'number')}
                     onClick={() => props.onTypeChanged('number')}
                 />
                 <Menu.Text
                     id='email'
-                    name='Email'
+                    name={typeDisplayName(intl, 'email')}
                     onClick={() => props.onTypeChanged('email')}
                 />
                 <Menu.Text
                     id='select'
-                    name='Select'
+                    name={typeDisplayName(intl, 'select')}
                     onClick={() => props.onTypeChanged('select')}
                 />
                 <Menu.Text
                     id='createdTime'
-                    name='Created Time'
+                    name={typeDisplayName(intl, 'createdTime')}
                     onClick={() => props.onTypeChanged('createdTime')}
                 />
                 <Menu.Text
                     id='updatedTime'
-                    name='Updated Time'
+                    name={typeDisplayName(intl, 'updatedTime')}
                     onClick={() => props.onTypeChanged('updatedTime')}
                 />
             </Menu.SubMenu>
             <Menu.Text
                 id='delete'
-                name='Delete'
+                name={deleteText}
                 onClick={() => props.onDelete(props.propertyId)}
             />
         </Menu>