feat: add tooltip to Group Options label in attributes form (#25063)

* feat: add tooltip to Group Options label in attributes form

- Add InfoBadge component to Group Options label with descriptive tooltip
- Add translation keys 'group_options' and 'group_options_description' to common.json
- Update label to use flex layout for proper InfoBadge alignment
- Tooltip explains that group options create logical groupings of regular options

Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

* fix: wrap AttributeForm tests with TooltipProvider

- Add Tooltip.Provider wrapper from @radix-ui/react-tooltip to test renders
- Fixes failing tests caused by InfoBadge component requiring tooltip context
- All AttributeForm tests now pass locally

Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

apps/web/public/static/locales/en/common.json

@@ -3249,6 +3249,8 @@
   "lock_attribute_for_assignment": "Lock for assignment",
   "lock_attribute_for_assignment_description": "Locking would only allow assignments from Directory Sync",
   "attribute_edited_successfully": "Attribute edited successfully",
+  "group_options": "Group Options",
+  "group_options_description": "When a group option is assigned to a user, they behave as if all options within that group are assigned to them.",
   "new_group_option": "New group option",
   "attribute_weight_enabled": "Weights enabled",
   "attribute_weight_enabled_description": "By enabling weights, it would be possible to assign higher priority to certain attributes per user. The higher the weight, the higher the priority.",

packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx

@@ -6,6 +6,7 @@ import { z } from "zod";
 
 import { Dialog } from "@calcom/features/components/controlled-dialog";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { InfoBadge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { ConfirmationDialogContent } from "@calcom/ui/components/dialog";
 import { SettingsToggle, SelectField, Input, InputField, Form, Label } from "@calcom/ui/components/form";
@@ -261,7 +262,10 @@ const GroupOptions = ({
   const { t } = useLocale();
   return (
     <>
-      <Label>{t("Group Options")}</Label>
+      <Label className="flex items-center">
+        {t("group_options")}
+        <InfoBadge content={t("group_options_description")} />
+      </Label>
       <div>
         {fields.map((option, index) => {
           const isAGroupOption = option.isGroup;

packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import * as Tooltip from "@radix-ui/react-tooltip";
 import React from "react";
 import type { Mock } from "vitest";
 import { vi } from "vitest";
@@ -44,6 +45,10 @@ const AttributeFormActions = {
   },
 
   render: (initialOptions: InitialOption[], mockOnSubmit: Mock) => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Tooltip.Provider>{children}</Tooltip.Provider>
+    );
+
     return render(
       <AttributeForm
         onSubmit={mockOnSubmit}
@@ -53,7 +58,8 @@ const AttributeFormActions = {
           options: initialOptions,
         }}
         header={<Button type="submit">Save</Button>}
-      />
+      />,
+      { wrapper }
     );
   },