Skip to content

Commit

Permalink
[ENG-3995] Embed OSF 101 video onto logged out homepage and no-conten…
Browse files Browse the repository at this point in the history
…t 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
  • Loading branch information
bp-cos committed Oct 4, 2022
1 parent d89c992 commit 6b0fd65
Show file tree
Hide file tree
Showing 7 changed files with 227 additions and 3 deletions.
21 changes: 21 additions & 0 deletions app/dashboard/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,13 @@
.node-col-headers {
display: none;
}

.iframe-container {
.osf-video {
width: 336px;
height: 190px;
}
}
}

@media screen and (min-width: 768px) {
Expand Down Expand Up @@ -183,3 +190,17 @@
color: $color-text-placeholder-grey-dark;
opacity: 1;
}

.iframe-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
margin-bottom: 30px;

.osf-video {
width: 560px;
height: 315px;
}
}

23 changes: 22 additions & 1 deletion app/dashboard/template.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,28 @@
<div class='col-sm-12 text-center'>
<p>{{t 'dashboard.quicksearch.no_projects.line1'}}</p>
<p>{{t 'dashboard.quicksearch.no_projects.line2'}}</p>
<img src='/assets/images/dashboard/quicksearch-min.png' alt='{{t 'dashboard.quicksearch.no_projects.preview_alt'}}' class='img-responsive center-block'>

<div local-class='iframe-container'>
<iframe
data-test-osf-video
local-class='osf-video'
src='https://www.youtube.com/embed/iebMBpi0prc'
title={{t 'dashboard.osf_video'}}
alt='OSF 101 Video'
aria-hidden='true'
frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>

<OsfLink
data-test-get-started-button
data-analytics-name='Get started button'
class='btn btn-primary'
local-class='startButton'
@target='_blank'
@href='https://help.osf.io/article/342-getting-started-on-the-osf'
>
{{t 'dashboard.getting_started'}}
</OsfLink>
</div>
</div>
{{/if}}
Expand Down
22 changes: 22 additions & 0 deletions app/home/-components/support-section/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@
}
}

.iframe-container {
margin-bottom: 30px;

.osf-video {
width: 560px;
height: 315px;
}
}

.supportItem {
display: inline-block;
}
Expand Down Expand Up @@ -60,6 +69,19 @@
.container h1 {
font-size: 36px;
}

.iframe-container {
justify-content: center;

&.flex-row {
display: flex;
}

.osf-video {
width: 336px;
height: 190px;
}
}
}

@media (max-width: 613px) {
Expand Down
14 changes: 14 additions & 0 deletions app/home/-components/support-section/template.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,20 @@
{{t 'new-home.support-section.header'}}
</h1>
</header>
<div local-class='flex-container'>
<div local-class='flex-row iframe-container'>
<iframe
data-test-osf-video
local-class='osf-video'
src='https://www.youtube.com/embed/iebMBpi0prc'
title={{t 'new-home.support-section.osf_video'}}
alt='OSF 101 Video'
aria-hidden='true'
frameborder='0'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
allowfullscreen></iframe>
</div>
</div>
<div local-class='flex-container'>
<div local-class='flex-row'>
<div>
Expand Down
4 changes: 2 additions & 2 deletions lib/osf-components/addon/components/osf-link/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const {
},
} = config;

type AnchorRel = 'noreferrer' | 'noopener';
type AnchorRel = 'noreferrer' | 'noopener' | 'noopener noreferrer';
type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';

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

rel: AnchorRel = 'noopener';
rel: AnchorRel = 'noopener noreferrer';
target: AnchorTarget = '_self';

onClick?: () => void;
Expand Down
143 changes: 143 additions & 0 deletions tests/integration/components/osf-link/component-test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
import { render} from '@ember/test-helpers';
import Ember from 'ember';
import { hbs } from 'ember-cli-htmlbars';
import { setupRenderingTest } from 'ember-qunit';
import { module, test } from 'qunit';


module('Integration | Component | osf-link', hooks => {
setupRenderingTest(hooks);

let orgOnError: any;
hooks.beforeEach(function() {
orgOnError = Ember.onerror;
});
hooks.afterEach(function() {
Ember.onerror = orgOnError;
});

test('it renders the osf-link correctly for an @href', async assert => {
await render(hbs`
<OsfLink
data-test-get-started-button
data-analytics-name='Get started button'
class='btn btn-primary'
local-class='startButton'
@target='_blank'
@href='https://osf.io'
>
{{t 'dashboard.getting_started'}}
</OsfLink>
`);
assert.dom('[data-test-get-started-button]').exists();
assert.dom('[data-test-get-started-button]').hasText('Getting Started');
assert.dom('[data-test-get-started-button]').hasClass('btn');
assert.dom('[data-test-get-started-button]').hasClass('btn-primary');
assert.dom('[data-test-get-started-button][href$="https://osf.io"]')
.exists('The href https://osf.io is in the dom');
});

test('it renders the osf-link correctly for an empty @href', async assert => {
await render(hbs`
<OsfLink
data-test-get-started-button
data-analytics-name='Get started button'
class='btn btn-primary'
local-class='startButton'
@target='_blank'
@href=' '
>
{{t 'dashboard.getting_started'}}
</OsfLink>
`);
assert.dom('[data-test-get-started-button]').exists();
assert.dom('[data-test-get-started-button]').hasText('Getting Started');
assert.dom('[data-test-get-started-button]').hasClass('btn');
assert.dom('[data-test-get-started-button]').hasClass('btn-primary');
assert.dom('[data-test-get-started-button][href$=" "]')
.exists('The empty href is in the dom');
});

test('it should throw an error without an array @models', async assert => {
Ember.onerror = (error: Error) => {
assert.equal(error.message,
'Assertion Failed: `@models` must be undefined or an array. Consider using the `array` helper.');
};

await render(hbs`
<OsfLink
@models='error'
data-test-get-started-button
data-analytics-name='Get started button'
class='btn btn-primary'
local-class='startButton'
@target='_blank'
@href='https://osf.io'
>
{{t 'dashboard.getting_started'}}
</OsfLink>
`);
});

test('it should throw an error without an @href or @route', async assert => {
Ember.onerror = (error: Error) => {
assert.equal(error.message,
'Assertion Failed: Must pass `@href` xor `@route`. Did you pass `href` instead of `@href`?');
};

await render(hbs`
<OsfLink
data-test-get-started-button
data-analytics-name='Get started button'
class='btn btn-primary'
local-class='startButton'
@target='_blank'
>
{{t 'dashboard.getting_started'}}
</OsfLink>
`);
});

test('it should throw an error with @href and @route set to empty', async assert => {
Ember.onerror = (error: Error) => {
assert.equal(error.message,
'Assertion Failed: Both `@href` and `@route` were improperly set (probably to empty strings)');
};

await render(hbs`
<OsfLink
data-test-get-started-button
data-analytics-name='Get started button'
class='btn btn-primary'
local-class='startButton'
@target='_blank'
@href=''
@route=''
>
{{t 'dashboard.getting_started'}}
</OsfLink>
`);
});

test('it should throw an error with @models and not @route', async assert => {
Ember.onerror = (error: Error) => {
assert.equal(error.message,
'Assertion Failed: `@models` makes sense only with `@route`');
};

await render(hbs`
<OsfLink
data-test-get-started-button
data-analytics-name='Get started button'
class='btn btn-primary'
local-class='startButton'
@target='_blank'
@href='should pass'
@models={{array 'hello'}}
>
{{t 'dashboard.getting_started'}}
</OsfLink>
`);
});

});
3 changes: 3 additions & 0 deletions translations/en-us.yml
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,8 @@ dashboard:
preview_alt: 'Preview of a full quick projects screen'
private_parent: 'Private project / '
private_grandparent: 'Private project / Private / '
getting_started: 'Getting Started'
osf_video: 'OSF 101 Video'
noteworthy:
description: 'Discover public projects'
new_and_noteworthy: 'New and noteworthy'
Expand Down Expand Up @@ -372,6 +374,7 @@ new-home:
support-section:
header: 'How OSF supports your research'
arrow: arrow
osf_video: 'OSF 101 Video'
search:
header: 'Search and Discover'
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.'
Expand Down

0 comments on commit 6b0fd65

Please sign in to comment.