[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

@@ -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()],
       },

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,

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 OLBadge from '@/features/ui/components/ol/ol-badge'
-import Tooltip from '@/shared/components/tooltip'
+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>
+        {tooltipableButton}
-          {t('turn_on')}
+      </OLTooltip>
-        </Button>
-      </Tooltip>
     )
   } else {
     return (
-      <Button
+      <OLButton variant="primary" onClick={handleEnable}>
-        bsStyle="primary"
-        onClick={handleEnable}
-        className="btn btn-primary"
-      >
         {t('turn_on')}
-      </Button>
+      </OLButton>
     )
   }
 }