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

Add labs preview modal to editor

GitOrigin-RevId: 0df33135febc8e94129bcdfdfb5c4981326dfab0

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',