Merge pull request #16358 from overleaf/rd-tear-down-welcome-page

[web] Tear down welcome-page-redesign split test

GitOrigin-RevId: 769aeae75eac6ac0b5880dca4ec1d36fbc39cea2

services/web/app/src/Features/Project/ProjectListController.js

@@ -325,22 +325,6 @@ async function projectListPage(req, res, next) {
       )
     }
   }
-
-  let welcomePageRedesignAssignment = { variant: 'default' }
-
-  try {
-    welcomePageRedesignAssignment =
-      await SplitTestHandler.promises.getAssignment(
-        req,
-        res,
-        'welcome-page-redesign'
-      )
-  } catch (error) {
-    logger.error(
-      { err: error },
-      'failed to get "welcome-page-redesign" split test assignment'
-    )
-  }
   try {
     // The assignment will be picked up via 'ol-splitTestVariants' in react.
     await SplitTestHandler.promises.getAssignment(
@@ -518,7 +502,6 @@ async function projectListPage(req, res, next) {
     inrGeoBannerVariant,
     inrGeoBannerSplitTestName,
     projectDashboardReact: true, // used in navbar
-    welcomePageRedesignVariant: welcomePageRedesignAssignment.variant,
     groupSsoSetupSuccess,
     groupSubscriptionsPendingEnrollment:
       groupSubscriptionsPendingEnrollment.map(subscription => ({

services/web/app/views/project/list-react.pug

@@ -33,7 +33,6 @@ block append meta
 	meta(name="ol-inrGeoBannerSplitTestName" data-type="string" content=inrGeoBannerSplitTestName)
 	meta(name="ol-showLATAMBanner" data-type="boolean" content=showLATAMBanner)
 	meta(name="ol-recommendedCurrency" data-type="string" content=recommendedCurrency)
-	meta(name="ol-welcomePageRedesignVariant" data-type="string" content=welcomePageRedesignVariant)
 	meta(name="ol-groupSubscriptionsPendingEnrollment" data-type="json" content=groupSubscriptionsPendingEnrollment)
 	meta(name="ol-hasIndividualRecurlySubscription" data-type="boolean" content=hasIndividualRecurlySubscription)
 	meta(name="ol-newNotificationStyle" data-type="boolean" content=newNotificationStyle)

services/web/frontend/extracted-translations.json

@@ -213,7 +213,6 @@
   "coupons_not_included": "",
   "create": "",
   "create_a_new_project": "",
-  "create_first_project": "",
   "create_new_subscription": "",
   "create_new_tag": "",
   "create_project_in_github": "",
@@ -618,7 +617,6 @@
   "last_updated_date_by_x": "",
   "last_used": "",
   "latam_discount_offer": "",
-  "latex_help_guide": "",
   "latex_places_figures_according_to_a_special_algorithm": "",
   "latex_places_tables_according_to_a_special_algorithm": "",
   "layout": "",
@@ -755,7 +753,6 @@
   "new_subscription_will_be_billed_immediately": "",
   "new_tag": "",
   "new_tag_name": "",
-  "new_to_latex_look_at": "",
   "newsletter": "",
   "newsletter_onboarding_accept": "",
   "next": "",

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

@@ -23,8 +23,6 @@ import ProjectListTitle from './title/project-list-title'
 import Sidebar from './sidebar/sidebar'
 import LoadMore from './load-more'
 import { useEffect } from 'react'
-import getMeta from '../../../utils/meta'
-import WelcomeMessageNew from './welcome-message-new'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 import { GenericErrorBoundaryFallback } from '../../../shared/components/generic-error-boundary-fallback'
 
@@ -63,9 +61,6 @@ function ProjectListPageContent() {
   } = useProjectListContext()
 
   const selectedTag = tags.find(tag => tag._id === selectedTagId)
-  const welcomePageRedesignVariant = getMeta(
-    'ol-welcomePageRedesignVariant'
-  ) as 'enabled' | 'default'
 
   useEffect(() => {
     eventTracking.sendMB('loads_v2_dash', {})
@@ -176,11 +171,7 @@ function ProjectListPageContent() {
                     <UserNotifications />
                   </Col>
                 </Row>
-                {welcomePageRedesignVariant === 'enabled' ? (
+                <WelcomeMessage />
-                  <WelcomeMessageNew />
-                ) : (
-                  <WelcomeMessage />
-                )}
               </Col>
             </Row>
           </div>

services/web/frontend/js/features/project-list/components/welcome-message-new.tsx

@@ -1,57 +0,0 @@
-import { useState, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { sendMB } from '../../../infrastructure/event-tracking'
-import NewProjectButtonModal from './new-project-button/new-project-button-modal'
-import type { NewProjectButtonModalVariant } from './new-project-button/new-project-button-modal'
-import type { Nullable } from '../../../../../types/utils'
-import WelcomeMessageLink from './welcome-message-new/welcome-message-link'
-import WelcomeMessageCreateNewProjectDropdown from './welcome-message-new/welcome-message-create-new-project-dropdown'
-
-export default function WelcomeMessageNew() {
-  const { t } = useTranslation()
-  const [activeModal, setActiveModal] =
-    useState<Nullable<NewProjectButtonModalVariant>>(null)
-
-  const handleTemplatesClick = useCallback(() => {
-    sendMB('welcome-page-templates-click', {
-      'welcome-page-redesign': 'enabled',
-    })
-  }, [])
-
-  const handleLatexHelpClick = useCallback(() => {
-    sendMB('welcome-page-latex-help-click', {
-      'welcome-page-redesign': 'enabled',
-    })
-  }, [])
-
-  return (
-    <>
-      <div className="card welcome-new-wrapper">
-        <div className="welcome text-centered">
-          <h2 className="welcome-title">{t('welcome_to_sl')}</h2>
-          <div className="welcome-message-cards-wrapper">
-            <WelcomeMessageCreateNewProjectDropdown
-              setActiveModal={modal => setActiveModal(modal)}
-            />
-            <WelcomeMessageLink
-              imgSrc="/img/welcome-page/learn-latex.svg"
-              title="Learn LaTeX with a tutorial"
-              href="/learn/latex/Learn_LaTeX_in_30_minutes"
-              onClick={handleLatexHelpClick}
-            />
-            <WelcomeMessageLink
-              imgSrc="/img/welcome-page/browse-templates.svg"
-              title="Browse templates"
-              href="/templates"
-              onClick={handleTemplatesClick}
-            />
-          </div>
-        </div>
-      </div>
-      <NewProjectButtonModal
-        modal={activeModal}
-        onHide={() => setActiveModal(null)}
-      />
-    </>
-  )
-}

services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx

@@ -20,7 +20,6 @@ function WelcomeMessageCreateNewProjectDropdown({
 
   const handleClick = useCallback(() => {
     sendMB('welcome-page-create-first-project-click', {
-      'welcome-page-redesign': 'enabled',
       dropdownMenu: 'main-button',
       dropdownOpen: showDropdown,
     })
@@ -55,7 +54,6 @@ function WelcomeMessageCreateNewProjectDropdown({
       setShowDropdown(false)
 
       sendMB('welcome-page-create-first-project-click', {
-        'welcome-page-redesign': 'enabled',
         dropdownOpen: true,
         dropdownMenu: dropdownMenuEvent,
       })
@@ -75,7 +73,6 @@ function WelcomeMessageCreateNewProjectDropdown({
       setShowDropdown(false)
 
       sendMB('welcome-page-create-first-project-click', {
-        'welcome-page-redesign': 'enabled',
         dropdownMenu: 'institution-template',
         dropdownOpen: true,
         institutionTemplateName,

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

@@ -1,51 +1,42 @@
-import { useCallback } from 'react'
+import { useState } from 'react'
-import { Col, Row } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { sendMB } from '../../../infrastructure/event-tracking'
+import NewProjectButtonModal from './new-project-button/new-project-button-modal'
-import NewProjectButton from './new-project-button'
+import type { NewProjectButtonModalVariant } from './new-project-button/new-project-button-modal'
+import type { Nullable } from '../../../../../types/utils'
+import WelcomeMessageLink from './welcome-message-new/welcome-message-link'
+import WelcomeMessageCreateNewProjectDropdown from './welcome-message-new/welcome-message-create-new-project-dropdown'
 
 export default function WelcomeMessage() {
   const { t } = useTranslation()
-
+  const [activeModal, setActiveModal] =
-  const handleTemplatesClick = useCallback(() => {
+    useState<Nullable<NewProjectButtonModalVariant>>(null)
-    sendMB('welcome-page-templates-click', {
-      'welcome-page-redesign': 'default',
-    })
-  }, [])
-
-  const handleLatexHelpClick = useCallback(() => {
-    sendMB('welcome-page-latex-help-click', {
-      'welcome-page-redesign': 'default',
-    })
-  }, [])
 
   return (
-    <div className="card card-thin">
+    <>
-      <div className="welcome text-centered">
+      <div className="card welcome-new-wrapper">
-        <h2>{t('welcome_to_sl')}</h2>
+        <div className="welcome text-centered">
-        <p>
+          <h2 className="welcome-title">{t('welcome_to_sl')}</h2>
-          {t('new_to_latex_look_at')}&nbsp;
+          <div className="welcome-message-cards-wrapper">
-          <a href="/templates" onClick={handleTemplatesClick}>
+            <WelcomeMessageCreateNewProjectDropdown
-            {t('templates').toLowerCase()}
+              setActiveModal={modal => setActiveModal(modal)}
-          </a>
+            />
-          &nbsp;{t('or')}&nbsp;
+            <WelcomeMessageLink
-          <a href="/learn" onClick={handleLatexHelpClick}>
+              imgSrc="/img/welcome-page/learn-latex.svg"
-            {t('latex_help_guide')}
+              title="Learn LaTeX with a tutorial"
-          </a>
+              href="/learn/latex/Learn_LaTeX_in_30_minutes"
-        </p>
+            />
-        <Row>
+            <WelcomeMessageLink
-          <Col md={4} mdOffset={4}>
+              imgSrc="/img/welcome-page/browse-templates.svg"
-            <div className="dropdown minimal-create-proj-dropdown">
+              title="Browse templates"
-              <NewProjectButton
+              href="/templates"
-                id="new-project-button-welcome"
+            />
-                menuClassName="minimal-create-proj-dropdown-menu"
+          </div>
-                buttonText={t('create_first_project')}
+        </div>
-                trackingKey="welcome-page-create-first-project-click"
-              />
-            </div>
-          </Col>
-        </Row>
       </div>
-    </div>
+      <NewProjectButtonModal
+        modal={activeModal}
+        onHide={() => setActiveModal(null)}
+      />
+    </>
   )
 }

services/web/frontend/stylesheets/app/project-list.less

@@ -565,13 +565,3 @@ i.tablesort {
     font-weight: 700;
   }
 }
-
-.minimal-create-proj-dropdown {
-  text-align: center;
-
-  &-menu {
-    width: 200px;
-    left: 50%;
-    margin-left: -100px;
-  }
-}

services/web/locales/en.json

@@ -330,7 +330,6 @@
   "create_a_new_password_for_your_account": "Create a new password for your account",
   "create_a_new_project": "Create a new project",
   "create_first_admin_account": "Create the first Admin account",
-  "create_first_project": "Create First Project",
   "create_new_account": "Create new account",
   "create_new_subscription": "Create New Subscription",
   "create_new_tag": "Create new tag",
@@ -946,7 +945,6 @@
   "latex_examples_page_summary": "Examples of powerful LaTeX packages and techniques in use — a great way to learn LaTeX by example. Search or browse below.",
   "latex_examples_page_title": "Examples - Equations, Formatting, TikZ, Packages and More",
   "latex_guides": "LaTeX guides",
-  "latex_help_guide": "LaTeX help guide",
   "latex_in_thirty_minutes": "LaTeX in 30 minutes",
   "latex_places_figures_according_to_a_special_algorithm": "LaTeX places figures according to a special algorithm. You can use something called ‘placement parameters’ to influence the positioning of the figure. <0>Find out how</>",
   "latex_places_tables_according_to_a_special_algorithm": "LaTeX places tables according to a special algorithm. You can use “placement parameters” to influence the position of the table. <0>This article</0> explains how to do this.",
@@ -1144,7 +1142,6 @@
   "new_subscription_will_be_billed_immediately": "Your new subscription will be billed immediately to your current payment method.",
   "new_tag": "New Tag",
   "new_tag_name": "New tag name",
-  "new_to_latex_look_at": "New to LaTeX? Start by having a look at our",
   "newsletter": "Newsletter",
   "newsletter-accept": "I’d like emails about product offers and company news and events.",
   "newsletter_info_note": "Please note: you will still receive important emails, such as project invites and security notifications (password resets, account linking, etc).",

services/web/test/frontend/features/project-list/components/welcome-message.test.tsx

@@ -1,14 +1,14 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import WelcomeMessageNew from '../../../../../frontend/js/features/project-list/components/welcome-message-new'
+import WelcomeMessage from '../../../../../frontend/js/features/project-list/components/welcome-message'
 import { expect } from 'chai'
 
-describe('<WelcomeMessageNew />', function () {
+describe('<WelcomeMessage />', function () {
   afterEach(function () {
     window.metaAttributesCache = new Map()
   })
 
   it('renders welcome page correctly', function () {
-    render(<WelcomeMessageNew />)
+    render(<WelcomeMessage />)
 
     screen.getByText('Welcome to Overleaf')
     screen.getByText('Create a new project')
@@ -17,7 +17,7 @@ describe('<WelcomeMessageNew />', function () {
   })
 
   it('shows correct dropdown when clicking create a new project', function () {
-    render(<WelcomeMessageNew />)
+    render(<WelcomeMessage />)
 
     const button = screen.getByRole('button', {
       name: 'Create a new project',
@@ -39,7 +39,7 @@ describe('<WelcomeMessageNew />', function () {
       },
     ])
 
-    render(<WelcomeMessageNew />)
+    render(<WelcomeMessage />)
 
     const button = screen.getByRole('button', {
       name: 'Create a new project',
@@ -66,7 +66,7 @@ describe('<WelcomeMessageNew />', function () {
   })
 
   it('shows correct dropdown when clicking create a new project with a portal template', function () {
-    render(<WelcomeMessageNew />)
+    render(<WelcomeMessage />)
 
     const button = screen.getByRole('button', {
       name: 'Create a new project',
@@ -81,7 +81,7 @@ describe('<WelcomeMessageNew />', function () {
   })
 
   it('shows correct link for latex tutorial menu', function () {
-    render(<WelcomeMessageNew />)
+    render(<WelcomeMessage />)
 
     const link = screen.getByRole('link', {
       name: 'Learn LaTeX with a tutorial',
@@ -93,7 +93,7 @@ describe('<WelcomeMessageNew />', function () {
   })
 
   it('shows correct link for browse templates menu', function () {
-    render(<WelcomeMessageNew />)
+    render(<WelcomeMessage />)
 
     const link = screen.getByRole('link', {
       name: 'Browse templates',