Revert "Remove old unused link sharing onboarding"

This reverts commit 66a0a7ff8b5b5081d86df333429cb0455221c81a.

services/web/app/coffee/Features/Project/ProjectController.coffee

@@ -269,6 +269,23 @@ module.exports = ProjectController =
 					else
 						logger.log { user_id, event }, "autocompile onboarding not shown yet to this user"
 						return cb(null, { enabled: true, showOnboarding: true })
+			couldShowLinkSharingOnboarding: (cb) ->
+				cb = underscore.once(cb)
+				if !user_id?
+					return cb()
+				# Extract data from user's ObjectId
+				timestamp = parseInt(user_id.toString().substring(0, 8), 16)
+				userSignupDate = new Date(timestamp * 1000)
+				if userSignupDate > new Date("2017-11-13")
+					# Don't show for users who registered after it was released
+					return cb(null, false)
+				timeout = setTimeout cb, 500
+				AnalyticsManager.getLastOccurance user_id, "shown-linksharing-onboarding", (error, event) ->
+					clearTimeout timeout
+					if error? || event?
+						return cb(null, false)
+					else
+						return cb(null, true)
 		}, (err, results)->
 			if err?
 				logger.err err:err, "error getting details for project page"
@@ -283,6 +300,13 @@ module.exports = ProjectController =
 
 			token = TokenAccessHandler.getRequestToken(req, project_id)
 			isTokenMember = results.isTokenMember
+			# Roll out token-access based on Project owner
+			enableTokenAccessUI = ProjectController._isInPercentageRollout(
+				'linksharing',
+				project.owner_ref,
+				100
+			)
+			showLinkSharingOnboarding = enableTokenAccessUI && results.couldShowLinkSharingOnboarding
 			AuthorizationManager.getPrivilegeLevelForProject user_id, project_id, token, (error, privilegeLevel)->
 				return next(error) if error?
 				if !privilegeLevel? or privilegeLevel == PrivilegeLevels.NONE
@@ -331,6 +355,8 @@ module.exports = ProjectController =
 					languages: Settings.languages
 					themes: THEME_LIST
 					maxDocLength: Settings.max_doc_length
+					enableTokenAccessUI: enableTokenAccessUI
+					showLinkSharingOnboarding: showLinkSharingOnboarding
 				timer.done()
 
 	_buildProjectList: (allProjects, v1Projects = [])->

services/web/app/views/project/editor.pug

@@ -122,7 +122,9 @@ block requirejs
 		window.trackChangesState = data.trackChangesState;
 		window.autoCompileEnabled = #{!!autoCompileEnabled};
 		window.showAutoCompileOnboarding = #{!!showAutoCompileOnboarding}
+		window.showLinkSharingOnboarding = #{!!showLinkSharingOnboarding}
 		window.wikiEnabled = #{!!(settings.apis.wiki && settings.apis.wiki.url)};
+		window.enableTokenAccessUI = #{enableTokenAccessUI}
 		window.requirejs = {
 			"paths" : {
 				"mathjax": "#{buildJsPath('/libs/mathjax/MathJax.js', {cdn:false, fingerprint:false, qs:{config:'TeX-AMS_HTML'}})}",

services/web/app/views/project/editor/editor.pug

@@ -108,3 +108,17 @@ div.full-size(
 			p #{translate("auto_compile_onboarding_description")}
 			button.btn.btn-default.btn-block(ng-click="dismiss()")
 				| #{translate("got_it")}
+
+#onboarding-linksharing.onboarding-linksharing.popover(
+	ng-controller="LinkSharingOnboardingController"
+	ng-if="permissions.admin && onboarding.linkSharing == 'unseen'"
+	ng-class="placement"
+)
+	.popover-inner
+		h3.popover-title #{translate("link_sharing")}
+		.popover-content
+			p #{translate("try_out_link_sharing")}
+			img(src="/img/onboarding/linksharing/link-sharing.png" width="100%")
+			p #{translate("try_link_sharing_description")}
+			button.btn.btn-default.btn-block(ng-click="dismiss()")
+				| #{translate("got_it")}

services/web/app/views/project/editor/review-panel.pug

@@ -91,7 +91,9 @@
 				)
 
 			li.rp-tc-state-separator
-			li.rp-tc-state-item.rp-tc-state-item-guests
+			li.rp-tc-state-item.rp-tc-state-item-guests(
+				ng-if="__enableTokenAccessUI"
+			)
 				span.rp-tc-state-item-name(
 					ng-class="{ 'rp-tc-state-item-name-disabled' : reviewPanel.trackChangesOnForEveryone}"
 					tooltip=translate('tc_switch_guests_tip')

services/web/app/views/project/editor/share.pug

@@ -9,8 +9,18 @@ script(type='text/ng-template', id='shareProjectModalTemplate')
 	.modal-body.modal-body-share
 		.container-fluid
 
+			//- Private
+			.row.public-access-level(ng-show="project.publicAccesLevel == 'private' && __enableTokenAccessUI == false")
+				.col-xs-12.text-center
+					| #{translate("this_project_is_private")}
+					|   
+					a(
+						href
+						ng-click="openMakePublicModal()"
+					) #{translate("make_public")}
+
 			//- Private (with token-access available)
-			.row.public-access-level(ng-show="project.publicAccesLevel == 'private'")
+			.row.public-access-level(ng-show="project.publicAccesLevel == 'private' && __enableTokenAccessUI == true")
 				.col-xs-12.text-center
 					| #{translate('link_sharing_is_off')}.
 					|   
@@ -196,6 +206,31 @@ script(type='text/ng-template', id='shareProjectModalTemplate')
 				ng-click="done()"
 			) #{translate("close")}
 
+script(type="text/ng-template", id="makePublicModalTemplate")
+	.modal-header
+		button.close(
+			type="button"
+			data-dismiss="modal"
+			ng-click="cancel()"
+		) ×
+		h3 #{translate("make_project_public")}?
+	.modal-body.modal-body-share
+		p #{translate("make_project_public_consequences")}
+		p
+			select.form-control(
+				ng-model="inputs.privileges"
+				name="privileges"
+			)
+				option(value="readAndWrite") #{translate("allow_public_editing")}
+				option(value="readOnly")     #{translate("allow_public_read_only")}
+	.modal-footer
+		button.btn.btn-default(
+			ng-click="cancel()"
+		) #{translate("cancel")}
+		button.btn.btn-info(
+			ng-click="makePublic()"
+		) #{translate("make_public")}
+
 script(type="text/ng-template", id="makeTokenBasedModalTemplate")
 	.modal-header
 		button.close(

services/web/public/coffee/ide.coffee

@@ -13,6 +13,7 @@ define [
 	"ide/review-panel/ReviewPanelManager"
 	"ide/SafariScrollPatcher"
 	"ide/AutoCompileOnboardingController",
+	"ide/LinkSharingOnboardingController",
 	"ide/settings/index"
 	"ide/share/index"
 	"ide/chat/index"
@@ -78,8 +79,17 @@ define [
 		}
 		$scope.onboarding = {
 			autoCompile: if window.showAutoCompileOnboarding then 'unseen' else 'dismissed'
+			linkSharing: if window.showLinkSharingOnboarding then 'unseen' else 'dismissed'
 		}
 		$scope.user = window.user
+		$scope.__enableTokenAccessUI = window.enableTokenAccessUI == true
+		# TODO: remove after rollout and testing
+		window.turnOnTokenAccessUI = () ->
+			$scope.__enableTokenAccessUI = true
+			$scope.$digest
+		window.turnOffTokenAccessUI = () ->
+			$scope.__enableTokenAccessUI = false
+			$scope.$digest
 
 		$scope.shouldABTestPlans = false
 		if $scope.user.signUpDate >= '2016-10-27'

services/web/public/coffee/ide/LinkSharingOnboardingController.coffee

@@ -0,0 +1,21 @@
+define [
+	"base"
+], (App) ->
+	App.controller "LinkSharingOnboardingController", ($scope, $timeout, event_tracking) ->
+
+		popover = angular.element('#onboarding-linksharing')
+		popover.hide()
+
+		$scope.dismiss = () ->
+			$scope.onboarding.linkSharing = 'dismissed'
+			event_tracking.sendMB "shown-linksharing-onboarding"
+
+		$scope.$on 'ide:loaded', () ->
+			shareBtn = angular.element('#shareButton')
+			offset = shareBtn.offset()
+			popover.show()
+			$scope.placement = 'bottom'
+			popover.css({
+				top: '' + (2) + 'px',
+				right: '' + (window.innerWidth - offset.left - (shareBtn.width() * 1.5) ) + 'px'
+			})

services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee

@@ -178,6 +178,13 @@ define [
 					$scope.state.error = "Sorry, something went wrong resending the invite :("
 					event.target.blur()
 
+		$scope.openMakePublicModal = () ->
+			$modal.open {
+				templateUrl: "makePublicModalTemplate"
+				controller:  "MakePublicModalController"
+				scope: $scope
+			}
+
 		$scope.openMakePrivateModal = () ->
 			$modal.open {
 				templateUrl: "makePrivateModalTemplate"

services/web/public/stylesheets/app/editor/feature-onboarding.less

@@ -41,3 +41,42 @@
 		right: -9.5px;
 	}
 }
+
+.onboarding-linksharing {
+	display: block;
+	top: 10px;
+	&.popover {
+		left: auto !important;
+	}
+
+	img {
+		margin-bottom: 10px;
+		border: 1px solid @gray-lighter;
+	}
+
+	&::before, &::after {
+		content: '';
+		border-width: 11px;
+		border-style: solid;
+		border-color: transparent;
+		top: 7px;
+		display: block;
+		position: absolute;
+	}
+
+	// Bottom
+	&.bottom::before {
+		border-top-width: 0;
+		border-bottom-color: rgba(0, 0, 0, .3);
+		top: -10px;
+		right: 38px;
+	}
+
+	&.bottom::after {
+		border-top-width: 0;
+		border-bottom-color: #f7f7f7;
+		top: -9.5px;
+		right: 38px;
+	}
+
+}