From 6034f76167e2441919676a49e49b334a192febfb Mon Sep 17 00:00:00 2001
From: kamre <eremchenko@gmail.com>
Date: Wed, 5 Jan 2022 13:36:46 +0300
Subject: [PATCH] Initial implementation for `URLProperty` improvements:  -
 show preview with link and button for editing  - minor fixes for CSS

---
 .../src/components/gallery/galleryCard.scss   |  4 +
 .../src/components/properties/link/link.scss  | 45 +++++------
 .../src/components/properties/link/link.tsx   | 76 ++++++++++++-------
 3 files changed, 74 insertions(+), 51 deletions(-)

diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss
index 6e0ac89b3..84d4074f7 100644
--- a/webapp/src/components/gallery/galleryCard.scss
+++ b/webapp/src/components/gallery/galleryCard.scss
@@ -92,6 +92,10 @@
         padding: 5px 10px;
         overflow-wrap: anywhere;
 
+        .octo-tooltip {
+            max-width: 100%;
+        }
+
         .octo-icon {
             margin-right: 5px;
         }
diff --git a/webapp/src/components/properties/link/link.scss b/webapp/src/components/properties/link/link.scss
index 5f46c4024..aeec1c234 100644
--- a/webapp/src/components/properties/link/link.scss
+++ b/webapp/src/components/properties/link/link.scss
@@ -1,39 +1,34 @@
-.property-link {
+.URLProperty {
     display: flex;
     align-items: center;
+    overflow: hidden;
 
-    &.url {
-        width: 100%;
-        display: flex;
+    .link {
+        flex: 1 1 auto;
+        padding-left: 1px;
+        margin-right: 4px;
+        white-space: nowrap;
         overflow: hidden;
+        color: rgb(var(--center-channel-color-rgb));
+        text-overflow: ellipsis;
+        text-decoration: underline rgb(var(--center-channel-color-rgb), 0.5);
     }
 
-    .Link__button {
+    .link:hover {
+        background-color: rgb(var(--center-channel-color-rgb), 0.1);
+    }
+
+    .Button_Edit {
         display: none;
-        flex: 0 0 24px;
-        width: 24px;
-        height: 24px;
-        align-items: center;
-        justify-content: center;
-        border-radius: 4px;
-        color: rgba(var(--center-channel-color-rgb), 0.56);
-        font-size: 14.4px;
-        margin-left: 8px;
-
-        &:hover {
-            color: rgba(var(--center-channel-color-rgb), 0.72);
-            background: rgba(var(--center-channel-color-rgb), 0.08);
-        }
-
-        &:active {
-            color: var(--button-bg-rgb);
-            background-color: rgb(var(--button-bg-rgb), 0.16);
-        }
     }
 
     &:hover {
-        .Link__button {
+        .Button_Edit {
             display: flex;
         }
     }
 }
+
+#focalboard-app .URLProperty .link:visited {
+    color: rgb(var(--center-channel-color-rgb));
+}
diff --git a/webapp/src/components/properties/link/link.tsx b/webapp/src/components/properties/link/link.tsx
index 5a3f6b59d..e72ae6356 100644
--- a/webapp/src/components/properties/link/link.tsx
+++ b/webapp/src/components/properties/link/link.tsx
@@ -1,13 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 
-import Editable from '../../../widgets/editable'
+import Editable, {Focusable} from '../../../widgets/editable'
 
 import './link.scss'
 import {Utils} from '../../../utils'
-import LinkIcon from '../../../widgets/icons/Link'
+import EditIcon from '../../../widgets/icons/edit'
+import IconButton from '../../../widgets/buttons/iconButton'
 
 type Props = {
     value: string
@@ -20,37 +21,60 @@ type Props = {
 }
 
 const URLProperty = (props: Props): JSX.Element => {
-    let link: ReactNode = null
-    const hasValue = Boolean(props.value?.trim())
-    if (hasValue) {
-        link = (
+    const [isEditing, setIsEditing] = useState(false)
+    const isEmpty = !props.value?.trim()
+    const showEditable = !props.readonly && (isEditing || isEmpty)
+    const editableRef = useRef<Focusable>(null)
+
+    useEffect(() => {
+        if (isEditing) {
+            editableRef.current?.focus()
+        }
+    }, [isEditing])
+
+    if (showEditable) {
+        return (
+            <div className='URLProperty'>
+                <Editable
+                    className='octo-propertyvalue'
+                    ref={editableRef}
+                    placeholderText={props.placeholder}
+                    value={props.value}
+                    autoExpand={true}
+                    readonly={props.readonly}
+                    onChange={props.onChange}
+                    onSave={() => {
+                        setIsEditing(false)
+                        props.onSave()
+                    }}
+                    onCancel={() => {
+                        setIsEditing(false)
+                        props.onCancel()
+                    }}
+                    onFocus={() => setIsEditing(true)}
+                    validator={props.validator}
+                />
+            </div>
+        )
+    }
+
+    return (
+        <div className='URLProperty octo-propertyvalue'>
             <a
-                className='Link__button'
+                className='link'
                 href={Utils.ensureProtocol(props.value.trim())}
                 target='_blank'
                 rel='noreferrer'
                 onClick={(event) => event.stopPropagation()}
             >
-                <LinkIcon/>
+                {props.value}
             </a>
-        )
-    }
-
-    return (
-        <div className='URLProperty property-link url'>
-            {(hasValue || props.placeholder) &&
-            <Editable
-                className='octo-propertyvalue'
-                placeholderText={props.placeholder}
-                value={props.value}
-                autoExpand={true}
-                readonly={props.readonly}
-                onChange={props.onChange}
-                onSave={props.onSave}
-                onCancel={props.onCancel}
-                validator={props.validator}
+            {!props.readonly &&
+            <IconButton
+                className='Button_Edit'
+                icon={<EditIcon/>}
+                onClick={() => setIsEditing(true)}
             />}
-            {link}
         </div>
     )
 }