feat: open response assesment detail (problem steps) UI

.eslintrc.js

@@ -6,21 +6,22 @@ const config = createConfig('eslint', {
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
     'import/no-import-module-exports': 'off',
+    'import/prefer-default-export': 'off',
     'import/no-self-import': 'off',
-    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+    'spaced-comment': ['error', 'always', { block: { exceptions: ['*'] } }],
     'react-hooks/rules-of-hooks': 'off',
-    "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
+    'react/forbid-prop-types': ['error', { forbid: ['any', 'array'] }], // arguable object proptype is use when I do not care about the shape of the object
     'no-import-assign': 'off',
     'no-promise-executor-return': 'off',
     'import/no-cycle': 'off',
   },
 });
 
 config.settings = {
-  "import/resolver": {
+  'import/resolver': {
     node: {
-      paths: ["src", "node_modules"],
-      extensions: [".js", ".jsx"],
+      paths: ['src', 'node_modules'],
+      extensions: ['.js', '.jsx'],
     },
   },
 };

package.json

@@ -33,9 +33,10 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/paragon": "21.11.3",
+    "@openedx/paragon": "^22.0.0",
     "@redux-beacon/segment": "^1.1.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.0.0",
     "@zip.js/zip.js": "^2.4.6",
     "axios": "^0.28.0",
@@ -69,6 +70,7 @@
     "regenerator-runtime": "^0.14.0",
     "reselect": "^4.0.0",
     "util": "^0.12.4",
+    "uuid": "^9.0.1",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {

src/components/StatusBadge.jsx

@@ -25,7 +25,7 @@ export const statusVariants = StrictDict({
 /**
  * <StatusBadge />
  */
-export const StatusBadge = ({ className, status }) => {
+export const StatusBadge = ({ className, status, title }) => {
   if (!Object.keys(statusVariants).includes(status)) {
     return null;
   }
@@ -34,16 +34,18 @@ export const StatusBadge = ({ className, status }) => {
       className={className}
       variant={statusVariants[status]}
     >
-      <FormattedMessage {...messages[status]} />
+      { title || <FormattedMessage {...messages[status]} /> }
     </Badge>
   );
 };
 StatusBadge.defaultProps = {
   className: '',
+  title: '',
 };
 StatusBadge.propTypes = {
   className: PropTypes.string,
   status: PropTypes.string.isRequired,
+  title: PropTypes.string,
 };
 
 export default StatusBadge;

src/components/StatusBadge.test.jsx

@@ -6,13 +6,21 @@ import { StatusBadge } from './StatusBadge';
 
 const className = 'test-className';
 describe('StatusBadge component', () => {
-  const render = (status) => shallow(<StatusBadge className={className} status={status} />);
+  const render = (status, title) => shallow(<StatusBadge className={className} status={status} title={title} />);
   describe('behavior', () => {
     it('does not render if status does not have configured variant', () => {
       const el = render('arbitrary');
       expect(el.snapshot).toMatchSnapshot();
       expect(el.isEmptyRender()).toEqual(true);
     });
+    it('renders the title when title prop is passed', () => {
+      const title = 'Custom Title';
+      const wrapper = render('graded', title);
+
+      expect(wrapper.find('Badge').exists()).toBe(true);
+      expect(wrapper.find('Badge').prop('variant')).toBe('success');
+      expect(wrapper.text()).toContain(title);
+    });
     describe('status snapshots: loads badge with configured variant and message.', () => {
       test('`ungraded` shows primary button variant and message', () => {
         const el = render(gradingStatuses.ungraded);

src/containers/ListView/ListView.scss

@@ -25,4 +25,13 @@ span.pgn__icon.breadcrumb-arrow {
       margin-bottom: 0;
     }
   }
+  .step-problems-button-badge {
+    margin-right: 8px; 
+    padding: 0px !important;
+  }
+  .btn-view-details {
+    padding-left: 0px;
+    text-decoration: underline;
+    font-weight: bold;
+  }
 }

src/containers/ListView/SubmissionsTable.jsx

@@ -7,13 +7,15 @@ import {
   DataTable,
   TextFilter,
   MultiSelectDropdownFilter,
+  Button,
+  Hyperlink,
 } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { gradingStatuses, submissionFields } from 'data/services/lms/constants';
 import lmsMessages from 'data/services/lms/messages';
 
-import { selectors, thunkActions } from 'data/redux';
+import { selectors, thunkActions, actions } from 'data/redux';
 
 import StatusBadge from 'components/StatusBadge';
 import FilterStatusComponent from './FilterStatusComponent';
@@ -22,19 +24,27 @@ import SelectedBulkAction from './SelectedBulkAction';
 
 import messages from './messages';
 
+const problemSteps = {
+  problemStepsTraining: true,
+  problemStepsPeers: false,
+  problemStepsSelf: true,
+  problemStepsStaff: true,
+};
 /**
  * <SubmissionsTable />
  */
 export class SubmissionsTable extends React.Component {
   get gradeStatusOptions() {
-    return Object.keys(gradingStatuses).map(statusKey => ({
+    return Object.keys(gradingStatuses).map((statusKey) => ({
       name: this.translate(lmsMessages[gradingStatuses[statusKey]]),
       value: gradingStatuses[statusKey],
     }));
   }
 
   get userLabel() {
-    return this.translate(this.props.isIndividual ? messages.username : messages.teamName);
+    return this.translate(
+      this.props.isIndividual ? messages.username : messages.teamName,
+    );
   }
 
   get userAccessor() {
@@ -54,11 +64,56 @@ export class SubmissionsTable extends React.Component {
     return date.toLocaleString();
   };
 
-  formatGrade = ({ value: score }) => (
-    score === null ? '-' : `${score.pointsEarned}/${score.pointsPossible}`
+  formatGrade = ({ value: score }) => (score === null ? '-' : `${score.pointsEarned}/${score.pointsPossible}`);
+
+  formatStatus = ({ value }) => <StatusBadge status={value} />;
+
+  formatProblemStepsStatus = () => {
+    const stepProblems = Object.keys(problemSteps);
+    return (
+      <div>
+        {stepProblems.map((stepProblem) => (
+          <Button
+            variant="tertiary"
+            className="step-problems-button-badge"
+            key={stepProblem}
+          >
+            <StatusBadge
+              status={problemSteps[stepProblem] ? 'graded' : 'ungraded'}
+              title={this.translate(messages[stepProblem])}
+            />
+          </Button>
+        ))}
+      </div>
+    );
+  };
+
+  handleProblemStepsDetailClick = (data, currentRow) => {
+    const submissionUUIDs = data.map((row) => row.submissionUUID);
+    const submissionId = currentRow.original.submissionUUID;
+    const currentRowIndex = submissionUUIDs.indexOf(submissionId);
+    this.props.loadSelectionForReview(submissionUUIDs, false, submissionId);
+    this.props.setActiveSubmissionIndex(currentRowIndex);
+    this.props.setProblemStepsModal(true);
+  };
+
+  problemStepsViewDetails = ({ data, row: currentRow }) => (
+    <Button
+      variant="link"
+      className="btn-view-details"
+      data-testid="button-view-details"
+      size="sm"
+      onClick={() => this.handleProblemStepsDetailClick(data, currentRow)}
+    >
+      {this.translate(messages.actionDetail)}
+    </Button>
   );
 
-  formatStatus = ({ value }) => (<StatusBadge status={value} />);
+  emailAddressCell = ({ value }) => (
+    <Hyperlink destination="#" showLaunchIcon={false}>
+      {value}
+    </Hyperlink>
+  );
 
   translate = (...args) => this.props.intl.formatMessage(...args);
 
@@ -95,6 +150,18 @@ export class SubmissionsTable extends React.Component {
             {
               Header: this.userLabel,
               accessor: this.userAccessor,
+              filter: false,
+            },
+            {
+              Header: this.translate(messages.learnerFullname),
+              accessor: submissionFields.fullname,
+              disableFilters: true,
+            },
+            {
+              Header: this.translate(messages.emailLabel),
+              accessor: submissionFields.email,
+              Cell: this.emailAddressCell,
+              disableFilters: true,
             },
             {
               Header: this.dateSubmittedLabel,
@@ -116,6 +183,17 @@ export class SubmissionsTable extends React.Component {
               filter: 'includesValue',
               filterChoices: this.gradeStatusOptions,
             },
+            {
+              Header: this.translate(messages.problemSteps),
+              Cell: this.formatProblemStepsStatus,
+            },
+          ]}
+          additionalColumns={[
+            {
+              id: 'action',
+              Header: this.translate(messages.action),
+              Cell: this.problemStepsViewDetails,
+            },
           ]}
         >
           <DataTable.TableControlBar />
@@ -144,6 +222,8 @@ SubmissionsTable.propTypes = {
     }),
   })),
   loadSelectionForReview: PropTypes.func.isRequired,
+  setProblemStepsModal: PropTypes.func.isRequired,
+  setActiveSubmissionIndex: PropTypes.func.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
@@ -153,6 +233,8 @@ export const mapStateToProps = (state) => ({
 
 export const mapDispatchToProps = {
   loadSelectionForReview: thunkActions.grading.loadSelectionForReview,
+  setProblemStepsModal: actions.problemSteps.setOpenReviewModal,
+  setActiveSubmissionIndex: actions.grading.setActiveIndex,
 };
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SubmissionsTable));