Merge pull request #29789 from overleaf/mj-workbench-labs-experiment

[web] Add workbench labs experiment

GitOrigin-RevId: 9369c48ae9b818bdcce767811e284e8bfb0f9efe

services/web/frontend/js/features/monthly-texlive/labs-widget.tsx

@@ -95,4 +95,6 @@ const MonthlyTexliveLabsWidget = ({
   )
 }
 
+export const hidden = () => !isSplitTestEnabled('monthly-texlive')
+
 export default MonthlyTexliveLabsWidget

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

@@ -6,7 +6,7 @@ import { postJSON } from '@/infrastructure/fetch-json'
 import OLButton from '@/shared/components/ol/ol-button'
 import getMeta from '@/utils/meta'
 
-type IntegrationLinkingWidgetProps = {
+export type LabsExperimentWidgetProps = {
   logo: ReactNode
   title: string
   description: string | ReactNode
@@ -17,6 +17,7 @@ type IntegrationLinkingWidgetProps = {
   setErrorMessage: (message: string) => void
   optedIn: boolean
   setOptedIn: (optedIn: boolean) => void
+  feedbackLink?: string
 }
 
 /** @knipignore */
@@ -31,7 +32,8 @@ export function LabsExperimentWidget({
   setErrorMessage,
   optedIn,
   setOptedIn,
-}: IntegrationLinkingWidgetProps) {
+  feedbackLink,
+}: LabsExperimentWidgetProps) {
   const { t } = useTranslation()
 
   const experimentsErrorMessage = t(
@@ -83,6 +85,18 @@ export function LabsExperimentWidget({
       {disabled && (
         <div className="disabled-explanation">{t('experiment_full')}</div>
       )}
+      <div>
+        {optedIn && feedbackLink && (
+          <OLButton
+            variant="ghost"
+            href={feedbackLink}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('give_feedback')}
+          </OLButton>
+        )}
+      </div>
       <div>
         {labsEnabled && (
           <ActionButton

services/web/frontend/js/shared/svgs/sparkle-small-green.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none"><g fill="#195936" clip-path="url(#a)"><path d="M14.87 12.18c-4.74-1.07-5.48-1.8-6.55-6.54a.48.48 0 0 0-.93 0c-1.07 4.74-1.8 5.47-6.54 6.54a.48.48 0 0 0 0 .93c4.74 1.08 5.47 1.8 6.54 6.55a.48.48 0 0 0 .93 0c1.07-4.74 1.8-5.47 6.55-6.55a.48.48 0 0 0 0-.93Zm4.28-7.38c-2.52-.56-2.87-.92-3.44-3.44a.48.48 0 0 0-.93 0c-.57 2.52-.92 2.88-3.44 3.44a.48.48 0 0 0 0 .93c2.52.57 2.87.93 3.44 3.45a.48.48 0 0 0 .93 0c.57-2.52.92-2.88 3.44-3.45a.48.48 0 0 0 0-.93Z"/></g><defs><clipPath id="a"><path fill="#195936" d="M0 .5h20v20H0z"/></clipPath></defs></svg>

services/web/frontend/js/utils/labs-utils.ts

@@ -2,7 +2,7 @@ import getMeta from './meta'
 
 // Should be `never` when no experiments are active. Otherwise it should be a
 // union of active experiment names e.g. `'experiment1' | 'experiment2'`
-export type ActiveExperiment = 'monthly-texlive'
+export type ActiveExperiment = 'monthly-texlive' | 'ai-workbench'
 
 export const isInExperiment = (experiment: ActiveExperiment): boolean => {
   const experiments = getMeta('ol-labsExperiments')

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

@@ -39,7 +39,7 @@
     --image-padding: var(--spacing-01);
 
     display: grid;
-    grid-template-columns: var(--image-size) 1fr auto;
+    grid-template-columns: var(--image-size) 1fr auto auto;
     gap: var(--spacing-07);
     align-items: center;
     padding: var(--spacing-05);
@@ -117,3 +117,15 @@
     margin-top: var(--spacing-06);
   }
 }
+
+.labs-workbench-logo {
+  width: 32px;
+  height: 32px;
+  padding: var(--spacing-01);
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+}