[ENG-3879] Show dataverse specific info (#1570)

futa-ikeda · brianjgeiger · web-flow · commit a08781c6a535 · 2022-07-14T11:28:58.000-04:00
* Show dataverse specific info

* Streamline displayname logic

* Add dataverse-file unit test

Co-authored-by: Brian J. Geiger &lt;bgeiger@cos.io&gt;
diff --git a/app/guid-file/template.hbs b/app/guid-file/template.hbs
@@ -16,7 +16,7 @@
         </h3>
         <div local-class='FlexContainerRow'>
             <h2 data-test-filename>
-                {{this.model.name}}
+                {{this.model.displayName}}
                 {{#if this.viewedVersion}}
                     ({{t 'general.version'}}: {{this.viewedVersion}})
                 {{/if}}
diff --git a/app/packages/files/dataverse-file.ts b/app/packages/files/dataverse-file.ts
@@ -2,6 +2,15 @@ import FileModel from 'ember-osf-web/models/file';
 import File from 'ember-osf-web/packages/files/file';
 import CurrentUserService from 'ember-osf-web/services/current-user';
 
+interface DataverseExtraInfo {
+    datasetVersion: 'latest-published' | 'latest';
+    fileId: string;
+    hasPublishedVersion: boolean;
+    hashes: {
+        md5: string,
+    };
+}
+
 export default class DataverseFile extends File {
     shouldShowRevisions = false;
     providerHandlesVersioning = false;
@@ -13,4 +22,11 @@ export default class DataverseFile extends File {
     get currentUserPermission() {
         return 'read';
     }
+
+    get displayName() {
+        const fileExtra = this.fileModel.extra as DataverseExtraInfo;
+        const translationKeyPrefix = 'osf-components.file-browser.provider-specific-data.dataverse.';
+        const fileNameSuffix = ' ' + this.intl.t(translationKeyPrefix + fileExtra.datasetVersion);
+        return this.fileModel.name + fileNameSuffix;
+    }
 }
diff --git a/app/packages/files/file.ts b/app/packages/files/file.ts
@@ -99,6 +99,10 @@ export default abstract class File {
         return this.fileModel.name;
     }
 
+    get displayName() {
+        return this.fileModel.name;
+    }
+
     get id() {
         return this.fileModel.id;
     }
diff --git a/lib/osf-components/addon/components/file-actions-menu/template.hbs b/lib/osf-components/addon/components/file-actions-menu/template.hbs
@@ -6,7 +6,7 @@
     as |dropdown|
 >
     <dropdown.trigger
-        aria-label={{t 'file_actions_menu.actions' filename=@item.name}} 
+        aria-label={{t 'file_actions_menu.actions' filename=@item.displayName}} 
         data-test-file-download-share-trigger
         data-analytics-name='File actions'
     >
@@ -40,8 +40,8 @@
             </dd.trigger>
         </FileEmbedMenu>
         <SharingIcons::Dropdown
-            @title={{@item.name}}
-            @description={{@item.name}}
+            @title={{@item.displayName}}
+            @description={{@item.displayName}}
             @hyperlink={{@item.links.html}}
             @showText={{true}}
             as |dd|
diff --git a/lib/osf-components/addon/components/file-browser/file-item/template.hbs b/lib/osf-components/addon/components/file-browser/file-item/template.hbs
@@ -9,7 +9,7 @@
                 data-analytics-name='Select file'
                 data-analytics-category='checkbox'
                 data-test-select-file={{@item.id}}
-                aria-label={{t 'osf-components.file-browser.select_file' fileName=@item.name}}
+                aria-label={{t 'osf-components.file-browser.select_file' fileName=@item.displayName}}
                 {{on 'click' (action @manager.selectFile @item)}}
                 local-class='Label'
             >
@@ -22,7 +22,7 @@
         {{/if}}
         <div local-class='FileList__item__name {{unless @isDesktop 'name__mobile'}}'>
             {{#if @item.isCheckedOut}}
-                <span local-class='CheckoutSpan'>
+                <span data-test-file-list-checkout local-class='CheckoutSpan'>
                     <FaIcon local-class='CheckoutIcon' @icon='lock' />
                     <BsTooltip
                         @placement='right'
@@ -33,11 +33,12 @@
                 </span>
             {{/if}}
             <OsfLink
+                data-test-file-list-link
                 data-analytics-name='Open file'
                 aria-label={{if
                     @item.showAsUnviewed
-                    (t 'osf-components.file-browser.view_unseen_file' fileName=@item.name)
-                    (t 'osf-components.file-browser.view_file' fileName=@item.name)
+                    (t 'osf-components.file-browser.view_unseen_file' fileName=@item.displayName)
+                    (t 'osf-components.file-browser.view_file' fileName=@item.displayName)
                 }}
                 @href={{@item.links.html}}
                 @target='_blank'
@@ -47,7 +48,7 @@
                     @prefix='far' @icon='file-alt' @fixedWidth={{true}}
                 />
                 <span data-test-file-name>
-                    {{@item.name}}
+                    {{@item.displayName}}
                 </span>
             </OsfLink>
         </div>
diff --git a/tests/integration/components/file-browser/file-item/component-test.ts b/tests/integration/components/file-browser/file-item/component-test.ts
@@ -1,21 +1,26 @@
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import { TestContext } from 'ember-intl/test-support';
+import { TestContext, t } from 'ember-intl/test-support';
 import { click } from 'ember-osf-web/tests/helpers';
 import { setupRenderingTest } from 'ember-qunit';
 import moment from 'moment';
 import { module, test } from 'qunit';
 
+import styles from 'osf-components/components/file-browser/file-item/styles';
+
 interface Links {
     html: string;
     download: string;
 }
 
 interface FileItem {
     name: string;
+    displayName: string;
     links: Links;
     dateModified: string;
     id: string;
+    isCheckedOut?: boolean;
+    showAsUnviewed?: boolean;
 }
 
 interface Manager {
@@ -37,6 +42,7 @@ module('Integration | Component | file-browser :: file-item', hooks => {
         this.item = {
             id: 'fakeId',
             name: 'Push&Pull',
+            displayName: 'Push&Pull',
             links: {
                 html: 'thisisafakelink',
                 download: 'thisisafakedownloadlink',
@@ -59,7 +65,7 @@ module('Integration | Component | file-browser :: file-item', hooks => {
             );
             assert.dom('[data-test-indented="false"][data-test-file-list-item]').exists('File item exists');
             assert.dom('[data-test-file-name]').exists('File name exists');
-            assert.dom('[data-test-file-name]').hasText(this.item.name, 'File name is correct');
+            assert.dom('[data-test-file-name]').hasText(this.item.displayName, 'File name is correct');
             assert.dom('[data-test-file-modified-date]').exists('Modified date exists');
             assert.dom('[data-test-file-modified-date]').hasText(
                 moment(this.item.dateModified).format('YYYY-MM-DD hh:mm A'),
@@ -79,7 +85,7 @@ module('Integration | Component | file-browser :: file-item', hooks => {
             );
             assert.dom('[data-test-indented="true"][data-test-file-list-item]').exists('File item exists');
             assert.dom('[data-test-file-name]').exists('File name exists');
-            assert.dom('[data-test-file-name]').hasText(this.item.name, 'File name is correct');
+            assert.dom('[data-test-file-name]').hasText(this.item.displayName, 'File name is correct');
             assert.dom('[data-test-file-modified-date]').exists('Modified date exists');
             assert.dom('[data-test-file-modified-date]').hasText(
                 moment(this.item.dateModified).format('YYYY-MM-DD hh:mm A'),
@@ -90,4 +96,31 @@ module('Integration | Component | file-browser :: file-item', hooks => {
             assert.dom('[data-test-embed-button]').exists('Embed button exists');
             assert.dom('[data-test-social-sharing-button]').exists('Share button exists');
         });
+
+    test('it renders checked-out file', async function(this: FileItemTestContext, assert) {
+        this.manager.parentFolder = 'fakeParentFolder';
+        this.item.isCheckedOut = true;
+        await render(
+            hbs`<FileBrowser::FileItem @manager={{this.manager}} @item={{this.item}} @isDesktop={{true}} />`,
+        );
+        assert.dom('[data-test-file-list-checkout]').exists('Checkout icon exists');
+        assert.dom('[data-test-file-list-link]').hasAria('label',
+            t('osf-components.file-browser.view_file', { fileName: this.item.displayName }), 'Correct aria-label');
+        assert.dom('[data-test-file-list-link]').doesNotHaveClass(styles.Unviewed, 'Link is not styled as unviewed');
+        assert.dom('[data-test-file-list-link]').hasText(this.item.displayName, 'Link has correct text');
+    });
+
+    test('it renders unviewed file', async function(this: FileItemTestContext, assert) {
+        this.manager.parentFolder = 'fakeParentFolder';
+        this.item.showAsUnviewed = true;
+        await render(
+            hbs`<FileBrowser::FileItem @manager={{this.manager}} @item={{this.item}} @isDesktop={{true}} />`,
+        );
+        assert.dom('[data-test-file-list-checkout]').doesNotExist('Checkout icon does not exist');
+        assert.dom('[data-test-file-list-link]').hasAria('label',
+            t('osf-components.file-browser.view_unseen_file', { fileName: this.item.displayName }),
+            'Correct aria-label');
+        assert.dom('[data-test-file-list-link]').hasClass(styles.Unviewed, 'Link is styled as unviewed');
+        assert.dom('[data-test-file-list-link]').hasText(this.item.displayName, 'Link has correct text');
+    });
 });
diff --git a/tests/unit/packages/files/dataverse-file-test.ts b/tests/unit/packages/files/dataverse-file-test.ts
@@ -0,0 +1,29 @@
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import { t } from 'ember-intl/test-support';
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import DataverseFile from 'ember-osf-web/packages/files/dataverse-file';
+
+module('Unit | Packages | files | dataverse-file', hooks => {
+    setupTest(hooks);
+    setupMirage(hooks);
+    test('proper display names', async function(assert) {
+        const mirageFilePublished = server.create('file');
+        mirageFilePublished.extra.datasetVersion = 'latest-published';
+        const publishedFile = await this.owner.lookup('service:store').findRecord('file', mirageFilePublished.id);
+        const publishedDataverseFile = new DataverseFile(this.owner.lookup('service:current-user'), publishedFile);
+        const publishedSuffix = t('osf-components.file-browser.provider-specific-data.dataverse.latest-published');
+        assert.equal(publishedDataverseFile.displayName,
+            publishedDataverseFile.name + ' ' + publishedSuffix,
+            'Published dataverse file has correct display name');
+
+        const mirageFileDraft = server.create('file');
+        mirageFileDraft.extra.datasetVersion = 'latest';
+        const draftFile = await this.owner.lookup('service:store').findRecord('file', mirageFileDraft.id);
+        const draftDataverseFile = new DataverseFile(this.owner.lookup('service:current-user'), draftFile);
+        const draftSuffix = t('osf-components.file-browser.provider-specific-data.dataverse.latest');
+        assert.equal(draftDataverseFile.displayName,
+            draftDataverseFile.name + ' ' + draftSuffix,
+            'Draft dataverse file has correct display name');
+    });
+});
diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -1898,6 +1898,10 @@ osf-components:
             onedrive: 'OneDrive'
             owncloud: 'ownCloud'
             s3: 'Amazon S3'
+        provider-specific-data:
+            dataverse:
+                latest-published: '(Published)'
+                latest: '(Draft)'
         empty_folder: 'This folder is empty.'
         breadcrumbs: 'Breadcrumb'
         create_folder:

Original file line number	Diff line number	Diff line change
`@@ -99,6 +99,10 @@ export default abstract class File {`
`99`	`99`	`return this.fileModel.name;`
`100`	`100`	`}`
`101`	`101`
	`102`	`+ get displayName() {`
	`103`	`+ return this.fileModel.name;`
	`104`	`+ }`
	`105`	`+`
`102`	`106`	`get id() {`
`103`	`107`	`return this.fileModel.id;`
`104`	`108`	`}`