Merge pull request #32968 from overleaf/worktree-labs-feature-preview

Add labs preview modal to editor

GitOrigin-RevId: 0df33135febc8e94129bcdfdfb5c4981326dfab0

services/web/frontend/extracted-translations.json

@@ -641,6 +641,7 @@
   "example_project": "",
   "existing_plan_active_until_term_end": "",
   "expand": "",
+  "experiment_enabled_refresh_page": "",
   "experiment_full_check_back_soon": "",
   "expired": "",
   "expired_confirmation_code": "",
@@ -1036,6 +1037,8 @@
   "knowledge_base": "",
   "labels_help_you_to_easily_reference_your_figures": "",
   "labels_help_you_to_reference_your_tables": "",
+  "labs_ongoing_experiments": "",
+  "labs_settings": "",
   "language": "",
   "last_active": "",
   "last_active_description": "",
@@ -1230,6 +1233,7 @@
   "need_to_add_new_primary_before_remove": "",
   "need_to_leave": "",
   "neither_agree_nor_disagree": "",
+  "new": "",
   "new_compile_domain_notice": "",
   "new_compiles_in_this_project_will_automatically_use_the_newest_version": "",
   "new_file": "",
@@ -1988,6 +1992,7 @@
   "tex_live_version": "",
   "thank_you": "",
   "thank_you_exclamation": "",
+  "thank_you_for_participating_feedback": "",
   "thank_you_for_your_feedback": "",
   "thanks_for_confirming_your_email_address": "",
   "thanks_for_getting_in_touch": "",

services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx

@@ -14,6 +14,7 @@ type RailActionButton = {
   icon: AvailableUnfilledIcon
   title: string
   action: () => void
+  indicator?: ReactElement
   hide?: boolean
   ref?: React.Ref<HTMLButtonElement>
 }
@@ -23,6 +24,7 @@ type RailDropdown = {
   icon: AvailableUnfilledIcon
   title: string
   dropdown: ReactElement
+  indicator?: ReactElement
   hide?: boolean
   ref?: React.Ref<HTMLButtonElement>
 }
@@ -57,10 +59,9 @@ const RailActionElement = forwardRef<HTMLButtonElement, { action: RailAction }>(
                 as="button"
                 aria-label={action.title}
               >
-                <MaterialIcon
-                  className="ide-rail-tab-link-icon"
+                <RailActionIcon
                   type={action.icon}
-                  unfilled
+                  indicator={action.indicator}
                 />
               </DropdownToggle>
             </span>
@@ -81,11 +82,7 @@ const RailActionElement = forwardRef<HTMLButtonElement, { action: RailAction }>(
             className="ide-rail-tab-link ide-rail-tab-button"
             aria-label={action.title}
           >
-            <MaterialIcon
-              className="ide-rail-tab-link-icon"
-              type={action.icon}
-              unfilled
-            />
+            <RailActionIcon type={action.icon} indicator={action.indicator} />
           </button>
         </OLTooltip>
       )
@@ -93,6 +90,21 @@ const RailActionElement = forwardRef<HTMLButtonElement, { action: RailAction }>(
   }
 )
 
+function RailActionIcon({
+  type,
+  indicator,
+}: {
+  type: AvailableUnfilledIcon
+  indicator?: ReactElement
+}) {
+  return (
+    <>
+      <MaterialIcon className="ide-rail-tab-link-icon" type={type} unfilled />
+      {indicator}
+    </>
+  )
+}
+
 RailActionElement.displayName = 'RailActionElement'
 
 export default RailActionElement

services/web/frontend/js/features/ide-react/components/rail/rail-indicator.tsx

@@ -1,7 +1,7 @@
 import OLBadge from '@/shared/components/ol/ol-badge'
 
 type RailIndicatorProps = {
-  type: 'danger' | 'warning' | 'info'
+  type: 'danger' | 'warning' | 'info' | 'success'
   count: number
 }
 

services/web/frontend/js/features/ide-react/components/rail/rail-modals.tsx

@@ -6,11 +6,21 @@ import {
 import { RailHelpContactUsModal } from './contact-us'
 import { RailHelpShowHotkeysModal } from './keyboard-shortcuts'
 import DictionarySettingsModal from '@/features/settings/components/editor-settings/dictionary-settings-modal'
+import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 
-const RAIL_MODALS: {
+type RailModalEntry = {
   key: RailModalKey
   modalComponentFunction: FC<{ show: boolean }>
-}[] = [
+}
+
+const moduleRailModals = (
+  importOverleafModules('railModals') as {
+    import: { default: RailModalEntry }
+    path: string
+  }[]
+).map(({ import: { default: entry } }) => entry)
+
+const RAIL_MODALS: RailModalEntry[] = [
   {
     key: 'keyboard-shortcuts',
     modalComponentFunction: RailHelpShowHotkeysModal,
@@ -23,6 +33,7 @@ const RAIL_MODALS: {
     key: 'dictionary',
     modalComponentFunction: DictionarySettingsModal,
   },
+  ...moduleRailModals,
 ]
 
 export default function RailModals() {

services/web/frontend/js/features/ide-react/components/rail/rail.tsx

@@ -56,6 +56,13 @@ const moduleRailPopovers = (
   }[]
 ).map(({ import: { default: element } }) => element)
 
+const moduleRailActions = (
+  importOverleafModules('railActions') as {
+    import: { default: RailAction }
+    path: string
+  }[]
+).map(({ import: { default: action } }) => action)
+
 export const RailLayout = () => {
   const { sendEvent } = useEditorAnalytics()
   const { t } = useTranslation()
@@ -152,6 +159,7 @@ export const RailLayout = () => {
         title: t('help'),
         dropdown: <RailHelpDropdown />,
       },
+      ...moduleRailActions,
       {
         key: 'settings',
         icon: 'settings',

services/web/frontend/js/features/ide-react/context/rail-context.tsx

@@ -25,7 +25,15 @@ export type RailTabKey =
   | 'full-project-search'
   | 'workbench'
 
-export type RailModalKey = 'keyboard-shortcuts' | 'contact-us' | 'dictionary'
+export type RailModalKey =
+  | 'keyboard-shortcuts'
+  | 'contact-us'
+  | 'dictionary'
+  | 'labs'
+
+export function dispatchOpenRailModal(key: RailModalKey) {
+  window.dispatchEvent(new CustomEvent('ui:open-rail-modal', { detail: key }))
+}
 
 const RailContext = createContext<
   | {
@@ -119,6 +127,16 @@ export const RailProvider: FC<React.PropsWithChildren> = ({ children }) => {
     }, [handlePaneCollapse, selectedTab, isOpen, openTab])
   )
 
+  useEventListener(
+    'ui:open-rail-modal',
+    useCallback(
+      (event: Event) => {
+        setActiveModal((event as CustomEvent<RailModalKey>).detail)
+      },
+      [setActiveModal]
+    )
+  )
+
   useEventListener(
     'keydown',
     useCallback(

services/web/frontend/js/shared/components/labs/labs-enable-button.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next'
+import OLButton from '@/shared/components/ol/ol-button'
+
+type LabsEnableButtonProps = {
+  optedIn: boolean
+  disabled: boolean
+  loading?: boolean
+  ghost?: boolean
+  handleEnable: () => void
+  handleDisable: () => void
+}
+
+export function LabsEnableButton({
+  optedIn,
+  disabled,
+  loading,
+  ghost,
+  handleEnable,
+  handleDisable,
+}: LabsEnableButtonProps) {
+  const { t } = useTranslation()
+  const isDisabled = loading || disabled
+
+  if (optedIn) {
+    return (
+      <OLButton
+        variant={ghost ? 'danger-ghost' : 'secondary'}
+        onClick={handleDisable}
+        disabled={isDisabled}
+      >
+        {t('disable')}
+      </OLButton>
+    )
+  }
+
+  return (
+    <OLButton
+      variant={ghost ? 'secondary' : 'primary'}
+      onClick={handleEnable}
+      disabled={isDisabled}
+    >
+      {t('enable')}
+    </OLButton>
+  )
+}

services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx

@@ -5,6 +5,7 @@ import { postJSON } from '@/infrastructure/fetch-json'
 import OLButton from '@/shared/components/ol/ol-button'
 import getMeta from '@/utils/meta'
 import Notification from '../notification'
+import { LabsEnableButton } from '@/shared/components/labs/labs-enable-button'
 
 export type LabsExperimentWidgetProps = {
   logo: ReactNode
@@ -96,11 +97,11 @@ export function LabsExperimentWidget({
       </div>
       <div>
         {labsEnabled && (
-          <ActionButton
+          <LabsEnableButton
             optedIn={optedIn}
-            handleDisable={handleDisable}
-            handleEnable={handleEnable}
             disabled={disabled}
+            handleEnable={handleEnable}
+            handleDisable={handleDisable}
           />
         )}
       </div>
@@ -119,40 +120,4 @@ export function LabsExperimentWidget({
   )
 }
 
-type ActionButtonProps = {
-  optedIn?: boolean
-  disabled?: boolean
-  handleEnable: () => void
-  handleDisable: () => void
-}
-
-function ActionButton({
-  optedIn,
-  disabled,
-  handleEnable,
-  handleDisable,
-}: ActionButtonProps) {
-  const { t } = useTranslation()
-
-  if (optedIn) {
-    return (
-      <OLButton variant="secondary" onClick={handleDisable}>
-        {t('disable')}
-      </OLButton>
-    )
-  } else if (disabled) {
-    return (
-      <OLButton variant="primary" disabled>
-        {t('enable')}
-      </OLButton>
-    )
-  } else {
-    return (
-      <OLButton variant="primary" onClick={handleEnable}>
-        {t('enable')}
-      </OLButton>
-    )
-  }
-}
-
 export default LabsExperimentWidget

services/web/frontend/js/utils/meta.ts

@@ -206,6 +206,7 @@ export interface Meta {
     surveyLink: string
     isFull: boolean
     optedIn: boolean
+    versionCreatedAt: string | null
   }>
   'ol-languages': SpellCheckLanguage[]
   'ol-learnedWords': string[]

services/web/frontend/stylesheets/modules/labs.scss

@@ -9,10 +9,6 @@
   }
 
   #experiments-container {
-    .title-row {
-      display: flex;
-    }
-
     .labs-experiment-widget-container {
       border: 1px solid var(--border-divider);
     }
@@ -60,13 +56,12 @@
     }
 
     .title-row {
-      margin: 0;
-      margin-bottom: var(--spacing-04);
+      display: flex;
       align-items: center;
+      margin: 0 0 var(--spacing-04) 0;
 
       > h3 {
-        margin: 0;
-        margin-right: var(--spacing-04);
+        margin: 0 var(--spacing-04) 0 0;
       }
     }
 
@@ -96,14 +91,229 @@
   }
 }
 
-.labs-workbench-logo {
-  width: 32px;
-  height: 32px;
-  padding: var(--spacing-01);
+// Feature Preview Modal
+.labs-feature-preview-modal {
+  .modal-header {
+    padding-bottom: var(--spacing-04);
+    border-bottom: 1px solid var(--border-divider);
+  }
 
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
+  .modal-body {
+    padding: 0;
+  }
+}
+
+.labs-feature-preview-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-09);
+  color: var(--content-secondary);
+}
+
+// Experiment Browser (two-panel layout)
+.lab-experiment-modal-content {
+  container-type: inline-size;
+  container-name: lab-experiment-modal-content;
+}
+
+.lab-experiment-modal-content-inner {
+  display: flex;
+  height: 100%;
+}
+
+.labs-experiment-tab-content {
+  flex: 1;
+  min-width: 0;
+}
+
+// Fixed height in the feature preview modal, where the modal body constrains the layout
+.labs-feature-preview-modal .lab-experiment-modal-content-inner {
+  height: 500px;
+}
+
+.labs-experiment-sidebar {
+  width: 320px;
+  border-right: 1px solid var(--border-divider);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.labs-experiment-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-04);
+  padding: var(--spacing-04) var(--spacing-05);
+  text-align: left;
+  color: var(--content-primary);
+  font-size: var(--font-size-02);
+  min-height: 44px;
+  text-decoration: none;
+
+  &:hover {
+    background: var(--bg-light-secondary);
+    color: var(--content-primary);
+  }
+
+  &.active {
+    background: var(--bg-accent-03);
+    color: var(--content-primary);
+
+    .labs-experiment-sidebar-title {
+      color: var(--green-70);
+      font-weight: 600;
+    }
+  }
+}
+
+.labs-experiment-sidebar-icon {
+  font-size: 20px;
+  color: var(--content-primary);
+}
+
+.labs-experiment-sidebar-title {
+  flex: 1;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.labs-experiment-sidebar-badge {
+  // Reserve a fixed width so layout is stable whether badge is shown or not
+  min-width: 60px;
+  text-align: right;
+}
+
+.labs-settings-link {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--spacing-04);
+  padding: var(--spacing-04) var(--spacing-05);
+  text-align: left;
+  color: var(--content-primary);
+  font-size: var(--font-size-02);
+  min-height: 44px;
+  width: 100%;
+  text-decoration: none;
+
+  &:visited {
+    color: var(--content-primary);
+  }
+
+  &:hover {
+    background: var(--bg-light-secondary);
+    color: var(--content-primary);
+  }
+}
+
+.labs-settings-link-external-icon {
+  font-size: 20px;
+  color: var(--content-secondary);
+}
+
+.labs-badge {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 3px 8px;
+}
+
+.labs-experiment-sidebar-arrow {
+  display: none;
+  font-size: 18px;
+  color: var(--content-secondary);
+}
+
+// !important needed to override Bootstrap's d-inline-grid utility on OLIconButton
+.labs-experiment-detail-back {
+  display: none !important;
+}
+
+.labs-experiment-detail {
+  padding: var(--spacing-06);
+  overflow-y: auto;
+
+  > .notification {
+    margin-bottom: var(--spacing-06);
+
+    .notification-cta {
+      align-self: center;
+      height: auto;
+    }
+  }
+}
+
+.labs-experiment-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-06);
+
+  h3 {
+    margin: 0;
+    font-size: var(--font-size-05);
+  }
+}
+
+.labs-experiment-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-04);
+  margin-bottom: var(--spacing-06);
+}
+
+.labs-experiment-detail-description {
+  margin-bottom: var(--spacing-06);
+  color: var(--content-secondary);
+  font-size: var(--font-size-02);
+  line-height: var(--line-height-03);
+}
+
+// Narrow layout: drill-down navigation instead of side-by-side panels
+// Uses container queries so this triggers based on the browser component's own width,
+// not the viewport — works correctly whether embedded in the labs modal or the settings modal.
+@container lab-experiment-modal-content (width < 600px) {
+  .lab-experiment-modal-content-inner {
+    flex-direction: column;
+    min-height: auto;
+  }
+
+  .labs-experiment-sidebar {
+    width: 100%;
+    border-right: none;
+  }
+
+  .labs-experiment-sidebar-item {
+    padding: var(--spacing-05) var(--spacing-06);
+  }
+
+  .labs-experiment-sidebar-arrow {
+    display: block;
+  }
+
+  .labs-experiment-sidebar-badge {
+    min-width: auto;
+  }
+
+  .labs-experiment-tab-content {
+    display: none;
+  }
+
+  .labs-experiment-detail-back {
+    display: inline-flex !important;
+    margin-bottom: var(--spacing-05);
+  }
+
+  // When an experiment is selected, show detail and hide sidebar
+  .lab-experiment-modal-content.mobile-detail-active {
+    .labs-experiment-sidebar {
+      display: none;
+    }
+
+    .labs-experiment-tab-content {
+      display: block;
+    }
   }
 }