Port more strings to translation keys (#11474)

* Port composer formatting strings to translation keys

```
replace "Bold" "composer|format_bold"
replace "Italic" "composer|format_italic"
replace "Underline" "composer|format_underline"
replace "Strikethrough" "composer|format_strikethrough"
replace "Bulleted list" "composer|format_unordered_list"
replace "Numbered list" "composer|format_ordered_list"
replace "Indent increase" "composer|format_increase_indent"
replace "Indent decrease" "composer|format_decrease_indent"
replace "Code" "composer|format_inline_code"
replace "Code block" "composer|format_code_block"
replace "Link" "composer|format_link"

copy "composer|format_bold" "Bold"
copy "composer|format_link" "Link"
copy "composer|format_inline_code" "Code"
```

* Port role strings to translation keys

```
copy "Default" "power_level|default"
copy "Restricted" "power_level|restricted"
copy "Moderator" "power_level|moderator"
copy "Admin" "power_level|admin"
```

* Port bug reporting strings to translation keys

```
replace "If you've submitted a bug via GitHub, debug logs can help us track down the problem. " "bug_reporting|introduction"
replace "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages." "bug_reporting|description"
copy "To report a Matrix-related security issue, please read the Matrix.org <a>Security Disclosure Policy</a>." "bug_reporting|matrix_security_issue"
replace "Submit debug logs" "bug_reporting|submit_debug_logs"
replace "Bug reporting" "bug_reporting|title"
replace "If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here." "bug_reporting|additional_context"
replace "Send logs" "bug_reporting|send_logs"
replace "GitHub issue" "bug_reporting|github_issue"
replace "Download logs" "bug_reporting|download_logs"
copy "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem." "bug_reporting|before_submitting"
```

* i18n

* Port time duration strings to translation keys

```
replace "%(hours)sh %(minutes)sm %(seconds)ss left" "time|hours_minutes_seconds_left"
replace "%(minutes)sm %(seconds)ss left" "time|minutes_seconds_left"
replace "%(seconds)ss left" "time|seconds_left"
replace "%(date)s at %(time)s" "time|date_at_time"
replace "%(value)sd" "time|short_days"
replace "%(value)sh" "time|short_hours"
replace "%(value)sm" "time|short_minutes"
replace "%(value)ss" "time|short_seconds"
replace "%(days)sd %(hours)sh %(minutes)sm %(seconds)ss" "time|short_days_hours_minutes_seconds"
replace "%(hours)sh %(minutes)sm %(seconds)ss" "time|short_hours_minutes_seconds"
replace "%(minutes)sm %(seconds)ss" "time|short_minutes_seconds"
```

* i18n

src/components/views/dialogs/BugReportDialog.tsx

@@ -217,20 +217,16 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
             <BaseDialog
                 className="mx_BugReportDialog"
                 onFinished={this.onCancel}
-                title={_t("Submit debug logs")}
+                title={_t("bug_reporting|submit_debug_logs")}
                 contentId="mx_Dialog_content"
             >
                 <div className="mx_Dialog_content" id="mx_Dialog_content">
                     {warning}
-                    <p>
-                        {_t(
-                            "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.",
-                        )}
-                    </p>
+                    <p>{_t("bug_reporting|description")}</p>
                     <p>
                         <b>
                             {_t(
-                                "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.",
+                                "bug_reporting|before_submitting",
                                 {},
                                 {
                                     a: (sub) => (
@@ -248,7 +244,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
 
                     <div className="mx_BugReportDialog_download">
                         <AccessibleButton onClick={this.onDownload} kind="link" disabled={this.state.downloadBusy}>
-                            {_t("Download logs")}
+                            {_t("bug_reporting|download_logs")}
                         </AccessibleButton>
                         {this.state.downloadProgress && <span>{this.state.downloadProgress} ...</span>}
                     </div>
@@ -256,7 +252,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                     <Field
                         type="text"
                         className="mx_BugReportDialog_field_input"
-                        label={_t("GitHub issue")}
+                        label={_t("bug_reporting|github_issue")}
                         onChange={this.onIssueUrlChange}
                         value={this.state.issueUrl}
                         placeholder="https://github.com/vector-im/element-web/issues/..."
@@ -269,15 +265,13 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                         rows={5}
                         onChange={this.onTextChange}
                         value={this.state.text}
-                        placeholder={_t(
-                            "If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here.",
-                        )}
+                        placeholder={_t("bug_reporting|additional_context")}
                     />
                     {progress}
                     {error}
                 </div>
                 <DialogButtons
-                    primaryButton={_t("Send logs")}
+                    primaryButton={_t("bug_reporting|send_logs")}
                     onPrimaryButtonClick={this.onSubmit}
                     focus={true}
                     onCancel={this.onCancel}

src/components/views/elements/ErrorBoundary.tsx

@@ -99,15 +99,12 @@ export default class ErrorBoundary extends React.PureComponent<Props, IState> {
                             )}
                         </p>
                         <p>
-                            {_t(
-                                "If you've submitted a bug via GitHub, debug logs can help us track down the problem. ",
-                            )}
-                            {_t(
-                                "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.",
-                            )}
+                            {_t("bug_reporting|introduction")}
+                            &nbsp;
+                            {_t("bug_reporting|description")}
                         </p>
                         <AccessibleButton onClick={this.onBugReport} kind="primary">
-                            {_t("Submit debug logs")}
+                            {_t("bug_reporting|submit_debug_logs")}
                         </AccessibleButton>
                     </React.Fragment>
                 );

src/components/views/rooms/MessageComposer.tsx

@@ -64,6 +64,7 @@ import { SdkContextClass } from "../../../contexts/SDKContext";
 import { VoiceBroadcastInfoState } from "../../../voice-broadcast";
 import { createCantStartVoiceMessageBroadcastDialog } from "../dialogs/CantStartVoiceMessageBroadcastDialog";
 import { UIFeature } from "../../../settings/UIFeature";
+import { formatTimeLeft } from "../../../DateUtils";
 
 let instanceCount = 0;
 
@@ -569,11 +570,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
         if (this.state.recordingTimeLeftSeconds) {
             const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds);
             recordingTooltip = (
-                <Tooltip
-                    id={this.tooltipId}
-                    label={_t("%(seconds)ss left", { seconds: secondsLeft })}
-                    alignment={Alignment.Top}
-                />
+                <Tooltip id={this.tooltipId} label={formatTimeLeft(secondsLeft)} alignment={Alignment.Top} />
             );
         }
 

src/components/views/rooms/MessageComposerFormatBar.tsx

@@ -54,7 +54,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
         return (
             <Toolbar className={classes} ref={this.formatBarRef} aria-label={_t("Formatting")}>
                 <FormatButton
-                    label={_t("Bold")}
+                    label={_t("composer|format_bold")}
                     onClick={() => this.props.onAction(Formatting.Bold)}
                     icon="Bold"
                     shortcut={this.props.shortcuts.bold}
@@ -68,13 +68,13 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
                     visible={this.state.visible}
                 />
                 <FormatButton
-                    label={_t("Strikethrough")}
+                    label={_t("composer|format_strikethrough")}
                     onClick={() => this.props.onAction(Formatting.Strikethrough)}
                     icon="Strikethrough"
                     visible={this.state.visible}
                 />
                 <FormatButton
-                    label={_t("Code block")}
+                    label={_t("composer|format_code_block")}
                     onClick={() => this.props.onAction(Formatting.Code)}
                     icon="Code"
                     shortcut={this.props.shortcuts.code}

src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx

@@ -93,47 +93,47 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
         <div className="mx_FormattingButtons">
             <Button
                 actionState={actionStates.bold}
-                label={_t("Bold")}
+                label={_t("composer|format_bold")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "b" }}
                 onClick={() => composer.bold()}
                 icon={<BoldIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.italic}
-                label={_t("Italic")}
+                label={_t("composer|format_italic")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "i" }}
                 onClick={() => composer.italic()}
                 icon={<ItalicIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.underline}
-                label={_t("Underline")}
+                label={_t("composer|format_underline")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "u" }}
                 onClick={() => composer.underline()}
                 icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.strikeThrough}
-                label={_t("Strikethrough")}
+                label={_t("composer|format_strikethrough")}
                 onClick={() => composer.strikeThrough()}
                 icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.unorderedList}
-                label={_t("Bulleted list")}
+                label={_t("composer|format_unordered_list")}
                 onClick={() => composer.unorderedList()}
                 icon={<BulletedListIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.orderedList}
-                label={_t("Numbered list")}
+                label={_t("composer|format_ordered_list")}
                 onClick={() => composer.orderedList()}
                 icon={<NumberedListIcon className="mx_FormattingButtons_Icon" />}
             />
             {isInList && (
                 <Button
                     actionState={actionStates.indent}
-                    label={_t("Indent increase")}
+                    label={_t("composer|format_increase_indent")}
                     onClick={() => composer.indent()}
                     icon={<IndentIcon className="mx_FormattingButtons_Icon" />}
                 />
@@ -141,7 +141,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             {isInList && (
                 <Button
                     actionState={actionStates.unindent}
-                    label={_t("Indent decrease")}
+                    label={_t("composer|format_decrease_indent")}
                     onClick={() => composer.unindent()}
                     icon={<UnIndentIcon className="mx_FormattingButtons_Icon" />}
                 />
@@ -154,20 +154,20 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             />
             <Button
                 actionState={actionStates.inlineCode}
-                label={_t("Code")}
+                label={_t("composer|format_inline_code")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
                 onClick={() => composer.inlineCode()}
                 icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.codeBlock}
-                label={_t("Code block")}
+                label={_t("composer|format_code_block")}
                 onClick={() => composer.codeBlock()}
                 icon={<CodeBlockIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.link}
-                label={_t("Link")}
+                label={_t("composer|format_link")}
                 onClick={() => openLinkModal(composer, composerContext, actionStates.link === "reversed")}
                 icon={<LinkIcon className="mx_FormattingButtons_Icon" />}
             />

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -274,26 +274,20 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         if (SdkConfig.get().bug_report_endpoint_url) {
             bugReportingSection = (
                 <SettingsSubsection
-                    heading={_t("Bug reporting")}
+                    heading={_t("bug_reporting|title")}
                     description={
                         <>
-                            <SettingsSubsectionText>
-                                {_t(
-                                    "If you've submitted a bug via GitHub, debug logs can help us track down the problem. ",
-                                )}
-                            </SettingsSubsectionText>
-                            {_t(
-                                "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.",
-                            )}
+                            <SettingsSubsectionText>{_t("bug_reporting|introduction")}</SettingsSubsectionText>
+                            {_t("bug_reporting|description")}
                         </>
                     }
                 >
                     <AccessibleButton onClick={this.onBugReport} kind="primary">
-                        {_t("Submit debug logs")}
+                        {_t("bug_reporting|submit_debug_logs")}
                     </AccessibleButton>
                     <SettingsSubsectionText>
                         {_t(
-                            "To report a Matrix-related security issue, please read the Matrix.org <a>Security Disclosure Policy</a>.",
+                            "bug_reporting|matrix_security_issue",
                             {},
                             {
                                 a: (sub) => (