Merge pull request #7975 from overleaf/ta-settings-fixes-6

[SettingsPage] Small Fixes 6

GitOrigin-RevId: 19ad9a195a401909ac3dcc2be79d380cb61078da

services/web/frontend/js/features/settings/components/emails/actions/remove.tsx

@@ -8,6 +8,8 @@ import { postJSON } from '../../../../../infrastructure/fetch-json'
 import { UseAsyncReturnType } from '../../../../../shared/hooks/use-async'
 
 function DeleteButton({ children, disabled, onClick }: Button.ButtonProps) {
+  const { t } = useTranslation()
+
   return (
     <Button
       bsSize="small"
@@ -15,7 +17,7 @@ function DeleteButton({ children, disabled, onClick }: Button.ButtonProps) {
       disabled={disabled}
       onClick={onClick}
     >
-      {children}
+      <Icon type="trash" fw accessibilityLabel={t('remove')} />
     </Button>
   )
 }
@@ -47,7 +49,7 @@ function Remove({ userEmailData, deleteEmailAsync }: RemoveProps) {
   }
 
   if (deleteEmailAsync.isLoading) {
-    return <DeleteButton disabled>{t('deleting')}...</DeleteButton>
+    return <DeleteButton disabled />
   }
 
   return (
@@ -64,17 +66,7 @@ function Remove({ userEmailData, deleteEmailAsync }: RemoveProps) {
         <DeleteButton
           disabled={state.isLoading || userEmailData.default}
           onClick={handleRemoveUserEmail}
-        >
-          <Icon
-            type="trash"
-            fw
-            accessibilityLabel={
-              userEmailData.default
-                ? t('please_change_primary_to_remove')
-                : t('remove')
-            }
-          />
-        </DeleteButton>
+        />
       </span>
     </Tooltip>
   )

services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx

@@ -7,16 +7,29 @@ export function LeaversSurveyAlert() {
 
   const [expirationDate, setExpirationDate] = usePersistedState(
     'showInstitutionalLeaversSurveyUntil',
-    0
+    0,
+    true
   )
+
+  const [hide, setHide] = usePersistedState(
+    'hideInstitutionalLeaversSurvey',
+    false,
+    true
+  )
+
   function handleDismiss() {
     setExpirationDate(0)
+    setHide(true)
   }
 
   if (Date.now() > expirationDate) {
     return null
   }
 
+  if (hide) {
+    return null
+  }
+
   return (
     <Alert className="mb-0" bsStyle="info" onDismiss={handleDismiss}>
       <p>

services/web/frontend/js/features/settings/context/user-email-context.tsx

@@ -220,23 +220,21 @@ function useUserEmails() {
 
   const resetLeaversSurveyExpiration = useCallback(
     (deletedEmail: UserEmailData) => {
-      if (!data) {
-        return
-      }
-      const emailData = data as UserEmailData[]
       if (
         deletedEmail.emailHasInstitutionLicence ||
         deletedEmail.affiliation?.pastReconfirmDate
       ) {
-        const stillHasLicenseAccess = emailData.some(
-          userEmail => userEmail.emailHasInstitutionLicence
+        const stillHasLicenseAccess = Object.values(state.data.byId).some(
+          userEmail =>
+            userEmail.email !== deletedEmail.email &&
+            userEmail.emailHasInstitutionLicence
         )
-        if (stillHasLicenseAccess) {
+        if (!stillHasLicenseAccess) {
           setExpirationDate(Date.now() + ONE_WEEK_IN_MS)
         }
       }
     },
-    [data, setExpirationDate]
+    [state, setExpirationDate]
   )
 
   return {

services/web/frontend/stories/settings/helpers/emails.js

@@ -13,6 +13,7 @@ const fakeUsersData = [
     confirmedAt: '2022-03-09T10:59:44.139Z',
     email: 'foo@overleaf.com',
     default: true,
+    emailHasInstitutionLicence: true,
   },
   {
     confirmedAt: '2022-03-10T10:59:44.139Z',
@@ -115,4 +116,8 @@ export function setDefaultMeta() {
     hasSamlFeature: true,
     samlInitPath: 'saml/init',
   })
+  localStorage.setItem(
+    'showInstitutionalLeaversSurveyUntil',
+    (Date.now() - 1000 * 60 * 60).toString()
+  )
 }

services/web/frontend/stories/settings/leavers-survey-alert.stories.tsx

@@ -1,10 +1,11 @@
 import EmailsSection from '../../js/features/settings/components/emails-section'
 import { LeaversSurveyAlert } from '../../js/features/settings/components/leavers-survey-alert'
+import localStorage from '../../js/infrastructure/local-storage'
 
 export const SurveyAlert = () => {
   localStorage.setItem(
     'showInstitutionalLeaversSurveyUntil',
-    (Date.now() + 1000 * 60 * 60).toString()
+    Date.now() + 1000 * 60 * 60
   )
   return <LeaversSurveyAlert />
 }

services/web/test/frontend/features/settings/components/emails/emails-section-actions.test.tsx

@@ -92,16 +92,12 @@ describe('email actions - delete', function () {
     const button = await screen.findByRole('button', { name: /remove/i })
     fireEvent.click(button)
 
-    expect(screen.queryByRole('button', { name: /remove/i })).to.be.null
-
     await waitForElementToBeRemoved(() =>
-      screen.getByRole('button', { name: /deleting/i })
+      screen.queryByText(userEmailData.email)
     )
-
-    expect(screen.queryByText(userEmailData.email)).to.be.null
   })
 
-  it('shows error when making email primary', async function () {
+  it('shows error when deleting', async function () {
     fetchMock
       .get('/user/emails?ensureAffiliation=true', [userEmailData])
       .post('/user/emails/delete', 503)
@@ -110,11 +106,7 @@ describe('email actions - delete', function () {
     const button = await screen.findByRole('button', { name: /remove/i })
     fireEvent.click(button)
 
-    await waitForElementToBeRemoved(() =>
-      screen.getByRole('button', { name: /deleting/i })
-    )
-
-    screen.getByText(/sorry, something went wrong/i)
+    await screen.queryByText(/sorry, something went wrong/i)
     screen.getByRole('button', { name: /remove/i })
   })
 })

services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx

@@ -1,14 +1,13 @@
 import { expect } from 'chai'
 import { fireEvent, screen, render } from '@testing-library/react'
 import { LeaversSurveyAlert } from '../../../../../frontend/js/features/settings/components/leavers-survey-alert'
+import localStorage from '../../../../../frontend/js/infrastructure/local-storage'
 
 describe('<LeaversSurveyAlert/>', function () {
   it('should render before the expiration date', function () {
     const tomorrow = Date.now() + 1000 * 60 * 60 * 24
-    localStorage.setItem(
-      'showInstitutionalLeaversSurveyUntil',
-      tomorrow.toString()
-    )
+    localStorage.setItem('showInstitutionalLeaversSurveyUntil', tomorrow)
+    localStorage.setItem('hideInstitutionalLeaversSurvey', false)
     render(<LeaversSurveyAlert />)
     screen.getByRole('alert')
     screen.getByText(/Provide some quick feedback/)
@@ -17,20 +16,24 @@ describe('<LeaversSurveyAlert/>', function () {
 
   it('should not render after the expiration date', function () {
     const yesterday = Date.now() - 1000 * 60 * 60 * 24
-    localStorage.setItem(
-      'showInstitutionalLeaversSurveyUntil',
-      yesterday.toString()
-    )
+    localStorage.setItem('showInstitutionalLeaversSurveyUntil', yesterday)
+    localStorage.setItem('hideInstitutionalLeaversSurvey', false)
+    render(<LeaversSurveyAlert />)
+    expect(screen.queryByRole('alert')).to.be.null
+  })
+
+  it('should not render if it has been hidden', function () {
+    const tomorrow = Date.now() + 1000 * 60 * 60 * 24
+    localStorage.setItem('showInstitutionalLeaversSurveyUntil', tomorrow)
+    localStorage.setItem('hideInstitutionalLeaversSurvey', true)
     render(<LeaversSurveyAlert />)
     expect(screen.queryByRole('alert')).to.be.null
   })
 
   it('should reset the expiration date when it is closed', function () {
     const tomorrow = Date.now() + 1000 * 60 * 60 * 24
-    localStorage.setItem(
-      'showInstitutionalLeaversSurveyUntil',
-      tomorrow.toString()
-    )
+    localStorage.setItem('showInstitutionalLeaversSurveyUntil', tomorrow)
+    localStorage.setItem('hideInstitutionalLeaversSurvey', false)
     render(<LeaversSurveyAlert />)
     screen.getByRole('alert')