Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Internationalization App Table and Create App Card #142

Merged
merged 1 commit into from
Jan 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/containers/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
11 changes: 6 additions & 5 deletions src/containers/PageRoot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 />,
},
]
Expand Down
31 changes: 22 additions & 9 deletions src/containers/apps/AppsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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) => (
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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>
)
Expand Down Expand Up @@ -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}
Expand All @@ -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 && (
Expand Down
56 changes: 43 additions & 13 deletions src/containers/apps/CreateNewApp.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
}
>
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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.">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original tooltip not working, so I adjusted the positions of NewTabLink and Tooltip.

<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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
23 changes: 22 additions & 1 deletion src/locales/en-US.json
Original file line number Diff line number Diff line change
@@ -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"
}
23 changes: 22 additions & 1 deletion src/locales/zh-CN.json
Original file line number Diff line number Diff line change
@@ -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": "设置"
}
Loading