GUACAMOLE-926: Switch to standard notification style.

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

@@ -35,6 +35,7 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
     const $timeout               = $injector.get('$timeout');
     const connectionParseService = $injector.get('connectionParseService');
     const connectionService      = $injector.get('connectionService');
+    const guacNotification       = $injector.get('guacNotification');
     const permissionService      = $injector.get('permissionService');
     const userService            = $injector.get('userService');
     const userGroupService       = $injector.get('userGroupService');
@@ -46,13 +47,6 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
     const User                = $injector.get('User');
     const UserGroup           = $injector.get('UserGroup');
     
-    /**
-     * Any error that may have occured during import file parsing.
-     *
-     * @type {ParseError}
-     */
-    $scope.error = null;
-
     /**
      * The result of parsing the current upload, if successful.
      *
@@ -116,7 +110,6 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
         $scope.aborted = false;
         $scope.dataReady = false;
         $scope.processing = false;
-        $scope.error = null;
         $scope.fileData = null;
         $scope.mimeType = null;
         $scope.fileReader = null;
@@ -404,7 +397,7 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
     }
     
     /**
-     * Set any caught error message to the scope for display.
+     * Display the provided error to the user in a dismissable dialog.
      *
      * @argument {ParseError} error
      *     The error to display.
@@ -415,16 +408,25 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
         // all upload state to allow for a fresh retry
         resetUploadState();
 
-        // Set the error for display
-        $scope.error = error;
+        guacNotification.showStatus({
+            className  : 'error',
+            title      : 'IMPORT.DIALOG_HEADER_ERROR',
+
+            // Use the translation key if available
+            text       : {
+                key: error.key || error.message,
+                variables: error.variables
+            },
+
+            // Add a button to hide the error
+            actions    : [{
+                name      : 'IMPORT.BUTTON_CLEAR',
+                callback  : () => guacNotification.showStatus(false)
+            }]
+        })
 
     };
 
-    /**
-     * Clear the current displayed error.
-     */
-    $scope.clearError = () => delete $scope.error;
-
     /**
      * Process the uploaded import file, importing the connections, granting
      * connection permissions, or displaying errors to the user if there are 
@@ -455,16 +457,14 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
         else if (mimeType.endsWith("yaml"))
             processDataCallback = connectionParseService.parseYAML;
 
-        // We don't expect this to happen - the file upload directive should
-        // have already have filtered out any invalid file types
-        else {
-            handleError(new ParseError({
-                message: 'Invalid file type: ' + mimeType,
-                key: 'IMPORT.INVALID_FILE_TYPE',
-                variables: { TYPE: mimeType }
-            }));
-            return;
-        }
+        // The file type was validated before being uploaded - this should
+        // never happen
+        else
+            processDataCallback = () => {
+                throw new ParseError({
+                    message: "Unexpected invalid file type: " + mimeType
+                });
+            };
 
         // Make the call to process the data into a series of patches
         processDataCallback(data)
@@ -501,9 +501,6 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
      */
     $scope.cancel = function() {
 
-        // Clear any error message
-        $scope.clearError();
-
         // If the upload is in progress, stop it now; the FileReader will
         // reset the upload state when it stops
         if ($scope.fileReader) {
@@ -542,9 +539,6 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
      */
     const handleFile = file => {
 
-        // Clear any error from a previous attempted file upload
-        $scope.clearError();
-
         // The MIME type of the provided file
         const mimeType = file.type;
 
@@ -556,7 +550,7 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
             // If the provided file is not one of the supported types,
             // display an error and abort processing
             handleError(new ParseError({
-                message: "Invalid file type: " + type,
+                message: "Invalid file type: " + mimeType,
                 key: 'IMPORT.ERROR_INVALID_FILE_TYPE',
                 variables: { TYPE: mimeType }
             }));
@@ -565,9 +559,6 @@ angular.module('import').controller('importConnectionsController', ['$scope', '$
 
         $scope.fileName = file.name;
 
-        // Clear any error message from the previous upload attempt
-        $scope.clearError();
-
         // Initialize upload state
         $scope.aborted = false;
         $scope.dataReady = false;

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

@@ -17,10 +17,6 @@
  * under the License.
  */
 
-.import .parseError {
-    color: red;
-}
-
 .import .import-buttons {
 
     margin-top: 10px;
@@ -30,7 +26,6 @@
 
 }
 
-
 .import .errors table {
     width: 100%;
 }
@@ -68,7 +63,6 @@
 
 .file-upload-container .clear {
     margin: 0;
-    padding:
 }
 
 .file-upload-container .upload-header {
@@ -154,16 +148,3 @@
     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,23 +5,6 @@
         <guac-user-menu></guac-user-menu>
     </div>
 
-    <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()">

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

@@ -188,10 +188,9 @@
 
         "BUTTON_CANCEL": "Cancel",
         "BUTTON_CLEAR" : "Clear",
-        "BUTTON_CLEAR_ERROR": "✖",
         "BUTTON_IMPORT": "Import Connections",
 
-        "ERROR_HEADER": "Error",
+        "DIALOG_HEADER_ERROR" : "@:APP.DIALOG_HEADER_ERROR",
 
         "FIELD_PLACEHOLDER_FILTER" : "@:APP.FIELD_PLACEHOLDER_FILTER",