Merge pull request #7751 from overleaf/ta-settings-misc-section-split

[SettingsPage] Split Misc Section

GitOrigin-RevId: b6fc60c571dfaf3aec542f3df8dc826a0ba3ab58

services/web/frontend/js/features/settings/components/beta-program-section.tsx

@@ -1,27 +1,21 @@
 import { useTranslation } from 'react-i18next'
 import { useUserContext } from '../../../shared/context/user-context'
 
-function MiscSection() {
+function BetaProgramSection() {
   const { t } = useTranslation()
   const { betaProgram } = useUserContext()
 
   return (
     <>
       <h3>{t('sharelatex_beta_program')}</h3>
-      <p>
+      <p className="small">
         {betaProgram
           ? t('beta_program_already_participating')
           : t('beta_program_benefits')}
       </p>
       <a href="/beta/participate">{t('manage_beta_program_membership')}</a>
-      <hr />
-      <h3>{t('sessions')}</h3>
-      <a href="/user/sessions">{t('manage_sessions')}</a>
-      <hr />
-      <h3>{t('newsletter')}</h3>
-      <a href="/user/email-preferences">{t('manage_newsletter')}</a>
     </>
   )
 }
 
-export default MiscSection
+export default BetaProgramSection

services/web/frontend/js/features/settings/components/newsletter-section.tsx

@@ -0,0 +1,14 @@
+import { useTranslation } from 'react-i18next'
+
+function NewsletterSection() {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <h3>{t('newsletter')}</h3>
+      <a href="/user/email-preferences">{t('manage_newsletter')}</a>
+    </>
+  )
+}
+
+export default NewsletterSection

services/web/frontend/js/features/settings/components/root.tsx

@@ -6,12 +6,15 @@ import EmailsSection from './emails-section'
 import AccountInfoSection from './account-info-section'
 import PasswordSection from './password-section'
 import LinkingSection from './linking-section'
-import MiscSection from './misc-section'
+import BetaProgramSection from './beta-program-section'
+import SessionsSection from './sessions-section'
+import NewsletterSection from './newsletter-section'
 import LeaveSection from './leave-section'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { UserProvider } from '../../../shared/context/user-context'
 import { SSOProvider } from '../context/sso-context'
 import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
+import { ExposedSettings } from '../../../../../types/exposed-settings'
 
 function SettingsPageRoot() {
   const { isReady } = useWaitForI18n()
@@ -34,6 +37,7 @@ function SettingsPageRoot() {
 function SettingsPageContent() {
   const { t } = useTranslation()
   const ssoError = getMeta('ol-ssoError') as string
+  const { isOverleaf } = getMeta('ol-ExposedSettings') as ExposedSettings
 
   return (
     <UserProvider>
@@ -60,9 +64,17 @@ function SettingsPageContent() {
           <SSOProvider>
             <LinkingSection />
           </SSOProvider>
-          <MiscSection />
+          {isOverleaf ? <BetaProgramSection /> : null}
           <hr />
-          <LeaveSection />
+          <SessionsSection />
+          <hr />
+          {isOverleaf ? (
+            <>
+              <NewsletterSection />
+              <hr />
+              <LeaveSection />
+            </>
+          ) : null}
         </div>
       </div>
     </UserProvider>

services/web/frontend/js/features/settings/components/sessions-section.tsx

@@ -0,0 +1,14 @@
+import { useTranslation } from 'react-i18next'
+
+function SessionsSection() {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <h3>{t('sessions')}</h3>
+      <a href="/user/sessions">{t('manage_sessions')}</a>
+    </>
+  )
+}
+
+export default SessionsSection

services/web/frontend/stories/settings/beta-program.stories.js

@@ -0,0 +1,27 @@
+import BetaProgramSection from '../../js/features/settings/components/beta-program-section'
+import { UserProvider } from '../../js/shared/context/user-context'
+
+export const SectionNotEnrolled = args => {
+  window.metaAttributesCache.set('ol-user', { betaProgram: false })
+
+  return (
+    <UserProvider>
+      <BetaProgramSection {...args} />
+    </UserProvider>
+  )
+}
+
+export const SectionEnrolled = args => {
+  window.metaAttributesCache.set('ol-user', { betaProgram: true })
+
+  return (
+    <UserProvider>
+      <BetaProgramSection {...args} />
+    </UserProvider>
+  )
+}
+
+export default {
+  title: 'Account Settings / Beta Program',
+  component: BetaProgramSection,
+}

services/web/frontend/stories/settings/misc.stories.js

@@ -1,17 +0,0 @@
-import MiscSection from '../../js/features/settings/components/misc-section'
-import { UserProvider } from '../../js/shared/context/user-context'
-
-export const Section = args => {
-  window.metaAttributesCache.set('ol-user', { betaProgram: true })
-
-  return (
-    <UserProvider>
-      <MiscSection {...args} />
-    </UserProvider>
-  )
-}
-
-export default {
-  title: 'Account Settings / Misc / Section',
-  component: MiscSection,
-}

services/web/frontend/stories/settings/newsletter.stories.js

@@ -0,0 +1,10 @@
+import NewsletterSection from '../../js/features/settings/components/newsletter-section'
+
+export const Section = args => {
+  return <NewsletterSection {...args} />
+}
+
+export default {
+  title: 'Account Settings / Newsletter',
+  component: NewsletterSection,
+}

services/web/frontend/stories/settings/sessions.stories.js

@@ -0,0 +1,10 @@
+import SessionsSection from '../../js/features/settings/components/sessions-section'
+
+export const Section = args => {
+  return <SessionsSection {...args} />
+}
+
+export default {
+  title: 'Account Settings / Sessions',
+  component: SessionsSection,
+}

services/web/test/frontend/features/settings/components/beta-program-section.test.tsx

@@ -0,0 +1,45 @@
+import { expect } from 'chai'
+import { screen, render } from '@testing-library/react'
+import BetaProgramSection from '../../../../../frontend/js/features/settings/components/beta-program-section'
+import { UserProvider } from '../../../../../frontend/js/shared/context/user-context'
+
+function renderSectionWithUserProvider() {
+  render(<BetaProgramSection />, {
+    wrapper: ({ children }) => <UserProvider>{children}</UserProvider>,
+  })
+}
+
+describe('<BetaProgramSection />', function () {
+  beforeEach(function () {
+    window.metaAttributesCache.set('ol-user', {
+      betaProgram: true,
+    })
+  })
+
+  afterEach(function () {
+    window.metaAttributesCache = new Map()
+  })
+
+  it('shows link to sessions', async function () {
+    renderSectionWithUserProvider(<BetaProgramSection />)
+
+    const link = screen.getByRole('link', {
+      name: 'Manage Beta Program Membership',
+    })
+
+    expect(link.getAttribute('href')).to.equal('/beta/participate')
+  })
+
+  it('shows enrolled status', async function () {
+    renderSectionWithUserProvider(<BetaProgramSection />)
+    screen.getByText('You are enrolled in the Beta Program')
+  })
+
+  it('shows not enrolled status', async function () {
+    window.metaAttributesCache.set('ol-user', {
+      betaProgram: false,
+    })
+    renderSectionWithUserProvider(<BetaProgramSection />)
+    screen.getByText(/By joining our Beta program you can have early access/)
+  })
+})

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

@@ -0,0 +1,16 @@
+import { expect } from 'chai'
+import { screen, render } from '@testing-library/react'
+
+import NewsletterSection from '../../../../../frontend/js/features/settings/components/newsletter-section'
+
+describe('<NewsletterSection />', function () {
+  it('shows link to sessions', async function () {
+    render(<NewsletterSection />)
+
+    const link = screen.getByRole('link', {
+      name: 'Manage Your Newsletter Preferences',
+    })
+
+    expect(link.getAttribute('href')).to.equal('/user/email-preferences')
+  })
+})

services/web/test/frontend/features/settings/components/root.test.tsx

@@ -1,3 +1,4 @@
+import { expect } from 'chai'
 import sinon from 'sinon'
 import { screen, render, waitFor } from '@testing-library/react'
 import * as eventTracking from '../../../../../frontend/js/infrastructure/event-tracking'
@@ -11,7 +12,8 @@ describe('<SettingsPageRoot />', function () {
     window.metaAttributesCache.set('ol-ExposedSettings', { isOverleaf: true })
     window.metaAttributesCache.set('ol-hasPassword', true)
     window.metaAttributesCache.set('ol-ExposedSettings', {
-      hasAffiliationsFeature: false,
+      hasAffiliationsFeature: true,
+      isOverleaf: true,
     })
     window.metaAttributesCache.set('ol-user', {
       features: { github: true, dropbox: true, mendeley: true, zotero: true },
@@ -31,18 +33,48 @@ describe('<SettingsPageRoot />', function () {
     sendMBSpy.restore()
   })
 
-  it('displays page', async function () {
+  it('displays page for Overleaf', async function () {
     render(<SettingsPageRoot />)
 
     await waitFor(() => {
       screen.getByText('Account Settings')
     })
-
+    screen.getByText('Emails and Affiliations')
+    screen.getByText('Update Account Info')
+    screen.getByText('Change Password')
+    screen.getByText('Integrations')
+    screen.getByText('Overleaf Beta Program')
+    screen.getByText('Sessions')
+    screen.getByText('Newsletter')
     screen.getByRole('button', {
       name: 'Delete your account',
     })
   })
 
+  it('displays page for non-Overleaf', async function () {
+    window.metaAttributesCache.set('ol-ExposedSettings', {
+      hasAffiliationsFeature: false,
+      isOverleaf: false,
+    })
+    render(<SettingsPageRoot />)
+
+    await waitFor(() => {
+      screen.getByText('Account Settings')
+    })
+    expect(screen.queryByText('Emails and Affiliations')).to.not.exist
+    screen.getByText('Update Account Info')
+    screen.getByText('Change Password')
+    screen.getByText('Integrations')
+    expect(screen.queryByText('Overleaf Beta Program')).to.not.exist
+    screen.getByText('Sessions')
+    expect(screen.queryByText('Newsletter')).to.not.exist
+    expect(
+      screen.queryByRole('button', {
+        name: 'Delete your account',
+      })
+    ).to.not.exist
+  })
+
   it('sends tracking event on load', async function () {
     render(<SettingsPageRoot />)
 

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

@@ -0,0 +1,16 @@
+import { expect } from 'chai'
+import { screen, render } from '@testing-library/react'
+
+import SessionsSection from '../../../../../frontend/js/features/settings/components/sessions-section'
+
+describe('<SessionsSection />', function () {
+  it('shows link to sessions', async function () {
+    render(<SessionsSection />)
+
+    const link = screen.getByRole('link', {
+      name: 'Manage Your Sessions',
+    })
+
+    expect(link.getAttribute('href')).to.equal('/user/sessions')
+  })
+})