switch workspace routes and templates to Flask and Jinja

atst/app.py

@@ -10,6 +10,7 @@ from atst.sessions import RedisSessions
 from atst.database import db
 from atst.assets import assets
 from atst.routes import bp
+from atst.routes.workspaces import bp as workspace_routes
 
 ENV = os.getenv("TORNADO_ENV", "dev")
 
@@ -31,6 +32,7 @@ def make_app(config):
     assets.init_app(app)
 
     app.register_blueprint(bp)
+    app.register_blueprint(workspace_routes)
 
     return app
 

atst/routes/workspaces.py

@@ -0,0 +1,31 @@
+from flask import Blueprint, render_template
+
+from atst.domain.workspaces import Projects, Members
+from atst.database import db
+
+bp = Blueprint("workspaces", __name__)
+
+mock_workspaces = [
+    {
+        "name": "Unclassified IaaS and PaaS for Defense Digital Service (DDS)",
+        "id": "5966187a-eff9-44c3-aa15-4de7a65ac7ff",
+        "task_order": {"number": 123456},
+        "user_count": 23,
+    }
+]
+
+@bp.route("/workspaces")
+def workspaces():
+    return render_template("workspaces.html", page=5, workspaces=mock_workspaces)
+
+@bp.route("/workspaces/<workspace_id>/projects")
+def workspace_projects(workspace_id):
+    projects_repo = Projects()
+    projects = projects_repo.get_many(workspace_id)
+    return render_template("workspace_projects.html", workspace_id=workspace_id, projects=projects)
+
+@bp.route("/workspaces/<workspace_id>/members")
+def workspace_members(workspace_id):
+    members_repo = Members()
+    members = members_repo.get_many(workspace_id)
+    return render_template("workspace_members.html", workspace_id=workspace_id, members=members)

templates/base_workspace.html

@@ -1,4 +1,4 @@
-{% extends "base.html.to" %}
+{% extends "base.html" %}
 
 {% block content %}
 
@@ -8,8 +8,8 @@
     </div>
 
     <div class='col col--grow'>
-      {% block workspace_content %}{% end %}
+      {% block workspace_content %}{% endblock %}
     </div>
   </div>
 
-{% end %}
+{% endblock %}

templates/components.html

@@ -30,3 +30,15 @@
     {% endif %}
     </li>
 {%- endmacro %}
+
+{% macro EmptyState(self, message, actionLabel, actionHref, icon=None) -%}
+<div class='empty-state'>
+  <p>{{ message }}</p>
+
+  {% if icon %}
+    {{ Icon(icon) }}
+  {% endif %}
+
+  <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
+</div>
+{%- endmacro %}

templates/navigation/workspace_navigation.html.to

@@ -1,42 +1,44 @@
+{% from "components.html" import SidenavItem %}
+
 <nav class='sidenav workspace-navigation'>
   <ul>
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Projects",
-      href=reverse_url('workspace_projects', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'),
+      href=url_for("workspaces.workspace_projects", workspace_id="123456"),
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'),
       subnav=[
         {
           "label": "Add New Project",
           "href":"/",
-          "active": matchesPath('workspaces/projects/new'),
+          "active": g.matchesPath('workspaces/projects/new'),
           "icon": "plus"
         }
       ]
-    )%}
+    )}}
 
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Members",
-      href=reverse_url('workspace_members', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'),
+      href="/workspaces/{}/members".format('123456'),
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'),
       subnav=[
         {
           "label": "Add New Member",
           "href": "",
-          "active": matchesPath('/workspaces/members/new'),
+          "active": g.matchesPath('/workspaces/members/new'),
           "icon": "plus"
         },
         {
           "label": "Editing Member",
           "href": "",
-          "active": matchesPath('/workspaces/123456/members/789/edit')
+          "active": g.matchesPath('/workspaces/123456/members/789/edit')
         }
       ]
-    )%}
+    )}}
 
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Funding & Reports",
-      href=reverse_url('workspace_projects', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
-    )%}
+      href=url_for("workspaces.workspace_projects", workspace_id="123456"),
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
+    )}}
   </ul>
 </nav>

templates/workspace_members.html

@@ -1,15 +1,17 @@
-{% extends "base_workspace.html.to" %}
+{% from "components.html" import EmptyState %}
+
+{% extends "base_workspace.html" %}
 
 {% block workspace_content %}
 
 {% if not members %}
 
-  {% module EmptyState(
+  {{ EmptyState(
     'There are currently no members in this Workspace.',
     actionLabel='Invite a new Member',
     actionHref='/members/new',
     icon='avatar'
-  )%}
+  )}}
 
 
 {% else %}
@@ -59,17 +61,17 @@
         {% for m in members %}
         <tr>
           <td><a href="/workspaces/123456/members/789/edit" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
-          <td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
+          <td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% endif %}</td>
           <td>{{ m['status'] }}</a></td>
           <td>{{ m['workspace_role'] }}</a></td>
         </tr>
-        {% end %}
+        {% endfor %}
       </tbody>
     </table>
   </div>
 
-{% end %}
+{% endif %}
 
 
-{% end %}
+{% endblock %}
 

templates/workspace_projects.html

@@ -1,13 +1,15 @@
-{% extends "base_workspace.html.to" %}
+{% from "components.html" import Icon %}
+
+{% extends "base_workspace.html" %}
 
 {% block workspace_content %}
 
 {% for project in projects %}
   <div class='block-list project-list-item'>
     <header class='block-list__header'>
-      <h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
+      <h2 class='block-list__title'>{{ project['name'] }} ({{ project['environments']|length }} environments)</h2>
       <a class='icon-link' href='/workspaces/123456/projects/789/edit'>
-        {% module Icon('edit') %}
+        {{ Icon('edit') }}
         <span>edit</span>
       </a>
     </header>
@@ -15,7 +17,7 @@
       {% for environment in project['environments'] %}
         <li class='block-list__item project-list-item__environment'>
           <a href='/' target='_blank' rel='noopener noreferrer' class='project-list-item__environment__link'>
-            {% module Icon('link') %}
+            {{ Icon('link') }}
             <span>{{ environment["name"]}}</span>
           </a>
 
@@ -24,10 +26,10 @@
             <span>members</span>
           </div>
         </li>
-      {% end %}
+      {% endfor %}
     </ul>
   </div>
-{% end %}
+{% endfor %}
 
-{% end %}
+{% endblock %}
 

templates/workspaces.html

@@ -1,4 +1,4 @@
-{% extends "base.html.to" %}
+{% extends "base.html" %}
 
 {% block content %}
 <div class='col'>
@@ -23,9 +23,9 @@
           <span class="label">{{ w['user_count'] }}</span><span class='h6'>Users</span>
         </td>
       </tr>
-    {% end %}
+    {% endfor %}
     </tbody>
   </table>
 </div>
-{% end %}
+{% endblock %}