From 240567aa5985c57531ae2862648435831ea5d4b2 Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Thu, 31 Oct 2024 19:26:15 +0530
Subject: [PATCH] feat: pass props for visible of open in playground button

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 src/custom/CatalogDetail/ActionButton.tsx   | 48 +++++++++++----------
 src/custom/CatalogDetail/LeftPanel.tsx      |  5 ++-
 src/custom/CatalogDetail/RelatedDesigns.tsx | 10 +++--
 src/custom/CatalogDetail/RightPanel.tsx     |  8 +++-
 src/custom/CatalogDetail/UserInfo.tsx       |  2 +-
 5 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index e7a9806d7..ed7ce790f 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/src/custom/CatalogDetail/ActionButton.tsx
@@ -18,6 +18,7 @@ interface ActionButtonsProps {
   handleClone: (name: string, id: string) => void;
   mode: string;
   isCloneDisabled: boolean;
+  showOpenPlaygroundButton: boolean;
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -28,7 +29,8 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   isCloneLoading,
   handleClone,
   mode,
-  isCloneDisabled
+  isCloneDisabled,
+  showOpenPlaygroundButton
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const resourcePlaygroundType = Object.values({
@@ -51,7 +53,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           <ActionButton
             sx={{
               borderRadius: '0.2rem',
-              backgroundColor: 'background.inverse',
+              backgroundColor: charcoal[10],
               gap: '10px',
               color: charcoal[100]
             }}
@@ -87,27 +89,29 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           )}
         </div>
       )}
-      <LinkUrl
-        style={{ width: '100%' }}
-        href={`https://playground.meshery.io/extension/meshmap?mode=${mode}&type=${resourcePlaygroundType}&id=${cardId}&name=${slugify(
-          details.name
-        )}`}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <ActionButton
-          sx={{
-            borderRadius: '0.2rem',
-            backgroundColor: 'background.cta.default',
-            color: charcoal[10],
-            gap: '10px',
-            width: '100%'
-          }}
+      {showOpenPlaygroundButton && (
+        <LinkUrl
+          style={{ width: '100%' }}
+          href={`https://playground.meshery.io/extension/meshmap?mode=${mode}&type=${resourcePlaygroundType}&id=${cardId}&name=${slugify(
+            details.name
+          )}`}
+          target="_blank"
+          rel="noreferrer"
         >
-          <KanvasIcon width={24} height={24} primaryFill={charcoal[10]} fill={charcoal[10]} />
-          Open in Playground
-        </ActionButton>
-      </LinkUrl>
+          <ActionButton
+            sx={{
+              borderRadius: '0.2rem',
+              backgroundColor: 'background.cta.default',
+              color: charcoal[10],
+              gap: '10px',
+              width: '100%'
+            }}
+          >
+            <KanvasIcon width={24} height={24} primaryFill={charcoal[10]} fill={charcoal[10]} />
+            Open in Playground
+          </ActionButton>
+        </LinkUrl>
+      )}
     </StyledActionWrapper>
   );
 };
diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx
index 2bb7fbb37..30d006072 100644
--- a/src/custom/CatalogDetail/LeftPanel.tsx
+++ b/src/custom/CatalogDetail/LeftPanel.tsx
@@ -21,6 +21,7 @@ interface LeftPanelProps {
   technologySVGPath: string;
   technologySVGSubpath: string;
   fontFamily?: string;
+  showOpenPlaygroundButton?: boolean;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -36,7 +37,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   isCloneDisabled,
   technologySVGPath,
   technologySVGSubpath,
-  fontFamily
+  fontFamily,
+  showOpenPlaygroundButton = true
 }) => {
   const theme = useTheme();
 
@@ -77,6 +79,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         handleClone={handleClone}
         mode={mode}
         isCloneDisabled={isCloneDisabled}
+        showOpenPlaygroundButton={showOpenPlaygroundButton}
       />
       {showTechnologies && (
         <TechnologySection
diff --git a/src/custom/CatalogDetail/RelatedDesigns.tsx b/src/custom/CatalogDetail/RelatedDesigns.tsx
index fdf8cedf3..d1ed67264 100644
--- a/src/custom/CatalogDetail/RelatedDesigns.tsx
+++ b/src/custom/CatalogDetail/RelatedDesigns.tsx
@@ -14,6 +14,8 @@ interface RelatedDesignsProps {
   patternsPerUser: PatternsPerUser;
   onSuggestedPatternClick: (pattern: Pattern) => void;
   userProfile?: UserProfile;
+  technologySVGPath: string;
+  technologySVGSubpath: string;
 }
 
 const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
@@ -21,7 +23,9 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
   type,
   patternsPerUser,
   onSuggestedPatternClick,
-  userProfile
+  userProfile,
+  technologySVGPath,
+  technologySVGSubpath
 }) => {
   const filteredPatternsPerUser = patternsPerUser?.patterns?.filter(
     (pattern) => pattern.id !== details.id
@@ -45,8 +49,8 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
             onCardClick={() => onSuggestedPatternClick(pattern)}
             UserName={`${userProfile?.first_name ?? ''} ${userProfile?.last_name ?? ''}`}
             avatarUrl={userProfile?.avatar_url}
-            basePath="/static/img/meshmodels"
-            subBasePath="color"
+            basePath={technologySVGPath}
+            subBasePath={technologySVGSubpath}
             cardTechnologies={true}
           >
             <CatalogCardDesignLogo
diff --git a/src/custom/CatalogDetail/RightPanel.tsx b/src/custom/CatalogDetail/RightPanel.tsx
index 0c3c8a4d5..5fc88f1fb 100644
--- a/src/custom/CatalogDetail/RightPanel.tsx
+++ b/src/custom/CatalogDetail/RightPanel.tsx
@@ -22,6 +22,8 @@ interface RightPanelProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   useGetUserProfileByIdQuery: any;
   fontFamily?: string;
+  technologySVGPath: string;
+  technologySVGSubpath: string;
 }
 
 const RightPanel: React.FC<RightPanelProps> = ({
@@ -39,7 +41,9 @@ const RightPanel: React.FC<RightPanelProps> = ({
   onSuggestedPatternClick,
   handleCopyUrl,
   fontFamily,
-  useGetUserProfileByIdQuery
+  useGetUserProfileByIdQuery,
+  technologySVGPath,
+  technologySVGSubpath
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const { data: userProfile } = useGetUserProfileByIdQuery({
@@ -69,6 +73,8 @@ const RightPanel: React.FC<RightPanelProps> = ({
         patternsPerUser={patternsPerUser}
         onSuggestedPatternClick={onSuggestedPatternClick}
         userProfile={userProfile}
+        technologySVGPath={technologySVGPath}
+        technologySVGSubpath={technologySVGSubpath}
       />
     </div>
   );
diff --git a/src/custom/CatalogDetail/UserInfo.tsx b/src/custom/CatalogDetail/UserInfo.tsx
index 86029f960..602433086 100644
--- a/src/custom/CatalogDetail/UserInfo.tsx
+++ b/src/custom/CatalogDetail/UserInfo.tsx
@@ -21,7 +21,7 @@ const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true, userPr
             target="_blank"
             rel="noopener noreferrer"
           >
-            <span style={{ fontWeight: 'normal', fontSize: '1.2rem' }}>
+            <span style={{ fontWeight: 'normal' }}>
               {userProfile?.first_name} {userProfile?.last_name}
             </span>
           </RedirectLink>