From 9cef3ac008a0ab3f477febe45c10ed1bf39911cb Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Thu, 14 Jan 2021 17:10:27 -0800
Subject: [PATCH] Show link anchor in share and invite modals

---
 webapp/src/components/filterComponent.scss         |  2 ++
 webapp/src/components/modal.scss                   |  1 -
 .../src/components/registrationLinkComponent.scss  |  7 ++++---
 .../src/components/registrationLinkComponent.tsx   | 14 ++++++++++----
 webapp/src/components/shareBoardComponent.scss     |  8 +++++---
 webapp/src/components/shareBoardComponent.tsx      | 11 +++++++----
 6 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/webapp/src/components/filterComponent.scss b/webapp/src/components/filterComponent.scss
index 75be9c623..b0419b9d0 100644
--- a/webapp/src/components/filterComponent.scss
+++ b/webapp/src/components/filterComponent.scss
@@ -1,4 +1,6 @@
 .FilterComponent {
+	min-width: 430px;
+
     .octo-filterclause {
         display: flex;
         flex-direction: row;
diff --git a/webapp/src/components/modal.scss b/webapp/src/components/modal.scss
index 74a0ecd3c..43e06dbd0 100644
--- a/webapp/src/components/modal.scss
+++ b/webapp/src/components/modal.scss
@@ -4,7 +4,6 @@
     left: -230px;
     z-index: 10;
 
-	min-width: 430px;
 	box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
 	background-color: rgb(var(--main-bg));
 	padding: 10px;
diff --git a/webapp/src/components/registrationLinkComponent.scss b/webapp/src/components/registrationLinkComponent.scss
index 9e88c1a9a..30be8feac 100644
--- a/webapp/src/components/registrationLinkComponent.scss
+++ b/webapp/src/components/registrationLinkComponent.scss
@@ -19,10 +19,11 @@
         flex-grow: 1;
     }
 
-    input.shareUrl {
+    a.shareUrl {
         flex-grow: 1;
-        border: solid 1px #cccccc;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         margin-right: 5px;
-        padding: 5px;
     }
 }
\ No newline at end of file
diff --git a/webapp/src/components/registrationLinkComponent.tsx b/webapp/src/components/registrationLinkComponent.tsx
index 12b01c2a9..db7ff5c93 100644
--- a/webapp/src/components/registrationLinkComponent.tsx
+++ b/webapp/src/components/registrationLinkComponent.tsx
@@ -48,11 +48,17 @@ class RegistrationLinkComponent extends React.PureComponent<Props, State> {
                 <div className='RegistrationLinkComponent'>
                     {workspace && <>
                         <div className='row'>
-                            <input
+                            {intl.formatMessage({id: 'RegistrationLink.description', defaultMessage: 'Share this link for others to create accounts:'})}
+                        </div>
+                        <div className='row'>
+                            <a
                                 className='shareUrl'
-                                readOnly={true}
-                                value={registrationUrl}
-                            />
+                                href={registrationUrl}
+                                target='_blank'
+                                rel='noreferrer'
+                            >
+                                {registrationUrl}
+                            </a>
                             <Button
                                 filled={true}
                                 onClick={() => {
diff --git a/webapp/src/components/shareBoardComponent.scss b/webapp/src/components/shareBoardComponent.scss
index 0fa92e958..773ce810c 100644
--- a/webapp/src/components/shareBoardComponent.scss
+++ b/webapp/src/components/shareBoardComponent.scss
@@ -3,6 +3,7 @@
     flex-direction: column;
     padding: 5px;
     color: rgb(var(--main-fg));
+	max-width: 400px;
 
     > .row {
         display: flex;
@@ -19,10 +20,11 @@
         flex-grow: 1;
     }
 
-    input.shareUrl {
+    a.shareUrl {
         flex-grow: 1;
-        border: solid 1px #cccccc;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         margin-right: 5px;
-        padding: 5px;
     }
 }
\ No newline at end of file
diff --git a/webapp/src/components/shareBoardComponent.tsx b/webapp/src/components/shareBoardComponent.tsx
index f26436a31..ea1f149ca 100644
--- a/webapp/src/components/shareBoardComponent.tsx
+++ b/webapp/src/components/shareBoardComponent.tsx
@@ -70,11 +70,14 @@ class ShareBoardComponent extends React.PureComponent<Props, State> {
                     </div>
                     {isSharing && <>
                         <div className='row'>
-                            <input
+                            <a
                                 className='shareUrl'
-                                readOnly={true}
-                                value={shareUrl.toString()}
-                            />
+                                href={shareUrl.toString()}
+                                target='_blank'
+                                rel='noreferrer'
+                            >
+                                {shareUrl.toString()}
+                            </a>
                             <Button
                                 filled={true}
                                 onClick={() => {