Revert "Revert "List post links on the sidebar""

This reverts commit dae60ff.

Author: maxceem

src/components/LinksMenu/LinksMenu.jsx

@@ -6,6 +6,7 @@ import Panel from '../Panel/Panel'
 import AddLink from './AddLink'
 import DeleteLinkModal from './DeleteLinkModal'
 import EditLinkModal from './EditLinkModal'
+import LinksMenuAccordion from './LinksMenuAccordion'
 import uncontrollable from 'uncontrollable'
 import MobileExpandable from '../MobileExpandable/MobileExpandable'
 import cn from 'classnames'
@@ -100,7 +101,9 @@ const LinksMenu = ({
                 }
                 const onEditCancel = () => onEditIntent(-1)
                 const handleEditClick = () => onEditIntent(idx)
-                if (linkToDelete === idx) {
+                if (Array.isArray(link.children) && link.children.length > 0) {
+                  return (<LinksMenuAccordion key={`link-menu-accordion-${idx}`} link={ link } renderLink={ renderLink } />)
+                } else if (linkToDelete === idx) {
                   return (
                     <li className="delete-confirmation-modal" key={ 'delete-confirmation-' + idx }>
                       <DeleteLinkModal

src/components/LinksMenu/LinksMenuAccordion.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import IconCarretDownNormal from '../../assets/icons/arrow-6px-carret-down-normal.svg'
+import './LinksMenuAccordion.scss'
+
+
+class LinksMenuAccordion extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isOpen: false,
+    }
+
+    this.toggleAccordion = this.toggleAccordion.bind(this)
+  }
+
+  toggleAccordion() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  render() {
+    const { link, renderLink } = this.props
+    const { isOpen } = this.state
+    const iconClasses = `icon ${isOpen ? 'active' : ''}`
+    return (
+      <div styleName="link-accordion">
+        <div styleName="link-accordion-head" onClick={this.toggleAccordion}>
+          <span><IconCarretDownNormal styleName={iconClasses}/></span>
+          <span styleName="link-accordion-title">{link.title}</span>
+        </div>
+        {isOpen && <div styleName="link-accordion-content">
+          <ul>
+            {
+              link.children.map((childLink, i) => {
+                return <li key={`childlink-${childLink.address}-${i}`}>{renderLink(childLink)}</li>
+              })
+            }
+          </ul>
+        </div>}
+      </div>
+    )
+  }
+}
+
+LinksMenuAccordion.propTypes = {
+  link: PropTypes.object.isRequired,
+  renderLink: PropTypes.func.isRequired
+}
+
+export default LinksMenuAccordion

src/components/LinksMenu/LinksMenuAccordion.scss

@@ -0,0 +1,40 @@
+@import '~tc-ui/src/styles/tc-includes';
+@import '../../styles/includes';
+
+.link-accordion {
+  padding: 0 20px;
+  font-weight: 400;
+  font-size: 13px;
+}
+
+.link-accordion-content li {
+  padding-left: 15px;
+}
+
+.link-accordion-head {
+  padding: 10px 0;
+  cursor: pointer;
+  display: flex;
+}
+
+.link-accordion-head .icon {
+  transform: rotate(-90deg);
+}
+
+.link-accordion-head .icon.active {
+  transform: rotate(0);
+}
+
+.link-accordion-title {
+  margin-left: 5px;
+}
+
+.link-accordion-head:hover {
+  background: $tc-gray-neutral-light;
+}
+
+@media screen and (max-width: $screen-md - 1px) {
+  .link-accordion-head {
+    padding: 20px 0;
+  }
+}

src/projects/detail/containers/ProjectInfoContainer.js

@@ -16,7 +16,7 @@ import { PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER,
 import PERMISSIONS from '../../../config/permissions'
 import { checkPermission } from '../../../helpers/permissions'
 import ProjectInfo from '../../../components/ProjectInfo/ProjectInfo'
-import { 
+import {
   addProjectAttachment, updateProjectAttachment, uploadProjectAttachments, discardAttachments, changeAttachmentPermission,
   removeProjectAttachment
 } from '../../actions/projectAttachment'
@@ -38,6 +38,10 @@ class ProjectInfoContainer extends React.Component {
     this.onUploadAttachment = this.onUploadAttachment.bind(this)
     this.removeAttachment = this.removeAttachment.bind(this)
     this.onSubmitForReview = this.onSubmitForReview.bind(this)
+    this.extractLinksFromPosts = this.extractLinksFromPosts.bind(this)
+    this.extractMarkdownLink = this.extractMarkdownLink.bind(this)
+    this.extractHtmlLink = this.extractHtmlLink.bind(this)
+    this.extractRawLink = this.extractRawLink.bind(this)
   }
 
   shouldComponentUpdate(nextProps, nextState) { // eslint-disable-line no-unused-vars
@@ -156,13 +160,110 @@ class ProjectInfoContainer extends React.Component {
     updateProject(project.id, { status: 'in_review'})
   }
 
+  extractHtmlLink(str) {
+    const links = []
+    const regex = /<a[^>]+href="(.*?)"[^>]*>([\s\S]*?)<\/a>/gm
+    const urlRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/gm // eslint-disable-line no-useless-escape
+    const rawLinks = regex.exec(str)
+
+    if (Array.isArray(rawLinks)) {
+      let i = 0
+      while (i < rawLinks.length) {
+        const title = rawLinks[i + 2]
+        const address = rawLinks[i + 1]
+
+        if (urlRegex.test(address)) {
+          links.push({
+            title,
+            address
+          })
+        }
+
+        i = i + 3
+      }
+    }
+
+    return links
+  }
+
+  extractMarkdownLink(str) {
+    const links = []
+    const regex = /(?:__|[*#])|\[(.*?)\]\((.*?)\)/gm
+    const urlRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/gm // eslint-disable-line no-useless-escape
+    const rawLinks = regex.exec(str)
+
+    if (Array.isArray(rawLinks)) {
+      let i = 0
+      while (i < rawLinks.length) {
+        const title = rawLinks[i + 1]
+        const address = rawLinks[i + 2]
+
+        if (urlRegex.test(address)) {
+          links.push({
+            title,
+            address
+          })
+        }
+
+        i = i + 3
+      }
+    }
+
+    return links
+  }
+
+  extractRawLink(str) {
+    let links = []
+    const regex = /(\s|^)(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,}[\s])(\s|$)/igm // eslint-disable-line no-useless-escape
+    const rawLinks = str.match(regex)
+
+    if (Array.isArray(rawLinks)) {
+      links = rawLinks
+        .filter(link => !link.includes(']'))
+        .map(link => {
+          const name = link.trim()
+          const url = !/^https?:\/\//i.test(name) ? 'http://' + name : name
+
+          return {
+            title: name,
+            address: url
+          }
+        })
+    }
+
+    return links
+  }
+
+  extractLinksFromPosts(feeds) {
+    const links = []
+    feeds.forEach(feed => {
+      let childrenLinks = []
+      feed.posts.forEach(post => {
+        childrenLinks = childrenLinks.concat([
+          ...this.extractHtmlLink(post.rawContent),
+          ...this.extractMarkdownLink(post.rawContent),
+          ...this.extractRawLink(post.rawContent)
+        ])
+      })
+
+      if (childrenLinks.length > 0) {
+        links.push({
+          title: feed.title,
+          children: childrenLinks
+        })
+      }
+    })
+
+    return links
+  }
+
   render() {
     const { duration } = this.state
     const { project, currentMemberRole, isSuperUser, phases, feeds,
       hideInfo, hideLinks, hideMembers, onChannelClick, activeChannelId, productsTimelines,
       isManageUser, phasesTopics, isProjectPlan, isProjectProcessing, projectTemplates,
       attachmentsAwaitingPermission, addProjectAttachment, discardAttachments, attachmentPermissions,
-      changeAttachmentPermission, projectMembers, loggedInUser, isSharingAttachment } = this.props
+      changeAttachmentPermission, projectMembers, loggedInUser, isSharingAttachment, canAccessPrivatePosts } = this.props
     let directLinks = null
     // check if direct links need to be added
     const isMemberOrCopilot = _.indexOf([PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER], currentMemberRole) > -1
@@ -251,6 +352,20 @@ class ProjectInfoContainer extends React.Component {
       })
     }
 
+    // extract links from posts
+    const topicLinks = this.extractLinksFromPosts(feeds)
+    const publicTopicLinks = topicLinks.filter(link => link.tag !== PROJECT_FEED_TYPE_MESSAGES)
+    const privateTopicLinks = topicLinks.filter(link => link.tag === PROJECT_FEED_TYPE_MESSAGES)
+    const phaseLinks = this.extractLinksFromPosts(phaseFeeds)
+
+    let links = []
+    links = links.concat(project.bookmarks)
+    links = links.concat(publicTopicLinks)
+    if (canAccessPrivatePosts) {
+      links = links.concat(privateTopicLinks)
+    }
+    links = links.concat(phaseLinks)
+
     return (
       <div>
         <div className="sideAreaWrapper">
@@ -300,7 +415,7 @@ class ProjectInfoContainer extends React.Component {
           }
           {!hideLinks &&
             <LinksMenu
-              links={project.bookmarks || []}
+              links={links}
               canDelete={canManageLinks}
               canEdit={canManageLinks}
               canAdd={canManageLinks}