[ENG-6617][ENG-6559] Integrate user download functionality

app/institutions/dashboard/-components/institutional-users-list/component.ts

@@ -9,6 +9,7 @@ import Intl from 'ember-intl/services/intl';
 import InstitutionModel from 'ember-osf-web/models/institution';
 import InstitutionDepartmentsModel from 'ember-osf-web/models/institution-department';
 import Analytics from 'ember-osf-web/services/analytics';
+import { RelationshipWithLinks } from 'osf-api';
 
 interface Column {
     key: string;
@@ -184,6 +185,27 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
         return query;
     }
 
+    downloadUrl(format: string) {
+        const institutionRelationships = this.args.institution.links.relationships;
+        const usersLink = (institutionRelationships!.user_metrics as RelationshipWithLinks).links.related.href;
+        const userURL = new URL(usersLink!);
+        userURL.searchParams.set('format', format);
+        userURL.searchParams.set('page[size]', '10000');
+        return userURL.toString();
+    }
+
+    get downloadCsvUrl() {
+        return this.downloadUrl('csv');
+    }
+
+    get downloadTsvUrl() {
+        return this.downloadUrl('tsv');
+    }
+
+    get downloadJsonUrl() {
+        return this.downloadUrl('json_report');
+    }
+
     @restartableTask
     @waitFor
     async searchDepartment(name: string) {
@@ -237,5 +259,4 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
     clickToggleOrcidFilter(hasOrcid: boolean) {
         this.hasOrcid = !hasOrcid;
     }
-
 }

app/institutions/dashboard/-components/institutional-users-list/styles.scss

@@ -6,6 +6,18 @@
     color: $color-select;
 }
 
+.download-dropdown-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border: 1px solid $color-border-gray;
+    width: max-content;
+}
+
+.downlaod-link {
+    padding: 4px 8px;
+}
+
 .table {
     margin-bottom: 45px;
 

app/institutions/dashboard/-components/institutional-users-list/template.hbs

@@ -88,24 +88,43 @@
                         <ResponsiveDropdown @renderInPlace={{true}} @buttonStyling={{true}} as |dd| >
                             <dd.trigger
                                 data-test-download-dropdown
+                                data-analytics-name='Download Dropdown'
                                 aria-label={{t 'institutions.dashboard.download_dropdown_label'}}
                                 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)}}>
+                                <OsfLink
+                                    data-test-csv-download-button
+                                    data-analytics-name='Download CSV'
+                                    local-class='downlaod-link'
+                                    {{on 'click' dd.close}}
+                                    @target='_blank'
+                                    @href={{this.downloadCsvUrl}}
+                                >
                                     {{t 'institutions.dashboard.format_labels.csv'}}
-                                </Button>
-                                <Button local-class='download-option' {{on 'click' (queue this.downloadTsv dd.close)}}>
+                                </OsfLink>
+                                <OsfLink
+                                    data-test-tsv-download-button
+                                    data-analytics-name='Download TSV'
+                                    local-class='downlaod-link'
+                                    {{on 'click' dd.close}}
+                                    @target='_blank'
+                                    @href={{this.downloadTsvUrl}}
+                                >
                                     {{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>
+                                </OsfLink>
+                                <OsfLink
+                                    data-test-json-download-button
+                                    data-analytics-name='Download JSON'
+                                    local-class='downlaod-link'
+                                    {{on 'click' dd.close}}
+                                    @target='_blank'
+                                    @href={{this.downloadJsonUrl}}
+                                >
+                                    {{t 'institutions.dashboard.format_labels.json'}}
+                                </OsfLink>
                             </dd.content>
                         </ResponsiveDropdown>
                     </div>

tests/integration/routes/institutions/dashboard/-components/institutional-users-list/component-test.ts

@@ -35,10 +35,10 @@ module('Integration | routes | institutions | dashboard | -components | institut
 
         this.set('model', model);
         await render(hbs`
-            <Institutions::Dashboard::-Components::InstitutionalUsersList
-                @modelTaskInstance={{this.model.taskInstance}}
-                @institution={{this.model.taskInstance.institution}}
-            />
+<Institutions::Dashboard::-Components::InstitutionalUsersList
+    @modelTaskInstance={{this.model.taskInstance}}
+    @institution={{this.model.taskInstance.institution}}
+/>
         `);
         assert.dom('[data-test-header]')
             .exists({ count: 9 }, '9 default headers');
@@ -70,6 +70,12 @@ module('Integration | routes | institutions | dashboard | -components | institut
             .exists({ count: 5 }, '5 in the list with public project');
         assert.dom('[data-test-item="privateProjects"]')
             .exists({ count: 5 }, '5 in the list with private projects');
+
+        // Test download buttons
+        await click('[data-test-download-dropdown]');
+        assert.dom('[data-test-csv-download-button]').exists('CSV download button');
+        assert.dom('[data-test-tsv-download-button]').exists('TSV download button');
+        assert.dom('[data-test-json-download-button]').exists('JSON download button');
     });
 
     test('it sorts', async function(assert) {
@@ -105,10 +111,10 @@ module('Integration | routes | institutions | dashboard | -components | institut
 
         this.set('model', model);
         await render(hbs`
-            <Institutions::Dashboard::-Components::InstitutionalUsersList
-                @modelTaskInstance={{this.model.taskInstance}}
-                @institution={{this.model.taskInstance.institution}}
-            />
+<Institutions::Dashboard::-Components::InstitutionalUsersList
+    @modelTaskInstance={{this.model.taskInstance}}
+    @institution={{this.model.taskInstance.institution}}
+/>
         `);
         assert.dom('[data-test-item="user_name"]')
             .exists({ count: 3 }, '3 users');

translations/en-us.yml

@@ -818,8 +818,7 @@ institutions:
         format_labels:
             csv: '.csv'
             tsv: '.tsv'
-            json_table: 'JSON (table)'
-            json_direct: 'JSON (direct)'
+            json: 'JSON'
         download: 'Download'
         select_default: 'All Departments'
         users_list: