fix: Prevent wrong appearance of skeleton after second tab click

openedx · Mar 5, 2024 · 1227568 · 1227568
1 parent 572b678
commit 1227568
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
@@ -6,6 +6,7 @@ import {
   Hyperlink, Icon,
 } from '@openedx/paragon';
 import { Institution } from '@openedx/paragon/icons';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Skeleton from 'react-loading-skeleton';
 
@@ -18,7 +19,6 @@ import {
   RenderInstitutionButton,
   SocialAuthProviders,
 } from './index';
-import classNames from "classnames";
 
 /**
  * This component renders the Single sign-on (SSO) buttons for the providers passed.
@@ -50,9 +50,9 @@ const ThirdPartyAuth = (props) => {
       {(isLoginPage && !isEnterpriseLoginDisabled && isSocialAuthActive) && (
         <Hyperlink
           className={classNames(
-            "btn btn-link btn-sm text-body p-0",
-            { "mb-0": thirdPartyAuthApiStatus === PENDING_STATE },
-            { "mb-4": thirdPartyAuthApiStatus !== PENDING_STATE },
+            'btn btn-link btn-sm text-body p-0',
+            { 'mb-0': thirdPartyAuthApiStatus === PENDING_STATE },
+            { 'mb-4': thirdPartyAuthApiStatus !== PENDING_STATE },
           )}
           destination={enterpriseLoginURL}
         >
@@ -61,7 +61,7 @@ const ThirdPartyAuth = (props) => {
         </Hyperlink>
       )}
 
-      {thirdPartyAuthApiStatus === PENDING_STATE || true ? (
+      {thirdPartyAuthApiStatus === PENDING_STATE ? (
         <div className="mt-4">
           <Skeleton className="tpa-skeleton" height={36} count={2} />
         </div>

diff --git a/src/logistration/Logistration.jsx b/src/logistration/Logistration.jsx
@@ -70,7 +70,10 @@ const Logistration = (props) => {
     setInstitutionLogin(!institutionLogin);
   };
 
-  const handleOnSelect = (tabKey) => {
+  const handleOnSelect = (tabKey, currentTab) => {
+    if (tabKey === currentTab) {
+      return;
+    }
     sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
     props.clearThirdPartyAuthContextErrorMessage();
     if (tabKey === LOGIN_PAGE) {
@@ -122,7 +125,7 @@ const Logistration = (props) => {
       );
     }
     return (
-      <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={handleOnSelect}>
+      <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={(tabKey) => handleOnSelect(tabKey, selectedPage)}>
         <Tab title={formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
         <Tab title={formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
       </Tabs>

diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx
@@ -264,9 +264,11 @@ describe('Logistration', () => {
     fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
     expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm());
   });
+
   it('should fire action to backup login form on tab click', () => {
     store.dispatch = jest.fn(store.dispatch);
-    const { container } = render(reduxWrapper(<IntlLogistration />));
+    const props = { selectedPage: LOGIN_PAGE };
+    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
     fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
     expect(store.dispatch).toHaveBeenCalledWith(backupLoginForm());
   });
@@ -277,4 +279,12 @@ describe('Logistration', () => {
     fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
     expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
   });
+
+  it('should do nothing when user clicks on the same tab (login/register) again', () => {
+    const { container } = render(reduxWrapper(<IntlLogistration />));
+    // While staying on the registration form, clicking the register tab again
+    fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
+
+    expect(sendTrackEvent).not.toHaveBeenCalledWith('edx.bi.register.toggled', { category: 'user-engagement' });
+  });
 });