Merge pull request #23798 from overleaf/revert-23767-ac-remove-ds-nav-code-small

Revert "[web] Show DS Navigation for all users regardless of feature flag "

GitOrigin-RevId: 569800d75e1ef3ed6af666325213f1615c8f3a43

services/web/frontend/extracted-translations.json

@@ -1099,6 +1099,7 @@
   "optional": "",
   "or": "",
   "organization_name": "",
+  "organize_projects": "",
   "organize_tags": "",
   "other": "",
   "other_causes_of_compile_timeouts": "",

services/web/frontend/js/features/project-list/components/project-list-events.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useSplitTestContext } from '@/shared/context/split-test-context'
 import { sendMB } from '@/infrastructure/event-tracking'
 
 export type ExtraSegmentations = {
@@ -38,11 +39,16 @@ export type ExtraSegmentations = {
 }
 
 export const useSendProjectListMB = () => {
+  const { splitTestVariants } = useSplitTestContext()
+  const hasDsNav = splitTestVariants['sidebar-navigation-ui-update'] as
+    | 'default'
+    | 'active'
   return useCallback(
     <T extends keyof ExtraSegmentations>(
       event: T,
       payload: ExtraSegmentations[T]
-    ) => sendMB(event, payload),
+    ) =>
-    []
+      sendMB(event, { ...payload, 'sidebar-navigation-ui-update': hasDsNav }),
+    [hasDsNav]
   )
 }

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

@@ -16,8 +16,12 @@ import getMeta from '@/utils/meta'
 import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
 import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
 import WelcomePageContent from '@/features/project-list/components/welcome-page-content'
+import ProjectListDefault from '@/features/project-list/components/project-list-default'
 import { ProjectListDsNav } from '@/features/project-list/components/project-list-ds-nav'
-import { DsNavStyleProvider } from '@/features/project-list/components/use-is-ds-nav'
+import {
+  DsNavStyleProvider,
+  useIsDsNav,
+} from '@/features/project-list/components/use-is-ds-nav'
 
 function ProjectListRoot() {
   const { isReady } = useWaitForI18n()
@@ -78,8 +82,22 @@ function ProjectListPageContent() {
 
   const { t } = useTranslation()
 
+  const hasDsNav = useIsDsNav()
+
   if (isLoading) {
-    return <LoadingBranded loadProgress={loadProgress} label={t('loading')} />
+    const loadingComponent = (
+      <LoadingBranded loadProgress={loadProgress} label={t('loading')} />
+    )
+
+    if (hasDsNav) {
+      return loadingComponent
+    } else {
+      return (
+        <DefaultNavbarAndFooter>
+          <div className="loading-container">{loadingComponent}</div>
+        </DefaultNavbarAndFooter>
+      )
+    }
   }
 
   if (totalProjectsCount === 0) {
@@ -88,12 +106,18 @@ function ProjectListPageContent() {
         <WelcomePageContent />
       </DefaultPageContentWrapper>
     )
-  } else {
+  } else if (hasDsNav) {
     return (
       <DsNavStyleProvider>
         <ProjectListDsNav />
       </DsNavStyleProvider>
     )
+  } else {
+    return (
+      <DefaultPageContentWrapper>
+        <ProjectListDefault />
+      </DefaultPageContentWrapper>
+    )
   }
 }
 

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

@@ -5,6 +5,7 @@ import {
 } from '../../context/project-list-context'
 import TagsList from './tags-list'
 import ProjectsFilterMenu from '../projects-filter-menu'
+import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav'
 
 type SidebarFilterProps = {
   filter: Filter
@@ -29,6 +30,7 @@ export function SidebarFilter({ filter, text }: SidebarFilterProps) {
 
 export default function SidebarFilters() {
   const { t } = useTranslation()
+  const hasDsNav = useIsDsNav()
 
   return (
     <ul className="list-unstyled project-list-filters">
@@ -37,9 +39,11 @@ export default function SidebarFilters() {
       <SidebarFilter filter="shared" text={t('shared_with_you')} />
       <SidebarFilter filter="archived" text={t('archived_projects')} />
       <SidebarFilter filter="trashed" text={t('trashed_projects')} />
-      <li role="none">
+      {hasDsNav && (
-        <hr />
+        <li role="none">
-      </li>
+          <hr />
+        </li>
+      )}
       <TagsList />
     </ul>
   )

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

@@ -1,6 +1,7 @@
 import { sortBy } from 'lodash'
 import { useTranslation } from 'react-i18next'
 import { DotsThreeVertical, Plus, TagSimple } from '@phosphor-icons/react'
+import MaterialIcon from '../../../../shared/components/material-icon'
 import {
   UNCATEGORIZED_KEY,
   useProjectListContext,
@@ -13,6 +14,7 @@ import {
   DropdownMenu,
   DropdownToggle,
 } from '@/features/ui/components/bootstrap-5/dropdown-menu'
+import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav'
 
 export default function TagsList() {
   const { t } = useTranslation()
@@ -33,6 +35,7 @@ export default function TagsList() {
     DeleteTagModal,
   } = useTag()
 
+  const isDsNav = useIsDsNav()
   return (
     <>
       <li
@@ -40,11 +43,15 @@ export default function TagsList() {
         aria-hidden="true"
         data-testid="organize-projects"
       >
-        {t('organize_tags')}
+        {isDsNav ? t('organize_tags') : t('organize_projects')}
       </li>
       <li className="tag">
         <button type="button" className="tag-name" onClick={openCreateTagModal}>
-          <Plus weight="bold" />
+          {isDsNav ? (
+            <Plus weight="bold" />
+          ) : (
+            <MaterialIcon type="add" className="tag-list-icon" />
+          )}
 
           <span className="name">{t('new_tag')}</span>
         </button>
@@ -67,7 +74,11 @@ export default function TagsList() {
                   color: getTagColor(tag),
                 }}
               >
-                <TagSimple weight="fill" className="tag-list-icon" />
+                {isDsNav ? (
+                  <TagSimple weight="fill" className="tag-list-icon" />
+                ) : (
+                  <MaterialIcon type="label" className="tag-list-icon" />
+                )}
               </span>
               <span className="name">
                 {tag.name}{' '}
@@ -83,7 +94,7 @@ export default function TagsList() {
                 id={`${tag._id}-dropdown-toggle`}
                 data-testid="tag-dropdown-toggle"
               >
-                <DotsThreeVertical weight="bold" />
+                {isDsNav && <DotsThreeVertical weight="bold" />}
               </DropdownToggle>
               <DropdownMenu className="dropdown-menu-sm-width">
                 <DropdownItem

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

@@ -5,7 +5,6 @@ import classnames from 'classnames'
 import OLButton from '@/features/ui/components/ol/ol-button'
 import { useTranslation } from 'react-i18next'
 import { X } from '@phosphor-icons/react'
-import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav'
 
 export function SurveyWidgetDsNav() {
   const { t } = useTranslation()
@@ -14,7 +13,6 @@ export function SurveyWidgetDsNav() {
     `dismissed-${survey?.name}`,
     false
   )
-  const hasDsNav = useIsDsNav()
 
   const dismissSurvey = useCallback(() => {
     setDismissedSurvey(true)
@@ -24,12 +22,6 @@ export function SurveyWidgetDsNav() {
     return null
   }
 
-  // Hide the survey for users who have sidebar-navigation-ui-update:
-  // They've had it for months. We don't need their feedback anymore
-  if (hasDsNav && survey?.name === 'ds-nav') {
-    return null
-  }
-
   return (
     <div className={classnames('user-notifications', `survey-${survey.name}`)}>
       <div className="notification-entry">

services/web/locales/en.json

@@ -1461,6 +1461,7 @@
   "organization_name": "Organization name",
   "organization_or_company_name": "Organization or company name",
   "organization_or_company_type": "Organization or company type",
+  "organize_projects": "Organize Projects",
   "organize_tags": "Organize Tags",
   "original_price": "Original price",
   "other": "Other",

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

@@ -42,7 +42,7 @@ describe('<TagsList />', function () {
 
   it('displays the tags list', function () {
     const header = screen.getByTestId('organize-projects')
-    expect(header.textContent).to.equal('Organize Tags')
+    expect(header.textContent).to.equal('Organize Projects')
 
     screen.getByRole('button', {
       name: 'New Tag',

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

@@ -1,9 +1,8 @@
 import { expect } from 'chai'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { SurveyWidgetDsNav } from '../../../../../frontend/js/features/project-list/components/survey-widget-ds-nav'
+import SurveyWidget from '../../../../../frontend/js/features/project-list/components/survey-widget'
-import { SplitTestProvider } from '@/shared/context/split-test-context'
 
-describe('<SurveyWidgetDsNav />', function () {
+describe('<SurveyWidget />', function () {
   beforeEach(function () {
     this.name = 'my-survey'
     this.preText = 'To help shape the future of Overleaf'
@@ -22,11 +21,7 @@ describe('<SurveyWidgetDsNav />', function () {
         url: this.url,
       })
 
-      render(
+      render(<SurveyWidget />)
-        <SplitTestProvider>
-          <SurveyWidgetDsNav />
-        </SplitTestProvider>
-      )
     })
 
     it('shows text and link', function () {
@@ -34,10 +29,9 @@ describe('<SurveyWidgetDsNav />', function () {
       expect(dismissed).to.equal(null)
 
       screen.getByText(this.preText)
-      screen.getByText(this.linkText)
 
       const link = screen.getByRole('link', {
-        name: 'Take survey',
+        name: this.linkText,
       }) as HTMLAnchorElement
       expect(link.href).to.equal(this.url)
     })
@@ -69,11 +63,7 @@ describe('<SurveyWidgetDsNav />', function () {
       })
       localStorage.setItem('dismissed-my-survey', 'true')
 
-      render(
+      render(<SurveyWidget />)
-        <SplitTestProvider>
-          <SurveyWidgetDsNav />
-        </SplitTestProvider>
-      )
     })
 
     it('nothing is displayed', function () {
@@ -87,11 +77,7 @@ describe('<SurveyWidgetDsNav />', function () {
 
   describe('survey widget is not shown when no survey is configured', function () {
     beforeEach(function () {
-      render(
+      render(<SurveyWidget />)
-        <SplitTestProvider>
-          <SurveyWidgetDsNav />
-        </SplitTestProvider>
-      )
     })
 
     it('nothing is displayed', function () {

services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx

@@ -63,14 +63,12 @@ describe('<ProjectTools />', function () {
       projects,
       totalSize: 100,
     })
+
     window.metaAttributesCache.set('ol-footer', {
       showThinFooter: false,
       translatedLanguages: { en: 'English' },
       subdomainLang: { en: { lngCode: 'en', url: 'overleaf.com' } },
     })
-    window.metaAttributesCache.set('ol-navbar', {
-      items: [],
-    })
     fetchMock.get('/system/messages', [])
   })