Skip to content

Commit 84716b1

Browse files
haraldschillyharaldschilly
committed
frontend/i18n: refactor, more coverage, figuring out what works and what does not, ...
1 parent 1807325 commit 84716b1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1084
-373
lines changed

‎src/packages/frontend/account/account-button.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55

66
import { Popconfirm, Popover } from "antd";
77
import React from "react";
8-
import { useIntl } from "react-intl";
8+
import { FormattedMessage, useIntl } from "react-intl";
99

1010
import { AccountActions } from "@cocalc/frontend/account";
1111
import { labels } from "@cocalc/frontend/i18n";
12+
import { CancelText } from "@cocalc/frontend/i18n/components";
1213

1314
interface Props {
1415
icon: React.ReactNode; // When clicked, show popover
@@ -150,10 +151,20 @@ export const DefaultAccountDropDownLinks: React.FC<LinksProps> = ({
150151
</li>
151152
<li>
152153
<Popconfirm
153-
title={"Sign out of your account?"}
154+
title={
155+
<FormattedMessage
156+
id="account.account-button.confirm.title"
157+
defaultMessage={"Sign out of your account?"}
158+
/>
159+
}
154160
onConfirm={() => account_actions.sign_out(false, false)}
155-
okText={"Yes, sign out"}
156-
cancelText={"Cancel"}
161+
okText={
162+
<FormattedMessage
163+
id="account.account-button.confirm.ok"
164+
defaultMessage={"Yes, sign out"}
165+
/>
166+
}
167+
cancelText={<CancelText />}
157168
>
158169
<a
159170
style={{

‎src/packages/frontend/account/account-page.tsx‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
useWindowDimensions,
2424
} from "@cocalc/frontend/app-framework";
2525
import { useLocalizationCtx } from "@cocalc/frontend/app/localize";
26-
import { Icon, Loading, Paragraph, Text } from "@cocalc/frontend/components";
26+
import { Icon, Loading, Paragraph } from "@cocalc/frontend/components";
2727
import { cloudFilesystemsEnabled } from "@cocalc/frontend/compute";
2828
import CloudFilesystems from "@cocalc/frontend/compute/cloud-filesystem/cloud-filesystems";
2929
import {
@@ -140,7 +140,7 @@ export const AccountPage: React.FC = () => {
140140
key: "account",
141141
label: (
142142
<span>
143-
<Icon name="wrench" /> Preferences
143+
<Icon name="wrench" /> {intl.formatMessage(labels.preferences)}
144144
</span>
145145
),
146146
children: (active_page == null || active_page === "account") && (
@@ -161,7 +161,7 @@ export const AccountPage: React.FC = () => {
161161
key: "purchases",
162162
label: (
163163
<span>
164-
<Icon name="money" /> Purchases
164+
<Icon name="money" /> {intl.formatMessage(labels.purchases)}
165165
</span>
166166
),
167167
children: active_page === "purchases" && <PurchasesPage />,
@@ -170,7 +170,7 @@ export const AccountPage: React.FC = () => {
170170
key: "subscriptions",
171171
label: (
172172
<span>
173-
<Icon name="calendar" /> Subscriptions
173+
<Icon name="calendar" /> {intl.formatMessage(labels.subscriptions)}
174174
</span>
175175
),
176176
children: active_page === "subscriptions" && <SubscriptionsPage />,
@@ -179,7 +179,7 @@ export const AccountPage: React.FC = () => {
179179
key: "statements",
180180
label: (
181181
<span>
182-
<Icon name="money" /> Statements
182+
<Icon name="money" /> {intl.formatMessage(labels.statements)}
183183
</span>
184184
),
185185
children: active_page === "statements" && <StatementsPage />,
@@ -195,7 +195,7 @@ export const AccountPage: React.FC = () => {
195195
key: "licenses",
196196
label: (
197197
<span>
198-
<Icon name="key" /> Licenses
198+
<Icon name="key" /> {intl.formatMessage(labels.licenses)}
199199
</span>
200200
),
201201
children: active_page === "licenses" && <LicensesPage />,
@@ -207,7 +207,7 @@ export const AccountPage: React.FC = () => {
207207
key: "ssh-keys",
208208
label: (
209209
<span>
210-
<Icon name="key" /> SSH Keys
210+
<Icon name="key" /> {intl.formatMessage(labels.ssh_keys)}
211211
</span>
212212
),
213213
children: active_page === "ssh-keys" && <SSHKeysPage />,
@@ -218,7 +218,7 @@ export const AccountPage: React.FC = () => {
218218
key: "support",
219219
label: (
220220
<span>
221-
<Icon name="medkit" /> Support
221+
<Icon name="medkit" /> {intl.formatMessage(labels.support)}
222222
</span>
223223
),
224224
children: active_page === "support" && <SupportTickets />,
@@ -228,7 +228,8 @@ export const AccountPage: React.FC = () => {
228228
key: "public-files",
229229
label: (
230230
<span>
231-
<Icon name="share-square" /> Public Files
231+
<Icon name="share-square" />{" "}
232+
{intl.formatMessage(labels.published_files)}
232233
</span>
233234
),
234235
children: active_page === "public-files" && <PublicPaths />,
@@ -238,7 +239,8 @@ export const AccountPage: React.FC = () => {
238239
key: "upgrades",
239240
label: (
240241
<span>
241-
<Icon name="arrow-circle-up" /> Upgrades
242+
<Icon name="arrow-circle-up" />{" "}
243+
{intl.formatMessage(labels.upgrades)}
242244
</span>
243245
),
244246
children: active_page === "upgrades" && <UpgradesPage />,
@@ -249,7 +251,8 @@ export const AccountPage: React.FC = () => {
249251
key: "cloud-filesystems",
250252
label: (
251253
<>
252-
<Icon name="disk-round" /> Cloud File Systems
254+
<Icon name="disk-round" />{" "}
255+
{intl.formatMessage(labels.cloud_file_system)}
253256
</>
254257
),
255258
children: <CloudFilesystems />,
@@ -271,14 +274,14 @@ export const AccountPage: React.FC = () => {
271274
items.push({
272275
key: "help",
273276
label: (
274-
<>
277+
<Space>
275278
<Icon name="translation-outlined" />
276279
{intl.formatMessage({
277280
id: "account.account_page.translation.info.label",
278281
defaultMessage: "Translation Info...",
279282
description: "Label of translation information modal in dropdown",
280283
})}
281-
</>
284+
</Space>
282285
),
283286
onClick: () =>
284287
Modal.info({
@@ -289,10 +292,9 @@ export const AccountPage: React.FC = () => {
289292
}),
290293
content: (
291294
<Paragraph>
292-
{intl.formatMessage(
293-
{
294-
id: "account.account_page.translation.info.content",
295-
defaultMessage: `
295+
{intl.formatMessage({
296+
id: "account.account_page.translation.info.content",
297+
defaultMessage: `
296298
We're excited to start offering our application in multiple languages! Here's what you need to know:
297299
298300
<ul>
@@ -303,23 +305,15 @@ We're excited to start offering our application in multiple languages! Here's wh
303305
</ul>
304306
305307
Thank you for your patience and understanding as we work to make our application accessible to a global audience!`,
306-
description: "Content of translation information modal",
307-
},
308-
{
309-
b: (e) => <Text strong>{e}</Text>,
310-
ul: (e) => <ul>{e}</ul>,
311-
li: (e) => <li>{e}</li>,
312-
},
313-
)}
308+
description: "Content of translation information modal",
309+
})}
314310
</Paragraph>
315311
),
316312
}),
317313
});
318314

319315
const menu: MenuProps = {
320316
items,
321-
selectable: true,
322-
defaultSelectedKeys: [i18n],
323317
onClick: ({ key }) => {
324318
if (key in LOCALIZATIONS) {
325319
redux

‎src/packages/frontend/account/public-paths/public-paths.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,32 @@
33
* License: MS-RSL – see LICENSE.md for details
44
*/
55

6-
import ShowError from "@cocalc/frontend/components/error";
7-
import { Button, Checkbox, Spin, Table } from "antd";
6+
import { Alert, Button, Checkbox, Spin, Table } from "antd";
7+
import { join } from "path";
8+
import { useIntl } from "react-intl";
9+
810
import {
9-
redux,
1011
React,
12+
redux,
1113
useActions,
12-
useState,
1314
useEffect,
1415
useIsMountedRef,
1516
useMemo,
17+
useState,
1618
useTypedRedux,
1719
} from "@cocalc/frontend/app-framework";
18-
import { PublicPath as PublicPath0 } from "@cocalc/util/db-schema/public-paths";
19-
import { trunc, trunc_middle } from "@cocalc/util/misc";
20-
import { webapp_client } from "@cocalc/frontend/webapp-client";
21-
import { Icon, Loading, Gap, TimeAgo, A } from "@cocalc/frontend/components";
22-
import { UnpublishEverything } from "./unpublish-everything";
23-
import { LICENSES } from "@cocalc/frontend/share/licenses";
20+
import { A, Gap, Icon, Loading, TimeAgo } from "@cocalc/frontend/components";
21+
import ShowError from "@cocalc/frontend/components/error";
2422
import { Footer } from "@cocalc/frontend/customize";
25-
import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
26-
import { Alert } from "antd";
2723
import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
28-
import { join } from "path";
24+
import { labels } from "@cocalc/frontend/i18n";
2925
import { ComputeImageSelector } from "@cocalc/frontend/project/settings/compute-image-selector";
26+
import { LICENSES } from "@cocalc/frontend/share/licenses";
27+
import { webapp_client } from "@cocalc/frontend/webapp-client";
28+
import { PublicPath as PublicPath0 } from "@cocalc/util/db-schema/public-paths";
29+
import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
30+
import { trunc, trunc_middle } from "@cocalc/util/misc";
31+
import { UnpublishEverything } from "./unpublish-everything";
3032

3133
interface PublicPath extends PublicPath0 {
3234
status?: string;
@@ -36,6 +38,7 @@ type filters = "Listed" | "Unlisted" | "Unpublished" | "Authenticated";
3638
const DEFAULT_CHECKED: filters[] = ["Listed", "Unlisted", "Authenticated"];
3739

3840
export const PublicPaths: React.FC = () => {
41+
const intl = useIntl();
3942
const account_id = useTypedRedux("account", "account_id");
4043
const customize_kucalc = useTypedRedux("customize", "kucalc");
4144
const showAuthenticatedOption = customize_kucalc !== KUCALC_COCALC_COM;
@@ -252,7 +255,9 @@ export const PublicPaths: React.FC = () => {
252255
<Icon name="redo" />
253256
<Gap /> <Gap /> {loading ? "Loading..." : "Refresh"}
254257
</Button>
255-
<h2>Public files ({paths?.length ?? "?"})</h2>
258+
<h2>
259+
{intl.formatMessage(labels.published_files)} ({paths?.length ?? "?"})
260+
</h2>
256261
Files that have been published in any project that you have actively used.
257262
<br />
258263
<br />

‎src/packages/frontend/account/sign-out.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,13 @@ export const SignOut: React.FC<Props> = (props: Readonly<Props>) => {
8686
</div>
8787
}
8888
onConfirm={sign_out}
89-
okText={`Yes, sign out${everywhere ? " everywhere" : ""}`}
89+
okText={intl.formatMessage(
90+
{
91+
id: "account.sign-out.button.ok",
92+
defaultMessage: `Yes, sign out{everywhere, select, true { everywhere} other {}}`,
93+
},
94+
{ everywhere },
95+
)}
9096
cancelText={intl.formatMessage(labels.button_cancel)}
9197
>
9298
<Button

‎src/packages/frontend/account/ssh-keys/ssh-key-list.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,18 @@
55

66
import { Button, Popconfirm, Typography } from "antd";
77
import { Map } from "immutable";
8+
import { useIntl } from "react-intl";
9+
810
import { redux } from "@cocalc/frontend/app-framework";
911
import {
12+
Gap,
1013
HelpIcon,
1114
Icon,
1215
SettingBox,
13-
Gap,
1416
TimeAgo,
1517
} from "@cocalc/frontend/components";
18+
import { labels } from "@cocalc/frontend/i18n";
19+
import { CancelText } from "@cocalc/frontend/i18n/components";
1620
import { cmp } from "@cocalc/util/misc";
1721

1822
interface SSHKeyListProps {
@@ -28,13 +32,14 @@ interface SSHKeyListProps {
2832
export const SSHKeyList: React.FC<SSHKeyListProps> = (
2933
props: SSHKeyListProps,
3034
) => {
35+
const intl = useIntl();
3136
const { ssh_keys, project_id, help, children, mode = "project" } = props;
3237
const isFlyout = mode === "flyout";
3338

3439
function render_header() {
3540
return (
3641
<>
37-
SSH Keys <Gap />
42+
{intl.formatMessage(labels.ssh_keys)} <Gap />
3843
{help && <HelpIcon title="Using SSH Keys">{help}</HelpIcon>}
3944
</>
4045
);
@@ -169,7 +174,7 @@ function OneSSHKey({ ssh_key, project_id, mode = "project" }: OneSSHKeyProps) {
169174
}
170175
onConfirm={() => delete_key()}
171176
okText={"Yes, delete key"}
172-
cancelText={"Cancel"}
177+
cancelText={<CancelText />}
173178
>
174179
<Button
175180
size={isFlyout ? "small" : "middle"}
@@ -185,11 +190,7 @@ function OneSSHKey({ ssh_key, project_id, mode = "project" }: OneSSHKeyProps) {
185190
</Typography.Text>
186191
<br />
187192
Added on {new Date(ssh_key.get("creation_date")).toLocaleDateString()}
188-
<div>
189-
{" "}
190-
{render_last_use()}
191-
{" "}(NOTE: not all usage is tracked.)
192-
</div>
193+
<div> {render_last_use()} (NOTE: not all usage is tracked.)</div>
193194
</div>
194195
</div>
195196
);

0 commit comments

Comments
 (0)