Skip to content

Commit 6fddb34

Browse files
borsbors
committed
Auto merge of #3346 - Turbo87:deps, r=pichfl
Implement "Dependencies" tab ![image](https://user-images.githubusercontent.com/141300/109384568-0799c680-78ee-11eb-84c5-388b7a837414.png)
2 parents f8490e2 + c1a356f commit 6fddb34

19 files changed

+380
-75
lines changed

‎app/components/crate-header.hbs

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<NavTabs aria-label="{{@crate.name}} crate subpages" local-class="nav" as |nav|>
2323
<nav.Tab
2424
@link={{if
25-
(eq this.router.currentRouteName "crate.version")
26-
(link "crate.version" @crate @version.num)
25+
@versionNum
26+
(link "crate.version" @crate @versionNum)
2727
(link "crate.index" @crate)
2828
}}
2929
data-test-readme-tab
@@ -35,6 +35,17 @@
3535
{{@crate.versions.length}} Versions
3636
</nav.Tab>
3737

38+
<nav.Tab
39+
@link={{if
40+
@versionNum
41+
(link "crate.version-dependencies" @crate @versionNum)
42+
(link "crate.dependencies" @crate)
43+
}}
44+
data-test-deps-tab
45+
>
46+
Dependencies
47+
</nav.Tab>
48+
3849
<nav.Tab @link={{link "crate.reverse-dependencies" @crate}} data-test-rev-deps-tab>
3950
Dependents
4051
</nav.Tab>

‎app/components/crate-header.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { inject as service } from '@ember/service';
33
import Component from '@glimmer/component';
44

55
export default class CrateHeader extends Component {
6-
@service router;
76
@service session;
87

98
@computed('args.crate.owner_user', 'session.currentUser.id')

‎app/components/crate-sidebar.hbs

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -129,42 +129,5 @@
129129
</div>
130130
{{/if}}
131131
{{/unless}}
132-
133-
<div>
134-
<h3>Dependencies</h3>
135-
<ul data-test-dependencies>
136-
{{#each @version.normalDependencies as |dep|}}
137-
<li><LinkToDep @dep={{dep}} /></li>
138-
{{else}}
139-
{{#if @version.loadDepsTask.isRunning}}
140-
<li>Loading…</li>
141-
{{else}}
142-
<li>None</li>
143-
{{/if}}
144-
{{/each}}
145-
</ul>
146-
</div>
147-
148-
{{#if @version.buildDependencies}}
149-
<div>
150-
<h3>Build-Dependencies</h3>
151-
<ul data-test-build-dependencies>
152-
{{#each @version.buildDependencies as |dep|}}
153-
<li><LinkToDep @dep={{dep}} /></li>
154-
{{/each}}
155-
</ul>
156-
</div>
157-
{{/if}}
158-
159-
{{#if @version.devDependencies}}
160-
<div>
161-
<h3>Dev-Dependencies</h3>
162-
<ul data-test-dev-dependencies>
163-
{{#each @version.devDependencies as |dep|}}
164-
<li><LinkToDep @dep={{dep}} /></li>
165-
{{/each}}
166-
</ul>
167-
</div>
168-
{{/if}}
169132
</div>
170133
</section>

‎app/components/dependency-list/row.hbs

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div
2+
local-class="
3+
row
4+
{{if @dependency.optional "optional"}}
5+
{{if this.focused "focused"}}
6+
"
7+
...attributes
8+
>
9+
<span local-class="range" data-test-range>
10+
{{format-req @dependency.req}}
11+
</span>
12+
13+
<span>
14+
<LinkTo
15+
@route="crate"
16+
@model={{@dependency.crate_id}}
17+
local-class="link"
18+
{{on "focusin" (fn this.setFocused true)}}
19+
{{on "focusout" (fn this.setFocused false)}}
20+
data-test-release-track-link
21+
>
22+
{{@dependency.crate_id}}
23+
</LinkTo>
24+
25+
<span local-class="metadata">
26+
{{#if @dependency.optional}}
27+
optional
28+
{{/if}}
29+
</span>
30+
</span>
31+
</div>

‎app/components/dependency-list/row.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { action } from '@ember/object';
2+
import Component from '@glimmer/component';
3+
import { tracked } from '@glimmer/tracking';
4+
5+
export default class VersionRow extends Component {
6+
@tracked focused = false;
7+
8+
@action setFocused(value) {
9+
this.focused = value;
10+
}
11+
}

‎app/components/dependency-list/row.module.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
.row {
2+
--bg-color: var(--grey200);
3+
--hover-bg-color: hsl(217, 37%, 98%);
4+
--range-color: var(--grey900);
5+
--crate-color: var(--grey700);
6+
--shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
7+
8+
display: flex;
9+
align-items: center;
10+
position: relative;
11+
font-size: 18px;
12+
padding: 15px 25px;
13+
background-color: white;
14+
border-radius: 7px;
15+
box-shadow: var(--shadow);
16+
transition: all 300ms;
17+
18+
&:hover, &.focused {
19+
background-color: var(--hover-bg-color);
20+
transition: all 0ms;
21+
}
22+
23+
&.focused {
24+
box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
25+
}
26+
27+
&.optional {
28+
--range-color: var(--grey600);
29+
--crate-color: var(--grey600);
30+
}
31+
32+
[title], :global(.ember-tooltip-target) {
33+
position: relative;
34+
z-index: 1;
35+
cursor: help;
36+
}
37+
38+
:global(.ember-tooltip) {
39+
word-break: break-all;
40+
}
41+
42+
@media only screen and (max-width: 550px) {
43+
display: block
44+
}
45+
}
46+
47+
.range {
48+
margin-right: 15px;
49+
min-width: 100px;
50+
color: var(--range-color);
51+
font-variant: tabular-nums;
52+
}
53+
54+
.link {
55+
color: var(--crate-color);
56+
font-weight: 500;
57+
margin-right: 15px;
58+
outline: none;
59+
60+
&:hover {
61+
color: var(--crate-color);
62+
}
63+
64+
&::after {
65+
content: '';
66+
position: absolute;
67+
left: 0;
68+
top: 0;
69+
right: 0;
70+
bottom: 0;
71+
}
72+
}
73+
74+
.metadata {
75+
color: var(--grey600);
76+
text-transform: uppercase;
77+
letter-spacing: .7px;
78+
font-size: 13px;
79+
80+
a {
81+
position: relative;
82+
color: var(--grey600);
83+
84+
&:hover {
85+
color: var(--grey900);
86+
}
87+
}
88+
89+
svg {
90+
height: 1em;
91+
width: auto;
92+
margin-right: 2px;
93+
margin-bottom: -.1em;
94+
}
95+
96+
:global(.ember-tooltip) {
97+
text-transform: none;
98+
letter-spacing: normal;
99+
}
100+
}

‎app/components/link-to-dep.hbs

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎app/components/link-to-dep.module.css

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎app/components/nav-tabs/tab.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<a
33
href={{@link.url}}
44
local-class="link {{if @link.isActive "active"}}"
5+
data-test-active={{@link.isActive}}
56
{{on "click" @link.transitionTo}}
67
>
78
{{yield}}

‎app/router.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ Router.map(function () {
1212
this.route('crates');
1313
this.route('crate', { path: '/crates/:crate_id' }, function () {
1414
this.route('versions');
15+
this.route('dependencies');
1516
this.route('version', { path: '/:version_num' });
17+
this.route('version-dependencies', { path: '/:version_num/dependencies' });
1618

1719
this.route('reverse-dependencies', { path: 'reverse_dependencies' });
1820

‎app/routes/crate/dependencies.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Route from '@ember/routing/route';
2+
3+
export default class VersionRoute extends Route {
4+
async model() {
5+
let crate = this.modelFor('crate');
6+
let versions = await crate.get('versions');
7+
8+
let { defaultVersion } = crate;
9+
let version = versions.find(version => version.num === defaultVersion) ?? versions.lastObject;
10+
11+
this.replaceWith('crate.version-dependencies', crate, version.num);
12+
}
13+
}

‎app/routes/crate/version-dependencies.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Route from '@ember/routing/route';
2+
import { inject as service } from '@ember/service';
3+
4+
export default class VersionRoute extends Route {
5+
@service notifications;
6+
7+
async model(params) {
8+
let crate = this.modelFor('crate');
9+
let versions = await crate.get('versions');
10+
11+
let requestedVersion = params.version_num;
12+
let version = versions.find(version => version.num === requestedVersion);
13+
if (!version) {
14+
this.notifications.error(`Version '${requestedVersion}' of crate '${crate.name}' does not exist`);
15+
this.replaceWith('crate.index');
16+
}
17+
18+
try {
19+
await version.loadDepsTask.perform();
20+
} catch {
21+
this.notifications.error(
22+
`Failed to load the list of dependencies for the '${crate.name}' crate. Please try again later!`,
23+
);
24+
this.replaceWith('crate.index');
25+
}
26+
27+
return version;
28+
}
29+
30+
setupController(controller, model) {
31+
controller.set('version', model);
32+
controller.set('crate', this.modelFor('crate'));
33+
}
34+
}

‎app/routes/crate/version.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export default class VersionRoute extends Route {
3232
setupController(controller, model) {
3333
super.setupController(...arguments);
3434

35-
model.version.loadDepsTask.perform();
3635
if (!model.version.authorNames) {
3736
model.version.loadAuthorsTask.perform();
3837
}

‎app/styles/crate/version-dependencies.module.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.list {
2+
list-style: none;
3+
margin: 0;
4+
padding: 0;
5+
6+
li {
7+
&:not(:first-child) {
8+
margin-top: 10px;
9+
}
10+
}
11+
}

‎app/templates/crate/version-dependencies.hbs

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{{page-title this.crate.name}}
2+
3+
<CrateHeader
4+
@crate={{this.crate}}
5+
@version={{this.version}}
6+
@versionNum={{this.version.num}}
7+
/>
8+
9+
<h3 local-class="heading">Dependencies</h3>
10+
{{#if this.version.normalDependencies}}
11+
<ul local-class="list" data-test-dependencies>
12+
{{#each this.version.normalDependencies as |dependency|}}
13+
<li><DependencyList::Row @dependency={{dependency}} /></li>
14+
{{/each}}
15+
</ul>
16+
{{else}}
17+
<div local-class="no-deps" data-test-no-dependencies>
18+
This version of the "{{this.crate.name}}" crate has no dependencies
19+
</div>
20+
{{/if}}
21+
22+
{{#if this.version.buildDependencies}}
23+
<h3 local-class="heading">Build-Dependencies</h3>
24+
<ul local-class="list" data-test-build-dependencies>
25+
{{#each this.version.buildDependencies as |dependency|}}
26+
<li><DependencyList::Row @dependency={{dependency}} /></li>
27+
{{/each}}
28+
</ul>
29+
{{/if}}
30+
31+
{{#if this.version.devDependencies}}
32+
<h3 local-class="heading">Dev-Dependencies</h3>
33+
<ul local-class="list" data-test-dev-dependencies>
34+
{{#each this.version.devDependencies as |dependency|}}
35+
<li><DependencyList::Row @dependency={{dependency}} /></li>
36+
{{/each}}
37+
</ul>
38+
{{/if}}

‎app/templates/crate/version.hbs

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{{page-title this.crate.name}}
22

3-
<CrateHeader @crate={{this.crate}} @version={{this.currentVersion}} />
3+
<CrateHeader
4+
@crate={{this.crate}}
5+
@version={{this.currentVersion}}
6+
@versionNum={{this.requestedVersion}}
7+
/>
48

59
<div local-class='crate-info'>
610
<div local-class="docs">

0 commit comments

Comments
 (0)