Fix: availability not deleteable (#8086)

* fix: make availability deletable

* test: add e2e

* chore: add test id

* test: add a new test

* fix: remove utility

apps/web/pages/availability/index.tsx

@@ -92,14 +92,9 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
                 }}
                 key={schedule.id}
                 schedule={schedule}
+                isDeletable={schedules.length !== 1}
                 updateDefault={updateMutation.mutate}
-                deleteFunction={() => {
-                  if (schedules.length === 1) {
-                    showToast(t("requires_at_least_one_schedule"), "error");
-                  } else {
-                    deleteMutation.mutate;
-                  }
-                }}
+                deleteFunction={deleteMutation.mutate}
               />
             ))}
           </ul>

apps/web/playwright/availability.e2e.ts

@@ -43,12 +43,29 @@ test.describe("Availablity tests", () => {
     });
   });
 
-  test("Availablity pages", async ({ page }) => {
+  test("Availability pages", async ({ page }) => {
     await test.step("Can add a new schedule", async () => {
       await page.locator('[data-testid="new-schedule"]').click();
       await page.locator('[id="name"]').fill("More working hours");
       page.locator('[type="submit"]').click();
       await expect(page.locator("[data-testid=availablity-title]")).toHaveValue("More working hours");
     });
+    await test.step("Can delete a schedule", async () => {
+      await page.getByRole("button", { name: /Go Back/i }).click();
+      await page.locator('[data-testid="schedules"] > li').nth(1).getByTestId("schedule-more").click();
+      await page.locator('[data-testid="delete-schedule"]').click();
+      const toast = await page.waitForSelector('[data-testid="toast-success"]');
+      expect(toast).toBeTruthy();
+
+      await expect(page.locator('[data-testid="schedules"] > li').nth(1)).toHaveCount(0);
+    });
+    await test.step("Cannot delete a schedule if a single schedule is present", async () => {
+      await page.locator('[data-testid="schedules"] > li').nth(0).getByTestId("schedule-more").click();
+      await page.locator('[data-testid="delete-schedule"]').click();
+      const toast = await page.waitForSelector('[data-testid="toast-error"]');
+      expect(toast).toBeTruthy();
+
+      await expect(page.locator('[data-testid="schedules"] > li').nth(0)).toHaveCount(1);
+    });
   });
 });

packages/features/schedules/components/ScheduleListItem.tsx

@@ -13,6 +13,7 @@ import {
   DropdownMenuItem,
   DropdownItem,
   DropdownMenuTrigger,
+  showToast,
 } from "@calcom/ui";
 import { FiGlobe, FiMoreHorizontal, FiTrash, FiClock } from "@calcom/ui/components/icon";
 
@@ -21,6 +22,7 @@ export function ScheduleListItem({
   deleteFunction,
   displayOptions,
   updateDefault,
+  isDeletable,
 }: {
   schedule: RouterOutputs["viewer"]["availability"]["list"]["schedules"][number];
   deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
@@ -28,6 +30,7 @@ export function ScheduleListItem({
     timeZone?: string;
     hour12?: boolean;
   };
+  isDeletable: boolean;
   updateDefault: ({ scheduleId, isDefault }: { scheduleId: number; isDefault: boolean }) => void;
 }) {
   const { t, i18n } = useLocale();
@@ -74,6 +77,7 @@ export function ScheduleListItem({
         <Dropdown>
           <DropdownMenuTrigger asChild>
             <Button
+              data-testid="schedule-more"
               className="mx-5"
               type="button"
               variant="icon"
@@ -103,10 +107,15 @@ export function ScheduleListItem({
                   type="button"
                   color="destructive"
                   StartIcon={FiTrash}
+                  data-testid="delete-schedule"
                   onClick={() => {
-                    deleteFunction({
-                      scheduleId: schedule.id,
-                    });
+                    if (!isDeletable) {
+                      showToast(t("requires_at_least_one_schedule"), "error");
+                    } else {
+                      deleteFunction({
+                        scheduleId: schedule.id,
+                      });
+                    }
                   }}>
                   {t("delete")}
                 </DropdownItem>

packages/ui/components/toast/showToast.tsx

@@ -17,7 +17,7 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
     <span>
       <FiCheck className="h-4 w-4" />
     </span>
-    <p>{message}</p>
+    <p data-testid="toast-success">{message}</p>
   </div>
 );
 
@@ -30,7 +30,7 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
     <span>
       <FiInfo className="h-4 w-4" />
     </span>
-    <p>{message}</p>
+    <p data-testid="toast-error">{message}</p>
   </div>
 );
 
@@ -43,7 +43,7 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
     <span>
       <FiInfo className="h-4 w-4" />
     </span>
-    <p>{message}</p>
+    <p data-testid="toast-warning">{message}</p>
   </div>
 );