[ENG-3034] Add version-metadata component and tests

lib/osf-components/addon/components/registries/overview-form-renderer/component.ts

@@ -7,6 +7,7 @@ import { restartableTask } from 'ember-concurrency';
 
 import { layout } from 'ember-osf-web/decorators/component';
 import Registration from 'ember-osf-web/models/registration';
+import RevisionModel from 'ember-osf-web/models/revision';
 import { getSchemaBlockGroups, SchemaBlock, SchemaBlockGroup } from 'ember-osf-web/packages/registration-schema';
 
 import template from './template';
@@ -20,6 +21,7 @@ export default class RegistrationFormViewSchemaBlocks extends Component {
     revisionId?: string;
 
     // Private properties
+    revision?: RevisionModel;
     schemaBlocks?: SchemaBlock[];
     schemaBlockGroups?: SchemaBlockGroup[];
     responses?: { [key: string]: string };
@@ -30,6 +32,7 @@ export default class RegistrationFormViewSchemaBlocks extends Component {
         let revision;
         if (this.revisionId) {
             revision = await this.store.findRecord('revision', this.revisionId);
+            this.set('revision', revision);
         }
         if (this.registration) {
             const registrationSchema = await this.registration.registrationSchema;

lib/osf-components/addon/components/registries/overview-form-renderer/template.hbs

@@ -1,6 +1,9 @@
 {{#if this.fetchSchemaBlocks.isRunning}}
     <LoadingIndicator @dark={{true}}/>
 {{else}}
+    {{#if this.revision}}
+        <Registries::VersionMetadata @revision={{this.revision}} />
+    {{/if}}
     <Registries::RegistrationFormNavigationDropdown
         @showMetadata={{false}}
         @schemaBlocks={{this.schemaBlocks}}

lib/osf-components/addon/components/registries/version-metadata/styles.scss

@@ -0,0 +1,8 @@
+.versionMetadata {
+    border: 3px solid $brand-warning;
+    padding: 10px;
+}
+
+.versionMetadata-title {
+    font-weight: bold;
+}

lib/osf-components/addon/components/registries/version-metadata/template.hbs

@@ -0,0 +1,19 @@
+<section
+    local-class='versionMetadata'
+>
+    <p
+        data-test-version-metadata-title
+        local-class='versionMetadata-title'
+    >
+        {{t 'registries.overview.versionMetadata.title'}}
+    </p>
+    {{!-- TODO: add description for what fields have changed --}}
+    <p data-test-version-metadata-date>
+        {{t 'registries.overview.versionMetadata.date' date=(moment-format @revision.date 'MMM DD, YYYY') author=@revision.initiatedBy.fullName}}
+    </p>
+    <p data-test-version-metadata-reason>
+        {{t 'registries.overview.versionMetadata.reason'}}
+        <br>
+        <i>{{@revision.revisionJustification}}</i>
+    </p>
+</section>

lib/osf-components/app/components/registries/version-metadata/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/registries/version-metadata/template';

tests/engines/registries/acceptance/overview/revision-test.ts

@@ -0,0 +1,37 @@
+import { ModelInstance } from 'ember-cli-mirage';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import { setupIntl, TestContext } from 'ember-intl/test-support';
+import RegistrationProviderModel from 'ember-osf-web/models/registration-provider';
+import { visit } from 'ember-osf-web/tests/helpers';
+import { setupEngineApplicationTest } from 'ember-osf-web/tests/helpers/engines';
+import { percySnapshot } from 'ember-percy';
+import { module, test } from 'qunit';
+
+interface ModeratorModeTestContext extends TestContext {
+    provider: ModelInstance<RegistrationProviderModel>;
+}
+
+module('Registries | Acceptance | overview.revision', hooks => {
+    setupEngineApplicationTest(hooks, 'registries');
+    setupMirage(hooks);
+    setupIntl(hooks);
+
+    test('viewing a specific revision', async function(this: ModeratorModeTestContext, assert) {
+        const user = server.create('user', { fullName: 'Foo Bar' });
+        const registration = server.create('registration', {
+            id: 'kovacs',
+        });
+        const revision = server.create('revision', {
+            id: 'colman',
+            initiatedBy: user,
+            dateModified: new Date(),
+            revisionJustification: 'This registration went into a phone booth',
+            revisionResponses: { q1: 'Super Man' },
+            registration,
+        });
+        await visit(`/${registration.id}?revisionId=${revision.id}`);
+        assert.dom('[data-test-version-metadata-title]')
+            .exists('version metadata is shown when viewing a specific revision');
+        await percySnapshot(assert);
+    });
+});

tests/integration/components/registries/version-metadata/component-test.ts

@@ -0,0 +1,43 @@
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import { t } from 'ember-intl/test-support';
+import moment from 'moment';
+import { module, test } from 'qunit';
+
+import { setupIntl, TestContext } from 'ember-intl/test-support';
+import { setupRenderingTest } from 'ember-qunit';
+
+module('Integration | Component | version-metadata', hooks => {
+    setupRenderingTest(hooks);
+    setupMirage(hooks);
+    setupIntl(hooks);
+
+    test('it renders', async function(this: TestContext, assert) {
+        const currentUser = server.create('user', { fullName: 'Lex Luthor' }, 'loggedIn');
+        const registration = server.create('registration', {
+            title: 'The Effect of Glasses and Spandex on an Individuals Recognizability',
+            registrationResponses: { q1: 'Clark Kent' },
+        });
+        const revision = server.create('revision', {
+            initiatedBy: currentUser,
+            dateModified: new Date(),
+            revisionJustification: 'This registration went into a phone booth',
+            revisionResponses: { q1: 'Super Man' },
+            registration,
+        });
+        this.set('revision', revision);
+        await render(hbs`<Registries::VersionMetadata @revision={{this.revision}} />`);
+        assert.dom('[data-test-version-metadata-title]').hasText(
+            t('registries.overview.versionMetadata.title'), 'revision title is shown',
+        );
+        assert.dom('[data-test-version-metadata-date]').hasTextContaining(
+            t('registries.overview.versionMetadata.date', {
+                date: moment(revision.dateModified).format('MMM DD, YYYY'),
+                author: 'Lex Luthor',
+            }), 'revision initiator is shown',
+        );
+        assert.dom('[data-test-version-metadata-reason]')
+            .hasTextContaining(revision.revisionJustification, 'revision justification is shown');
+    });
+});

translations/en-us.yml

@@ -1348,6 +1348,11 @@ registries:
             remove_bookmark: 'Remove bookmark'
             share: 'Share this registration'
             fork: 'Fork this registration'
+        versionMetadata:
+            title: 'This is an update to the original registration'
+            date: 'This update was made on {date} by {author}'
+            description: 'Updated responses are labeled'
+            reason: 'Reason for revision:'
     overviewHeader:
         needModeratorPermission: 'You do not have permission to moderate this registration.'
     partialRegistrationModal: