GUACAMOLE-1866: Allow recent connections to be removed.

apache · Apr 7, 2024 · bf38228 · bf38228
1 parent 0e12f48
commit bf38228
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 1 deletion.
diff --git a/guacamole/src/main/frontend/src/app/history/services/guacHistory.js b/guacamole/src/main/frontend/src/app/history/services/guacHistory.js
@@ -42,6 +42,31 @@ 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) {
+
+        var i;
+
+        for (i = 0; i < service.recentConnections.length; i++) {
+            if (service.recentConnections[i].id === id) {
+                service.recentConnections.splice(i, 1);
+                return true;
+            }
+        }
+
+        return false;
+
+    };
+
     /**
      * Updates the thumbnail and access time of the history entry for the
      * connection with the given ID.

diff --git a/guacamole/src/main/frontend/src/app/home/directives/guacRecentConnections.js b/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.
              * 

diff --git a/guacamole/src/main/frontend/src/app/home/styles/home.css b/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,21 @@ a.home-connection, .empty.balancer a.home-connection-group {
 .header-app-name {
     font-size: 0.85em;
     box-shadow: none;
+}
+
+.recent-connections .connection .x-thumbnail {
+    background-color: red;
+    display: flex;
+    height: 1em;
+    width: 1em;
+    position: absolute;
+    top: 10px;
+    z-index: 10;
+    float: right;
+    right: 10px;
+    opacity: .2;
+}
+
+.recent-connections .connection .x-thumbnail:hover {
+    opacity: 1.0;
 }
diff --git a/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html b/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,10 @@
             </div>
 
         </a>
+        <!-- Remove thumbnail -->
+        <div class="x-thumbnail" ng-click="removeRecentConnection(recentConnection)">
+            <img alt="X" src="images/x.svg"/>
+        </div>
     </div>
 
 </div>