Styling and error handling

CenterForOpenScience · Jun 24, 2024 · 3c15046 · 3c15046
1 parent 2376b38
commit 3c15046
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 39 deletions.
diff --git a/lib/osf-components/addon/components/addons-service/file-manager/component.ts b/lib/osf-components/addon/components/addons-service/file-manager/component.ts
@@ -10,6 +10,7 @@ import Toast from 'ember-toastr/services/toast';
 
 import { Item } from 'ember-osf-web/models/addon-operation-invocation';
 import ConfiguredStorageAddonModel, { OperationKwargs } from 'ember-osf-web/models/configured-storage-addon';
+import captureException, { getApiErrorMessage } from 'ember-osf-web/utils/capture-exception';
 
 interface Args {
     configuredStorageAddon: ConfiguredStorageAddonModel;
@@ -31,7 +32,13 @@ export default class FileManager extends Component<Args> {
     private lastInvocation: any = null;
 
     get isLoading() {
-        return taskFor(this.args.configuredStorageAddon.getFolderItems).isRunning;
+        return taskFor(this.args.configuredStorageAddon.getFolderItems).isRunning ||
+            taskFor(this.getStartingFolder).isRunning;
+    }
+
+    get isError() {
+        return taskFor(this.args.configuredStorageAddon.getFolderItems).lastPerformed?.error ||
+            taskFor(this.getStartingFolder).lastPerformed?.error;
     }
 
     constructor(owner: unknown, args: Args) {
@@ -52,6 +59,7 @@ export default class FileManager extends Component<Args> {
     @action
     goToFolder(folder: Item) {
         this.cursor = '';
+        this.currentItems = [];
         if (this.currentPath.includes(folder)) {
             this.currentPath = this.currentPath.slice(0, this.currentPath.indexOf(folder) + 1);
         } else {
@@ -76,7 +84,10 @@ export default class FileManager extends Component<Args> {
             const invocation = await taskFor(configuredStorageAddon.getItemInfo).perform(startingFolderId);
             this.currentPath = invocation.operationResult.items;
         } catch (e) {
-            this.toast.error(this.intl.t('osf-components.addons-service.file-manager.get-item-error'));
+            captureException(e);
+            const errorMessage = this.intl.t('osf-components.addons-service.file-manager.get-item-error');
+            this.toast.error(getApiErrorMessage(e), errorMessage);
+            throw e;
         }
     }
 
@@ -93,7 +104,10 @@ export default class FileManager extends Component<Args> {
             this.currentItems = this.cursor ? [...this.currentItems, ...operationResult.items] : operationResult.items;
             this.hasMore = Boolean(invocation.operationResult.cursor);
         } catch (e) {
-            this.toast.error(this.intl.t('osf-components.addons-service.file-manager.get-items-error'));
+            captureException(e);
+            const errorMessage = this.intl.t('osf-components.addons-service.file-manager.get-items-error');
+            this.toast.error(getApiErrorMessage(e), errorMessage);
+            throw e;
         }
     }
 }
diff --git a/lib/osf-components/addon/components/addons-service/file-manager/template.hbs b/lib/osf-components/addon/components/addons-service/file-manager/template.hbs
@@ -9,4 +9,5 @@
     getMore=this.getMore
 
     isLoading=this.isLoading
+    isError=this.isError
 )}}
diff --git a/lib/osf-components/addon/components/addons-service/root-folder-picker/styles.scss b/lib/osf-components/addon/components/addons-service/root-folder-picker/styles.scss
@@ -1,8 +1,18 @@
+.current-path {
+    margin-bottom: 1rem;
+}
+
 .file-tree-table {
     width: 100%;
+    border: solid 1px $color-border-gray;
+    border-collapse: collapse;
 
     thead {
-        border: solid 1px $color-border-gray;
+        border-bottom: solid 1px $color-border-gray;
+    }
+
+    th {
+        padding: 6px;
     }
 
     th:first-of-type {
@@ -14,3 +24,24 @@
         width: 30px;
     }
 }
+
+.table-body {
+    tr {
+        td {
+            padding: 6px;
+        }
+
+        td:first-of-type {
+            text-align: start;
+        }
+
+        td:last-of-type {
+            text-align: center;
+        }
+    }
+}
+
+.footer-buttons-wrapper {
+    margin-top: 1rem;
+    float: right;
+}
diff --git a/lib/osf-components/addon/components/addons-service/root-folder-picker/template.hbs b/lib/osf-components/addon/components/addons-service/root-folder-picker/template.hbs
@@ -5,27 +5,34 @@
         @startingFolderId={{this.selectedFolder}}
         as |fileManager|
     >
-        {{#each fileManager.currentPath as |pathItem|}}
-            <span>
-                <Button
-                    data-test-folder-path-option='{{pathItem.itemName}}'
-                    data-analytics-name='Go to ancestor folder'
-                    @layout='fake-link'
-                    aria-label={{t 'addons.configure.go-to-folder' folderName=pathItem.itemName}}
-                    {{on 'click' (fn fileManager.goToFolder pathItem)}}
-                >
-                    {{pathItem.itemName}}
-                </Button>
-            </span>
-        {{/each}}
-        <table>
+        <div local-class='current-path'>
+            {{#each fileManager.currentPath as |pathItem index|}}
+                <span>
+                    <Button
+                        data-test-folder-path-option='{{pathItem.itemName}}'
+                        data-analytics-name='Go to ancestor folder'
+                        @layout='fake-link'
+                        aria-label={{t 'addons.configure.go-to-folder' folderName=pathItem.itemName}}
+                        {{on 'click' (fn fileManager.goToFolder pathItem)}}
+                    >
+                        {{#if (eq index 0)}}
+                            <FaIcon @icon='home' />
+                        {{else}}
+                            <FaIcon @icon='chevron-right' />
+                        {{/if}}
+                        {{pathItem.itemName}}
+                    </Button>
+                </span>
+            {{/each}}
+        </div>
+        <table local-class='file-tree-table'>
             <thead>
                 <tr>
                     <th>{{t 'addons.configure.table-headings.folder-name'}}</th>
                     <th>{{t 'addons.configure.table-headings.select'}}</th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody local-class='table-body'>
                 {{#each fileManager.currentItems as |folder|}}
                     <tr>
                         <td>
@@ -52,32 +59,37 @@
                             >
                         </td>
                     </tr>
+                {{else if fileManager.isLoading}}
+                    <LoadingIndicator @dark={{true}} />
+                {{else if fileManager.isError}}
+                    <tr>
+                        <td colspan='2'>{{t 'addons.configure.error-loading-items'}}</td>
+                    </tr>
                 {{else}}
                     <tr>
                         <td colspan='2'>{{t 'addons.configure.no-folders'}}</td>
                     </tr>
                 {{/each}}
             </tbody>
         </table>
-        {{#if fileManager.isLoading}}
-            <LoadingIndicator @dark={{true}} />
-        {{/if}}
-        <Button
-            data-test-root-folder-save
-            data-analytics-name='Save selected folder'
-            @type='primary'
-            disabled={{this.disableSave}}
-            {{on 'click' (fn @onSave this.selectedFolder)}}
-        >
-            {{t 'general.save'}}
-        </Button>
-        <Button
-            data-test-root-folder-cancel
-            data-analytics-name='Cancel'
-            @type='secondary'
-            {{on 'click' @onCancel}}
-        >
-            {{t 'general.cancel'}}
-        </Button>
+        <div local-class='footer-buttons-wrapper'>
+            <Button
+                data-test-root-folder-save
+                data-analytics-name='Save selected folder'
+                @type='primary'
+                disabled={{this.disableSave}}
+                {{on 'click' (fn @onSave this.selectedFolder)}}
+            >
+                {{t 'general.save'}}
+            </Button>
+            <Button
+                data-test-root-folder-cancel
+                data-analytics-name='Cancel'
+                @type='secondary'
+                {{on 'click' @onCancel}}
+            >
+                {{t 'general.cancel'}}
+            </Button>
+        </div>
     </AddonsService::FileManager>
 </div>
diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -352,6 +352,7 @@ addons:
             folder-name: 'Folder Name'
             select: 'Select'
         no-folders: 'No folders'
+        error-loading-items: 'Error loading items'
         success: 'Successfully updated {configurationName}'
         error: 'Error updating {configurationName}'