[ENG-3242] Add Justification route to registration edit workflow

app/models/schema-response.ts

@@ -19,7 +19,7 @@ export default class SchemaResponseModel extends OsfModel {
     @attr('date') dateCreated!: Date;
     @attr('date') dateModified!: Date;
     @attr('fixstring') revisionJustification!: string;
-    @attr('array') revisedResponses!: string[];
+    @attr('registration-response-key-array') revisedResponses!: string[];
     @attr('registration-responses') revisionResponses!: RegistrationResponse;
     @attr('boolean') isPendingCurrentUserApproval!: boolean;
 

app/packages/registration-schema/index.ts

@@ -2,7 +2,7 @@ export { getPages } from './get-pages';
 export { getSchemaBlockGroups } from './get-schema-block-group';
 export { SchemaBlock, SchemaBlockType } from './schema-block';
 export { SchemaBlockGroup } from './schema-block-group';
-export { buildValidation, buildMetadataValidations } from './validations';
+export { buildValidation, buildMetadataValidations, buildSchemaResponseValidations } from './validations';
 export {
     FileReference,
     RegistrationResponse,

app/packages/registration-schema/validations.ts

@@ -1,7 +1,7 @@
 import { assert } from '@ember/debug';
 import { set } from '@ember/object';
 import { ValidationObject, ValidatorFunction } from 'ember-changeset-validations';
-import { validatePresence } from 'ember-changeset-validations/validators';
+import { validateLength, validatePresence } from 'ember-changeset-validations/validators';
 import DraftNode from 'ember-osf-web/models/draft-node';
 import LicenseModel from 'ember-osf-web/models/license';
 
@@ -10,6 +10,7 @@ import NodeModel, { NodeLicense } from 'ember-osf-web/models/node';
 import { RegistrationResponse } from 'ember-osf-web/packages/registration-schema';
 import { SchemaBlockGroup } from 'ember-osf-web/packages/registration-schema/schema-block-group';
 import { validateFileList } from 'ember-osf-web/validators/validate-response-format';
+import SchemaResponseModel from 'ember-osf-web/models/schema-response';
 
 export const NodeLicenseFields: Record<keyof NodeLicense, string> = {
     copyrightHolders: 'Copyright Holders',
@@ -166,3 +167,22 @@ export function buildMetadataValidations() {
     set(validationObj, DraftMetadataProperties.NodeLicenseProperty, validateNodeLicense());
     return validationObj;
 }
+
+export function buildSchemaResponseValidations() {
+    const validationObj: ValidationObject<SchemaResponseModel> = {};
+    const notBlank: ValidatorFunction[] = [validatePresence({
+        presence: true,
+        ignoreBlank: true,
+        allowBlank: false,
+        allowNone: false,
+        type: 'blank',
+    })];
+    set(validationObj, 'revisionJustification', notBlank);
+    set(validationObj, 'revisedResponses', [validateLength({
+        min: 1,
+        allowBlank: false,
+        allowNone: false,
+        type: 'no_updated_responses',
+    })]);
+    return validationObj;
+}

app/transforms/registration-response-key-array.ts

@@ -0,0 +1,29 @@
+import Transform from '@ember-data/serializer/transform';
+import { deserializeResponseKey, serializeResponseKey } from './registration-response-key';
+
+export default class RegistrationResponseKeyArrayTransform extends Transform {
+    deserialize(values: string[] | null): string[] {
+        if (values === null) {
+            return [];
+        }
+        return values.map(
+            value => deserializeResponseKey(value),
+        );
+    }
+
+    serialize(values: string[] | null): string[] {
+        if (values === null) {
+            return [];
+        }
+        return values.map(
+            value => serializeResponseKey(value),
+        );
+    }
+}
+
+
+declare module 'ember-data/types/registries/transform' {
+    export default interface TransformRegistry {
+        'registration-response-key-array': {};
+    } // eslint-disable-line semi
+}

lib/osf-components/addon/components/registries/revised-responses-list/component.ts

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { getSchemaBlockGroups, SchemaBlockGroup } from 'ember-osf-web/packages/registration-schema';
+import SchemaResponseModel from 'ember-osf-web/models/schema-response';
+import SchemaBlockModel from 'ember-osf-web/models/schema-block';
+
+interface Args {
+    revision: SchemaResponseModel;
+    schemaBlocks: SchemaBlockModel[];
+}
+
+export default class RevisedResponsesList extends Component<Args> {
+    @tracked groups?: SchemaBlockGroup[];
+
+    constructor(owner: unknown, args: Args) {
+        super(owner, args);
+        this.groups = getSchemaBlockGroups(this.args.schemaBlocks);
+    }
+
+    get revisedResponses(): string[] {
+        const { revision } = this.args;
+        if (revision.revisedResponses) {
+            const allRevisedLabels = revision.revisedResponses
+                .reduce((labels: string[], revisedResponse: string) => {
+                    const revisedGroup = this.groups?.filter(
+                        (group: SchemaBlockGroup) => group.registrationResponseKey?.includes(revisedResponse),
+                    );
+                    if (revisedResponse) {
+                        labels.push(revisedGroup![0].labelBlock!.displayText!);
+                    }
+                    return labels;
+                }, []);
+            return allRevisedLabels;
+        }
+        return [];
+    }
+}

lib/osf-components/addon/components/registries/revised-responses-list/template.hbs

@@ -0,0 +1,9 @@
+{{~#each this.revisedResponses as |response|~}}
+    <p data-test-revised-responses-list='{{response}}' ...attributes>
+        {{~response~}}
+    </p>
+{{~else}}
+    <p data-test-revised-responses-list-no-update ...attributes>
+        {{~t 'registries.revisedResponsesList.noResponses'~}}
+    </p>
+{{/each}}

lib/osf-components/addon/components/registries/revision-justification-renderer/label-display/styles.scss

@@ -0,0 +1,14 @@
+.ResponseValue {
+    composes: Element from '../../schema-block-renderer/styles.scss';
+    margin: 10px 0 0;
+}
+
+.ValidationErrors {
+    composes: Element from '../../schema-block-renderer/styles.scss';
+}
+
+.DisplayText {
+    font-size: 14px;
+    font-weight: 700;
+    margin: 20px 0 0;
+}

lib/osf-components/addon/components/registries/revision-justification-renderer/label-display/template.hbs

@@ -0,0 +1,32 @@
+{{assert 'Registries::RevisionJustificationRenderer::LabelDisplay requires a revision' @revision}}
+{{assert 'Registries::RevisionJustificationRenderer::LabelDisplay requires a field' @field}}
+{{assert 'Registries::RevisionJustificationRenderer::LabelDisplay requires a changeset' @changeset}}
+<p local-class='DisplayText' data-test-review-label={{@field}} id={{@field}}>
+    {{t (concat 'registries.edit_revision.' @field)}}
+    {{#if @showEditButton}}
+        <OsfLink
+            data-test-edit-button
+            aria-label={{t 'registries.registration_metadata.edit_field' field=(if @fieldText @fieldText @field)}}
+            @route='registries.edit-revision.justification'
+            @models={{array @revision.id }}
+            @fragment={{@field}}
+        >
+            <FaIcon @icon='edit' />
+        </OsfLink>
+    {{/if}}
+</p>
+<p
+    data-test-review-response={{@field}}
+    local-class='ResponseValue'
+    ...attributes
+>
+    {{~yield~}}
+</p>
+{{#unless @hideError}}
+    <ValidationErrors
+        local-class='ValidationErrors'
+        @changeset={{@changeset}}
+        @key={{@field}}
+        @errors={{@errors}}
+    />
+{{/unless}}

lib/osf-components/addon/components/registries/revision-justification-renderer/styles.scss

@@ -0,0 +1,12 @@
+.NoResponse,
+.RevisedResponses {
+    font-style: italic;
+}
+
+.TextResponse {
+    white-space: pre-wrap;
+}
+
+.ValidationErrors {
+    composes: Element from '../schema-block-renderer/styles.scss';
+}

lib/osf-components/addon/components/registries/revision-justification-renderer/template.hbs

@@ -0,0 +1,25 @@
+{{assert 'Registries::RevisionJustificationRenderer requires a revision' @revision}}
+<h2 id='JustificationPageLabel'>{{t 'registries.edit_revision.justification.page_label'}}</h2>
+
+<Registries::RevisionJustificationRenderer::LabelDisplay
+    @revision={{@revision}}
+    @changeset={{@revisionChangeset}}
+    @showEditButton={{@showEditButton}}
+    @field='revisionJustification'
+    local-class='TextResponse {{unless @revision.revisionJustification 'NoResponse'}}'
+>
+    {{~if @revision.revisionJustification @revision.revisionJustification (t 'registries.edit_revision.review.no_justification')~}}
+</Registries::RevisionJustificationRenderer::LabelDisplay>
+
+<Registries::RevisionJustificationRenderer::LabelDisplay
+    @revision={{@revision}}
+    @changeset={{@revisionChangeset}}
+    @showEditButton={{false}}
+    @field='revisedResponses'
+    local-class='RevisedResponses'
+>
+    <Registries::RevisedResponsesList
+        @revision={{@revision}}
+        @schemaBlocks={{@schemaBlocks}}
+    />
+</Registries::RevisionJustificationRenderer::LabelDisplay>

lib/osf-components/addon/components/registries/update-dropdown/component.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { waitFor } from '@ember/test-waiters';

lib/osf-components/app/components/registries/revised-responses-list/component.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/registries/revised-responses-list/component';

lib/osf-components/app/components/registries/revised-responses-list/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/registries/revised-responses-list/template';

lib/osf-components/app/components/registries/revision-justification-renderer/label-display/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/registries/revision-justification-renderer/label-display/template';

lib/osf-components/app/components/registries/revision-justification-renderer/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/registries/revision-justification-renderer/template';

lib/registries/addon/components/page-link/component.ts

@@ -55,7 +55,7 @@ export default class PageLinkComponent extends Component {
             }
             return PageState.Invalid;
         }
-        if (this.pageName === 'metadata') {
+        if (this.pageName === 'metadata' || this.pageName === 'justification') {
             if (this.metadataIsValid) {
                 return PageState.Valid;
             }

lib/registries/addon/edit-revision/-components/right-nav/template.hbs

@@ -51,6 +51,21 @@
         </Button>
     </OsfLink>
 {{/if}}
+{{#if @navManager.isFirstPage}}
+    <OsfLink
+        data-test-goto-justification
+        data-analytics-name='Back to justification'
+        local-class='BackButton'
+        @type='button'
+        @route='registries.edit-revision.justification'
+        @models={{array @revisionManager.revisionId}}
+    >
+        <Button @type='secondary'>
+            <FaIcon @icon='arrow-left' @fixedWidth={{true}} />
+            {{t 'registries.edit_revision.justification.page_label'}}
+        </Button>
+    </OsfLink>
+{{/if}}
 
 {{#if @revisionManager.lastSaveFailed}}
     <span local-class='SaveFailed'>

lib/registries/addon/edit-revision/-components/top-nav/template.hbs

@@ -4,7 +4,7 @@
 
 <Navbar local-class='SideBarToggle' ...attributes as |nav|>
     <nav.bordered-section>
-        {{#if (and (not @revisionManager.currentUserIsReadOnly) @revisionManager.isEditable)}}
+        {{#if @navManager.showSidenav}}
             <nav.buttons.default
                 data-test-sidenav-toggle
                 data-analytics-name='Show sidenav'
@@ -19,13 +19,27 @@
         <div data-test-page-label>
             {{#if @navManager.inReview}}
                 {{t 'registries.drafts.draft.review.page_label'}}
+            {{else if @navManager.inJustification}}
+                {{t 'registries.edit_revision.justification.page_label'}}
             {{else}}
                 {{@navManager.currentPageManager.pageHeadingText}}
             {{/if}}
         </div>
     </nav.bordered-section>
     <nav.bordered-section>
-        {{#if (and @navManager.prevPageParam (not @revisionManager.currentUserIsReadOnly) @revisionManager.isEditable)}}
+        {{#if @navManager.isFirstPage}}
+            <nav.links.default
+                data-test-goto-justification
+                data-analytics-name='Topnav back to justification'
+                aria-label={{t 'osf-components.registries-top-nav.justification'}}
+                local-class='MetadataButton'
+                @route='registries.edit-revision.justification'
+                @models={{array @revisionManager.revisionId }}
+            >
+                {{t 'registries.edit_revision.justification.page_label'}}
+            </nav.links.default>
+        {{/if}}
+        {{#if @navManager.showPreviousButton}}
             <nav.links.default
                 data-test-goto-previous-page
                 data-analytics-name='Topnav back'

lib/registries/addon/edit-revision/index/route.ts

@@ -3,6 +3,6 @@ import Route from '@ember/routing/route';
 export default class EditRevisionIndexRoute extends Route {
     beforeModel() {
         const params: { revisionId?: string } = this.paramsFor('edit-revision');
-        return this.replaceWith('edit-revision.page', params.revisionId, 1);
+        return this.replaceWith('edit-revision.justification', params.revisionId);
     }
 }

lib/registries/addon/edit-revision/justification/controller.ts

@@ -0,0 +1,17 @@
+import Controller from '@ember/controller';
+import { alias, not } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+import Media from 'ember-responsive';
+
+import RevisionManager from 'registries/edit-revision/revision-manager';
+import SchemaResponseModel from 'ember-osf-web/models/schema-response';
+
+export default class EditRevisionJustification extends Controller {
+    @service media!: Media;
+
+    @alias('model.revisionManager') revisionManager?: RevisionManager;
+    @alias('revisionManager.revision') revision?: SchemaResponseModel;
+
+    @not('revision') loading!: boolean;
+    @not('media.isDesktop') showMobileView!: boolean;
+}

lib/registries/addon/edit-revision/justification/route.ts

@@ -0,0 +1,26 @@
+import { action } from '@ember/object';
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+import Analytics from 'ember-osf-web/services/analytics';
+import { RevisionRoute } from 'registries/edit-revision/nav-manager';
+
+import { EditRevisionRouteModel } from '../route';
+
+export default class EditRevisionJustification extends Route {
+    @service analytics!: Analytics;
+
+    model(): EditRevisionRouteModel {
+        const editRevisionRouteModel = this.modelFor('edit-revision') as EditRevisionRouteModel;
+        const { navigationManager } = editRevisionRouteModel;
+
+        navigationManager.setPageAndRoute(RevisionRoute.Justification);
+
+        return this.modelFor('edit-revision') as EditRevisionRouteModel;
+    }
+
+    @action
+    didTransition() {
+        this.analytics.trackPage();
+    }
+}

lib/registries/addon/edit-revision/justification/styles.scss

@@ -0,0 +1,27 @@
+.Metadata {
+    composes: Metadata from '../../drafts/draft/metadata/styles.scss';
+}
+
+.PageHeading {
+    composes: PageHeading from '../../drafts/draft/metadata/styles.scss';
+}
+
+.HeadingParagraph {
+    composes: HeadingParagraph from '../../drafts/draft/metadata/styles.scss';
+}
+
+.Required {
+    composes: Required from '../../drafts/draft/metadata/styles.scss';
+}
+
+.SchemaBlockInput {
+    composes: SchemaBlockInput from '../../drafts/draft/metadata/styles.scss';
+}
+
+.SchemaBlockLongText {
+    composes: SchemaBlockLongText from '../../drafts/draft/metadata/styles.scss';
+}
+
+.RevisedResponses {
+    font-style: italic;
+}