Skip to content

Commit 6b0fd65

Browse files
bp-cosbp-cos
authored
[ENG-3995] Embed OSF 101 video onto logged out homepage and no-content dashboard - Part 2 (#1665)
- Ticket: [ENG-3995] ## Purpose Add a video to the dashboard logged out page about how to use the OSF Add the same video and a link to the "Getting Started" guide on the logged in dashboard page without a collection. ## Summary of Changes Updated to .hbs files
1 parent d89c992 commit 6b0fd65

File tree

7 files changed

+227
-3
lines changed

7 files changed

+227
-3
lines changed

‎app/dashboard/styles.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,13 @@
8585
.node-col-headers {
8686
display: none;
8787
}
88+
89+
.iframe-container {
90+
.osf-video {
91+
width: 336px;
92+
height: 190px;
93+
}
94+
}
8895
}
8996

9097
@media screen and (min-width: 768px) {
@@ -183,3 +190,17 @@
183190
color: $color-text-placeholder-grey-dark;
184191
opacity: 1;
185192
}
193+
194+
.iframe-container {
195+
display: flex;
196+
justify-content: center;
197+
flex-wrap: wrap;
198+
margin-top: 20px;
199+
margin-bottom: 30px;
200+
201+
.osf-video {
202+
width: 560px;
203+
height: 315px;
204+
}
205+
}
206+

‎app/dashboard/template.hbs‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,28 @@
152152
<div class='col-sm-12 text-center'>
153153
<p>{{t 'dashboard.quicksearch.no_projects.line1'}}</p>
154154
<p>{{t 'dashboard.quicksearch.no_projects.line2'}}</p>
155-
<img src='/assets/images/dashboard/quicksearch-min.png' alt='{{t 'dashboard.quicksearch.no_projects.preview_alt'}}' class='img-responsive center-block'>
155+
156+
<div local-class='iframe-container'>
157+
<iframe
158+
data-test-osf-video
159+
local-class='osf-video'
160+
src='https://www.youtube.com/embed/iebMBpi0prc'
161+
title={{t 'dashboard.osf_video'}}
162+
alt='OSF 101 Video'
163+
aria-hidden='true'
164+
frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
165+
</div>
166+
167+
<OsfLink
168+
data-test-get-started-button
169+
data-analytics-name='Get started button'
170+
class='btn btn-primary'
171+
local-class='startButton'
172+
@target='_blank'
173+
@href='https://help.osf.io/article/342-getting-started-on-the-osf'
174+
>
175+
{{t 'dashboard.getting_started'}}
176+
</OsfLink>
156177
</div>
157178
</div>
158179
{{/if}}

‎app/home/-components/support-section/styles.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@
1515
}
1616
}
1717

18+
.iframe-container {
19+
margin-bottom: 30px;
20+
21+
.osf-video {
22+
width: 560px;
23+
height: 315px;
24+
}
25+
}
26+
1827
.supportItem {
1928
display: inline-block;
2029
}
@@ -60,6 +69,19 @@
6069
.container h1 {
6170
font-size: 36px;
6271
}
72+
73+
.iframe-container {
74+
justify-content: center;
75+
76+
&.flex-row {
77+
display: flex;
78+
}
79+
80+
.osf-video {
81+
width: 336px;
82+
height: 190px;
83+
}
84+
}
6385
}
6486

6587
@media (max-width: 613px) {

‎app/home/-components/support-section/template.hbs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,20 @@
77
{{t 'new-home.support-section.header'}}
88
</h1>
99
</header>
10+
<div local-class='flex-container'>
11+
<div local-class='flex-row iframe-container'>
12+
<iframe
13+
data-test-osf-video
14+
local-class='osf-video'
15+
src='https://www.youtube.com/embed/iebMBpi0prc'
16+
title={{t 'new-home.support-section.osf_video'}}
17+
alt='OSF 101 Video'
18+
aria-hidden='true'
19+
frameborder='0'
20+
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
21+
allowfullscreen></iframe>
22+
</div>
23+
</div>
1024
<div local-class='flex-container'>
1125
<div local-class='flex-row'>
1226
<div>

‎lib/osf-components/addon/components/osf-link/component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const {
2020
},
2121
} = config;
2222

23-
type AnchorRel = 'noreferrer' | 'noopener';
23+
type AnchorRel = 'noreferrer' | 'noopener' | 'noopener noreferrer';
2424
type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';
2525

2626
@tagName('')
@@ -36,7 +36,7 @@ export default class OsfLink extends Component {
3636
queryParams?: Record<string, unknown>;
3737
fragment?: string;
3838

39-
rel: AnchorRel = 'noopener';
39+
rel: AnchorRel = 'noopener noreferrer';
4040
target: AnchorTarget = '_self';
4141

4242
onClick?: () => void;

‎tests/integration/components/osf-link/component-test.ts‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import { render} from '@ember/test-helpers';
2+
import Ember from 'ember';
3+
import { hbs } from 'ember-cli-htmlbars';
4+
import { setupRenderingTest } from 'ember-qunit';
5+
import { module, test } from 'qunit';
6+
7+
8+
module('Integration | Component | osf-link', hooks => {
9+
setupRenderingTest(hooks);
10+
11+
let orgOnError: any;
12+
hooks.beforeEach(function() {
13+
orgOnError = Ember.onerror;
14+
});
15+
hooks.afterEach(function() {
16+
Ember.onerror = orgOnError;
17+
});
18+
19+
test('it renders the osf-link correctly for an @href', async assert => {
20+
await render(hbs`
21+
<OsfLink
22+
data-test-get-started-button
23+
data-analytics-name='Get started button'
24+
class='btn btn-primary'
25+
local-class='startButton'
26+
@target='_blank'
27+
@href='https://osf.io'
28+
>
29+
{{t 'dashboard.getting_started'}}
30+
</OsfLink>
31+
`);
32+
assert.dom('[data-test-get-started-button]').exists();
33+
assert.dom('[data-test-get-started-button]').hasText('Getting Started');
34+
assert.dom('[data-test-get-started-button]').hasClass('btn');
35+
assert.dom('[data-test-get-started-button]').hasClass('btn-primary');
36+
assert.dom('[data-test-get-started-button][href$="https://osf.io"]')
37+
.exists('The href https://osf.io is in the dom');
38+
});
39+
40+
test('it renders the osf-link correctly for an empty @href', async assert => {
41+
await render(hbs`
42+
<OsfLink
43+
data-test-get-started-button
44+
data-analytics-name='Get started button'
45+
class='btn btn-primary'
46+
local-class='startButton'
47+
@target='_blank'
48+
@href=' '
49+
>
50+
{{t 'dashboard.getting_started'}}
51+
</OsfLink>
52+
`);
53+
assert.dom('[data-test-get-started-button]').exists();
54+
assert.dom('[data-test-get-started-button]').hasText('Getting Started');
55+
assert.dom('[data-test-get-started-button]').hasClass('btn');
56+
assert.dom('[data-test-get-started-button]').hasClass('btn-primary');
57+
assert.dom('[data-test-get-started-button][href$=" "]')
58+
.exists('The empty href is in the dom');
59+
});
60+
61+
test('it should throw an error without an array @models', async assert => {
62+
Ember.onerror = (error: Error) => {
63+
assert.equal(error.message,
64+
'Assertion Failed: `@models` must be undefined or an array. Consider using the `array` helper.');
65+
};
66+
67+
await render(hbs`
68+
<OsfLink
69+
@models='error'
70+
data-test-get-started-button
71+
data-analytics-name='Get started button'
72+
class='btn btn-primary'
73+
local-class='startButton'
74+
@target='_blank'
75+
@href='https://osf.io'
76+
>
77+
{{t 'dashboard.getting_started'}}
78+
</OsfLink>
79+
`);
80+
});
81+
82+
test('it should throw an error without an @href or @route', async assert => {
83+
Ember.onerror = (error: Error) => {
84+
assert.equal(error.message,
85+
'Assertion Failed: Must pass `@href` xor `@route`. Did you pass `href` instead of `@href`?');
86+
};
87+
88+
await render(hbs`
89+
<OsfLink
90+
data-test-get-started-button
91+
data-analytics-name='Get started button'
92+
class='btn btn-primary'
93+
local-class='startButton'
94+
@target='_blank'
95+
>
96+
{{t 'dashboard.getting_started'}}
97+
</OsfLink>
98+
`);
99+
});
100+
101+
test('it should throw an error with @href and @route set to empty', async assert => {
102+
Ember.onerror = (error: Error) => {
103+
assert.equal(error.message,
104+
'Assertion Failed: Both `@href` and `@route` were improperly set (probably to empty strings)');
105+
};
106+
107+
await render(hbs`
108+
<OsfLink
109+
data-test-get-started-button
110+
data-analytics-name='Get started button'
111+
class='btn btn-primary'
112+
local-class='startButton'
113+
@target='_blank'
114+
@href=''
115+
@route=''
116+
>
117+
{{t 'dashboard.getting_started'}}
118+
</OsfLink>
119+
`);
120+
});
121+
122+
test('it should throw an error with @models and not @route', async assert => {
123+
Ember.onerror = (error: Error) => {
124+
assert.equal(error.message,
125+
'Assertion Failed: `@models` makes sense only with `@route`');
126+
};
127+
128+
await render(hbs`
129+
<OsfLink
130+
data-test-get-started-button
131+
data-analytics-name='Get started button'
132+
class='btn btn-primary'
133+
local-class='startButton'
134+
@target='_blank'
135+
@href='should pass'
136+
@models={{array 'hello'}}
137+
>
138+
{{t 'dashboard.getting_started'}}
139+
</OsfLink>
140+
`);
141+
});
142+
143+
});

‎translations/en-us.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ dashboard:
147147
preview_alt: 'Preview of a full quick projects screen'
148148
private_parent: 'Private project / '
149149
private_grandparent: 'Private project / Private / '
150+
getting_started: 'Getting Started'
151+
osf_video: 'OSF 101 Video'
150152
noteworthy:
151153
description: 'Discover public projects'
152154
new_and_noteworthy: 'New and noteworthy'
@@ -372,6 +374,7 @@ new-home:
372374
support-section:
373375
header: 'How OSF supports your research'
374376
arrow: arrow
377+
osf_video: 'OSF 101 Video'
375378
search:
376379
header: 'Search and Discover'
377380
description: 'Find papers, data, and materials to inspire your next research project. Search public projects to build on the work of others and find new collaborators.'

0 commit comments

Comments
 (0)