Merge pull request #9865 from overleaf/ab-display-notifications-welcome-page

[web] Display notifications on the react dashboard welcome page

GitOrigin-RevId: 29fb08bbac195c2766dd0e94dbe9e9a0c7065e76

services/web/frontend/js/features/project-list/components/notifications/groups/common.tsx

@@ -5,7 +5,6 @@ import Notification from '../notification'
 import Icon from '../../../../../shared/components/icon'
 import getMeta from '../../../../../utils/meta'
 import useAsyncDismiss from '../hooks/useAsyncDismiss'
-import { useProjectListContext } from '../../../context/project-list-context'
 import useAsync from '../../../../../shared/hooks/use-async'
 import { FetchError, postJSON } from '../../../../../infrastructure/fetch-json'
 import { ExposedSettings } from '../../../../../../../types/exposed-settings'
@@ -14,7 +13,6 @@ import { User } from '../../../../../../../types/user'
 
 function Common() {
   const { t } = useTranslation()
-  const { totalProjectsCount } = useProjectListContext()
   const { samlInitPath } = getMeta('ol-ExposedSettings') as ExposedSettings
   const notifications = getMeta('ol-notifications', []) as NotificationType[]
   const user = getMeta('ol-user', []) as Pick<User, 'features'>
@@ -33,7 +31,7 @@ function Common() {
     ).catch(console.error)
   }
 
-  if (!totalProjectsCount || !notifications.length) {
+  if (!notifications.length) {
     return null
   }
 

services/web/frontend/js/features/project-list/components/project-list-root.tsx

@@ -135,6 +135,11 @@ function ProjectListPageContent() {
               mdOffset={2}
               className="project-list-empty-col"
             >
+              <Row>
+                <Col xs={12}>
+                  <UserNotifications />
+                </Col>
+              </Row>
               <WelcomeMessage />
             </Col>
           </Row>

services/web/test/frontend/features/project-list/components/project-list-root.test.tsx

@@ -24,20 +24,17 @@ describe('<ProjectListRoot />', function () {
     sendSpy = sinon.spy(eventTracking, 'send')
     window.metaAttributesCache = new Map()
     window.metaAttributesCache.set('ol-tags', [])
-    window.metaAttributesCache.set('ol-ExposedSettings', { templateLinks: [] })
+    window.metaAttributesCache.set('ol-ExposedSettings', {
+      templateLinks: [],
+    })
+    window.metaAttributesCache.set('ol-userEmails', [
+      { email: 'test@overleaf.com', default: true },
+    ])
     window.user_id = userId
 
     Object.defineProperty(window, 'location', {
       value: { assign: locationStub },
     })
-
-    renderWithProjectListContext(<ProjectListRoot />, {
-      projects: fullList,
-    })
-    await fetchMock.flush(true)
-    await waitFor(() => {
-      screen.findByRole('table')
-    })
   })
 
   afterEach(function () {
@@ -49,6 +46,38 @@ describe('<ProjectListRoot />', function () {
     })
   })
 
+  describe('welcome page', function () {
+    beforeEach(async function () {
+      renderWithProjectListContext(<ProjectListRoot />, {
+        projects: [],
+      })
+      await fetchMock.flush(true)
+    })
+
+    it('the welcome page is displayed', async function () {
+      screen.getByRole('heading', { name: 'Welcome to Overleaf!' })
+    })
+
+    it('the email confirmation alert is not displayed', async function () {
+      expect(
+        screen.queryByText(
+          'Please confirm your email test@overleaf.com by clicking on the link in the confirmation email'
+        )
+      ).to.be.null
+    })
+  })
+
+  describe('project table', function () {
+    beforeEach(async function () {
+      renderWithProjectListContext(<ProjectListRoot />, {
+        projects: fullList,
+      })
+      await fetchMock.flush(true)
+      await waitFor(() => {
+        screen.findByRole('table')
+      })
+    })
+
     describe('checkboxes', function () {
       let allCheckboxes: Array<HTMLInputElement> = []
       let actionsToolbar: HTMLElement
@@ -67,7 +96,8 @@ describe('<ProjectListRoot />', function () {
         })
 
         it('downloads all selected projects and then unselects them', async function () {
-        const downloadButton = within(actionsToolbar).getByLabelText('Download')
+          const downloadButton =
+            within(actionsToolbar).getByLabelText('Download')
           fireEvent.click(downloadButton)
 
           await waitFor(() => {
@@ -79,7 +109,8 @@ describe('<ProjectListRoot />', function () {
             `/project/download/zip?project_ids=${project1Id},${project2Id}`
           )
 
-        const allCheckboxes = screen.getAllByRole<HTMLInputElement>('checkbox')
+          const allCheckboxes =
+            screen.getAllByRole<HTMLInputElement>('checkbox')
           const allCheckboxesChecked = allCheckboxes.filter(c => c.checked)
           expect(allCheckboxesChecked.length).to.equal(0)
         })
@@ -269,7 +300,8 @@ describe('<ProjectListRoot />', function () {
           const filterButton = screen.getAllByText('All Projects')[0]
           fireEvent.click(filterButton)
 
-        const allCheckboxes = screen.getAllByRole<HTMLInputElement>('checkbox')
+          const allCheckboxes =
+            screen.getAllByRole<HTMLInputElement>('checkbox')
           const allCheckboxesChecked = allCheckboxes.filter(c => c.checked)
           expect(allCheckboxesChecked.length).to.equal(0)
         })
@@ -361,7 +393,8 @@ describe('<ProjectListRoot />', function () {
           expect(sendSpy).calledWith('project-list-page-interaction')
 
           // same name
-        let confirmButton = within(modal).getByText<HTMLInputElement>('Rename')
+          let confirmButton =
+            within(modal).getByText<HTMLInputElement>('Rename')
           expect(confirmButton.disabled).to.be.true
           let input = screen.getByLabelText('New Name') as HTMLButtonElement
           const oldName = input.value
@@ -392,7 +425,8 @@ describe('<ProjectListRoot />', function () {
           screen.findByText(newProjectName)
           expect(screen.queryByText(oldName)).to.be.null
 
-        const allCheckboxes = screen.getAllByRole<HTMLInputElement>('checkbox')
+          const allCheckboxes =
+            screen.getAllByRole<HTMLInputElement>('checkbox')
           const allCheckboxesChecked = allCheckboxes.filter(c => c.checked)
           expect(allCheckboxesChecked.length).to.equal(0)
         })
@@ -509,4 +543,13 @@ describe('<ProjectListRoot />', function () {
         screen.findByText(copiedProjectName)
       })
     })
+
+    describe('notifications', function () {
+      it('email confirmation alert is displayed', async function () {
+        screen.getByText(
+          'Please confirm your email test@overleaf.com by clicking on the link in the confirmation email'
+        )
+      })
+    })
+  })
 })

services/web/test/frontend/features/project-list/components/sidebar/tags-list.test.tsx

@@ -7,6 +7,8 @@ import { renderWithProjectListContext } from '../../helpers/render-with-context'
 
 describe('<TagsList />', function () {
   beforeEach(async function () {
+    global.localStorage.clear()
+    window.metaAttributesCache = new Map()
     window.metaAttributesCache.set('ol-tags', [
       {
         _id: 'abc123def456',
@@ -30,6 +32,7 @@ describe('<TagsList />', function () {
 
     renderWithProjectListContext(<TagsList />)
 
+    await fetchMock.flush(true)
     await waitFor(() => expect(fetchMock.called('/api/project')))
   })
 
@@ -37,7 +40,7 @@ describe('<TagsList />', function () {
     fetchMock.reset()
   })
 
-  it('displays the tags list', async function () {
+  it('displays the tags list', function () {
     screen.getByRole('heading', {
       name: 'Tags/Folders',
     })