From bf382289f1c08e6fe6943cc374a07ecf6944e098 Mon Sep 17 00:00:00 2001
From: Virtually Nick <vnick@apache.org>
Date: Sat, 6 Apr 2024 20:34:14 -0400
Subject: [PATCH] GUACAMOLE-1866: Allow recent connections to be removed.

---
 .../src/app/history/services/guacHistory.js   | 25 +++++++++++++++++++
 .../home/directives/guacRecentConnections.js  | 15 +++++++++++
 .../frontend/src/app/home/styles/home.css     | 18 +++++++++++++
 .../home/templates/guacRecentConnections.html |  6 ++++-
 4 files changed, 63 insertions(+), 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
index e47cb29e98..c5f82fd47f 100644
--- 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
index 1f16e036eb..57f141f3f2 100644
--- 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
index e6837f45c2..ef3178952a 100644
--- 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;
 }
\ No newline at end of file
diff --git a/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html b/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html
index 96c75ec71f..97207dbd18 100644
--- 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>