final fixes for challenge 30119190-links as attachments

Author: vignesh-at-alation

src/api/projectAttachments.js

@@ -1,19 +1,19 @@
 import { axiosInstance as axios } from './requestInterceptor'
-import { PROJECTS_API_URL, FILE_PICKER_SUBMISSION_CONTAINER_NAME } from '../config/constants'
+import { PROJECTS_API_URL, FILE_PICKER_SUBMISSION_CONTAINER_NAME, ATTACHMENT_TYPE_FILE } from '../config/constants'
 
-export function addProjectAttachment(projectId, fileData) {
+export function addProjectAttachment(projectId, attachment) {
 
-  if (fileData.type === 'file') {
+  if (attachment.type === ATTACHMENT_TYPE_FILE) {
     // add s3 bucket prop
-    fileData.s3Bucket = FILE_PICKER_SUBMISSION_CONTAINER_NAME
+    attachment.s3Bucket = FILE_PICKER_SUBMISSION_CONTAINER_NAME
   }
 
   // The api takes only arrays
-  if (!fileData.tags) {
-    fileData.tags = []
+  if (!attachment.tags) {
+    attachment.tags = []
   }
 
-  return axios.post(`${PROJECTS_API_URL}/v5/projects/${projectId}/attachments`, fileData)
+  return axios.post(`${PROJECTS_API_URL}/v5/projects/${projectId}/attachments`, attachment)
     .then( resp => {
       resp.data.downloadUrl = `/projects/${projectId}/attachments/${resp.data.id}`
       return resp.data

src/components/Modal/Modal.scss

@@ -7,7 +7,7 @@
     border-radius: $corner-radius;
     position: relative;
     padding: $base-unit*2 0;
-  
+
     .btn-close {
       position: absolute;
       display: block;
@@ -16,14 +16,14 @@
       top: $base-unit*3;
       right: $base-unit*3;
     }
-  
+
     .modal-title {
       @include roboto-bold;
       font-size: $tc-label-lg;
       padding: $base-unit*2 $base-unit*4 0 $base-unit*4;
       line-height: $base-unit*4;
       text-align: center;
-  
+
       &.title-muted {
         @include roboto-medium;
         color: $tc-gray-50;
@@ -32,18 +32,23 @@
         padding-top: $base-unit;
         padding-bottom: $base-unit;
       }
-  
+
       &.danger {
         color: $tc-red;
       }
     }
-  
+
     .modal-body {
       @include roboto;
       font-size: $tc-label-md;
       line-height: $base-unit * 4;
       margin: $base-unit*2 $base-unit*4;
-  
+
+      // Fix alignment issue of selected items in react select inside modal
+      .has-react-select input {
+        height: auto
+      }
+
       input {
         display: block;
         height: 38px;
@@ -55,67 +60,67 @@
         @include placeholder {
           text-transform: none;
         }
-  
+
         &[disabled] {
           color: $tc-gray-20;
           background: $tc-white;
         }
-  
+
         &:hover {
           border-color: $tc-gray-40;
           background: $tc-gray-neutral-light;
         }
-  
+
         &:focus {
           background: $tc-white !important;
           border-color: $tc-dark-blue !important;
         }
-  
+
         &.error {
           border-left: 3px solid $tc-red-70 !important;
           background: $tc-gray-neutral-light !important;
-  
+
           &:focus {
             background: $tc-white !important;
             border-color: $tc-dark-blue !important;
           }
         }
       }
-  
+
       .modal-inline-form {
         display: flex;
         margin-bottom: $base-unit*2;
-  
+
         button {
           margin-left: $base-unit;
         }
-  
+
         .input-icon-group {
           position: relative;
           flex-grow: 1;
           display: flex;
           border: 1px solid $tc-gray-20;
           box-shadow: inset 0px 0px 2px 0px rgba($tc-gray-30, 0.2);
-  
+
           input {
             flex-grow: 1;
             display: inline-block;
             border: none;
             box-shadow: none;
           }
-  
+
           .input-icon {
             height: 30px;
             margin: 4px;
-  
+
             &:empty {
               width: 36px;
               background-size: 30px 30px;
               background-color: $tc-gray-20;
               background-position: center;
               border-radius: 34px;
             }
-  
+
             img {
               width: 30px;
               height: 30px;
@@ -124,33 +129,32 @@
           }
         }
       }
-  
+
       .message {
         text-align: center;
         margin-bottom: $base-unit*4;
         color: $tc-black;
       }
-  
+
       .button-area {
         button:not(:last-child) {
           margin-right: 2 * $base-unit;
         }
-  
+
         .btn-cancel {
           border: 1px solid $tc-dark-blue;
           box-shadow: 0px 0px 3px 0px $tc-dark-blue-30;
         }
       }
     }
-  
+
     .form-group {
       margin-top: 20px;
       margin-bottom: 15px;
     }
-  
+
     .center-buttons {
       text-align: center;
     }
   }
 }
-  

src/components/TagSelect/TagSelect.jsx

@@ -8,15 +8,27 @@ import PropTypes from 'prop-types'
  */
 export const TagSelect = ({ selectedTags, onUpdate, useFormsySelect, name }) => {
   const noOptionsMessage = evt => {
-    if (evt.inputValue === '') {
+    const inputValue = evt.inputValue && evt.inputValue.trim()
+    if (inputValue === '') {
       return 'Start typing to create a new tag'
-    } else if (selectedTags && selectedTags.includes(evt.inputValue)) {
+    } else if (selectedTags && selectedTags.includes(inputValue)) {
       return 'Tag already selected'
     }
   }
 
+  const isValidNewOption = inputValue => {
+    return inputValue && !!inputValue.trim()
+  }
+
+  const getNewOptionData = (inputValue, label) => {
+    return {
+      label,
+      value: inputValue.trim()
+    }
+  }
+
   return (
-    <div>
+    <div className="has-react-select">
       {
         useFormsySelect ?
           <FormsySelect
@@ -28,6 +40,8 @@ export const TagSelect = ({ selectedTags, onUpdate, useFormsySelect, name }) =>
             showDropdownIndicator={false}
             placeholder="Add tags"
             noOptionsMessage={noOptionsMessage}
+            isValidNewOption={isValidNewOption}
+            getNewOptionData={getNewOptionData}
           /> :
           <ReactSelect
             isMulti
@@ -39,6 +53,8 @@ export const TagSelect = ({ selectedTags, onUpdate, useFormsySelect, name }) =>
             value={(selectedTags || []).map(t => ({ value: t, label: t }))}
             onChange={tags => onUpdate(tags.map(t => t.value))}
             noOptionsMessage={noOptionsMessage}
+            isValidNewOption={isValidNewOption}
+            getNewOptionData={getNewOptionData}
           />
       }
 

src/components/UserAutoComplete/UserAutoComplete.jsx

@@ -17,7 +17,7 @@ const UserAutoComplete = ({
   onUpdate,
   loggedInUser
 }) => (
-  <div styleName="user-select-wrapper" className="user-select-wrapper">
+  <div styleName="user-select-wrapper" className="user-select-wrapper has-react-select">
     <Select
       isMulti
       closeMenuOnSelect

src/config/constants.js

@@ -560,6 +560,11 @@ export const SCOPE_CHANGE_REQ_STATUS_REJECTED = 'rejected'
 export const SCOPE_CHANGE_REQ_STATUS_ACTIVATED = 'activated'
 export const SCOPE_CHANGE_REQ_STATUS_CANCELED = 'canceled'
 
+/*
+* Project Attachment types
+*/
+export const ATTACHMENT_TYPE_FILE = 'file'
+export const ATTACHMENT_TYPE_LINK = 'link'
 
 export const PHASE_STATUS_DRAFT = 'draft'
 export const PHASE_STATUS_IN_REVIEW = 'in_review'

src/projects/detail/components/FileListContainer.jsx

@@ -7,6 +7,7 @@ import AddFiles from '../../../components/FileList/AddFiles'
 import { getProjectRoleForCurrentUser } from '../../../helpers/projectHelper'
 import { uploadProjectAttachments, discardAttachments, changeAttachmentPermission } from '../../actions/projectAttachment'
 import AddFilePermission from '../../../components/FileList/AddFilePermissions'
+import { ATTACHMENT_TYPE_FILE } from '../../../config/constants'
 
 class FileListContainer extends Component {
   constructor(props) {
@@ -25,7 +26,7 @@ class FileListContainer extends Component {
         category,
         size: f.size,
         path: f.key,
-        type: 'file',
+        type: ATTACHMENT_TYPE_FILE,
         contentType: f.mimetype || 'application/unknown'
       }
       attachments.push(attachment)

src/projects/detail/containers/AssetsInfoContainer.jsx

@@ -26,6 +26,8 @@ import {
   PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS,
   PROJECT_ASSETS_SHARED_WITH_ADMIN,
   EVENT_TYPE,
+  ATTACHMENT_TYPE_LINK,
+  ATTACHMENT_TYPE_FILE,
 } from '../../../config/constants'
 import AddLink from '../../../components/AssetsLibrary/AddLink'
 import PERMISSIONS from '../../../config/permissions'
@@ -58,9 +60,8 @@ class AssetsInfoContainer extends React.Component {
       }
     }
     this.onAddNewLink = this.onAddNewLink.bind(this)
-    this.onDeleteLink = this.onDeleteLink.bind(this)
     this.onEditLink = this.onEditLink.bind(this)
-    this.onEditAttachment = this.onEditAttachment.bind(this)
+    this.onEditFileAttachment = this.onEditFileAttachment.bind(this)
     this.onAddFile = this.onAddFile.bind(this)
     this.onUploadAttachment = this.onUploadAttachment.bind(this)
     this.removeAttachment = this.removeAttachment.bind(this)
@@ -192,16 +193,11 @@ class AssetsInfoContainer extends React.Component {
     addProjectAttachment(project.id, {
       title: link.title,
       tags: link.tags,
-      type: 'link',
+      type: ATTACHMENT_TYPE_LINK,
       path: link.address
     })
   }
 
-  onDeleteLink(id) {
-    const { project, removeProjectAttachment } = this.props
-    removeProjectAttachment(project.id, id)
-  }
-
   onEditLink(id, title, address, tags) {
     const { project, updateProjectAttachment } = this.props
 
@@ -212,7 +208,7 @@ class AssetsInfoContainer extends React.Component {
     })
   }
 
-  onEditAttachment(originalAttachment, title, allowedUsers, tags) {
+  onEditFileAttachment(originalAttachment, title, allowedUsers, tags) {
     const { project, updateProjectAttachment, phases, updateProductAttachment } = this.props
     const updatedAttachment = {
       title,
@@ -501,7 +497,7 @@ class AssetsInfoContainer extends React.Component {
     const { project, isSuperUser, phases, feeds,
       isManageUser, phasesTopics, canAccessPrivatePosts } = this.props
 
-    let attachments = _.filter(project.attachments, a => a.type === 'file')
+    let attachments = _.filter(project.attachments, a => a.type === ATTACHMENT_TYPE_FILE)
     // merges the product attachments to show in the links menu
     if (phases && phases.length > 0) {
       phases.forEach(phase => {
@@ -555,7 +551,7 @@ class AssetsInfoContainer extends React.Component {
     const privateTopicLinks = topicLinks.filter(link => link.tag === PROJECT_FEED_TYPE_MESSAGES)
     const phaseLinks = this.extractLinksFromPosts(phaseFeeds)
 
-    let links = _.filter(project.attachments, a => a.type === 'link')
+    let links = _.filter(project.attachments, a => a.type === ATTACHMENT_TYPE_LINK)
     links = links.concat(publicTopicLinks)
     if (canAccessPrivatePosts) {
       links = links.concat(privateTopicLinks)
@@ -763,7 +759,7 @@ class AssetsInfoContainer extends React.Component {
           category,
           size: f.size,
           path: f.key,
-          type: 'file',
+          type: ATTACHMENT_TYPE_FILE,
           contentType: f.mimetype || 'application/unknown'
         }
         attachments.push(attachment)
@@ -862,7 +858,7 @@ class AssetsInfoContainer extends React.Component {
                 links={attachments}
                 title="Files"
                 onDelete={this.removeAttachment}
-                onEdit={this.onEditAttachment}
+                onEdit={this.onEditFileAttachment}
                 onAddAttachment={addProjectAttachment}
                 onUploadAttachment={this.onUploadAttachment}
                 isSharingAttachment={isSharingAttachment}
@@ -898,7 +894,7 @@ class AssetsInfoContainer extends React.Component {
                 assetsMembers={assetsMembers}
                 canDelete={canManageLinks}
                 canEdit={canManageLinks}
-                onDelete={this.onDeleteLink}
+                onDelete={this.removeAttachment}
                 onEdit={this.onEditLink}
                 formatModifyDate={formatModifyDate}
                 formatFolderTitle={formatFolderTitle}