Merge pull request #806 from amitamrutiya/open-playground

add 'Open in Playground' action button conditionally

Author: amitamrutiya

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

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 && (

src/custom/CustomTooltip/customTooltip.tsx

@@ -57,7 +57,7 @@ function CustomTooltip({
       onClick={onClick}
       {...props}
     >
-      <span>{children}</span>
+      {children}
     </Tooltip>
   );
 }