Select editor encapsulate (#2794)

frontend/src/components/select-editor/role-eidtor.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import SelectEditor from './select-editor';
+
+const propTypes = {
+  isTextMode: PropTypes.bool.isRequired,
+  isEditIconShow: PropTypes.bool.isRequired,
+  roles: PropTypes.array.isRequired,
+  currentRole: PropTypes.string.isRequired,
+  onRoleChangedHandler: PropTypes.func.isRequired,
+};
+
+class RoleEditor extends React.Component {
+
+  translateRole = (role) => {
+    if (role === 'Admin') {
+      return gettext('Admin');
+    }
+    
+    if (role === 'Member') {
+      return gettext('Member');
+    }
+  }
+
+  render() {
+    return (
+      <SelectEditor 
+        isTextMode={this.props.isTextMode}
+        isEditIconShow={this.props.isEditIconShow}
+        options={this.props.roles}
+        currentOption={this.props.currentRole}
+        onOptionChangedHandler={this.props.onRoleChangedHandler}
+        translateOption={this.translateRole}
+      />
+    );
+  }
+}
+
+RoleEditor.propTypes = propTypes;
+
+export default RoleEditor;