Merge pull request #788 from amitamrutiya/amit/catalog-detail

make open in playground button dynamic for playground and cloud

Author: amitamrutiya

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>
   );
 };

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

src/custom/CatalogDetail/RelatedDesigns.tsx

@@ -14,14 +14,18 @@ interface RelatedDesignsProps {
   patternsPerUser: PatternsPerUser;
   onSuggestedPatternClick: (pattern: Pattern) => void;
   userProfile?: UserProfile;
+  technologySVGPath: string;
+  technologySVGSubpath: string;
 }
 
 const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
   details,
   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

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>
   );

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>