Add "New" badge to library nav link and a feedback link on the library page

GitOrigin-RevId: 6c936ca8168dd718c4eaf806f426d5c00078add8

services/web/app/src/Features/Tutorial/TutorialController.mjs

@@ -33,6 +33,7 @@ const VALID_KEYS = [
   'themed-dashboard-intro',
   'dimensions-consent',
   'dimensions-rail-popover',
+  'library-new-badge',
 ]
 
 // tutorialKey is validated against the same known-key enum the handlers

services/web/frontend/extracted-translations.json

@@ -1151,6 +1151,7 @@
   "lets_get_those_premium_features": "",
   "lets_get_you_set_up": "",
   "library": "",
+  "library_is_new_give_feedback": "",
   "license": "",
   "license_allocated": "",
   "license_not_allocated": "",

services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx

@@ -36,8 +36,10 @@ function SidebarDsNav({
       ? trashActive
       : selectedTagId === undefined && filter === 'trashed'
   const [dsNavLibraryLinkModule] = importOverleafModules('dsNavLibraryLink')
-  const DsNavLibraryLink: JSXElementConstructor<{ active?: boolean }> =
+  const DsNavLibraryLink: JSXElementConstructor<{
-    dsNavLibraryLinkModule?.import.default
+    active?: boolean
+    inLibrary?: boolean
+  }> = dsNavLibraryLinkModule?.import.default
   const { mousePos, getHandleProps, getTargetProps } = usePersistedResize({
     name: 'project-sidebar',
   })
@@ -87,6 +89,7 @@ function SidebarDsNav({
               {DsNavLibraryLink && (
                 <DsNavLibraryLink
                   active={activePage === 'library' && !trashActive}
+                  inLibrary={activePage === 'library'}
                 />
               )}
               <button

services/web/locales/en.json

@@ -1473,6 +1473,7 @@
   "libraries": "Libraries",
   "library": "Library",
   "library_entry_too_large": "This entry is too large to add. Library entries can be up to __limit__. Try trimming the entry and adding it again.",
+  "library_is_new_give_feedback": "Library is new. <0>Give feedback</0>",
   "library_size_limit_reached": "Your library has reached its size limit of __limit__. Remove some references before adding more.",
   "library_too_many_references": "Your library has reached its limit of __limit__ references. Remove some references before adding more.",
   "license": "License",

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

@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/react'
+import { screen, waitFor, within } from '@testing-library/react'
 import { expect } from 'chai'
 import SidebarDsNav from '../../../../../../frontend/js/features/project-list/components/sidebar/sidebar-ds-nav'
 import {
@@ -44,6 +44,9 @@ describe('<SidebarDsNav />', function () {
     window.metaAttributesCache.set('ol-splitTestVariants', {
       'overleaf-library': 'enabled',
     })
+    window.metaAttributesCache.set('ol-inactiveTutorials', [
+      'library-new-badge',
+    ])
     window.metaAttributesCache.set('ol-userSettings', {})
     window.metaAttributesCache.set('ol-navbar', {
       sessionUser: { email: 'fake@example.com' },
@@ -92,6 +95,46 @@ describe('<SidebarDsNav />', function () {
     ).to.be.null
   })
 
+  describe('library "New" badge', function () {
+    it('shows the badge on the projects page when the tutorial is active', async function () {
+      window.metaAttributesCache.set('ol-inactiveTutorials', [])
+
+      await renderSidebar({ activePage: 'projects' })
+
+      const link = screen.getByRole('link', { name: /library/i })
+      expect(within(link).getByText('New')).to.exist
+    })
+
+    it('hides the badge once the tutorial has been dismissed', async function () {
+      window.metaAttributesCache.set('ol-inactiveTutorials', [
+        'library-new-badge',
+      ])
+
+      await renderSidebar({ activePage: 'projects' })
+
+      const link = screen.getByRole('link', { name: /library/i })
+      expect(within(link).queryByText('New')).to.be.null
+    })
+
+    it('hides the badge on the library page itself', async function () {
+      window.metaAttributesCache.set('ol-inactiveTutorials', [])
+
+      await renderSidebar({ activePage: 'library' })
+
+      const link = screen.getByRole('link', { name: /library/i })
+      expect(within(link).queryByText('New')).to.be.null
+    })
+
+    it('hides the badge in the library trash', async function () {
+      window.metaAttributesCache.set('ol-inactiveTutorials', [])
+
+      await renderSidebar({ activePage: 'library', trashActive: true })
+
+      const link = screen.getByRole('link', { name: /library/i })
+      expect(within(link).queryByText('New')).to.be.null
+    })
+  })
+
   describe('add affiliation widget', function () {
     it('shows the widget on the library page when the user has no affiliations', async function () {
       window.metaAttributesCache.set('ol-userAffiliations', [])