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

Add labs preview modal to editor

GitOrigin-RevId: 0df33135febc8e94129bcdfdfb5c4981326dfab0

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