From b2e7477467b9631ac0fbc48c4f722547f82a89c0 Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Wed, 23 Oct 2024 09:33:56 +0200
Subject: [PATCH] [web] Migrate AI Error Assistant to BS5 (#21129)

* [storybook] Rerender story when switching BS3/BS5

* [storybook] Add SCSS loader to storybook

* [storybook] Add some AI error assistant stories

* Rename ai-error-assistant.less to .scss

* Update less variables to sass

* Remove duplicated selector

* Replace react-bootstrap components by `OL...`

* Update Checkboxes after BS5 update

* Add IDs so clicking on labels work
* Add BS5 class name in SCSS

Note: `answer-not-detailed` is used twice in the Radios. I think it's a mistake: there should be another name for the "ai_feedback_the_suggestion_wasnt_the_best_fix_available" radio

* Rename ID `answer-not-detailed` -> `answer-not-best-fix`

* Pass name and value to BS3Radio/BS3Checkbox

* [storybook] Add delay before AI suggestion (shows the animation)

* Add a number after the checkbox/radio IDs, to allow multiple forms to be displayed

Without this, clicks on second form are updating the first form!

Another solution could be to wrap the input in the label, but it comes with other problems. See https://css-tricks.com/html-inputs-and-labels-a-love-story/

* [storybook] Update `LabsAiPromoBanner`

* Use CSS variables instead of hardcoded values

* Make radio input flex

* Replace `blue-10` by `bg-info-03`

* Fix `SuggestFixButton`

* Fix `AiErrorAssistantCopyCode`

* Fix button loading in BS5

* Use OLBadge

* Fix Button variants

* Update `suggestFixAction`

* Migrate Tooltip and Button to BS5 in LabsExperimentWidget

* Update BS3/BS5 button classname in AiErrorAssistantCopyCode

Co-authored-by: Rebeka <rebeka.dekany@overleaf.com>

* [storybook] Allow to choose props of `LabsExperimentWidget`

* Fixup `OLTooltip`: Display the tooltip on disabled button in BS5

* Update Tooltips to BS5

---------

Co-authored-by: Rebeka <rebeka.dekany@overleaf.com>
GitOrigin-RevId: 08d594e772c0a3b6db1c6081337cc2d079f478a5
---
 services/web/.storybook/main.ts               | 27 +++++++++++++
 .../ui/components/ol/ol-form-checkbox.tsx     |  2 +
 .../labs/labs-experiments-widget.tsx          | 40 +++++++++++--------
 3 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/services/web/.storybook/main.ts b/services/web/.storybook/main.ts
index 712661dfab..ac1a922072 100644
--- a/services/web/.storybook/main.ts
+++ b/services/web/.storybook/main.ts
@@ -45,6 +45,33 @@ const config: StorybookConfig = {
               { loader: 'less-loader' },
             ],
           },
+          {
+            // Pass Sass files through sass-loader/css-loader/mini-css-extract-
+            // plugin (note: run in reverse order)
+            test: /\.s[ac]ss$/,
+            use: [
+              // Allows the CSS to be extracted to a separate .css file
+              { loader: MiniCssExtractPlugin.loader },
+              // Resolves any CSS dependencies (e.g. url())
+              { loader: 'css-loader' },
+              // Resolve relative paths sensibly in SASS
+              { loader: 'resolve-url-loader' },
+              {
+                // Runs autoprefixer on CSS via postcss
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['autoprefixer'],
+                  },
+                },
+              },
+              // Compiles Sass to CSS
+              {
+                loader: 'sass-loader',
+                options: { sourceMap: true }, // sourceMap: true is required for resolve-url-loader
+              },
+            ],
+          },
         ],
         plugins: [new MiniCssExtractPlugin()],
       },
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx b/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
index 5577d1016d..28eca00b3f 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
@@ -14,6 +14,8 @@ function OLFormCheckbox(props: OLFormCheckboxProps) {
   const bs3FormCheckboxProps: React.ComponentProps<typeof BS3Checkbox> = {
     children: rest.label,
     checked: rest.checked,
+    value: rest.value,
+    name: rest.name,
     required: rest.required,
     readOnly: rest.readOnly,
     disabled: rest.disabled,
diff --git a/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx b/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
index 302811709a..56f2e5f108 100644
--- a/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
+++ b/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
@@ -1,10 +1,11 @@
 import { ReactNode, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/shared/components/badge'
-import Tooltip from '@/shared/components/tooltip'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import { postJSON } from '@/infrastructure/fetch-json'
-import { Button } from 'react-bootstrap'
+import OLButton from '@/features/ui/components/ol/ol-button'
 import getMeta from '@/utils/meta'
+import { isBootstrap5 } from '@/features/utils/bootstrap-5'
 
 type IntegrationLinkingWidgetProps = {
   logo: ReactNode
@@ -66,7 +67,7 @@ export function LabsExperimentWidget({
       <div className="description-container">
         <div className="title-row">
           <h3 className="h4">{title}</h3>
-          {optedIn && <Badge bsStyle="info">{t('enabled')}</Badge>}
+          {optedIn && <OLBadge bg="info">{t('enabled')}</OLBadge>}
         </div>
         <p className="small">
           {description}{' '}
@@ -111,31 +112,36 @@ function ActionButton({
 
   if (optedIn) {
     return (
-      <Button bsStyle={null} className="btn-secondary" onClick={handleDisable}>
+      <OLButton variant="secondary" onClick={handleDisable}>
         {t('turn_off')}
-      </Button>
+      </OLButton>
     )
   } else if (disabled) {
+    const tooltipableButton = isBootstrap5() ? (
+      <div className="d-inline-block">
+        <OLButton variant="primary" disabled>
+          {t('turn_on')}
+        </OLButton>
+      </div>
+    ) : (
+      <OLButton variant="primary" disabled>
+        {t('turn_on')}
+      </OLButton>
+    )
     return (
-      <Tooltip
+      <OLTooltip
         id="experiment-disabled"
         description={t('this_experiment_isnt_accepting_new_participants')}
         overlayProps={{ delay: 0 }}
       >
-        <Button bsStyle="secondary" className="btn btn-primary" disabled>
-          {t('turn_on')}
-        </Button>
-      </Tooltip>
+        {tooltipableButton}
+      </OLTooltip>
     )
   } else {
     return (
-      <Button
-        bsStyle="primary"
-        onClick={handleEnable}
-        className="btn btn-primary"
-      >
+      <OLButton variant="primary" onClick={handleEnable}>
         {t('turn_on')}
-      </Button>
+      </OLButton>
     )
   }
 }