Improve fix ui

src/components/Groups/HierarchyLine/HierarchyLine.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Well } from 'react-bootstrap';
+import Icon from 'react-fontawesome';
 import GroupsNameContainer from '../../../containers/GroupsNameContainer';
 
 import './HierarchyLine.css';
 
 const HierarchyLine = ({ groupId, parentGroupsIds }) =>
   <Well bsSize="sm" className="groupParents">
+    <Icon name="group" className="slashStyle" />
     {parentGroupsIds.map(
       (groupId, i) =>
         i !== 0 &&
@@ -15,7 +17,7 @@ const HierarchyLine = ({ groupId, parentGroupsIds }) =>
           <span className="slashStyle">/</span>
         </span>
     )}
-    <GroupsNameContainer groupId={groupId} noLink />
+    <GroupsNameContainer groupId={groupId} />
   </Well>;
 
 HierarchyLine.propTypes = {

src/components/forms/EditExerciseSimpleConfigForm/EditExerciseSimpleConfigForm.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { reduxForm, getFormValues } from 'redux-form';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { Alert } from 'react-bootstrap';
 
 import FormBox from '../../widgets/FormBox';
@@ -30,7 +30,8 @@ const EditExerciseSimpleConfigForm = ({
   formErrors,
   supplementaryFiles,
   exerciseTests,
-  smartFill
+  smartFill,
+  intl: { locale }
 }) =>
   <FormBox
     title={
@@ -109,20 +110,22 @@ const EditExerciseSimpleConfigForm = ({
     <ResourceRenderer resource={supplementaryFiles.toArray()}>
       {(...files) =>
         <div>
-          {exerciseTests.map((test, idx) =>
-            <EditExerciseSimpleConfigTest
-              key={idx}
-              formValues={formValues}
-              supplementaryFiles={files}
-              testName={test.name}
-              test={'config.' + encodeTestId(test.id)}
-              testId={test.id}
-              testKey={encodeTestId(test.id)}
-              testIndex={idx}
-              testErrors={formErrors && formErrors[encodeTestId(test.id)]}
-              smartFill={smartFill(test.id, exerciseTests, files)}
-            />
-          )}
+          {exerciseTests
+            .sort((a, b) => a.name.localeCompare(b.name, locale))
+            .map((test, idx) =>
+              <EditExerciseSimpleConfigTest
+                key={idx}
+                formValues={formValues}
+                supplementaryFiles={files}
+                testName={test.name}
+                test={'config.' + encodeTestId(test.id)}
+                testId={test.id}
+                testKey={encodeTestId(test.id)}
+                testIndex={idx}
+                testErrors={formErrors && formErrors[encodeTestId(test.id)]}
+                smartFill={smartFill(test.id, exerciseTests, files)}
+              />
+            )}
         </div>}
     </ResourceRenderer>
   </FormBox>;
@@ -142,7 +145,8 @@ EditExerciseSimpleConfigForm.propTypes = {
   formErrors: PropTypes.object,
   supplementaryFiles: ImmutablePropTypes.map,
   exerciseTests: PropTypes.array,
-  smartFill: PropTypes.func.isRequired
+  smartFill: PropTypes.func.isRequired,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired
 };
 
 const FORM_NAME = 'editExerciseSimpleConfig';
@@ -193,32 +197,34 @@ const validate = formData => {
     : undefined;
 };
 
-export default connect(
-  (state, { exercise }) => {
-    const getSupplementaryFilesForExercise = createGetSupplementaryFiles(
-      exercise.supplementaryFilesIds
-    );
-    return {
-      supplementaryFiles: getSupplementaryFilesForExercise(state),
-      formValues: getFormValues(FORM_NAME)(state),
-      formErrors: exerciseConfigFormErrors(state, FORM_NAME)
-    };
-  },
-  dispatch => ({
-    smartFill: (testId, tests, files) => () =>
-      dispatch(smartFillExerciseConfigForm(FORM_NAME, testId, tests, files))
-  })
-)(
-  reduxForm({
-    form: FORM_NAME,
-    enableReinitialize: true,
-    keepDirtyOnReinitialize: false,
-    immutableProps: [
-      'formValues',
-      'supplementaryFiles',
-      'exerciseTests',
-      'handleSubmit'
-    ],
-    validate
-  })(EditExerciseSimpleConfigForm)
+export default injectIntl(
+  connect(
+    (state, { exercise }) => {
+      const getSupplementaryFilesForExercise = createGetSupplementaryFiles(
+        exercise.supplementaryFilesIds
+      );
+      return {
+        supplementaryFiles: getSupplementaryFilesForExercise(state),
+        formValues: getFormValues(FORM_NAME)(state),
+        formErrors: exerciseConfigFormErrors(state, FORM_NAME)
+      };
+    },
+    dispatch => ({
+      smartFill: (testId, tests, files) => () =>
+        dispatch(smartFillExerciseConfigForm(FORM_NAME, testId, tests, files))
+    })
+  )(
+    reduxForm({
+      form: FORM_NAME,
+      enableReinitialize: true,
+      keepDirtyOnReinitialize: false,
+      immutableProps: [
+        'formValues',
+        'supplementaryFiles',
+        'exerciseTests',
+        'handleSubmit'
+      ],
+      validate
+    })(EditExerciseSimpleConfigForm)
+  )
 );

src/components/forms/EditSimpleLimitsForm/EditSimpleLimitsForm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Alert, Table } from 'react-bootstrap';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { reduxForm } from 'redux-form';
 
 import { EditSimpleLimitsField } from '../Fields';
@@ -31,7 +31,8 @@ const EditSimpleLimitsForm = ({
   submitting,
   submitFailed,
   submitSucceeded,
-  invalid
+  invalid,
+  intl: { locale }
 }) =>
   <FormBox
     title={
@@ -122,7 +123,7 @@ const EditSimpleLimitsForm = ({
         </tr>
       </thead>
       <tbody>
-        {tests.map(test =>
+        {tests.sort((a, b) => a.name.localeCompare(b.name, locale)).map(test =>
           <tr key={test.name}>
             <th className={styles.limitsTableHeading}>
               {test.name}
@@ -181,7 +182,8 @@ EditSimpleLimitsForm.propTypes = {
   submitting: PropTypes.bool,
   submitFailed: PropTypes.bool,
   submitSucceeded: PropTypes.bool,
-  invalid: PropTypes.bool
+  invalid: PropTypes.bool,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired
 };
 
 const validate = ({ limits }) => {
@@ -232,17 +234,19 @@ const validate = ({ limits }) => {
   return errors;
 };
 
-export default reduxForm({
-  form: 'editSimpleLimits',
-  enableReinitialize: true,
-  keepDirtyOnReinitialize: false,
-  immutableProps: [
-    'environments',
-    'tests',
-    'cloneHorizontally',
-    'cloneVertically',
-    'cloneAll',
-    'handleSubmit'
-  ],
-  validate
-})(EditSimpleLimitsForm);
+export default injectIntl(
+  reduxForm({
+    form: 'editSimpleLimits',
+    enableReinitialize: true,
+    keepDirtyOnReinitialize: false,
+    immutableProps: [
+      'environments',
+      'tests',
+      'cloneHorizontally',
+      'cloneVertically',
+      'cloneAll',
+      'handleSubmit'
+    ],
+    validate
+  })(EditSimpleLimitsForm)
+);

src/containers/UsersNameContainer/UsersNameContainer.css

@@ -1,5 +1,19 @@
 .simpleName {
-  margin-left: 4px;
-  margin-right: 4px;
   white-space: nowrap;
 }
+
+.simpleName:after {
+  content: ', ';
+}
+
+.simpleName:first-of-type {
+  margin-left: 2px;
+}
+
+.simpleName:last-of-type {
+  margin-right: 3px;
+}
+
+.simpleName:last-of-type:after {
+  content: '';
+}

src/containers/UsersNameContainer/UsersNameContainer.js

@@ -11,6 +11,7 @@ import UsersName, {
   LoadingUsersName,
   FailedUsersName
 } from '../../components/Users/UsersName';
+import { LoadingIcon, FailedIcon } from '../../components/icons';
 
 import './UsersNameContainer.css';
 
@@ -35,8 +36,8 @@ class UsersNameContainer extends Component {
     return (
       <ResourceRenderer
         resource={user}
-        loading={<LoadingUsersName size={size} />}
-        failed={<FailedUsersName size={size} />}
+        loading={isSimple ? <LoadingIcon /> : <LoadingUsersName size={size} />}
+        failed={isSimple ? <FailedIcon /> : <FailedUsersName size={size} />}
       >
         {user =>
           isSimple