[https://github.com/tracim/tracim/issues/787] added link to admin pages in top right user dropdown

frontend/src/component/Header/MenuActionListItem/MenuProfil.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
-import { PAGE } from '../../../helper.js'
+import { PAGE, PROFILE } from '../../../helper.js'
 import { translate } from 'react-i18next'
 
 const MenuProfil = props => {
@@ -11,15 +11,32 @@ const MenuProfil = props => {
         <div className='profilgroup dropdown'>
           <button className='profilgroup__name btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
             <img className='profilgroup__name__imgprofil' src={props.user.avatar_url} />
+
             <div className='profilgroup__name__text'>
-              {props.user.name}
+              {props.user.public_name}
             </div>
           </button>
+
           <div className='profilgroup__setting dropdown-menu' aria-labelledby='dropdownMenuButton'>
+            {props.user.profile === PROFILE.ADMINISTRATOR &&
+              <Link className='setting__link dropdown-item' to={PAGE.ADMIN.WORKSPACE}>
+                <i className='fa fa-fw fa-space-shuttle mr-2' />
+                {props.t('Admin workspace')}
+              </Link>
+            }
+
+            {props.user.profile === PROFILE.ADMINISTRATOR &&
+              <Link className='setting__link dropdown-item' to={PAGE.ADMIN.USER}>
+                <i className='fa fa-fw fa-users mr-2' />
+                {props.t('Admin user')}
+              </Link>
+            }
+
             <Link className='setting__link dropdown-item' to={PAGE.ACCOUNT}>
               <i className='fa fa-fw fa-user-o mr-2' />
               {props.t('My Account')}
             </Link>
+
             {/* <div className='setting__link dropdown-item'>Mot de passe</div> */}
             <div className='setting__link dropdown-item' onClick={props.onClickLogout}>
               <i className='fa fa-fw fa-sign-out mr-2' />

frontend/src/container/AdminWorkspacePage.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Sidebar from './Sidebar.jsx'
 import {
   Delimiter,
   PageWrapper,
@@ -11,188 +10,184 @@ import { translate } from 'react-i18next'
 class AdminWorkspacePage extends React.Component {
   render () {
     return (
-      <div className='sidebarpagecontainer'>
-        <Sidebar />
+      <PageWrapper customClass='adminWorkspacePage'>
+        <PageTitle
+          parentClass={'adminWorkspacePage'}
+          title={'Workspace management'}
+        />
 
-        <PageWrapper customClass='adminWorkspacePage'>
-          <PageTitle
-            parentClass={'adminWorkspacePage'}
-            title={'Workspace management'}
-          />
+        <PageContent parentClass='adminWorkspacePage'>
 
-          <PageContent parentClass='adminWorkspacePage'>
+          <div className='adminWorkspacePage__description'>
+            This page informs all workspaces of the instances
+          </div>
 
-            <div className='adminWorkspacePage__description'>
-              This page informs all workspaces of the instances
-            </div>
-
-            { /*
-              Alexi Cauvin 08/08/2018 => desactivate create workspace button due to redundancy
+          { /*
+            Alexi Cauvin 08/08/2018 => desactivate create workspace button due to redundancy
 
-              <div className='adminWorkspacePage__createworkspace'>
-                <button className='adminWorkspacePage__createworkspace__btncreate btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover'>
-                  {this.props.t('Create a workspace')}
-                </button>
-              </div>
-            */ }
+            <div className='adminWorkspacePage__createworkspace'>
+              <button className='adminWorkspacePage__createworkspace__btncreate btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover'>
+                {this.props.t('Create a workspace')}
+              </button>
+            </div>
+          */ }
 
-            <Delimiter customClass={'adminWorkspacePage__delimiter'} />
+          <Delimiter customClass={'adminWorkspacePage__delimiter'} />
 
-            <div className='adminWorkspacePage__workspaceTable'>
+          <div className='adminWorkspacePage__workspaceTable'>
 
-              <table className='table'>
-                <thead>
-                  <tr>
-                    <th scope='col'>ID</th>
-                    <th scope='col'>Workspace</th>
-                    <th scope='col'>Description</th>
-                    <th scope='col'>Member's number</th>
-                    { /*
-                      <th scope='col'>Calendar</th>
-                    */ }
-                    <th scope='col'>Delete workspace</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <th>1</th>
-                    <td>Design v_2</td>
-                    <td>Workspace about tracim v2 design</td>
-                    { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-check-square-o' />
-                        </div>
-                        Enable
-                      </td>
-                    */ }
-                    <td>8</td>
-                    <td>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                        <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                          <i className='fa fa-fw fa-trash-o' />
-                        </div>
-                        Delete
+            <table className='table'>
+              <thead>
+                <tr>
+                  <th scope='col'>ID</th>
+                  <th scope='col'>Workspace</th>
+                  <th scope='col'>Description</th>
+                  <th scope='col'>Member's number</th>
+                  { /*
+                    <th scope='col'>Calendar</th>
+                  */ }
+                  <th scope='col'>Delete workspace</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>1</th>
+                  <td>Design v_2</td>
+                  <td>Workspace about tracim v2 design</td>
+                  { /*
+                    <td className='d-flex align-items-center flex-wrap'>
+                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                        <i className='fa fa-fw fa-check-square-o' />
                       </div>
+                      Enable
                     </td>
-                  </tr>
-                  <tr>
-                    <th>2</th>
-                    <td>New features</td>
-                    <td>Add a new features : Annotated files</td>
-                    { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-square-o' />
-                        </div>
-                        Disable
-                      </td>
-                    */ }
-                    <td>5</td>
-                    <td>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                        <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                          <i className='fa fa-fw fa-trash-o' />
-                        </div>
-                        Delete
+                  */ }
+                  <td>8</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
                       </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>2</th>
+                  <td>New features</td>
+                  <td>Add a new features : Annotated files</td>
+                  { /*
+                    <td className='d-flex align-items-center flex-wrap'>
+                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                        <i className='fa fa-fw fa-square-o' />
+                      </div>
+                      Disable
                     </td>
-                  </tr>
-                  <tr>
-                    <th>3</th>
-                    <td>Fix Backend</td>
-                    <td>workspace referring to multiple issues on the backend </td>
-                    { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-check-square-o' />
-                        </div>
-                        Enable
-                      </td>
-                    */ }
-                    <td>3</td>
-                    <td>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                        <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                          <i className='fa fa-fw fa-trash-o' />
-                        </div>
-                        Delete
+                  */ }
+                  <td>5</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>3</th>
+                  <td>Fix Backend</td>
+                  <td>workspace referring to multiple issues on the backend </td>
+                  { /*
+                    <td className='d-flex align-items-center flex-wrap'>
+                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                        <i className='fa fa-fw fa-check-square-o' />
                       </div>
+                      Enable
                     </td>
-                  </tr>
-                  <tr>
-                    <th>4</th>
-                    <td>Design v_2</td>
-                    <td>Workspace about tracim v2 design</td>
-                    { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-square-o' />
-                        </div>
-                        Disable
-                      </td>
-                    */ }
-                    <td>8</td>
-                    <td>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                        <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                          <i className='fa fa-fw fa-trash-o' />
-                        </div>
-                        Delete
+                  */ }
+                  <td>3</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
                       </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>4</th>
+                  <td>Design v_2</td>
+                  <td>Workspace about tracim v2 design</td>
+                  { /*
+                    <td className='d-flex align-items-center flex-wrap'>
+                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                        <i className='fa fa-fw fa-square-o' />
+                      </div>
+                      Disable
                     </td>
-                  </tr>
-                  <tr>
-                    <th>5</th>
-                    <td>New features</td>
-                    <td>Add a new features : Annotated files</td>
-                    { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-square-o' />
-                        </div>
-                        Disable
-                      </td>
-                    */ }
-                    <td>5</td>
-                    <td>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                        <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                          <i className='fa fa-fw fa-trash-o' />
-                        </div>
-                        Delete
+                  */ }
+                  <td>8</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>5</th>
+                  <td>New features</td>
+                  <td>Add a new features : Annotated files</td>
+                  { /*
+                    <td className='d-flex align-items-center flex-wrap'>
+                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                        <i className='fa fa-fw fa-square-o' />
                       </div>
+                      Disable
                     </td>
-                  </tr>
-                  <tr>
-                    <th>6</th>
-                    <td>Fix Backend</td>
-                    <td>workspace referring to multiple issues on the backend </td>
-                    { /*
-                      <td className='d-flex align-items-center flex-wrap'>
-                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                          <i className='fa fa-fw fa-check-square-o' />
-                        </div>
-                        Enable
-                      </td>
-                    */ }
-                    <td>3</td>
-                    <td>
-                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
-                        <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
-                          <i className='fa fa-fw fa-trash-o' />
-                        </div>
-                        Delete
+                  */ }
+                  <td>5</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>6</th>
+                  <td>Fix Backend</td>
+                  <td>workspace referring to multiple issues on the backend </td>
+                  { /*
+                    <td className='d-flex align-items-center flex-wrap'>
+                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                        <i className='fa fa-fw fa-check-square-o' />
                       </div>
+                      Enable
                     </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+                  */ }
+                  <td>3</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
 
-          </PageContent>
-        </PageWrapper>
-      </div>
+        </PageContent>
+      </PageWrapper>
     )
   }
 }

frontend/src/container/AppFullscreenManager.jsx → frontend/src/container/AppFullscreenRouter.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
-import { Route } from 'react-router-dom'
-import { PAGE } from '../helper.js'
+import { Route, Redirect } from 'react-router-dom'
+import { PAGE, PROFILE } from '../helper.js'
 import appFactory from '../appFactory.js'
 
-class AppFullscreenManager extends React.Component {
+class AppFullscreenRouter extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
@@ -23,13 +23,17 @@ class AppFullscreenManager extends React.Component {
         <div id='appFullscreenContainer' />
 
         {this.state.isMounted && (// we must wait for the component to be fully mounted to be sure the div#appFullscreenContainer exists in DOM
-          <div className='emptyDiForRoute'>
+          <div className='emptyDivForRoute'>
             <Route path={PAGE.ADMIN.WORKSPACE} render={() => {
+              if (props.user.profile !== PROFILE.ADMINISTRATOR) return <Redirect to={{pathname: '/'}} />
+
               props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'workspace'}, props.user, {})
               return null
             }} />
 
             <Route path={PAGE.ADMIN.USER} render={() => {
+              if (props.user.profile !== PROFILE.ADMINISTRATOR) return <Redirect to={{pathname: '/'}} />
+
               props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'user'}, props.user, {})
               return null
             }} />
@@ -41,4 +45,4 @@ class AppFullscreenManager extends React.Component {
 }
 
 const mapStateToProps = ({ user }) => ({ user })
-export default connect(mapStateToProps)(withRouter(appFactory(AppFullscreenManager)))
+export default withRouter(connect(mapStateToProps)(appFactory(AppFullscreenRouter)))

frontend/src/container/Tracim.jsx

@@ -5,8 +5,7 @@ import Sidebar from './Sidebar.jsx'
 import Header from './Header.jsx'
 import Login from './Login.jsx'
 import Account from './Account.jsx'
-import AdminWorkspacePage from './AdminWorkspacePage.jsx'
-import AppFullscreenManager from './AppFullscreenManager.jsx'
+import AppFullscreenRouter from './AppFullscreenRouter.jsx'
 import FlashMessage from '../component/FlashMessage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import WIPcomponent from './WIPcomponent.jsx'
@@ -130,12 +129,11 @@ class Tracim extends React.Component {
           <Route path={PAGE.ADMIN.ROOT} render={() =>
             <div className='sidebarpagecontainer'>
               <Sidebar />
-              <AppFullscreenManager />
+
+              <AppFullscreenRouter />
             </div>
           } />
 
-          <Route path='/admin_temp/workspace' component={AdminWorkspacePage} />
-
           <Route path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
 
           <div id='appFeatureContainer' />

frontend/src/css/AdminWorkspacePage.styl

@@ -1,21 +0,0 @@
-.table th
-  vertical-align middle
-
-.adminWorkspacePage
-  &__createworkspace
-    &__btncreate
-      margin 25px 15px
-  &__description
-    margin 25px 0
-    font-size 20px
-  &__delimiter
-    margin 65px auto
-  &__workspaceTable
-    margin 25px 15px
-    &__deleteworkspace
-      display flex
-      align-items center
-      flex-wrap wrap
-      cursor pointer
-
-

frontend/src/css/index.styl

@@ -30,5 +30,3 @@ html, body, #content
 @import 'HomepageCard'
 
 @import 'ExtandedAction'
-
-@import 'AdminWorkspacePage'

frontend/src/helper.js

@@ -37,7 +37,7 @@ export const PAGE = {
   ADMIN: {
     ROOT: '/admin',
     WORKSPACE: '/admin/workspace',
-    USEr: '/admin/user'
+    USER: '/admin/user'
   }
 }
 
@@ -67,4 +67,9 @@ export const ROLE = [{
   label: 'Workspace manager'
 }]
 
+export const PROFILE = {
+  ADMINISTRATOR: 'administrators',
+  USER: 'users'
+}
+
 export const handleRouteFromApi = route => route.startsWith('/#') ? route.slice(2) : route

frontend_app_admin_workspace_user/src/component/AdminWorkspace.jsx

@@ -0,0 +1,194 @@
+import React from 'react'
+import {
+  Delimiter,
+  PageWrapper,
+  PageTitle,
+  PageContent
+} from 'tracim_frontend_lib'
+
+export class AdminWorkspace extends React.Component {
+  render () {
+    return (
+      <PageWrapper customClass='adminWorkspacePage'>
+        <PageTitle
+          parentClass={'adminWorkspacePage'}
+          title={'Workspace management'}
+        />
+
+        <PageContent parentClass='adminWorkspacePage'>
+
+          <div className='adminWorkspacePage__description'>
+            List of every workspaces
+          </div>
+
+          { /*
+            Alexi Cauvin 08/08/2018 => desactivate create workspace button due to redundancy
+
+            <div className='adminWorkspacePage__createworkspace'>
+              <button className='adminWorkspacePage__createworkspace__btncreate btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover'>
+                {this.props.t('Create a workspace')}
+              </button>
+            </div>
+          */ }
+
+          <Delimiter customClass={'adminWorkspacePage__delimiter'} />
+
+          <div className='adminWorkspacePage__workspaceTable'>
+
+            <table className='table'>
+              <thead>
+                <tr>
+                  <th scope='col'>ID</th>
+                  <th scope='col'>Workspace</th>
+                  <th scope='col'>Description</th>
+                  <th scope='col'>Member count</th>
+                  { /*
+                      <th scope='col'>Calendar</th>
+                    */ }
+                  <th scope='col'>Delete workspace</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>1</th>
+                  <td>Design v_2</td>
+                  <td>Workspace about tracim v2 design</td>
+                  { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-check-square-o' />
+                        </div>
+                        Enable
+                      </td>
+                    */ }
+                  <td>8</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>2</th>
+                  <td>New features</td>
+                  <td>Add a new features : Annotated files</td>
+                  { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-square-o' />
+                        </div>
+                        Disable
+                      </td>
+                    */ }
+                  <td>5</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>3</th>
+                  <td>Fix Backend</td>
+                  <td>workspace referring to multiple issues on the backend </td>
+                  { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-check-square-o' />
+                        </div>
+                        Enable
+                      </td>
+                    */ }
+                  <td>3</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>4</th>
+                  <td>Design v_2</td>
+                  <td>Workspace about tracim v2 design</td>
+                  { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-square-o' />
+                        </div>
+                        Disable
+                      </td>
+                    */ }
+                  <td>8</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>5</th>
+                  <td>New features</td>
+                  <td>Add a new features : Annotated files</td>
+                  { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-square-o' />
+                        </div>
+                        Disable
+                      </td>
+                    */ }
+                  <td>5</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>6</th>
+                  <td>Fix Backend</td>
+                  <td>workspace referring to multiple issues on the backend </td>
+                  { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-check-square-o' />
+                        </div>
+                        Enable
+                      </td>
+                    */ }
+                  <td>3</td>
+                  <td>
+                    <div className='adminWorkspacePage__workspaceTable__deleteworkspace primaryColorFont primaryColorFontDarkenHover'>
+                      <div className='adminWorkspacePage__workspaceTable__deleteworkspace__removalicon mr-3'>
+                        <i className='fa fa-fw fa-trash-o' />
+                      </div>
+                      Delete
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+        </PageContent>
+      </PageWrapper>
+    )
+  }
+}
+
+export default AdminWorkspace

frontend_app_admin_workspace_user/src/container/AdminWorkspaceUser.jsx

@@ -2,15 +2,15 @@ import React from 'react'
 import { translate } from 'react-i18next'
 import i18n from '../i18n.js'
 import {
-  addAllResourceI18n,
-  // handleFetchResult,
-  PageWrapper,
-  PageTitle,
-  PageContent
+  addAllResourceI18n
+  // handleFetchResult
 } from 'tracim_frontend_lib'
 import { debug } from '../helper.js'
 import {
 } from '../action.async.js'
+import AdminWorkspace from '../component/AdminWorkspace.jsx'
+
+require('../css/index.styl')
 
 class AdminWorkspaceUser extends React.Component {
   constructor (props) {
@@ -32,7 +32,10 @@ class AdminWorkspaceUser extends React.Component {
 
   customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
     switch (type) {
-      // console.log('%c<AdminWorkspaceUser> Custom event', 'color: #28a745', type, data)
+      case 'admin_workspace_user_showApp':
+        console.log('%c<AdminWorkspaceUser> Custom event', 'color: #28a745', type, data)
+        this.setState({config: data.config})
+        break
       default:
         break
     }
@@ -48,6 +51,7 @@ class AdminWorkspaceUser extends React.Component {
     const { state } = this
 
     console.log('%c<AdminWorkspaceUser> did update', `color: ${this.state.config.hexcolor}`, prevState, state)
+    if (prevState.config.type !== state.config.type) this.loadContent()
   }
 
   componentWillUnmount () {
@@ -67,17 +71,13 @@ class AdminWorkspaceUser extends React.Component {
 
     return (
       <div>
-        <PageWrapper customeClass='admin'>
-          <PageTitle
-            parentClass='admin__header'
-            customClass='justify-content-between'
-            title={'Admin'}
-          />
-
-          <PageContent parentClass='workspace__content'>
-            woot { this.state.config.type }
-          </PageContent>
-        </PageWrapper>
+        {this.state.config.type === 'workspace' &&
+          <AdminWorkspace />
+        }
+
+        {this.state.config.type === 'user' &&
+          <div>not yet implemented</div>
+        }
       </div>
     )
   }

frontend_app_admin_workspace_user/src/css/index.styl

@@ -1 +1,21 @@
 @import "../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
+.table th
+  vertical-align middle
+
+.adminWorkspacePage
+  &__createworkspace
+    &__btncreate
+      margin 25px 15px
+  &__description
+    margin 25px 0
+    font-size 20px
+  &__delimiter
+    margin 65px auto
+  &__workspaceTable
+    margin 25px 15px
+    &__deleteworkspace
+      display flex
+      align-items center
+      flex-wrap wrap
+      cursor pointer