From 3580ec6db3cb00c3382a198a4ba69b719661b230 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= Date: Tue, 24 May 2022 09:47:08 +0200 Subject: [PATCH] Merge pull request #8029 from overleaf/ta-settings-fix-7 [SettingsPage] Small Fixes 7 GitOrigin-RevId: 2716fe13af3f5f6b56d6bba47505fad75ba1adbf --- .../web/frontend/extracted-translations.json | 2 +- .../settings/components/emails-section.tsx | 2 +- .../settings/components/emails/add-email.tsx | 5 +++- .../components/emails/add-email/input.tsx | 10 +++++-- .../components/leavers-survey-alert.tsx | 14 ++++----- .../settings/components/linking-section.tsx | 6 ++-- .../settings/context/user-email-context.tsx | 14 +++++---- .../stories/settings/helpers/emails.js | 1 + .../settings/leavers-survey-alert.stories.tsx | 7 ++++- .../frontend/stories/settings/page.stories.js | 2 ++ services/web/locales/en.json | 3 +- .../emails/add-email-input.test.tsx | 29 +++++++++++++++++-- .../components/leavers-survey-alert.test.tsx | 17 ++++++++--- .../components/linking-section.test.tsx | 4 +-- 14 files changed, 85 insertions(+), 31 deletions(-) diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index b01919d21a..a57f1ace3c 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -355,7 +355,7 @@ "reconnect": "", "redirect_to_editor": "", "reference_error_relink_hint": "", - "reference_sync": "", + "reference_managers": "", "references_search_hint": "", "refresh": "", "refresh_page_after_linking_dropbox": "", diff --git a/services/web/frontend/js/features/settings/components/emails-section.tsx b/services/web/frontend/js/features/settings/components/emails-section.tsx index 8439a2966c..f8328af291 100644 --- a/services/web/frontend/js/features/settings/components/emails-section.tsx +++ b/services/web/frontend/js/features/settings/components/emails-section.tsx @@ -31,7 +31,7 @@ function EmailsSectionContent() { {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - +

<> diff --git a/services/web/frontend/js/features/settings/components/emails/add-email.tsx b/services/web/frontend/js/features/settings/components/emails/add-email.tsx index f8b594dcd7..823b0ae845 100644 --- a/services/web/frontend/js/features/settings/components/emails/add-email.tsx +++ b/services/web/frontend/js/features/settings/components/emails/add-email.tsx @@ -114,7 +114,10 @@ function AddEmail() { - + {isSsoAvailable(newEmailMatchedInstitution) ? ( diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/input.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/input.tsx index 3e1805ebe0..ba812af277 100644 --- a/services/web/frontend/js/features/settings/components/emails/add-email/input.tsx +++ b/services/web/frontend/js/features/settings/components/emails/add-email/input.tsx @@ -40,9 +40,10 @@ export function clearDomainCache() { type InputProps = { onChange: (value: string, institution?: InstitutionInfo) => void + handleAddNewEmail: () => void } -function Input({ onChange }: InputProps) { +function Input({ onChange, handleAddNewEmail }: InputProps) { const { signal } = useAbortController() const inputRef = useRef(null) @@ -126,6 +127,11 @@ function Input({ onChange }: InputProps) { if (suggestion) { setInputValueAndResetSuggestion() + } else { + const match = matchLocalAndDomain(inputValue) + if (match.local && match.domain) { + handleAddNewEmail() + } } } @@ -134,7 +140,7 @@ function Input({ onChange }: InputProps) { setInputValueAndResetSuggestion() } }, - [suggestion] + [inputValue, suggestion, handleAddNewEmail] ) useEffect(() => { diff --git a/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx b/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx index c4ece7dc12..ed4d39c50f 100644 --- a/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx +++ b/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx @@ -1,15 +1,15 @@ import { Alert } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import usePersistedState from '../../../shared/hooks/use-persisted-state' +import { useUserEmailsContext } from '../context/user-email-context' export function LeaversSurveyAlert() { const { t } = useTranslation() - const [expirationDate, setExpirationDate] = usePersistedState( - 'showInstitutionalLeaversSurveyUntil', - 0, - true - ) + const { + showInstitutionalLeaversSurveyUntil, + setShowInstitutionalLeaversSurveyUntil, + } = useUserEmailsContext() const [hide, setHide] = usePersistedState( 'hideInstitutionalLeaversSurvey', @@ -18,11 +18,11 @@ export function LeaversSurveyAlert() { ) function handleDismiss() { - setExpirationDate(0) + setShowInstitutionalLeaversSurveyUntil(0) setHide(true) } - if (Date.now() > expirationDate) { + if (Date.now() > showInstitutionalLeaversSurveyUntil) { return null } diff --git a/services/web/frontend/js/features/settings/components/linking-section.tsx b/services/web/frontend/js/features/settings/components/linking-section.tsx index bf0daab709..3485de4583 100644 --- a/services/web/frontend/js/features/settings/components/linking-section.tsx +++ b/services/web/frontend/js/features/settings/components/linking-section.tsx @@ -64,7 +64,7 @@ function LinkingSection() { {hasReferencesLinkingSection ? ( <>

- {t('reference_sync')} + {t('reference_managers')}

{referenceLinkingWidgets.map( @@ -146,9 +146,9 @@ function SSOLinkingWidgetContainer({ break case 'google': case 'twitter': - description = t('login_with_service', { + description = `${t('login_with_service', { service: subscription.provider.name, - }) + })}.` break case 'orcid': description = t('oauth_orcid_description') diff --git a/services/web/frontend/js/features/settings/context/user-email-context.tsx b/services/web/frontend/js/features/settings/context/user-email-context.tsx index 40d9c6f767..7f77f96288 100644 --- a/services/web/frontend/js/features/settings/context/user-email-context.tsx +++ b/services/web/frontend/js/features/settings/context/user-email-context.tsx @@ -203,10 +203,10 @@ const reducer = (state: State, action: Action) => { } function useUserEmails() { - const [, setExpirationDate] = usePersistedState( - 'showInstitutionalLeaversSurveyUntil', - 0 - ) + const [ + showInstitutionalLeaversSurveyUntil, + setShowInstitutionalLeaversSurveyUntil, + ] = usePersistedState('showInstitutionalLeaversSurveyUntil', 0, true) const [state, unsafeDispatch] = useReducer(reducer, initialState) const dispatch = useSafeDispatch(unsafeDispatch) const { data, isLoading, isError, isSuccess, runAsync } = @@ -237,11 +237,11 @@ function useUserEmails() { userEmail.emailHasInstitutionLicence ) if (!stillHasLicenseAccess) { - setExpirationDate(Date.now() + ONE_WEEK_IN_MS) + setShowInstitutionalLeaversSurveyUntil(Date.now() + ONE_WEEK_IN_MS) } } }, - [state, setExpirationDate] + [state, setShowInstitutionalLeaversSurveyUntil] ) return { @@ -250,6 +250,8 @@ function useUserEmails() { isInitializingSuccess: isSuccess, isInitializingError: isError, getEmails, + showInstitutionalLeaversSurveyUntil, + setShowInstitutionalLeaversSurveyUntil, resetLeaversSurveyExpiration, setLoading: useCallback( (flag: boolean) => dispatch(ActionCreators.setLoading(flag)), diff --git a/services/web/frontend/stories/settings/helpers/emails.js b/services/web/frontend/stories/settings/helpers/emails.js index 370a8e5383..f1a54fd955 100644 --- a/services/web/frontend/stories/settings/helpers/emails.js +++ b/services/web/frontend/stories/settings/helpers/emails.js @@ -97,6 +97,7 @@ export function defaultSetupMocks(fetchMock) { }) .get(/\/institutions\/domains\?hostname=a/, fakeInstitutionDomain1) .get(/\/institutions\/domains\?hostname=f/, fakeInstitutionDomain2) + .get(/\/institutions\/domains/, []) .post(/\/user\/emails\/*/, 200, { delay: MOCK_DELAY, }) diff --git a/services/web/frontend/stories/settings/leavers-survey-alert.stories.tsx b/services/web/frontend/stories/settings/leavers-survey-alert.stories.tsx index 9a57aa9ee0..83df0c3def 100644 --- a/services/web/frontend/stories/settings/leavers-survey-alert.stories.tsx +++ b/services/web/frontend/stories/settings/leavers-survey-alert.stories.tsx @@ -1,4 +1,5 @@ import EmailsSection from '../../js/features/settings/components/emails-section' +import { UserEmailsProvider } from '../../js/features/settings/context/user-email-context' import { LeaversSurveyAlert } from '../../js/features/settings/components/leavers-survey-alert' import localStorage from '../../js/infrastructure/local-storage' @@ -7,7 +8,11 @@ export const SurveyAlert = () => { 'showInstitutionalLeaversSurveyUntil', Date.now() + 1000 * 60 * 60 ) - return + return ( + + + + ) } export default { diff --git a/services/web/frontend/stories/settings/page.stories.js b/services/web/frontend/stories/settings/page.stories.js index 26e456d4d7..95989ccfd5 100644 --- a/services/web/frontend/stories/settings/page.stories.js +++ b/services/web/frontend/stories/settings/page.stories.js @@ -21,6 +21,7 @@ import { defaultSetupMocks as defaultSetupLinkingMocks, } from './helpers/linking' import { UserProvider } from '../../js/shared/context/user-context' +import { ScopeDecorator } from '../decorators/scope' export const Overleaf = args => { setDefaultLeaveMeta() @@ -70,4 +71,5 @@ export const ServerPro = args => { export default { title: 'Account Settings / Full Page', component: SettingsPageRoot, + decorators: [ScopeDecorator], } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index bbdd534413..e420add302 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -263,7 +263,7 @@ "dropbox_already_linked_error_with_email": "Your Dropbox account cannot be linked as it is already linked with another Overleaf account using email address __otherUsersEmail__.", "github_too_many_files_error": "This repository cannot be imported as it exceeds the maximum number of files allowed", "linked_accounts": "linked accounts", - "linked_accounts_explained": "You can link your __appName__ account with other services to enable the features described below", + "linked_accounts_explained": "You can link your __appName__ account with other services to enable the features described below.", "oauth_orcid_description": " Securely establish your identity by linking your ORCID iD to your __appName__ account. Submissions to participating publishers will automatically include your ORCID iD for improved workflow and visibility. ", "no_existing_password": "Please use the password reset form to set your password", "password_managed_externally": "Password settings are managed externally", @@ -477,6 +477,7 @@ "reference_search": "Advanced reference search", "reference_search_info": "You can always search by citation key, and advanced reference search lets you also search by author, title, year or journal.", "reference_search_info_v2": "It’s easy to find your references - you can search by author, title, year or journal. You can still search by citation key too.", + "reference_managers": "Reference managers", "reference_sync": "Reference manager sync", "reference_sync_info": "Manage your reference library in Mendeley and link it directly to a .bib file in Overleaf, so you can easily cite anything in your Mendeley library.", "faq_how_free_trial_works_answer": "You get full access to your chosen __appName__ plan during your __len__-day free trial. There is no obligation to continue beyond the trial. Your card will be charged at the end of your __len__ day trial unless you cancel before then. You can cancel via your subscription settings.", diff --git a/services/web/test/frontend/features/settings/components/emails/add-email-input.test.tsx b/services/web/test/frontend/features/settings/components/emails/add-email-input.test.tsx index 22a7820518..5e7bde6019 100644 --- a/services/web/test/frontend/features/settings/components/emails/add-email-input.test.tsx +++ b/services/web/test/frontend/features/settings/components/emails/add-email-input.test.tsx @@ -18,6 +18,7 @@ const testInstitutionData = [ describe('', function () { const defaultProps = { onChange: (value: string) => {}, + handleAddNewEmail: () => {}, } beforeEach(function () { @@ -40,11 +41,19 @@ describe('', function () { describe('when typing text that does not contain any potential domain match', function () { let onChangeStub + let handleAddNewEmailStub beforeEach(function () { fetchMock.get('express:/institutions/domains', 200) onChangeStub = sinon.stub() - render() + handleAddNewEmailStub = sinon.stub() + render( + + ) fireEvent.change(screen.getByRole('textbox'), { target: { value: 'user' }, }) @@ -66,6 +75,22 @@ describe('', function () { it('should not make any request for institution domains', function () { expect(fetchMock.called()).to.be.false }) + + it('should submit on Enter if email looks valid', async function () { + fireEvent.change(screen.getByRole('textbox'), { + target: { value: 'user@domain.com' }, + }) + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' }) + expect(handleAddNewEmailStub.calledWith()).to.equal(true) + }) + + it('should not submit on Enter if email does not look valid', async function () { + fireEvent.change(screen.getByRole('textbox'), { + target: { value: 'user@' }, + }) + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' }) + expect(handleAddNewEmailStub.calledWith()).to.equal(false) + }) }) describe('when typing text that contains a potential domain match', function () { @@ -73,7 +98,7 @@ describe('', function () { beforeEach(function () { onChangeStub = sinon.stub() - render() + render() }) describe('when there are no matches', function () { diff --git a/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx b/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx index b2bebb0d20..ece3988369 100644 --- a/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx +++ b/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx @@ -1,14 +1,23 @@ import { expect } from 'chai' import { fireEvent, screen, render } from '@testing-library/react' +import { UserEmailsProvider } from '../../../../../frontend/js/features/settings/context/user-email-context' import { LeaversSurveyAlert } from '../../../../../frontend/js/features/settings/components/leavers-survey-alert' import localStorage from '../../../../../frontend/js/infrastructure/local-storage' +function renderWithProvider() { + render(, { + wrapper: ({ children }) => ( + {children} + ), + }) +} + describe('', function () { it('should render before the expiration date', function () { const tomorrow = Date.now() + 1000 * 60 * 60 * 24 localStorage.setItem('showInstitutionalLeaversSurveyUntil', tomorrow) localStorage.setItem('hideInstitutionalLeaversSurvey', false) - render() + renderWithProvider() screen.getByRole('alert') screen.getByText(/Provide some quick feedback/) screen.getByRole('link', { name: 'Take a short survey' }) @@ -18,7 +27,7 @@ describe('', function () { const yesterday = Date.now() - 1000 * 60 * 60 * 24 localStorage.setItem('showInstitutionalLeaversSurveyUntil', yesterday) localStorage.setItem('hideInstitutionalLeaversSurvey', false) - render() + renderWithProvider() expect(screen.queryByRole('alert')).to.be.null }) @@ -26,7 +35,7 @@ describe('', function () { const tomorrow = Date.now() + 1000 * 60 * 60 * 24 localStorage.setItem('showInstitutionalLeaversSurveyUntil', tomorrow) localStorage.setItem('hideInstitutionalLeaversSurvey', true) - render() + renderWithProvider() expect(screen.queryByRole('alert')).to.be.null }) @@ -34,7 +43,7 @@ describe('', function () { const tomorrow = Date.now() + 1000 * 60 * 60 * 24 localStorage.setItem('showInstitutionalLeaversSurveyUntil', tomorrow) localStorage.setItem('hideInstitutionalLeaversSurvey', false) - render() + renderWithProvider() screen.getByRole('alert') fireEvent.click(screen.getByRole('button')) diff --git a/services/web/test/frontend/features/settings/components/linking-section.test.tsx b/services/web/test/frontend/features/settings/components/linking-section.test.tsx index 3521d5659c..3a5021b8fb 100644 --- a/services/web/test/frontend/features/settings/components/linking-section.test.tsx +++ b/services/web/test/frontend/features/settings/components/linking-section.test.tsx @@ -65,7 +65,7 @@ describe('', function () { screen.getByText('Integrations') screen.getByText( - 'You can link your Overleaf account with other services to enable the features described below' + 'You can link your Overleaf account with other services to enable the features described below.' ) }) @@ -74,7 +74,7 @@ describe('', function () { screen.getByText('linked accounts') screen.getByText('Google') - screen.getByText('Log in with Google') + screen.getByText('Log in with Google.') screen.getByRole('button', { name: 'Unlink' }) screen.getByText('Orcid')