Reader Manage Following: present a follow button if user appears to have entered a URL

client/reader/follow-button/follow-sources.jsx

@@ -5,7 +5,8 @@ const exported = {
 	SEARCH_RESULTS: 'search-results',
 	READER_SUBSCRIPTIONS: 'reader-subscriptions',
 	READER_FEED_SEARCH: 'reader-feed-search-result',
-	COMBINED_CARD: 'reader-combined-card'
+	COMBINED_CARD: 'reader-combined-card',
+	READER_FOLLOWING_MANAGE_URL_INPUT: 'reader-following-manage-url-input',
 };
 
 export default exported;
@@ -16,5 +17,6 @@ export const {
 	SEARCH_RESULTS,
 	READER_SUBSCRIPTIONS,
 	READER_FEED_SEARCH,
-	COMBINED_CARD
+	COMBINED_CARD,
+	READER_FOLLOWING_MANAGE_URL_INPUT,
 } = exported;

client/reader/following-manage/index.jsx

@@ -22,6 +22,9 @@ import FollowingManageSearchFeedsResults from './feed-search-results';
 import MobileBackToSidebar from 'components/mobile-back-to-sidebar';
 import { requestFeedSearch } from 'state/reader/feed-searches/actions';
 import { addQueryArgs } from 'lib/url';
+import FollowButton from 'reader/follow-button';
+import { READER_FOLLOWING_MANAGE_URL_INPUT } from 'reader/follow-button/follow-sources';
+import { isUrl, prependUrlProtocol, stripUrlProtocol } from './url-helper';
 
 class FollowingManage extends Component {
 	static propTypes = {
@@ -129,14 +132,20 @@ class FollowingManage extends Component {
 			showMoreResults
 		} = this.props;
 		const searchPlaceholderText = translate( 'Search millions of sites' );
+		const showExistingSubscriptions = ! ( !! sitesQuery && showMoreResults );
+		const isSitesQueryUrl = isUrl( sitesQuery );
+		let sitesQueryWithoutProtocol;
+		if ( isSitesQueryUrl ) {
+			sitesQueryWithoutProtocol = stripUrlProtocol( sitesQuery );
+		}
 
 		return (
 			<ReaderMain className="following-manage">
 				<DocumentHead title={ 'Manage Following' } />
 				<MobileBackToSidebar>
 					<h1>{ translate( 'Manage Followed Sites' ) }</h1>
 				</MobileBackToSidebar>
-				{ ! searchResults && <QueryReaderFeedsSearch query={ sitesQuery } /> }
+				{ ! searchResults && ! isSitesQueryUrl && <QueryReaderFeedsSearch query={ sitesQuery } /> }
 				<h2 className="following-manage__header">{ translate( 'Follow Something New' ) }</h2>
 				<div ref={ this.handleStreamMounted } />
 				<div className="following-manage__fixed-area" ref={ this.handleSearchBoxMounted }>
@@ -153,8 +162,18 @@ class FollowingManage extends Component {
 							value={ sitesQuery }>
 						</SearchInput>
 					</CompactCard>
+
+					{ isSitesQueryUrl && (
+						<div className="following-manage__url-follow">
+							<FollowButton
+								followLabel={ translate( 'Follow %s', { args: sitesQueryWithoutProtocol } ) }
+								followingLabel={ translate( 'Following %s', { args: sitesQueryWithoutProtocol } ) }
+								siteUrl={ prependUrlProtocol( sitesQuery ) }
+								followSource={ READER_FOLLOWING_MANAGE_URL_INPUT } />
+						</div>
+					) }
 				</div>
-				{ !! sitesQuery && (
+				{ !! sitesQuery && ! isSitesQueryUrl && (
 					<FollowingManageSearchFeedsResults
 						searchResults={ searchResults }
 						showMoreResults={ showMoreResults }
@@ -165,7 +184,7 @@ class FollowingManage extends Component {
 						searchResultsCount={ searchResultsCount }
 					/>
 				) }
-				{ ! ( !! sitesQuery && showMoreResults ) && (
+				{ showExistingSubscriptions && (
 					<FollowingManageSubscriptions
 						width={ this.state.width }
 						query={ subsQuery }

client/reader/following-manage/style.scss

@@ -193,3 +193,32 @@
 		border: 0;
 	}
 }
+
+.following-manage__url-follow {
+	min-height: 30px;
+	margin-top: 10px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid lighten( $gray, 30% );
+	display: flex;
+	justify-content: center;
+
+	.follow-button {
+		.gridicon {
+			fill: $blue-medium;
+		}
+
+		.follow-button__label {
+			color: $blue-medium;
+		}
+
+		&.is-following {
+			.gridicon {
+				fill: $alert-green;
+			}
+
+			.follow-button__label {
+				color: $alert-green;
+			}
+		}
+	}
+}

client/reader/following-manage/url-helper.js

@@ -0,0 +1,43 @@
+/**
+ * External Dependencies
+ */
+import url from 'url';
+import { startsWith, replace } from 'lodash';
+
+export function isUrl( query ) {
+	let parsedUrl = url.parse( query );
+
+	// Make sure the query has a protocol - hostname ends up blank otherwise
+	if ( ! parsedUrl.protocol ) {
+		parsedUrl = url.parse( 'http://' + query );
+	}
+
+	if ( ! parsedUrl.hostname || parsedUrl.hostname.indexOf( '.' ) === -1 ) {
+		return false;
+	}
+
+	// Check for a valid-looking TLD
+	if ( parsedUrl.hostname.lastIndexOf( '.' ) > ( parsedUrl.hostname.length - 3 ) ) {
+		return false;
+	}
+
+	// Make sure the hostname has at least two parts separated by a dot
+	const hostnameParts = parsedUrl.hostname.split( '.' ).filter( Boolean );
+	if ( hostnameParts.length < 2 ) {
+		return false;
+	}
+
+	return true;
+}
+
+export function prependUrlProtocol( query ) {
+	if ( startsWith( 'http://', query ) || startsWith( 'https://', query ) ) {
+		return query;
+	}
+
+	return 'http://' + query;
+}
+
+export function stripUrlProtocol( query ) {
+	return replace( query, /http(s?):\/\//g, '' );
+}