From df811ba2cc7468e86ce4e81a26d84fedc7cf4cf1 Mon Sep 17 00:00:00 2001
From: Futa Ikeda <futa.ikeda@gmail.com>
Date: Tue, 5 Jul 2022 10:58:59 -0400
Subject: [PATCH 1/6] Prevent special chars and show error messages

---
 app/models/file.ts                            |  3 +++
 .../add-new/create-folder-modal/component.ts  | 24 ++++++++++++++++---
 .../add-new/create-folder-modal/styles.scss   | 10 ++++++++
 .../add-new/create-folder-modal/template.hbs  |  6 ++++-
 .../file-rename-modal/component.ts            | 20 +++++++++++++++-
 .../file-rename-modal/styles.scss             |  5 +++-
 .../file-rename-modal/template.hbs            |  5 ++++
 translations/en-us.yml                        |  4 ++++
 8 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/styles.scss

diff --git a/app/models/file.ts b/app/models/file.ts
index 8a0477df9b8..8cb7d2e1fc5 100644
--- a/app/models/file.ts
+++ b/app/models/file.ts
@@ -22,6 +22,9 @@ export interface FileLinks extends BaseFileLinks {
     render?: Link;
 }
 
+// Character that need to be excluded: ()<>~!@$&*:;,'"\|/?
+export const forbiddenFileNameCharacters = /[()<>~!@$&*:;,"\\|/?]/;
+
 export default class FileModel extends BaseFileItem {
     @attr() links!: FileLinks;
     @attr('fixstring') name!: string;
diff --git a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts
index 378f5d28d8b..69a5019a5b2 100644
--- a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts
+++ b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts
@@ -1,7 +1,9 @@
+import { inject as service } from '@ember/service';
+import Intl from 'ember-intl/services/intl';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { taskFor } from 'ember-concurrency-ts';
 
+import { forbiddenFileNameCharacters } from 'ember-osf-web/models/file';
 import StorageManager from 'osf-components/components/storage-provider-manager/storage-manager/component';
 
 interface Args {
@@ -10,9 +12,25 @@ interface Args {
 }
 
 export default class CreateFolderModal extends Component<Args> {
+    @service intl!: Intl;
     @tracked newFolderName = '';
 
-    get shouldDisable() {
-        return taskFor(this.args.manager.createNewFolder).isRunning || !this.newFolderName;
+    get isInvalid() {
+        const trimmedName = this.newFolderName.trim();
+        return !trimmedName || this.containsForbiddenChars;
+    }
+
+    get containsForbiddenChars() {
+        return this.newFolderName && forbiddenFileNameCharacters.test(this.newFolderName);
+    }
+
+    get errorText() {
+        let errorTextKey = 'osf-components.file-browser.create_folder.error_';
+        if (this.containsForbiddenChars) {
+            errorTextKey += 'forbidden_chars';
+        } else {
+            errorTextKey += 'message';
+        }
+        return this.intl.t(errorTextKey);
     }
 }
diff --git a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/styles.scss b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/styles.scss
new file mode 100644
index 00000000000..f76ec5d3ac0
--- /dev/null
+++ b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/styles.scss
@@ -0,0 +1,10 @@
+.RenameInput {
+    min-width: 50vw;
+    width: 100%;
+}
+
+.ErrorText {
+    color: $color-text-gray;
+    font-style: italic;
+    font-weight: 400;
+}
diff --git a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs
index f38522e20fb..a99577d5fc5 100644
--- a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs
+++ b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs
@@ -16,13 +16,17 @@
                     (action (mut this.newFolderName) '')
                 }}
                 @value={{this.newFolderName}}
+                local-class='RenameInput'
             />
+            {{#if this.isInvalid}}
+                <p local-class='ErrorText'>{{this.errorText}}</p>
+            {{/if}}
         </label>
     </dialog.main>
     <dialog.footer>
         <Button
             @type='create'
-            disabled={{this.shouldDisable}}
+            disabled={{or @manager.createNewFolder.isRunning this.isInvalid}}
             {{on 'click'
                 (queue
                     (perform @manager.createNewFolder this.newFolderName)
diff --git a/lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts b/lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts
index 8398cf05150..93dfe598375 100644
--- a/lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts
+++ b/lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts
@@ -6,6 +6,8 @@ import Toast from 'ember-toastr/services/toast';
 import { restartableTask } from 'ember-concurrency';
 import { waitFor } from '@ember/test-waiters';
 import Intl from 'ember-intl/services/intl';
+
+import { forbiddenFileNameCharacters } from 'ember-osf-web/models/file';
 import File from 'ember-osf-web/packages/files/file';
 import StorageManager from 'osf-components/components/storage-provider-manager/storage-manager/component';
 
@@ -28,12 +30,28 @@ export default class FileRenameModal extends Component<Args> {
     }
 
     get isValid() {
-        if(this.newFileName) {
+        if(this.newFileName && !this.containsForbiddenChars) {
             return (this.newFileName.trim() !== this.originalFileName && this.newFileName.trim() !== '');
         }
         return false;
     }
 
+    get containsForbiddenChars() {
+        return this.newFileName && forbiddenFileNameCharacters.test(this.newFileName);
+    }
+
+    get errorText() {
+        let errorTextKey = 'osf-components.file-browser.file_rename_modal.error_';
+        if (!this.newFileName) {
+            errorTextKey += 'empty_name';
+        } else if (this.containsForbiddenChars) {
+            errorTextKey += 'forbidden_chars';
+        } else {
+            errorTextKey += 'message';
+        }
+        return this.intl.t(errorTextKey);
+    }
+
     @action
     resetFileNameValue() {
         this.newFileName = this.originalFileName;
diff --git a/lib/osf-components/addon/components/file-browser/file-rename-modal/styles.scss b/lib/osf-components/addon/components/file-browser/file-rename-modal/styles.scss
index d6582f0d956..e09bcd88773 100644
--- a/lib/osf-components/addon/components/file-browser/file-rename-modal/styles.scss
+++ b/lib/osf-components/addon/components/file-browser/file-rename-modal/styles.scss
@@ -20,4 +20,7 @@
     }
 }
 
-
+.ErrorText {
+    color: $color-text-gray;
+    font-style: italic;
+}
diff --git a/lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs b/lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs
index 62133647146..cd9dc539068 100644
--- a/lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs
+++ b/lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs
@@ -20,6 +20,11 @@
                     dialog.close
                 }}
             />
+            {{#unless this.isValid}}
+                <p local-class='ErrorText'>
+                    {{this.errorText}}
+                </p>
+            {{/unless}}
         </div>
     </dialog.main>
     <dialog.footer>
diff --git a/translations/en-us.yml b/translations/en-us.yml
index e61056f00b4..8f2a45ee07c 100644
--- a/translations/en-us.yml
+++ b/translations/en-us.yml
@@ -1906,6 +1906,8 @@ osf-components:
             error_title: 'Failed to create folder'
             error_409: 'A folder with that name already exists'
             error_generic: 'Something went wrong. Please try again.'
+            error_message: 'Please enter a folder name.'
+            error_forbidden_chars: 'Please remove special characters from the folder name.'
         add_button_aria: 'Add files or folders here'
         upload_file: 'Upload file'
         uploading_file: 'Uploading {fileCount, plural, one {# file} other {# files}}'
@@ -1968,6 +1970,8 @@ osf-components:
             clear_aria: 'Clear input field'
             success_message: 'File successfully renamed.'
             error_message: 'Please rename the file.'
+            error_empty_name: 'Please enter a new file name.'
+            error_forbidden_chars: 'Please remove special characters from the file name.'
             retry_message: 'Rename failed.'
 
     subjects:

From b650ad5beb673d3c2fcb08785dc5b8861211badd Mon Sep 17 00:00:00 2001
From: Futa Ikeda <futa.ikeda@gmail.com>
Date: Tue, 5 Jul 2022 11:49:47 -0400
Subject: [PATCH 2/6] Tests and check ends with period

---
 .../add-new/create-folder-modal/component.ts   |  8 +++++++-
 .../file-rename-modal/component.ts             |  8 +++++++-
 .../file-rename-modal/template.hbs             |  2 +-
 .../file-rename-modal/component-test.ts        | 18 ++++++++++++++++++
 translations/en-us.yml                         |  3 ++-
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts
index 69a5019a5b2..bfb8e33d84d 100644
--- a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts
+++ b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts
@@ -17,17 +17,23 @@ export default class CreateFolderModal extends Component<Args> {
 
     get isInvalid() {
         const trimmedName = this.newFolderName.trim();
-        return !trimmedName || this.containsForbiddenChars;
+        return !trimmedName || this.containsForbiddenChars || this.endsWithDot;
     }
 
     get containsForbiddenChars() {
         return this.newFolderName && forbiddenFileNameCharacters.test(this.newFolderName);
     }
 
+    get endsWithDot() {
+        return this.newFolderName && this.newFolderName.endsWith('.');
+    }
+
     get errorText() {
         let errorTextKey = 'osf-components.file-browser.create_folder.error_';
         if (this.containsForbiddenChars) {
             errorTextKey += 'forbidden_chars';
+        } else if (this.endsWithDot) {
+            errorTextKey += 'ends_with_dot';
         } else {
             errorTextKey += 'message';
         }
diff --git a/lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts b/lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts
index 93dfe598375..9b8dfb59357 100644
--- a/lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts
+++ b/lib/osf-components/addon/components/file-browser/file-rename-modal/component.ts
@@ -30,7 +30,7 @@ export default class FileRenameModal extends Component<Args> {
     }
 
     get isValid() {
-        if(this.newFileName && !this.containsForbiddenChars) {
+        if(this.newFileName && !this.containsForbiddenChars && !this.endsWithDot) {
             return (this.newFileName.trim() !== this.originalFileName && this.newFileName.trim() !== '');
         }
         return false;
@@ -40,10 +40,16 @@ export default class FileRenameModal extends Component<Args> {
         return this.newFileName && forbiddenFileNameCharacters.test(this.newFileName);
     }
 
+    get endsWithDot() {
+        return this.newFileName && this.newFileName.endsWith('.');
+    }
+
     get errorText() {
         let errorTextKey = 'osf-components.file-browser.file_rename_modal.error_';
         if (!this.newFileName) {
             errorTextKey += 'empty_name';
+        } else if (this.endsWithDot) {
+            errorTextKey += 'ends_with_dot';
         } else if (this.containsForbiddenChars) {
             errorTextKey += 'forbidden_chars';
         } else {
diff --git a/lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs b/lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs
index cd9dc539068..bc4d88f8872 100644
--- a/lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs
+++ b/lib/osf-components/addon/components/file-browser/file-rename-modal/template.hbs
@@ -9,7 +9,7 @@
         {{t 'osf-components.file-browser.file_rename_modal.heading'}}
     </dialog.heading>
     <dialog.main>
-        <div local-class='RenameInput'>
+        <div data-test-rename-main local-class='RenameInput'>
             <Input
                 data-test-user-input
                 aria-label={{t 'osf-components.file-browser.file_rename_modal.input_aria'}}
diff --git a/tests/integration/components/file-browser/file-rename-modal/component-test.ts b/tests/integration/components/file-browser/file-rename-modal/component-test.ts
index 05b448e8043..bd3f4add7ee 100644
--- a/tests/integration/components/file-browser/file-rename-modal/component-test.ts
+++ b/tests/integration/components/file-browser/file-rename-modal/component-test.ts
@@ -64,8 +64,26 @@ module('Integration | Component | file-browser :: file-rename-modal', hooks => {
             assert.dom('[data-test-disabled-rename]').hasText(stripHtmlTags(
                 t('osf-components.file-browser.file_rename_modal.save'),
             ));
+            assert.dom('[data-test-rename-main]').containsText(
+                t('osf-components.file-browser.file_rename_modal.error_message'),
+            );
 
             await fillIn('[data-test-user-input]', 'What is the great globe itself but a Loose-Fish?');
+            assert.dom('[data-test-rename-main]').containsText(
+                t('osf-components.file-browser.file_rename_modal.error_forbidden_chars'),
+            );
+
+            await fillIn('[data-test-user-input]', '      ');
+            assert.dom('[data-test-rename-main]').containsText(
+                t('osf-components.file-browser.file_rename_modal.error_message'),
+            );
+
+            await fillIn('[data-test-user-input]', 'This will error.');
+            assert.dom('[data-test-rename-main]').containsText(
+                t('osf-components.file-browser.file_rename_modal.error_ends_with_dot'),
+            );
+
+            await fillIn('[data-test-user-input]', 'Save this file');
             assert.dom('[data-test-disabled-rename]').isEnabled('Save button is enabled');
         });
 });
diff --git a/translations/en-us.yml b/translations/en-us.yml
index 8f2a45ee07c..ab22002f65d 100644
--- a/translations/en-us.yml
+++ b/translations/en-us.yml
@@ -1907,6 +1907,7 @@ osf-components:
             error_409: 'A folder with that name already exists'
             error_generic: 'Something went wrong. Please try again.'
             error_message: 'Please enter a folder name.'
+            error_ends_with_dot: 'File name cannot end with period'
             error_forbidden_chars: 'Please remove special characters from the folder name.'
         add_button_aria: 'Add files or folders here'
         upload_file: 'Upload file'
@@ -1970,7 +1971,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 new 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.'
 

From 575aaf61650cf984fe70bcdb66a8f87d214920e5 Mon Sep 17 00:00:00 2001
From: Futa Ikeda <futa.ikeda@gmail.com>
Date: Tue, 5 Jul 2022 19:56:51 -0400
Subject: [PATCH 3/6] Test for adding new folder

---
 .../add-new/create-folder-modal/template.hbs  |  8 ++--
 .../file-browser/add-new/template.hbs         |  5 ++
 mirage/serializers/file-provider.ts           |  1 +
 mirage/serializers/file.ts                    |  1 +
 mirage/views/file.ts                          | 25 ++++++----
 .../components/file-browser/component-test.ts | 47 ++++++++++++++++++-
 6 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs
index a99577d5fc5..bfc01efa6ab 100644
--- a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs
+++ b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs
@@ -3,10 +3,10 @@
     @onClose={{queue (action (mut @isOpen) false) (action (mut this.newFolderName) '')}}
     as |dialog|
 >
-    <dialog.heading>
+    <dialog.heading data-test-create-folder-heading>
         {{t 'osf-components.file-browser.create_folder.title'}}
     </dialog.heading>
-    <dialog.main>
+    <dialog.main data-test-create-folder-main>
         <label>
             <p>{{t 'osf-components.file-browser.create_folder.new_folder_name'}}</p>
             <Input
@@ -19,12 +19,14 @@
                 local-class='RenameInput'
             />
             {{#if this.isInvalid}}
-                <p local-class='ErrorText'>{{this.errorText}}</p>
+                <p local-class='ErrorText' data-test-new-folder-error>{{this.errorText}}</p>
             {{/if}}
         </label>
     </dialog.main>
     <dialog.footer>
         <Button
+            data-test-create-folder-button
+            data-analytics-name='Create folder'
             @type='create'
             disabled={{or @manager.createNewFolder.isRunning this.isInvalid}}
             {{on 'click'
diff --git a/lib/osf-components/addon/components/file-browser/add-new/template.hbs b/lib/osf-components/addon/components/file-browser/add-new/template.hbs
index 40674f21050..7021d7e6015 100644
--- a/lib/osf-components/addon/components/file-browser/add-new/template.hbs
+++ b/lib/osf-components/addon/components/file-browser/add-new/template.hbs
@@ -6,6 +6,7 @@
         as |dropdown|
     >
         <dropdown.trigger
+            data-analytics-name='Add file or folder omnibutton'
             data-test-add-new-trigger
             aria-label={{t 'osf-components.file-browser.add_button_aria'}}
             local-class='TriggerButton {{if dropdown.isOpen 'CloseButton'}}'>
@@ -18,12 +19,16 @@
             {{will-destroy (fn @setClickableElementId '')}}
         >
             <Button
+                data-analytics-name='Open create folder modal'
+                data-test-create-folder
                 @layout='fake-link'
                 {{on 'click' (fn (mut this.createFolderModalOpen) true)}}
             >
                 {{t 'osf-components.file-browser.create_folder.title'}}
             </Button>
             <Button
+                data-analytics-name='Upload file'
+                data-test-upload-file
                 @layout='fake-link'
                 id={{uploadButtonId}}
             >
diff --git a/mirage/serializers/file-provider.ts b/mirage/serializers/file-provider.ts
index 5777b937dea..5c7bc752758 100644
--- a/mirage/serializers/file-provider.ts
+++ b/mirage/serializers/file-provider.ts
@@ -62,6 +62,7 @@ export default class FileSerializer extends ApplicationSerializer<MirageFileProv
         return {
             ...super.buildNormalLinks(model),
             upload: `${apiUrl}/v2/${pathName}/${model.targetId.id}/files/${model.name}/upload`,
+            new_folder: `${apiUrl}/v2/${pathName}/${model.targetId.id}/files/${model.name}/upload/?kind=folder`,
         };
     }
 }
diff --git a/mirage/serializers/file.ts b/mirage/serializers/file.ts
index 4514bea05d6..999c1365ebb 100644
--- a/mirage/serializers/file.ts
+++ b/mirage/serializers/file.ts
@@ -68,6 +68,7 @@ export default class FileSerializer extends ApplicationSerializer<MirageFile> {
         const { id } = model;
         return {
             ...super.buildNormalLinks(model),
+            new_folder: model.kind === 'folder' ? `${apiUrl}/wb/files/${id}/upload/?kind=folder` : undefined,
             upload: `${apiUrl}/wb/files/${id}/upload/`,
             download: `${apiUrl}/wb/files/${id}/download/`,
             move: `${apiUrl}/wb/files/${id}/move/`,
diff --git a/mirage/views/file.ts b/mirage/views/file.ts
index 1d17571eb51..f36fab414cb 100644
--- a/mirage/views/file.ts
+++ b/mirage/views/file.ts
@@ -1,6 +1,7 @@
 import { HandlerContext, ModelInstance, Response, Schema } from 'ember-cli-mirage';
 import { MirageNode } from 'ember-osf-web/mirage/factories/node';
 import DraftNode from 'ember-osf-web/models/draft-node';
+import { FileItemKinds } from 'ember-osf-web/models/base-file-item';
 import faker from 'faker';
 
 import { guid } from '../factories/utils';
@@ -9,7 +10,7 @@ import { filter, process } from './utils';
 export function uploadToFolder(this: HandlerContext, schema: Schema) {
     const uploadAttrs = this.request.requestBody;
     const { id: folderId } = this.request.params;
-    const { name } = this.request.queryParams;
+    const { name, kind } = this.request.queryParams;
     const folder = schema.files.find(folderId);
 
     const randomNum = faker.random.number();
@@ -23,13 +24,17 @@ export function uploadToFolder(this: HandlerContext, schema: Schema) {
     const uploadedFile = schema.files.create({
         guid: id,
         id,
-        size: uploadAttrs.size,
-        dateModified: uploadAttrs.lastModified,
-        lastTouched: uploadAttrs.lastModifiedDate,
+        path: id,
         target: folder.target,
         name,
+        kind: kind as FileItemKinds,
         provider: 'osfstorage',
     });
+    if (kind === FileItemKinds.File) {
+        uploadedFile.dateModified = uploadAttrs.lastModified;
+        uploadedFile.lastTouched = uploadAttrs.lastModifiedDate;
+        uploadedFile.size = uploadAttrs.size;
+    }
 
     folder.files.models.pushObject(uploadedFile);
     folder.save();
@@ -40,7 +45,7 @@ export function uploadToFolder(this: HandlerContext, schema: Schema) {
 export function uploadToRoot(this: HandlerContext, schema: Schema) {
     const uploadAttrs = this.request.requestBody;
     const { parentID, fileProviderId } = this.request.params;
-    const { name } = this.request.queryParams;
+    const { name, kind } = this.request.queryParams;
     let node;
     if (this.request.url.includes('draft_nodes')) {
         node = schema.draftNodes.find(parentID);
@@ -66,13 +71,17 @@ export function uploadToRoot(this: HandlerContext, schema: Schema) {
     const uploadedFile = schema.files.create({
         guid: id,
         id,
-        size: uploadAttrs.size,
-        dateModified: uploadAttrs.lastModified,
-        lastTouched: uploadAttrs.lastModifiedDate,
+        path: id,
         target: node,
         name,
+        kind: kind as FileItemKinds,
         provider: 'osfstorage',
     });
+    if (kind === FileItemKinds.File) {
+        uploadedFile.dateModified = uploadAttrs.lastModified;
+        uploadedFile.lastTouched = uploadAttrs.lastModifiedDate;
+        uploadedFile.size = uploadAttrs.size;
+    }
 
     rootFolder.files.models.pushObject(uploadedFile);
     rootFolder.save();
diff --git a/tests/integration/components/file-browser/component-test.ts b/tests/integration/components/file-browser/component-test.ts
index c9ddf00da5a..3f71ad3ec16 100644
--- a/tests/integration/components/file-browser/component-test.ts
+++ b/tests/integration/components/file-browser/component-test.ts
@@ -1,4 +1,4 @@
-import { render } from '@ember/test-helpers';
+import { fillIn, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { ModelInstance } from 'ember-cli-mirage';
 import { TestContext, t } from 'ember-intl/test-support';
@@ -191,4 +191,49 @@ module('Integration | Component | file-browser', hooks => {
                 'Registration help guide',
             );
         });
+
+    test('it creates new folder',
+        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]');
+            assert.dom('[data-test-upload-file]').exists('Upload file option shown');
+            assert.dom('[data-test-create-folder]').exists('Create folder option shown');
+            await click('[data-test-create-folder]');
+            assert.dom('[data-test-create-folder-heading]').containsText(
+                t('osf-components.file-browser.create_folder.title'), 'Create folder modal shown',
+            );
+            assert.dom('[data-test-create-folder-main] input').exists('Name input 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 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 cant be empty',
+            );
+            assert.dom('[data-test-create-folder-button]').isDisabled('Create folder button is still still disabled');
+
+            await fillIn('[data-test-create-folder-main] input', 'new fo/der?');
+            assert.dom('[data-test-new-folder-error]').containsText(
+                t('osf-components.file-browser.create_folder.error_forbidden_chars'), 'Folder cant have special chars',
+            );
+            assert.dom('[data-test-create-folder-button]').isDisabled('Create folder button is still still disabled');
+
+            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 click('[data-test-create-folder-button]');
+
+            assert.dom('[data-test-create-folder-heading]').doesNotExist('Create folder modal autocloses');
+            assert.dom('[data-test-file-list-item]').containsText('Shiny New Folder');
+        });
 });

From bf76f9173f482726027abd9c96f020391e12491d Mon Sep 17 00:00:00 2001
From: Futa Ikeda <futa.ikeda@gmail.com>
Date: Wed, 6 Jul 2022 10:28:42 -0400
Subject: [PATCH 4/6] More robust test assertion

---
 tests/integration/components/file-browser/component-test.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tests/integration/components/file-browser/component-test.ts b/tests/integration/components/file-browser/component-test.ts
index 3f71ad3ec16..bafcdb21b80 100644
--- a/tests/integration/components/file-browser/component-test.ts
+++ b/tests/integration/components/file-browser/component-test.ts
@@ -234,6 +234,9 @@ module('Integration | Component | file-browser', hooks => {
             await click('[data-test-create-folder-button]');
 
             assert.dom('[data-test-create-folder-heading]').doesNotExist('Create folder modal autocloses');
-            assert.dom('[data-test-file-list-item]').containsText('Shiny New Folder');
+            assert.dom(`
+                [data-test-file-list-link][aria-label="
+                    ${t('osf-components.file-browser.view_folder', {folderName: 'Shiny New Folder'})}
+                "]`).exists('Shiny new folder exists');
         });
 });

From a9aa9e6a4c87b96e5327907a8bb8206ac06a622d Mon Sep 17 00:00:00 2001
From: Futa Ikeda <futa.ikeda@gmail.com>
Date: Wed, 6 Jul 2022 10:45:07 -0400
Subject: [PATCH 5/6] fix assertion

---
 .../integration/components/file-browser/component-test.ts  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/tests/integration/components/file-browser/component-test.ts b/tests/integration/components/file-browser/component-test.ts
index bafcdb21b80..bfd62fbf1a8 100644
--- a/tests/integration/components/file-browser/component-test.ts
+++ b/tests/integration/components/file-browser/component-test.ts
@@ -234,9 +234,8 @@ module('Integration | Component | file-browser', hooks => {
             await click('[data-test-create-folder-button]');
 
             assert.dom('[data-test-create-folder-heading]').doesNotExist('Create folder modal autocloses');
-            assert.dom(`
-                [data-test-file-list-link][aria-label="
-                    ${t('osf-components.file-browser.view_folder', {folderName: 'Shiny New Folder'})}
-                "]`).exists('Shiny new folder exists');
+            const newFolderAria = t('osf-components.file-browser.view_folder', {folderName: 'Shiny New Folder'});
+            assert.dom(`[data-test-file-list-link][aria-label="${newFolderAria}"]`)
+                .exists('Shiny new folder exists');
         });
 });

From fece3f1e73440530bc4478c25a6d221f48b1b318 Mon Sep 17 00:00:00 2001
From: Futa Ikeda <futa.ikeda@gmail.com>
Date: Thu, 7 Jul 2022 10:14:03 -0400
Subject: [PATCH 6/6] Update test

---
 .../components/file-browser/component-test.ts       | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/tests/integration/components/file-browser/component-test.ts b/tests/integration/components/file-browser/component-test.ts
index bfd62fbf1a8..cb36f7b5fbb 100644
--- a/tests/integration/components/file-browser/component-test.ts
+++ b/tests/integration/components/file-browser/component-test.ts
@@ -217,15 +217,22 @@ module('Integration | Component | file-browser', hooks => {
 
             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 cant be empty',
+                t('osf-components.file-browser.create_folder.error_message'), 'Folder cannot be empty',
             );
             assert.dom('[data-test-create-folder-button]').isDisabled('Create folder button is still still disabled');
 
             await fillIn('[data-test-create-folder-main] input', 'new fo/der?');
             assert.dom('[data-test-new-folder-error]').containsText(
-                t('osf-components.file-browser.create_folder.error_forbidden_chars'), 'Folder cant have special chars',
+                t('osf-components.file-browser.create_folder.error_forbidden_chars'),
+                'Folder cannot have special chars',
             );
-            assert.dom('[data-test-create-folder-button]').isDisabled('Create folder button is still still disabled');
+            assert.dom('[data-test-create-folder-button]').isDisabled('Create folder button is still x3 disabled');
+
+            await fillIn('[data-test-create-folder-main] input', 'new folder.');
+            assert.dom('[data-test-new-folder-error]').containsText(
+                t('osf-components.file-browser.create_folder.error_ends_with_dot'), 'Folder name cannot end with a dot',
+            );
+            assert.dom('[data-test-create-folder-button]').isDisabled('Create folder button is still x4 disabled');
 
             await fillIn('[data-test-create-folder-main] input', 'Shiny New Folder');
             assert.dom('[data-test-new-folder-error]').doesNotExist('No error message shown');