From eadc1779a0d2b008afd70fa7d9855fec39efe722 Mon Sep 17 00:00:00 2001 From: James Muehlner Date: Fri, 3 Mar 2023 19:38:46 +0000 Subject: [PATCH] GUACAMOLE-926: Import/upload UI improvements. --- .../importConnectionsController.js | 9 ++-- .../frontend/src/app/import/importModule.js | 2 +- .../frontend/src/app/import/styles/import.css | 26 ++++++++++- .../import/templates/connectionImport.html | 44 ++++++++++++------- .../main/frontend/src/translations/en.json | 6 ++- 5 files changed, 63 insertions(+), 24 deletions(-) diff --git a/guacamole/src/main/frontend/src/app/import/controllers/importConnectionsController.js b/guacamole/src/main/frontend/src/app/import/controllers/importConnectionsController.js index 14da850f9..124b69555 100644 --- a/guacamole/src/main/frontend/src/app/import/controllers/importConnectionsController.js +++ b/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; diff --git a/guacamole/src/main/frontend/src/app/import/importModule.js b/guacamole/src/main/frontend/src/app/import/importModule.js index 46e5fa157..164ec2b16 100644 --- a/guacamole/src/main/frontend/src/app/import/importModule.js +++ b/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']); diff --git a/guacamole/src/main/frontend/src/app/import/styles/import.css b/guacamole/src/main/frontend/src/app/import/styles/import.css index 3fbdbe077..0b813083d 100644 --- a/guacamole/src/main/frontend/src/app/import/styles/import.css +++ b/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; @@ -142,4 +153,17 @@ text-decoration: underline; cursor: pointer; -} \ No newline at end of file +} + +.import .parseError { + display: flex; + justify-content: center; + padding: 0.75em; + margin-bottom: 10px; + gap: 3em; +} + +.import .parseError .clear { + cursor: pointer; +} + diff --git a/guacamole/src/main/frontend/src/app/import/templates/connectionImport.html b/guacamole/src/main/frontend/src/app/import/templates/connectionImport.html index c9e37be46..488b38160 100644 --- a/guacamole/src/main/frontend/src/app/import/templates/connectionImport.html +++ b/guacamole/src/main/frontend/src/app/import/templates/connectionImport.html @@ -4,8 +4,32 @@

{{'IMPORT.HEADER' | translate}}

+ +
+ + + + + + + {{error.message}} + + + {{'IMPORT.BUTTON_CLEAR_ERROR' | translate}} + +
+ +
+
{{fileName}}
+ +
-
+
{{'IMPORT.UPLOAD_FILE_TYPES' | translate}} @@ -17,20 +41,19 @@
-
{{'IMPORT.UPLOAD_DROP_TITLE' | translate}}
+
{{'IMPORT.UPLOAD_DROP_TITLE' | translate}}
- + {{'IMPORT.UPLOAD_BROWSE_LINK' | translate}} -
{{fileName}}
+
{{fileName}}
-
- -

- - -

- {{error.message}} -

- diff --git a/guacamole/src/main/frontend/src/translations/en.json b/guacamole/src/main/frontend/src/translations/en.json index c5292b80f..f80e91a5a 100644 --- a/guacamole/src/main/frontend/src/translations/en.json +++ b/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",