GUACAMOLE-926: Import/upload UI improvements.

guacamole/src/main/frontend/src/app/import/controllers/importConnectionsController.js

@@ -43,7 +43,6 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
     const DirectoryPatch      = $injector.get('DirectoryPatch');
     const ParseError          = $injector.get('ParseError');
     const PermissionSet       = $injector.get('PermissionSet');
-    const TranslatableMessage = $injector.get('TranslatableMessage');
     const User                = $injector.get('User');
     const UserGroup           = $injector.get('UserGroup');
 
@@ -424,7 +423,7 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
     /**
      * Clear the current displayed error.
      */
-    const clearError = () => delete $scope.error;
+    $scope.clearError = () => delete $scope.error;
 
     /**
      * Process the uploaded import file, importing the connections, granting
@@ -503,7 +502,7 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
     $scope.cancel = function() {
 
         // Clear any error message
-        clearError();
+        $scope.clearError();
 
         // If the upload is in progress, stop it now; the FileReader will
         // reset the upload state when it stops
@@ -544,7 +543,7 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
     const handleFile = file => {
 
         // Clear any error from a previous attempted file upload
-        clearError();
+        $scope.clearError();
 
         // The MIME type of the provided file
         const mimeType = file.type;
@@ -567,7 +566,7 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
         $scope.fileName = file.name;
         
         // Clear any error message from the previous upload attempt
-        clearError();
+        $scope.clearError();
 
         // Initialize upload state
         $scope.aborted = false;

guacamole/src/main/frontend/src/app/import/importModule.js

@@ -21,4 +21,4 @@
  * The module for code supporting importing user-supplied files. Currently, only
  * connection import is supported.
  */
-angular.module('import', ['rest', 'list']);
+angular.module('import', ['rest', 'list', 'notification']);

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

@@ -60,6 +60,17 @@
 
 }
 
+.file-upload-container.file-selected {
+    display: flex;
+    flex-direction: row;
+    gap: 100px;
+}
+
+.file-upload-container .clear {
+    margin: 0;
+    padding:
+}
+
 .file-upload-container .upload-header {
 
     display: flex;
@@ -143,3 +154,16 @@
     cursor: pointer;
 
 }
+
+.import .parseError {
+    display: flex;
+    justify-content: center;
+    padding: 0.75em;
+    margin-bottom: 10px;
+    gap: 3em;
+}
+
+.import .parseError .clear {
+    cursor: pointer;
+}
+

guacamole/src/main/frontend/src/app/import/templates/connectionImport.html

@@ -5,7 +5,31 @@
         <guac-user-menu></guac-user-menu>
     </div>
 
-    <div class="file-upload-container">
+    <div ng-show="error" class="parseError notification error">
+
+        <!-- The translatable error message, if one is set -->
+        <span
+            class="message" ng-show="error.key"
+            translate="{{error.key}}" translate-values="{{error.variables}}"
+        ></span>
+
+        <!-- The base message, if no translatable message is available -->
+        <span class="message" ng-show="!error.key && error.message">
+            {{error.message}}
+        </span>
+
+        <span class="clear" ng-click="clearError()"> {{'IMPORT.BUTTON_CLEAR_ERROR' | translate}} </span>
+
+    </div>
+
+    <div ng-show="fileName" class="file-upload-container file-selected">
+        <div class="file-name"> {{fileName}} </div>
+        <button class="danger clear" ng-click="cancel()">
+            {{'IMPORT.BUTTON_CLEAR' | translate}}
+        </button>
+    </div>
+    
+    <div ng-show="!fileName" class="file-upload-container">
 
         <div class="upload-header">
             <span class="file-options">{{'IMPORT.UPLOAD_FILE_TYPES' | translate}}</span>
@@ -17,20 +41,19 @@
 
         <div class="drop-target" ng-class="{ 'drop-pending': dropPending, 'file-present': fileName}">
 
-            <div ng-show="!fileName" class="title">{{'IMPORT.UPLOAD_DROP_TITLE' | translate}}</div>
+            <div class="title">{{'IMPORT.UPLOAD_DROP_TITLE' | translate}}</div>
 
             <input type="file" class="file-upload-input"/>
-            <a ng-show="!fileName" ng-click="openFileBrowser()" class="browse-link">
+            <a ng-click="openFileBrowser()" class="browse-link">
                 {{'IMPORT.UPLOAD_BROWSE_LINK' | translate}}
             </a>
 
-            <div ng-show="fileName" class="file-name"> {{fileName}} </div>
+            <div class="file-name"> {{fileName}} </div>
 
         </div>
 
     </div>
 
-
     <div class="import-buttons">
         <button 
             ng-click="import()" ng-disabled="importDisabled()" class="import">
@@ -42,17 +65,6 @@
         </button>
     </div>
 
-    <!-- The translatable error message, if one is set -->
-    <p 
-        class="parseError" ng-show="error.key" 
-        translate="{{error.key}}" translate-values="{{error.variables}}"
-    ></p>
-    
-    <!-- The base message, if no translatable message is available -->
-    <p class="parseError" ng-show="!error.key && error.message">
-        {{error.message}}
-    </p>
-
     <!-- Connection specific errors, if there are any -->
     <connection-import-errors parse-result="parseResult" patch-failure="patchFailure" />
 

guacamole/src/main/frontend/src/translations/en.json

@@ -187,8 +187,12 @@
     "IMPORT": {
 
         "BUTTON_CANCEL": "Cancel",
+        "BUTTON_CLEAR" : "Clear",
+        "BUTTON_CLEAR_ERROR": "✖",
         "BUTTON_IMPORT": "Import Connections",
 
+        "ERROR_HEADER": "Error",
+
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",
 
         "HEADER": "Connection Import",
@@ -240,7 +244,7 @@
         "TABLE_HEADER_NAME" : "Name",
         "TABLE_HEADER_PROTOCOL" : "Protocol",
         "TABLE_HEADER_ERRORS" : "Errors",
-        "TABLE_HEADER_ROW_NUMBER": "Row Number",
+        "TABLE_HEADER_ROW_NUMBER": "Row #",
 
         "UPLOAD_FILE_TYPES": "CSV, JSON, or YAML",
         "UPLOAD_HELP_LINK": "View Format Tips",