Urlfield enahancement (keystonejs#4856)

* add thumb option support to url type

* do not fix the height of form input since it the value can be out of bound

admin/client/App/elemental/FormInput/noedit.js

@@ -56,7 +56,6 @@ const classes = {
 		borderWidth: theme.input.border.width,
 		color: theme.color.gray80,
 		display: 'inline-block',
-		height: theme.input.height,
 		lineHeight: theme.input.lineHeight,
 		padding: `0 ${theme.input.paddingHorizontal}`,
 		transition: 'border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s',

fields/types/url/UrlField.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Field from '../Field';
-import { GlyphButton, FormInput } from '../../../admin/client/App/elemental';
+import { FormInput } from '../../../admin/client/App/elemental';
 
 module.exports = Field.create({
 	displayName: 'URLField',
@@ -15,45 +15,42 @@ module.exports = Field.create({
 		}
 		window.open(href);
 	},
-	renderLink () {
-		if (!this.props.value) return null;
-
-		return (
-			<GlyphButton
-				className="keystone-relational-button"
-				glyph="link"
-				onClick={this.openValue}
-				title={'Open ' + this.props.value + ' in a new tab'}
-				variant="link"
-			/>
-		);
-	},
 	renderField () {
+		const { value } = this.props;
 		return (
-			<FormInput
-				autoComplete="off"
-				name={this.getInputName(this.props.path)}
-				onChange={this.valueChanged}
-				ref="focusTarget"
-				type="url"
-				value={this.props.value}
-			/>
-		);
-	},
-	wrapField () {
-		return (
-			<div style={{ position: 'relative' }}>
-				{this.renderField()}
-				{this.renderLink()}
+			<div>
+				<FormInput
+					autoComplete="off"
+					name={this.getInputName(this.props.path)}
+					onChange={this.valueChanged}
+					ref="focusTarget"
+					type="url"
+					value={value}
+				/>
+				{ this.renderThumb() }
 			</div>
 		);
 	},
 	renderValue () {
 		const { value } = this.props;
 		return (
-			<FormInput noedit onClick={value && this.openValue}>
-				{value}
-			</FormInput>
+			<div>
+				<FormInput
+					noedit
+					onClick={value && this.openValue}
+					value={value}
+				/>
+				{ this.renderThumb() }
+			</div>
 		);
 	},
+	renderThumb () {
+		const { thumb, value } = this.props;
+		if (thumb === true) {
+			return (
+				<img src={value}/>
+			);
+		}
+		return ('');
+	},
 });