FileProvider Modal UI for uploads
Review Request #7009 — Created March 6, 2015 and updated
In order to upload files with the FileProvider framework, a UI must be implemented to allow the user to interact with their file provider account. When a user selects
Add Fileto upload a file, they will be presented with a modal with tabs to switch between two different types of upload: from local machine, from file provider. Uploading from local machine is the same old default upload mechanism.When selecting upload from file provider, they would be presented with a new window to interact with their file provider. Things they can do are:
- switch between different accounts
- select a file to upload by clicking on it
- navigate through directories by double clicking them
- click on file/directory to display metadata for it on the side
- search for items in the file providerThere's also the caption and attachment history field as well, to match the current mechanism.
Manual testing of the UI and debugging to verify files.
| Description | From | Last Updated |
|---|---|---|
|
Does this button become unclickable if the currently selected object is a folder? |
 brennie
|
|
|
Since one of the defaults is an object, you should be using a defaults function that returns a new object … |
brennie
|
|
|
Could you document what this does? |
brennie
|
|
|
If you are testing for undefined, you should explicitly do metaInfo === undefined. |
brennie
|
|
|
Single quotes for all of these. |
brennie
|
|
|
We don't use @param in our JS docs |
brennie
|
|
|
No blank line here. |
brennie
|
|
|
Blank line contains whitespace. |
brennie
|
|
|
Only one var statement at the beginning of each function. |
brennie
|
|
|
We only use one var statement at the top of each function |
brennie
|
|
|
Can you line up the quote marks? |
brennie
|
|
|
Missing semi-colon. |
SU Sunxperous | |
|
Space after :. |
SU Sunxperous | |
|
Should not have trailing comma. |
SU Sunxperous | |
|
Are <!-- and --> supposed to be present? |
SU Sunxperous | |
|
Not sure if inline-styles are recommended, but there should be a space after :. |
SU Sunxperous | |
|
Should not have trailing comma. |
SU Sunxperous | |
|
Should this line have additional indentation? |
SU Sunxperous | |
|
Space betwen ){. |
SU Sunxperous | |
|
Is this line break deliberate? |
SU Sunxperous | |
|
Space before gettext. |
SU Sunxperous | |
|
Could this be !== instead? |
SU Sunxperous | |
|
Please align "value" with "name". |
 david
|
|
|
I'm not sure I understand what "Path Content" means. |
david
|
|
|
We should use === here. |
david
|
|
|
Should use ===. |
david
|
|
|
Should use ===. |
david
|
|
|
These should just be indented 4 spaces (and probably put .text() on the next line. |
david
|
|
|
Should use === |
david
|
|
|
These should just be indented 4 spaces (and probably put .text() on the next line. |
david
|
|
|
These should just be indented 4 spaces (and probably put .text() on the next line. |
david
|
|
|
Should use === |
david
|
VT
- Change Summary:
-
Added the new models to the staticbundle.py
Fixed my backbone models for FileProvider and FileProviderNode, to work and match the new changes.
Added more functionality for File Provider UI: Changing accounts, navigating, selecting items.
Updated the styling.
- Commit:
-
d70f85e92deced13a68a53147e96fa03b1411e0c19c82cee41a2241a02cdd85aacf944a41370a3d2
- Diff:
-
Revision 2 (+501 -7)
-
Tool: Pyflakes Processed Files: reviewboard/webapi/tests/test_file_provider.py reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/css/mixins/style.less Tool: PEP8 Style Checker Processed Files: reviewboard/webapi/tests/test_file_provider.py reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/css/mixins/style.less
VT
- Change Summary:
-
Made changes as suggested by reviews
Added search logic to show search results on the options for selection. Search result is displayed after 500ms after the last key up in the search field, or display the current path when search field is empty.
Started implementation of the display of metadata as options are selected.
- Commit:
-
19c82cee41a2241a02cdd85aacf944a41370a3d2bc05d18a0e119735da92451af920e4ae1f409f8d
- Diff:
-
Revision 3 (+580 -8)
-
Tool: PEP8 Style Checker Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/js/pages/views/reviewablePageView.js reviewboard/static/rb/css/mixins/style.less Tool: Pyflakes Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/js/pages/views/reviewablePageView.js reviewboard/static/rb/css/mixins/style.less
VT
- Change Summary:
-
Made changes as suggested by reviews.
Added model for file-providers from api calls to
api/file-providers/Re-did the display of metadata, moving parts of the logic from
reviewboard/static/rb/js/resources/models/fileProviderNode.jstoreviewboard/static/rb/js/views/uploadAttachmentView.jsCleaned up the UI of metadata to follow "table-like" display
Added integration with GET calls to
api/file-providers/to help determinepath_sepfor file provider accounts, and other needed information.Added search logic to show search results on the options for selection. Search result is displayed after 500ms after the last key up in the search field, or display the current path when search is empty.
Implementation of the display of metadata as options are selected.
- Commit:
-
bc05d18a0e119735da92451af920e4ae1f409f8dce8820f3dba19a5d5baf53c1bcb206cc64c48823
- Diff:
-
Revision 4 (+686 -11)
-
Tool: Pyflakes Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderAccountModel.js reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/js/pages/views/reviewablePageView.js reviewboard/static/rb/css/mixins/style.less Tool: PEP8 Style Checker Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderAccountModel.js reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/js/pages/views/reviewablePageView.js reviewboard/static/rb/css/mixins/style.less
VT
- Change Summary:
-
Added documentation for the models. Also updated models to get the id appropriately with attrToJsonMap.
Fixed bug with metadata staying around when moving between directories and accounts.
Path for metadata section only shows for search results to help distinguish which file is which.
Changed disable of highlights/selects with node options through CSS as opposed to JavaScript.
Clean up of code, with variable/name ordering and spacing.
- Depends On:
-
- Commit:
ce8820f3dba19a5d5baf53c1bcb206cc64c488239afefd1da2f1de6615c2e93595c3c4be1c0770d5- Diff:
Revision 5 (+735 -11)
-
Tool: Pyflakes Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderAccountModel.js reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/js/pages/views/reviewablePageView.js reviewboard/static/rb/css/mixins/style.less Tool: PEP8 Style Checker Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderAccountModel.js reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/js/pages/views/reviewablePageView.js reviewboard/static/rb/css/mixins/style.less
VT
- Change Summary:
-
Updated summary, description and testing done.
- Summary:
-
[WIP] FileProvider Framework UI[WIP] FileProvider Modal UI for uploads
- Description:
-
~ In order to upload files with the FileProvider framework, a UI must be implemented to allow the user to select files from their online file provider, and as well add their account to ReviewBoard.
~ In order to upload files with the FileProvider framework, a UI must be implemented to allow the user to interact with their file provider account. When a user selects
Add Fileto upload a file, they will be presented with a modal with tabs to switch between two different types of upload: from local machine, from file provider. Uploading from local machine is the same old default upload mechanism.+ + When selecting upload from file provider, they would be presented with a new window to interact with their file provider. Things they can do are:
+ - switch between different accounts + - select a file to upload by clicking on it + - navigate through directories by double clicking them + - click on file/directory to display metadata for it on the side + - search for items in the file provider + + There's also the caption and attachment history field as well, to match the current mechanism.
- Testing Done:
-
+ Manual testing of the UI and debugging to verify files.
VT
- Change Summary:
-
Decoupled the backbone.js resources for file provider framework into another review request.
Updated in response to reviews made (lining of code, and errors).
Added new handling of displaying of error messages. It will show the correct messages for the correct displayed tab as neccessary.
Changed variable naming to include $ as neccessary for JQuery objects.
- Commit:
-
9afefd1da2f1de6615c2e93595c3c4be1c0770d58fca452767f278aa13ee378f29a27fbf1c0f80e4
-
Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less
VT
- Change Summary:
-
Changed
Depends OnandSummary. - Summary:
-
[WIP] FileProvider Modal UI for uploadsFileProvider Modal UI for uploads
VT
- Change Summary:
-
Updated documentations to be more explicit about what happens internally.
Added IDs for some inputs to allow easier look ups with JQuery, and cached common used look ups for future and faster usage.
Also changed some of the == equality checks to ===
- Commit:
-
8fca452767f278aa13ee378f29a27fbf1c0f80e46980fcb7241b184786c7d94c581c2f29de15aa7f
-
Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less
-
Just for some future inspiration (whether for you if you're continuing this, or us down the road), check out file https://www.filepicker.com/. They seem to do a good job with web-based file picker UI.
They have some demos that require linking up with an account, which I didn't want to do.. You can get a sense in the FTP section in the dialog when clicking "Pick File" at https://www.filepicker.com/documentation/file_ingestion/widgets/pick.
VT
- Change Summary:
-
Started to include disable/enable Upload button based on conditions. It checks whether it is okay to subit or not.
Removed some variables named
self(where it equals tothis, the view) as it is possible to make uses of contexts to usethis.Added more JQuery caching, and made the naming more pseudo-private.
Fixed slashes floating to right with rtl css. Adding into the html fixes it.
Removed path_sep logic.
- Commit:
-
6980fcb7241b184786c7d94c581c2f29de15aa7f01f938b77e435f49be0ad2a4bc8edf9e43f3671e
-
Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less
VT
- Change Summary:
-
Refactored the view of the select box and metadata, by extending a backbone collection and model, respectively. Each new extension is able to render its own view and have it appended/replace the current view.
Some variable clean-up and ordering. Also declared more cached JQuery variables.
Removed the function loadFileProviderAccounts, and had a fetchAll command load it instead.
Added proper sorting of the elements in a collection by using BackBone.js comparator.
- Commit:
-
01f938b77e435f49be0ad2a4bc8edf9e43f3671ef3b993dfb2d0d9bceb39392ad8040b08e1b91a6b
-
Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less
VT
- Change Summary:
-
Updated to the file picker to use single clicks as opposed to double click for navigating directories.
Only files would have their metadata shown on the right side.
The path would allow quick backwards navigation by clicking the directory in the path you would like to revisit. Each part in the path is a span that contains data to the path found in the file directory. Clicking on them (except the most recent) would make a call to the server to get a list of all files and directories found from the file provider.
Updated the css and javascript styling in response to reviews.
Updated
_loadDirto use a collection as an input as opposed to a boolean to determine which collection to use.Moved the logic of the path display update to
_navigateDir. As user's navigate, the path would update accordingly by appending to or removing from the last part of the path, or rebuild from a given path. - Commit:
-
f3b993dfb2d0d9bceb39392ad8040b08e1b91a6b0b72c922453fd95c7e96214d2970784001ab205c
-
Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/css/defs.less reviewboard/static/rb/css/common.less reviewboard/static/rb/css/mixins/style.less
Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/css/mixins/style.less Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/uploadAttachmentView.js reviewboard/static/rb/js/resources/models/fileProviderModel.js reviewboard/static/rb/css/mixins/style.less