Refactor roles into Roles.js

So that the mapping between a numerical power level and a "role" are done in one place. PowerSelector.js has been modified to use the same mapping.

src/components/views/elements/PowerSelector.js

@@ -16,17 +16,12 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-
-var roles = {
-    0: 'User',
-    50: 'Moderator',
-    100: 'Admin',
-};
+import React from 'react';
+import * as Roles from '../../../Roles';
 
 var reverseRoles = {};
-Object.keys(roles).forEach(function(key) {
-    reverseRoles[roles[key]] = key;
+Object.keys(Roles.LEVEL_ROLE_MAP).forEach(function(key) {
+    reverseRoles[Roles.LEVEL_ROLE_MAP[key]] = key;
 });
 
 module.exports = React.createClass({
@@ -49,7 +44,7 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            custom: (roles[this.props.value] === undefined),
+            custom: (Roles.LEVEL_ROLE_MAP[this.props.value] === undefined),
         };
     },
 
@@ -99,22 +94,34 @@ module.exports = React.createClass({
             selectValue = "Custom";
         }
         else {
-            selectValue = roles[this.props.value] || "Custom";
+            selectValue = Roles.LEVEL_ROLE_MAP[this.props.value] || "Custom";
         }
         var select;
         if (this.props.disabled) {
             select = <span>{ selectValue }</span>;
         }
         else {
+            // Each level must have a definition in LEVEL_ROLE_MAP
+            const levels = [0, 50, 100];
+            let options = levels.map((level) => {
+                return {
+                    value: Roles.LEVEL_ROLE_MAP[level],
+                    // Give a userDefault (users_default in the power event) of 0 but
+                    // because level !== undefined, this should never be used.
+                    text: Roles.textualPowerLevel(level, 0),
+                }
+            });
+            options.push({ value: "Custom", text: "Custom level" });
+            options = options.map((op) => {
+                return <option value={op.value}>{op.text}</option>;
+            });
+
             select =
                 <select ref="select"
                         value={ this.props.controlled ? selectValue : undefined }
                         defaultValue={ !this.props.controlled ? selectValue : undefined }
                         onChange={ this.onSelectChange }>
-                    <option value="User">User (0)</option>
-                    <option value="Moderator">Moderator (50)</option>
-                    <option value="Admin">Admin (100)</option>
-                    <option value="Custom">Custom level</option>
+                    { options }
                 </select>;
         }