hide the file drop zone unless the user can manage files

closes OUT-4223
flag=files_dnd

test-plan:
- enable the flag at the root account level
- within a course, upload a file using the file drop zone
and create a folder
- view the course as a student
- view the folder you just created
- verify that you don't see the FileDrop billboard
on the page or when you try to drag something into the
file area

Change-Id: Ic744842781274c0d8e68a774fdce8b27e07b77ff
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/258213
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Michael Brewer-Davis <mbd@instructure.com>
Reviewed-by: Augusto Callejas <acallejas@instructure.com>
QA-Review: Brian Watson <bwatson@instructure.com>
Product-Review: Michael Brewer-Davis <mbd@instructure.com>

app/jsx/files/ShowFolder.js

@@ -174,10 +174,12 @@ ShowFolder.render = function() {
         )}
         {showNewFileUpload && hasLoadedAll && (
           <>
-            <FileUpload
-              currentFolder={this.props.currentFolder}
-              filesDirectoryRef={this.props.filesDirectoryRef}
-            />
+            {this.props.userCanAddFilesForContext && (
+              <FileUpload
+                currentFolder={this.props.currentFolder}
+                filesDirectoryRef={this.props.filesDirectoryRef}
+              />
+            )}
             <ColumnHeaders
               ref="columnHeaders"
               query={this.props.query}

app/jsx/files/__tests__/FileUpload.test.js

@@ -39,13 +39,10 @@ describe('FileUpload', () => {
 
   const defaultProps = (props = {}) => {
     const ref = document.createElement('div')
-    sinon.spy(ref, 'addEventListener')
     return merge(
       {
         filesDirectoryRef: ref,
-        currentFolder: new Folder({
-          id: 1000
-        })
+        currentFolder: new Folder()
       },
       props
     )
@@ -65,7 +62,7 @@ describe('FileUpload', () => {
 
   it('renders a FileDrop when there are no files', () => {
     const props = defaultProps()
-    sinon.stub(props.currentFolder, 'isEmpty').returns(true)
+    sandbox.stub(props.currentFolder, 'isEmpty').returns(true)
     const wrapper = mount(<FileUpload {...props} />)
     expect(wrapper.find('Billboard')).toHaveLength(1)
     expect(wrapper.find('FileDrop')).toHaveLength(1)
@@ -78,8 +75,10 @@ describe('FileUpload', () => {
     expect(wrapper.find('.FileUpload__dragging')).toHaveLength(1)
   })
 
-  it('renders with FileDrop class when the currentFolder is not empty', () => {
-    const wrapper = shallow(<FileUpload {...defaultProps()} />)
-    expect(wrapper.find('.FileDrop')).toHaveLength(0)
+  it('does not render a full sized FileDrop when the currentFolder is not empty', () => {
+    const props = defaultProps()
+    sandbox.stub(props.currentFolder, 'isEmpty').returns(false)
+    const wrapper = shallow(<FileUpload {...props} />)
+    expect(wrapper.find('.FileUpload__full')).toHaveLength(0)
   })
 })

app/jsx/files/__tests__/ShowFolder.test.js

@@ -0,0 +1,88 @@
+/*
+ * Copyright (C) 2021 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import {render} from '@testing-library/react'
+import ShowFolder from '../ShowFolder'
+import sinon from 'sinon'
+import Folder from 'compiled/models/Folder'
+import {merge} from 'lodash'
+
+const defaultProps = (props = {}) => {
+  const ref = document.createElement('div')
+  const folder = new Folder()
+  folder.files.loadedAll = true
+  folder.folders.loadedAll = true
+
+  return merge(
+    {
+      filesDirectoryRef: ref,
+      currentFolder: folder,
+      params: {},
+      areAllItemsSelected: () => {},
+      query: {},
+      pathname: '/',
+      userCanAddFilesForContext: true
+    },
+    props
+  )
+}
+
+describe('ShowFolder', () => {
+  let sandbox
+
+  beforeEach(() => {
+    window.ENV = {
+      FEATURES: {
+        files_dnd: true
+      }
+    }
+    sandbox = sinon.createSandbox()
+    sandbox.stub(Folder, 'resolvePath').returns(new Promise(() => {}))
+  })
+
+  afterEach(() => {
+    sandbox.restore()
+    window.ENV = {}
+  })
+
+  it('renders the FileUpload component if userCanAddFilesForContext is true', () => {
+    const {getByText} = render(<ShowFolder {...defaultProps()} />)
+    expect(getByText('Drop files here to upload')).toBeInTheDocument()
+  })
+
+  it('does not render the FileUpload component if userCanAddFilesForContext is false', () => {
+    const props = defaultProps({userCanAddFilesForContext: false})
+    const {queryByText} = render(<ShowFolder {...props} />)
+    expect(queryByText('Drop files here to upload')).not.toBeInTheDocument()
+  })
+
+  it('renders empty text if the folder is empty', () => {
+    const props = defaultProps()
+    sandbox.stub(props.currentFolder, 'isEmpty').returns(true)
+    const {getByText} = render(<ShowFolder {...props} />)
+    expect(getByText('This folder is empty')).toBeInTheDocument()
+  })
+
+  it('does not render empty text if the folder isnt empty', () => {
+    const props = defaultProps()
+    sandbox.stub(props.currentFolder, 'isEmpty').returns(false)
+    const {queryByText} = render(<ShowFolder {...props} />)
+    expect(queryByText('This folder is empty')).not.toBeInTheDocument()
+  })
+})

jest.config.js

@@ -28,7 +28,7 @@ module.exports = {
     '^jst/(.*)$': '<rootDir>/app/views/jst/$1',
     '^timezone$': '<rootDir>/public/javascripts/timezone_core.js',
     'node_modules-version-of-backbone': require.resolve('backbone'),
-    Backbone: '<rootDir>/public/javascripts/Backbone.js'
+    '^Backbone$': '<rootDir>/public/javascripts/Backbone.js'
   },
   roots: ['app/jsx', 'app/coffeescripts', 'public/javascripts', 'gems/plugins'],
   moduleDirectories: ['node_modules', 'public/javascripts', 'public/javascripts/vendor'],