[ENG-5012][ENG-5014] Updates to see the file version for the latest preprint deploy

app/models/file-version.ts

@@ -1,11 +1,20 @@
 import { attr } from '@ember-data/model';
+import { Link } from 'jsonapi-typescript';
+import { NormalLinks } from 'osf-api';
 
 import OsfModel from './osf-model';
 
+export interface FileVersionLinks extends NormalLinks {
+    download?: Link;
+    render?: Link;
+}
+
 export default class FileVersionModel extends OsfModel {
     @attr('number') size!: number;
     @attr('date') dateCreated!: Date;
     @attr('fixstring') contentType!: string;
+    @attr('fixstring') name!: string;
+    @attr() links!: FileVersionLinks;
 }
 
 declare module 'ember-data/types/registries/model' {

app/preprints/-components/preprint-file-render/component.ts

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import FileModel from 'ember-osf-web/models/file';
+import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
+import PreprintModel from 'ember-osf-web/models/preprint';
+import Theme from 'ember-osf-web/services/theme';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+import { waitFor } from '@ember/test-waiters';
+import { taskFor } from 'ember-concurrency-ts';
+import FileVersionModel from 'ember-osf-web/models/file-version';
+import Media from 'ember-responsive';
+
+
+interface InputArgs {
+  preprint: PreprintModel;
+  provider: PreprintProviderModel;
+  primaryFile: FileModel;
+}
+
+export interface VersionModel extends FileVersionModel {
+  downloadUrl?: string;
+}
+
+export default class PreprintFileRender extends Component<InputArgs> {
+    @service theme!: Theme;
+    @service media!: Media;
+
+    @tracked allowCommenting = false;
+    @tracked primaryFileHasVersions = false;
+    @tracked fileVersions: VersionModel[] = [];
+
+    primaryFile = this.args.primaryFile;
+    provider = this.args.provider;
+    preprint = this.args.preprint;
+
+    constructor(owner: unknown, args: InputArgs) {
+        super(owner, args);
+
+        taskFor(this.loadPrimaryFileVersions).perform();
+
+        this.allowCommenting = this.provider.allowCommenting && this.preprint.isPublished && this.preprint.public;
+    }
+
+    @task
+    @waitFor
+    private async loadPrimaryFileVersions()  {
+        const primaryFileVersions = (await this.primaryFile.queryHasMany('versions', {
+            sort: '-id', 'page[size]': 50,
+        })).toArray();
+        this.serializeVersions(primaryFileVersions);
+        this.primaryFileHasVersions = primaryFileVersions.length > 0;
+    }
+
+    private serializeVersions(versions: FileVersionModel[]) {
+        const downloadUrl = this.primaryFile.links.download as string || '';
+        const primaryFileGuid = this.primaryFile.guid;
+
+        const directDownloadUrl = downloadUrl.replace(
+            `download/${primaryFileGuid}`,
+            `${primaryFileGuid}/download`,
+        );
+
+        versions.map((version: VersionModel) => {
+            const dateFormatted = encodeURIComponent(version.dateCreated.toISOString());
+            const displayName = version.name.replace(/(\.\w+)?$/, ext => `-${dateFormatted}${ext}`);
+
+            this.fileVersions.push(
+              {
+                  name: version.name,
+                  id: version.id,
+                  dateCreated: version.dateCreated,
+                  downloadUrl: `${directDownloadUrl}?version=${version.id}&displayName=${displayName}`,
+              } as VersionModel,
+            );
+            return version;
+        });
+    }
+
+    get isMobile() {
+        return this.media.isMobile;
+    }
+}

app/preprints/-components/preprint-file-render/styles.scss

@@ -0,0 +1,122 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
+.file-renderer-container {
+    width: 100%;
+    height: 1150px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .file-container {
+        width: 100%;
+        height: 1100px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    .details-container {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+
+        .name-container {
+            width: 60%;
+            height: 50px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            .name,
+            .version {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-start;
+                height: 25px;
+            }
+        }
+
+        .version-container {
+            width: 40%;
+            height: 50px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+
+            .version-menu {
+                background-color: $color-bg-white;
+                border: 1px solid rgba(0, 0, 0, 0.15);
+                border-radius: 4px;
+                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+                padding: 5px;
+                margin: 2px 0 0;
+
+                ul {
+                    list-style: none;
+                    padding-inline-start: 0;
+                }
+
+                .li-container {
+                    margin-top: 10px;
+                    margin-bottom: 10px;
+
+                    .btn {
+                        display: inline-block;
+                        margin-bottom: 0;
+                        font-weight: 400;
+                        text-align: center;
+                        white-space: nowrap;
+                        touch-action: manipulation;
+                        cursor: pointer;
+                        background-image: none;
+                        border: 1px solid transparent;
+                        border-radius: 2px;
+                        padding: 6px 12px;
+                        font-size: 14px;
+                        line-height: 1.42857;
+                        user-select: none;
+                        vertical-align: middle;
+                        color: $color-text-white;
+                    }
+
+                    .btn-primary {
+                        color: $color-text-white;
+                        background-color: $color-bg-blue-dark;
+                        border-color: #2e6da4;
+                    }
+                }
+            }
+        }
+    }
+
+    &.mobile {
+        height: 500px;
+
+        .file-container {
+            height: 400px;
+        }
+
+        .details-container {
+            height: 100px;
+            flex-direction: column;
+
+            .version-container,
+            .name-container {
+                height: 50px;
+                width: 100%;
+                justify-content: center;
+                align-items: flex-start;
+                flex-direction: column;
+            }
+        }
+    }
+}

app/preprints/-components/preprint-file-render/template.hbs

@@ -0,0 +1,49 @@
+<div local-class='file-renderer-container {{if this.isMobile 'mobile'}}'>
+    <div local-class='file-container'>
+        <FileRenderer
+            @allowCommenting={{this.allowCommenting}}
+            @download={{this.primaryFile.links.download}}
+        />
+    </div>
+
+    <div local-class='details-container'>
+        <div local-class='name-container'>
+            <div data-test-selected-file-name local-class='name'>
+                {{this.primaryFile.name}}
+            </div>
+            <div data-test-file-version local-class='version'>
+                {{t 'preprints.detail.file_renderer.version'}}: {{this.primaryFile.currentVersion}}
+            </div>
+        </div>
+        <div local-class='version-container'>
+            {{#if this.primaryFileHasVersions}}
+                <ResponsiveDropdown 
+                    @renderInPlace={{true}}
+                    @buttonStyling={{true}}
+                    as |dd|
+                >
+                    <dd.trigger>
+                        {{t 'preprints.detail.file_renderer.download_previous_versions'}}
+                        <span class='fa fa-caret-down'></span>
+                    </dd.trigger>
+                    <dd.content local-class='version-menu'>
+                        <ul role='menu' tabindex='-1'>
+                            {{#each this.fileVersions as |version|}}
+                                <li role='menuitem' local-class='li-container'>
+                                    <OsfLink
+                                        data-test-get-started-button
+                                        data-analytics-name='Content - Download Previous Version'
+                                        local-class='btn btn-primary'
+                                        @href={{version.downloadUrl}}
+                                    >
+                                        {{t 'preprints.detail.file_renderer.version'}} {{version.id}}, {{moment-format version.dateCreated 'MM/DD/YYYY HH:mm:SS'}}
+                                    </OsfLink>
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </dd.content>
+                </ResponsiveDropdown>
+            {{/if}}
+        </div>
+    </div>
+</div>

app/preprints/detail/route.ts

@@ -60,6 +60,8 @@ export default class PreprintsDetail extends Route {
 
             const primaryFile = await preprint?.get('primaryFile');
 
+            primaryFile.versions = await primaryFile?.versions;
+
             this.theme.set('providerType', 'preprint');
             this.theme.set('id', provider.id);
 

app/preprints/detail/styles.scss

@@ -204,7 +204,7 @@
             }
 
             .data-container-left {
-                height: 481px;
+                height: 500px;
 
                 .file-description-container {
                     flex-direction: column;

app/preprints/detail/template.hbs

@@ -61,13 +61,14 @@
                     </Alert>
                 {{else}}
                     {{#if this.model.preprint.public}}
-                        <FileRenderer
-                            @download={{this.model.primaryFile.links.download}}
-                            @version={{this.viewedVersion}}
-                        />
+                        <Preprints::-Components::PreprintFileRender
+                            @provider={{this.model.provider}}
+                            @preprint={{this.model.preprint}}
+                            @primaryFile={{this.model.primaryFile}}
+                        ></Preprints::-Components::PreprintFileRender>
                         <div local-class='file-description-container'>
                             <div local-class='file-description'>
-                                <div>{{t this.dateLabel}}: {{moment-format this.model.dateCreated 'MMMM DD, YYYY'}}</div>
+                                <div>{{t this.dateLabel}}: {{moment-format this.model.preprint.dateCreated 'MMMM DD, YYYY'}}</div>
                                 {{#unless this.isMobile}}
                                     <div> | </div> 
                                 {{/unless}}

lib/analytics-page/addon/application/template.hbs

@@ -110,6 +110,7 @@
                         {{t (get this.timespanIntlKeys this.timespan)}}
                         <FaIcon @icon='caret-down' />
                     </dd.trigger>
+
                     <dd.content
                         local-class='date-range-menu'
                         @align='right'

mirage/config.ts

@@ -85,6 +85,10 @@ export default function(this: Server) {
     this.patch('/applications/:id', updateDeveloperApp);
 
     osfResource(this, 'file', { only: ['show', 'update'] });
+    osfNestedResource(this, 'file', 'versions', {
+        only: ['index'],
+        path: '/files/:parentID/versions',
+    });
 
     this.get('/guids/:id', guidDetail);
 

mirage/factories/file-version.ts

@@ -0,0 +1,32 @@
+import { Factory } from 'ember-cli-mirage';
+import faker from 'faker';
+
+import FileVersionModel from 'ember-osf-web/models/file-version';
+
+export default Factory.extend<FileVersionModel>({
+    id() {
+        return faker.random.number(1000);
+    },
+    size() {
+        return faker.random.number(1000);
+    },
+    contentType: 'application/octet-stream',
+    dateCreated() {
+        return faker.date.past(2, new Date(2018, 0, 0));
+    },
+    name() {
+        return faker.system.commonFileName(faker.system.commonFileExt());
+    },
+});
+
+declare module 'ember-cli-mirage/types/registries/model' {
+    export default interface MirageModelRegistry {
+        'file-version':  FileVersionModel;
+    } // eslint-disable-line semi
+}
+
+declare module 'ember-cli-mirage/types/registries/schema' {
+    export default interface MirageSchemaRegistry {
+        'file-version': FileVersionModel;
+    } // eslint-disable-line semi
+}

mirage/factories/file.ts

@@ -27,8 +27,12 @@ export default Factory.extend<MirageFile & FileTraits>({
             id: newObj.id,
             referentType: newObj.modelName,
         });
+
+        const versions = server.createList('file-version', 3);
+
         newObj.update({
             guid: newObj.id,
+            versions,
         });
     },
 

mirage/factories/preprint.ts

@@ -197,7 +197,6 @@ export default Factory.extend<PreprintMirageModel & PreprintTraits>({
             preprint.update({ reviewActions: [preprintReviewAction]});
         },
     }),
-
 });
 
 declare module 'ember-cli-mirage/types/registries/model' {