FileProvider Modal UI for uploads

Review Request #7009 — Created March 6, 2015 and updated

Information

Review Board
master
0b72c92...

Reviewers

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 File to 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.

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?

brenniebrennie

Since one of the defaults is an object, you should be using a defaults function that returns a new object …

brenniebrennie

Could you document what this does?

brenniebrennie

If you are testing for undefined, you should explicitly do metaInfo === undefined.

brenniebrennie

Single quotes for all of these.

brenniebrennie

We don't use @param in our JS docs

brenniebrennie

No blank line here.

brenniebrennie

Blank line contains whitespace.

brenniebrennie

Only one var statement at the beginning of each function.

brenniebrennie

We only use one var statement at the top of each function

brenniebrennie

Can you line up the quote marks?

brenniebrennie

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".

daviddavid

I'm not sure I understand what "Path Content" means.

daviddavid

We should use === here.

daviddavid

Should use ===.

daviddavid

Should use ===.

daviddavid

These should just be indented 4 spaces (and probably put .text() on the next line.

daviddavid

Should use ===

daviddavid

These should just be indented 4 spaces (and probably put .text() on the next line.

daviddavid

These should just be indented 4 spaces (and probably put .text() on the next line.

daviddavid

Should use ===

daviddavid
reviewbot
  1. 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
    
    
  2. 
      
VT
reviewbot
  1. 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
    
    
  2. 
      
brennie
  1. 
      
  2. reviewboard/static/rb/js/resources/models/fileProviderNodeModel.js (Diff revision 2)
     
     
     
     
     
     
     
     
    Show all issues

    Since one of the defaults is an object, you should be using a defaults function that returns a new object each time it is called.

    Also, please document each field as to its purpose.

  3. Show all issues

    Could you document what this does?

  4. Show all issues

    If you are testing for undefined, you should explicitly do metaInfo === undefined.

  5. reviewboard/static/rb/js/views/uploadAttachmentView.js (Diff revision 2)
     
     
     
     
     
     
     
     
    Show all issues

    Single quotes for all of these.

  6. Show all issues

    We don't use @param in our JS docs

  7. Show all issues

    No blank line here.

  8. Show all issues

    Blank line contains whitespace.

  9. Show all issues

    Only one var statement at the beginning of each function.

  10. Show all issues

    We only use one var statement at the top of each function

  11. 
      
VT
reviewbot
  1. 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
    
    
  2. 
      
VT
reviewbot
  1. 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
    
    
  2. 
      
VT
reviewbot
  1. 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
    
    
  2. 
      
VT
VT
brennie
  1. 
      
  2. Show all issues

    Does this button become unclickable if the currently selected object is a folder?

    1. Not sure if this is okay. With the normal upload from local, you can click the Upload button without selecting a file, and you'll get an error message from web api. I copied the same thing, when you upload without selecting a file (or selecting a folder) and click Upload, a similar error event would occur and a message would be displayed.

    2. That sounds like us letting the user get into trouble. I suggest filing a new bug for the original issue (making sure the Upload button is disabled if no file is selected).

      Then, we should do what we can here to make sure "Upload" is only possible where it makes sense (a file is selected).

      Just my 2 cents.

    3. <p>Seeing how the Upload button is a shared resource between between both frameworks. I don't know if I should tackle both, or create a bug report for both, or some sort of combination.</p>
      <p>I forgot to mention that the error message would appear in the modal, with something like <code>"This field is required"</code>.</p>

    4. We should create a tracking bug for the first issue so that we don't forget about it, and then I suggest considering writing a patch that fixes it for both cases which will close the bug you filed.

      Give us an estimate of how hard it would be to fix the upload UI issue for both types of uploads. If it puts you outside of likelihood (and let's be honest, UCOSP finishes really really really soon), perhaps split it out and fix it in a follow-up.

    5. Created an issue (https://code.google.com/p/reviewboard/issues/detail?id=3829) and submitted a patch (https://reviews.reviewboard.org/r/7149/) for the original implementation. If that patch goes through, I would add the disable to this patch.

    6. Awesome, I'll have a look at this!

  3. reviewboard/static/rb/js/views/uploadAttachmentView.js (Diff revision 5)
     
     
     
     
     
     
     
    Show all issues

    Can you line up the quote marks?

  4. 
      
VT
reviewbot
  1. 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
    
    
  2. 
      
VT
VT
reviewbot
  1. 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
    
    
  2. 
      
chipx86
  1. 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.

  2. 
      
VT
reviewbot
  1. 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
    
    
  2. 
      
VT
reviewbot
  1. 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
    
    
  2. 
      
SU
  1. 
      
  2. reviewboard/static/rb/css/common.less (Diff revision 9)
     
     
    Show all issues

    Missing semi-colon.

  3. reviewboard/static/rb/css/common.less (Diff revision 9)
     
     
    Show all issues

    Space after :.

  4. Show all issues

    Should not have trailing comma.

  5. Show all issues

    Are <!-- and --> supposed to be present?

    1. Kept the html comments to remove the white space in between the two divs. The white space would make the modal look weird normally.

  6. Show all issues

    Not sure if inline-styles are recommended, but there should be a space after :.

    1. Added the white space. Is there any guideline with regards to inline-styles?

  7. Show all issues

    Should not have trailing comma.

  8. Show all issues

    Should this line have additional indentation?

  9. Show all issues

    Space betwen ){.

  10. Show all issues

    Is this line break deliberate?

    1. Removed line break, reordered the option variables.

  11. Show all issues

    Space before gettext.

  12. Show all issues

    Could this be !== instead?

  13. 
      
VT
Review request changed
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 _loadDir to 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:
f3b993dfb2d0d9bceb39392ad8040b08e1b91a6b
0b72c922453fd95c7e96214d2970784001ab205c
reviewbot
  1. 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
    
    
  2. 
      
david
  1. 
      
  2. Show all issues

    Please align "value" with "name".

  3. Show all issues

    I'm not sure I understand what "Path Content" means.

  4. Show all issues

    We should use === here.

  5. Show all issues

    Should use ===.

  6. Show all issues

    Should use ===.

  7. Show all issues

    These should just be indented 4 spaces (and probably put .text() on the next line.

  8. Show all issues

    Should use ===

  9. Show all issues

    These should just be indented 4 spaces (and probably put .text() on the next line.

  10. Show all issues

    These should just be indented 4 spaces (and probably put .text() on the next line.

  11. Show all issues

    Should use ===

  12.