Fix untranslated headings in the devtools dialog

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -69,7 +69,7 @@ interface IProps {
     onFinished(finished?: boolean): void;
 }
 
-type ToolInfo = [label: string, tool: Tool];
+type ToolInfo = [label: TranslationKey, tool: Tool];
 
 const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished }) => {
     const [tool, setTool] = useState<ToolInfo | null>(null);
@@ -116,7 +116,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
         );
     }
 
-    const label = tool ? tool[0] : _t("devtools|toolbox");
+    const label = tool ? _t(tool[0]) : _t("devtools|toolbox");
     return (
         <BaseDialog className="mx_QuestionDialog" onFinished={onFinished} title={_t("devtools|developer_tools")}>
             <MatrixClientContext.Consumer>

src/components/views/dialogs/devtools/AccountData.tsx

@@ -22,7 +22,7 @@ import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { EventEditor, EventViewer, eventTypeField, IEditorProps, stringify } from "./Event";
 import FilteredList from "./FilteredList";
-import { _t } from "../../../../languageHandler";
+import { _td, TranslationKey } from "../../../../languageHandler";
 
 export const AccountDataEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
     const cli = useContext(MatrixClientContext);
@@ -54,7 +54,7 @@ export const RoomAccountDataEventEditor: React.FC<IEditorProps> = ({ mxEvent, on
 interface IProps extends IDevtoolsProps {
     events: Map<string, MatrixEvent>;
     Editor: React.FC<IEditorProps>;
-    actionLabel: string;
+    actionLabel: TranslationKey;
 }
 
 const BaseAccountDataExplorer: React.FC<IProps> = ({ events, Editor, actionLabel, onBack, setTool }) => {
@@ -98,7 +98,7 @@ export const AccountDataExplorer: React.FC<IDevtoolsProps> = ({ onBack, setTool
         <BaseAccountDataExplorer
             events={cli.store.accountData}
             Editor={AccountDataEventEditor}
-            actionLabel={_t("devtools|send_custom_account_data_event")}
+            actionLabel={_td("devtools|send_custom_account_data_event")}
             onBack={onBack}
             setTool={setTool}
         />
@@ -112,7 +112,7 @@ export const RoomAccountDataExplorer: React.FC<IDevtoolsProps> = ({ onBack, setT
         <BaseAccountDataExplorer
             events={context.room.accountData}
             Editor={RoomAccountDataEventEditor}
-            actionLabel={_t("devtools|send_custom_room_account_data_event")}
+            actionLabel={_td("devtools|send_custom_room_account_data_event")}
             onBack={onBack}
             setTool={setTool}
         />

src/components/views/dialogs/devtools/BaseTool.tsx

@@ -19,13 +19,13 @@ import React, { createContext, ReactNode, useState } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
-import { _t } from "../../../../languageHandler";
+import { _t, TranslationKey } from "../../../../languageHandler";
 import { XOR } from "../../../../@types/common";
 import { Tool } from "../DevtoolsDialog";
 
 export interface IDevtoolsProps {
     onBack(): void;
-    setTool(label: string, tool: Tool): void;
+    setTool(label: TranslationKey, tool: Tool): void;
 }
 
 interface IMinProps extends Pick<IDevtoolsProps, "onBack"> {
@@ -35,7 +35,7 @@ interface IMinProps extends Pick<IDevtoolsProps, "onBack"> {
 }
 
 interface IProps extends IMinProps {
-    actionLabel: string;
+    actionLabel: TranslationKey;
     onAction(): Promise<string | void>;
 }
 
@@ -69,7 +69,7 @@ const BaseTool: React.FC<XOR<IMinProps, IProps>> = ({
             });
         };
 
-        actionButton = <button onClick={onActionClick}>{actionLabel}</button>;
+        actionButton = <button onClick={onActionClick}>{_t(actionLabel)}</button>;
     }
 
     return (

src/components/views/dialogs/devtools/Event.tsx

@@ -117,7 +117,7 @@ export const EventEditor: React.FC<IEventEditorProps> = ({ fieldDefs, defaultCon
     };
 
     return (
-        <BaseTool actionLabel={_t("forward|send_label")} onAction={onAction} onBack={onBack}>
+        <BaseTool actionLabel={_td("forward|send_label")} onAction={onAction} onBack={onBack}>
             <div className="mx_DevTools_eventTypeStateKeyGroup">{fields}</div>
 
             <Field
@@ -161,7 +161,7 @@ export const EventViewer: React.FC<IViewerProps> = ({ mxEvent, onBack, Editor, e
     };
 
     return (
-        <BaseTool onBack={onBack} actionLabel={_t("action|edit")} onAction={onAction} extraButton={extraButton}>
+        <BaseTool onBack={onBack} actionLabel={_td("action|edit")} onAction={onAction} extraButton={extraButton}>
             <SyntaxHighlight language="json">{stringify(mxEvent.event)}</SyntaxHighlight>
         </BaseTool>
     );

src/components/views/dialogs/devtools/RoomState.tsx

@@ -19,7 +19,7 @@ import React, { useContext, useEffect, useMemo, useState } from "react";
 import { IContent, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
-import { _t } from "../../../../languageHandler";
+import { _t, _td } from "../../../../languageHandler";
 import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { EventEditor, EventViewer, eventTypeField, stateKeyField, IEditorProps, stringify } from "./Event";
@@ -180,11 +180,11 @@ export const RoomStateExplorer: React.FC<IDevtoolsProps> = ({ onBack, setTool })
     }
 
     const onAction = async (): Promise<void> => {
-        setTool(_t("devtools|send_custom_state_event"), StateEventEditor);
+        setTool(_td("devtools|send_custom_state_event"), StateEventEditor);
     };
 
     return (
-        <BaseTool onBack={onBack} actionLabel={_t("devtools|send_custom_state_event")} onAction={onAction}>
+        <BaseTool onBack={onBack} actionLabel={_td("devtools|send_custom_state_event")} onAction={onAction}>
             <FilteredList query={query} onChange={setQuery}>
                 {Array.from(events.keys()).map((eventType) => (
                     <StateEventButton key={eventType} label={eventType} onClick={() => setEventType(eventType)} />

src/components/views/dialogs/devtools/SettingExplorer.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 import React, { ChangeEvent, useContext, useMemo, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { _t } from "../../../../languageHandler";
+import { _t, _td } from "../../../../languageHandler";
 import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
 import AccessibleButton from "../../elements/AccessibleButton";
 import SettingsStore, { LEVEL_ORDER } from "../../../../settings/SettingsStore";
@@ -130,7 +130,7 @@ const EditSetting: React.FC<IEditSettingProps> = ({ setting, onBack }) => {
     };
 
     return (
-        <BaseTool onBack={onBack} actionLabel={_t("devtools|save_setting_values")} onAction={onSave}>
+        <BaseTool onBack={onBack} actionLabel={_td("devtools|save_setting_values")} onAction={onSave}>
             <h3>
                 {_t("devtools|setting_colon")} <code>{setting}</code>
             </h3>
@@ -207,7 +207,7 @@ const ViewSetting: React.FC<IViewSettingProps> = ({ setting, onEdit, onBack }) =
     const context = useContext(DevtoolsContext);
 
     return (
-        <BaseTool onBack={onBack} actionLabel={_t("devtools|edit_values")} onAction={onEdit}>
+        <BaseTool onBack={onBack} actionLabel={_td("devtools|edit_values")} onAction={onEdit}>
             <h3>
                 {_t("devtools|setting_colon")} <code>{setting}</code>
             </h3>