Skip to content

Commit 4e68de0

Browse files
futa-ikedafuta-ikeda
authored
[ENG-6617][ENG-6559] Integrate user download functionality (#2413)
- Ticket: [ENG-6559] [ENG-6617] - Feature flag: n/a ## Purpose - Integrate download functionality for users tab (Projects, Registrations, and Preprints will be in a subsequent PR) ## Summary of Changes - Add functionality to the download buttons on the FE - Turn the buttons into links
1 parent 951bcb2 commit 4e68de0

File tree

5 files changed

+78
-21
lines changed

5 files changed

+78
-21
lines changed

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Intl from 'ember-intl/services/intl';
99
import InstitutionModel from 'ember-osf-web/models/institution';
1010
import InstitutionDepartmentsModel from 'ember-osf-web/models/institution-department';
1111
import Analytics from 'ember-osf-web/services/analytics';
12+
import { RelationshipWithLinks } from 'osf-api';
1213

1314
interface Column {
1415
key: string;
@@ -184,6 +185,27 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
184185
return query;
185186
}
186187

188+
downloadUrl(format: string) {
189+
const institutionRelationships = this.args.institution.links.relationships;
190+
const usersLink = (institutionRelationships!.user_metrics as RelationshipWithLinks).links.related.href;
191+
const userURL = new URL(usersLink!);
192+
userURL.searchParams.set('format', format);
193+
userURL.searchParams.set('page[size]', '10000');
194+
return userURL.toString();
195+
}
196+
197+
get downloadCsvUrl() {
198+
return this.downloadUrl('csv');
199+
}
200+
201+
get downloadTsvUrl() {
202+
return this.downloadUrl('tsv');
203+
}
204+
205+
get downloadJsonUrl() {
206+
return this.downloadUrl('json_report');
207+
}
208+
187209
@restartableTask
188210
@waitFor
189211
async searchDepartment(name: string) {
@@ -237,5 +259,4 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
237259
clickToggleOrcidFilter(hasOrcid: boolean) {
238260
this.hasOrcid = !hasOrcid;
239261
}
240-
241262
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@
66
color: $color-select;
77
}
88

9+
.download-dropdown-content {
10+
display: flex;
11+
flex-direction: column;
12+
align-items: flex-start;
13+
border: 1px solid $color-border-gray;
14+
width: max-content;
15+
}
16+
17+
.downlaod-link {
18+
padding: 4px 8px;
19+
}
20+
921
.table {
1022
margin-bottom: 45px;
1123

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

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -88,24 +88,43 @@
8888
<ResponsiveDropdown @renderInPlace={{true}} @buttonStyling={{true}} as |dd| >
8989
<dd.trigger
9090
data-test-download-dropdown
91+
data-analytics-name='Download Dropdown'
9192
aria-label={{t 'institutions.dashboard.download_dropdown_label'}}
9293
local-class='download-dropdown-trigger'
9394
>
9495
<FaIcon @icon='download' />
9596
</dd.trigger>
9697
<dd.content local-class='download-dropdown-content'>
97-
<Button local-class='download-option' {{on 'click' (queue this.downloadCsv dd.close)}}>
98+
<OsfLink
99+
data-test-csv-download-button
100+
data-analytics-name='Download CSV'
101+
local-class='downlaod-link'
102+
{{on 'click' dd.close}}
103+
@target='_blank'
104+
@href={{this.downloadCsvUrl}}
105+
>
98106
{{t 'institutions.dashboard.format_labels.csv'}}
99-
</Button>
100-
<Button local-class='download-option' {{on 'click' (queue this.downloadTsv dd.close)}}>
107+
</OsfLink>
108+
<OsfLink
109+
data-test-tsv-download-button
110+
data-analytics-name='Download TSV'
111+
local-class='downlaod-link'
112+
{{on 'click' dd.close}}
113+
@target='_blank'
114+
@href={{this.downloadTsvUrl}}
115+
>
101116
{{t 'institutions.dashboard.format_labels.tsv'}}
102-
</Button>
103-
<Button local-class='download-option' {{on 'click' (queue this.downloadJsonTable dd.close)}}>
104-
{{t 'institutions.dashboard.format_labels.json_table'}}
105-
</Button>
106-
<Button local-class='download-option' {{on 'click' (queue this.downloadJsonDirect dd.close)}}>
107-
{{t 'institutions.dashboard.format_labels.json_direct'}}
108-
</Button>
117+
</OsfLink>
118+
<OsfLink
119+
data-test-json-download-button
120+
data-analytics-name='Download JSON'
121+
local-class='downlaod-link'
122+
{{on 'click' dd.close}}
123+
@target='_blank'
124+
@href={{this.downloadJsonUrl}}
125+
>
126+
{{t 'institutions.dashboard.format_labels.json'}}
127+
</OsfLink>
109128
</dd.content>
110129
</ResponsiveDropdown>
111130
</div>

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ module('Integration | routes | institutions | dashboard | -components | institut
3535

3636
this.set('model', model);
3737
await render(hbs`
38-
<Institutions::Dashboard::-Components::InstitutionalUsersList
39-
@modelTaskInstance={{this.model.taskInstance}}
40-
@institution={{this.model.taskInstance.institution}}
41-
/>
38+
<Institutions::Dashboard::-Components::InstitutionalUsersList
39+
@modelTaskInstance={{this.model.taskInstance}}
40+
@institution={{this.model.taskInstance.institution}}
41+
/>
4242
`);
4343
assert.dom('[data-test-header]')
4444
.exists({ count: 9 }, '9 default headers');
@@ -70,6 +70,12 @@ module('Integration | routes | institutions | dashboard | -components | institut
7070
.exists({ count: 5 }, '5 in the list with public project');
7171
assert.dom('[data-test-item="privateProjects"]')
7272
.exists({ count: 5 }, '5 in the list with private projects');
73+
74+
// Test download buttons
75+
await click('[data-test-download-dropdown]');
76+
assert.dom('[data-test-csv-download-button]').exists('CSV download button');
77+
assert.dom('[data-test-tsv-download-button]').exists('TSV download button');
78+
assert.dom('[data-test-json-download-button]').exists('JSON download button');
7379
});
7480

7581
test('it sorts', async function(assert) {
@@ -105,10 +111,10 @@ module('Integration | routes | institutions | dashboard | -components | institut
105111

106112
this.set('model', model);
107113
await render(hbs`
108-
<Institutions::Dashboard::-Components::InstitutionalUsersList
109-
@modelTaskInstance={{this.model.taskInstance}}
110-
@institution={{this.model.taskInstance.institution}}
111-
/>
114+
<Institutions::Dashboard::-Components::InstitutionalUsersList
115+
@modelTaskInstance={{this.model.taskInstance}}
116+
@institution={{this.model.taskInstance.institution}}
117+
/>
112118
`);
113119
assert.dom('[data-test-item="user_name"]')
114120
.exists({ count: 3 }, '3 users');

‎translations/en-us.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -818,8 +818,7 @@ institutions:
818818
format_labels:
819819
csv: '.csv'
820820
tsv: '.tsv'
821-
json_table: 'JSON (table)'
822-
json_direct: 'JSON (direct)'
821+
json: 'JSON'
823822
download: 'Download'
824823
select_default: 'All Departments'
825824
users_list:

0 commit comments

Comments
 (0)