[https://github.com/tracim/tracim/issues/813] added handling of roles in frontend and apps

frontend/src/appFactory.js

 
 export function appFactory (WrappedComponent) {
   return class AppFactory extends React.Component {
-    renderAppFeature = (appConfig, user, content) => GLOBAL_renderAppFeature({
-      loggedUser: user.logged ? user : {},
+    renderAppFeature = (appConfig, user, idRoleUserWorkspace, content) => GLOBAL_renderAppFeature({
+      loggedUser: user.logged
+        ? {...user, idRoleUserWorkspace}
+        : {},
       config: {
         ...appConfig,
         domContainer: 'appFeatureContainer',

frontend/src/component/Workspace/BtnExtandedAction.jsx

       </button>
 
       <div className='extandedaction__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
-        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.edit}>
-          <div className='subdropdown__item__icon mr-3'>
-            <i className='fa fa-fw fa-pencil' />
-          </div>
-          <div className='subdropdown__item__text'>
-            {props.t('Edit')}
-          </div>
-        </div>
+        {props.idRoleUserWorkspace >= 2 &&
+          <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.edit}>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-pencil' />
+            </div>
 
-        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.move}>
-          <div className='subdropdown__item__icon mr-3'>
-            <i className='fa fa-fw fa-arrows-alt' />
+            <div className='subdropdown__item__text'>
+              {props.t('Edit')}
+            </div>
           </div>
-          <div className='subdropdown__item__text'>
-            {props.t('Move')}
+        }
+
+        {props.idRoleUserWorkspace >= 4 &&
+          <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.move}>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-arrows-alt' />
+            </div>
+
+            <div className='subdropdown__item__text'>
+              {props.t('Move')}
+            </div>
           </div>
-        </div>
+        }
 
         {/* <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.download}>
           <div className='subdropdown__item__icon mr-3'>
           </div>
         </div> */ }
 
-        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.archive}>
-          <div className='subdropdown__item__icon mr-3'>
-            <i className='fa fa-fw fa-archive' />
-          </div>
-          <div className='subdropdown__item__text'>
-            {props.t('Archive')}
-          </div>
-        </div>
+        {props.idRoleUserWorkspace >= 4 &&
+          <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.archive}>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-archive' />
+            </div>
 
-        <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.delete}>
-          <div className='subdropdown__item__icon mr-3'>
-            <i className='fa fa-fw fa-trash-o' />
+            <div className='subdropdown__item__text'>
+              {props.t('Archive')}
+            </div>
           </div>
-          <div className='subdropdown__item__text'>
-            {props.t('Delete')}
+        }
+
+        {props.idRoleUserWorkspace >= 4 &&
+          <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.delete}>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-trash-o' />
+            </div>
+
+            <div className='subdropdown__item__text'>
+              {props.t('Delete')}
+            </div>
           </div>
-        </div>
+        }
 
       </div>
     </div>

frontend/src/component/Workspace/ContentItem.jsx

         </div>
       </div>
 
-      <div className='d-none d-md-flex'>
-        <BtnExtandedAction onClickExtendedAction={props.onClickExtendedAction} />
-      </div>
+      {props.idRoleUserWorkspace >= 2 &&
+        <div className='d-none d-md-flex'>
+          <BtnExtandedAction
+            idRoleUserWorkspace={props.idRoleUserWorkspace}
+            onClickExtendedAction={props.onClickExtendedAction}
+          />
+        </div>
+      }
 
       <div className={classnames('content__status')} style={{color: status.hexcolor}}>
         <div className='content__status__text d-none d-xl-flex align-items-center justify-content-between'>

frontend/src/component/Workspace/Folder.jsx

       availableApp,
       folderData,
       // onClickItem,
+      idRoleUserWorkspace,
       onClickExtendedAction,
       onClickCreateContent,
       // onClickFolder,
           </div>
 
           <div className='folder__header__button'>
-
-            <div className='folder__header__button__addbtn'>
-              <button
-                className='addbtn__text btn btn-outline-primary dropdown-toggle'
-                type='button'
-                id='dropdownMenuButton'
-                data-toggle='dropdown'
-                aria-haspopup='true'
-                aria-expanded='false'
-                onClick={e => e.stopPropagation()}
-              >
-                {t('Create in folder...')}
-              </button>
-
-              <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
-                <SubDropdownCreateButton
-                  idFolder={null}
-                  availableApp={availableApp}
-                  onClickCreateContent={onClickCreateContent}
-                />
-              </div>
-
-              <div className='d-none d-md-flex'>
-                <BtnExtandedAction onClickExtendedAction={{
-                  edit: e => onClickExtendedAction.edit(e, folderData),
-                  move: e => onClickExtendedAction.move(e, folderData),
-                  download: e => onClickExtendedAction.download(e, folderData),
-                  archive: e => onClickExtendedAction.archive(e, folderData),
-                  delete: e => onClickExtendedAction.delete(e, folderData)
-                }} />
+            {idRoleUserWorkspace >= 2 &&
+              <div className='folder__header__button__addbtn'>
+                <button
+                  className='addbtn__text btn btn-outline-primary dropdown-toggle'
+                  type='button'
+                  id='dropdownMenuButton'
+                  data-toggle='dropdown'
+                  aria-haspopup='true'
+                  aria-expanded='false'
+                  onClick={e => e.stopPropagation()}
+                >
+                  {t('Create in folder...')}
+                </button>
+
+                <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
+                  <SubDropdownCreateButton
+                    idFolder={null}
+                    availableApp={availableApp}
+                    onClickCreateContent={onClickCreateContent}
+                  />
+                </div>
+
+                <div className='d-none d-md-flex'>
+                  <BtnExtandedAction
+                    idRoleUserWorkspace={idRoleUserWorkspace}
+                    onClickExtendedAction={{
+                      edit: e => onClickExtendedAction.edit(e, folderData),
+                      move: e => onClickExtendedAction.move(e, folderData),
+                      download: e => onClickExtendedAction.download(e, folderData),
+                      archive: e => onClickExtendedAction.archive(e, folderData),
+                      delete: e => onClickExtendedAction.delete(e, folderData)
+                    }}
+                  />
+                </div>
               </div>
-
-            </div>
+            }
           </div>
 
           <div className='folder__header__status' />
-
         </div>
 
         <div className='folder__content'>

frontend/src/component/Workspace/OpenContentApp.jsx

 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import appFactory from '../../appFactory.js'
+import { ROLE, findIdRoleUserWorkspace } from '../../helper.js'
 
 // @FIXME Côme - 2018/07/31 - should this be in a component like AppFeatureManager ?
 export class OpenContentApp extends React.Component {
   openContentApp = () => {
-    const { idWorkspace, appOpenedType, user, workspaceContentList, contentType, renderAppFeature, dispatchCustomEvent, match } = this.props
+    const {
+      idWorkspace,
+      appOpenedType,
+      user,
+      currentWorkspace,
+      workspaceContentList,
+      contentType,
+      renderAppFeature,
+      dispatchCustomEvent,
+      match
+    } = this.props
 
     if (isNaN(idWorkspace) || idWorkspace === -1) return
 
         renderAppFeature(
           contentType.find(ct => ct.slug === contentToOpen.type),
           user,
+          findIdRoleUserWorkspace(user.user_id, currentWorkspace.memberList, ROLE),
           contentToOpen
         )
         this.props.updateAppOpenedType(contentToOpen.type)
   }
 }
 
-const mapStateToProps = ({ user, workspaceContentList, contentType }) => ({ user, workspaceContentList, contentType })
+const mapStateToProps = ({ user, currentWorkspace, workspaceContentList, contentType }) => ({
+  user, currentWorkspace, workspaceContentList, contentType
+})
 export default withRouter(connect(mapStateToProps)(appFactory(OpenContentApp)))

frontend/src/container/WorkspaceContent.jsx

 import { connect } from 'react-redux'
 import { withRouter, Route } from 'react-router-dom'
 import appFactory from '../appFactory.js'
-import { PAGE } from '../helper.js'
+import { PAGE, ROLE, findIdRoleUserWorkspace } from '../helper.js'
 import Folder from '../component/Workspace/Folder.jsx'
 import ContentItem from '../component/Workspace/ContentItem.jsx'
 import ContentItemHeader from '../component/Workspace/ContentItemHeader.jsx'
 } from 'tracim_frontend_lib'
 import {
   getWorkspaceContentList,
+  getWorkspaceMemberList,
   getFolderContent,
   putWorkspaceContentArchived,
   putWorkspaceContentDeleted
   newFlashMessage,
   setWorkspaceContentList,
   setWorkspaceContentArchived,
-  setWorkspaceContentDeleted
+  setWorkspaceContentDeleted,
+  setWorkspaceMemberList
 } from '../action-creator.sync.js'
 
 const qs = require('query-string')
   }
 
   loadContentList = async idWorkspace => {
-    const { user, location, dispatch } = this.props
+    const { user, dispatch } = this.props
 
     const wsContent = await dispatch(getWorkspaceContentList(user, idWorkspace, 0))
+    const wsMember = await dispatch(getWorkspaceMemberList(user, idWorkspace))
 
-    if (wsContent.status === 200) dispatch(setWorkspaceContentList(wsContent.json, qs.parse(location.search).type))
+    if (await wsContent.status === 200) dispatch(setWorkspaceContentList(wsContent.json))
     else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
+
+    if (await wsMember.status === 200) dispatch(setWorkspaceMemberList(wsMember.json))
+    else dispatch(newFlashMessage('Error while loading members list', 'warning'))
   }
 
   handleClickContentItem = content => {
   handleUpdateAppOpenedType = openedAppType => this.setState({appOpenedType: openedAppType})
 
   render () {
-    const { workspaceContentList, contentType } = this.props
+    const { user, currentWorkspace, workspaceContentList, contentType } = this.props
 
     const filterWorkspaceContent = (contentList, filter) => {
       return filter.length === 0
       ? filterWorkspaceContent(workspaceContentList, urlFilter ? [urlFilter] : [])
       : []
 
+    const idRoleUserWorkspace = findIdRoleUserWorkspace(user.user_id, currentWorkspace.memberList, ROLE)
+
     return (
       <div className='WorkspaceContent' style={{width: '100%'}}>
         <OpenContentApp
             title='Liste des Contenus'
             subtitle={workspaceContentList.label ? workspaceContentList.label : ''}
           >
-            <DropdownCreateButton
-              parentClass='workspace__header__btnaddcontent'
-              idFolder={null} // null because it is workspace root content
-              onClickCreateContent={this.handleClickCreateContent}
-              availableApp={contentType.filter(ct => ct.slug !== 'comment')} // @FIXME: Côme - 2018/08/21 - should use props.appList
-            />
+            {idRoleUserWorkspace >= 2 &&
+              <DropdownCreateButton
+                parentClass='workspace__header__btnaddcontent'
+                idFolder={null} // null because it is workspace root content
+                onClickCreateContent={this.handleClickCreateContent}
+                availableApp={contentType.filter(ct => ct.slug !== 'comment')} // @FIXME: Côme - 2018/08/21 - should use props.appList
+              />
+            }
           </PageTitle>
 
           <PageContent parentClass='workspace__content'>
                     availableApp={contentType.filter(ct => ct.slug !== 'comment')} // @FIXME: Côme - 2018/08/21 - should use props.appList
                     folderData={c}
                     onClickItem={this.handleClickContentItem}
+                    idRoleUserWorkspace={idRoleUserWorkspace}
                     onClickExtendedAction={{
                       edit: this.handleClickEditContentItem,
                       move: this.handleClickMoveContentItem,
                     statusSlug={c.statusSlug}
                     contentType={contentType.length ? contentType.find(ct => ct.slug === c.type) : null}
                     onClickItem={() => this.handleClickContentItem(c)}
+                    idRoleUserWorkspace={idRoleUserWorkspace}
                     onClickExtendedAction={{
                       edit: e => this.handleClickEditContentItem(e, c),
                       move: e => this.handleClickMoveContentItem(e, c),
               )}
             </div>
 
-            <DropdownCreateButton
-              customClass='workspace__content__button'
-              idFolder={null}
-              onClickCreateContent={this.handleClickCreateContent}
-              availableApp={contentType.filter(ct => ct.slug !== 'comment')} // @FIXME: Côme - 2018/08/21 - should use props.appList
-            />
+            {idRoleUserWorkspace >= 2 &&
+              <DropdownCreateButton
+                customClass='workspace__content__button'
+                idFolder={null}
+                onClickCreateContent={this.handleClickCreateContent}
+                availableApp={contentType.filter(ct => ct.slug !== 'comment')} // @FIXME: Côme - 2018/08/21 - should use props.appList
+              />
+            }
           </PageContent>
 
         </PageWrapper>
   }
 }
 
-const mapStateToProps = ({ user, workspaceContentList, workspaceList, contentType }) => ({ user, workspaceContentList, workspaceList, contentType })
+const mapStateToProps = ({ user, currentWorkspace, workspaceContentList, workspaceList, contentType }) => ({
+  user, currentWorkspace, workspaceContentList, workspaceList, contentType
+})
 export default withRouter(connect(mapStateToProps)(appFactory(WorkspaceContent)))

frontend/src/helper.js

 }
 
 export const ROLE = [{
-  id: 0,
+  id: 1,
   slug: 'reader',
   faIcon: 'eye',
-  hexcolor: '#15D948',
+  hexcolor: '#15d948',
   label: 'Reader'
 }, {
-  id: 1,
+  id: 2,
   slug: 'contributor',
   faIcon: 'pencil',
-  hexcolor: '#3145F7',
+  hexcolor: '#3145f7',
   label: 'Contributor'
 }, {
-  id: 2,
+  id: 4,
   slug: 'content-manager',
   faIcon: 'graduation-cap',
   hexcolor: '#f2af2d',
   label: 'Content manager'
 }, {
-  id: 3,
+  id: 8,
   slug: 'workspace-manager',
   faIcon: 'gavel',
   hexcolor: '#ed0007',
   label: 'Workspace manager'
 }]
 
+export const findIdRoleUserWorkspace = (idUser, memberList, roleList) => {
+  const myself = memberList.find(u => u.id === idUser) || {role: 'reader'}
+  return (roleList.find(r => myself.role === r.slug) || {id: 1}).id
+}
+
+// Côme - 2018/08/21 - useful ?
+export const ROLE2 = {
+  reader: {
+    id: 1,
+    sluf: 'reader',
+    faIcon: 'eye',
+    hexcolor: '#15D948',
+    label: 'Reader'
+  },
+  contributor: {
+    id: 2,
+    slug: 'contributor',
+    faIcon: 'pencil',
+    hexcolor: '#3145f7',
+    label: 'Contributor'
+  },
+  contentManager: {
+    id: 4,
+    slug: 'content-manager',
+    faIcon: 'graduation-cap',
+    hexcolor: '#f2af2d',
+    label: 'Content manager'
+  },
+  workspaceManager: {
+    id: 8,
+    slug: 'workspace-manager',
+    faIcon: 'gavel',
+    hexcolor: '#ed0007',
+    label: 'Workspace manager'
+  }
+}
+
 export const PROFILE = {
   ADMINISTRATOR: 'administrators',
+  MANAGER: 'managers',
   USER: 'users'
 }
 

frontend_app_html-document/src/container/HtmlDocument.jsx

           customColor={config.hexcolor}
           faIcon={config.faIcon}
           title={content.label}
+          idRoleUserWorkspace={loggedUser.idRoleUserWorkspace}
           onClickCloseBtn={this.handleClickBtnCloseApp}
           onValidateChangeTitle={this.handleSaveEditTitle}
         />
         >
           <div /* this div in display flex, justify-content space-between */>
             <div className='d-flex'>
-              <NewVersionBtn
-                customColor={config.hexcolor}
-                onClickNewVersionBtn={this.handleClickNewVersion}
-                disabled={mode !== MODE.VIEW}
-              />
+              {loggedUser.idRoleUserWorkspace >= 2 &&
+                <NewVersionBtn
+                  customColor={config.hexcolor}
+                  onClickNewVersionBtn={this.handleClickNewVersion}
+                  disabled={mode !== MODE.VIEW}
+                />
+              }
 
               {mode === MODE.REVISION &&
                 <button
             </div>
 
             <div className='d-flex'>
-              <SelectStatus
-                selectedStatus={config.availableStatuses.find(s => s.slug === content.status)}
-                availableStatus={config.availableStatuses}
-                onChangeStatus={this.handleChangeStatus}
-                disabled={mode === MODE.REVISION}
-              />
-
-              <ArchiveDeleteContent
-                customColor={config.hexcolor}
-                onClickArchiveBtn={this.handleClickArchive}
-                onClickDeleteBtn={this.handleClickDelete}
-                disabled={mode === MODE.REVISION}
-              />
+              {loggedUser.idRoleUserWorkspace >= 2 &&
+                <SelectStatus
+                  selectedStatus={config.availableStatuses.find(s => s.slug === content.status)}
+                  availableStatus={config.availableStatuses}
+                  onChangeStatus={this.handleChangeStatus}
+                  disabled={mode === MODE.REVISION}
+                />
+              }
+
+              {loggedUser.idRoleUserWorkspace >= 4 &&
+                <ArchiveDeleteContent
+                  customColor={config.hexcolor}
+                  onClickArchiveBtn={this.handleClickArchive}
+                  onClickDeleteBtn={this.handleClickDelete}
+                  disabled={mode === MODE.REVISION}
+                />
+              }
             </div>
           </div>
         </PopinFixedOption>

frontend_app_html-document/src/helper.js

     email: 'osef@algoo.fr',
     lang: 'en',
     avatar_url: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4',
-    auth: btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
+    auth: btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`),
+    idRoleUserWorkspace: 1
   },
   content: {
     author: {

frontend_app_thread/src/container/Thread.jsx

           customColor={config.hexcolor}
           faIcon={config.faIcon}
           title={content.label}
+          idRoleUserWorkspace={loggedUser.idRoleUserWorkspace}
           onClickCloseBtn={this.handleClickBtnCloseApp}
           onValidateChangeTitle={this.handleSaveEditTitle}
         />
           i18n={i18n}
         >
           <div className='justify-content-end'>
-            <SelectStatus
-              selectedStatus={config.availableStatuses.find(s => s.slug === content.status)}
-              availableStatus={config.availableStatuses}
-              onChangeStatus={this.handleChangeStatus}
-              disabled={false}
-            />
-
-            <ArchiveDeleteContent
-              customColor={config.hexcolor}
-              onClickArchiveBtn={this.handleClickArchive}
-              onClickDeleteBtn={this.handleClickDelete}
-              disabled={false}
-            />
+            {loggedUser.idRoleUserWorkspace >= 2 &&
+              <SelectStatus
+                selectedStatus={config.availableStatuses.find(s => s.slug === content.status)}
+                availableStatus={config.availableStatuses}
+                onChangeStatus={this.handleChangeStatus}
+                disabled={false}
+              />
+            }
+
+            {loggedUser.idRoleUserWorkspace >= 4 &&
+              <ArchiveDeleteContent
+                customColor={config.hexcolor}
+                onClickArchiveBtn={this.handleClickArchive}
+                onClickDeleteBtn={this.handleClickDelete}
+                disabled={false}
+              />
+            }
           </div>
         </PopinFixedOption>
 

frontend_app_thread/src/helper.js

     lastname: 'Stoilenom',
     email: 'osef@algoo.fr',
     avatar_url: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4',
-    lang: 'en'
+    auth: btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`),
+    lang: 'en',
+    idRoleUserWorkspace: 1
   },
   content: {
     author: {

frontend_lib/src/component/PopinFixed/PopinFixedHeader.jsx

   }
 
   render () {
-    const { customClass, customColor, faIcon, title, onClickCloseBtn } = this.props
+    const { customClass, customColor, faIcon, title, idRoleUserWorkspace, onClickCloseBtn } = this.props
 
     return (
       <div className={classnames('wsContentGeneric__header', `${customClass}__header`)} style={{backgroundColor: customColor}}>
           }
         </div>
 
-        <div
-          className={classnames('wsContentGeneric__header__edittitle', `${customClass}__header__changetitle`)}
-          onClick={this.handleClickChangeTitleBtn}
-        >
-          {this.state.editTitle ? <i className='fa fa-check' title='Valider le Titre' /> : <i className='fa fa-pencil' title='Modifier le Titre' />}
-        </div>
+        {idRoleUserWorkspace >= 2 &&
+          <div
+            className={classnames('wsContentGeneric__header__edittitle', `${customClass}__header__changetitle`)}
+            onClick={this.handleClickChangeTitleBtn}
+          >
+            {this.state.editTitle ? <i className='fa fa-check' title='Valider le Titre' /> : <i className='fa fa-pencil' title='Modifier le Titre' />}
+          </div>
+        }
 
         <div
           className={classnames('wsContentGeneric__header__close', `${customClass}__header__close`)}
   customClass: PropTypes.string,
   customColor: PropTypes.string,
   title: PropTypes.string,
+  idRoleUserWorkspace: PropTypes.number,
   onValidateChangeTitle: PropTypes.func
 }
 
   customClass: '',
   customColor: '',
   title: '',
+  idRoleUserWorkspace: 1,
   onChangeTitle: () => {}
 }

frontend_lib/src/component/Timeline/Timeline.jsx

             <li style={{visibility: 'hidden'}} ref={el => { this.timelineBottom = el }} />
           </ul>
 
-          <form className={classnames(`${props.customClass}__texteditor`, 'timeline__body__texteditor')}>
-            <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__body__texteditor__textinput')}>
-              <textarea
-                id='wysiwygTimelineComment'
-                placeholder='Votre message ...'
-                value={props.newComment}
-                onChange={props.onChangeNewComment}
-                disabled={props.disableComment}
-              />
-            </div>
-
-            <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__body__texteditor__wrapper')}>
-              <div className={classnames(`${props.customClass}__texteditor__advancedtext`, 'timeline__body__texteditor__advancedtext')}>
-                <button
-                  type='button'
-                  className={classnames(
-                    `${props.customClass}__texteditor__advancedtext__btn timeline__body__texteditor__advancedtext__btn btn`
-                  )}
-                  onClick={props.onClickWysiwygBtn}
+          {props.loggedUser.idRoleUserWorkspace >= 2 &&
+            <form className={classnames(`${props.customClass}__texteditor`, 'timeline__body__texteditor')}>
+              <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__body__texteditor__textinput')}>
+                <textarea
+                  id='wysiwygTimelineComment'
+                  placeholder='Votre message ...'
+                  value={props.newComment}
+                  onChange={props.onChangeNewComment}
                   disabled={props.disableComment}
-                  style={{
-                    backgroundColor: 'transparent',
-                    color: '#333',
-                    borderColor: props.customColor,
-                    ':hover': {
-                      backgroundColor: props.customColor,
-                      color: '#fdfdfd'
-                    }
-                  }}
-                  key={'timeline__comment__advancedtext'}
-                >
-                  {props.wysiwyg ? 'Texte simple' : 'Texte riche'}
-                </button>
+                />
               </div>
 
-              <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__body__texteditor__submit')}>
-                <button
-                  type='button'
-                  className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__body__texteditor__submit__btn btn')}
-                  onClick={props.onClickValidateNewCommentBtn}
-                  disabled={props.disableComment}
-                  style={{
-                    backgroundColor: props.customColor,
-                    color: '#fdfdfd',
-                    ':hover': {
-                      backgroundColor: color(props.customColor).darken(0.15).hexString()
-                    }
-                  }}
-                  key={'timeline__comment__send'}
-                >
-                  Envoyer
-                  <div
-                    className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__body__texteditor__submit__btn__icon')}>
-                    <i className='fa fa-paper-plane-o' />
-                  </div>
-                </button>
+              <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__body__texteditor__wrapper')}>
+                <div className={classnames(`${props.customClass}__texteditor__advancedtext`, 'timeline__body__texteditor__advancedtext')}>
+                  <button
+                    type='button'
+                    className={classnames(
+                      `${props.customClass}__texteditor__advancedtext__btn timeline__body__texteditor__advancedtext__btn btn`
+                    )}
+                    onClick={props.onClickWysiwygBtn}
+                    disabled={props.disableComment}
+                    style={{
+                      backgroundColor: 'transparent',
+                      color: '#333',
+                      borderColor: props.customColor,
+                      ':hover': {
+                        backgroundColor: props.customColor,
+                        color: '#fdfdfd'
+                      }
+                    }}
+                    key={'timeline__comment__advancedtext'}
+                  >
+                    {props.wysiwyg ? 'Texte simple' : 'Texte riche'}
+                  </button>
+                </div>
+
+                <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__body__texteditor__submit')}>
+                  <button
+                    type='button'
+                    className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__body__texteditor__submit__btn btn')}
+                    onClick={props.onClickValidateNewCommentBtn}
+                    disabled={props.disableComment}
+                    style={{
+                      backgroundColor: props.customColor,
+                      color: '#fdfdfd',
+                      ':hover': {
+                        backgroundColor: color(props.customColor).darken(0.15).hexString()
+                      }
+                    }}
+                    key={'timeline__comment__send'}
+                  >
+                    Envoyer
+                    <div
+                      className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__body__texteditor__submit__btn__icon')}>
+                      <i className='fa fa-paper-plane-o' />
+                    </div>
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
+            </form>
+          }
         </div>
       </div>
     )
   loggedUser: {
     id: '',
     name: '',
-    avatar: ''
+    avatar: '',
+    idRoleUserWorkspace: 1
   },
   timelineData: [],
   wysiwyg: false,