[ENG-3917] Create folder/rename file bugs (#1578)

-   Ticket: [ENG-3917]
-   Feature flag: n/a

## Purpose
- Fix bugs with rename file and create folder modals when users hit "Enter" key to submit
- Add missing translation key
## Summary of Changes
- Only submit name change/new folder when users hit "Enter" for these modals
- Add missing translation key

Author: futa-ikeda

lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs

@@ -10,11 +10,11 @@
         <label>
             <p>{{t 'osf-components.file-browser.create_folder.new_folder_name'}}</p>
             <Input
-                @enter={{queue
+                @enter={{unless this.isInvalid (queue
                     (perform @manager.createNewFolder this.newFolderName)
                     (action (mut @isOpen) false)
                     (action (mut this.newFolderName) '')
-                }}
+                )}}
                 @value={{this.newFolderName}}
                 local-class='RenameInput'
             />

lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts

@@ -68,12 +68,12 @@ export default class FileRenameModal extends Component<Args> {
     async updateFileName() {
         const newName = this.newFileName;
         const successMessage = this.intl.t('osf-components.file-browser.file_rename_modal.success_message');
-        if (!newName) {
+        if (!this.isValid) {
             return;
         }
 
         try {
-            const trimmedName = newName.trim();
+            const trimmedName = newName!.trim();
             await this.args.item.rename(trimmedName, '');
             this.toast.success(successMessage);
             this.args.manager.reload();

lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs

@@ -15,10 +15,10 @@
                 aria-label={{t 'osf-components.file-browser.file_rename_modal.input_aria'}}
                 @value={{this.newFileName}}
                 @type='text'
-                @enter={{queue
+                @enter={{if this.isValid (queue
                     (perform this.updateFileName)
                     dialog.close
-                }}
+                )}}
             />
             {{#unless this.isValid}}
                 <p local-class='ErrorText'>

tests/integration/components/file-browser/component-test.ts

@@ -1,4 +1,4 @@
-import { fillIn, render } from '@ember/test-helpers';
+import { fillIn, render, triggerKeyEvent } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { ModelInstance } from 'ember-cli-mirage';
 import { TestContext, t } from 'ember-intl/test-support';
@@ -245,4 +245,41 @@ module('Integration | Component | file-browser', hooks => {
             assert.dom(`[data-test-file-list-link][aria-label="${newFolderAria}"]`)
                 .exists('Shiny new folder exists');
         });
+
+    test('it creates new folder using enter key',
+        async function(this: FileBrowserTestContext, assert) {
+            const node = await this.store.findRecord('node', this.mirageNode.id);
+            const storageProviders = await node.files;
+            this.osfStorageProvider = storageProviders.toArray()[0];
+            await render(hbs`
+                <StorageProviderManager::StorageManager @provider={{this.osfStorageProvider}} as |manager|>
+                    <FileBrowser @manager={{manager}} @enableUpload={{true}} @selectable={{true}} />
+                </StorageProviderManager::StorageManager>
+            `);
+            await click('[data-test-add-new-trigger]');
+            await click('[data-test-create-folder]');
+            assert.dom('[data-test-create-folder-heading]').exists('Create folder modal shown');
+            assert.dom('[data-test-new-folder-error]').containsText(
+                t('osf-components.file-browser.create_folder.error_message'), 'Message shown to enter folder name',
+            );
+            assert.dom('[data-test-create-folder-button]').isDisabled('Create folder button is disabled');
+            await triggerKeyEvent('[data-test-create-folder-main] input', 'keyup', 'Enter');
+            assert.dom('[data-test-create-folder-heading]')
+                .exists('Create folder modal still visible after enter when folder name is empty');
+
+            await fillIn('[data-test-create-folder-main] input', '     ');
+            assert.dom('[data-test-new-folder-error]').containsText(
+                t('osf-components.file-browser.create_folder.error_message'), 'Folder cannot be empty',
+            );
+            await triggerKeyEvent('[data-test-create-folder-main] input', 'keyup', 'Enter');
+            assert.dom('[data-test-create-folder-heading]')
+                .exists('Create folder modal still visible after enter when folder name is just spaces');
+
+            await fillIn('[data-test-create-folder-main] input', 'Shiny New Folder');
+            assert.dom('[data-test-new-folder-error]').doesNotExist('No error message shown');
+            assert.dom('[data-test-create-folder-button]').isEnabled('Create folder button is enabled');
+            await triggerKeyEvent('[data-test-create-folder-main] input', 'keyup', 'Enter');
+            assert.dom('[data-test-create-folder-heading]')
+                .doesNotExist('Create folder modal closes after enter when folder name is valid');
+        });
 });

tests/integration/components/file-browser/file-rename-modal/component-test.ts

@@ -1,4 +1,4 @@
-import { render } from '@ember/test-helpers';
+import { render, triggerKeyEvent } from '@ember/test-helpers';
 import fillIn from '@ember/test-helpers/dom/fill-in';
 import { hbs } from 'ember-cli-htmlbars';
 import { t, TestContext } from 'ember-intl/test-support';
@@ -16,15 +16,18 @@ interface FileItem {
     links: Links;
     dateModified: string;
     id: string;
+    rename: () => void;
 }
 
 interface Manager {
     parentFolder: any;
+    reload: () => void;
 }
 
 interface FileRenameModalTestContext extends TestContext {
     manager: Manager;
     item: FileItem;
+    isOpen: boolean;
 }
 
 module('Integration | Component | file-browser :: file-rename-modal', hooks => {
@@ -38,10 +41,13 @@ module('Integration | Component | file-browser :: file-rename-modal', hooks => {
                 download: 'thisisafakedownloadlink',
             },
             dateModified: Date(),
+            rename: () => {/* noop */},
         };
         this.manager = {
             parentFolder: null,
+            reload: () => {/* noop */},
         };
+        this.isOpen = true;
     });
 
     test('it renders with a disabled button when name is the same, button enabled whem name is different',
@@ -86,4 +92,32 @@ module('Integration | Component | file-browser :: file-rename-modal', hooks => {
             await fillIn('[data-test-user-input]', 'Save this file');
             assert.dom('[data-test-disabled-rename]').isEnabled('Save button is enabled');
         });
+
+    test('enter key triggers rename',
+        async function(this: FileRenameModalTestContext, assert): Promise<void> {
+            // check toast in lieu of modal closing
+            await render(
+                hbs`<FileBrowser::FileRenameModal @manager={{this.manager}} @item={{this.item}} @isOpen={{true}}/>`,
+            );
+            assert.dom('[data-test-file-rename-modal]').exists('File rename modal exists');
+            assert.dom('[data-test-user-input]').hasValue(this.item.name, 'File name pre-populated');
+            assert.dom('[data-test-disabled-rename]').isDisabled('Save button is disabled');
+            assert.dom('[data-test-rename-main]').containsText(
+                t('osf-components.file-browser.file_rename_modal.error_message'),
+            );
+            await triggerKeyEvent('[data-test-user-input]', 'keydown', 'Enter');
+            assert.dom('#toast-container', document as any).doesNotExist('Rename not triggered when no name change');
+
+            await fillIn('[data-test-user-input]', '');
+            assert.dom('[data-test-rename-main]').containsText(
+                t('osf-components.file-browser.file_rename_modal.error_empty_name'),
+            );
+            await triggerKeyEvent('[data-test-user-input]', 'keydown', 'Enter');
+            assert.dom('#toast-container', document as any).doesNotExist('Rename not triggered when name is empty');
+
+            await fillIn('[data-test-user-input]', 'New File Name');
+            assert.dom('[data-test-disabled-rename]').isEnabled('Save button is now enabled');
+            await triggerKeyEvent('[data-test-user-input]', 'keydown', 'Enter');
+            assert.dom('#toast-container', document as any).doesNotExist('Rename is fired');
+        });
 });

translations/en-us.yml

@@ -1975,6 +1975,7 @@ osf-components:
             clear_aria: 'Clear input field'
             success_message: 'File successfully renamed.'
             error_message: 'Please rename the file.'
+            error_empty_name: 'Please enter a file name.'
             error_ends_with_dot: 'File name cannot end with a period.'
             error_forbidden_chars: 'Please remove special characters from the file name.'
             retry_message: 'Rename failed.'