[ENG-3884] Added the component file, navbar and links for the ticket

[bp-cos]

Caveat - some of these files are very old. Since the last time the files were saved, new formatting rules have been added which have caused more changes than necessary for the completion of the project.

• Ticket: ENG-3884
• Feature flag: n/a

Purpose

Add a components navbar link and page to the legacy projects section.

Summary of Changes

Add a component
Add a route
Add new translations

Screenshot(s)

Side Effects

Ticket ENG-6840 needs to be completed before this ticket can be tested and deployed.

https://openscience.atlassian.net/browse/ENG-6840

QA Notes

Ticket ENG-6840 needs to be completed before this ticket can be tested and deployed.

[futa-ikeda]

Just a couple minor things. A couple of basic acceptance tests (e.g. no components, one or more components) for this route would nice as well.

[futa-ikeda]

Since this.resourceType is null while this.getGuidMetadata is running, this is going to show Resource Type: <blank>. Do we want to add some sort of loading state? Something like

Suggested change

	{{#if @node.isProject}}
	<div>
	<dt data-test-resource-type-label>
	{{t 'node_card.resource-type'}}
	</dt>
	<dd data-test-resource-type>
	{{this.resourceType}}
	</dd>
	</div>
	{{/if}}
	{{#if @node.isProject}}
	{{#if this.getGuidMetadata.isRunning}}
	<LoadingIndicator @dark={{true}} @inline={{true}} />
	{{else}}
	<div>
	<dt data-test-resource-type-label>
	{{t 'node_card.resource-type'}}
	</dt>
	<dd data-test-resource-type>
	{{this.resourceType}}
	</dd>
	</div>
	{{/if}}
	{{/if}}

[bp-cos]

This is going to be replaced by the CpPanel and will fix the "empty" situation.

[futa-ikeda]

One minor thing and one more thing re: resourceType section that I'll message you on slack about

[futa-ikeda]

A couple of minor things here:

1. No need for the async here, as this isn't awaiting anything
2. The condition on line 116 will trigger the task to run every time the panel is opened, so could we do something like

if (this.isOpenResourceType && !this.resourceType) {
    taskFor(this.getGuidMetadata).perform();
}

to ensure that this task only runs when needed?

Edit: Scratch point 2. Seems that this action should only really be called once

[futa-ikeda]

Nit: This should be Custom Item MetadataRecordModel, not Custom File MetadataRecordModel

[bp-cos]

Caught me copying and pasting!

[futa-ikeda]

Not sure if this was the implementation that was in mind when talking about the "disclosure triangle". As per my earlier slack message, check the search page's result cards for this type of feature. The CpPanel and the dropdown in this implementation seems unneeded/inappropriate. Could just be something simple like

Suggested change

	<CpPanel
	id={{@node.id}}
	@open={{this.isOpenResourceType}}
	as |panel|
	>
	<panel.body>
	{{#if this.resourceType}}
	{{this.resourceType}}
	{{else}}
	<LoadingIndicator
	@dark={{true}}
	/>
	{{/if}}
	</panel.body>
	</CpPanel>
	{{#unless this.isOpenResourceType}}
	<Button
	{{on
	'click'
	this.toggleResourceType
	}}
	aria-label='{{t 'node_card.resource-type.show-resource-type' }}'
	aria-controls={{@node.id}}
	aria-expanded={{this.isOpenResourceType}}
	>
	<FaIcon @icon={{'angle-down'}} />
	<EmberTooltip>
	{{t
	'node_card.resource-type.show-resource-type'
	}}
	</EmberTooltip>
	</Button>
	{{/unless}}
	{{#if this.resourceType}}
	{{this.resourceType}}
	{{else}}
	<LoadingIndicator
	@dark={{true}}
	/>
	{{/if}}
	{{#unless this.isOpenResourceType}}
	<Button
	{{on
	'click'
	this.toggleResourceType
	}}
	>
	{{t
	'node_card.resource-type.show-resource-type'
	}}
	</Button>
	{{/unless}}

[futa-ikeda]

Not a fan of the design, but if that's what they want...