Merge pull request #307 from sailpoint-oss/marketplace-update

Marketplace update

src/components/marketplace/MarketplaceCard/index.js

@@ -30,6 +30,20 @@ export default function MarketplaceCard({
     <div onClick={(e) => setFilters(e)}>
       <div className={styles.card} >
 
+        <div className={styles.cardText}>
+          <img className={styles.cardImage} src={useBaseUrl(post.image)}></img>
+          <div className={styles.cardTitle}>{post.title}</div>
+          <div className={styles.tags}>
+            {post.tags?.map((tag, index) => {
+              if (index > 2) {
+                return '';
+              }
+              return <div key={tag} className={styles.tag}>{tag}</div>;
+            })}
+          </div>
+          <div className={styles.cardBody}>{post.excerpt}</div>
+        </div>
+
         <div className={styles.cardData}>
           <img className={styles.cardEye} src={useBaseUrl('/blog/eye-regular.svg')}></img>
           <div className={styles.cardCommentText}>{post.views}</div>
@@ -45,19 +59,7 @@ export default function MarketplaceCard({
 
         {badge}
 
-        <div className={styles.cardText}>
-          <img className={styles.cardImage} src={useBaseUrl(post.image)}></img>
-          <div className={styles.cardTitle}>{post.title}</div>
-          <div className={styles.tags}>
-            {post.tags?.map((tag, index) => {
-              if (index > 2) {
-                return '';
-              }
-              return <div key={tag} className={styles.tag}>{tag}</div>;
-            })}
-          </div>
-          <ReactMarkdown className={styles.cardBody}>{post.excerpt}</ReactMarkdown>
-        </div>
+
         
 
 

src/components/marketplace/MarketplaceCard/styles.module.css

@@ -2,7 +2,7 @@
 .card {
   position: relative;
   margin-top: 20px;
-  height: 650px;
+  min-height: 460px;
   /* UI Properties */
   background: var(--dev-card-background);
   box-shadow: var(--dev-card-shadow);
@@ -24,11 +24,17 @@
 
 
 .cardText {
-  position: absolute;
+  display: flex;
+  flex-direction: column;
   margin: 22px;
   min-width: 170px;
-  top: 10px;
-  left: 0;
+  margin-bottom: 75px;
+}
+
+.cardImage {
+  border-radius: 4px;
+  justify-content: center;
+  aspect-ratio: 16/9;
 }
 
 
@@ -50,7 +56,7 @@
   color: var(--dev-secondary-text);
   background-color: var(--dev-tag-highlight);
   padding: 0px 8px;
-  margin-left: 5px;
+  margin-right: 5px;
   margin-top: 5px;
 }
 
@@ -59,6 +65,7 @@
   width: 100%;
   display: flex;
   flex-wrap: wrap;
+  margin-bottom: 10px;
 }
 
 
@@ -133,6 +140,6 @@
   right: 5px;
   bottom: 0px;
   margin-left: 5px;
-  height: 120px;
-  width: 120px;
+  height: 80px;
+  width: 80px;
 }

src/components/marketplace/MarketplaceCardDetail/index.js

@@ -19,13 +19,11 @@ export default function MarketplaceCardDetail({details, rawPost}) {
       );
       const incorrectURLPattern = /upload:\/\/([^"]+)/g;
       const correctURLPattern =
-        'https://developer.identitysoon.com/discuss/uploads/short-url/$1';
+        'https://developer.sailpoint.com/discuss/uploads/short-url/$1';
       return validContent.replace(incorrectURLPattern, correctURLPattern);
     } else {
       return 'No requirements found for this marketplace item';
     }
-    // https://developer.identitysoon.com/discuss/uploads/short-url/f9rlt0eoj7RnpndvL0CHjcEesV0.png?dl=1\
-    // upload://f9rlt0eoj7RnpndvL0CHjcEesV0.png
   };
 
   const goToLink = (link) => {
@@ -40,19 +38,10 @@ export default function MarketplaceCardDetail({details, rawPost}) {
           <img
             className={styles.detailImage}
             src={useBaseUrl(details.image)}></img>
+
         </div>
 
         <Tabs className={styles.detailTabs}>
-          <TabList>
-            <Tab>Details</Tab>
-            <Tab>Requirements</Tab>
-            <Tab>Support</Tab>
-          </TabList>
-
-          <TabPanel>
-            <ReactMarkdown className={styles.detailTabContent}>
-              {getDivText(rawPost, 'details')}
-            </ReactMarkdown>
           <button
             className={styles.modalButton}
             onClick={async () => {
@@ -65,20 +54,16 @@ export default function MarketplaceCardDetail({details, rawPost}) {
               See More
             </div>
           </button>
-            <button
-              className={styles.modalButton}
-              onClick={async () => {
-                console.log(getDivText(rawPost,'github'))
-                const regex = /\(([^)]+)\)/;
-                goToLink(getDivText(rawPost,'github').match(regex)[1]);
-              }}>
-              <div className={styles.modalButtonText}>
-                <img
-                  className={styles.buttonImage}
-                  src={useBaseUrl('/icons/github.svg')}></img>
-                  GitHub
-              </div>
-            </button>
+          <TabList>
+            <Tab>Details</Tab>
+            <Tab>Requirements</Tab>
+            <Tab>Support</Tab>
+          </TabList>
+
+          <TabPanel>
+            <ReactMarkdown className={styles.detailTabContent}>
+              {getDivText(rawPost, 'details')}
+            </ReactMarkdown>
           </TabPanel>
           <TabPanel>
             <ReactMarkdown className={styles.detailTabContent}>

src/components/marketplace/MarketplaceCardDetail/styles.module.css

@@ -6,9 +6,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 20px;
+  margin: 20px 20px 0px 20px;
 }
 
+.detailImageContainor {
+  display: flex;
+  flex-direction: column;
+}
 .detailImage {
   border-radius: 40px;
   max-width: 400px;
@@ -28,7 +32,8 @@
 }
 
 .detailTabs {
-  margin: 10px;
+  margin: 20px 10px 10px 10px;
+  position: relative;
 }
 
 
@@ -47,11 +52,15 @@
   text-align: center;
   width: 125px;
   background-color: #ffffff31;
+  position: absolute;
+  right: 0px;
+  top: -25px;
+  transition: all  0.3s;
 }
 
 .modalButton:hover {
   cursor: pointer;
-  top: -2px;
+  top: -23px;
   box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
   background-color: #dae1e9;
   color: #005fc4;

src/components/marketplace/MarketplaceCards/index.js

@@ -19,7 +19,6 @@ export default function MarketplaceCards({filterCallback}) {
 
   const getPosts = async () => {
     const data = await getMarketplacePosts(filterCallback.tags.join('+'), filterCallback.category);
-    console.log(data)
     const resultset = [];
     if (data.topics) {
       for (const topic of data.topics) {
@@ -136,13 +135,22 @@ async function getPostList(topic) {
 }
 
 function getavatarURL(avatar) {
-  return 'https://developer.sailpoint.com' + avatar.replace('{size}', '120');
+  if (avatar.includes("developer.sailpoint.com")) {
+    return "https://developer.sailpoint.com" + avatar.replace("{size}", "120")
+  } else {
+    return avatar.replace("{size}", "120")
+  }
 }
 
 function styleExcerpt(excerpt) {
   if (excerpt) {
     // remove any strings that have colons between them
     excerpt = excerpt.replace(/:[^:]*:/g, '');
+    // get text between "summary" and "Repository Link"
+    const match = excerpt.match(/Summary([\s\S]*?)Repository Link/)
+    if (match) {
+      excerpt = match[1].trim()
+    }
     if (excerpt.length > 150) {
       return excerpt.slice(0, 100) + '...';
     } else {

src/components/marketplace/MarketplaceCards/styles.module.css

@@ -39,8 +39,8 @@
   transform: translate(-50%, -50%);
   box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.25);
   border-radius: 20px;
-  background-color: var(--dev-card-background);
-  max-height: 100%;
+  background-color: var(--dev-popup-background);
+  max-height: 80%;
   max-width: 90%;
   min-height: 80%;
   scroll-behavior: auto;

src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js

@@ -10,6 +10,11 @@ export default function MarketplaceSidebarButton({
     category
   }) {
   const [isActive, setIsActive] = React.useState(false);
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = () => {
+    setChecked(!checked);
+  };
   let activeClass = ''
   if (isCategory && category === id) {
     activeClass = styles.tagSelected
@@ -18,21 +23,30 @@ export default function MarketplaceSidebarButton({
   } else {
     activeClass = isActive ? styles.tagSelected : ''
   }
+
+  let radioClass = styles.checkbox
+  if (isCategory) {
+    radioClass = styles.radio
+  }
   //const activeClass = isActive ? styles.tagSelected : ''
   function setFilters(e, id) {
     if (isCategory) {
       if (category === id) {
         filterCallback({"category": "marketplace"})
+        setIsActive(false)
       } else {
         filterCallback({"category": id})
+        setIsActive(true)
       }
       
     } else {
       filterCallback({"tag": id})
-    }
       setIsActive(current => !current);
+    }
+    
     
   }
+  // return <div><input id={id} type='checkbox' className={radioClass} checked={activeClass != ''} onChange={handleChange}></input><label htmlFor={id} onClick={(e) => setFilters(e, id)} className={activeClass + ' ' + styles.tag} key={text}>{text}</label></div>
   return <div key={text} onClick={(e) => setFilters(e, id)} className={activeClass + ' ' + styles.tag}>{text}</div>
 
 }

src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/styles.module.css

@@ -17,7 +17,7 @@
   font-size: 16px;
   font-weight: 500;
   background-color: var(--dev-secondary-text);
-  color: var(--dev-card-background);
+  color: var(--dev-tag-selected-text);
   padding: 8px;
   margin-right: 5px;
   margin-bottom: 5px;
@@ -31,6 +31,25 @@
 .tag:hover {
   cursor: pointer;
   background-color: var(--dev-text-color-normal);
-  color: var(--dev-card-background);
+  color: var(--dev-tag-selected-text);
 }
 
+/* .radio {
+  visibility: hidden;
+  position: absolute;
+}
+.radio + label:before{
+  height:12px;
+  width:12px;
+  margin-right: 2px;
+  content: " ";
+  display:inline-block;
+  vertical-align: baseline;
+  border:1px solid #777;
+}
+.radio:checked + label:before{
+  background-color: var(--ifm-color-primary);
+}
+.radio + label:before{
+  border-radius:50%;
+} */

src/components/marketplace/MarketplaceSidebar/index.js

@@ -24,7 +24,7 @@ export default function MarketplaceSidebar({
     const catIntegrationType = []
 
     for (const category of categoryData.category_list.categories) {
-      // 59 for marketplace
+      // 59 for production marketplace, 57 for staging marketplace
       if (category.id === 59) {
         for (const subCategory of category.subcategory_list) {
           
@@ -32,8 +32,8 @@ export default function MarketplaceSidebar({
         }
       }
     }
-
     for (const tagGroup of tagData.extras.tag_groups) {
+      // 20 for production marketplace, 11 for staging marketplace
       if (tagGroup.id === 20) {
         for (const tag of tagGroup.tags) {
           tagProductResultset.push(tag.text)
@@ -73,13 +73,9 @@ export default function MarketplaceSidebar({
         <div className={styles.tagHeader}>Items by Integration Type</div>
         <div className={styles.tagContainer}>
             {catIntegrationTypeData.map(function(a, index){
-              return <div key={'div' + a.slug} className={index > 10 && filterTags ? styles.hidden : ''} > <MarketplaceSidebarButton category={selectedCategory} isCategory={true} key={a.slug} text={a.name} id={a.slug} filterCallback={filterCallback}></MarketplaceSidebarButton></div>
+              return <MarketplaceSidebarButton category={selectedCategory} isCategory={true} key={a.slug} text={a.name} id={a.slug} filterCallback={filterCallback}></MarketplaceSidebarButton>
             })}
         </div>
-        <div className={styles.seeAll} onClick={(e) => toggleSeeAll()}>
-          {filterText}
-          {/* <img className={styles.caretDown} src={useBaseUrl('/blog/caret-down-thin.svg')}></img> */}
-        </div>
       </div>
       
     );

src/css/custom.css

@@ -251,6 +251,8 @@
 
   /*card css*/
   --dev-card-background: #e9e9e963;
+  --dev-tag-selected-text: #ffffffef;
+  --dev-popup-background: #fdfdfd;
   --dev-card-shadow: 0px 0px 0px #6b6b6b15;
   --dev-main-card-shadow: 0px 20px 60px #00000015;
   --dev-card-selected: 0 4px 5px rgba(0, 0, 0, 0.2);
@@ -288,12 +290,14 @@
 
   /*card css*/
   --dev-card-background: #2a2b2d;
+  --dev-popup-background: #2a2b2d;
   --dev-card-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
   --dev-main-card-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
   --dev-card-selected: 0 5px 5px rgba(151, 151, 151, 0.2);
   --dev-secondary-text: #dae1e9;
   --dev-tag-highlight: #00000075;
   --dev-button-hover: #c552ae40;
+  --dev-tag-selected-text: #2a2b2d;
 
   /*main hero card*/
   --main-hero-card-background: #202122;

src/pages/marketplace.js

@@ -26,11 +26,10 @@ export default function Marketplace() {
       }
     }
 
-
     if (data.category) {
-      setFilteredProduct({"category": data.category, "tags": [tempFilter]})
+      setFilteredProduct({"category": data.category, "tags": tempFilter})
     } else {
-      setFilteredProduct({"category": filteredProduct.category, "tags": [tempFilter]})
+      setFilteredProduct({"category": filteredProduct.category, "tags": tempFilter})
     }