Use CopyableText in devtools (#9993)
Co-authored-by: Alun Turner <alunt@element.io>
This commit is contained in:
Germain
GitHub
parent
c71dceb9a8
commit
e9d723269f
3 changed files with 310 additions and 5 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
/*
|
/*
|
||||||
Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
|
Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
|
||||||
Copyright 2018-2021 The Matrix.org Foundation C.I.C.
|
Copyright 2018-2023 The Matrix.org Foundation C.I.C.
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
|
|
@ -32,6 +32,7 @@ import SettingsFlag from "../elements/SettingsFlag";
|
||||||
import { SettingLevel } from "../../../settings/SettingLevel";
|
import { SettingLevel } from "../../../settings/SettingLevel";
|
||||||
import ServerInfo from "./devtools/ServerInfo";
|
import ServerInfo from "./devtools/ServerInfo";
|
||||||
import { Features } from "../../../settings/Settings";
|
import { Features } from "../../../settings/Settings";
|
||||||
|
import CopyableText from "../elements/CopyableText";
|
||||||
|
|
||||||
enum Category {
|
enum Category {
|
||||||
Room,
|
Room,
|
||||||
|
|
@ -119,11 +120,15 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, onFinished }) => {
|
||||||
{(cli) => (
|
{(cli) => (
|
||||||
<>
|
<>
|
||||||
<div className="mx_DevTools_label_left">{label}</div>
|
<div className="mx_DevTools_label_left">{label}</div>
|
||||||
<div className="mx_DevTools_label_right">{_t("Room ID: %(roomId)s", { roomId })}</div>
|
<CopyableText className="mx_DevTools_label_right" getTextToCopy={() => roomId} border={false}>
|
||||||
|
{_t("Room ID: %(roomId)s", { roomId })}
|
||||||
|
</CopyableText>
|
||||||
<div className="mx_DevTools_label_bottom" />
|
<div className="mx_DevTools_label_bottom" />
|
||||||
<DevtoolsContext.Provider value={{ room: cli.getRoom(roomId) }}>
|
{cli.getRoom(roomId) && (
|
||||||
{body}
|
<DevtoolsContext.Provider value={{ room: cli.getRoom(roomId)! }}>
|
||||||
</DevtoolsContext.Provider>
|
{body}
|
||||||
|
</DevtoolsContext.Provider>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</MatrixClientContext.Consumer>
|
</MatrixClientContext.Consumer>
|
||||||
|
|
|
||||||
71
test/components/views/dialogs/DevtoolsDialog-test.tsx
Normal file
71
test/components/views/dialogs/DevtoolsDialog-test.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
/*
|
||||||
|
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { getByLabelText, render } from "@testing-library/react";
|
||||||
|
import { Room } from "matrix-js-sdk/src/models/room";
|
||||||
|
import { MatrixClient } from "matrix-js-sdk/src/client";
|
||||||
|
import userEvent from "@testing-library/user-event";
|
||||||
|
|
||||||
|
import { stubClient } from "../../../test-utils";
|
||||||
|
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||||
|
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
||||||
|
import DevtoolsDialog from "../../../../src/components/views/dialogs/DevtoolsDialog";
|
||||||
|
|
||||||
|
describe("DevtoolsDialog", () => {
|
||||||
|
let cli: MatrixClient;
|
||||||
|
let room: Room;
|
||||||
|
|
||||||
|
function getComponent(roomId: string, onFinished = () => true) {
|
||||||
|
return render(
|
||||||
|
<MatrixClientContext.Provider value={cli}>
|
||||||
|
<DevtoolsDialog roomId={roomId} onFinished={onFinished} />
|
||||||
|
</MatrixClientContext.Provider>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
stubClient();
|
||||||
|
cli = MatrixClientPeg.get();
|
||||||
|
room = new Room("!id", cli, "@alice:matrix.org");
|
||||||
|
|
||||||
|
jest.spyOn(cli, "getRoom").mockReturnValue(room);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => {
|
||||||
|
jest.restoreAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders the devtools dialog", () => {
|
||||||
|
const { asFragment } = getComponent(room.roomId);
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("copies the roomid", async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
jest.spyOn(navigator.clipboard, "writeText");
|
||||||
|
|
||||||
|
const { container } = getComponent(room.roomId);
|
||||||
|
|
||||||
|
const copyBtn = getByLabelText(container, "Copy");
|
||||||
|
await user.click(copyBtn);
|
||||||
|
const copiedBtn = getByLabelText(container, "Copied!");
|
||||||
|
|
||||||
|
expect(copiedBtn).toBeInTheDocument();
|
||||||
|
expect(navigator.clipboard.writeText).toHaveBeenCalled();
|
||||||
|
expect(navigator.clipboard.readText()).resolves.toBe(room.roomId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`DevtoolsDialog renders the devtools dialog 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
data-focus-guard="true"
|
||||||
|
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-labelledby="mx_BaseDialog_title"
|
||||||
|
class="mx_QuestionDialog mx_Dialog_fixedWidth"
|
||||||
|
data-focus-lock-disabled="false"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="mx_Heading_h2 mx_Dialog_title"
|
||||||
|
id="mx_BaseDialog_title"
|
||||||
|
>
|
||||||
|
Developer Tools
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
aria-label="Close dialog"
|
||||||
|
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_DevTools_label_left"
|
||||||
|
>
|
||||||
|
Toolbox
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_CopyableText mx_DevTools_label_right"
|
||||||
|
>
|
||||||
|
Room ID: !id
|
||||||
|
<div
|
||||||
|
aria-label="Copy"
|
||||||
|
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_DevTools_label_bottom"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="mx_DevTools_content"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Room
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
Send custom timeline event
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
Explore room state
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
Explore room account data
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
View servers in room
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
Verification explorer
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
Active Widgets
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Other
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
Explore account data
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
Settings explorer
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx_DevTools_button"
|
||||||
|
>
|
||||||
|
Server info
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Options
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsFlag"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="mx_SettingsFlag_label"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mx_SettingsFlag_labelText"
|
||||||
|
>
|
||||||
|
Developer mode
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
aria-checked="false"
|
||||||
|
aria-disabled="false"
|
||||||
|
aria-label="Developer mode"
|
||||||
|
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||||
|
role="switch"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_ToggleSwitch_ball"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsFlag"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="mx_SettingsFlag_label"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mx_SettingsFlag_labelText"
|
||||||
|
>
|
||||||
|
Show hidden events in timeline
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
aria-checked="false"
|
||||||
|
aria-disabled="false"
|
||||||
|
aria-label="Show hidden events in timeline"
|
||||||
|
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||||
|
role="switch"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_ToggleSwitch_ball"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsFlag"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="mx_SettingsFlag_label"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mx_SettingsFlag_labelText"
|
||||||
|
>
|
||||||
|
Enable widget screenshots on supported widgets
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
aria-checked="false"
|
||||||
|
aria-disabled="false"
|
||||||
|
aria-label="Enable widget screenshots on supported widgets"
|
||||||
|
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||||
|
role="switch"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_ToggleSwitch_ball"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsFlag"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="mx_SettingsFlag_label"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mx_SettingsFlag_labelText"
|
||||||
|
>
|
||||||
|
Force 15s voice broadcast chunk length
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
aria-checked="false"
|
||||||
|
aria-disabled="false"
|
||||||
|
aria-label="Force 15s voice broadcast chunk length"
|
||||||
|
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||||
|
role="switch"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_ToggleSwitch_ball"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_Dialog_buttons"
|
||||||
|
>
|
||||||
|
<button>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
data-focus-guard="true"
|
||||||
|
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
Loading…
Reference in a new issue