Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show README and metadata for yanked crates/versions #6415

Merged
merged 4 commits into from
May 4, 2023
Merged

Show README and metadata for yanked crates/versions #6415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fee12dc
CrateHeader: Show "Yanked" badge for yanked versions
Turbo87 May 2, 2023
472d11e
crate/version: Show regular crate README and metadata for yanked vers…
Turbo87 May 2, 2023
e8d6f9b
CrateHeader: Add tooltip to "Yanked" badge
Turbo87 May 3, 2023
730089d
crate/version: Verify new behavior with regression tests
Turbo87 May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions app/components/crate-header.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@
<span data-test-crate-name>{{@crate.name}}</span>
{{#if @version}}
<small data-test-crate-version>v{{@version.num}}</small>

{{#if @version.yanked}}
<span local-class="yanked-badge" data-test-yanked>
{{svg-jar "trash"}}
Yanked

<EmberTooltip>
This crate has been yanked, but it is still available for download for other crates that
may be depending on it.
</EmberTooltip>
</span>
{{/if}}
{{/if}}
</h1>

Expand Down
20 changes: 20 additions & 0 deletions app/components/crate-header.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,26 @@
}
}

.yanked-badge {
background: #d30000;
border-radius: 99999px;
padding: var(--space-3xs) var(--space-s);
font-size: var(--space-s);
color: white;
align-self: center;
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
white-space: nowrap;
cursor: default;

svg {
width: 1em;
height: 1em;
flex-shrink: 0;
}
}

.description {
margin-top: var(--space-xs);
line-height: 1.35;
Expand Down
4 changes: 4 additions & 0 deletions app/styles/application.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,3 +180,7 @@ noscript {
flex-direction: column;
padding: var(--main-layout-padding);
}

:global(.ember-tooltip) {
font-weight: normal;
}
197 changes: 92 additions & 105 deletions app/templates/crate/version.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,115 +6,102 @@
@versionNum={{this.requestedVersion}}
/>

{{#if this.currentVersion.yanked}}
<div>
<p>
This crate has been yanked, but it is still available for download for other crates that
may be depending on it.
</p>
<p>
You may wish to <LinkTo @route="crate.versions" @model={{this.crate}}>view all versions</LinkTo> to find
one that has not been yanked.
</p>
<div local-class='crate-info'>
<div local-class="docs" data-test-docs>
{{#if this.loadReadmeTask.isRunning}}
<div local-class="readme-spinner">
<Placeholder local-class="placeholder-title" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-subtitle" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
</div>
{{else if this.readme}}
<article aria-label="Readme" data-test-readme>
<RenderedHtml @html={{this.readme}} local-class="readme" />
</article>
{{else}}
<div local-class="no-readme" data-test-no-readme>
{{this.crate.name}} v{{this.currentVersion.num}} appears to have no <code>README.md</code> file
</div>
{{/if}}
</div>
{{else}}
<div local-class='crate-info'>
<div local-class="docs">
{{#if this.loadReadmeTask.isRunning}}
<div local-class="readme-spinner">
<Placeholder local-class="placeholder-title" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-subtitle" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
<Placeholder local-class="placeholder-text" />
</div>
{{else if this.readme}}
<article aria-label="Readme" data-test-readme>
<RenderedHtml @html={{this.readme}} local-class="readme" />
</article>
{{else}}
<div local-class="no-readme" data-test-no-readme>
{{this.crate.name}} v{{this.currentVersion.num}} appears to have no <code>README.md</code> file
</div>
{{/if}}
</div>

<CrateSidebar
@crate={{this.crate}}
@version={{this.currentVersion}}
@requestedVersion={{this.requestedVersion}}
local-class="sidebar"
/>
</div>
<CrateSidebar
@crate={{this.crate}}
@version={{this.currentVersion}}
@requestedVersion={{this.requestedVersion}}
local-class="sidebar"
/>
</div>

<div local-class='crate-downloads'>
<div local-class='stats'>
{{#if this.downloadsContext.num}}
<h3 data-test-crate-stats-label>
Stats Overview for {{this.downloadsContext.num}}
<LinkTo @route="crate" @model={{this.crate}}>(see all)</LinkTo>
</h3>
<div local-class='crate-downloads'>
<div local-class='stats'>
{{#if this.downloadsContext.num}}
<h3 data-test-crate-stats-label>
Stats Overview for {{this.downloadsContext.num}}
<LinkTo @route="crate" @model={{this.crate}}>(see all)</LinkTo>
</h3>

{{else}}
<h3 data-test-crate-stats-label>Stats Overview</h3>
{{/if}}
<div local-class='stat'>
<span local-class='num'>
{{svg-jar "download"}}
<span local-class="num__align">{{ format-num this.downloadsContext.downloads }}</span>
</span>
<span local-class="stat-description">Downloads all time</span>
</div>
<div local-class='stat'>
<span local-class="num">
{{svg-jar "crate"}}
<span local-class="num__align">{{ this.crate.versions.length }}</span>
</span>
<span local-class="stat-description">Versions published</span>
</div>
{{else}}
<h3 data-test-crate-stats-label>Stats Overview</h3>
{{/if}}
<div local-class='stat'>
<span local-class='num'>
{{svg-jar "download"}}
<span local-class="num__align">{{ format-num this.downloadsContext.downloads }}</span>
</span>
<span local-class="stat-description">Downloads all time</span>
</div>
<div local-class='graph'>
<h4>Downloads over the last 90 days</h4>
<div local-class="toggle-stacked">
<span local-class="toggle-stacked-label">Display as </span>
<Dropdown as |dd|>
<dd.Trigger local-class="trigger">
<span local-class="trigger-label">
{{#if this.stackedGraph}}
Stacked
{{else}}
Unstacked
{{/if}}
</span>
</dd.Trigger>
<dd.Menu as |menu|>
<menu.Item>
<button
type="button"
local-class="dropdown-button"
{{on "click" this.setStackedGraph}}
>
Stacked
</button>
</menu.Item>
<menu.Item>
<button
type="button"
local-class="dropdown-button"
{{on "click" this.setUnstackedGraph}}
>
Unstacked
</button>
</menu.Item>
</dd.Menu>
</Dropdown>
</div>
<DownloadGraph @data={{this.downloads}} @stacked={{this.stackedGraph}} local-class="graph-data" />
<div local-class='stat'>
<span local-class="num">
{{svg-jar "crate"}}
<span local-class="num__align">{{ this.crate.versions.length }}</span>
</span>
<span local-class="stat-description">Versions published</span>
</div>
</div>
<div local-class='graph'>
<h4>Downloads over the last 90 days</h4>
<div local-class="toggle-stacked">
<span local-class="toggle-stacked-label">Display as </span>
<Dropdown as |dd|>
<dd.Trigger local-class="trigger">
<span local-class="trigger-label">
{{#if this.stackedGraph}}
Stacked
{{else}}
Unstacked
{{/if}}
</span>
</dd.Trigger>
<dd.Menu as |menu|>
<menu.Item>
<button
type="button"
local-class="dropdown-button"
{{on "click" this.setStackedGraph}}
>
Stacked
</button>
</menu.Item>
<menu.Item>
<button
type="button"
local-class="dropdown-button"
{{on "click" this.setUnstackedGraph}}
>
Unstacked
</button>
</menu.Item>
</dd.Menu>
</Dropdown>
</div>
<DownloadGraph @data={{this.downloads}} @stacked={{this.stackedGraph}} local-class="graph-data" />
</div>
{{/if}}
</div>
10 changes: 10 additions & 0 deletions tests/routes/crate/version/model-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ module('Route | crate.version | model() hook', function (hooks) {
assert.strictEqual(currentURL(), `/crates/foo/1.2.3`);
assert.dom('[data-test-crate-name]').hasText('foo');
assert.dom('[data-test-crate-version]').hasText('v1.2.3');
assert.dom('[data-test-yanked]').exists();
assert.dom('[data-test-docs]').exists();
assert.dom('[data-test-notification-message]').doesNotExist();
});

Expand Down Expand Up @@ -49,6 +51,8 @@ module('Route | crate.version | model() hook', function (hooks) {
assert.strictEqual(currentURL(), `/crates/foo`);
assert.dom('[data-test-crate-name]').hasText('foo');
assert.dom('[data-test-crate-version]').hasText('v2.0.0');
assert.dom('[data-test-yanked]').doesNotExist();
assert.dom('[data-test-docs]').exists();
assert.dom('[data-test-notification-message]').doesNotExist();
});

Expand All @@ -62,6 +66,8 @@ module('Route | crate.version | model() hook', function (hooks) {
assert.strictEqual(currentURL(), `/crates/foo`);
assert.dom('[data-test-crate-name]').hasText('foo');
assert.dom('[data-test-crate-version]').hasText('v1.0.0');
assert.dom('[data-test-yanked]').doesNotExist();
assert.dom('[data-test-docs]').exists();
assert.dom('[data-test-notification-message]').doesNotExist();
});

Expand All @@ -77,6 +83,8 @@ module('Route | crate.version | model() hook', function (hooks) {
assert.strictEqual(currentURL(), `/crates/foo`);
assert.dom('[data-test-crate-name]').hasText('foo');
assert.dom('[data-test-crate-version]').hasText('v2.0.0-beta.2');
assert.dom('[data-test-yanked]').doesNotExist();
assert.dom('[data-test-docs]').exists();
assert.dom('[data-test-notification-message]').doesNotExist();
});

Expand All @@ -90,6 +98,8 @@ module('Route | crate.version | model() hook', function (hooks) {
assert.strictEqual(currentURL(), `/crates/foo`);
assert.dom('[data-test-crate-name]').hasText('foo');
assert.dom('[data-test-crate-version]').hasText('v2.0.0-beta.1');
assert.dom('[data-test-yanked]').exists();
assert.dom('[data-test-docs]').exists();
assert.dom('[data-test-notification-message]').doesNotExist();
});
});
Expand Down