fix: Redirection using Tab component (#360)

using Paragon Tab component for redirection instead Link

VAN-554

src/redesign/_style.scss

@@ -32,15 +32,6 @@ $accent-a-light: #c9f2f5;
   margin-bottom: 0.75rem;
 }
 
-.nav-tabs {
-  a {
-    color: $primary !important;
-    :hover {
-      color: $primary !important;
-    }
-  }
-}
-
 .sr-only {
   position: absolute;
   left: -10000px;
@@ -663,7 +654,5 @@ select.form-control {
 }
 
 .arrow-back-icon {
-  max-width: 1rem;
-  max-height: 1rem;
-  margin-top:6px;
+  margin-top:2px;
 }

src/redesign/common-components/Logistration.jsx

@@ -4,9 +4,12 @@ import { Redirect } from 'react-router-dom';
 
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Tabs, Tab } from '@edx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import {
+  Tabs,
+  Tab,
+  Icon,
+} from '@edx/paragon';
+import { ChevronLeft } from '@edx/paragon/icons';
 
 import messages from './messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
@@ -32,23 +35,24 @@ const Logistration = (props) => {
     setKey(tabKey);
   };
 
+  const tabTitle = (
+    <div className="d-flex">
+      <Icon src={ChevronLeft} className="left-icon" />
+      <span className="ml-2">
+        {selectedPage === LOGIN_PAGE
+          ? intl.formatMessage(messages['logistration.sign.in'])
+          : intl.formatMessage(messages['logistration.register'])}
+      </span>
+    </div>
+  );
+
   return (
     <div>
       {institutionLogin
         ? (
-          <span className="nav nav-tabs mt-2 pb-2">
-            <FontAwesomeIcon className="mr-2 mt-1 ml-3" icon={faChevronLeft} />
-            <Button
-              variant="link"
-              className="nav-item p-0 mb-1 logistration-button"
-              data-event-name={selectedPage === LOGIN_PAGE ? 'login' : 'register'}
-              onClick={handleInstitutionLogin}
-            >
-              {selectedPage === LOGIN_PAGE
-                ? intl.formatMessage(messages['logistration.sign.in'])
-                : intl.formatMessage(messages['logistration.register'])}
-            </Button>
-          </span>
+          <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}>
+            <Tab title={tabTitle} eventKey={selectedPage === LOGIN_PAGE ? LOGIN_PAGE : REGISTER_PAGE} />
+          </Tabs>
         )
         : (
           <>

src/redesign/forgot-password/ForgotPasswordPage.jsx

@@ -17,7 +17,7 @@ import {
   Tab,
   Icon,
 } from '@edx/paragon';
-import { ArrowBackIos } from '@edx/paragon/icons';
+import { ChevronLeft } from '@edx/paragon/icons';
 
 import { forgotPassword } from './data/actions';
 import { forgotPasswordResultSelector } from './data/selectors';
@@ -57,7 +57,7 @@ const ForgotPasswordPage = (props) => {
 
   const tabTitle = (
     <div className="d-flex">
-      <Icon src={ArrowBackIos} className="arrow-back-icon" />
+      <Icon src={ChevronLeft} className="arrow-back-icon" />
       <span className="ml-2">{intl.formatMessage(messages['sign.in.text'])}</span>
     </div>
   );

src/redesign/reset-password/ResetPasswordPage.jsx

@@ -2,13 +2,19 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
-import { Link, Redirect } from 'react-router-dom';
+import { Redirect } from 'react-router-dom';
 
-import { Form, Spinner, StatefulButton } from '@edx/paragon';
+import {
+  Form,
+  Spinner,
+  StatefulButton,
+  Tabs,
+  Tab,
+  Icon,
+} from '@edx/paragon';
+import { ChevronLeft } from '@edx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getQueryParameters, getConfig } from '@edx/frontend-platform';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 
 import messages from './messages';
 import { resetPassword, validateToken } from './data/actions';
@@ -31,6 +37,7 @@ const ResetPasswordPage = (props) => {
   const [confirmPassword, setConfirmPassword] = useState('');
   const [formErrors, setFormErrors] = useState({});
   const [errorCode, setErrorCode] = useState(null);
+  const [key, setKey] = useState('');
 
   useEffect(() => {
     if (props.status !== TOKEN_STATE.PENDING && props.status !== PASSWORD_RESET_ERROR) {
@@ -107,6 +114,13 @@ const ResetPasswordPage = (props) => {
     }
   };
 
+  const tabTitle = (
+    <div className="d-flex">
+      <Icon src={ChevronLeft} className="arrow-back-icon" />
+      <span className="ml-2">{intl.formatMessage(messages['sign.in'])}</span>
+    </div>
+  );
+
   if (props.status === TOKEN_STATE.PENDING) {
     const { token } = props.match.params;
     if (token) {
@@ -125,11 +139,12 @@ const ResetPasswordPage = (props) => {
             { siteName: getConfig().SITE_NAME })}
           </title>
         </Helmet>
-        <span className="nav nav-tabs">
-          <Link className="nav-item nav-link" to={updatePathWithQueryParams(LOGIN_PAGE)}>
-            <FontAwesomeIcon className="mr-2" icon={faChevronLeft} /> {intl.formatMessage(messages['sign.in'])}
-          </Link>
-        </span>
+        <Tabs activeKey="" id="controlled-tab" onSelect={(k) => setKey(k)}>
+          <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
+        </Tabs>
+        { key && (
+          <Redirect to={updatePathWithQueryParams(key)} />
+        )}
         <div id="main-content" className="main-content">
           <div className="mw-xs">
             <ResetPasswordFailure errorCode={errorCode} errorMsg={props.errorMsg} />

src/redesign/reset-password/tests/ResetPasswordPage.test.jsx

@@ -4,7 +4,8 @@ import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 
 import * as auth from '@edx/frontend-platform/auth';
 import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
@@ -12,12 +13,14 @@ import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
 import { resetPassword } from '../data/actions';
 import { PASSWORD_RESET, TOKEN_STATE } from '../data/constants';
+import { LOGIN_PAGE } from '../../data/constants';
 import ResetPasswordPage from '../ResetPasswordPage';
 
 jest.mock('@edx/frontend-platform/auth');
 
 const IntlResetPasswordPage = injectIntl(ResetPasswordPage);
 const mockStore = configureStore();
+const history = createMemoryHistory();
 
 describe('ResetPasswordPage', () => {
   let props = {};
@@ -155,4 +158,19 @@ describe('ResetPasswordPage', () => {
     const resetPasswordPage = mount(reduxWrapper(<IntlResetPasswordPage {...props} />));
     expect(resetPasswordPage.find('div.spinner-header')).toBeTruthy();
   });
+
+  // ******** redirection tests ********
+
+  it('by clicking on sign in tab should redirect onto login page', async () => {
+    const resetPasswordPage = mount(reduxWrapper(
+      <Router history={history}>
+        <IntlResetPasswordPage {...props} />
+      </Router>,
+    ));
+
+    await act(async () => { await resetPasswordPage.find('nav').find('a').first().simulate('click'); });
+
+    resetPasswordPage.update();
+    expect(history.location.pathname).toEqual(LOGIN_PAGE);
+  });
 });