Apply prettier formatting

2022-12-12 12:24:14 +01:00 · 2022-12-12 12:24:14 +01:00 · 526645c791
commit 526645c791
parent 1cac306093
1576 changed files with 65385 additions and 62478 deletions
--- a/src/components/views/dialogs/devtools/AccountData.tsx
+++ b/src/components/views/dialogs/devtools/AccountData.tsx
@ -26,9 +26,7 @@ import { _t } from "../../../../languageHandler";
 export const AccountDataEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
    const cli = useContext(MatrixClientContext);

-    const fields = useMemo(() => [
-        eventTypeField(mxEvent?.getType()),
-    ], [mxEvent]);
+    const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);

    const onSend = ([eventType]: string[], content?: IContent) => {
        return cli.setAccountData(eventType, content);
@ -42,9 +40,7 @@ export const RoomAccountDataEventEditor = ({ mxEvent, onBack }: IEditorProps) =>
    const context = useContext(DevtoolsContext);
    const cli = useContext(MatrixClientContext);

-    const fields = useMemo(() => [
-        eventTypeField(mxEvent?.getType()),
-    ], [mxEvent]);
+    const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);

    const onSend = ([eventType]: string[], content?: IContent) => {
        return cli.setRoomAccountData(context.room.roomId, eventType, content);
@ -75,43 +71,49 @@ const BaseAccountDataExplorer = ({ events, Editor, actionLabel, onBack, setTool
        setTool(actionLabel, Editor);
    };

-    return <BaseTool onBack={onBack} actionLabel={actionLabel} onAction={onAction}>
-        <FilteredList query={query} onChange={setQuery}>
-            {
-                Object.entries(events).map(([eventType, ev]) => {
+    return (
+        <BaseTool onBack={onBack} actionLabel={actionLabel} onAction={onAction}>
+            <FilteredList query={query} onChange={setQuery}>
+                {Object.entries(events).map(([eventType, ev]) => {
                    const onClick = () => {
                        setEvent(ev);
                    };

-                    return <button className="mx_DevTools_button" key={eventType} onClick={onClick}>
-                        { eventType }
-                    </button>;
-                })
-            }
-        </FilteredList>
-    </BaseTool>;
+                    return (
+                        <button className="mx_DevTools_button" key={eventType} onClick={onClick}>
+                            {eventType}
+                        </button>
+                    );
+                })}
+            </FilteredList>
+        </BaseTool>
+    );
 };

 export const AccountDataExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
    const cli = useContext(MatrixClientContext);

-    return <BaseAccountDataExplorer
-        events={cli.store.accountData}
-        Editor={AccountDataEventEditor}
-        actionLabel={_t("Send custom account data event")}
-        onBack={onBack}
-        setTool={setTool}
-    />;
+    return (
+        <BaseAccountDataExplorer
+            events={cli.store.accountData}
+            Editor={AccountDataEventEditor}
+            actionLabel={_t("Send custom account data event")}
+            onBack={onBack}
+            setTool={setTool}
+        />
+    );
 };

 export const RoomAccountDataExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
    const context = useContext(DevtoolsContext);

-    return <BaseAccountDataExplorer
-        events={context.room.accountData}
-        Editor={RoomAccountDataEventEditor}
-        actionLabel={_t("Send custom room account data event")}
-        onBack={onBack}
-        setTool={setTool}
-    />;
+    return (
+        <BaseAccountDataExplorer
+            events={context.room.accountData}
+            Editor={RoomAccountDataEventEditor}
+            actionLabel={_t("Send custom room account data event")}
+            onBack={onBack}
+            setTool={setTool}
+        />
+    );
 };
--- a/src/components/views/dialogs/devtools/BaseTool.tsx
+++ b/src/components/views/dialogs/devtools/BaseTool.tsx
@ -59,24 +59,18 @@ const BaseTool: React.FC<XOR<IMinProps, IProps>> = ({ className, actionLabel, on
            });
        };

-        actionButton = (
-            <button onClick={onActionClick}>
-                { actionLabel }
-            </button>
-        );
+        actionButton = <button onClick={onActionClick}>{actionLabel}</button>;
    }

-    return <>
-        <div className={classNames("mx_DevTools_content", className)}>
-            { children }
-        </div>
-        <div className="mx_Dialog_buttons">
-            <button onClick={onBackClick}>
-                { _t("Back") }
-            </button>
-            { actionButton }
-        </div>
-    </>;
+    return (
+        <>
+            <div className={classNames("mx_DevTools_content", className)}>{children}</div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={onBackClick}>{_t("Back")}</button>
+                {actionButton}
+            </div>
+        </>
+    );
 };

 export default BaseTool;
--- a/src/components/views/dialogs/devtools/Event.tsx
+++ b/src/components/views/dialogs/devtools/Event.tsx
@ -60,18 +60,20 @@ const validateEventContent = withValidation<any, Error | undefined>({
            return e;
        }
    },
-    rules: [{
-        key: "validJson",
-        test: ({ value }, error) => {
-            if (!value) return true;
-            return !error;
+    rules: [
+        {
+            key: "validJson",
+            test: ({ value }, error) => {
+                if (!value) return true;
+                return !error;
+            },
+            invalid: (error) => _t("Doesn't look like valid JSON.") + " " + error,
        },
-        invalid: (error) => _t("Doesn't look like valid JSON.") + " " + error,
-    }],
+    ],
 });

 export const EventEditor = ({ fieldDefs, defaultContent = "{\n\n}", onSend, onBack }: IEventEditorProps) => {
-    const [fieldData, setFieldData] = useState<string[]>(fieldDefs.map(def => def.default ?? ""));
+    const [fieldData, setFieldData] = useState<string[]>(fieldDefs.map((def) => def.default ?? ""));
    const [content, setContent] = useState<string>(defaultContent);
    const contentField = useRef<Field>();

@ -85,10 +87,12 @@ export const EventEditor = ({ fieldDefs, defaultContent = "{\n\n}", onSend, onBa
            type="text"
            autoComplete="on"
            value={fieldData[i]}
-            onChange={ev => setFieldData(data => {
-                data[i] = ev.target.value;
-                return [...data];
-            })}
+            onChange={(ev) =>
+                setFieldData((data) => {
+                    data[i] = ev.target.value;
+                    return [...data];
+                })
+            }
        />
    ));

@ -110,29 +114,25 @@ export const EventEditor = ({ fieldDefs, defaultContent = "{\n\n}", onSend, onBa
        return _t("Event sent!");
    };

-    return <BaseTool
-        actionLabel={_t("Send")}
-        onAction={onAction}
-        onBack={onBack}
-    >
-        <div className="mx_DevTools_eventTypeStateKeyGroup">
-            { fields }
-        </div>
+    return (
+        <BaseTool actionLabel={_t("Send")} onAction={onAction} onBack={onBack}>
+            <div className="mx_DevTools_eventTypeStateKeyGroup">{fields}</div>

-        <Field
-            id="evContent"
-            label={_t("Event Content")}
-            type="text"
-            className="mx_DevTools_textarea"
-            autoComplete="off"
-            value={content}
-            onChange={ev => setContent(ev.target.value)}
-            element="textarea"
-            onValidate={validateEventContent}
-            ref={contentField}
-            autoFocus={!!defaultContent}
-        />
-    </BaseTool>;
+            <Field
+                id="evContent"
+                label={_t("Event Content")}
+                type="text"
+                className="mx_DevTools_textarea"
+                autoComplete="off"
+                value={content}
+                onChange={(ev) => setContent(ev.target.value)}
+                element="textarea"
+                onValidate={validateEventContent}
+                ref={contentField}
+                autoFocus={!!defaultContent}
+            />
+        </BaseTool>
+    );
 };

 export interface IEditorProps extends Pick<IDevtoolsProps, "onBack"> {
@ -157,11 +157,11 @@ export const EventViewer = ({ mxEvent, onBack, Editor }: IViewerProps) => {
        setEditing(true);
    };

-    return <BaseTool onBack={onBack} actionLabel={_t("Edit")} onAction={onAction}>
-        <SyntaxHighlight language="json">
-            { stringify(mxEvent.event) }
-        </SyntaxHighlight>
-    </BaseTool>;
+    return (
+        <BaseTool onBack={onBack} actionLabel={_t("Edit")} onAction={onAction}>
+            <SyntaxHighlight language="json">{stringify(mxEvent.event)}</SyntaxHighlight>
+        </BaseTool>
+    );
 };

 // returns the id of the initial message, not the id of the previous edit
@ -175,9 +175,7 @@ export const TimelineEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
    const context = useContext(DevtoolsContext);
    const cli = useContext(MatrixClientContext);

-    const fields = useMemo(() => [
-        eventTypeField(mxEvent?.getType()),
-    ], [mxEvent]);
+    const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);

    const onSend = ([eventType]: string[], content?: IContent) => {
        return cli.sendEvent(context.room.roomId, eventType, content);
--- a/src/components/views/dialogs/devtools/FilteredList.tsx
+++ b/src/components/views/dialogs/devtools/FilteredList.tsx
@ -53,38 +53,43 @@ const FilteredList = ({ children, query, onChange }: IProps) => {

    const createOverflowElement = (overflowCount: number, totalCount: number) => {
        const showMore = () => {
-            setTruncateAt(num => num + LOAD_TILES_STEP_SIZE);
+            setTruncateAt((num) => num + LOAD_TILES_STEP_SIZE);
        };

-        return <button className="mx_DevTools_button" onClick={showMore}>
-            { _t("and %(count)s others...", { count: overflowCount }) }
-        </button>;
+        return (
+            <button className="mx_DevTools_button" onClick={showMore}>
+                {_t("and %(count)s others...", { count: overflowCount })}
+            </button>
+        );
    };

-    return <>
-        <Field
-            label={_t('Filter results')}
-            autoFocus={true}
-            size={64}
-            type="text"
-            autoComplete="off"
-            value={query}
-            onChange={ev => onChange(ev.target.value)}
-            className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
-            // force re-render so that autoFocus is applied when this component is re-used
-            key={children?.[0]?.key ?? ''}
-        />
-
-        { filteredChildren.length < 1
-            ? _t("No results found")
-            : <TruncatedList
-                getChildren={getChildren}
-                getChildCount={getChildCount}
-                truncateAt={truncateAt}
-                createOverflowElement={createOverflowElement}
+    return (
+        <>
+            <Field
+                label={_t("Filter results")}
+                autoFocus={true}
+                size={64}
+                type="text"
+                autoComplete="off"
+                value={query}
+                onChange={(ev) => onChange(ev.target.value)}
+                className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
+                // force re-render so that autoFocus is applied when this component is re-used
+                key={children?.[0]?.key ?? ""}
            />
-        }
-    </>;
+
+            {filteredChildren.length < 1 ? (
+                _t("No results found")
+            ) : (
+                <TruncatedList
+                    getChildren={getChildren}
+                    getChildCount={getChildCount}
+                    truncateAt={truncateAt}
+                    createOverflowElement={createOverflowElement}
+                />
+            )}
+        </>
+    );
 };

 export default FilteredList;
--- a/src/components/views/dialogs/devtools/RoomState.tsx
+++ b/src/components/views/dialogs/devtools/RoomState.tsx
@ -28,10 +28,10 @@ export const StateEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
    const context = useContext(DevtoolsContext);
    const cli = useContext(MatrixClientContext);

-    const fields = useMemo(() => [
-        eventTypeField(mxEvent?.getType()),
-        stateKeyField(mxEvent?.getStateKey()),
-    ], [mxEvent]);
+    const fields = useMemo(
+        () => [eventTypeField(mxEvent?.getType()), stateKeyField(mxEvent?.getStateKey())],
+        [mxEvent],
+    );

    const onSend = ([eventType, stateKey]: string[], content?: IContent) => {
        return cli.sendStateEvent(context.room.roomId, eventType, content, stateKey);
@ -49,15 +49,17 @@ interface StateEventButtonProps {
 const StateEventButton = ({ label, onClick }: StateEventButtonProps) => {
    const trimmed = label.trim();

-    return <button
-        className={classNames("mx_DevTools_button", {
-            mx_DevTools_RoomStateExplorer_button_hasSpaces: trimmed.length !== label.length,
-            mx_DevTools_RoomStateExplorer_button_emptyString: !trimmed,
-        })}
-        onClick={onClick}
-    >
-        { trimmed ? label : _t("<%(count)s spaces>", { count: label.length }) }
-    </button>;
+    return (
+        <button
+            className={classNames("mx_DevTools_button", {
+                mx_DevTools_RoomStateExplorer_button_hasSpaces: trimmed.length !== label.length,
+                mx_DevTools_RoomStateExplorer_button_emptyString: !trimmed,
+            })}
+            onClick={onClick}
+        >
+            {trimmed ? label : _t("<%(count)s spaces>", { count: label.length })}
+        </button>
+    );
 };

 interface IEventTypeProps extends Pick<IDevtoolsProps, "onBack"> {
@ -90,15 +92,15 @@ const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
        return <EventViewer mxEvent={event} onBack={_onBack} Editor={StateEventEditor} />;
    }

-    return <BaseTool onBack={onBack}>
-        <FilteredList query={query} onChange={setQuery}>
-            {
-                Array.from(events.entries()).map(([stateKey, ev]) => (
+    return (
+        <BaseTool onBack={onBack}>
+            <FilteredList query={query} onChange={setQuery}>
+                {Array.from(events.entries()).map(([stateKey, ev]) => (
                    <StateEventButton key={stateKey} label={stateKey} onClick={() => setEvent(ev)} />
-                ))
-            }
-        </FilteredList>
-    </BaseTool>;
+                ))}
+            </FilteredList>
+        </BaseTool>
+    );
 };

 export const RoomStateExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
@ -119,13 +121,13 @@ export const RoomStateExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
        setTool(_t("Send custom state event"), StateEventEditor);
    };

-    return <BaseTool onBack={onBack} actionLabel={_t("Send custom state event")} onAction={onAction}>
-        <FilteredList query={query} onChange={setQuery}>
-            {
-                Array.from(events.keys()).map((eventType) => (
+    return (
+        <BaseTool onBack={onBack} actionLabel={_t("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)} />
-                ))
-            }
-        </FilteredList>
-    </BaseTool>;
+                ))}
+            </FilteredList>
+        </BaseTool>
+    );
 };
--- a/src/components/views/dialogs/devtools/ServerInfo.tsx
+++ b/src/components/views/dialogs/devtools/ServerInfo.tsx
@ -66,30 +66,33 @@ const ServerInfo = ({ onBack }: IDevtoolsProps) => {
    if (!capabilities || !clientVersions || !serverVersions) {
        body = <Spinner />;
    } else {
-        body = <>
-            <h4>{ _t("Capabilities") }</h4>
-            { capabilities !== FAILED_TO_LOAD
-                ? <SyntaxHighlight language="json" children={JSON.stringify(capabilities, null, 4)} />
-                : <div>{ _t("Failed to load.") }</div>
-            }
+        body = (
+            <>
+                <h4>{_t("Capabilities")}</h4>
+                {capabilities !== FAILED_TO_LOAD ? (
+                    <SyntaxHighlight language="json" children={JSON.stringify(capabilities, null, 4)} />
+                ) : (
+                    <div>{_t("Failed to load.")}</div>
+                )}

-            <h4>{ _t("Client Versions") }</h4>
-            { clientVersions !== FAILED_TO_LOAD
-                ? <SyntaxHighlight language="json" children={JSON.stringify(clientVersions, null, 4)} />
-                : <div>{ _t("Failed to load.") }</div>
-            }
+                <h4>{_t("Client Versions")}</h4>
+                {clientVersions !== FAILED_TO_LOAD ? (
+                    <SyntaxHighlight language="json" children={JSON.stringify(clientVersions, null, 4)} />
+                ) : (
+                    <div>{_t("Failed to load.")}</div>
+                )}

-            <h4>{ _t("Server Versions") }</h4>
-            { serverVersions !== FAILED_TO_LOAD
-                ? <SyntaxHighlight language="json" children={JSON.stringify(serverVersions, null, 4)} />
-                : <div>{ _t("Failed to load.") }</div>
-            }
-        </>;
+                <h4>{_t("Server Versions")}</h4>
+                {serverVersions !== FAILED_TO_LOAD ? (
+                    <SyntaxHighlight language="json" children={JSON.stringify(serverVersions, null, 4)} />
+                ) : (
+                    <div>{_t("Failed to load.")}</div>
+                )}
+            </>
+        );
    }

-    return <BaseTool onBack={onBack}>
-        { body }
-    </BaseTool>;
+    return <BaseTool onBack={onBack}>{body}</BaseTool>;
 };

 export default ServerInfo;
--- a/src/components/views/dialogs/devtools/ServersInRoom.tsx
+++ b/src/components/views/dialogs/devtools/ServersInRoom.tsx
@ -25,7 +25,7 @@ const ServersInRoom = ({ onBack }: IDevtoolsProps) => {

    const servers = useMemo<Record<string, number>>(() => {
        const servers: Record<string, number> = {};
-        context.room.currentState.getStateEvents(EventType.RoomMember).forEach(ev => {
+        context.room.currentState.getStateEvents(EventType.RoomMember).forEach((ev) => {
            if (ev.getContent().membership !== "join") return; // only count joined users
            const server = ev.getSender().split(":")[1];
            servers[server] = (servers[server] ?? 0) + 1;
@ -33,24 +33,26 @@ const ServersInRoom = ({ onBack }: IDevtoolsProps) => {
        return servers;
    }, [context.room]);

-    return <BaseTool onBack={onBack}>
-        <table>
-            <thead>
-                <tr>
-                    <th>{ _t("Server") }</th>
-                    <th>{ _t("Number of users") }</th>
-                </tr>
-            </thead>
-            <tbody>
-                { Object.entries(servers).map(([server, numUsers]) => (
-                    <tr key={server}>
-                        <td>{ server }</td>
-                        <td>{ numUsers }</td>
+    return (
+        <BaseTool onBack={onBack}>
+            <table>
+                <thead>
+                    <tr>
+                        <th>{_t("Server")}</th>
+                        <th>{_t("Number of users")}</th>
                    </tr>
-                )) }
-            </tbody>
-        </table>
-    </BaseTool>;
+                </thead>
+                <tbody>
+                    {Object.entries(servers).map(([server, numUsers]) => (
+                        <tr key={server}>
+                            <td>{server}</td>
+                            <td>{numUsers}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </BaseTool>
+    );
 };

 export default ServersInRoom;
--- a/src/components/views/dialogs/devtools/SettingExplorer.tsx
+++ b/src/components/views/dialogs/devtools/SettingExplorer.tsx
@ -66,7 +66,11 @@ interface ICanEditLevelFieldProps {
 const CanEditLevelField = ({ setting, roomId, level }: ICanEditLevelFieldProps) => {
    const canEdit = SettingsStore.canSetValue(setting, roomId, level);
    const className = canEdit ? "mx_DevTools_SettingsExplorer_mutable" : "mx_DevTools_SettingsExplorer_immutable";
-    return <td className={className}><code>{ canEdit.toString() }</code></td>;
+    return (
+        <td className={className}>
+            <code>{canEdit.toString()}</code>
+        </td>
+    );
 };

 function renderExplicitSettingValues(setting: string, roomId: string): string {
@ -91,8 +95,9 @@ interface IEditSettingProps extends Pick<IDevtoolsProps, "onBack"> {
 const EditSetting = ({ setting, onBack }: IEditSettingProps) => {
    const context = useContext(DevtoolsContext);
    const [explicitValue, setExplicitValue] = useState(renderExplicitSettingValues(setting, null));
-    const [explicitRoomValue, setExplicitRoomValue] =
-        useState(renderExplicitSettingValues(setting, context.room.roomId));
+    const [explicitRoomValue, setExplicitRoomValue] = useState(
+        renderExplicitSettingValues(setting, context.room.roomId),
+    );

    const onSave = async () => {
        try {
@ -124,65 +129,73 @@ const EditSetting = ({ setting, onBack }: IEditSettingProps) => {
        }
    };

-    return <BaseTool onBack={onBack} actionLabel={_t("Save setting values")} onAction={onSave}>
-        <h3>{ _t("Setting:") } <code>{ setting }</code></h3>
+    return (
+        <BaseTool onBack={onBack} actionLabel={_t("Save setting values")} onAction={onSave}>
+            <h3>
+                {_t("Setting:")} <code>{setting}</code>
+            </h3>

-        <div className="mx_DevTools_SettingsExplorer_warning">
-            <b>{ _t("Caution:") }</b> { _t("This UI does NOT check the types of the values. Use at your own risk.") }
-        </div>
+            <div className="mx_DevTools_SettingsExplorer_warning">
+                <b>{_t("Caution:")}</b> {_t("This UI does NOT check the types of the values. Use at your own risk.")}
+            </div>

-        <div>
-            { _t("Setting definition:") }
-            <pre><code>{ JSON.stringify(SETTINGS[setting], null, 4) }</code></pre>
-        </div>
+            <div>
+                {_t("Setting definition:")}
+                <pre>
+                    <code>{JSON.stringify(SETTINGS[setting], null, 4)}</code>
+                </pre>
+            </div>

-        <div>
-            <table>
-                <thead>
-                    <tr>
-                        <th>{ _t("Level") }</th>
-                        <th>{ _t("Settable at global") }</th>
-                        <th>{ _t("Settable at room") }</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    { LEVEL_ORDER.map(lvl => (
-                        <tr key={lvl}>
-                            <td><code>{ lvl }</code></td>
-                            <CanEditLevelField setting={setting} level={lvl} />
-                            <CanEditLevelField setting={setting} roomId={context.room.roomId} level={lvl} />
+            <div>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>{_t("Level")}</th>
+                            <th>{_t("Settable at global")}</th>
+                            <th>{_t("Settable at room")}</th>
                        </tr>
-                    )) }
-                </tbody>
-            </table>
-        </div>
+                    </thead>
+                    <tbody>
+                        {LEVEL_ORDER.map((lvl) => (
+                            <tr key={lvl}>
+                                <td>
+                                    <code>{lvl}</code>
+                                </td>
+                                <CanEditLevelField setting={setting} level={lvl} />
+                                <CanEditLevelField setting={setting} roomId={context.room.roomId} level={lvl} />
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>

-        <div>
-            <Field
-                id="valExpl"
-                label={_t("Values at explicit levels")}
-                type="text"
-                className="mx_DevTools_textarea"
-                element="textarea"
-                autoComplete="off"
-                value={explicitValue}
-                onChange={e => setExplicitValue(e.target.value)}
-            />
-        </div>
+            <div>
+                <Field
+                    id="valExpl"
+                    label={_t("Values at explicit levels")}
+                    type="text"
+                    className="mx_DevTools_textarea"
+                    element="textarea"
+                    autoComplete="off"
+                    value={explicitValue}
+                    onChange={(e) => setExplicitValue(e.target.value)}
+                />
+            </div>

-        <div>
-            <Field
-                id="valExpl"
-                label={_t("Values at explicit levels in this room")}
-                type="text"
-                className="mx_DevTools_textarea"
-                element="textarea"
-                autoComplete="off"
-                value={explicitRoomValue}
-                onChange={e => setExplicitRoomValue(e.target.value)}
-            />
-        </div>
-    </BaseTool>;
+            <div>
+                <Field
+                    id="valExpl"
+                    label={_t("Values at explicit levels in this room")}
+                    type="text"
+                    className="mx_DevTools_textarea"
+                    element="textarea"
+                    autoComplete="off"
+                    value={explicitRoomValue}
+                    onChange={(e) => setExplicitRoomValue(e.target.value)}
+                />
+            </div>
+        </BaseTool>
+    );
 };

 interface IViewSettingProps extends Pick<IDevtoolsProps, "onBack"> {
@ -193,40 +206,50 @@ interface IViewSettingProps extends Pick<IDevtoolsProps, "onBack"> {
 const ViewSetting = ({ setting, onEdit, onBack }: IViewSettingProps) => {
    const context = useContext(DevtoolsContext);

-    return <BaseTool onBack={onBack} actionLabel={_t("Edit values")} onAction={onEdit}>
-        <h3>{ _t("Setting:") } <code>{ setting }</code></h3>
+    return (
+        <BaseTool onBack={onBack} actionLabel={_t("Edit values")} onAction={onEdit}>
+            <h3>
+                {_t("Setting:")} <code>{setting}</code>
+            </h3>

-        <div>
-            { _t("Setting definition:") }
-            <pre><code>{ JSON.stringify(SETTINGS[setting], null, 4) }</code></pre>
-        </div>
+            <div>
+                {_t("Setting definition:")}
+                <pre>
+                    <code>{JSON.stringify(SETTINGS[setting], null, 4)}</code>
+                </pre>
+            </div>

-        <div>
-            { _t("Value:") }&nbsp;
-            <code>{ renderSettingValue(SettingsStore.getValue(setting)) }</code>
-        </div>
+            <div>
+                {_t("Value:")}&nbsp;
+                <code>{renderSettingValue(SettingsStore.getValue(setting))}</code>
+            </div>

-        <div>
-            { _t("Value in this room:") }&nbsp;
-            <code>{ renderSettingValue(SettingsStore.getValue(setting, context.room.roomId)) }</code>
-        </div>
+            <div>
+                {_t("Value in this room:")}&nbsp;
+                <code>{renderSettingValue(SettingsStore.getValue(setting, context.room.roomId))}</code>
+            </div>

-        <div>
-            { _t("Values at explicit levels:") }
-            <pre><code>{ renderExplicitSettingValues(setting, null) }</code></pre>
-        </div>
+            <div>
+                {_t("Values at explicit levels:")}
+                <pre>
+                    <code>{renderExplicitSettingValues(setting, null)}</code>
+                </pre>
+            </div>

-        <div>
-            { _t("Values at explicit levels in this room:") }
-            <pre><code>{ renderExplicitSettingValues(setting, context.room.roomId) }</code></pre>
-        </div>
-    </BaseTool>;
+            <div>
+                {_t("Values at explicit levels in this room:")}
+                <pre>
+                    <code>{renderExplicitSettingValues(setting, context.room.roomId)}</code>
+                </pre>
+            </div>
+        </BaseTool>
+    );
 };

 function renderSettingValue(val: any): string {
    // Note: we don't .toString() a string because we want JSON.stringify to inject quotes for us
    const toStringTypes = ["boolean", "number"];
-    if (toStringTypes.includes(typeof(val))) {
+    if (toStringTypes.includes(typeof val)) {
        return val.toString();
    } else {
        return JSON.stringify(val);
@ -246,60 +269,60 @@ const SettingsList = ({ onBack, onView, onEdit }: ISettingsListProps) => {
        let allSettings = Object.keys(SETTINGS);
        if (query) {
            const lcQuery = query.toLowerCase();
-            allSettings = allSettings.filter(setting => setting.toLowerCase().includes(lcQuery));
+            allSettings = allSettings.filter((setting) => setting.toLowerCase().includes(lcQuery));
        }
        return allSettings;
    }, [query]);

-    return <BaseTool onBack={onBack} className="mx_DevTools_SettingsExplorer">
-        <Field
-            label={_t("Filter results")}
-            autoFocus={true}
-            size={64}
-            type="text"
-            autoComplete="off"
-            value={query}
-            onChange={ev => setQuery(ev.target.value)}
-            className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
-        />
-        <table>
-            <thead>
-                <tr>
-                    <th>{ _t("Setting ID") }</th>
-                    <th>{ _t("Value") }</th>
-                    <th>{ _t("Value in this room") }</th>
-                </tr>
-            </thead>
-            <tbody>
-                { allSettings.map(i => (
-                    <tr key={i}>
-                        <td>
-                            <AccessibleButton
-                                kind="link_inline"
-                                className="mx_DevTools_SettingsExplorer_setting"
-                                onClick={() => onView(i)}
-                            >
-                                <code>{ i }</code>
-                            </AccessibleButton>
-                            <AccessibleButton
-                                alt={_t("Edit setting")}
-                                onClick={() => onEdit(i)}
-                                className="mx_DevTools_SettingsExplorer_edit"
-                            >
-                                ✏
-                            </AccessibleButton>
-                        </td>
-                        <td>
-                            <code>{ renderSettingValue(SettingsStore.getValue(i)) }</code>
-                        </td>
-                        <td>
-                            <code>
-                                { renderSettingValue(SettingsStore.getValue(i, context.room.roomId)) }
-                            </code>
-                        </td>
+    return (
+        <BaseTool onBack={onBack} className="mx_DevTools_SettingsExplorer">
+            <Field
+                label={_t("Filter results")}
+                autoFocus={true}
+                size={64}
+                type="text"
+                autoComplete="off"
+                value={query}
+                onChange={(ev) => setQuery(ev.target.value)}
+                className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
+            />
+            <table>
+                <thead>
+                    <tr>
+                        <th>{_t("Setting ID")}</th>
+                        <th>{_t("Value")}</th>
+                        <th>{_t("Value in this room")}</th>
                    </tr>
-                )) }
-            </tbody>
-        </table>
-    </BaseTool>;
+                </thead>
+                <tbody>
+                    {allSettings.map((i) => (
+                        <tr key={i}>
+                            <td>
+                                <AccessibleButton
+                                    kind="link_inline"
+                                    className="mx_DevTools_SettingsExplorer_setting"
+                                    onClick={() => onView(i)}
+                                >
+                                    <code>{i}</code>
+                                </AccessibleButton>
+                                <AccessibleButton
+                                    alt={_t("Edit setting")}
+                                    onClick={() => onEdit(i)}
+                                    className="mx_DevTools_SettingsExplorer_edit"
+                                >
+                                    ✏
+                                </AccessibleButton>
+                            </td>
+                            <td>
+                                <code>{renderSettingValue(SettingsStore.getValue(i))}</code>
+                            </td>
+                            <td>
+                                <code>{renderSettingValue(SettingsStore.getValue(i, context.room.roomId))}</code>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </BaseTool>
+    );
 };
--- a/src/components/views/dialogs/devtools/VerificationExplorer.tsx
+++ b/src/components/views/dialogs/devtools/VerificationExplorer.tsx
@ -55,25 +55,29 @@ const VerificationRequestExplorer: React.FC<{
            setRequestTimeout(request.timeout);
        }, 500);

-        return () => { clearInterval(id); };
+        return () => {
+            clearInterval(id);
+        };
    }, [request]);

-    return (<div className="mx_DevTools_VerificationRequest">
-        <dl>
-            <dt>{ _t("Transaction") }</dt>
-            <dd>{ txnId }</dd>
-            <dt>{ _t("Phase") }</dt>
-            <dd>{ PHASE_MAP[request.phase] ? _t(PHASE_MAP[request.phase]) : request.phase }</dd>
-            <dt>{ _t("Timeout") }</dt>
-            <dd>{ Math.floor(timeout / 1000) }</dd>
-            <dt>{ _t("Methods") }</dt>
-            <dd>{ request.methods && request.methods.join(", ") }</dd>
-            <dt>{ _t("Requester") }</dt>
-            <dd>{ request.requestingUserId }</dd>
-            <dt>{ _t("Observe only") }</dt>
-            <dd>{ JSON.stringify(request.observeOnly) }</dd>
-        </dl>
-    </div>);
+    return (
+        <div className="mx_DevTools_VerificationRequest">
+            <dl>
+                <dt>{_t("Transaction")}</dt>
+                <dd>{txnId}</dd>
+                <dt>{_t("Phase")}</dt>
+                <dd>{PHASE_MAP[request.phase] ? _t(PHASE_MAP[request.phase]) : request.phase}</dd>
+                <dt>{_t("Timeout")}</dt>
+                <dd>{Math.floor(timeout / 1000)}</dd>
+                <dt>{_t("Methods")}</dt>
+                <dd>{request.methods && request.methods.join(", ")}</dd>
+                <dt>{_t("Requester")}</dt>
+                <dd>{request.requestingUserId}</dd>
+                <dt>{_t("Observe only")}</dt>
+                <dd>{JSON.stringify(request.observeOnly)}</dd>
+            </dl>
+        </div>
+    );
 };

 const VerificationExplorer = ({ onBack }: IDevtoolsProps) => {
@ -81,16 +85,22 @@ const VerificationExplorer = ({ onBack }: IDevtoolsProps) => {
    const context = useContext(DevtoolsContext);

    const requests = useTypedEventEmitterState(cli, CryptoEvent.VerificationRequest, () => {
-        return cli.crypto.inRoomVerificationRequests["requestsByRoomId"]?.get(context.room.roomId)
-            ?? new Map<string, VerificationRequest>();
+        return (
+            cli.crypto.inRoomVerificationRequests["requestsByRoomId"]?.get(context.room.roomId) ??
+            new Map<string, VerificationRequest>()
+        );
    });

-    return <BaseTool onBack={onBack}>
-        { Array.from(requests.entries()).reverse().map(([txnId, request]) =>
-            <VerificationRequestExplorer txnId={txnId} request={request} key={txnId} />,
-        ) }
-        { requests.size < 1 && _t("No verification requests found") }
-    </BaseTool>;
+    return (
+        <BaseTool onBack={onBack}>
+            {Array.from(requests.entries())
+                .reverse()
+                .map(([txnId, request]) => (
+                    <VerificationRequestExplorer txnId={txnId} request={request} key={txnId} />
+                ))}
+            {requests.size < 1 && _t("No verification requests found")}
+        </BaseTool>
+    );
 };

 export default VerificationExplorer;
--- a/src/components/views/dialogs/devtools/WidgetExplorer.tsx
+++ b/src/components/views/dialogs/devtools/WidgetExplorer.tsx
@ -43,26 +43,30 @@ const WidgetExplorer = ({ onBack }: IDevtoolsProps) => {
            Array.from(context.room.currentState.events.values()).map((e: Map<string, MatrixEvent>) => {
                return e.values();
            }),
-        ).reduce((p, c) => { p.push(...c); return p; }, []);
-        const event = allState.find(ev => ev.getId() === widget.eventId);
-        if (!event) { // "should never happen"
-            return <BaseTool onBack={onBack}>
-                { _t("There was an error finding this widget.") }
-            </BaseTool>;
+        ).reduce((p, c) => {
+            p.push(...c);
+            return p;
+        }, []);
+        const event = allState.find((ev) => ev.getId() === widget.eventId);
+        if (!event) {
+            // "should never happen"
+            return <BaseTool onBack={onBack}>{_t("There was an error finding this widget.")}</BaseTool>;
        }

        return <StateEventEditor mxEvent={event} onBack={onBack} />;
    }

-    return <BaseTool onBack={onBack}>
-        <FilteredList query={query} onChange={setQuery}>
-            { widgets.map(w => (
-                <button className="mx_DevTools_button" key={w.url + w.eventId} onClick={() => setWidget(w)}>
-                    { w.url }
-                </button>
-            )) }
-        </FilteredList>
-    </BaseTool>;
+    return (
+        <BaseTool onBack={onBack}>
+            <FilteredList query={query} onChange={setQuery}>
+                {widgets.map((w) => (
+                    <button className="mx_DevTools_button" key={w.url + w.eventId} onClick={() => setWidget(w)}>
+                        {w.url}
+                    </button>
+                ))}
+            </FilteredList>
+        </BaseTool>
+    );
 };

 export default WidgetExplorer;