sysadmin reconstrcut orgs frontend (#4074)

* sysadmin reconstruct orgs page

* [system admin] orgs: refactored it

frontend/src/components/select-editor/sysadmin-user-role-editor.js

@@ -0,0 +1,43 @@
+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,
+  roleOptions: PropTypes.array.isRequired,
+  currentRole: PropTypes.string.isRequired,
+  onRoleChanged: PropTypes.func.isRequired
+};
+
+class SysAdminUserRoleEditor extends React.Component {
+
+  translateRoles = (role) => {
+    switch (role) {
+      case 'default':
+        return gettext('Default');
+      case 'guest':
+        return gettext('Guest');
+      default:
+        return role;
+    }
+  }
+
+  render() {
+    return (
+      <SelectEditor 
+        isTextMode={this.props.isTextMode}
+        isEditIconShow={this.props.isEditIconShow}
+        options={this.props.roleOptions}
+        currentOption={this.props.currentRole}
+        onOptionChanged={this.props.onRoleChanged}
+        translateOption={this.translateRoles}
+      />
+    );
+  }
+}
+
+SysAdminUserRoleEditor.propTypes = propTypes;
+
+export default SysAdminUserRoleEditor;

frontend/src/components/select-editor/sysadmin-user-status-editor.js

@@ -0,0 +1,41 @@
+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,
+  statusOptions: PropTypes.array.isRequired,
+  currentStatus: PropTypes.string.isRequired,
+  onStatusChanged: PropTypes.func.isRequired
+};
+
+class SysAdminUserStatusEditor extends React.Component {
+
+  translateStatus = (status) => {
+    switch (status) {
+      case 'active':
+        return gettext('Active');
+      case 'inactive':
+        return gettext('Inactive');
+    }
+  }
+
+  render() {
+    return (
+      <SelectEditor
+        isTextMode={this.props.isTextMode}
+        isEditIconShow={this.props.isEditIconShow}
+        options={this.props.statusOptions}
+        currentOption={this.props.currentStatus}
+        onOptionChanged={this.props.onStatusChanged}
+        translateOption={this.translateStatus}
+      />
+    );
+  }
+}
+
+SysAdminUserStatusEditor.propTypes = propTypes;
+
+export default SysAdminUserStatusEditor;