From e92d6a8b9daf0496605e939643ad497e42b802c4 Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Tue, 12 Nov 2024 12:02:55 +0530
Subject: [PATCH] feat: add 'Open in Playground' action button conditionally

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 src/custom/CatalogDetail/ActionButton.tsx  | 43 ++++++++++++----------
 src/custom/CatalogDetail/LeftPanel.tsx     |  3 ++
 src/custom/CustomTooltip/customTooltip.tsx |  2 +-
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index 41154b03..5e9b6350 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/src/custom/CatalogDetail/ActionButton.tsx
@@ -17,6 +17,7 @@ interface ActionButtonsProps {
   handleUnpublish: () => void;
   isCloneDisabled: boolean;
   showUnpublishAction: boolean;
+  showOpenPlaygroundAction: boolean;
   onOpenPlaygroundClick: (designId: string, name: string) => void;
 }
 
@@ -29,6 +30,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   isCloneDisabled,
   showUnpublishAction,
   handleUnpublish,
+  showOpenPlaygroundAction,
   onOpenPlaygroundClick
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
@@ -84,26 +86,27 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           )}
         </div>
       )}
-
-      <ActionButton
-        sx={{
-          borderRadius: '0.2rem',
-          backgroundColor: 'transparent',
-          border: `1px solid ${theme.palette.border.normal}`,
-          color: theme.palette.text.default,
-          gap: '10px',
-          width: '100%'
-        }}
-        onClick={() => onOpenPlaygroundClick(details.id, details.name)}
-      >
-        <KanvasIcon
-          width={24}
-          height={24}
-          primaryFill={theme.palette.icon.default}
-          fill={theme.palette.icon.default}
-        />
-        Open in Playground
-      </ActionButton>
+      {showOpenPlaygroundAction && (
+        <ActionButton
+          sx={{
+            borderRadius: '0.2rem',
+            backgroundColor: 'transparent',
+            border: `1px solid ${theme.palette.border.normal}`,
+            color: theme.palette.text.default,
+            gap: '10px',
+            width: '100%'
+          }}
+          onClick={() => onOpenPlaygroundClick(details.id, details.name)}
+        >
+          <KanvasIcon
+            width={24}
+            height={24}
+            primaryFill={theme.palette.icon.default}
+            fill={theme.palette.icon.default}
+          />
+          Open in Playground
+        </ActionButton>
+      )}
 
       {showUnpublishAction && (
         <UnpublishAction
diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx
index a707651a..18fa7073 100644
--- a/src/custom/CatalogDetail/LeftPanel.tsx
+++ b/src/custom/CatalogDetail/LeftPanel.tsx
@@ -21,6 +21,7 @@ interface LeftPanelProps {
   fontFamily?: string;
   handleUnpublish: () => void;
   showUnpublishAction?: boolean;
+  showOpenPlaygroundAction?: boolean;
   onOpenPlaygroundClick: (designId: string, name: string) => void;
 }
 
@@ -38,6 +39,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   technologySVGSubpath,
   fontFamily,
   showUnpublishAction = false,
+  showOpenPlaygroundAction = true,
   onOpenPlaygroundClick
 }) => {
   const theme = useTheme();
@@ -79,6 +81,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         showUnpublishAction={showUnpublishAction}
         handleUnpublish={handleUnpublish}
         isCloneDisabled={isCloneDisabled}
+        showOpenPlaygroundAction={showOpenPlaygroundAction}
         onOpenPlaygroundClick={onOpenPlaygroundClick}
       />
       {showTechnologies && (
diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
index b18cb18e..7287c152 100644
--- a/src/custom/CustomTooltip/customTooltip.tsx
+++ b/src/custom/CustomTooltip/customTooltip.tsx
@@ -57,7 +57,7 @@ function CustomTooltip({
       onClick={onClick}
       {...props}
     >
-      <span>{children}</span>
+      {children}
     </Tooltip>
   );
 }