diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 7261f0b5af..dac76a9250 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -1099,6 +1099,7 @@ "optional": "", "or": "", "organization_name": "", + "organize_projects": "", "organize_tags": "", "other": "", "other_causes_of_compile_timeouts": "", diff --git a/services/web/frontend/js/features/project-list/components/project-list-events.ts b/services/web/frontend/js/features/project-list/components/project-list-events.ts index 03e426bc7e..eda62016ed 100644 --- a/services/web/frontend/js/features/project-list/components/project-list-events.ts +++ b/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( ( event: T, payload: ExtraSegmentations[T] - ) => sendMB(event, payload), - [] + ) => + sendMB(event, { ...payload, 'sidebar-navigation-ui-update': hasDsNav }), + [hasDsNav] ) } diff --git a/services/web/frontend/js/features/project-list/components/project-list-root.tsx b/services/web/frontend/js/features/project-list/components/project-list-root.tsx index a9736310f5..420b2454ab 100644 --- a/services/web/frontend/js/features/project-list/components/project-list-root.tsx +++ b/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 + const loadingComponent = ( + + ) + + if (hasDsNav) { + return loadingComponent + } else { + return ( + +
{loadingComponent}
+
+ ) + } } if (totalProjectsCount === 0) { @@ -88,12 +106,18 @@ function ProjectListPageContent() { ) - } else { + } else if (hasDsNav) { return ( ) + } else { + return ( + + + + ) } } diff --git a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-filters.tsx b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-filters.tsx index efcba056be..799ccbd6f3 100644 --- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-filters.tsx +++ b/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 (
    @@ -37,9 +39,11 @@ export default function SidebarFilters() { -
  • -
    -
  • + {hasDsNav && ( +
  • +
    +
  • + )}
) diff --git a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx index a07d82d12f..b149a6b44c 100644 --- a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx +++ b/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 ( <>
  • @@ -67,7 +74,11 @@ export default function TagsList() { color: getTagColor(tag), }} > - + {isDsNav ? ( + + ) : ( + + )} {tag.name}{' '} @@ -83,7 +94,7 @@ export default function TagsList() { id={`${tag._id}-dropdown-toggle`} data-testid="tag-dropdown-toggle" > - + {isDsNav && } { 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 (
    diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 24103e7851..bb69866dd0 100644 --- a/services/web/locales/en.json +++ b/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", diff --git a/services/web/test/frontend/features/project-list/components/sidebar/tags-list.test.tsx b/services/web/test/frontend/features/project-list/components/sidebar/tags-list.test.tsx index c1a97ca496..a15d44538a 100644 --- a/services/web/test/frontend/features/project-list/components/sidebar/tags-list.test.tsx +++ b/services/web/test/frontend/features/project-list/components/sidebar/tags-list.test.tsx @@ -42,7 +42,7 @@ describe('', 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', diff --git a/services/web/test/frontend/features/project-list/components/survey-widget.test.tsx b/services/web/test/frontend/features/project-list/components/survey-widget.test.tsx index 798703d0af..91cc020d4e 100644 --- a/services/web/test/frontend/features/project-list/components/survey-widget.test.tsx +++ b/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 { SplitTestProvider } from '@/shared/context/split-test-context' +import SurveyWidget from '../../../../../frontend/js/features/project-list/components/survey-widget' -describe('', function () { +describe('', function () { beforeEach(function () { this.name = 'my-survey' this.preText = 'To help shape the future of Overleaf' @@ -22,11 +21,7 @@ describe('', function () { url: this.url, }) - render( - - - - ) + render() }) it('shows text and link', function () { @@ -34,10 +29,9 @@ describe('', 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('', function () { }) localStorage.setItem('dismissed-my-survey', 'true') - render( - - - - ) + render() }) it('nothing is displayed', function () { @@ -87,11 +77,7 @@ describe('', function () { describe('survey widget is not shown when no survey is configured', function () { beforeEach(function () { - render( - - - - ) + render() }) it('nothing is displayed', function () { diff --git a/services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx b/services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx index 8903fc3089..5a301a3200 100644 --- a/services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx +++ b/services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx @@ -63,14 +63,12 @@ describe('', 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', []) })