feat: add allowances tab

package.json

@@ -42,7 +42,7 @@
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@openedx/paragon": "^21.13.0",
+    "@openedx/paragon": "^22.7.0",
     "@reduxjs/toolkit": "1.5.0",
     "core-js": "3.27.2",
     "prop-types": "15.8.1",

src/pages/ExamsPage/__snapshots__/index.test.jsx.snap

@@ -92,6 +92,15 @@ exports[`ExamsPage snapshots exams and attempts loaded 1`] = `
             >
               Review Dashboard
             </a>
+            <a
+              aria-selected="false"
+              class="nav-item nav-link"
+              data-rb-event-key="allowances"
+              href="#"
+              role="tab"
+            >
+              Allowances
+            </a>
             <a
               class="pgn__tab_invisible pgn__tab_more nav-item nav-link"
               href="#"
@@ -607,7 +616,7 @@ exports[`ExamsPage snapshots exams and attempts loaded 1`] = `
                             >
                               <button
                                 aria-label="Next"
-                                class="btn-icon btn-icon-primary btn-icon-md next page-link"
+                                class="btn-icon btn-icon-primary btn-icon-md previous page-link"
                                 disabled=""
                                 tabindex="-1"
                                 type="button"
@@ -738,6 +747,15 @@ exports[`ExamsPage snapshots exams and attempts loaded 1`] = `
           >
             Review Dashboard
           </a>
+          <a
+            aria-selected="false"
+            class="nav-item nav-link"
+            data-rb-event-key="allowances"
+            href="#"
+            role="tab"
+          >
+            Allowances
+          </a>
           <a
             class="pgn__tab_invisible pgn__tab_more nav-item nav-link"
             href="#"
@@ -1253,7 +1271,7 @@ exports[`ExamsPage snapshots exams and attempts loaded 1`] = `
                           >
                             <button
                               aria-label="Next"
-                              class="btn-icon btn-icon-primary btn-icon-md next page-link"
+                              class="btn-icon btn-icon-primary btn-icon-md previous page-link"
                               disabled=""
                               tabindex="-1"
                               type="button"

src/pages/ExamsPage/components/AllowanceList.jsx

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+
+import {
+  Button,
+} from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+import './AllowanceList.scss';
+
+const AllowanceList = ({ allowances }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <div className="allowances-header">
+        <h3 data-testid="allowances"> {formatMessage(messages.allowanceDashboardTabTitle)} </h3>
+        <Button variant="outline-primary" iconBefore={Add} size="sm" className="header-allowance-button">
+          {formatMessage(messages.allowanceButton)}
+        </Button>
+      </div>
+      <div className="allowances-body">
+        { allowances.length === 0
+          ? (
+            <>
+              <h4> {formatMessage(messages.noAllowancesHeader)} </h4>
+              <p> {formatMessage(messages.noAllowancesBody)} </p>
+              <Button variant="primary" iconBefore={Add}>
+                {formatMessage(messages.allowanceButton)}
+              </Button>
+            </>
+          )
+          : null }
+      </div>
+    </>
+  );
+};
+
+AllowanceList.propTypes = {
+  allowances: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default AllowanceList;

src/pages/ExamsPage/components/AllowanceList.scss

@@ -0,0 +1,18 @@
+.allowances-body {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  padding-bottom: 50px;
+}
+
+.allowances-header {
+  width: 100%;
+  padding: 10px;
+  position: relative;
+
+  .header-allowance-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}

src/pages/ExamsPage/components/AllowanceList.test.jsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import AllowanceList from './AllowanceList';
+
+// normally mocked for unit tests but required for rendering/snapshots
+// jest.unmock('react');
+
+describe('AllowanceList', () => {
+  it('Test that the AllowanceList matches snapshot', () => {
+    expect(render(<AllowanceList allowances={[]} />)).toMatchSnapshot();
+  });
+});

src/pages/ExamsPage/components/ExamSelection.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import messages from '../messages';
 
-const ExamSelection = ({ exams, onSelect }) => {
+const ExamSelection = ({ exams, onSelect, isDisabled }) => {
   const { formatMessage } = useIntl();
   const [searchText, setSearchText] = useState('');
   const getMenuItems = () => {
@@ -38,6 +38,7 @@ const ExamSelection = ({ exams, onSelect }) => {
     <div data-testid="exam_selection">
       <SelectMenu
         defaultMessage={formatMessage(messages.examSelectDropdownLabel)}
+        disabled={isDisabled}
       >
         { getMenuItems() }
       </SelectMenu>
@@ -51,6 +52,11 @@ ExamSelection.propTypes = {
     name: PropTypes.string,
   })).isRequired,
   onSelect: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+};
+
+ExamSelection.defaultProps = {
+  isDisabled: false,
 };
 
 export default ExamSelection;

src/pages/ExamsPage/components/ExamSelection.test.jsx

@@ -57,4 +57,8 @@ describe('ExamSelection', () => {
     expect(mockHandleSelectExam).toHaveBeenCalledTimes(1);
     expect(mockHandleSelectExam).toHaveBeenCalledWith(27);
   });
+  it('button disabled when isDisabled is true', () => {
+    renderWithoutError(<ExamSelection exams={defaultExams} onSelect={mockHandleSelectExam} isDisabled />);
+    expect(screen.getByText('Select an exam')).toBeDisabled();
+  });
 });