Merge pull request #1561 from pierotofy/bigfix

Hide Add Project button when user doesn't have permissions

app/static/app/js/Dashboard.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './css/Dashboard.scss';
 import ProjectList from './components/ProjectList';
 import EditProjectDialog from './components/EditProjectDialog';
@@ -11,9 +12,16 @@ import $ from 'jquery';
 import { _ } from './classes/gettext';
 
 class Dashboard extends React.Component {
-  constructor(){
-    super();
-
+  static defaultProps = {
+    permissions: []
+  };
+  static propTypes = {
+    permissions: PropTypes.array.isRequired,
+  };
+
+  constructor(props){
+    super(props);
+
     this.handleAddProject = this.handleAddProject.bind(this);
     this.addNewProject = this.addNewProject.bind(this);
   }
@@ -58,14 +66,15 @@ class Dashboard extends React.Component {
     return (
       <Router basename="/dashboard">
         <div>
+          {this.props.permissions.indexOf("add_project") !== -1 ? 
           <div className="text-right add-button">
-            <button type="button" 
+             <button type="button" 
                     className="btn btn-primary btn-sm"
                     onClick={this.handleAddProject}>
               <i className="glyphicon glyphicon-plus"></i>
               {_("Add Project")}
             </button>
-          </div>
+          </div> : ""}
 
           <EditProjectDialog 
             saveAction={this.addNewProject}
@@ -80,10 +89,11 @@ class Dashboard extends React.Component {
 
 $(function(){
     $("[data-dashboard]").each(function(){
-        window.ReactDOM.render(<Dashboard/>, $(this).get(0));
+        let props = $(this).data();
+        delete(props.dashboard);
+        window.ReactDOM.render(<Dashboard {...props}/>, $(this).get(0));
     });
 
-
     // Warn users if there's any sort of work in progress before
     // they press the back button on the browser
     // Yes it's a hack. No we're not going to track state in React just

app/static/app/js/tests/Dashboard.test.jsx

@@ -4,7 +4,7 @@ import Dashboard from '../Dashboard';
 
 describe('<Dashboard />', () => {
   it('renders without exploding', () => {
-    const wrapper = shallow(<Dashboard />);
+    const wrapper = shallow(<Dashboard permissions={['add_project']} />);
     expect(wrapper.exists()).toBe(true);
   })
 });

app/templates/app/dashboard.html

@@ -43,7 +43,11 @@ <h3>{% trans 'Welcome!' %} ☺</h3>
 			</p>
 		{% endif %}
 
-		<div id="dashboard-app" data-dashboard></div>
+		<div id="dashboard-app" data-dashboard
+			{% for key, value in params %}
+				data-{{key}}="{{value}}"
+			{% endfor %}
+		></div>
 
 	{% endif %}
 {% endblock %}

app/views/app.py

@@ -41,13 +41,20 @@ def dashboard(request):
     no_tasks = Task.objects.filter(project__owner=request.user).count() == 0
     no_projects = Project.objects.filter(owner=request.user).count() == 0
 
+    permissions = []
+    if request.user.has_perm('app.add_project'):
+        permissions.append('add_project')
+
     # Create first project automatically
-    if no_projects and request.user.has_perm('app.add_project'):
+    if no_projects and 'add_project' in permissions:
         Project.objects.create(owner=request.user, name=_("First Project"))
 
     return render(request, 'app/dashboard.html', {'title': _('Dashboard'),
         'no_processingnodes': no_processingnodes,
-        'no_tasks': no_tasks
+        'no_tasks': no_tasks,
+        'params': {
+            'permissions': json.dumps(permissions)
+        }.items()
     })