Merge pull request #22548 from overleaf/ac-ds-phosphor-icons-and-splittests-bugfix

[web] Reapply  Use icons from @phosphor-icons/react for the project-list (DS nav)

GitOrigin-RevId: b87767b7c875ff4c081590e7bc0111892c0a1435

package-lock.json

@@ -8659,6 +8659,19 @@
       "resolved": "services/web",
       "link": true
     },
+    "node_modules/@phosphor-icons/react": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.7.tgz",
+      "integrity": "sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -41457,6 +41470,7 @@
         "@overleaf/promise-utils": "*",
         "@overleaf/redis-wrapper": "*",
         "@overleaf/settings": "*",
+        "@phosphor-icons/react": "^2.1.7",
         "@slack/webhook": "^7.0.2",
         "@xmldom/xmldom": "^0.7.13",
         "accepts": "^1.3.7",
@@ -51198,6 +51212,7 @@
         "@overleaf/redis-wrapper": "*",
         "@overleaf/settings": "*",
         "@overleaf/stream-utils": "*",
+        "@phosphor-icons/react": "^2.1.7",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
         "@pollyjs/adapter-node-http": "^6.0.6",
         "@pollyjs/core": "^6.0.6",
@@ -53338,6 +53353,12 @@
         }
       }
     },
+    "@phosphor-icons/react": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.7.tgz",
+      "integrity": "sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==",
+      "requires": {}
+    },
     "@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",

services/web/frontend/js/features/header-footer-react/index.tsx

@@ -2,11 +2,17 @@ import ReactDOM from 'react-dom'
 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 { SplitTestProvider } from '@/shared/context/split-test-context'
 
 const navbarElement = document.getElementById('navbar-container')
 if (navbarElement) {
   const navbarProps = getMeta('ol-navbar')
-  ReactDOM.render(<DefaultNavbar {...navbarProps} />, navbarElement)
+  ReactDOM.render(
+    <SplitTestProvider>
+      <DefaultNavbar {...navbarProps} />
+    </SplitTestProvider>,
+    navbarElement
+  )
 }
 
 const footerElement = document.getElementById('footer-container')

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

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import classnames from 'classnames'
+import { Question, User } from '@phosphor-icons/react'
 import NewProjectButton from '../new-project-button'
 import SidebarFilters from './sidebar-filters'
 import AddAffiliation, { useAddAffiliation } from '../add-affiliation'
 import SurveyWidget from '../survey-widget'
-import { usePersistedResize } from '../../../../shared/hooks/use-resize'
-import MaterialIcon from '@/shared/components/material-icon'
+import { usePersistedResize } from '@/shared/hooks/use-resize'
 import { Dropdown } from 'react-bootstrap-5'
 import getMeta from '@/utils/meta'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
@@ -77,11 +77,18 @@ function SidebarDsNav() {
                   }}
                 >
                   <div>
-                    <MaterialIcon type="help" size="2x" />
+                    <Question size={24} />
                   </div>
                 </OLTooltip>
               </Dropdown.Toggle>
-              <Dropdown.Menu as="ul" role="menu" align="end">
+              <Dropdown.Menu
+                as="ul"
+                role="menu"
+                align="end"
+                popperConfig={{
+                  modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
+                }}
+              >
                 <NavDropdownMenuItems
                   dropdown={helpItem.dropdown}
                   showContactUsModal={showContactUsModal}
@@ -105,11 +112,20 @@ function SidebarDsNav() {
                     }}
                   >
                     <div>
-                      <MaterialIcon type="person" size="2x" />
+                      <User size={24} />
                     </div>
                   </OLTooltip>
                 </Dropdown.Toggle>
-                <Dropdown.Menu as="ul" role="menu" align="end">
+                <Dropdown.Menu
+                  as="ul"
+                  role="menu"
+                  align="end"
+                  popperConfig={{
+                    modifiers: [
+                      { name: 'offset', options: { offset: [-50, 5] } },
+                    ],
+                  }}
+                >
                   <AccountMenuItems
                     sessionUser={sessionUser}
                     showSubscriptionLink={showSubscriptionLink}

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

@@ -1,5 +1,6 @@
 import { sortBy } from 'lodash'
 import { useTranslation } from 'react-i18next'
+import { Plus, TagSimple } from '@phosphor-icons/react'
 import MaterialIcon from '../../../../shared/components/material-icon'
 import {
   UNCATEGORIZED_KEY,
@@ -46,7 +47,12 @@ export default function TagsList() {
       </li>
       <li className="tag">
         <button type="button" className="tag-name" onClick={openCreateTagModal}>
-          <MaterialIcon type="add" className="tag-list-icon" />
+          {isDsNav ? (
+            <Plus weight="bold" />
+          ) : (
+            <MaterialIcon type="add" className="tag-list-icon" />
+          )}
+
           <span className="name">{t('new_tag')}</span>
         </button>
       </li>
@@ -68,7 +74,11 @@ export default function TagsList() {
                   color: getTagColor(tag),
                 }}
               >
-                <MaterialIcon type="label" 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}{' '}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/account-menu-items.tsx

@@ -5,6 +5,8 @@ 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 { SignOut } from '@phosphor-icons/react'
 
 export function AccountMenuItems({
   sessionUser,
@@ -15,7 +17,7 @@ export function AccountMenuItems({
 }) {
   const { t } = useTranslation()
   const logOutFormId = 'logOutForm'
-
+  const isDsNav = useIsDsNav()
   return (
     <>
       <Dropdown.Item as="li" disabled role="menuitem">
@@ -43,8 +45,10 @@ export function AccountMenuItems({
           type="submit"
           form={logOutFormId}
           role="menuitem"
+          className="d-flex align-items-center justify-content-between"
         >
-          {t('log_out')}
+          <span>{t('log_out')}</span>
+          {isDsNav && <SignOut size={16} />}
         </Dropdown.Item>
         <form id={logOutFormId} method="POST" action="/logout">
           <input type="hidden" name="_csrf" value={getMeta('ol-csrfToken')} />

services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss

@@ -239,6 +239,7 @@
 
       &.show {
         background-color: var(--bg-accent-03);
+        color: var(--green-60);
       }
 
       &::after {

services/web/package.json

@@ -85,6 +85,7 @@
     "@overleaf/promise-utils": "*",
     "@overleaf/redis-wrapper": "*",
     "@overleaf/settings": "*",
+    "@phosphor-icons/react": "^2.1.7",
     "@slack/webhook": "^7.0.2",
     "@xmldom/xmldom": "^0.7.13",
     "accepts": "^1.3.7",