feat: Add plugin slot for login page

This change adds a plugin slot for the login page allowing it to be customised.

Since there was a dependency conflict between frontend-plugin-framework and the react-hooks testing package, the react-hooks testing package has been removed and a replaced with a simple mechanism for testing hooks.

Since this touched the Login Page those have also been refactored to move away from redux connect.

Author: xitij2000

package-lock.json

@@ -39,11 +39,11 @@
     "@fortawesome/free-brands-svg-icons": "6.5.2",
     "@fortawesome/free-solid-svg-icons": "6.5.2",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/frontend-plugin-framework": "^1.4.0",
     "@openedx/paragon": "^22.1.1",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.3.0",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
     "algoliasearch": "^4.14.3",
     "algoliasearch-helper": "^3.14.0",
     "classnames": "2.5.1",

package.json

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -33,7 +33,7 @@ import { thirdPartyAuthContextSelector } from '../common-components/data/selecto
 import EnterpriseSSO from '../common-components/EnterpriseSSO';
 import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
 import {
-  DEFAULT_STATE, PENDING_STATE, RESET_PAGE,
+  PENDING_STATE, RESET_PAGE,
 } from '../data/constants';
 import {
   getActivationStatus,
@@ -46,11 +46,6 @@ import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess';
 
 const LoginPage = (props) => {
   const {
-    backedUpFormData,
-    loginErrorCode,
-    loginErrorContext,
-    loginResult,
-    shouldBackupState,
     thirdPartyAuthContext: {
       providers,
       currentProvider,
@@ -59,15 +54,32 @@ const LoginPage = (props) => {
       platformName,
       errorMessage: thirdPartyErrorMessage,
     },
-    thirdPartyAuthApiStatus,
     institutionLogin,
-    showResetPasswordSuccessBanner,
-    submitState,
     // Actions
     backupFormState,
     handleInstitutionLogin,
     getTPADataFromBackend,
   } = props;
+  const {
+    backedUpFormData,
+    loginErrorCode,
+    loginErrorContext,
+    loginResult,
+    shouldBackupState,
+    showResetPasswordSuccessBanner,
+    submitState,
+    thirdPartyAuthApiStatus,
+  } = useSelector((state) => ({
+    backedUpFormData: state.login.loginFormData,
+    loginErrorCode: state.login.loginErrorCode,
+    loginErrorContext: state.login.loginErrorContext,
+    loginResult: state.login.loginResult,
+    shouldBackupState: state.login.shouldBackupState,
+    showResetPasswordSuccessBanner: state.login.showResetPasswordSuccessBanner,
+    submitState: state.login.submitState,
+    thirdPartyAuthContext: thirdPartyAuthContextSelector(state),
+    thirdPartyAuthApiStatus: state.commonComponents.thirdPartyAuthApiStatus,
+  }));
   const { formatMessage } = useIntl();
   const activationMsgType = getActivationStatus();
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
@@ -281,27 +293,15 @@ const LoginPage = (props) => {
   );
 };
 
-const mapStateToProps = state => {
-  const loginPageState = state.login;
-  return {
-    backedUpFormData: loginPageState.loginFormData,
-    loginErrorCode: loginPageState.loginErrorCode,
-    loginErrorContext: loginPageState.loginErrorContext,
-    loginResult: loginPageState.loginResult,
-    shouldBackupState: loginPageState.shouldBackupState,
-    showResetPasswordSuccessBanner: loginPageState.showResetPasswordSuccessBanner,
-    submitState: loginPageState.submitState,
-    thirdPartyAuthContext: thirdPartyAuthContextSelector(state),
-    thirdPartyAuthApiStatus: state.commonComponents.thirdPartyAuthApiStatus,
-  };
-};
+const mapStateToProps = state => ({
+  thirdPartyAuthContext: thirdPartyAuthContextSelector(state),
+});
 
 LoginPage.propTypes = {
   backedUpFormData: PropTypes.shape({
     formFields: PropTypes.shape({}),
     errors: PropTypes.shape({}),
   }),
-  loginErrorCode: PropTypes.string,
   loginErrorContext: PropTypes.shape({
     email: PropTypes.string,
     redirectUrl: PropTypes.string,
@@ -311,10 +311,6 @@ LoginPage.propTypes = {
     redirectUrl: PropTypes.string,
     success: PropTypes.bool,
   }),
-  shouldBackupState: PropTypes.bool,
-  showResetPasswordSuccessBanner: PropTypes.bool,
-  submitState: PropTypes.string,
-  thirdPartyAuthApiStatus: PropTypes.string,
   institutionLogin: PropTypes.bool.isRequired,
   thirdPartyAuthContext: PropTypes.shape({
     currentProvider: PropTypes.string,
@@ -341,13 +337,8 @@ LoginPage.defaultProps = {
       emailOrUsername: '', password: '',
     },
   },
-  loginErrorCode: null,
   loginErrorContext: {},
   loginResult: {},
-  shouldBackupState: false,
-  showResetPasswordSuccessBanner: false,
-  submitState: DEFAULT_STATE,
-  thirdPartyAuthApiStatus: PENDING_STATE,
   thirdPartyAuthContext: {
     currentProvider: null,
     errorMessage: null,

src/login/LoginPage.jsx

@@ -43,6 +43,14 @@ describe('LoginPage', () => {
   const initialState = {
     login: {
       loginResult: { success: false, redirectUrl: '' },
+      loginFormData: {
+        formFields: {
+          emailOrUsername: '', password: '',
+        },
+        errors: {
+          emailOrUsername: '', password: '',
+        },
+      },
     },
     commonComponents: {
       thirdPartyAuthApiStatus: null,