add reactjs modal to admin cog

fixes #CNVS-14256

One the new files page written in reactjs, the file and folder item
admin cog has a 'restricted access' option. When you click this, a
modal should appear. It now does.

Test Plan
Given you've enabled the new files page for a course
As a teacher
When you navigate to the files page
You should see an admin cog when you hover over a file or folder
Then clicking on the admin cog should show you a list of options
And when you click on 'Restrict Access"
Then it should show a modal
And clicking the modals x should close the modal
And clicking the modals cancel button should close the modal

Change-Id: Id8358a35ed0d7c23ff98227af655a88a459d9174
Reviewed-on: https://gerrit.instructure.com/37791
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Clare Strong <clare@instructure.com>
Reviewed-by: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>

app/coffeescripts/react_files/components/ItemCog.coffee

@@ -3,7 +3,8 @@ define [
   '../utils/withGlobalDom'
   'compiled/models/Folder'
   'compiled/models/File'
-], (React, withGlobalDom, Folder, File) ->
+  'compiled/react_files/components/RestrictStudentAccessModal'
+], (React, withGlobalDom, Folder, File, RestrictStudentAccessModal) ->
 
   # Expects @props.model to be either a folder or a file collection/backbone model
   ItemCog = React.createClass
@@ -16,31 +17,35 @@ define [
 
     isAFolderCog: -> @props.model instanceof Folder
 
+    getInitialState: -> restrictStudentModalOpen: false
+    openRestricStudentModal: -> @setState restrictStudentModalOpen: true
+
     render: withGlobalDom ->
-      div( {className:'ef-hover-options'},
-        a( {herf:'#', style: {'color': 'black', 'margin-right': '10px'}}, i( {className:'icon-download'})),
+      div null,
+        RestrictStudentAccessModal open: @state.restrictStudentModalOpen, null
+
+        div className:'ef-hover-options',
+          a herf:'#', style: {'color': 'black', 'margin-right': '10px'},
+            i className:'icon-download'
+
+          div className:'ef-admin-gear',
+            div null,
+              a className:'al-trigger al-trigger-gray', role:'button', 'aria-haspopup':'true', 'aria-owns':'content-1', 'aria-label':'Settings', href:'#',
+                i className:'icon-settings',
+                i className:'icon-mini-arrow-down'
+
+              ul id:'content-1', className:'al-options', role:'menu', tabindex:'0', 'aria-hidden':'true', 'aria-expanded':'false', 'aria-activedescendant':'content-2',
+
+                li {},
+                  a href:'#', id:'content-2', tabindex:'-1', role:'menuitem', title:'Edit Name', 'Edit Name'
+                li {},
+                  a onClick: @openRestricStudentModal, href:'#', id:'content-3', tabindex:'-1', role:'menuitem', title:'Restrict Access', 'Restrict Access'
+                li {},
+                  a href:'#', id:'content-3', tabindex:'-1', role:'menuitem', title:'Delete', 'Delete'
+
+                (li {},
+                  a href:'#', id:'content-3', tabindex:'-1', role:'menuitem', title:'Download as Zip',
+                    'Download as Zip'
+                ) if @isAFolderCog()
 
-        div( {className:'ef-admin-gear'},
-          div(null,
-            a( {className:'al-trigger al-trigger-gray', role:'button', 'aria-haspopup':'true', 'aria-owns':'content-1', 'aria-label':'Settings', href:'#'},
-              i( {className:'icon-settings'}),
-              i( {className:'icon-mini-arrow-down'})
-            ),
 
-            ul( {id:'content-1', className:'al-options', role:'menu', tabindex:'0', 'aria-hidden':'true', 'aria-expanded':'false', 'aria-activedescendant':'content-2'},
-              li( {role:'presentation'},
-                a( {href:'#', id:'content-2', tabindex:'-1', role:'menuitem', title:'Edit Name'}, 'Edit Name')
-              ),
-              li( {role:'presentation'},
-                a( {href:'#', id:'content-3', tabindex:'-1', role:'menuitem', title:'Restrict Access'}, 'Restrict Access')
-              ),
-              li( {role:'presentation'},
-                a( {href:'#', id:'content-3', tabindex:'-1', role:'menuitem', title:'Delete'}, 'Delete')
-              ),
-              (li( {role:'presentation'},
-                a( {href:'#', id:'content-3', tabindex:'-1', role:'menuitem', title:'Download as Zip'}, 'Download as Zip')
-              ) if @isAFolderCog())
-            )
-          )
-        )
-      )

app/coffeescripts/react_files/components/RestrictStudentAccessModal.coffee

@@ -0,0 +1,31 @@
+define [
+  'react'
+  '../utils/withGlobalDom'
+], (React, withGlobalDom) ->
+  
+  RestrictStudentAccessModal = React.createClass
+
+    getDefaultProps: -> open: false
+
+    componentDidMount: ->
+      @dialog = $(@refs.dialog.getDOMNode()).dialog({ autoOpen: false })
+      @dialog.find('#cancelButton').on "click", (event) => @dialog.dialog('close')
+
+    componentWillUnmount: ->
+      @dialog.destroy()
+
+    componentWillReceiveProps: (newProps) ->
+      if newProps.open
+        @dialog.dialog('open')
+      else
+        @dialog.dialog('close')
+
+    render: withGlobalDom ->
+      form ref: 'dialog', id:"testdialog", style: {display: 'none'}, title:"Title Goes Here",
+        p null,
+          "everything should go in here"
+        div className: 'button-container',
+          button type: 'submit', className: 'btn btn-primary',
+            'Submit'
+          a id: 'cancelButton', className: 'btn dialog_closer',
+            'Cancel'