fix: add variables dropdown UI (calcom#23214)

* Ui fixes for variables dropdown

* remove other translation keys

* fix test

---------

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

Author: CarinaWolli

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

@@ -1602,7 +1602,9 @@
   "event_duration_info": "The event duration",
   "event_time_info": "The event start time",
   "event_type_not_found": "EventType not Found",
+  "location_variable": "Location",
   "location_info": "The location of the event",
+  "additional_notes_variable": "Additional notes",
   "additional_notes_info": "The additional notes of booking",
   "attendee_name_info": "The person booking's name",
   "organizer_name_info": "Organizer's name",
@@ -2115,6 +2117,7 @@
   "can_you_try_again": "Can you try again with a different time?",
   "verify": "Verify",
   "timezone_info": "The timezone of the person receiving",
+  "timezone_variable": "Timezone",
   "event_end_time_variable": "Event end time",
   "event_end_time_info": "The event end time",
   "cancel_url_variable": "Cancel URL",
@@ -2730,7 +2733,9 @@
   "review": "Review",
   "reviewed": "Reviewed",
   "unreviewed": "Unreviewed",
+  "rating_url_variable": "Rating url",
   "rating_url_info": "The URL for Rating Feedback Form",
+  "no_show_url_variable": "No Show url",
   "no_show_url_info": "The URL for No Show Feedback",
   "no_support_needed": "No Support Needed?",
   "hide_support": "Hide Support",
@@ -2920,8 +2925,10 @@
   "row": "row",
   "rows": "rows",
   "attendee_timezone_variable": "Attendee Timezone",
+  "event_start_time_in_attendee_timezone_variable": "Event Start Time In Attendee Timezone",
   "event_start_time_in_attendee_timezone_info": "Event Start Time In Attendee Timezone",
   "event_end_time_in_attendee_timezone_info": "Event End Time In Attendee Timezone",
+  "event_end_time_in_attendee_timezone_variable": "Event End Time In Attendee Timezone",
   "salesforce_create_event_on_contact": "Create event on contact, if it exists. Else fallback to lead",
   "salesforce_owner_name_to_change": "Owner name to change",
   "no_filter_set": "No filter set",

packages/ui/components/editor/plugins/AddVariablesDropdown.test.tsx

@@ -36,7 +36,7 @@ describe("AddVariablesDropdown", () => {
     render(<AddVariablesDropdown addVariable={mockAddVariable} variables={variables} />);
     fireEvent.click(screen.getByText("add_variable"));
     await waitFor(() => {
-      expect(screen.getByText("add_dynamic_variables".toLocaleUpperCase())).toBeInTheDocument();
+      expect(screen.getByText("add_dynamic_variables")).toBeInTheDocument();
     });
   });
 

packages/ui/components/editor/plugins/AddVariablesDropdown.tsx

@@ -16,7 +16,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
   return (
     <Dropdown>
       <DropdownMenuTrigger aria-label="Add variable" className="focus:bg-muted pt-[6px]">
-        <div className="items-center ">
+        <div className="items-center">
           {props.isTextEditor ? (
             <>
               <div className="hidden sm:flex">
@@ -42,24 +42,26 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
           )}
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <div className="pb-1 pt-4">
-          <div className="text-subtle mb-2 px-4 text-left text-xs">
-            {t("add_dynamic_variables").toLocaleUpperCase()}
+      <DropdownMenuContent className="w-96">
+        <div className="p-4">
+          <div className="text-subtle mb-3 text-left text-xs font-medium uppercase tracking-wide">
+            {t("add_dynamic_variables")}
           </div>
-          <div className="h-64 overflow-scroll md:h-80">
+          <div className="max-h-64 overflow-y-auto md:max-h-80">
             {props.variables.map((variable) => (
               <DropdownMenuItem key={variable} className="hover:ring-0">
                 <button
                   key={variable}
                   type="button"
-                  className="w-full px-4 py-2"
+                  className="hover:bg-muted w-full rounded-md px-3 py-2 text-left transition-colors"
                   onClick={() => props.addVariable(t(`${variable}_variable`))}>
-                  <div className="flex flex-col">
-                    <div className="mr-text-left">
+                  <div className="flex flex-col space-y-1">
+                    <div className="text-default font-mono text-sm">
                       {`{${t(`${variable}_variable`).toUpperCase().replace(/ /g, "_")}}`}
                     </div>
-                    <div className="text-default hidden text-left sm:flex">{t(`${variable}_info`)}</div>
+                    <div className="text-muted-foreground hidden text-xs sm:block">
+                      {t(`${variable}_info`)}
+                    </div>
                   </div>
                 </button>
               </DropdownMenuItem>