Internationalization App Table and Create App Card

src/containers/Dashboard.tsx

@@ -1,5 +1,4 @@
 import { Button, Card, Col, Input, Modal, Row, Tooltip } from 'antd'
-import React from 'react'
 import { Redirect, RouteComponentProps } from 'react-router'
 import AppConstants from '../utils/AppConstants'
 import Toaster from '../utils/Toaster'

src/containers/PageRoot.tsx

@@ -18,6 +18,7 @@ import { Route, RouteComponentProps, Switch } from 'react-router'
 import ApiManager from '../api/ApiManager'
 import { IVersionInfo } from '../models/IVersionInfo'
 import * as GlobalActions from '../redux/actions/GlobalActions'
+import { localize } from '../utils/Language'
 import StorageHelper from '../utils/StorageHelper'
 import Dashboard from './Dashboard'
 import LoggedInCatchAll from './LoggedInCatchAll'
@@ -38,27 +39,27 @@ const { Header, Content, Sider } = Layout
 const MENU_ITEMS: MenuProps['items'] = [
     {
         key: 'dashboard',
-        label: 'Dashboard',
+        label: localize('menu_item.dashboard', 'Dashboard'),
         icon: <LaptopOutlined />,
     },
     {
         key: 'apps',
-        label: 'Apps',
+        label: localize('menu_item.app', 'App'),
         icon: <CodeOutlined />,
     },
     {
         key: 'monitoring',
-        label: 'Monitoring',
+        label: localize('menu_item.monitoring', 'Monitoring'),
         icon: <DashboardOutlined />,
     },
     {
         key: 'cluster',
-        label: 'Cluster',
+        label: localize('menu_item.cluster', 'Cluster'),
         icon: <ClusterOutlined />,
     },
     {
         key: 'settings',
-        label: 'Settings',
+        label: localize('menu_item.settings', 'Settings'),
         icon: <SettingOutlined />,
     },
 ]

src/containers/apps/AppsTable.tsx

@@ -12,6 +12,7 @@ import React, { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { IMobileComponent } from '../../models/ContainerProps'
+import { localize } from '../../utils/Language'
 import Logger from '../../utils/Logger'
 import NewTabLink from '../global/NewTabLink'
 import Timestamp from '../global/Timestamp'
@@ -45,7 +46,7 @@ class AppsTable extends Component<
         const ALIGN: 'center' = 'center'
         const columns: ColumnProps<TableData>[] = [
             {
-                title: 'App Name',
+                title: localize('apps_table.app_name', 'App Name'),
                 dataIndex: 'appName',
                 key: 'appName',
                 render: (appName: string) => (
@@ -59,7 +60,10 @@ class AppsTable extends Component<
                 sortDirections: ['descend', 'ascend'],
             },
             {
-                title: 'Persistent Data	',
+                title: localize(
+                    'apps_table.persistent_data',
+                    'Persistent Data'
+                ),
                 dataIndex: 'hasPersistentData',
                 key: 'hasPersistentData',
                 align: ALIGN,
@@ -76,13 +80,13 @@ class AppsTable extends Component<
                 },
             },
             {
-                title: 'Instance Count',
+                title: localize('apps_table.instance_count', 'Instance Count'),
                 dataIndex: 'instanceCount',
                 key: 'instanceCount',
                 align: ALIGN,
             },
             {
-                title: 'Tags',
+                title: localize('apps_table.tags', 'Tags'),
                 dataIndex: 'tags',
                 key: 'tags',
                 align: ALIGN,
@@ -117,7 +121,7 @@ class AppsTable extends Component<
                 },
             },
             {
-                title: 'Last Deployed',
+                title: localize('apps_table.last_deployed', 'Last Deployed'),
                 dataIndex: 'lastDeployTime',
                 key: 'lastDeployTime',
                 align: ALIGN,
@@ -149,14 +153,19 @@ class AppsTable extends Component<
                 },
             },
             {
-                title: 'Open',
+                title: localize('apps_table.open', 'Open'),
                 dataIndex: 'notExposeAsWebApp',
                 key: 'openInBrowser',
                 align: ALIGN,
                 render: (notExposeAsWebApp: boolean, app) => {
                     if (notExposeAsWebApp) {
                         return (
-                            <Tooltip title="Not exposed as a web app">
+                            <Tooltip
+                                title={localize(
+                                    'apps_table.not_exposed_tooltip',
+                                    'Not exposed as a web app'
+                                )}
+                            >
                                 <DisconnectOutlined />
                             </Tooltip>
                         )
@@ -239,7 +248,10 @@ class AppsTable extends Component<
 
         const searchAppInput = (
             <Input
-                placeholder="Search by Name"
+                placeholder={localize(
+                    'apps_table.search_input_placeholder',
+                    'Search by Name'
+                )}
                 type="text"
                 value={self.state.searchTerm}
                 defaultValue={self.state.searchTerm}
@@ -260,7 +272,8 @@ class AppsTable extends Component<
                     <React.Fragment>
                         <span>
                             <CodeOutlined />
-                            &nbsp;&nbsp;&nbsp;Your Apps
+                            &nbsp;&nbsp;&nbsp;
+                            {localize('apps_table.title', 'Your Apps')}
                         </span>
                         <br />
                         {self.props.isMobile && (

src/containers/apps/CreateNewApp.tsx

@@ -1,10 +1,11 @@
 import { PlusCircleOutlined, QuestionCircleFilled } from '@ant-design/icons'
 import { Button, Card, Checkbox, Col, Input, Row, Tooltip } from 'antd'
 import Search from 'antd/lib/input/Search'
-import React, { Component, Fragment } from 'react'
+import { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { IMobileComponent } from '../../models/ContainerProps'
+import { localize } from '../../utils/Language'
 import NewTabLink from '../global/NewTabLink'
 
 interface MyProps {
@@ -37,7 +38,8 @@ class CreateNewApp extends Component<
                 title={
                     <span>
                         <PlusCircleOutlined />
-                        &nbsp;&nbsp;&nbsp;Create A New App
+                        &nbsp;&nbsp;&nbsp;{' '}
+                        {localize('create_new_app.title', 'Create A New App')}
                     </span>
                 }
             >
@@ -47,7 +49,10 @@ class CreateNewApp extends Component<
                             {self.props.isMobile ? (
                                 <Fragment>
                                     <Input
-                                        placeholder="my-amazing-app"
+                                        placeholder={localize(
+                                            'create_new_app.placeholder',
+                                            'my-amazing-app'
+                                        )}
                                         onChange={(e) =>
                                             self.setState({
                                                 appName: e.target.value,
@@ -62,13 +67,22 @@ class CreateNewApp extends Component<
                                         }
                                         type="primary"
                                     >
-                                        Create New App
+                                        {localize(
+                                            'create_new_app.button',
+                                            'Create New App'
+                                        )}
                                     </Button>
                                 </Fragment>
                             ) : (
                                 <Search
-                                    placeholder="my-amazing-app"
-                                    enterButton="Create New App"
+                                    placeholder={localize(
+                                        'create_new_app.placeholder',
+                                        'my-amazing-app'
+                                    )}
+                                    enterButton={localize(
+                                        'create_new_app.button',
+                                        'Create New App'
+                                    )}
                                     onChange={(e) =>
                                         self.setState({
                                             appName: e.target.value,
@@ -89,23 +103,39 @@ class CreateNewApp extends Component<
                                     })
                                 }
                             >
-                                Has Persistent Data
+                                {localize(
+                                    'create_new_app.has_persistent_data',
+                                    'Has Persistent Data'
+                                )}
                             </Checkbox>
                             &nbsp;&nbsp;
-                            <Tooltip title="Mostly used for databases, see docs for details.">
-                                <NewTabLink url="https://caprover.com/docs/persistent-apps.html">
+                            <NewTabLink url="https://caprover.com/docs/persistent-apps.html">
+                                <Tooltip
+                                    title={localize(
+                                        'create_new_app.has_persistent_data_tooltip',
+                                        'Mostly used for databases, see docs for details.'
+                                    )}
+                                >
                                     <span>
                                         <QuestionCircleFilled />
                                     </span>
-                                </NewTabLink>
-                            </Tooltip>
+                                </Tooltip>
+                            </NewTabLink>
                         </Row>
                     </Col>
                     <Col lg={{ span: 12 }}>
                         <div style={{ textAlign: 'center' }}>
-                            <p>Or Select From</p>
+                            <p>
+                                {localize(
+                                    'create_new_app.or_select_from',
+                                    'Or Select From'
+                                )}
+                            </p>
                             <Link to="/apps/oneclick/" className="ant-btn">
-                                One-Click Apps/Databases
+                                {localize(
+                                    'create_new_app.one_click_apps',
+                                    'One-Click Apps/Databases'
+                                )}
                             </Link>
                         </div>
                     </Col>

src/containers/apps/oneclick/variables/OneClickVariablesSection.tsx

@@ -1,5 +1,5 @@
 import { Alert, Button, Col, Input, message, Row } from 'antd'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
 import { IHashMapGeneric } from '../../../../models/IHashMapGeneric'

src/locales/en-US.json

@@ -1,9 +1,30 @@
 {
+    "apps_table.app_name": "App Name",
+    "apps_table.instance_count": "Instance Count",
+    "apps_table.last_deployed": "Last Deployed",
+    "apps_table.not_exposed_tooltip": "Not exposed as a web app",
+    "apps_table.open": "Open",
+    "apps_table.persistent_data": "Persistent Data",
+    "apps_table.search_input_placeholder": "Search by Name",
+    "apps_table.tags": "Tags",
+    "apps_table.title": "Your Apps",
+    "create_new_app.button": "Create New App",
+    "create_new_app.has_persistent_data": "Has Persistent Data",
+    "create_new_app.has_persistent_data_tooltip": "Mostly used for databases, see docs for details.",
+    "create_new_app.one_click_apps": "One-Click Apps/Databases",
+    "create_new_app.or_select_from": "Or Select From",
+    "create_new_app.placeholder": "my-amazing-app",
+    "create_new_app.title": "Create A New App",
     "login_form.cap_rover": "CapRover Login",
     "login_form.login": "Login",
     "login_form.no_session_persistence": "No session persistence (Most Secure)",
     "login_form.password": "Password",
     "login_form.remember_me": "Remember Me",
     "login_form.use_local_storage": "Use localStorage (Most Persistent)",
-    "login_form.use_session_storage": "Use sessionStorage"
+    "login_form.use_session_storage": "Use sessionStorage",
+    "menu_item.app": "App",
+    "menu_item.cluster": "Cluster",
+    "menu_item.dashboard": "Dashboard",
+    "menu_item.monitoring": "Monitoring",
+    "menu_item.settings": "Settings"
 }

src/locales/zh-CN.json

@@ -1,9 +1,30 @@
 {
+    "apps_table.app_name": "应用名称",
+    "apps_table.instance_count": "实例数量",
+    "apps_table.last_deployed": "上次部署时间",
+    "apps_table.not_exposed_tooltip": "未公开为 Web 应用程序",
+    "apps_table.open": "打开",
+    "apps_table.persistent_data": "持久化数据",
+    "apps_table.search_input_placeholder": "按名称搜索",
+    "apps_table.tags": "标签",
+    "apps_table.title": "您的应用",
+    "create_new_app.button": "创建新应用",
+    "create_new_app.has_persistent_data": "具有持久数据",
+    "create_new_app.has_persistent_data_tooltip": "主要用于数据库，请查看文档了解详情",
+    "create_new_app.one_click_apps": "一键部署 应用/数据库",
+    "create_new_app.or_select_from": "或从中选择",
+    "create_new_app.placeholder": "my-amazing-app",
+    "create_new_app.title": "创建新应用",
     "login_form.cap_rover": "CapRover 登录",
     "login_form.login": "登录",
     "login_form.no_session_persistence": "不储存会话（最安全）",
     "login_form.password": "密码",
     "login_form.remember_me": "记住我",
     "login_form.use_local_storage": "使用 LocalStorage 存储（最持久）",
-    "login_form.use_session_storage": "使用 SessionStorage 存储"
+    "login_form.use_session_storage": "使用 SessionStorage 存储",
+    "menu_item.app": "应用",
+    "menu_item.cluster": "集群",
+    "menu_item.dashboard": "仪表盘",
+    "menu_item.monitoring": "监控",
+    "menu_item.settings": "设置"
 }