GUACAMOLE-823: Restructure home screen connection groups to match connections.

guacamole/src/main/webapp/app/groupList/types/GroupListItem.js

@@ -145,7 +145,7 @@ angular.module('groupList').factory('GroupListItem', ['$injector', function defi
                 });
 
             // If the item is a connection group, generate a connection group identifier
-            if (this.type === GroupListItem.Type.CONNECTION_GROUP)
+            if (this.type === GroupListItem.Type.CONNECTION_GROUP && this.balancing)
                 return ClientIdentifier.toString({
                     dataSource : this.dataSource,
                     type       : ClientIdentifier.Types.CONNECTION_GROUP,
@@ -157,6 +157,27 @@ angular.module('groupList').factory('GroupListItem', ['$injector', function defi
 
         };
 
+        /**
+         * Returns the relative URL of the client page that connects to the
+         * connection or connection group represented by this GroupListItem.
+         *
+         * @returns {String}
+         *     The relative URL of the client page that connects to the
+         *     connection or connection group represented by this GroupListItem,
+         *     or null if this GroupListItem cannot be connected to.
+         */
+        this.getClientURL = template.getClientURL || function getClientURL() {
+
+            // There is a client page for this item only if it has an
+            // associated client identifier
+            var identifier = this.getClientIdentifier();
+            if (identifier)
+                return '#/client/' + encodeURIComponent(identifier);
+
+            return null;
+
+        };
+
         /**
          * The connection, connection group, or sharing profile whose data is
          * exposed within this GroupListItem. If the type of this GroupListItem

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

@@ -54,3 +54,13 @@ div.recent-connections div.connection {
 a.home-connection {
     display: block;
 }
+
+/* Show only expand/collapse icon for connection groups on home screen */
+
+.all-connections .connection-group > .caption .icon {
+    display: none;
+}
+
+.all-connections .connection-group > .caption .icon.expand {
+    display: inline-block;
+}

guacamole/src/main/webapp/app/home/templates/connection.html

@@ -1,5 +1,5 @@
 <a class="home-connection"
-   ng-href="#/client/{{ item.getClientIdentifier() }}"
+   ng-href="{{ item.getClientURL() }}"
    ng-class="{active: item.getActiveConnections()}">
 
     <!-- Connection icon -->

guacamole/src/main/webapp/app/home/templates/connectionGroup.html

@@ -1,4 +1,10 @@
-<span class="home-connection-group name">
-    <a ng-show="item.balancing" ng-href="#/client/{{ item.getClientIdentifier() }}">{{item.name}}</a>
-    <span ng-show="!item.balancing">{{item.name}}</span>
-</span>
+<a class="home-connection-group"
+   ng-href="{{ item.getClientURL() }}">
+
+    <!-- Connection group icon -->
+    <div ng-show="item.balancing" class="icon type balancer"></div>
+
+    <!-- Connection group name -->
+    <span class="name">{{item.name}}</span>
+
+</a>