From bce645b0f1865dd6a9a54b8d90e71503058868e5 Mon Sep 17 00:00:00 2001
From: Miguel Serrano <mserranom@users.noreply.github.com>
Date: Mon, 30 May 2022 15:47:42 +0200
Subject: [PATCH] Merge pull request #8164 from
 overleaf/msm-add-disabled-state-link-accounts

[Settings] Disable "Link Account" buttons after click

GitOrigin-RevId: 528acdebe4812f1bf81fa70f1d9ce810ce5170c3
---
 .../emails/add-email/sso-linking-info.tsx     | 20 ++++++++++++++----
 .../settings/components/emails/row.tsx        | 21 ++++++++++++++-----
 .../components/emails/emails-row.test.tsx     |  5 +++--
 .../emails-section-add-new-email.test.tsx     |  2 +-
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx
index 9a4cbc530a..280d13e279 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+import { Button } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { DomainInfo } from './input'
 import { ExposedSettings } from '../../../../../../../types/exposed-settings'
@@ -12,6 +14,14 @@ function SsoLinkingInfo({ domainInfo, email }: SSOLinkingInfoProps) {
   const { samlInitPath } = getMeta('ol-ExposedSettings') as ExposedSettings
   const { t } = useTranslation()
 
+  const [linkAccountsButtonDisabled, setLinkAccountsButtonDisabled] =
+    useState(false)
+
+  function handleLinkAccountsButtonClick() {
+    setLinkAccountsButtonDisabled(true)
+    window.location.href = `${samlInitPath}?university_id=${domainInfo.university.id}&auto=/user/settings&email=${email}`
+  }
+
   return (
     <>
       <p className="affiliations-table-label">{domainInfo.university.name}</p>
@@ -36,12 +46,14 @@ function SsoLinkingInfo({ domainInfo, email }: SSOLinkingInfoProps) {
           {t('find_out_more_about_institution_login')}.
         </a>
       </p>
-      <a
-        className="btn-sm btn btn-primary btn-link-accounts"
-        href={`${samlInitPath}?university_id=${domainInfo.university.id}&auto=/user/settings&email=${email}`}
+      <Button
+        bsStyle="primary"
+        className="btn-sm btn-link-accounts"
+        disabled={linkAccountsButtonDisabled}
+        onClick={handleLinkAccountsButtonClick}
       >
         {t('link_accounts_and_add_email')}
-      </a>
+      </Button>
     </>
   )
 }
diff --git a/services/web/frontend/js/features/settings/components/emails/row.tsx b/services/web/frontend/js/features/settings/components/emails/row.tsx
index 7d093a7b44..8c5643e546 100644
--- a/services/web/frontend/js/features/settings/components/emails/row.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/row.tsx
@@ -1,6 +1,7 @@
+import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { UserEmailData } from '../../../../../../types/user-email'
-import { Row, Col } from 'react-bootstrap'
+import { Button, Row, Col } from 'react-bootstrap'
 import Email from './email'
 import InstitutionAndRole from './institution-and-role'
 import EmailCell from './cell'
@@ -59,6 +60,14 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
   const { t } = useTranslation()
   const { state } = useUserEmailsContext()
 
+  const [linkAccountsButtonDisabled, setLinkAccountsButtonDisabled] =
+    useState(false)
+
+  function handleLinkAccountsButtonClick() {
+    setLinkAccountsButtonDisabled(true)
+    window.location.href = `${samlInitPath}?university_id=${userEmailData.affiliation?.institution?.id}&auto=/user/settings&email=${userEmailData.email}`
+  }
+
   if (
     !userEmailData.samlProviderId &&
     institutionAlreadyLinked(state, userEmailData)
@@ -127,12 +136,14 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
           </Col>
           <Col md={3} className="text-md-right">
             <EmailCell>
-              <a
-                className="btn-sm btn btn-info btn-link-accounts"
-                href={`${samlInitPath}?university_id=${userEmailData.affiliation?.institution?.id}&auto=/user/settings&email=${userEmailData.email}`}
+              <Button
+                bsStyle="info"
+                className="btn-sm btn-link-accounts"
+                disabled={linkAccountsButtonDisabled}
+                onClick={handleLinkAccountsButtonClick}
               >
                 {t('link_accounts')}
-              </a>
+              </Button>
             </EmailCell>
           </Col>
         </Row>
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
index ce1b1d51f7..e14b0c9f10 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
+++ b/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
@@ -89,7 +89,7 @@ describe('<EmailsRow/>', function () {
         getByTextContent(
           'You can now link your Overleaf account to your Overleaf institutional account.'
         )
-        screen.getByRole('link', { name: 'Link Accounts' })
+        screen.getByRole('button', { name: 'Link Accounts' })
       })
     })
 
@@ -106,7 +106,8 @@ describe('<EmailsRow/>', function () {
         getByTextContent(
           'You can log in to Overleaf through your Overleaf institutional login.'
         )
-        expect(screen.queryByRole('link', { name: 'Link Accounts' })).to.be.null
+        expect(screen.queryByRole('button', { name: 'Link Accounts' })).to.be
+          .null
       })
     })
   })
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx
index b0e142b3cc..8e49d3462f 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx
+++ b/services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx
@@ -201,7 +201,7 @@ describe('<EmailsSection />', function () {
       target: { value: 'user@autocomplete.edu' },
     })
 
-    await screen.findByRole('link', { name: 'Link Accounts and Add Email' })
+    await screen.findByRole('button', { name: 'Link Accounts and Add Email' })
   })
 
   it('adds new email address with existing institution and custom departments', async function () {