Initial stab at a security tab showing advisories

[djc]

Here's my first take at implementing the security tab as proposed in RFC 3872. Resolves #12507.

This is intentionally light on details to get an initial review on my first baby Ember.js steps. Not sure how much we need to add before this gets merged.

Keeping as draft while the RFC has not been merged.

[djc]

I've implemented Markdown formatting with GitHub-flavored Markdown support for the advisory details.

Seems like a decent MVP from which we can iterate further?

[Turbo87]

looks like a good start! 👍

one more suggestion that did not fit into the diff: we should add tests for this new feature to https://github.com/rust-lang/crates.io/tree/main/e2e/acceptance. at least one test for displaying 2+ advisories, one for the empty state, and one for the rustsec server returning e.g. a 500 error. we use msw for network mocking, which should make it relatively straight-forward to implement. it's probably sufficient to implement the msw request handlers in the tests instead of creating a generic handler in the crates-io-msw package.

[Turbo87]

is there a reason for not using the replaceWith('catch-all', ...) pattern suggested in #12311 (comment)? that way we get consistent error page styling across the application and a "Try Again" button to retry the failed request.

[Turbo87]

I wonder if we should add a couple of smoke tests for the micromark library, to ensure that is sanitizes correctly. if the library changes their defaults we should probably have some kind of notification mechanism to let us know about it (e.g. a failing test case).

[Turbo87]

Suggested change

	// Check first advisory
	await expect(page.locator('[data-test-list] li').nth(0).locator('h3 a')).toHaveAttribute(
	'href',
	'https://rustsec.org/advisories/TEST-001.html',
	);
	await expect(page.locator('[data-test-list] li').nth(0).locator('h3 a')).toContainText('TEST-001');
	await expect(page.locator('[data-test-list] li').nth(0).locator('h3')).toContainText('First test advisory');
	await expect(page.locator('[data-test-list] li').nth(0).locator('p')).toContainText('markdown');
	// Check second advisory
	await expect(page.locator('[data-test-list] li').nth(1).locator('h3 a')).toHaveAttribute(
	'href',
	'https://rustsec.org/advisories/TEST-002.html',
	);
	await expect(page.locator('[data-test-list] li').nth(1).locator('h3 a')).toContainText('TEST-002');
	await expect(page.locator('[data-test-list] li').nth(1).locator('h3')).toContainText('Second test advisory');
	// Check first advisory
	let advisory1 = page.locator('[data-test-list] li').nth(0);
	await expect(advisory1.locator('h3 a')).toHaveAttribute('href', 'https://rustsec.org/advisories/TEST-001.html');
	await expect(advisory1.locator('h3 a')).toHaveText('TEST-001');
	await expect(advisory1.locator('h3')).toContainText('First test advisory');
	expect(await advisory1.locator('p').innerHTML()).toBe(
	'This is the first test advisory with <strong>markdown</strong> support.',
	);
	// Check second advisory
	let advisory2 = page.locator('[data-test-list] li').nth(1);
	await expect(advisory2.locator('h3 a')).toHaveAttribute('href', 'https://rustsec.org/advisories/TEST-002.html');
	await expect(advisory2.locator('h3 a')).toHaveText('TEST-002');
	await expect(advisory2.locator('h3')).toContainText('Second test advisory');
	expect(await advisory2.locator('p').innerHTML()).toBe('This is the second test advisory with more details.');