fix: add TooltipProvider to PublishTemplateVersionDialog

aqandrew · aqandrew · commit f835cb1bc8ee · 2025-08-28T21:09:28.000Z
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -5,11 +5,12 @@ import {
 	type Theme,
 } from "@emotion/react";
 import Link from "@mui/material/Link";
-import { TooltipContentProps, TooltipProps } from "@radix-ui/react-tooltip";
+import { TooltipProps } from "@radix-ui/react-tooltip";
 import { Stack } from "components/Stack/Stack";
 import {
 	Tooltip,
 	TooltipContent,
+	type TooltipContentProps,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
diff --git a/site/src/components/Tooltip/Tooltip.tsx b/site/src/components/Tooltip/Tooltip.tsx
@@ -12,11 +12,15 @@ export const Tooltip = TooltipPrimitive.Root;
 
 export const TooltipTrigger = TooltipPrimitive.Trigger;
 
+export type TooltipContentProps = React.ComponentPropsWithoutRef<
+	typeof TooltipPrimitive.Content
+> & {
+	disablePortal?: boolean;
+};
+
 export const TooltipContent = React.forwardRef<
 	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-		disablePortal?: boolean;
-	}
+	TooltipContentProps
 >(({ className, sideOffset = 4, disablePortal, ...props }, ref) => {
 	const content = (
 		<TooltipPrimitive.Content
diff --git a/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx b/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx
@@ -20,6 +20,7 @@ import {
 	HelpTooltipTrigger,
 } from "../../components/HelpTooltip/HelpTooltip";
 import { docs } from "../../utils/docs";
+import { TooltipProvider } from "components/Tooltip/Tooltip";
 
 export const Language = {
 	versionNameLabel: "Version name",
@@ -120,27 +121,33 @@ export const PublishTemplateVersionDialog: FC<
 									}
 								/>
 
-								<HelpTooltip>
-									<HelpTooltipTrigger />
+								<TooltipProvider>
+									<HelpTooltip>
+										<HelpTooltipTrigger />
 
-									<HelpTooltipContent>
-										<HelpTooltipTitle>
-											{Language.activeVersionHelpTitle}
-										</HelpTooltipTitle>
-										<HelpTooltipText>
-											{Language.activeVersionHelpText}
-										</HelpTooltipText>
-										<HelpTooltipLinksGroup>
-											<HelpTooltipLink
-												href={docs(
-													"/admin/templates/managing-templates#template-update-policies",
-												)}
-											>
-												{Language.activeVersionHelpBody}
-											</HelpTooltipLink>
-										</HelpTooltipLinksGroup>
-									</HelpTooltipContent>
-								</HelpTooltip>
+										{/**
+										 * Without disablePortal, the tooltip will render under the dialog;
+										 * this prop may not need to be set when we switch away from MuiDialog
+										 */}
+										<HelpTooltipContent disablePortal>
+											<HelpTooltipTitle>
+												{Language.activeVersionHelpTitle}
+											</HelpTooltipTitle>
+											<HelpTooltipText>
+												{Language.activeVersionHelpText}
+											</HelpTooltipText>
+											<HelpTooltipLinksGroup>
+												<HelpTooltipLink
+													href={docs(
+														"/admin/templates/managing-templates#template-update-policies",
+													)}
+												>
+													{Language.activeVersionHelpBody}
+												</HelpTooltipLink>
+											</HelpTooltipLinksGroup>
+										</HelpTooltipContent>
+									</HelpTooltip>
+								</TooltipProvider>
 							</Stack>
 						</FormFields>
 					</Stack>
