From 1d85036a96c0c4bbfcbe33ee64ed3e990c2e37e9 Mon Sep 17 00:00:00 2001
From: Felipe Mota <fmota@plasmic.app>
Date: Thu, 1 Aug 2024 16:42:41 -0300
Subject: [PATCH] fix: Don't use unavailable context in TargetBlockedTooltip

Issue: https://linear.app/plasmic/issue/PLA-11083
Change-Id: I4a9061065cf613587716c4cb8c2520f2a2b781f6
GitOrigin-RevId: ee00660d0a7f6178092b95ca6e85b0887ddc881d
---
 .../wab/client/components/canvas/view-ops.tsx |  6 ++++-
 .../components/sidebar/sidebar-helpers.tsx    | 24 ++++++++++---------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/platform/wab/src/wab/client/components/canvas/view-ops.tsx b/platform/wab/src/wab/client/components/canvas/view-ops.tsx
index aa959de6411..2ffb62953fb 100644
--- a/platform/wab/src/wab/client/components/canvas/view-ops.tsx
+++ b/platform/wab/src/wab/client/components/canvas/view-ops.tsx
@@ -1216,7 +1216,11 @@ export class ViewOps {
     const targetBlockingCombo = getTargetBlockingCombo([indicator]);
     if (targetBlockingCombo) {
       return (
-        <TargetBlockedTooltip displayName="text" combo={targetBlockingCombo} />
+        <TargetBlockedTooltip
+          displayName="text"
+          combo={targetBlockingCombo}
+          studioCtx={this.studioCtx()}
+        />
       );
     }
 
diff --git a/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx b/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx
index 677f2570396..6900903f4c9 100644
--- a/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx
+++ b/platform/wab/src/wab/client/components/sidebar/sidebar-helpers.tsx
@@ -1,5 +1,5 @@
-import { useLabel } from "@/wab/client/components/aria-utils";
 import { useContextMenu } from "@/wab/client/components/ContextMenu";
+import { useLabel } from "@/wab/client/components/aria-utils";
 import { ColorButton } from "@/wab/client/components/style-controls/ColorButton";
 import {
   DefinedIndicator,
@@ -7,8 +7,8 @@ import {
 } from "@/wab/client/components/style-controls/DefinedIndicator";
 import StyleCheckbox from "@/wab/client/components/style-controls/StyleCheckbox";
 import {
-  createStyleContextMenu,
   ExpsProvider,
+  createStyleContextMenu,
   useStyleComponent,
 } from "@/wab/client/components/style-controls/StyleComponent";
 import StyleSelect from "@/wab/client/components/style-controls/StyleSelect";
@@ -21,8 +21,14 @@ import LabeledListItem from "@/wab/client/components/widgets/LabeledListItem";
 import { SimpleTextbox } from "@/wab/client/components/widgets/SimpleTextbox";
 import TriangleBottomIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__TriangleBottom";
 import { PlasmicStyleToggleButtonGroup__VariantsArgs } from "@/wab/client/plasmic/plasmic_kit_style_controls/PlasmicStyleToggleButtonGroup";
-import { StudioCtx, useStudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
+import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
 import { StandardMarkdown } from "@/wab/client/utils/StandardMarkdown";
+import { TokenType } from "@/wab/commons/StyleToken";
+import { MaybeWrap } from "@/wab/commons/components/ReactUtil";
+import { XDraggable } from "@/wab/commons/components/XDraggable";
+import { IRuleSetHelpersX } from "@/wab/shared/RuleSetHelpers";
+import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper";
+import { VariantCombo, makeVariantName } from "@/wab/shared/Variants";
 import {
   cx,
   ensure,
@@ -31,17 +37,11 @@ import {
   spawn,
   withoutNils,
 } from "@/wab/shared/common";
-import { MaybeWrap } from "@/wab/commons/components/ReactUtil";
-import { XDraggable } from "@/wab/commons/components/XDraggable";
-import { TokenType } from "@/wab/commons/StyleToken";
 import { parseCssNumericNew, roundedCssNumeric } from "@/wab/shared/css";
 import {
   DefinedIndicatorType,
   getTargetBlockingCombo,
 } from "@/wab/shared/defined-indicator";
-import { IRuleSetHelpersX } from "@/wab/shared/RuleSetHelpers";
-import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper";
-import { makeVariantName, VariantCombo } from "@/wab/shared/Variants";
 import { Select, Tooltip } from "antd";
 import cn from "classnames";
 import { observer } from "mobx-react";
@@ -858,8 +858,8 @@ function LabeledToggleButtonGroup_(
 export function TargetBlockedTooltip(props: {
   displayName?: React.ReactNode;
   combo: VariantCombo;
+  studioCtx?: StudioCtx;
 }) {
-  const studioCtx = useStudioCtx();
   const { displayName, combo } = props;
   return (
     <>
@@ -869,7 +869,7 @@ export function TargetBlockedTooltip(props: {
         <strong>
           {combo
             .map((variant) =>
-              makeVariantName({ variant: variant, site: studioCtx.site })
+              makeVariantName({ variant, site: props.studioCtx?.site })
             )
             .join(" + ")}
         </strong>
@@ -898,6 +898,7 @@ export function shouldBeDisabled(opts: {
   };
   label?: React.ReactNode;
   indicators: DefinedIndicatorType[];
+  studioCtx?: StudioCtx;
 }) {
   if (opts.props.isDisabled) {
     return {
@@ -913,6 +914,7 @@ export function shouldBeDisabled(opts: {
         <TargetBlockedTooltip
           displayName={opts.label}
           combo={targetBlockingCombo}
+          studioCtx={opts.studioCtx}
         />
       ),
     };