fix: BROS-304: Image tag is not loading on playground (#8122)

Author: luarmr

web/libs/core/src/lib/utils/feature-flags/flags.ts

@@ -105,10 +105,3 @@ export const FF_NEW_STORAGES = "fflag_feat_bros_193_new_cloud_storage_providers_
  * Datamanager filter members
  */
 export const FF_DM_FILTER_MEMBERS = "fflag_feat_fit_449_datamanager_filter_members_short";
-
-/**
- * Allow tooltip working with the disabled button
- *
- * @link https://app.launchdarkly.com/projects/default/flags/fflag_feat_front_fit_418_tooltip_enhancements_short
- */
-export const FF_TOOLTIP_ENHANCEMENT = "fflag_feat_front_fit_418_tooltip_enhancements_short";

web/libs/ui/src/lib/Tooltip/Tooltip.tsx

@@ -1,4 +1,3 @@
-import { ff } from "@humansignal/core";
 import {
   Children,
   cloneElement,
@@ -19,8 +18,6 @@ import { setRef } from "@humansignal/core/lib/utils/unwrapRef";
 import styles from "./Tooltip.module.scss";
 import clsx from "clsx";
 
-const isEnhancedTooltip = ff.isActive(ff.FF_TOOLTIP_ENHANCEMENT);
-
 export type TooltipProps = PropsWithChildren<{
   title: React.ReactNode;
   alignment?: Align;
@@ -189,16 +186,15 @@ const TooltipInner = forwardRef(
         setRef(triggerElement, el);
         setRef(ref, el);
       },
-      ...(!isEnhancedTooltip || !needFallback ? { onMouseEnter, onMouseLeave } : {}),
+      ...(!needFallback ? { onMouseEnter, onMouseLeave } : {}),
     });
-    const element =
-      isEnhancedTooltip && needFallback ? (
-        <span className={styles.wrapper} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-          {clone}
-        </span>
-      ) : (
-        clone
-      );
+    const element = needFallback ? (
+      <span className={styles.wrapper} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        {clone}
+      </span>
+    ) : (
+      clone
+    );
 
     useEffect(() => {
       if (injected) performAnimation(true);

web/libs/ui/src/lib/Tooltip/tooltip.stories.tsx

@@ -1,10 +1,7 @@
-import { ff } from "@humansignal/core";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Tooltip } from "./Tooltip";
 import { Button } from "../button/button";
 
-const isEnhancedTooltip = ff.isActive(ff.FF_TOOLTIP_ENHANCEMENT);
-
 const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
   title: "UI/Tooltip",
@@ -79,7 +76,7 @@ export const WithDisabledButton: Story = {
     return (
       <div className="flex items-center gap-tight">
         <Tooltip {...props} title="This button is disabled for the reason that it is disabled">
-          <Button disabled>{isEnhancedTooltip ? "hover over me" : "Do not work without related feature flag"}</Button>
+          <Button disabled>hover over me</Button>
         </Tooltip>
       </div>
     );

web/libs/ui/src/lib/button/button.tsx

@@ -1,12 +1,9 @@
-import { ff } from "@humansignal/core";
 import { cn } from "../../utils/utils";
 import { forwardRef, type MouseEvent, type ButtonHTMLAttributes, type PropsWithChildren, type ReactNode } from "react";
 import styles from "./button.module.scss";
 import { setRef } from "@humansignal/core/lib/utils/unwrapRef";
 import { Tooltip } from "../Tooltip/Tooltip";
 
-const isEnhancedTooltip = ff.isActive(ff.FF_TOOLTIP_ENHANCEMENT);
-
 const variants = {
   primary: styles["variant-primary"],
   neutral: styles["variant-neutral"],
@@ -186,13 +183,6 @@ const Button = forwardRef(
 
     if (tooltip) {
       // For disabled buttons, wrap in a container that can receive hover events
-      if (!isEnhancedTooltip && isDisabled) {
-        return (
-          <Tooltip title={tooltip}>
-            <span style={{ display: "inline-flex" }}>{buttonBody}</span>
-          </Tooltip>
-        );
-      }
       return <Tooltip title={tooltip}>{buttonBody}</Tooltip>;
     }