Add copy buttons for event & room ID (#8302)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/elements/_CopyableText.scss

@@ -18,14 +18,17 @@ limitations under the License.
 .mx_CopyableText {
     display: flex;
     justify-content: space-between;
-    border-radius: 5px;
-    border: solid 1px $light-fg-color;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    padding: 10px;
     width: max-content;
     max-width: 100%;
 
+    &.mx_CopyableText_border {
+        border-radius: 5px;
+        border: solid 1px $light-fg-color;
+        margin-bottom: 10px;
+        margin-top: 10px;
+        padding: 10px;
+    }
+
     .mx_CopyableText_copyButton {
         flex-shrink: 0;
         width: 20px;

src/components/structures/ViewSource.tsx

@@ -167,8 +167,16 @@ export default class ViewSource extends React.Component<IProps, IState> {
         return (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
                 <div>
-                    <div>{ _t("Room ID: %(roomId)s", { roomId }) }</div>
-                    <div>{ _t("Event ID: %(eventId)s", { eventId }) }</div>
+                    <div>
+                        <CopyableText getTextToCopy={() => roomId} border={false}>
+                            { _t("Room ID: %(roomId)s", { roomId }) }
+                        </CopyableText>
+                    </div>
+                    <div>
+                        <CopyableText getTextToCopy={() => eventId} border={false}>
+                            { _t("Event ID: %(eventId)s", { eventId }) }
+                        </CopyableText>
+                    </div>
                     <div className="mx_ViewSource_separator" />
                     { isEditing ? this.editSourceContent() : this.viewSourceContent() }
                 </div>

src/components/views/elements/CopyableText.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React, { useState } from "react";
+import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
 import { copyPlaintext } from "../../../utils/strings";
@@ -25,9 +26,10 @@ import AccessibleTooltipButton from "./AccessibleTooltipButton";
 interface IProps {
     children: React.ReactNode;
     getTextToCopy: () => string;
+    border?: boolean;
 }
 
-const CopyableText: React.FC<IProps> = ({ children, getTextToCopy }) => {
+const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border=true }) => {
     const [tooltip, setTooltip] = useState<string | undefined>(undefined);
 
     const onCopyClickInternal = async (e: ButtonEvent) => {
@@ -42,7 +44,11 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy }) => {
         }
     };
 
-    return <div className="mx_CopyableText">
+    const className = classNames("mx_CopyableText", {
+        mx_CopyableText_border: border,
+    });
+
+    return <div className={className}>
         { children }
         <AccessibleTooltipButton
             title={tooltip ?? _t("Copy")}