GUACAMOLE-1866: Allow recent connections to be removed.

guacamole/src/main/frontend/src/app/history/services/guacHistory.js

@@ -42,6 +42,22 @@ angular.module('history').factory('guacHistory', ['$injector',
      */
     service.recentConnections = [];
 
+    /**
+     * Remove from the list of connection history the item having the given
+     * identfier.
+     * 
+     * @param {String} id
+     *     The identifier of the item to remove from the history list.
+     *     
+     * @returns {boolean}
+     *     True if the removal was successful, otherwise false.
+     */
+    service.removeEntry = function removeEntry(id) {
+
+        return _.remove(service.recentConnections, entry => entry.id === id).length > 0;
+
+    };
+
     /**
      * Updates the thumbnail and access time of the history entry for the
      * connection with the given ID.

guacamole/src/main/frontend/src/app/home/directives/guacRecentConnections.js

@@ -59,6 +59,21 @@ angular.module('home').directive('guacRecentConnections', [function guacRecentCo
              */
             $scope.recentConnections = [];
 
+            /**
+             * Remove the connection from the recent connection list having the
+             * given identifier.
+             * 
+             * @param {!RecentConnection} recentConnection
+             *     The recent connection to remove from the history list.
+             *     
+             * @returns {boolean}
+             *     True if the removal was successful, otherwise false.
+             */
+            $scope.removeRecentConnection = function removeRecentConnection(recentConnection) {
+                return ($scope.recentConnections.splice($scope.recentConnections.indexOf(recentConnection), 1) 
+                        && guacHistory.removeEntry(recentConnection.entry.id));
+            };
+
             /**
              * Returns whether or not recent connections should be displayed.
              * 

guacamole/src/main/frontend/src/app/home/styles/home.css

@@ -49,6 +49,7 @@ div.recent-connections div.connection {
     text-align: center;
     max-width: 75%;
     overflow: hidden;
+    position: relative;
 }
 
 a.home-connection, .empty.balancer a.home-connection-group {
@@ -79,4 +80,31 @@ a.home-connection, .empty.balancer a.home-connection-group {
 .header-app-name {
     font-size: 0.85em;
     box-shadow: none;
-}
+}
+
+.recent-connections .connection .remove-recent::after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center center;
+    background-image: url('images/x.svg');
+}
+
+.recent-connections .connection .remove-recent {
+    background-color: red;
+    height: 1em;
+    width: 1em;
+    position: absolute;
+    top: 10px;
+    z-index: 10;
+    float: right;
+    right: 10px;
+    opacity: .2;
+}
+
+.recent-connections .connection .remove-recent:hover {
+    opacity: 1.0;
+}

guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html

@@ -9,7 +9,7 @@
 
             <!-- Connection thumbnail -->
             <div class="thumbnail">
-                <img alt="{{recentConnection.name}}" ng-src="{{recentConnection.entry.thumbnail}}">
+                <img alt="{{recentConnection.name}}" ng-src="{{recentConnection.entry.thumbnail}}"/>
             </div>
 
             <!-- Connection name -->
@@ -18,6 +18,8 @@
             </div>
 
         </a>
+        <!-- Remove thumbnail -->
+        <div class="remove-recent" ng-click="removeRecentConnection(recentConnection)" />
     </div>
 
 </div>