Ux improvements2

.gitignore

@@ -17,3 +17,4 @@ prod/
 package-lock.json
 
 /run_server.bat
+/run_export_strings.bat

src/components/Assignments/SubmissionsTable/CommentsIcon.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import Icon from 'react-fontawesome';
+
+const createIcon = commentsStats => {
+  if (commentsStats.authoredCount === 0) {
+    return <Icon name="comment-o" />;
+  }
+  if (commentsStats.authoredCount === commentsStats.count) {
+    return <Icon name="comment" flip="horizontal" />;
+  }
+  return <Icon name="comments-o" />;
+};
+
+const CommentsIcon = ({ id, commentsStats = null }) =>
+  <span>
+    {Boolean(commentsStats) &&
+      commentsStats.count > 0 &&
+      <OverlayTrigger
+        placement="right"
+        overlay={
+          <Tooltip id={`${id}-comment`}>
+            <div>
+              <FormattedMessage
+                id="app.submissionsTable.commentsIcon.count"
+                defaultMessage="Total Comments: {count}"
+                values={{ count: commentsStats.count }}
+              />
+            </div>
+            {commentsStats.last &&
+              commentsStats.last.text &&
+              <div>
+                <FormattedMessage
+                  id="app.submissionsTable.commentsIcon.last"
+                  defaultMessage="Last Comment: {last}"
+                  values={{ last: commentsStats.last.text }}
+                />
+              </div>}
+          </Tooltip>
+        }
+      >
+        {createIcon(commentsStats)}
+      </OverlayTrigger>}
+  </span>;
+
+CommentsIcon.propTypes = {
+  id: PropTypes.string.isRequired,
+  commentsStats: PropTypes.object
+};
+
+export default CommentsIcon;

src/components/Assignments/SubmissionsTable/EvaluationFailedTableRow.js

@@ -3,23 +3,36 @@ import PropTypes from 'prop-types';
 import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import AssignmentStatusIcon from '../Assignment/AssignmentStatusIcon';
+import CommentsIcon from './CommentsIcon';
 
-const EvaluationFailedTableRow = ({ link, note, solution: { createdAt } }) =>
+const EvaluationFailedTableRow = ({
+  link,
+  note,
+  solution: { createdAt },
+  runtimeEnvironment = null,
+  commentsStats = null
+}) =>
   <tr>
     <td>
       <AssignmentStatusIcon id={link} status="evaluation-failed" />
     </td>
     <td>
+      <CommentsIcon id={link} commentsStats={commentsStats} />
+    </td>
+    <td className="text-nowrap">
       <FormattedDate value={createdAt * 1000} />
       &nbsp;
       <FormattedTime value={createdAt * 1000} />
     </td>
-    <td className="text-center">
+    <td className="text-center text-nowrap">
       <span className="text-danger">-</span>
     </td>
-    <td className="text-center">
+    <td className="text-center text-nowrap">
       <span className="text-danger">-</span>
     </td>
+    <td className="text-center text-nowrap">
+      {runtimeEnvironment ? runtimeEnvironment.name : '-'}
+    </td>
     <td>
       {note}
     </td>
@@ -35,10 +48,12 @@ const EvaluationFailedTableRow = ({ link, note, solution: { createdAt } }) =>
 
 EvaluationFailedTableRow.propTypes = {
   link: PropTypes.string.isRequired,
-  note: PropTypes.string.isRequired,
+  note: PropTypes.any.isRequired,
   solution: PropTypes.shape({
     createdAt: PropTypes.number.isRequired
-  }).isRequired
+  }).isRequired,
+  commentsStats: PropTypes.object,
+  runtimeEnvironment: PropTypes.object
 };
 
 export default EvaluationFailedTableRow;

src/components/Assignments/SubmissionsTable/FailedLoadingSubmissionTableRow.js

@@ -2,17 +2,15 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { WarningIcon } from '../../icons';
 
-const FailedLoadingSubmissionTableRow = () => (
+const FailedLoadingSubmissionTableRow = () =>
   <tr>
-    <td colSpan={5} className="text-center">
-      <WarningIcon />
-      {' '}
+    <td colSpan={8} className="text-center">
+      <WarningIcon />{' '}
       <FormattedMessage
         id="app.submissionsTable.failedLoading"
         defaultMessage="Could not load this submission."
       />
     </td>
-  </tr>
-);
+  </tr>;
 
 export default FailedLoadingSubmissionTableRow;

src/components/Assignments/SubmissionsTable/FailedSubmissionTableRow.js

@@ -9,6 +9,7 @@ import {
 import { Link } from 'react-router';
 import AssignmentStatusIcon from '../Assignment/AssignmentStatusIcon';
 import Points from './Points';
+import CommentsIcon from './CommentsIcon';
 
 const FailedSubmissionTableRow = ({
   link,
@@ -17,23 +18,28 @@ const FailedSubmissionTableRow = ({
   maxPoints,
   bonusPoints,
   solution: { createdAt },
-  accepted
+  accepted,
+  runtimeEnvironment = null,
+  commentsStats = null
 }) =>
   <tr>
     <td>
       <AssignmentStatusIcon id={link} status="failed" accepted={accepted} />
     </td>
     <td>
+      <CommentsIcon id={link} commentsStats={commentsStats} />
+    </td>
+    <td className="text-nowrap">
       <FormattedDate value={createdAt * 1000} />
       &nbsp;
       <FormattedTime value={createdAt * 1000} />
     </td>
-    <td className="text-center">
+    <td className="text-center text-nowrap">
       <span className="text-danger">
         <FormattedNumber style="percent" value={score} />
       </span>
     </td>
-    <td className="text-center">
+    <td className="text-center text-nowrap">
       <span className="text-danger">
         <Points
           points={points}
@@ -42,6 +48,9 @@ const FailedSubmissionTableRow = ({
         />
       </span>
     </td>
+    <td className="text-center text-nowrap">
+      {runtimeEnvironment ? runtimeEnvironment.name : '-'}
+    </td>
     <td>
       {note}
     </td>
@@ -57,7 +66,7 @@ const FailedSubmissionTableRow = ({
 
 FailedSubmissionTableRow.propTypes = {
   link: PropTypes.string.isRequired,
-  note: PropTypes.string.isRequired,
+  note: PropTypes.any.isRequired,
   maxPoints: PropTypes.number.isRequired,
   bonusPoints: PropTypes.number.isRequired,
   lastSubmission: PropTypes.shape({
@@ -69,7 +78,9 @@ FailedSubmissionTableRow.propTypes = {
   solution: PropTypes.shape({
     createdAt: PropTypes.number.isRequired
   }).isRequired,
-  accepted: PropTypes.bool
+  accepted: PropTypes.bool,
+  commentsStats: PropTypes.object,
+  runtimeEnvironment: PropTypes.object
 };
 
 export default FailedSubmissionTableRow;

src/components/Assignments/SubmissionsTable/LoadingSubmissionTableRow.js

@@ -2,17 +2,15 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { LoadingIcon } from '../../icons';
 
-const LoadingSubmissionTableRow = () => (
+const LoadingSubmissionTableRow = () =>
   <tr>
-    <td colSpan={5} className="text-center">
-      <LoadingIcon />
-      {' '}
+    <td colSpan={8} className="text-center">
+      <LoadingIcon />{' '}
       <FormattedMessage
         id="app.submissionsTable.loading"
         defaultMessage="Loading submitted solutions ..."
       />
     </td>
-  </tr>
-);
+  </tr>;
 
 export default LoadingSubmissionTableRow;

src/components/Assignments/SubmissionsTable/NoSolutionYetTableRow.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-const NoSolutionYetTableRow = () => (
+const NoSolutionYetTableRow = () =>
   <tr>
-    <td colSpan={5} className="text-center">
+    <td colSpan={8} className="text-center">
       <FormattedMessage
         id="app.submissionsTable.noSolutionsFound"
         defaultMessage="No solutions were submitted yet."
       />
     </td>
-  </tr>
-);
+  </tr>;
 
 export default NoSolutionYetTableRow;

src/components/Assignments/SubmissionsTable/NotEvaluatedSubmissionTableRow.js

@@ -3,12 +3,15 @@ import PropTypes from 'prop-types';
 import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import AssignmentStatusIcon from '../Assignment/AssignmentStatusIcon';
+import CommentsIcon from './CommentsIcon';
 
 const NotEvaluatedSubmissionTableRow = ({
   link,
   note,
   solution: { createdAt },
-  lastSubmission
+  lastSubmission,
+  runtimeEnvironment = null,
+  commentsStats = null
 }) =>
   <tr>
     <td>
@@ -18,12 +21,18 @@ const NotEvaluatedSubmissionTableRow = ({
       />
     </td>
     <td>
+      <CommentsIcon id={link} commentsStats={commentsStats} />
+    </td>
+    <td className="text-nowrap">
       <FormattedDate value={createdAt * 1000} />
       &nbsp;
       <FormattedTime value={createdAt * 1000} />
     </td>
-    <td className="text-center">-</td>
-    <td className="text-center">- / -</td>
+    <td className="text-center text-nowrap">-</td>
+    <td className="text-center text-nowrap">- / -</td>
+    <td className="text-center text-nowrap">
+      {runtimeEnvironment ? runtimeEnvironment.name : '-'}
+    </td>
     <td>
       {note}
     </td>
@@ -39,11 +48,13 @@ const NotEvaluatedSubmissionTableRow = ({
 
 NotEvaluatedSubmissionTableRow.propTypes = {
   link: PropTypes.string.isRequired,
-  note: PropTypes.string.isRequired,
+  note: PropTypes.any.isRequired,
   solution: PropTypes.shape({
     createdAt: PropTypes.number.isRequired
   }).isRequired,
-  lastSubmission: PropTypes.object
+  lastSubmission: PropTypes.object,
+  commentsStats: PropTypes.object,
+  runtimeEnvironment: PropTypes.object
 };
 
 export default NotEvaluatedSubmissionTableRow;