fix: icon visibility and add up and down icons (#15543)

* fixed the icons visibility and added up and down icon

* wip: TimeUnitAddonSuffix

* chore: Quick pass for rerender-optimisation

---------

Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

packages/features/ee/workflows/components/TimeTimeUnitInput.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { TimeUnit } from "@calcom/prisma/enums";
 import {
   Dropdown,
   DropdownItem,
@@ -12,21 +13,50 @@ import {
   TextField,
 } from "@calcom/ui";
 
-import { getWorkflowTimeUnitOptions } from "../lib/getOptions";
 import type { FormValues } from "../pages/workflow";
 
+const TIME_UNITS = [TimeUnit.DAY, TimeUnit.HOUR, TimeUnit.MINUTE] as const;
+
 type Props = {
   form: UseFormReturn<FormValues>;
   disabled: boolean;
 };
 
+const TimeUnitAddonSuffix = ({
+  DropdownItems,
+  timeUnitOptions,
+  form,
+}: {
+  form: UseFormReturn<FormValues>;
+  DropdownItems: JSX.Element;
+  timeUnitOptions: { [x: string]: string };
+}) => {
+  // because isDropdownOpen already triggers a render cycle we can use getValues()
+  // instead of watch() function
+  const timeUnit = form.getValues("timeUnit");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  return (
+    <Dropdown onOpenChange={setIsDropdownOpen}>
+      <DropdownMenuTrigger asChild>
+        <button className="flex items-center">
+          <div className="mr-1 w-3/5">{timeUnit ? timeUnitOptions[timeUnit] : "undefined"}</div>
+          <div className="w-1/4 pt-1">
+            {isDropdownOpen ? <Icon name="chevron-up" /> : <Icon name="chevron-down" />}
+          </div>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>{DropdownItems}</DropdownMenuContent>
+    </Dropdown>
+  );
+};
+
 export const TimeTimeUnitInput = (props: Props) => {
   const { form } = props;
   const { t } = useLocale();
-  const timeUnitOptions = getWorkflowTimeUnitOptions(t);
-
-  const [timeUnit, setTimeUnit] = useState(form.getValues("timeUnit"));
-
+  const timeUnitOptions = TIME_UNITS.reduce((acc, option) => {
+    acc[option] = t(`${option.toLowerCase()}_timeUnit`);
+    return acc;
+  }, {} as { [x: string]: string });
   return (
     <div className="flex">
       <div className="grow">
@@ -39,33 +69,26 @@ export const TimeTimeUnitInput = (props: Props) => {
           className="-mt-2 rounded-r-none text-sm focus:ring-0"
           {...form.register("time", { valueAsNumber: true })}
           addOnSuffix={
-            <Dropdown>
-              <DropdownMenuTrigger asChild>
-                <button className="flex items-center">
-                  <div className="mr-1 w-3/4">
-                    {timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
-                  </div>
-                  <div className="w-1/4 pt-1">
-                    <Icon name="chevron-down" />
-                  </div>
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                {timeUnitOptions.map((option, index) => (
-                  <DropdownMenuItem key={index} className="outline-none">
-                    <DropdownItem
-                      key={index}
-                      type="button"
-                      onClick={() => {
-                        setTimeUnit(option.value);
-                        form.setValue("timeUnit", option.value);
-                      }}>
-                      {option.label}
-                    </DropdownItem>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </Dropdown>
+            <TimeUnitAddonSuffix
+              form={form}
+              timeUnitOptions={timeUnitOptions}
+              DropdownItems={
+                <>
+                  {TIME_UNITS.map((timeUnit, index) => (
+                    <DropdownMenuItem key={index} className="outline-none">
+                      <DropdownItem
+                        key={index}
+                        type="button"
+                        onClick={() => {
+                          form.setValue("timeUnit", timeUnit);
+                        }}>
+                        {timeUnitOptions[timeUnit]}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                  ))}
+                </>
+              }
+            />
           }
         />
       </div>

packages/features/ee/workflows/lib/getOptions.ts

@@ -4,7 +4,6 @@ import type { WorkflowActions } from "@calcom/prisma/enums";
 
 import { isSMSOrWhatsappAction, isWhatsappAction, isEmailToAttendeeAction } from "./actionHelperFunctions";
 import {
-  TIME_UNIT,
   WHATSAPP_WORKFLOW_TEMPLATES,
   WORKFLOW_ACTIONS,
   BASIC_WORKFLOW_TEMPLATES,
@@ -32,12 +31,6 @@ export function getWorkflowTriggerOptions(t: TFunction) {
   });
 }
 
-export function getWorkflowTimeUnitOptions(t: TFunction) {
-  return TIME_UNIT.map((timeUnit) => {
-    return { label: t(`${timeUnit.toLowerCase()}_timeUnit`), value: timeUnit };
-  });
-}
-
 export function getWorkflowTemplateOptions(t: TFunction, action: WorkflowActions | undefined) {
   const TEMPLATES =
     action && isWhatsappAction(action)