Merge pull request #3320 from jankyzhang/cf19

maxceem · web-flow · commit ca65dcedcf08 · 2019-09-30T14:09:04.000+08:00
bug #3273 Show Created By for files and links list in Assets Library
diff --git a/src/components/AssetsLibrary/FilesGridView.jsx b/src/components/AssetsLibrary/FilesGridView.jsx
@@ -10,6 +10,7 @@ import DeleteFileLinkModal from '../LinksMenu/DeleteFileLinkModal'
 import EditFileAttachment from '../LinksMenu/EditFileAttachment'
 import SubFolder from './SubFolder'
 import ItemOperations from './ItemOperations'
+import UserTooltip from '../User/UserTooltip'
 
 import FolderIcon from '../../assets/icons/v.2.5/icon-folder-small.svg'
 
@@ -28,6 +29,7 @@ const FilesGridView = ({
   title,
   selectedUsers,
   onAddAttachment,
+  assetsMembers,
   isSharingAttachment,
   discardAttachments,
   onChangePermissions,
@@ -78,6 +80,7 @@ const FilesGridView = ({
           link={ subFolderContent }
           renderLink={ renderLink }
           goBack={goBack}
+          assetsMembers={assetsMembers}
           onDeletePostAttachment={onDeletePostAttachment}
           loggedInUser={loggedInUser}
           formatModifyDate={formatModifyDate}
@@ -99,6 +102,7 @@ const FilesGridView = ({
             <li styleName="assets-gridview-header" key="assets-gridview-header">
               <div styleName="flex-item-title item-type">Type</div>
               <div styleName="flex-item-title item-name">Name</div>
+              <div styleName="flex-item-title item-created-by">Created By</div>
               <div styleName="flex-item-title item-modified">Modified</div>
               <div styleName="flex-item-title item-action"/>
             </li>
@@ -119,12 +123,14 @@ const FilesGridView = ({
               const canEdit = `${link.createdBy}` === `${loggedInUser.userId}`
 
               const changeSubFolder = () => onChangeSubFolder(link)
+              const owner = _.find(assetsMembers, m => m.userId === _.parseInt(link.createdBy))
 
               if (Array.isArray(link.children) && link.children.length > 0) {
                 return (
                   <li styleName="assets-gridview-row" onClick={changeSubFolder} key={'assets-gridview-folder-' + idx}>
                     <div styleName="flex-item item-type"><FolderIcon /></div>
                     <div styleName="flex-item item-name hand"><p>{formatFolderTitle(link.title)}</p></div>
+                    <div styleName="flex-item item-created-by">—</div>
                     <div styleName="flex-item item-modified">{formatModifyDate(link)}</div>
                     <div styleName="flex-item item-action"/>
                   </li>)
@@ -161,6 +167,15 @@ const FilesGridView = ({
                       <img width={42} height={42} src={iconPath} />
                     </div>
                     <div styleName="flex-item item-name"><p>{renderLink(link)}</p></div>
+                    <div styleName="flex-item item-created-by">
+                      {!owner && (<div className="user-block txt-italic">Unknown</div>)}
+                      {owner && (
+                        <div className="spacing">
+                          <div className="user-block">
+                            <UserTooltip usr={owner} id={idx} size={35} />
+                          </div>
+                        </div>)}
+                    </div>
                     <div styleName="flex-item item-modified">{formatModifyDate(link)}</div>
                     <div styleName="flex-item item-action">
                       {canEdit && (
diff --git a/src/components/AssetsLibrary/GridView.scss b/src/components/AssetsLibrary/GridView.scss
@@ -85,7 +85,7 @@
   }
 }
 
-.item-modified {
+.item-modified, .item-created-by {
   -webkit-box-flex: 0;
   -ms-flex: none;
   flex: none;
@@ -134,4 +134,11 @@
 
 .assets-gridview-container-active {
   position: relative;
+}
+
+:global {
+  .user-block .tooltip-container {
+    text-align: left;
+    line-height: 20px;
+  }
 }
diff --git a/src/components/AssetsLibrary/LinksGridView.jsx b/src/components/AssetsLibrary/LinksGridView.jsx
@@ -8,6 +8,7 @@ import DeleteLinkModal from '../LinksMenu/DeleteLinkModal'
 import EditLinkModal from '../LinksMenu/EditLinkModal'
 import SubFolder from './SubFolder'
 import ItemOperations from './ItemOperations'
+import UserTooltip from '../User/UserTooltip'
 
 import FolderIcon from '../../assets/icons/v.2.5/icon-folder-small.svg'
 import LinkIcon from '../../assets/icons/link-12.svg'
@@ -28,6 +29,7 @@ const LinksGridView = ({
   title,
   formatModifyDate,
   formatFolderTitle,
+  assetsMembers,
 }) => {
   const renderLink = (link) => {
     if (link.onClick) {
@@ -59,6 +61,7 @@ const LinksGridView = ({
           renderLink={ renderLink }
           goBack={goBack}
           formatModifyDate={formatModifyDate}
+          assetsMembers={assetsMembers}
           isLinkSubFolder
         />)}
       {(!subFolderContent) && (
@@ -69,6 +72,7 @@ const LinksGridView = ({
             <li styleName="assets-gridview-header" key="assets-gridview-header">
               <div styleName="flex-item-title item-type">Type</div>
               <div styleName="flex-item-title item-name">Name</div>
+              <div styleName="flex-item-title item-created-by">Created By</div>
               <div styleName="flex-item-title item-modified">Modified</div>
               <div styleName="flex-item-title item-action"/>
             </li>
@@ -87,12 +91,14 @@ const LinksGridView = ({
               const onEditCancel = () => onEditIntent(-1)
               const handleEditClick = () => onEditIntent(idx)
               const changeSubFolder = () => onChangeSubFolder(link)
+              const owner = _.find(assetsMembers, m => m.userId === _.parseInt(link.createdBy))
 
               if (Array.isArray(link.children) && link.children.length > 0) {
                 return (
                   <li styleName="assets-gridview-row" onClick={changeSubFolder} key={'assets-gridview-folder-' + idx}>
                     <div styleName="flex-item item-type"><FolderIcon /></div>
                     <div styleName="flex-item item-name hand"><p>{formatFolderTitle(link.title)}</p></div>
+                    <div styleName="flex-item item-created-by">—</div>
                     <div styleName="flex-item item-modified">{formatModifyDate(link)}</div>
                     <div styleName="flex-item item-action"/>
                   </li>)
@@ -119,6 +125,16 @@ const LinksGridView = ({
                   <li styleName="assets-gridview-row" key={'assets-gridview-item-' +idx}>
                     <div styleName="flex-item item-type"><LinkIcon/></div>
                     <div styleName="flex-item item-name"><p>{renderLink(link)}</p></div>
+                    <div styleName="flex-item item-created-by">
+                      {!owner && !link.createdBy && (<div className="user-block">—</div>)}
+                      {!owner && link.createdBy && (<div className="user-block txt-italic">Unknown</div>)}
+                      {owner && (
+                        <div className="spacing">
+                          <div className="user-block">
+                            <UserTooltip usr={owner} id={idx} size={35} />
+                          </div>
+                        </div>)}
+                    </div>
                     <div styleName="flex-item item-modified">{formatModifyDate(link)}</div>
                     <div styleName="flex-item item-action">
                       {(canEdit || canDelete) && (
diff --git a/src/components/AssetsLibrary/SubFolder.jsx b/src/components/AssetsLibrary/SubFolder.jsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import _ from 'lodash'
 import cn from 'classnames'
 
 import DeleteFileLinkModal from '../LinksMenu/DeleteFileLinkModal'
 import ItemOperations from './ItemOperations'
+import UserTooltip from '../User/UserTooltip'
 import FolderIcon from '../../assets/icons/v.2.5/icon-folder-small.svg'
 
 import './GridView.scss'
@@ -54,7 +56,7 @@ class SubFolder extends React.Component {
   }
 
   render() {
-    const { link, renderLink, goBack, formatModifyDate, isLinkSubFolder } = this.props
+    const { link, renderLink, goBack, formatModifyDate, isLinkSubFolder, assetsMembers } = this.props
     const { linkToDelete } = this.state
     return (
       <div styleName={cn({'assets-gridview-container-active': (linkToDelete >= 0)}, '')}>
@@ -64,17 +66,20 @@ class SubFolder extends React.Component {
           <li styleName="assets-gridview-header" key="assets-gridview-header">
             <div styleName="flex-item-title item-type">Type</div>
             <div styleName="flex-item-title item-name">Name</div>
+            <div styleName="flex-item-title item-created-by">Created By</div>
             <div styleName="flex-item-title item-modified">Modified</div>
             <div styleName="flex-item-title item-action"/>
           </li>
           <li styleName="assets-gridview-row" key="assets-gridview-subfolder" onClick={goBack}>
             <div styleName="flex-item item-type"><FolderIcon /></div>
             <div styleName="flex-item item-name hand">..</div>
+            <div styleName="flex-item item-created-by"/>
             <div styleName="flex-item item-modified"/>
             <div styleName="flex-item item-action"/>
           </li>
           {
             link.children.map((childLink, i) => {
+              const owner = _.find(assetsMembers, m => m.userId === _.parseInt(childLink.createdBy))
               if (linkToDelete === i) {
                 return (
                   <li styleName="delete-confirmation-modal" key={'delete-confirmation-post-attachment-' + i}>
@@ -100,6 +105,16 @@ class SubFolder extends React.Component {
               return (<li styleName="assets-gridview-row" key={`childlink-${childLink.address}-${i}`}>
                 <div styleName="flex-item item-type"><img width={42} height={42} src={ iconPath } /></div>
                 <div styleName="flex-item item-name"><p>{renderLink(childLink)}</p></div>
+                <div styleName="flex-item item-created-by">
+                  {!owner && childLink.createdBy !== 'CoderBot' && (<div className="user-block txt-italic">Unknown</div>)}
+                  {!owner && childLink.createdBy === 'CoderBot' && (<div className="user-block">CoderBot</div>)}
+                  {owner && (
+                    <div className="spacing">
+                      <div className="user-block">
+                        <UserTooltip usr={owner} id={i} size={35} />
+                      </div>
+                    </div>)}
+                </div>
                 <div styleName="flex-item item-modified">{formatModifyDate(childLink)}</div>
                 <div styleName="flex-item item-action">
                   {childLink.deletable && this.hasAccess(childLink.createdBy) && (
diff --git a/src/projects/detail/containers/AssetsInfoContainer.jsx b/src/projects/detail/containers/AssetsInfoContainer.jsx
diff --git a/src/projects/reducers/project.js b/src/projects/reducers/project.js

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@`
`85`	`85`	`}`
`86`	`86`	`}`
`87`	`87`
`88`		`-.item-modified {`
	`88`	`+.item-modified, .item-created-by {`
`89`	`89`	`-webkit-box-flex: 0;`
`90`	`90`	`-ms-flex: none;`
`91`	`91`	`flex: none;`
`@@ -134,4 +134,11 @@`
`134`	`134`
`135`	`135`	`.assets-gridview-container-active {`
`136`	`136`	`position: relative;`
	`137`	`+}`
	`138`	`+`
	`139`	`+:global {`
	`140`	`+ .user-block .tooltip-container {`
	`141`	`+ text-align: left;`
	`142`	`+ line-height: 20px;`
	`143`	`+ }`
`137`	`144`	`}`