Use history label component; restrict label deletion to label owners.

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

@@ -5,10 +5,12 @@ aside.change-list(
 	history-entries-list(
 		entries="history.updates"
 		current-user="user"
+		users="projectUsers"
 		load-entries="loadMore()"
 		load-disabled="history.loading || history.atEnd"
 		load-initialize="ui.view == 'history'"
 		is-loading="history.loading"
+		show-only-labelled="listConfig.showOnlyLabelled"
 		on-entry-select="handleEntrySelect(selectedEntry)"
 		on-label-delete="handleLabelDelete(label)"
 	)
@@ -116,9 +118,10 @@ script(type="text/ng-template", id="historyEntriesListTpl")
 	)
 		.infinite-scroll-inner
 			history-entry(
-				ng-repeat="entry in $ctrl.entries"
+				ng-repeat="entry in $ctrl.entries | filter:$ctrl.shouldShowEntry"
 				entry="entry"
 				current-user="$ctrl.currentUser"
+				users="$ctrl.users"
 				on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })"
 				on-label-delete="$ctrl.onLabelDelete({ label: label })"
 				ng-show="!$ctrl.isLoading"
@@ -143,17 +146,14 @@ script(type="text/ng-template", id="historyEntryTpl")
 		time.history-entry-day(ng-if="::$ctrl.entry.meta.first_in_day") {{ ::$ctrl.entry.meta.end_ts | relativeDate }}
 
 		.history-entry-details(ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })")
-			.history-entry-label(
+			history-label(
-				ng-if="$ctrl.entry.labels.length > 0"
 				ng-repeat="label in $ctrl.entry.labels"
+				label-text="label.comment"
+				label-owner-name="$ctrl.displayNameById(label.user_id)"
+				label-creation-date-time="label.created_at"
+				is-owned-by-current-user="label.user_id === $ctrl.currentUser.id"
+				on-label-delete="$ctrl.onLabelDelete({ label: label })"
 			)
-				span.history-entry-label-comment
-					i.fa.fa-tag
-					|  {{ label.comment }}
-				button.history-entry-label-delete-btn(
-					stop-propagation="click"
-					ng-click="$ctrl.onLabelDelete({ label: label })"
-				) ×
 
 			ol.history-entry-changes
 				li.history-entry-change(
@@ -198,4 +198,28 @@ script(type="text/ng-template", id="historyEntryTpl")
 					li.history-entry-metadata-user(ng-if="::$ctrl.entry.meta.users.length == 0")
 						span.name(
 							ng-style="$ctrl.getUserCSSStyle();"
-						) #{translate("anonymous")}
+						) #{translate("anonymous")}
+
+script(type="text/ng-template", id="historyLabelTpl")
+	.history-entry-label(
+		ng-class="{ 'history-entry-label-own' : $ctrl.isOwnedByCurrentUser }"
+	)
+		span.history-entry-label-comment(
+			tooltip-template="'historyLabelTooltipTpl'"
+			tooltip-placement="left"
+		)
+			i.fa.fa-tag
+			|  {{ $ctrl.labelText }}
+		button.history-entry-label-delete-btn(
+			ng-if="$ctrl.isOwnedByCurrentUser"
+			stop-propagation="click"
+			ng-click="$ctrl.onLabelDelete()"
+		) ×
+
+script(type="text/ng-template", id="historyLabelTooltipTpl")
+	.history-label-tooltip
+		p.history-label-tooltip-title 
+			i.fa.fa-tag
+			|  {{ $ctrl.labelText }}
+		p.history-label-tooltip-owner Created by {{ $ctrl.labelOwnerName }}
+		time.history-label-tooltip-datetime {{ labelCreationDateTime | formatDate }}

services/web/public/coffee/ide/history/HistoryV2Manager.coffee

@@ -12,6 +12,7 @@ define [
 	"ide/history/directives/infiniteScroll"
 	"ide/history/components/historyEntriesList"
 	"ide/history/components/historyEntry"
+	"ide/history/components/historyLabel"
 	"ide/history/components/historyFileTree"
 	"ide/history/components/historyFileEntity"
 ], (moment, ColorManager, displayNameForUser, HistoryViewModes) ->

services/web/public/coffee/ide/history/components/historyEntriesList.coffee

@@ -3,11 +3,14 @@ define [
 ], (App) ->
 	historyEntriesListController = ($scope, $element, $attrs) ->
 		ctrl = @ 
+		ctrl.shouldShowEntry = (entry) ->
+			!(ctrl.showOnlyLabelled and entry.labels.length == 0) 
 		return
 
 	App.component "historyEntriesList", {
 		bindings:
 			entries: "<"
+			users: "<"
 			loadEntries: "&"
 			loadDisabled: "<"
 			loadInitialize: "<"
@@ -15,6 +18,7 @@ define [
 			currentUser: "<"
 			onEntrySelect: "&"
 			onLabelDelete: "&"
+			showOnlyLabelled: "<"
 		controller: historyEntriesListController
 		templateUrl: "historyEntriesListTpl"
 	}

services/web/public/coffee/ide/history/components/historyEntry.coffee

@@ -2,9 +2,15 @@ define [
 	"base"
 	"ide/history/util/displayNameForUser"
 ], (App, displayNameForUser) ->
-	historyEntryController = ($scope, $element, $attrs) ->
+	historyEntryController = ($scope, $element, $attrs, $filter, _) ->
 		ctrl = @
+		_getUserById = (id) ->
+			_.find ctrl.users, (user) ->
+				curUserId = user?._id or user?.id
+				curUserId == id
 		ctrl.displayName = displayNameForUser
+		ctrl.displayNameById = (id) ->
+			displayNameForUser(_getUserById(id))
 		ctrl.getProjectOpDoc = (projectOp) ->
 			if projectOp.rename? then "#{ projectOp.rename.pathname} → #{ projectOp.rename.newPathname }"
 			else if projectOp.add? then "#{ projectOp.add.pathname}"
@@ -21,6 +27,7 @@ define [
 		bindings:
 			entry: "<"
 			currentUser: "<"
+			users: "<"
 			onSelect: "&"
 			onLabelDelete: "&"
 		controller: historyEntryController

services/web/public/coffee/ide/history/controllers/HistoryV2ListController.coffee

@@ -5,6 +5,9 @@ define [
 
 	App.controller "HistoryV2ListController", ["$scope", "$modal", "ide", ($scope, $modal, ide) ->
 		$scope.hoveringOverListSelectors = false
+		$scope.listConfig =
+			showOnlyLabelled: false
+		$scope.projectUsers = $scope.project.members.concat $scope.project.owner
 		
 		$scope.loadMore = () =>
 			ide.historyManager.fetchNextBatchOfUpdates()

services/web/public/stylesheets/app/editor/history-v2.less

@@ -60,24 +60,32 @@
 		font-size: @font-size-small;
 		margin-bottom: 3px;
 		margin-right: 10px;
-		&:last-of-type {
+		white-space: nowrap;
-			margin-right: 0;
-		}
 		.history-entry-selected & {
 			color: @history-entry-selected-label-color;
 		}
 	}
 		.history-entry-label-comment,
 		.history-entry-label-delete-btn {
-			display: inline-block;
+			padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
-			padding: 0 (@padding-xs-horizontal / 2) 1px @padding-xs-horizontal;
 			border: 0;
 			background-color: @history-entry-label-bg-color;
-			border-radius: 9999px 0 0 9999px;
 			.history-entry-selected & {
 				background-color: @history-entry-selected-label-bg-color;
 			}
 		}
+		.history-entry-label-comment {
+			display: block;
+			float: left;
+			border-radius: 9999px;
+			max-width: 190px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			.history-entry-label-own & {
+				padding-right: (@padding-xs-horizontal / 2);
+				border-radius: 9999px 0 0 9999px;
+			}
+		}
 		.history-entry-label-delete-btn {
 			padding-left: (@padding-xs-horizontal / 2);
 			padding-right: @padding-xs-horizontal;
@@ -90,6 +98,23 @@
 			}
 		}
 
+	.history-label-tooltip {
+		white-space: normal;
+		padding: (@line-height-computed / 4);
+		text-align: left;
+	}
+		.history-label-tooltip-title,
+		.history-label-tooltip-owner,
+		.history-label-tooltip-datetime {
+			margin: 0 0 (@line-height-computed / 4) 0;
+		}  
+		.history-label-tooltip-title {
+			font-weight: bold;
+		}
+		.history-label-tooltip-datetime {
+			margin-bottom: 0;
+		}
+
 	.history-entry-changes {
 		.list-unstyled;
 		margin-bottom: 3px;