Merge pull request #30042 from overleaf/mj-workbench-update-labs-widget

[web] Update look of labs experiment and tweak workbench labs content

GitOrigin-RevId: f7f693f778fb659ccf10a0c440c5c7487705d98e

services/web/frontend/extracted-translations.json

@@ -545,6 +545,7 @@
   "emails_and_affiliations_explanation": "",
   "emails_and_affiliations_title": "",
   "empty": "",
+  "enable": "",
   "enable_ai_features": "",
   "enable_managed_users": "",
   "enable_single_sign_on": "",
@@ -574,7 +575,7 @@
   "example_project": "",
   "existing_plan_active_until_term_end": "",
   "expand": "",
-  "experiment_full": "",
+  "experiment_full_check_back_soon": "",
   "expired": "",
   "expired_confirmation_code": "",
   "expires": "",
@@ -1877,7 +1878,6 @@
   "this_address_will_be_shown_on_the_invoice": "",
   "this_could_be_because_we_cant_support_some_elements_of_the_table": "",
   "this_experiment_gives_you_access_to_new_versions_of_latex": "",
-  "this_experiment_isnt_accepting_new_participants": "",
   "this_field_is_required": "",
   "this_grants_access_to_features_2": "",
   "this_is_a_new_feature": "",

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

@@ -1,10 +1,10 @@
 import { ReactNode, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import OLBadge from '@/shared/components/ol/ol-badge'
-import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import { postJSON } from '@/infrastructure/fetch-json'
 import OLButton from '@/shared/components/ol/ol-button'
 import getMeta from '@/utils/meta'
+import Notification from '../notification'
 
 export type LabsExperimentWidgetProps = {
   logo: ReactNode
@@ -82,9 +82,6 @@ export function LabsExperimentWidget({
           )}
         </p>
       </div>
-      {disabled && (
-        <div className="disabled-explanation">{t('experiment_full')}</div>
-      )}
       <div>
         {optedIn && feedbackLink && (
           <OLButton
@@ -107,6 +104,17 @@ export function LabsExperimentWidget({
           />
         )}
       </div>
+      {disabled && (
+        <>
+          <div />
+          <Notification
+            type="info"
+            content={t('experiment_full_check_back_soon')}
+          />
+          <div />
+          <div />
+        </>
+      )}
     </div>
   )
 }
@@ -129,31 +137,19 @@ function ActionButton({
   if (optedIn) {
     return (
       <OLButton variant="secondary" onClick={handleDisable}>
-        {t('turn_off')}
+        {t('disable')}
       </OLButton>
     )
   } else if (disabled) {
-    const tooltipableButton = (
-      <div className="d-inline-block">
-        <OLButton variant="primary" disabled>
-          {t('turn_on')}
-        </OLButton>
-      </div>
-    )
-
     return (
-      <OLTooltip
-        id="experiment-disabled"
-        description={t('this_experiment_isnt_accepting_new_participants')}
-        overlayProps={{ delay: 0 }}
-      >
-        {tooltipableButton}
-      </OLTooltip>
+      <OLButton variant="primary" disabled>
+        {t('enable')}
+      </OLButton>
     )
   } else {
     return (
       <OLButton variant="primary" onClick={handleEnable}>
-        {t('turn_on')}
+        {t('enable')}
       </OLButton>
     )
   }

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

@@ -44,16 +44,6 @@
     align-items: center;
     padding: var(--spacing-05);
 
-    > div {
-      display: flex;
-      flex-direction: column;
-      padding-right: var(--spacing-07);
-
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-
     .experiment-logo-container {
       padding: var(--image-padding);
     }
@@ -86,16 +76,7 @@
     }
 
     &.disabled-experiment {
-      grid-template-columns: var(--image-size) 3fr 1fr auto;
-
-      .disabled-explanation {
-        color: var(--content-secondary);
-      }
-
-      h3,
-      p {
-        color: var(--content-disabled);
-      }
+      grid-template-columns: var(--image-size) 3fr auto auto;
     }
   }
 
@@ -106,12 +87,6 @@
   }
 }
 
-.disabled-experiment {
-  .ai-error-assistant-avatar {
-    filter: grayscale(0.6);
-  }
-}
-
 .labs-opt-in {
   .form-group {
     margin-top: var(--spacing-06);

services/web/locales/en.json

@@ -697,6 +697,7 @@
   "empty": "Empty",
   "empty_zip_file": "Zip doesn’t contain any file",
   "en": "English",
+  "enable": "Enable",
   "enable_ai_features": "Enable AI features",
   "enable_managed_users": "Enable Managed Users",
   "enable_single_sign_on": "Enable single sign-on",
@@ -741,7 +742,7 @@
   "exclusive_access_with_labs": "Exclusive access to early-stage experiments",
   "existing_plan_active_until_term_end": "Your existing plan and its features will remain active until the end of the current billing period.",
   "expand": "Expand",
-  "experiment_full": "Sorry, this experiment is full",
+  "experiment_full_check_back_soon": "Sorry, this experiment is full. Spaces may become available, so check back soon.",
   "expired": "Expired",
   "expired_confirmation_code": "Your confirmation code has expired. Click <0>Resend confirmation code</0> to get a new one.",
   "expires": "Expires",
@@ -2398,7 +2399,6 @@
   "this_address_will_be_shown_on_the_invoice": "This address will be shown on the invoice",
   "this_could_be_because_we_cant_support_some_elements_of_the_table": "This could be because we can’t yet support some elements of the table in the table preview. Or there may be an error in the table’s LaTeX code.",
   "this_experiment_gives_you_access_to_new_versions_of_latex": "For advanced users only. This experiment gives you regular access to new, untested versions of TeX Live (the LaTeX engine used for compiling). You can then <0>choose this as your compiler</0> on a project-by-project basis. <1>Find out more about rolling TeX Live</1>",
-  "this_experiment_isnt_accepting_new_participants": "This experiment isn’t accepting new participants.",
   "this_field_is_required": "This field is required",
   "this_grants_access_to_features_2": "This grants you access to <0>__appName__</0> <0>__featureType__</0> features.",
   "this_is_a_new_feature": "This is a new feature",