From 8cd9285cc6a0ca3df0692fd67b84bcbb0aa931cd Mon Sep 17 00:00:00 2001
From: Amit Sharma <74371312+Amit91848@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:23:22 +0530
Subject: [PATCH] fix: Remove/Disable Duplicate button in Read Only mode of an
 event-type (#15511)

* fix: Remove/Disable Duplicate button in Read Only mode of an event-type

* fix: use readonly variable

* fix: hiding for smaller devices

* update test cases

---------

Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: unknown <adhabal2002@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
---
 .../views/event-types-listing-view.tsx        | 81 +++++++++----------
 apps/web/playwright/event-types.e2e.ts        |  2 +
 2 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index eeb1c98875..16e18c1510 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -164,7 +164,7 @@ const Item = ({
         </small>
       ) : null}
       {readOnly && (
-        <Badge variant="gray" className="ml-2">
+        <Badge variant="gray" className="ml-2" data-testid="readonly-badge">
           {t("readonly")}
         </Badge>
       )}
@@ -195,7 +195,7 @@ const Item = ({
           </small>
         ) : null}
         {readOnly && (
-          <Badge variant="gray" className="ml-2">
+          <Badge variant="gray" className="ml-2" data-testid="readonly-badge">
             {t("readonly")}
           </Badge>
         )}
@@ -513,7 +513,8 @@ export const EventTypeList = ({
                                   </DropdownItem>
                                 </DropdownMenuItem>
                               )}
-                              {!isManagedEventType && !isChildrenManagedEventType && (
+                              {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
+                              {!readOnly && !isManagedEventType && !isChildrenManagedEventType && (
                                 <>
                                   <DropdownMenuItem className="outline-none">
                                     <DropdownItem
@@ -541,25 +542,24 @@ export const EventTypeList = ({
                                 </DropdownMenuItem>
                               )}
                               {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
-                              {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
-                                !isChildrenManagedEventType && (
-                                  <>
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuItem>
-                                      <DropdownItem
-                                        color="destructive"
-                                        onClick={() => {
-                                          setDeleteDialogOpen(true);
-                                          setDeleteDialogTypeId(type.id);
-                                          setDeleteDialogSchedulingType(type.schedulingType);
-                                        }}
-                                        StartIcon="trash"
-                                        className="w-full rounded-none">
-                                        {t("delete")}
-                                      </DropdownItem>
-                                    </DropdownMenuItem>
-                                  </>
-                                )}
+                              {!readOnly && !isChildrenManagedEventType && (
+                                <>
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem>
+                                    <DropdownItem
+                                      color="destructive"
+                                      onClick={() => {
+                                        setDeleteDialogOpen(true);
+                                        setDeleteDialogTypeId(type.id);
+                                        setDeleteDialogSchedulingType(type.schedulingType);
+                                      }}
+                                      StartIcon="trash"
+                                      className="w-full rounded-none">
+                                      {t("delete")}
+                                    </DropdownItem>
+                                  </DropdownMenuItem>
+                                </>
+                              )}
                             </DropdownMenuContent>
                           </Dropdown>
                         </ButtonGroup>
@@ -629,7 +629,7 @@ export const EventTypeList = ({
                             </DropdownItem>
                           </DropdownMenuItem>
                         )}
-                        {!isManagedEventType && !isChildrenManagedEventType && (
+                        {!readOnly && !isManagedEventType && !isChildrenManagedEventType && (
                           <DropdownMenuItem className="outline-none">
                             <DropdownItem
                               onClick={() => openDuplicateModal(type, group)}
@@ -640,24 +640,23 @@ export const EventTypeList = ({
                           </DropdownMenuItem>
                         )}
                         {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
-                        {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
-                          !isChildrenManagedEventType && (
-                            <>
-                              <DropdownMenuItem className="outline-none">
-                                <DropdownItem
-                                  color="destructive"
-                                  onClick={() => {
-                                    setDeleteDialogOpen(true);
-                                    setDeleteDialogTypeId(type.id);
-                                    setDeleteDialogSchedulingType(type.schedulingType);
-                                  }}
-                                  StartIcon="trash"
-                                  className="w-full rounded-none">
-                                  {t("delete")}
-                                </DropdownItem>
-                              </DropdownMenuItem>
-                            </>
-                          )}
+                        {!readOnly && !isChildrenManagedEventType && (
+                          <>
+                            <DropdownMenuItem className="outline-none">
+                              <DropdownItem
+                                color="destructive"
+                                onClick={() => {
+                                  setDeleteDialogOpen(true);
+                                  setDeleteDialogTypeId(type.id);
+                                  setDeleteDialogSchedulingType(type.schedulingType);
+                                }}
+                                StartIcon="trash"
+                                className="w-full rounded-none">
+                                {t("delete")}
+                              </DropdownItem>
+                            </DropdownMenuItem>
+                          </>
+                        )}
                         <DropdownMenuSeparator />
                         {!isManagedEventType && (
                           <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between px-4 py-2">
diff --git a/apps/web/playwright/event-types.e2e.ts b/apps/web/playwright/event-types.e2e.ts
index 0dd203fb2b..dc8eea1755 100644
--- a/apps/web/playwright/event-types.e2e.ts
+++ b/apps/web/playwright/event-types.e2e.ts
@@ -91,6 +91,8 @@ testBothFutureAndLegacyRoutes.describe("Event Types tests", () => {
       const firstFullSlug = await page.locator(`[data-testid=event-type-slug-${eventTypeId}]`).innerText();
       const firstSlug = firstFullSlug.split("/")[2];
 
+      await expect(page.locator("[data-testid=readonly-badge]")).toBeHidden();
+
       await page.click(`[data-testid=event-type-options-${eventTypeId}]`);
       await page.click(`[data-testid=event-type-duplicate-${eventTypeId}]`);
       // Wait for the dialog to appear so we can get the URL