Converts FilesUsage to JSX

refs CNVS-22335

Test Plan:
  - Load up files, make sure the usage indicator in the bottom
    left corner is working.

Change-Id: I9ca11f4e8307947aa1c9411de89ae84681866e2e
Reviewed-on: https://gerrit.instructure.com/61587
Tested-by: Jenkins
Reviewed-by: Dan Minkevitch <dan@instructure.com>
QA-Review: Clare Strong <clare@instructure.com>
Product-Review: Clay Diffrient <cdiffrient@instructure.com>

app/coffeescripts/react_files/components/FilesApp.coffee

@@ -8,14 +8,13 @@ define [
   './Toolbar'
   'jsx/files/Breadcrumbs'
   'jsx/files/FolderTree'
-  './FilesUsage'
+  'jsx/files/FilesUsage'
   '../mixins/MultiselectableMixin'
   '../mixins/dndMixin'
   '../modules/filesEnv'
-], (React, ReactRouter, ReactModal, I18n, withReactElement, splitAssetString, ToolbarComponent, Breadcrumbs, FolderTree, FilesUsageComponent, MultiselectableMixin, dndMixin, filesEnv) ->
+], (React, ReactRouter, ReactModal, I18n, withReactElement, splitAssetString, ToolbarComponent, Breadcrumbs, FolderTree, FilesUsage, MultiselectableMixin, dndMixin, filesEnv) ->
 
   Toolbar = React.createFactory ToolbarComponent
-  FilesUsage = React.createFactory FilesUsageComponent
   RouteHandler = React.createFactory ReactRouter.RouteHandler
 
 

app/coffeescripts/react_files/components/FilesUsage.coffee

@@ -1,15 +1,9 @@
 define [
-  'i18n!react_files'
-  'react'
-  'compiled/util/friendlyBytes'
-  'compiled/react/shared/utils/withReactElement'
-  'jsx/shared/ProgressBar'
   '../modules/customPropTypes'
-  '../utils/toFixedDecimal'
-], (I18n, React, friendlyBytes, withReactElement, ProgressBar, customPropTypes, toFixedDecimal) ->
+], (customPropTypes) ->
 
 
-  FilesUsage = React.createClass
+  FilesUsage =
     displayName: 'FilesUsage'
     url: ->
       "/api/v1/#{@props.contextType}/#{@props.contextId}/files/quota"
@@ -29,27 +23,3 @@ define [
     componentWillUnmount: ->
       clearInterval @interval
 
-    render: withReactElement ->
-      div {},
-        if @state
-
-          percentUsed = Math.round(@state.quota_used / @state.quota * 100)
-          label = I18n.t('%{percentUsed}% of %{bytesAvailable} used', {
-            percentUsed: percentUsed,
-            bytesAvailable: friendlyBytes(@state.quota)
-          })
-
-          div className: 'grid-row ef-quota-usage',
-            div className: 'col-xs-5',
-              ProgressBar({
-                progress: percentUsed,
-                'aria-label': label
-              }),
-            div {
-              className: 'col-xs-7'
-              style: paddingLeft: '0px'
-              'aria-hidden': true
-            },
-              label
-
-

app/jsx/files/FilesUsage.jsx

@@ -0,0 +1,33 @@
+define([
+  'react',
+  'i18n!react_files',
+  'compiled/react_files/components/FilesUsage',
+  'compiled/util/friendlyBytes',
+  'jsx/shared/ProgressBar'
+], function (React, I18n, FilesUsage, friendlyBytes, ProgressBar) {
+
+  FilesUsage.render = function () {
+    if (this.state) {
+      var percentUsed = Math.round(this.state.quota_used / this.state.quota * 100);
+      var label = I18n.t('%{percentUsed}% of %{bytesAvailable} used', {
+        percentUsed: percentUsed,
+        bytesAvailable: friendlyBytes(this.state.quota)
+      });
+      return (
+        <div className='grid-row ef-quota-usage'>
+          <div className='col-xs-5'>
+            <ProgressBar progress={percentUsed} aria-label={label} />
+          </div>
+          <div className='col-xs-7' style={{paddingLeft: '0px'}} aria-hidden={true}>
+            {label}
+          </div>
+        </div>
+      );
+    } else {
+      return <div />;
+    }
+  };
+
+  return React.createClass(FilesUsage);
+
+});

spec/coffeescripts/react_files/components/FilesUsageSpec.coffee

@@ -2,7 +2,7 @@
 define [
   'react'
   'jquery'
-  'compiled/react_files/components/FilesUsage'
+  'jsx/files/FilesUsage'
 ], (React, $, FilesUsage) ->
   TestUtils = React.addons.TestUtils
   Simulate = TestUtils.Simulate