Add label delete functionality; styles.

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

@@ -10,6 +10,7 @@ aside.change-list(
 		load-initialize="ui.view == 'history'"
 		is-loading="history.loading"
 		on-entry-select="handleEntrySelect(selectedEntry)"
+		on-label-delete="handleLabelDelete(label)"
 	)
 
 aside.change-list(
@@ -107,6 +108,7 @@ script(type="text/ng-template", id="historyEntriesListTpl")
 				entry="entry"
 				current-user="$ctrl.currentUser"
 				on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })"
+				on-label-delete="$ctrl.onLabelDelete({ label: label })"
 				ng-show="!$ctrl.isLoading"
 			)
 			.loading(ng-show="$ctrl.isLoading")
@@ -133,8 +135,14 @@ script(type="text/ng-template", id="historyEntryTpl")
 				ng-if="$ctrl.entry.labels.length > 0"
 				ng-repeat="label in ::$ctrl.entry.labels"
 			)
+				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(
 					ng-repeat="pathname in ::$ctrl.entry.pathnames"

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

@@ -27,7 +27,7 @@ script(type="text/ng-template", id="historyV2AddLabelModalTemplate")
 		novalidate
 	)
 		.modal-header
-			h3 Label this version
+			h3 Add label
 		.modal-body
 			.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} 
 			.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
@@ -39,6 +39,9 @@ script(type="text/ng-template", id="historyV2AddLabelModalTemplate")
 					focus-on="open"
 					required
 				)
+			p.help-block(ng-if="update")
+				| A new label will be added as of 
+				strong {{ update.meta.end_ts | formatDate:'ddd Do MMM YYYY, h:mm a' }}
 		.modal-footer
 			button.btn.btn-default(
 				type="button"
@@ -50,3 +53,25 @@ script(type="text/ng-template", id="historyV2AddLabelModalTemplate")
 				ng-value="state.inflight ? 'Adding label' : 'Add label'"
 				type="submit"
 			)
+
+script(type="text/ng-template", id="historyV2DeleteLabelModalTemplate")
+	.modal-header
+		h3 Delete label
+	.modal-body
+		.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} 
+		.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
+		p.help-block(ng-if="labelDetails")
+			| Are you sure you want to delete the following label: 
+			strong "{{ labelDetails.comment }}"
+			| ?
+	.modal-footer
+		button.btn.btn-default(
+			type="button"
+			ng-disabled="state.inflight"
+			ng-click="$dismiss()"
+		) #{translate("cancel")}
+		button.btn.btn-primary(
+			type="button"
+			ng-click="deleteLabel()"
+			ng-disabled="state.inflight"
+		) {{ state.inflight ? 'Deleting label' : 'Delete label' }}

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

@@ -8,6 +8,7 @@ define [
 	"ide/history/controllers/HistoryV2FileTreeController"
 	"ide/history/controllers/HistoryV2ToolbarController"
 	"ide/history/controllers/HistoryV2AddLabelModalController"
+	"ide/history/controllers/HistoryV2DeleteLabelModalController"
 	"ide/history/directives/infiniteScroll"
 	"ide/history/components/historyEntriesList"
 	"ide/history/components/historyEntry"
@@ -136,15 +137,9 @@ define [
 			@$scope.history.loading = true
 			@$scope.history.loadingFileTree = true
 			
-			requests =
+			@ide.$http.get updatesURL
-				updates: @ide.$http.get updatesURL
+				.then (response) =>
-
+					updatesData = response.data
-			if !@$scope.history.labels?
-				requests.labels = @ide.$http.get "/project/#{@ide.project_id}/labels"
-
-			@ide.$q.all requests
-				.then (responses) =>
-					updatesData = responses.updates.data
 					@_loadUpdates(updatesData.updates)
 					@$scope.history.nextBeforeTimestamp = updatesData.nextBeforeTimestamp
 					if !updatesData.nextBeforeTimestamp?
@@ -212,6 +207,24 @@ define [
 		labelCurrentVersion: (labelComment) => 
 			@_labelVersion labelComment, @$scope.history.selection.updates[0].toV
 
+		deleteLabel: (labelId) =>
+			url = "/project/#{@$scope.project_id}/labels/#{labelId}"
+
+			@ide.$http({
+				url,
+				method: "DELETE"
+				headers:
+					"X-CSRF-Token": window.csrfToken
+			}).then (response) =>
+				@_deleteLabelFromLocalCollection @$scope.history.updates, labelId
+				@_deleteLabelFromLocalCollection @$scope.history.selection, labelId
+
+
+		_deleteLabelFromLocalCollection: (collection, labelId) ->
+			for update in collection
+				update.labels = _.filter update.labels, (label) -> 
+					label.id != labelId
+
 		_parseDiff: (diff) ->
 			if diff.binary
 				return { binary: true }

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

@@ -14,6 +14,7 @@ define [
 			isLoading: "<"
 			currentUser: "<"
 			onEntrySelect: "&"
+			onLabelDelete: "&"
 		controller: historyEntriesListController
 		templateUrl: "historyEntriesListTpl"
 	}

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

@@ -22,6 +22,7 @@ define [
 			entry: "<"
 			currentUser: "<"
 			onSelect: "&"
+			onLabelDelete: "&"
 		controller: historyEntryController
 		templateUrl: "historyEntryTpl"
 	}

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

@@ -1,7 +1,8 @@
 define [
 	"base",
 ], (App) ->
-	App.controller "HistoryV2AddLabelModalController", ["$scope", "$modalInstance", "ide", ($scope, $modalInstance, ide) ->
+	App.controller "HistoryV2AddLabelModalController", ["$scope", "$modalInstance", "ide", "update", ($scope, $modalInstance, ide, update) ->
+		$scope.update = update
 		$scope.inputs = 
 			labelName: null
 		$scope.state =

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

@@ -0,0 +1,23 @@
+define [
+	"base",
+], (App) ->
+	App.controller "HistoryV2DeleteLabelModalController", ["$scope", "$modalInstance", "ide", "labelDetails", ($scope, $modalInstance, ide, labelDetails) ->
+		$scope.labelDetails = labelDetails
+		$scope.state =
+			inflight: false
+			error: false
+
+		$scope.deleteLabel = () ->
+			$scope.state.inflight = true
+			ide.historyManager.deleteLabel labelDetails.id
+				.then (response) ->
+					$scope.state.inflight = false
+					$modalInstance.close()
+				.catch (response) ->
+					{ data, status } = response
+					$scope.state.inflight = false
+					if status == 400
+						$scope.state.error = { message: data }
+					else
+						$scope.state.error = true
+	]

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

@@ -3,17 +3,24 @@ define [
 	"ide/history/util/displayNameForUser"
 ], (App, displayNameForUser) ->
 
-	App.controller "HistoryV2ListController", ["$scope", "ide", ($scope, ide) ->
+	App.controller "HistoryV2ListController", ["$scope", "$modal", "ide", ($scope, $modal, ide) ->
 		$scope.hoveringOverListSelectors = false
 		
 		$scope.loadMore = () =>
 			ide.historyManager.fetchNextBatchOfUpdates()
 
 		$scope.handleEntrySelect = (entry) ->
-			# $scope.$applyAsync () ->
 			ide.historyManager.selectUpdate(entry)
 			$scope.recalculateSelectedUpdates()
 
+		$scope.handleLabelDelete = (labelDetails) ->
+			$modal.open(
+				templateUrl: "historyV2DeleteLabelModalTemplate"
+				controller: "HistoryV2DeleteLabelModalController"
+				resolve:
+					labelDetails: () -> labelDetails
+			)
+
 		$scope.recalculateSelectedUpdates = () ->
 			beforeSelection = true
 			afterSelection = false

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

@@ -6,5 +6,7 @@ define [
 			$modal.open(
 				templateUrl: "historyV2AddLabelModalTemplate"
 				controller: "HistoryV2AddLabelModalController"
+				resolve:
+					update: () -> $scope.history.selection.updates[0]
 			)
 	]

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

@@ -56,10 +56,36 @@
 
 	.history-entry-label {
 		color: @history-entry-label-color;
-		font-weight: bold;
+		font-size: @font-size-small;
 		margin-bottom: 3px;
+		margin-right: 10px;
+		&:last-of-type {
+			margin-right: 0;
+		}
 		.history-entry-selected & {
-			color: #FFF;
+			color: @history-entry-selected-label-color;
+		}
+	}
+		.history-entry-label-comment,
+		.history-entry-label-delete-btn {
+			display: inline-block;
+			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-delete-btn {
+			padding-left: (@padding-xs-horizontal / 2);
+			padding-right: @padding-xs-horizontal;
+			border-radius: 0 9999px 9999px 0;
+			&:hover {
+				background-color: darken(@history-entry-label-bg-color, 8%);
+				.history-entry-selected & {
+					background-color: darken(@history-entry-selected-label-bg-color, 8%);
+				}
 			}
 		}
 

services/web/public/stylesheets/core/_common-variables.less

@@ -988,7 +988,10 @@
 // v2 History
 @history-base-font-size                : @font-size-small;
 @history-base-bg                       : @gray-lightest;
-@history-entry-label-color        : @red;
+@history-entry-label-bg-color          : @red;
+@history-entry-label-color             : #FFF;
+@history-entry-selected-label-bg-color : #FFF;
+@history-entry-selected-label-color    : @red;
 @history-entry-day-bg                  : @gray;
 @history-entry-selected-bg             : @red;
 @history-base-color                    : @gray-light;

services/web/public/stylesheets/core/ol-variables.less

@@ -277,7 +277,10 @@
 // v2 History
 @history-base-font-size               : @font-size-small;
 @history-base-bg                      : @ol-blue-gray-1;
-@history-entry-label-color       : @ol-blue;
+@history-entry-label-bg-color         : @ol-blue;
+@history-entry-label-color            : #FFF;
+@history-entry-selected-label-bg-color: #FFF;
+@history-entry-selected-label-color   : @ol-blue;
 @history-entry-day-bg                 : @ol-blue-gray-2;
 @history-entry-selected-bg            : @ol-green;
 @history-base-color                   : @ol-blue-gray-2;