Merge pull request #2386 from Johnetordoff/add-download-dashboard-but…

…tons [ENG-6280][ENG-6281] Add download dashboard buttons move archive link
CenterForOpenScience · Nov 12, 2024 · a3dd9ac · a3dd9ac
2 parents c4f364d + bd40d53
commit a3dd9ac
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 21 deletions.
diff --git a/app/institutions/dashboard/-components/institutional-dashboard-wrapper/template.hbs b/app/institutions/dashboard/-components/institutional-dashboard-wrapper/template.hbs
@@ -8,24 +8,6 @@
     >
         <div local-class='banner'>
             <img src='{{@institution.bannerUrl}}' alt='{{@institution.name}}'>
-            {{#if @institution.linkToExternalReportsArchive}}
-                <div>
-                    <OsfLink
-                        data-test-link-to-reports-archive
-                        data-analytics-name='Link to archived reports'
-                        @target='_blank'
-                        @fakeButton={{true}}
-                        @href={{@institution.linkToExternalReportsArchive}}
-                    >
-                        <EmberTooltip @side='bottom'>
-                            {{t 'institutions.dashboard.download_past_reports_label'}}
-                        </EmberTooltip>
-                        <FaIcon
-                            @icon='chart-pie'
-                        />
-                    </OsfLink>
-                </div>
-            {{/if}}
         </div>
         <ul
             data-analytics-scope='Dashboard tabs'

diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -277,3 +277,18 @@ input:checked + .slider::before {
     margin-right: 5px;
     font-weight: bold;
 }
+
+.download-button-group {
+    display: inline-flex;
+    padding-left: 10px;
+    align-content: center;
+
+    div {
+        color: #2d6a9f;
+    }
+
+    .download-dropdown {
+        margin-left: 3px;
+    }
+}
+
diff --git a/app/institutions/dashboard/-components/institutional-users-list/template.hbs b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
@@ -64,6 +64,43 @@
                 </div>
             {{/if}}
         </BasicDropdown>
+        <div local-class='download-button-group'>
+            {{#if @institution.linkToExternalReportsArchive}}
+                <OsfLink
+                    data-test-link-to-reports-archive
+                    data-analytics-name='Link to archived reports'
+                    @target='_blank'
+                    @fakeButton={{true}}
+                    @href={{@institution.linkToExternalReportsArchive}}
+                >
+                    <EmberTooltip @side='bottom'>
+                        {{t 'institutions.dashboard.download_past_reports_label'}}
+                    </EmberTooltip>
+                    <FaIcon @icon='chart-pie'/>
+                </OsfLink>
+            {{/if}}
+            <div local-class='download-dropdown'>
+                <ResponsiveDropdown @renderInPlace={{true}} @buttonStyling={{true}} as |dd| >
+                    <dd.trigger data-test-download-dropdown local-class='download-dropdown-trigger'>
+                        <FaIcon @icon='download' />
+                    </dd.trigger>
+                    <dd.content local-class='download-dropdown-content'>
+                        <Button local-class='download-option' {{on 'click' (queue this.downloadCsv dd.close)}}>
+                            {{t 'institutions.dashboard.format_labels.csv'}}
+                        </Button>
+                        <Button local-class='download-option' {{on 'click' (queue this.downloadTsv dd.close)}}>
+                            {{t 'institutions.dashboard.format_labels.tsv'}}
+                        </Button>
+                        <Button local-class='download-option' {{on 'click' (queue this.downloadJsonTable dd.close)}}>
+                            {{t 'institutions.dashboard.format_labels.json_table'}}
+                        </Button>
+                        <Button local-class='download-option' {{on 'click' (queue this.downloadJsonDirect dd.close)}}>
+                            {{t 'institutions.dashboard.format_labels.json_direct'}}
+                        </Button>
+                    </dd.content>
+                </ResponsiveDropdown>
+            </div>
+        </div>
     </div>
     <PaginatedList::HasMany
         local-class='table'

diff --git a/app/institutions/dashboard/-components/object-list/component-test.ts b/app/institutions/dashboard/-components/object-list/component-test.ts
@@ -62,7 +62,6 @@ module('Integration | institutions | dashboard | -components | object-list', hoo
         `);
 
         // Elements from InstitutionDashboarWrapper are present
-        assert.dom('[data-test-link-to-reports-archive]').exists('Link to download prior reports exists');
         assert.dom('[data-test-page-tab="summary"]').exists('Summary tab exists');
 
         // Elements in the top bar are present

diff --git a/app/institutions/dashboard/-components/object-list/styles.scss b/app/institutions/dashboard/-components/object-list/styles.scss
@@ -118,3 +118,13 @@
 .blue-text-button {
     color: $color-link-dark;
 }
+
+.download-dropdown-trigger {
+    color: $color-bg-blue-dark;
+}
+
+.download-button-group {
+    align-content: center;
+    display: inline-flex;
+    padding-left: 10px;
+}
diff --git a/app/institutions/dashboard/-components/object-list/template.hbs b/app/institutions/dashboard/-components/object-list/template.hbs
@@ -66,6 +66,45 @@ as |list|>
                                 </div>
                             </dd.content>
                         </ResponsiveDropdown>
+                        <div local-class='download-button-group'>
+                            {{#if @institution.linkToExternalReportsArchive}}
+                                <div>
+                                    <OsfLink
+                                        data-test-link-to-reports-archive
+                                        data-analytics-name='Link to archived reports'
+                                        @target='_blank'
+                                        @fakeButton={{true}}
+                                        @href={{@institution.linkToExternalReportsArchive}}
+                                    >
+                                        <EmberTooltip @side='bottom'>
+                                            {{t 'institutions.dashboard.download_past_reports_label'}}
+                                        </EmberTooltip>
+                                        <FaIcon
+                                            @icon='chart-pie'
+                                        />
+                                    </OsfLink>
+                                </div>
+                            {{/if}}
+                            <ResponsiveDropdown @renderInPlace={{true}} @buttonStyling={{true}} as |dd| >
+                                <dd.trigger data-test-download-dropdown local-class='download-dropdown-trigger'>
+                                    <FaIcon @icon='download' />
+                                </dd.trigger>
+                                <dd.content local-class='download-dropdown-content'>
+                                    <Button
+                                        local-class='download-option'
+                                        {{on 'click' (queue this.downloadCsv dd.close)}}
+                                    >
+                                        {{t 'institutions.dashboard.format_labels.csv'}}
+                                    </Button>
+                                    <Button
+                                           local-class='download-option'
+                                           {{on 'click' (queue this.downloadTsv dd.close)}}
+                                    >
+                                        {{t 'institutions.dashboard.format_labels.tsv'}}
+                                    </Button>
+                                </dd.content>
+                            </ResponsiveDropdown>
+                        </div>
                     </div>
                 </div>
                 <div local-class='table-wrapper'>

diff --git a/tests/acceptance/institutions/dashboard-test.ts b/tests/acceptance/institutions/dashboard-test.ts
@@ -22,8 +22,6 @@ module(moduleName, hooks => {
             "Still at '/institutions/has-users/dashboard'.",
         );
 
-        assert.dom('[data-test-link-to-reports-archive]').exists('Link to download prior reports exists');
-
         assert.dom('[data-test-page-tab="summary"]').exists('Summary tab exists');
         assert.dom('[data-test-page-tab="users"]').exists('Users tab exists');
         assert.dom('[data-test-page-tab="projects"]').exists('Projects tab exists');
@@ -38,21 +36,29 @@ module(moduleName, hooks => {
         await click('[data-test-page-tab="users"]');
         await percySnapshot(`${moduleName} - users`);
         assert.dom('[data-test-page-tab="users"]').hasClass('active', 'Users tab is active');
+        assert.dom('[data-test-link-to-reports-archive]').exists('Link to download prior reports exists');
+        assert.dom('[data-test-download-dropdown]').exists('Link to download file formats');
 
         // Projects tab
         await click('[data-test-page-tab="projects"]');
         await percySnapshot(`${moduleName} - projects`);
         assert.dom('[data-test-page-tab="projects"]').hasClass('active', 'Projects tab is active');
+        assert.dom('[data-test-link-to-reports-archive]').exists('Link to download prior reports exists');
+        assert.dom('[data-test-download-dropdown]').exists('Link to download file formats');
 
         // Registrations tab
         await click('[data-test-page-tab="registrations"]');
         await percySnapshot(`${moduleName} - registrations`);
         assert.dom('[data-test-page-tab="registrations"]').hasClass('active', 'Registrations tab is active');
+        assert.dom('[data-test-link-to-reports-archive]').exists('Link to download prior reports exists');
+        assert.dom('[data-test-download-dropdown]').exists('Link to download file formats');
 
         // Preprints tab
         await click('[data-test-page-tab="preprints"]');
         await percySnapshot(`${moduleName} - preprints`);
         assert.dom('[data-test-page-tab="preprints"]').hasClass('active', 'Preprints tab is active');
+        assert.dom('[data-test-link-to-reports-archive]').exists('Link to download prior reports exists');
+        assert.dom('[data-test-download-dropdown]').exists('Link to download file formats');
     });
 
     test('institutions dashboard: projects, registrations, and preprints tab', async function(assert) {

diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -813,6 +813,13 @@ institutions:
         title: '{institutionName} Dashboard'
         download_past_reports_label: 'Previous reports'
         download_csv: 'Download CSV'
+        download_tsv: 'Download TSV'
+        format_labels:
+          csv: '.csv'
+          tsv: '.tsv'
+          json_table: 'JSON (table)'
+          json_direct: 'JSON (direct)'
+        download: 'Download'
         select_default: 'All Departments'
         users_list:
             name: Name