fix: add TooltipProvider to EditRolesButton

aqandrew · aqandrew · commit d30170cd19f0 · 2025-08-29T01:36:30.000Z
diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.stories.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.stories.tsx
@@ -43,6 +43,17 @@ export const Loading: Story = {
 	},
 };
 
+export const CannotSetRoles: Story = {
+	args: {
+		userLoginType: "oidc",
+		oidcRoleSync: true,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.hover(canvas.getByLabelText("More info"));
+	},
+};
+
 export const AdvancedOpen: Story = {
 	args: {
 		selectedRoleNames: new Set([MockWorkspaceCreationBanRole.name]),
diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx
@@ -16,6 +16,7 @@ import {
 	HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { EditSquare } from "components/Icons/EditSquare";
+import { TooltipProvider } from "components/Tooltip/Tooltip";
 import { UserIcon } from "lucide-react";
 import { type FC, useEffect, useState } from "react";
 
@@ -82,15 +83,17 @@ export const EditRolesButton: FC<EditRolesButtonProps> = (props) => {
 
 	if (!canSetRoles) {
 		return (
-			<HelpTooltip>
-				<HelpTooltipTrigger size="small" />
-				<HelpTooltipContent>
-					<HelpTooltipTitle>Externally controlled</HelpTooltipTitle>
-					<HelpTooltipText>
-						Roles for this user are controlled by the OIDC identity provider.
-					</HelpTooltipText>
-				</HelpTooltipContent>
-			</HelpTooltip>
+			<TooltipProvider>
+				<HelpTooltip>
+					<HelpTooltipTrigger size="small" />
+					<HelpTooltipContent>
+						<HelpTooltipTitle>Externally controlled</HelpTooltipTitle>
+						<HelpTooltipText>
+							Roles for this user are controlled by the OIDC identity provider.
+						</HelpTooltipText>
+					</HelpTooltipContent>
+				</HelpTooltip>
+			</TooltipProvider>
 		);
 	}
 
