From 2b91ed10849b1b44f146227c16999606c01b0b77 Mon Sep 17 00:00:00 2001
From: olivialivia <94136530+olivialivia@users.noreply.github.com>
Date: Tue, 19 Apr 2022 09:39:34 +0100
Subject: [PATCH] Add copy buttons for event & room ID (#8302)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/elements/_CopyableText.scss      | 13 ++++++++-----
 src/components/structures/ViewSource.tsx       | 12 ++++++++++--
 src/components/views/elements/CopyableText.tsx | 10 ++++++++--
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/res/css/views/elements/_CopyableText.scss b/res/css/views/elements/_CopyableText.scss
index a08306b66a..ceafd42273 100644
--- a/res/css/views/elements/_CopyableText.scss
+++ b/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;
diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index e84a26409e..c8628a7f96 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/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>
diff --git a/src/components/views/elements/CopyableText.tsx b/src/components/views/elements/CopyableText.tsx
index d1632af382..4ed3a7a58c 100644
--- a/src/components/views/elements/CopyableText.tsx
+++ b/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")}