From 170f5a72ddcc8b10db8eef2bbb6a6e98d9b0cc4a Mon Sep 17 00:00:00 2001 From: Antoine Clausse Date: Fri, 17 Jan 2025 09:06:22 +0100 Subject: [PATCH] [web] Scope ds-nav split test to project list (#22689) * Add `dsNavStyle` prop, so `sidebar-navigation-ui-update` doesn't change all pages * Use `useIsDsNav` instead of `useSplitTestContext` * Create a `useDsNavStyle` hook * Use `useDsNavStyle` * Add comment on `useIsDsNav` and `NavStyleContext` * Revert "Hide nav dropdown chevron icon in welcome page" This reverts commit 78b5ba85 * Move `DsNavStyleProvider` usage to project-list-ds-nav.tsx * Fix typo * Simplify `useDsNavStyle` conditions GitOrigin-RevId: df3fe66d772919c40df69d357bee6949ab413928 --- .../components/add-affiliation.tsx | 6 ++--- .../components/project-list-root.tsx | 20 +++++++------- .../components/sidebar/sidebar-filters.tsx | 6 ++--- .../project-list/components/use-is-ds-nav.ts | 6 ----- .../project-list/components/use-is-ds-nav.tsx | 27 +++++++++++++++++++ .../bootstrap-5/navbar/account-menu-items.tsx | 6 ++--- .../bootstrap-5/navbar/nav-dropdown-menu.tsx | 8 +++--- .../pages/project-list-ds-nav.scss | 5 ---- .../bootstrap-5/pages/project-list.scss | 5 ---- 9 files changed, 49 insertions(+), 40 deletions(-) delete mode 100644 services/web/frontend/js/features/project-list/components/use-is-ds-nav.ts create mode 100644 services/web/frontend/js/features/project-list/components/use-is-ds-nav.tsx diff --git a/services/web/frontend/js/features/project-list/components/add-affiliation.tsx b/services/web/frontend/js/features/project-list/components/add-affiliation.tsx index 0a60301b1a..64a653d697 100644 --- a/services/web/frontend/js/features/project-list/components/add-affiliation.tsx +++ b/services/web/frontend/js/features/project-list/components/add-affiliation.tsx @@ -3,7 +3,7 @@ import { useProjectListContext } from '../context/project-list-context' import getMeta from '../../../utils/meta' import classNames from 'classnames' import OLButton from '@/features/ui/components/ol/ol-button' -import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav' +import { useDsNavStyle } from '@/features/project-list/components/use-is-ds-nav' export function useAddAffiliation() { const { totalProjectsCount } = useProjectListContext() @@ -22,7 +22,7 @@ type AddAffiliationProps = { function AddAffiliation({ className }: AddAffiliationProps) { const { t } = useTranslation() const { show } = useAddAffiliation() - const isDsNav = useIsDsNav() + const dsNavStyle = useDsNavStyle() if (!show) { return null @@ -32,7 +32,7 @@ function AddAffiliation({ className }: AddAffiliationProps) { return (
-

+

{t('are_you_affiliated_with_an_institution')}

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 684aaa8025..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 @@ -3,10 +3,7 @@ import { ProjectListProvider, useProjectListContext, } from '../context/project-list-context' -import { - SplitTestProvider, - useSplitTestContext, -} from '@/shared/context/split-test-context' +import { SplitTestProvider } from '@/shared/context/split-test-context' import { ColorPickerProvider } from '../context/color-picker-context' import * as eventTracking from '../../../infrastructure/event-tracking' import { useTranslation } from 'react-i18next' @@ -21,6 +18,10 @@ 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, + useIsDsNav, +} from '@/features/project-list/components/use-is-ds-nav' function ProjectListRoot() { const { isReady } = useWaitForI18n() @@ -75,16 +76,13 @@ function ProjectListPageContent() { const { totalProjectsCount, isLoading, loadProgress } = useProjectListContext() - const { splitTestVariants } = useSplitTestContext() - useEffect(() => { eventTracking.sendMB('loads_v2_dash', {}) }, []) const { t } = useTranslation() - const hasDsNav = - splitTestVariants['sidebar-navigation-ui-update'] === 'active' + const hasDsNav = useIsDsNav() if (isLoading) { const loadingComponent = ( @@ -109,7 +107,11 @@ function ProjectListPageContent() { ) } else if (hasDsNav) { - return + 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 34d8e4c1b3..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,7 +5,7 @@ import { } from '../../context/project-list-context' import TagsList from './tags-list' import ProjectsFilterMenu from '../projects-filter-menu' -import { useSplitTestContext } from '@/shared/context/split-test-context' +import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav' type SidebarFilterProps = { filter: Filter @@ -30,9 +30,7 @@ export function SidebarFilter({ filter, text }: SidebarFilterProps) { export default function SidebarFilters() { const { t } = useTranslation() - const { splitTestVariants } = useSplitTestContext() - const hasDsNav = - splitTestVariants['sidebar-navigation-ui-update'] === 'active' + const hasDsNav = useIsDsNav() return (
    diff --git a/services/web/frontend/js/features/project-list/components/use-is-ds-nav.ts b/services/web/frontend/js/features/project-list/components/use-is-ds-nav.ts deleted file mode 100644 index 0d44c46a08..0000000000 --- a/services/web/frontend/js/features/project-list/components/use-is-ds-nav.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { useSplitTestContext } from '@/shared/context/split-test-context' - -export const useIsDsNav = () => { - const { splitTestVariants } = useSplitTestContext() - return splitTestVariants['sidebar-navigation-ui-update'] === 'active' -} diff --git a/services/web/frontend/js/features/project-list/components/use-is-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/use-is-ds-nav.tsx new file mode 100644 index 0000000000..9687f906c3 --- /dev/null +++ b/services/web/frontend/js/features/project-list/components/use-is-ds-nav.tsx @@ -0,0 +1,27 @@ +import { createContext, type FC, type ReactNode, useContext } from 'react' +import { useSplitTestContext } from '@/shared/context/split-test-context' + +/** + * This hook returns whether the user has the split-test assignment 'sidebar-navigation-ui-update' + */ +export const useIsDsNav = () => { + const { splitTestVariants } = useSplitTestContext() + return splitTestVariants['sidebar-navigation-ui-update'] === 'active' +} + +/** + * This context wraps elements that should be styled according to the sidebar-navigation-ui-update redesign + * It doesn't exactly match the split-test assignment because it's only used in the project-list page + */ +const DsNavStyleContext = createContext(undefined) + +export const DsNavStyleProvider: FC<{ + children: ReactNode +}> = ({ children }) => ( + {children} +) + +export const useDsNavStyle = () => { + const context = useContext(DsNavStyleContext) + return context ?? false +} diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/account-menu-items.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/account-menu-items.tsx index cbd0d2c73f..825d56c100 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/account-menu-items.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/account-menu-items.tsx @@ -5,7 +5,7 @@ import type { NavbarSessionUser } from '@/features/ui/components/types/navbar' import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' import NavDropdownDivider from './nav-dropdown-divider' import NavDropdownLinkItem from './nav-dropdown-link-item' -import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav' +import { useDsNavStyle } from '@/features/project-list/components/use-is-ds-nav' import { SignOut } from '@phosphor-icons/react' export function AccountMenuItems({ @@ -17,7 +17,7 @@ export function AccountMenuItems({ }) { const { t } = useTranslation() const logOutFormId = 'logOutForm' - const isDsNav = useIsDsNav() + const dsNavStyle = useDsNavStyle() return ( <> @@ -48,7 +48,7 @@ export function AccountMenuItems({ className="d-flex align-items-center justify-content-between" > {t('log_out')} - {isDsNav && } + {dsNavStyle && }
    diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx index 97f457ef9f..6c588eef46 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx @@ -1,7 +1,7 @@ import { type ReactNode, useState } from 'react' import { Dropdown } from 'react-bootstrap-5' import { CaretUp, CaretDown } from '@phosphor-icons/react' -import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav' +import { useDsNavStyle } from '@/features/project-list/components/use-is-ds-nav' export default function NavDropdownMenu({ title, @@ -15,7 +15,7 @@ export default function NavDropdownMenu({ onToggle?: (nextShow: boolean) => void }) { const [show, setShow] = useState(false) - const isDsNav = useIsDsNav() + const dsNavStyle = useDsNavStyle() // Can't use a NavDropdown here because it's impossible to render the menu as // a
      element using NavDropdown const Caret = show ? CaretUp : CaretDown @@ -31,9 +31,7 @@ export default function NavDropdownMenu({ > {title} - {isDsNav && ( - - )} + {dsNavStyle && } {children} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss index f9126d17b0..dbca1d51f4 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss @@ -316,9 +316,4 @@ @include body-xs; } } - - // Only show the dropdown caret icon in the DS nav version of the project dashboard - .navbar-dropdown-caret { - display: unset; - } } diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss index 4427cbdfba..c6e61099c7 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss @@ -775,8 +775,3 @@ form.project-search { inset: 0; } } - -// Hide expander caret icon by default so that it only ever appears in the DS nav version of the project dashboard -.navbar-dropdown-caret { - display: none; -}