Expose and pre-populate thread ID in devtools dialog (#10953)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -65,12 +65,13 @@ const Tools: Record<Category, [label: string, tool: Tool][]> = {
 
 interface IProps {
     roomId: string;
+    threadRootId?: string | null;
     onFinished(finished?: boolean): void;
 }
 
 type ToolInfo = [label: string, tool: Tool];
 
-const DevtoolsDialog: React.FC<IProps> = ({ roomId, onFinished }) => {
+const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished }) => {
     const [tool, setTool] = useState<ToolInfo | null>(null);
 
     let body: JSX.Element;
@@ -125,9 +126,18 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, onFinished }) => {
                         <CopyableText className="mx_DevTools_label_right" getTextToCopy={() => roomId} border={false}>
                             {_t("Room ID: %(roomId)s", { roomId })}
                         </CopyableText>
+                        {!threadRootId ? null : (
+                            <CopyableText
+                                className="mx_DevTools_label_right"
+                                getTextToCopy={() => threadRootId}
+                                border={false}
+                            >
+                                {_t("Thread Root ID: %(threadRootId)s", { threadRootId })}
+                            </CopyableText>
+                        )}
                         <div className="mx_DevTools_label_bottom" />
                         {cli.getRoom(roomId) && (
-                            <DevtoolsContext.Provider value={{ room: cli.getRoom(roomId)! }}>
+                            <DevtoolsContext.Provider value={{ room: cli.getRoom(roomId)!, threadRootId }}>
                                 {body}
                             </DevtoolsContext.Provider>
                         )}

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

@@ -88,6 +88,7 @@ export default BaseTool;
 
 interface IContext {
     room: Room;
+    threadRootId?: string | null;
 }
 
 export const DevtoolsContext = createContext<IContext>({} as IContext);

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

@@ -204,6 +204,13 @@ export const TimelineEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack })
         };
 
         defaultContent = stringify(newContent);
+    } else if (context.threadRootId) {
+        defaultContent = stringify({
+            "m.relates_to": {
+                rel_type: "m.thread",
+                event_id: context.threadRootId,
+            },
+        });
     }
 
     return <EventEditor fieldDefs={fields} defaultContent={defaultContent} onSend={onSend} onBack={onBack} />;

src/i18n/strings/en_EN.json

@@ -2841,6 +2841,7 @@
     "Toolbox": "Toolbox",
     "Developer Tools": "Developer Tools",
     "Room ID: %(roomId)s": "Room ID: %(roomId)s",
+    "Thread Root ID: %(threadRootId)s": "Thread Root ID: %(threadRootId)s",
     "The poll has ended. No votes were cast.": "The poll has ended. No votes were cast.",
     "The poll has ended. Top answer: %(topAnswer)s": "The poll has ended. Top answer: %(topAnswer)s",
     "Failed to end poll": "Failed to end poll",

test/components/views/dialogs/DevtoolsDialog-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { getByLabelText, render } from "@testing-library/react";
+import { getByLabelText, getAllByLabelText, 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";
@@ -29,10 +29,10 @@ describe("DevtoolsDialog", () => {
     let cli: MatrixClient;
     let room: Room;
 
-    function getComponent(roomId: string, onFinished = () => true) {
+    function getComponent(roomId: string, threadRootId: string | null = null, onFinished = () => true) {
         return render(
             <MatrixClientContext.Provider value={cli}>
-                <DevtoolsDialog roomId={roomId} onFinished={onFinished} />
+                <DevtoolsDialog roomId={roomId} threadRootId={threadRootId} onFinished={onFinished} />
             </MatrixClientContext.Provider>,
         );
     }
@@ -68,4 +68,20 @@ describe("DevtoolsDialog", () => {
         expect(navigator.clipboard.writeText).toHaveBeenCalled();
         expect(navigator.clipboard.readText()).resolves.toBe(room.roomId);
     });
+
+    it("copies the thread root id when provided", async () => {
+        const user = userEvent.setup();
+        jest.spyOn(navigator.clipboard, "writeText");
+
+        const threadRootId = "$test_event_id_goes_here";
+        const { container } = getComponent(room.roomId, threadRootId);
+
+        const copyBtn = getAllByLabelText(container, "Copy")[1];
+        await user.click(copyBtn);
+        const copiedBtn = getByLabelText(container, "Copied!");
+
+        expect(copiedBtn).toBeInTheDocument();
+        expect(navigator.clipboard.writeText).toHaveBeenCalled();
+        expect(navigator.clipboard.readText()).resolves.toBe(threadRootId);
+    });
 });

test/components/views/dialogs/devtools/Event-test.tsx

@@ -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 { render } from "@testing-library/react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { PendingEventOrdering } from "matrix-js-sdk/src/client";
+
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
+import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
+import { stubClient } from "../../../../test-utils";
+import { DevtoolsContext } from "../../../../../src/components/views/dialogs/devtools/BaseTool";
+import { TimelineEventEditor } from "../../../../../src/components/views/dialogs/devtools/Event";
+
+describe("<EventEditor />", () => {
+    beforeEach(() => {
+        stubClient();
+    });
+
+    it("should render", () => {
+        const cli = MatrixClientPeg.safeGet();
+        const { asFragment } = render(
+            <MatrixClientContext.Provider value={cli}>
+                <DevtoolsContext.Provider
+                    value={{
+                        room: new Room("!roomId", cli, "@alice:example.com", {
+                            pendingEventOrdering: PendingEventOrdering.Detached,
+                        }),
+                    }}
+                >
+                    <TimelineEventEditor onBack={() => {}} />
+                </DevtoolsContext.Provider>
+            </MatrixClientContext.Provider>,
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    describe("thread context", () => {
+        it("should pre-populate a thread relationship", () => {
+            const cli = MatrixClientPeg.safeGet();
+            const { asFragment } = render(
+                <MatrixClientContext.Provider value={cli}>
+                    <DevtoolsContext.Provider
+                        value={{
+                            room: new Room("!roomId", cli, "@alice:example.com", {
+                                pendingEventOrdering: PendingEventOrdering.Detached,
+                            }),
+                            threadRootId: "$this_is_a_thread_id",
+                        }}
+                    >
+                        <TimelineEventEditor onBack={() => {}} />
+                    </DevtoolsContext.Provider>
+                </MatrixClientContext.Provider>,
+            );
+            expect(asFragment()).toMatchSnapshot();
+        });
+    });
+});

test/components/views/dialogs/devtools/__snapshots__/Event-test.tsx.snap

@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EventEditor /> should render 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_DevTools_content"
+  >
+    <div
+      class="mx_DevTools_eventTypeStateKeyGroup"
+    >
+      <div
+        class="mx_Field mx_Field_input"
+      >
+        <input
+          autocomplete="on"
+          id="eventType"
+          label="Event Type"
+          placeholder="Event Type"
+          size="42"
+          type="text"
+          value=""
+        />
+        <label
+          for="eventType"
+        >
+          Event Type
+        </label>
+      </div>
+    </div>
+    <div
+      class="mx_Field mx_Field_textarea mx_DevTools_textarea"
+    >
+      <textarea
+        autocomplete="off"
+        id="evContent"
+        label="Event Content"
+        placeholder="Event Content"
+        type="text"
+      >
+        {
+
+}
+      </textarea>
+      <label
+        for="evContent"
+      >
+        Event Content
+      </label>
+    </div>
+  </div>
+  <div
+    class="mx_Dialog_buttons"
+  >
+    <button>
+      Back
+    </button>
+    <button>
+      Send
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<EventEditor /> thread context should pre-populate a thread relationship 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_DevTools_content"
+  >
+    <div
+      class="mx_DevTools_eventTypeStateKeyGroup"
+    >
+      <div
+        class="mx_Field mx_Field_input"
+      >
+        <input
+          autocomplete="on"
+          id="eventType"
+          label="Event Type"
+          placeholder="Event Type"
+          size="42"
+          type="text"
+          value=""
+        />
+        <label
+          for="eventType"
+        >
+          Event Type
+        </label>
+      </div>
+    </div>
+    <div
+      class="mx_Field mx_Field_textarea mx_DevTools_textarea"
+    >
+      <textarea
+        autocomplete="off"
+        id="evContent"
+        label="Event Content"
+        placeholder="Event Content"
+        type="text"
+      >
+        {
+  "m.relates_to": {
+    "rel_type": "m.thread",
+    "event_id": "$this_is_a_thread_id"
+  }
+}
+      </textarea>
+      <label
+        for="evContent"
+      >
+        Event Content
+      </label>
+    </div>
+  </div>
+  <div
+    class="mx_Dialog_buttons"
+  >
+    <button>
+      Back
+    </button>
+    <button>
+      Send
+    </button>
+  </div>
+</DocumentFragment>
+`;